diff --git a/.agents/guidelines/chromatic-projects.md b/.agents/guidelines/chromatic-projects.md
new file mode 100644
index 000000000000..1bfe00054db5
--- /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. 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                         |
+| ---------------------------------------- | ---------------------------------- |
+| 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/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 `/`
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.
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!
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/MIGRATION.md b/MIGRATION.md
index 08676d51127a..42bd07275ad6 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -29,6 +29,7 @@
   - [Sidebar rewrite: manager API changes](#sidebar-rewrite-manager-api-changes)
   - [Escape is no longer a configurable shortcut](#escape-is-no-longer-a-configurable-shortcut)
   - ['Create new story' UI feature removed](#create-new-story-ui-feature-removed)
+  - [Sidebar: standalone docs pages are no longer wrapped in a component](#sidebar-standalone-docs-pages-are-no-longer-wrapped-in-a-component)
   - [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)
@@ -40,6 +41,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)
@@ -60,6 +62,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)
@@ -69,6 +72,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)
@@ -1155,6 +1159,35 @@ Saving a story from the Controls panel is unchanged: you can still adjust contro
 
 The channel events `CREATE_NEW_STORYFILE_REQUEST`, `CREATE_NEW_STORYFILE_RESPONSE`, `FILE_COMPONENT_SEARCH_REQUEST` and `FILE_COMPONENT_SEARCH_RESPONSE`, their payload types in `storybook/internal/core-events`, and the `generateStoryFile` export from `storybook/internal/core-server` are removed too.
 
+### Sidebar: standalone docs pages are no longer wrapped in a component
+
+A docs page that doesn't belong to a component (for example an MDX file with `<Meta title="Introduction" />`) used to appear in the manager index as a component with a single `Docs` child.
+It is now a single `docs` entry.
+Addons that read `useStorybookState().index`, `sidebar.renderLabel` or sidebar filters see that entry directly.
+
+More generally, the manager index (`useStorybookState().index` and `filteredIndex`) used to type every title by its position, so the last segment of a title was always a `component`.
+
+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 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`.
+`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.
@@ -1336,6 +1369,70 @@ 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.
+
+#### 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. 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 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.
+- 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 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
+
+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.
+- `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.
+- `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`.
+- 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.
+- 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.
+
 ### 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.
@@ -1354,10 +1451,11 @@ If your custom migration tooling imports `ConfigFile` from `storybook/internal/c
 | ------------------------------------ | ------------------------ |
 | `getFieldValue`, `getSafeFieldValue` | `getValue`               |
 | `setFieldNode`, `setFieldValue`      | `set`                    |
+| `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`   |
 
-`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.
 
@@ -1605,7 +1703,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.
 
@@ -1646,6 +1744,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:
@@ -1900,6 +2036,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/.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/addons/docs/src/blocks/blocks/Source.test.tsx b/code/addons/docs/src/blocks/blocks/Source.test.tsx
new file mode 100644
index 000000000000..6591f9516774
--- /dev/null
+++ b/code/addons/docs/src/blocks/blocks/Source.test.tsx
@@ -0,0 +1,325 @@
+// @vitest-environment happy-dom
+import { renderHook } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { SourceType } from 'storybook/internal/docs-tools';
+import type { PreparedStory } from 'storybook/internal/types';
+
+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';
+
+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 />' },
+          },
+        },
+      },
+      serviceSnippet: '',
+      props: {},
+    });
+
+    // Should not apply transform a second time (would be T:T:<Button />)
+    expect(result.current.code).toBe('T:<Button />');
+  });
+
+  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('');
+
+    // Snippet arrives after initial render
+    rerender({
+      sourceContext: {
+        sources: {
+          'story--primary': {
+            [UNKNOWN_ARGS_HASH]: { code: 'T:<Button />' },
+          },
+        },
+      },
+      serviceSnippet: '',
+      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 />' },
+          },
+        },
+      },
+      serviceSnippet: '<Svc />',
+      props: {},
+    });
+
+    expect(result.current.code).toBe('T:<Svc />');
+  });
+
+  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,
+        },
+      }
+    );
+
+    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}`,
+          },
+        },
+      },
+      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(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 eb0ba03fb6d7..a9be6abff1e4 100644
--- a/code/addons/docs/src/blocks/blocks/Source.tsx
+++ b/code/addons/docs/src/blocks/blocks/Source.tsx
@@ -90,10 +90,29 @@ const useCode = ({
     // if this is an args story and there's a snippet
     (type === SourceType.AUTO && staticSnippet && isArgsStory);
 
-  const code = useSnippet ? staticSnippet : sourceParameters.originalSource || '';
-  const transformer = transformFromProps ?? sourceParameters.transform;
-
-  const transformedCode = transformer ? useTransformCode(code, transformer, storyContext) : code;
+  const sourceKind: 'service' | 'emitted' | 'original' = useSnippet
+    ? serviceSnippet
+      ? 'service'
+      : 'emitted'
+    : '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 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;
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..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
@@ -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);
 
@@ -109,6 +110,29 @@ describe('rollupBasedPlugin', () => {
     expect(entry).toMatchObject({ originalLine: positionOf(originalCode, 'play:').line });
     expect(result.map.sourcesContent).toEqual([originalCode]);
   });
+
+  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 });
+
+    const result = await transformCsf(crlf, id, {});
+    if (typeof result !== 'object') {
+      throw new Error('expected a transform result with a sourcemap');
+    }
+
+    // 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,
+      output.column
+    );
+    expect(entry).toMatchObject({
+      originalLine: positionOf(originalCode, 'play:').line,
+      originalColumn: positionOf(originalCode, 'play:').column,
+    });
+    expect(result.map.sourcesContent).toEqual([crlf]);
+  });
 });
 
 describe('transformCsf', () => {
@@ -144,7 +168,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 +177,28 @@ 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('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 () => {
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..2653272ee2bd 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,15 @@ 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();
+      code === sourceCode && !options.enrichCsf
+        ? csf
+        : loadCsf(sourceCode, { makeTitle, fileName: id }).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.test.ts b/code/addons/docs/src/csf-plugin/webpack-loader.test.ts
index 468c73b9be3d..609bd5016a73 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,119 @@
-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) };
+};
 
+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
+    );
+  });
+
+describe('webpack loader', () => {
   beforeEach(async () => {
-    dir = await mkdtemp(join(tmpdir(), 'csf-plugin-'));
+    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 });
   });
 
-  afterEach(async () => {
-    await rm(dir, { recursive: true, force: true });
+  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 result = await run(transpiled.code, transpiled.map);
+
+    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: transpiled.map.sources[0],
+    });
+    expect(result.map.sources).toEqual(transpiled.map.sources);
+    expect(result.map.sourcesContent).toEqual([originalCode]);
   });
 
-  it('adds the original source to stories', async () => {
-    const file = join(dir, 'Button.stories.ts');
-    await writeFile(file, STORY);
+  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 });
 
-    const { err, result } = await runLoader(file, STORY);
+    expect(result.map.sources).toEqual(transpiled.map.sources);
+    expect(result.map.sourcesContent).toEqual([null]);
+  });
+
+  it('maps to the loaded code when no earlier loader ran', async () => {
+    const result = await run(originalCode, undefined);
 
-    expect(err).toBeNull();
-    expect(result).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 });
   });
 
-  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('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(err).toBeNull();
-    expect(result).toBe(STORY);
+    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/docs/src/csf-plugin/webpack-loader.ts b/code/addons/docs/src/csf-plugin/webpack-loader.ts
index 3ac61a7e3e66..1ead56eaf43c 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 csfSource = loadCsf(sourceCode, { makeTitle }).parse();
+    const csf = loadCsf(content, { makeTitle, fileName: id }).parse();
+    const csfSource = loadCsf(sourceCode, { makeTitle, fileName: id }).parse();
     await enrichCsf(csf, csfSource, options);
-    const formattedCsf = formatCsf(
-      csf,
-      { sourceMaps: true, inputSourceMap: map, sourceFileName: id },
-      content
-    );
+    const formattedCsf = formatCsf(csf, { sourceMaps: true, inputSourceMap: map ?? undefined });
 
     if (typeof formattedCsf === 'string') {
       return callback(null, formattedCsf, map);
diff --git a/code/addons/vitest/src/angular-vitest-postinstall.test.ts b/code/addons/vitest/src/angular-vitest-postinstall.test.ts
index 4d451fdb66f7..a0b4a8e9a55b 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);
   });
@@ -114,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']);
@@ -123,8 +118,8 @@ describe('injectAngularVitestIntoConfig', () => {
     expect(out).toContain(ANGULAR_VITEST_IMPORT_SOURCE);
   });
 
-  it('adds the scaffold comment (case 20: comments preserved through generate)', () => {
-    const out = injectAngularVitestIntoConfig(FRESH_V4)!;
+  it('adds the scaffold comment (case 20: comments preserved)', () => {
+    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');
@@ -136,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']);
@@ -147,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)', () => {
@@ -156,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();
@@ -178,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);
@@ -193,17 +190,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)', () => {
@@ -219,7 +216,7 @@ describe('injectAngularVitestIntoAst', () => {
         },
       ]);
     `;
-    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']);
@@ -230,6 +227,6 @@ describe('injectAngularVitestIntoAst', () => {
       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 a9aae06ee8a7..2fb92109750a 100644
--- a/code/addons/vitest/src/angular-vitest-postinstall.ts
+++ b/code/addons/vitest/src/angular-vitest-postinstall.ts
@@ -1,10 +1,12 @@
 import {
-  type BabelFile,
-  babelParse,
-  generate,
-  traverse,
-  types as t,
-} from 'storybook/internal/babel';
+  type ESTree as E,
+  SourceEditor,
+  arrayList,
+  insertAfterImports,
+  prependToList,
+  printString,
+  walk,
+} from 'storybook/internal/csf-tools';
 
 /**
  * Auto-wiring for the `@storybook/angular-vite` standalone-vitest options bridge.
@@ -13,8 +15,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 +42,87 @@ 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(editor, 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 ${printString(ANGULAR_VITEST_IMPORT_SOURCE, editor.quote)};`;
+    insertAfterImports(editor, statement);
+  }
   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'];
+export function injectAngularVitestIntoConfig(content: string, fileName: string): string | null {
+  let editor: SourceEditor;
   try {
-    ast = babelParse(content);
+    editor = new SourceEditor(content, fileName);
   } 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..603ee2aa8844 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;
 }
@@ -110,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).
@@ -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',
     ]);
@@ -168,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 4d2a0893374e..f7f2cde0736d 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,13 @@ import {
   getStorybookInfo,
   versions,
 } from 'storybook/internal/common';
+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 {
@@ -26,7 +32,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';
@@ -39,7 +45,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
@@ -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
@@ -231,9 +237,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 +253,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,14 +273,17 @@ 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;
       await writeFile(
         rootConfig,
         shouldAddReference
-          ? '/// <reference types="vitest/config" />\n' + formattedContent
+          ? restoreLineEndings(
+              '/// <reference types="vitest/config" />\n' + formattedContent,
+              formattedContent
+            )
           : formattedContent
       );
     } else {
@@ -304,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.');
@@ -345,47 +353,33 @@ function isStorybookTestPluginSource(value: string) {
   return value === STORYBOOK_TEST_PLUGIN_SOURCE;
 }
 
-export function isConfigAlreadySetup(_configPath: string, configContent: string) {
-  let ast: ReturnType<typeof babelParse>;
+export function isConfigAlreadySetup(configPath: string, configContent: string) {
+  let program: E.Program;
   try {
-    ast = babelParse(configContent);
-  } catch (e) {
+    ({ program } = parseModule(configContent, configPath));
+  } 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..35720bbf1cea 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,58 @@ 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));
       + 
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-        export default defineConfig({
-          plugins: [react()],
-          test: {
-            globals: true,
         
-      -     projects: ['packages/*']
+              // https://vite.dev/config/
+              export default defineConfig({
+                plugins: [react()],
+                test: {
+                  globals: true,
+        
+      -           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(import.meta.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 +119,69 @@ 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));
       + 
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-        export default {
-          plugins: [react()],
-          test: {
-            globals: true,
         
-      -     projects: ['packages/*']
+              // https://vite.dev/config/
+              export default {
+                plugins: [react()],
+                test: {
+                  globals: true,
+        
+      -           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(import.meta.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 +208,85 @@ 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));
       + 
-      + // 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(import.meta.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 +312,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 +342,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 +354,143 @@ 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));
       + 
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+        
+              // https://vite.dev/config/
+              export default defineConfig({
+                plugins: [react()],
+                test: {
+        
+      -           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(import.meta.dirname, '.storybook') }),
+      +               ],
+      +               test: {
+      +                 name: 'storybook',
+      +                 browser: {
+      +                   enabled: true,
+      +                   headless: true,
+      +                   provider: playwright({}),
+      +                   instances: [{ browser: 'chromium' }],
+      +                 },
+      +               },
+      +             },
+      +           ],
+      + 
+                },
+              })
+            "
+    `);
+  });
+
+  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 { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+      + import { playwright } from '@vitest/browser-playwright';
       + 
-        export default defineConfig({
-          plugins: [react()],
-          test: {
         
-      -     globals: true
+              export default defineConfig({
+                test: {
+        
+      -           include: [\`src/**/*.test.ts
       - 
-      +     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: {
+      +                 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(import.meta.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 +510,67 @@ 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));
       + 
-      + // 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))
-            }
-          },
         
-      -   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'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      +   }
+              const config = defineConfig({
+                resolve: {
+                  preserveSymlinks: true,
+      ...
+                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(import.meta.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 +585,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 +597,58 @@ 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));
-      + 
-      + // 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(import.meta.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 +662,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 +674,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));
       + 
-      + // 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: [{
-      +       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(import.meta.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 +739,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 +751,53 @@ 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));
-      + 
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        export default 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'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      +   }
+              // https://vite.dev/config/
+              export default 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(import.meta.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 +815,76 @@ 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));
-      + 
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        export default mergeConfig(viteConfig, defineConfig({
-          plugins: [react()]
-        }), defineConfig({
-          test: {
         
-      -     environment: 'jsdom'
+              export default mergeConfig(
+                viteConfig,
+                defineConfig({
+                  plugins: [react()],
+                }),
+                defineConfig({
+                  test: {
+        
+      -             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(import.meta.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 +899,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
     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));
       + 
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-        export default mergeConfig(viteConfig, {
-          plugins: [react()],
-          test: {
         
-      -     environment: 'jsdom'
+              export default mergeConfig(
+                viteConfig,
+                {
+                  plugins: [react()],
+                  test: {
+        
+      -             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(import.meta.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 +980,67 @@ 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));
-      + 
-      + // 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(import.meta.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 +1056,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 +1068,63 @@ 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));
       + 
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-        export default mergeConfig(viteConfig, defineConfig({
-          test: {
         
-      -     globals: true
+              // https://vite.dev/config/
+              export default mergeConfig(
+                viteConfig,
+                defineConfig({
+                  test: {
+        
+      -             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(import.meta.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 +1148,67 @@ 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));
       + 
-      + // 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({
+      ...
+                        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(import.meta.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,73 @@ 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));
-      + 
-      + // 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(import.meta.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 +1330,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 +1342,73 @@ 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));
-      + 
-      + // 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(import.meta.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 +1421,70 @@ 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));
-      + 
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        export default defineConfig(mergeConfig(viteConfig, {
-          test: {
         
-      -     name: 'node',
-      -     environment: 'happy-dom',
-      -     include: ['**/*.test.ts']
+              export default defineConfig(mergeConfig(viteConfig, {
+                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'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      + 
-          }
-        }));"
+      +           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(import.meta.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 +1500,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();
     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));
-      + 
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        export default defineConfig(mergeConfig(viteConfig, {
-          test: {
         
-      -     name: 'node',
-      -     environment: 'happy-dom',
-      -     include: ['**/*.test.ts']
+              export default defineConfig(
+                mergeConfig(viteConfig, {
+                  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'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      + 
-          }
-        }) 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(import.meta.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 +1580,72 @@ 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));
-      + 
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        export default mergeConfig(viteConfig, {
-          test: {
         
-      -     name: 'node',
-      -     environment: 'happy-dom',
-      -     include: ['**/*.test.ts']
+              export default mergeConfig(viteConfig, {
+                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'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      + 
-          }
-        }) 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(import.meta.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 +1658,73 @@ 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));
       + 
-      + // 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, {
         
-      -   test
+              const test = {
+                name: 'node',
+                environment: 'happy-dom',
+                include: ['**/*.test.ts'],
+              }
+        
+        
+      -       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(import.meta.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 +1742,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(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));
-      + 
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        const config = mergeConfig(viteConfig, defineConfig({
-          test: {
         
-      -     name: 'node',
-      -     environment: 'happy-dom',
-      -     include: ['**/*.test.ts']
+              const config = 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'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      + 
-          }
-        }));
-        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(import.meta.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 +1821,70 @@ 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));
-      + 
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
       + 
-        export default defineProject({
-          test: {
         
-      -     name: 'node',
-      -     environment: 'happy-dom',
-      -     include: ['**/*.test.ts']
+              export default defineProject({
+                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'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      + 
-          }
-        });"
+      +           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(import.meta.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 +1902,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(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));
       + 
-      + // 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(import.meta.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 +1984,73 @@ 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));
       + 
-      + // 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(import.meta.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 +2065,73 @@ 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));
       + 
-      + // More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-      + 
-        const vitestConfig = {
-          test: {
         
-      -     name: 'node',
-      -     environment: 'happy-dom',
-      -     include: ['**/*.test.ts']
+              const vitestConfig = {
+                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'
-      +           }]
-      +         }
-      +       }
-      +     }]
-      + 
-          }
-        };
-        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(import.meta.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 +2172,98 @@ 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));
-      + 
-      + // 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()],
       ...
-        });
-        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(import.meta.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 +2286,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();
     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));
-      + 
-      + // 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(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.statements.test.ts b/code/addons/vitest/src/updateVitestFile.statements.test.ts
new file mode 100644
index 000000000000..d9fdd2829015
--- /dev/null
+++ b/code/addons/vitest/src/updateVitestFile.statements.test.ts
@@ -0,0 +1,337 @@
+import { describe, expect, it } from 'vitest';
+
+import { SourceEditor } from 'storybook/internal/csf-tools';
+
+import { dedent } from 'ts-dedent';
+
+import { loadTemplate, 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' } }],
+    },
+  });
+`;
+
+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);
+  const result = target.toString();
+  expect(() => new SourceEditor(result)).not.toThrow();
+  return result;
+};
+
+describe('updateConfigFile statements', () => {
+  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(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('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`
+    );
+
+    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('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.replaceAll('\r\n', '')).not.toMatch(/[\r\n]/);
+  });
+
+  it.each([
+    ['imports', `import { dirname, resolve } from 'node:path';`],
+    ['requires', `const { dirname } = require('path');`],
+  ])('keeps a dirname function the config %s', async (_, binding) => {
+    const target = new SourceEditor(dedent`
+      ${binding}
+      export default defineConfig({ test: {} });
+    `);
+
+    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(
+      "storybookTest({ configDir: path.join(import.meta.dirname, '.storybook') })"
+    );
+    expect(() => new SourceEditor(code)).not.toThrow();
+  });
+
+  it('reuses a namespace import of path', async () => {
+    const target = new SourceEditor(dedent`
+      import * as path from '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 * as path from 'path';",
+    ]);
+    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';
+      export default defineConfig({ test: { setupFiles: [join('src', 'setup.ts')] } });
+    `);
+
+    expect(updateConfigFile(await realTemplate(), target)).toBe(true);
+    const code = target.toString();
+    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('does not import a template name the config declares and the merge does not read', async () => {
+    const target = new SourceEditor(dedent`
+      function defineConfig(config) { return config; }
+      export default defineConfig({ test: {} });
+    `);
+
+    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(() => 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';
+
+      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 08c7e5bca693..64642edbb0fc 100644
--- a/code/addons/vitest/src/updateVitestFile.ts
+++ b/code/addons/vitest/src/updateVitestFile.ts
@@ -1,11 +1,28 @@
+import { isBuiltin } from 'node:module';
+
 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 Binding,
+  type ESTree as E,
+  SourceEditor,
+  appendToList,
+  arrayList,
+  insertAfterImports,
+  itemText,
+  lineIndent,
+  reindent,
+  objectList,
+  prependToList,
+  printMembers,
+  statementSpan,
+  staticKey,
+} from 'storybook/internal/csf-tools';
 
 import { normalize } from 'pathe';
 
@@ -28,458 +45,323 @@ 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;
+}
+
+// A method or accessor has no value expression to merge.
+const findNamedProp = (members: Member[], name: string) =>
+  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 } =>
+  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));
+
+const elementTexts = (editor: SourceEditor, array: E.ArrayExpression) =>
+  arrayList(editor, array).items.map((element) =>
+    itemText(editor, arrayList(editor, array), element)
+  );
+
+// 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 = staticKey(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') {
+      appendToList(target, arrayList(target, 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) {
+    appendToList(target, objectList(target, 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) {
+      appendToList(
+        merge.target,
+        arrayList(merge.target, 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(staticKey));
+    const added = templateTestObject.properties.filter((member) => {
+      const name = staticKey(member);
+      return name !== undefined && name !== 'projects' && !existingNames.has(name);
+    });
+    if (added.length > 0) {
+      appendToList(
+        merge.target,
+        objectList(merge.target, 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) => staticKey(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)
-  );
-
-  // 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
+  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)
   );
-
-  // 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 = 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) {
+    prependToList(
+      source,
+      objectList(source, templateTestObject),
+      memberTexts(target, testObject, hoisted)
+    );
   }
-
-  mergeProperties(properties, targetConfigObject.properties);
+  source.commit();
+
+  const config = templateConfig();
+  const templateTest = findNamedProp(config.properties, 'test')!;
+  target.edits.overwrite(
+    existingTest.start,
+    existingTest.end,
+    reindent(
+      itemText(source, objectList(source, config), templateTest),
+      '',
+      lineIndent(target.code, existingTest.start)
+    )
+  );
+  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 findWritableConfigObject = (
+  program: E.Program,
+  exportDefault: E.ExportDefaultDeclaration
+) => {
+  const configObject = getTargetConfigObject(program, exportDefault);
+  if (configObject) {
+    return configObject;
   }
-
-  const resolvedDecl = resolveExpression(exportDefault.declaration, target);
-  if (resolvedDecl?.type !== 'CallExpression' || !isDefineConfigLike(resolvedDecl, target)) {
+  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
+  );
+};
 
-  const callbackArg = resolvedDecl.arguments[0];
-  if (
-    !callbackArg ||
-    (callbackArg.type !== 'ArrowFunctionExpression' && callbackArg.type !== 'FunctionExpression')
-  ) {
-    return null;
+// 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 source = binding.declaration.source.value.replace(/^node:/, '');
+  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}`;
+};
 
-  if (callbackArg.body.type === 'ObjectExpression') {
-    return callbackArg.body;
-  }
+// 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;
+  return [...source.scopes.program.bindings.values()].some((binding) => {
+    const existing = scope.lookup(binding.name);
+    const merged = binding.references.some((reference) => reference !== call.callee);
+    const imported = importedExport(binding);
+    return merged && existing && (!imported || importedExport(existing) !== imported);
+  });
+};
 
-  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 it owns.
+const missingStatements = (source: SourceEditor, target: SourceEditor) => {
+  // 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 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] : [];
     }
-  }
-
-  return null;
+    if (node.type === 'VariableDeclaration') {
+      const id = node.declarations[0]?.id;
+      return id?.type === 'Identifier' && !declared(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) {
+// 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 || hasConflictingBinding(source, target, targetConfig)) {
     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;
+  const statements = missingStatements(source, target);
+  if (statements.length > 0) {
+    // After the imports, so the config never reads a variable before it is declared.
+    insertAfterImports(target, statements.join('\n'));
   }
 
-  if (!canHandleConfig) {
-    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;
-          }
-        }
-      }
-    }
-  }
-  return updated;
+  mergeTemplateIntoConfigObject({ source, target }, targetConfig, () => templateConfig()!);
+  target.commit();
+  return true;
 };
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/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/builders/builder-vite/src/plugins/storybook-optimize-deps-plugin.ts b/code/builders/builder-vite/src/plugins/storybook-optimize-deps-plugin.ts
index 26517acb20e1..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,6 +1,6 @@
 import { loadPreviewOrConfigFile } from 'storybook/internal/common';
 import type { StoryIndexGenerator } from 'storybook/internal/core-server';
-import { babelParser, 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';
@@ -65,7 +65,6 @@ export function storybookOptimizeDepsPlugin(options: Options): Plugin {
                 coreOptions: { disableTelemetry: true },
                 configDir: options.configDir,
               },
-              babelParser,
               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..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 {
-  babelParser,
   extractMockCalls,
   findMockRedirect,
   getAutomockCode,
@@ -56,7 +55,7 @@ export function viteMockPlugin(options: MockPluginOptions): Plugin[] {
       },
 
       buildStart() {
-        mockCalls = extractMockCalls(options, babelParser, viteConfig.root, findMockRedirect);
+        mockCalls = extractMockCalls(options, viteConfig.root, findMockRedirect);
       },
 
       configureServer(server) {
@@ -65,7 +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, babelParser, viteConfig.root, findMockRedirect);
+            mockCalls = extractMockCalls(options, viteConfig.root, findMockRedirect);
 
             // Invalidate the preview file
             const previewMod = server.moduleGraph.getModuleById(options.previewConfigPath);
@@ -144,7 +143,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, id);
 
                 return {
                   code: automockedCode.toString(),
@@ -167,7 +166,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-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 9dd0b59ef2b5..50f1f00d29d4 100644
--- a/code/builders/builder-vite/src/vite-config.test.ts
+++ b/code/builders/builder-vite/src/vite-config.test.ts
@@ -5,11 +5,15 @@ 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 { normalize } from 'pathe';
 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,6 +24,16 @@ 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.
+  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 +55,42 @@ 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');
+
+  vi.mocked(existsSync).mockImplementation((path) => {
+    if (path === resolve(pathToMock)) {
+      return exists;
+    }
+
+    return actual.existsSync(path);
+  });
+};
+
+afterEach(() => {
+  vi.mocked(existsSync).mockReset();
+  loadConfigFromFileMock.mockReset();
+  loggerWarnMock.mockClear();
+  vi.mocked(find.any).mockReset();
+  vi.mocked(getProjectRoot).mockReset();
+});
+
 describe('commonConfig', () => {
   it('should set configFile to false and include plugins', async () => {
     loadConfigFromFileMock.mockReturnValueOnce(
@@ -58,22 +108,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
@@ -143,22 +178,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 +206,111 @@ describe('resolveVitePublicDir', () => {
     expect(await resolveVitePublicDir(options, 'build')).toBeUndefined();
   });
 });
+
+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(found);
+    loadConfigFromFileMock.mockResolvedValueOnce(null);
+
+    await commonConfig(
+      { ...dummyOptions, configDir: '/project/configuration/storybook' },
+      '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(`found at "${printed}"`);
+    expect(loggerWarnMock.mock.calls[0][0]).toContain(
+      `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);
+    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(vi.mocked(find.any)).not.toHaveBeenCalled();
+    expect(loggerWarnMock).not.toHaveBeenCalled();
+  });
+
+  it('stays quiet when an explicit viteConfigPath resolves to nothing', async () => {
+    loadConfigFromFileMock.mockResolvedValueOnce(null);
+
+    await commonConfig(
+      {
+        ...dummyOptions,
+        configDir: '/project/.storybook',
+        presets: presetsWith({ viteConfigPath: '/custom/vite.config.ts' }),
+      },
+      'development'
+    );
+
+    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 b2c25780b033..912c1b6147ef 100644
--- a/code/builders/builder-vite/src/vite-config.ts
+++ b/code/builders/builder-vite/src/vite-config.ts
@@ -1,9 +1,17 @@
 import { existsSync } from 'node:fs';
-import { resolve } from 'node:path';
+import { relative, 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 { normalize } from 'pathe';
+import { dedent } from 'ts-dedent';
 import type {
   ConfigEnv,
   InlineConfig,
@@ -34,12 +42,64 @@ 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');
+
+// 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 found = find.any(DEFAULT_VITE_CONFIG_FILES, {
+    cwd: projectRoot,
+    last: root,
+  });
+
+  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.
+      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
+    `
+  );
+}
+
 async function loadUserViteConfig(options: Options, type: PluginConfigType): Promise<ViteConfig> {
   const configEnv = type === 'development' ? configEnvServe : configEnvBuild;
   const { loadConfigFromFile } = await import('vite');
   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,
@@ -49,6 +109,11 @@ async function loadUserViteConfig(options: Options, type: PluginConfigType): Pro
     configLoader
   );
 
+  // An explicit `viteConfigPath` is the user's responsibility; Vite errors on it itself.
+  if (!loaded && viteConfigPath === undefined) {
+    reportUnloadedUserViteConfig(options.configDir, projectRoot);
+  }
+
   return loaded?.config ?? {};
 }
 
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..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 || undefined, 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 343140306834..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 { babelParser, 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, babelParser as any);
+  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 74f0cd1b9c7f..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 {
-  babelParser,
   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) },
-      babelParser,
       compiler.context,
       findMockRedirect
     );
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 803d1b8c20e5..e1bcfc6e02fb 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": {
@@ -286,9 +281,8 @@
     "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.154.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",
@@ -309,6 +299,8 @@
     "@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",
     "@preact/signals-core": "^1.14.2",
@@ -380,6 +372,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/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.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/core/src/cli/AddonVitestService.ts b/code/core/src/cli/AddonVitestService.ts
index 610b0797c001..fa730b040235 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;
@@ -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.test.ts b/code/core/src/cli/eslintPlugin.test.ts
index fab70770f8a6..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', () => {
@@ -318,18 +331,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 +375,7 @@ describe('configureEslintPlugin', () => {
 
         module.exports = [
           { rules: { 'no-console': 'error' } },
-          ...storybook.configs[\"flat/recommended\"]
+          ...storybook.configs['flat/recommended'],
         ];"
       `);
     });
@@ -407,14 +423,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,15 +443,29 @@ 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"]);"
+        module.exports = tseslint.config(tseslint.configs.recommended, storybook.configs['flat/recommended']);"
       `);
       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');
@@ -451,10 +477,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,8 +495,8 @@ describe('configureEslintPlugin', () => {
         'eslint.config.js'
       );
 
-      expect(output).toContain('const _storybook = require("eslint-plugin-storybook");');
-      expect(output).toContain('..._storybook.configs["flat/recommended"]');
+      expect(output).toContain("const _storybook = require('eslint-plugin-storybook');");
+      expect(output).toContain("..._storybook.configs['flat/recommended']");
     });
 
     it('preserves computed CommonJS exports and warns', async () => {
@@ -507,8 +530,8 @@ describe('configureEslintPlugin', () => {
         'eslint.config.js'
       );
 
-      expect(output).toContain('const storybook = require("eslint-plugin-storybook");');
-      expect(output).toContain('...storybook.configs["flat/recommended"]');
+      expect(output).toContain("const storybook = require('eslint-plugin-storybook');");
+      expect(output).toContain("...storybook.configs['flat/recommended']");
       expect(output).not.toContain('...nestedStorybook.configs');
     });
 
@@ -533,8 +556,8 @@ 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("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 +641,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,11 +671,10 @@ 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"]);"
+        export default tseslint.config(somePlugin, storybook.configs['flat/recommended']);"
       `);
     });
 
@@ -678,9 +702,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 +735,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 +766,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 +807,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 +858,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 +900,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 +928,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..5b97997156bc 100644
--- a/code/core/src/cli/eslintPlugin.ts
+++ b/code/core/src/cli/eslintPlugin.ts
@@ -1,7 +1,24 @@
 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,
+  argumentList,
+  arrayList,
+  generateUid,
+  importedName,
+  isStringLiteral,
+  prependStatement,
+  printString,
+  readConfig,
+  unwrapExpression,
+  walk,
+  writeConfig,
+} from 'storybook/internal/csf-tools';
 import { logger, prompt } from 'storybook/internal/node-logger';
 
 import commentJson from 'comment-json';
@@ -10,8 +27,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 +57,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 +119,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 +164,66 @@ 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[${printString('flat/recommended', editor.quote)}]`;
+  if (target.type === 'ArrayExpression') {
+    appendToList(editor, arrayList(editor, target), [`...${storybookConfig}`]);
   } else {
-    target.arguments.push(storybookConfig);
+    appendToList(editor, argumentList(editor, target), [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 +242,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, configFile);
+  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 +302,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<{
@@ -437,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/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,
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/babel/vitest-config-helpers.test.ts b/code/core/src/cli/vitest-config.test.ts
similarity index 70%
rename from code/core/src/babel/vitest-config-helpers.test.ts
rename to code/core/src/cli/vitest-config.test.ts
index 5a0a8bcd2d09..ea72cc5d1da4 100644
--- a/code/core/src/babel/vitest-config-helpers.test.ts
+++ b/code/core/src/cli/vitest-config.test.ts
@@ -1,6 +1,13 @@
 import { describe, expect, it } from 'vitest';
 
-import { canUpdateVitestConfigFile } from './vitest-config-helpers.ts';
+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', () => {
@@ -239,8 +246,6 @@ describe('canUpdateVitestConfigFile', () => {
     ).toBe(true);
   });
 
-  // ----- Unsupported patterns (should return false) -----
-
   it('returns false when there is no export default', () => {
     expect(canUpdateVitestConfigFile('const x = 1;')).toBe(false);
   });
@@ -290,3 +295,89 @@ describe('canUpdateVitestConfigFile', () => {
     );
   });
 });
+
+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..44d8f0060ff0
--- /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, fileName?: string): boolean => {
+  let program: E.Program;
+  try {
+    ({ program } = parseModule(fileContent, fileName));
+  } 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/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.catalog.test.ts b/code/core/src/common/js-package-manager/PNPMProxy.catalog.test.ts
index 2d96d6d8f72f..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
@@ -1,14 +1,19 @@
 import { readFileSync, writeFileSync } from 'node:fs';
+import { join } from 'pathe';
 
 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,93 @@ describe('PNPMProxy catalogs', () => {
       );
     });
   });
+
+  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';
+    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);
+
+      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()[createdYaml()]).toBeUndefined();
+      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('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(() => {
+        throw new Error('EACCES: permission denied');
+      });
+
+      expect(allowBuildScripts).not.toThrow();
+      expect(logger.warn).toHaveBeenCalledWith(
+        expect.stringContaining('in /root/pnpm-workspace.yaml: Error: EACCES')
+      );
+    });
+  });
 });
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 301e7400f9fa..d780fc48ec24 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.test.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.test.ts
@@ -1,11 +1,16 @@
-import { resolve } from 'node:path';
+import { readFileSync, writeFileSync } from 'node:fs';
+import { resolve } from 'pathe';
 
 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';
 
@@ -24,6 +29,9 @@ 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);
 
@@ -42,14 +50,37 @@ const expectedMinimumReleaseAgeExcludePackages = [
   '@storybook/*',
   'eslint-plugin-storybook',
   '@chromatic-com/storybook',
+  'chromatic',
 ];
 
 describe('PNPM Proxy', () => {
   let pnpmProxy: PNPMProxy;
 
+  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.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,
+      packageJson: { dependencies: {}, devDependencies: {}, peerDependencies: {}, ...packageJson },
+    } as any);
+  };
+
   beforeEach(() => {
+    vi.mocked(readFileSync).mockReset();
+    vi.mocked(writeFileSync).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);
+    useMemfsProject(pnpmProxy);
     JsPackageManager.clearLatestVersionCache();
     vi.spyOn(pnpmProxy, 'writePackageJson').mockImplementation(vi.fn());
   });
@@ -136,6 +167,257 @@ describe('PNPM Proxy', () => {
     });
   });
 
+  describe('allowBuilds for Storybook build scripts', () => {
+    const unmockSpinner = () => {
+      vi.mocked(prompt.executeTaskWithSpinner).mockImplementationOnce(async (fn: any) => {
+        await Promise.resolve(fn());
+      });
+    };
+    const install = async () => {
+      unmockSpinner();
+      mockedExecuteCommand.mockResolvedValue({ stdout: '' } as any);
+      await pnpmProxy.installDependencies();
+    };
+
+    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(logger.info).toHaveBeenCalledWith(
+        'Approved build scripts for esbuild in /project/pnpm-workspace.yaml'
+      );
+      expect(mockedExecuteCommand).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(workspaceYaml()).toBe('allowBuilds:\n  esbuild: true\n');
+    });
+
+    it('adds esbuild to an existing pnpm-workspace.yaml without disturbing its content', async () => {
+      vol.fromJSON({
+        [WORKSPACE_YAML]:
+          '# my workspace\npackages:\n  - "packages/*"\n\ncatalog:\n  react: ^19 # pinned\n',
+      });
+
+      await install();
+
+      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 () => {
+      vol.fromJSON({ [WORKSPACE_YAML]: 'allowBuilds:\n  esbuild: false\n' });
+
+      await install();
+
+      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 () => {
+      vol.fromJSON({ [WORKSPACE_YAML]: 'allowBuilds:\n  esbuild: set this to true or false\n' });
+
+      await install();
+
+      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",
+      ],
+      ['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('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()).toBe(
+        'allowBuilds:\n  sharp: true\n  esbuild-wasm@1.0.0: true\n  esbuild: true\n'
+      );
+    });
+
+    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(`${yaml}allowBuilds:\n  esbuild: true\n`);
+    });
+
+    it('still allows esbuild on pnpm 11 when a leftover onlyBuiltDependenciesFile names it', async () => {
+      vol.fromJSON({
+        [WORKSPACE_YAML]: 'onlyBuiltDependenciesFile: trusted/allow.json\n',
+        [`${PROJECT_DIR}/trusted/allow.json`]: '["esbuild"]',
+      });
+
+      await install();
+
+      expect(workspaceYaml()).toBe(
+        'onlyBuiltDependenciesFile: trusted/allow.json\nallowBuilds:\n  esbuild: true\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('allowBuilds:\n  esbuild: true\n');
+    });
+
+    describe('on pnpm 10', () => {
+      beforeEach(() => {
+        mockPnpmVersion('10.28.0');
+        pnpmProxy = new PNPMProxy();
+        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'],
+      ])('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' });
+
+      await install();
+
+      expect(workspaceYaml()).toBe('packages: [\n');
+      expect(vi.mocked(logger.warn)).toHaveBeenCalledWith(
+        expect.stringContaining('Could not allow build scripts of esbuild')
+      );
+      expect(mockedExecuteCommand).toHaveBeenCalledWith(
+        expect.objectContaining({ command: 'pnpm', args: ['install'] })
+      );
+    });
+
+    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(readFileSync).not.toHaveBeenCalledWith(WORKSPACE_YAML, expect.anything());
+      expect(writeFileSync).not.toHaveBeenCalled();
+      expect(workspaceYaml()).toBe('packages:\n  - "packages/*"\n');
+    });
+  });
+
   describe('runScript', () => {
     it('should execute script `pnpm exec compodoc -- -e json -d .`', () => {
       const executeCommandSpy = mockedExecuteCommand.mockResolvedValue({ stdout: '7.1.0' } as any);
@@ -734,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 102c6e4d0304..12ac40792e8d 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 } from 'pathe';
 
 import { logger, prompt } from 'storybook/internal/node-logger';
 import {
@@ -12,13 +12,14 @@ 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';
 import { getProjectRoot } from '../utils/paths.ts';
 import { JsPackageManager, PackageManagerName } from './JsPackageManager.ts';
 import type { PackageJson } from './PackageJson.ts';
+import { hasAllowBuildsDecision, hasPnpm10ListDecision } from './pnpm-build-approvals.ts';
 import type { InstallationMetadata, PackageMetadata } from './types.ts';
 import {
   getAgeInMinutes,
@@ -52,11 +53,18 @@ 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';
+
+// 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.
+const STORYBOOK_BUILD_SCRIPT_PACKAGES = ['esbuild'];
+
 export class PNPMProxy extends JsPackageManager {
   readonly type = PackageManagerName.PNPM;
 
@@ -279,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);
   }
 
@@ -311,15 +319,76 @@ 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', {
+  // 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;
+    }
+    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`
+      );
+      return;
+    }
+    const { path, doc } = workspace;
+    const { packageJson, operationDir } = this.primaryPackageJson;
+
+    try {
+      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({}));
+      }
+      for (const pkg of pending) {
+        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)}`
+      );
+    }
+  }
+
+  #writeWorkspaceYaml({ path, doc }: { path: string; doc: Document }): void {
+    logger.debug(`Writing pnpm workspace file ${path}`);
+    writeFileSync(path, doc.toString(), 'utf8');
+  }
+
+  #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 null;
     }
@@ -389,7 +458,7 @@ export class PNPMProxy extends JsPackageManager {
       }
 
       if (changed) {
-        writeFileSync(workspace.path, workspace.doc.toString(), 'utf8');
+        this.#writeWorkspaceYaml(workspace);
       }
       return true;
     } catch (e) {
@@ -399,6 +468,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'] : [])],
@@ -474,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
@@ -538,6 +608,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/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/pnpm-build-approvals.test.ts b/code/core/src/common/js-package-manager/pnpm-build-approvals.test.ts
new file mode 100644
index 000000000000..4a721abe7cc1
--- /dev/null
+++ b/code/core/src/common/js-package-manager/pnpm-build-approvals.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-approvals.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-approvals.ts b/code/core/src/common/js-package-manager/pnpm-build-approvals.ts
new file mode 100644
index 000000000000..ad9b1b5939c0
--- /dev/null
+++ b/code/core/src/common/js-package-manager/pnpm-build-approvals.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)
+  );
+}
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, '\\$&');
diff --git a/code/core/src/common/utils/resolve-meta-component.ts b/code/core/src/common/utils/resolve-meta-component.ts
index 12a9d2f9338a..1da32c7439c1 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 NodePath, types as t } from 'storybook/internal/babel';
 import type { CsfFile } from 'storybook/internal/csf-tools';
 
+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';
 
@@ -39,9 +38,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 +72,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 +98,21 @@ export function createMetaComponentResolver(options: MetaComponentResolverOption
       return { reason: 'no-meta-component' };
     }
 
-    const storyModule: ReferenceModule = { program: csf._file.path, filePath: storyPath };
+    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,18 +132,18 @@ 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);
       }
     }
 
-    return { reason: 'unreadable-component-expression', expression: sourceOf(node) };
+    return { reason: 'unreadable-component-expression', expression: oneLineTextOf(node) };
   };
 }
 
@@ -154,28 +153,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 +183,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..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,10 +22,11 @@ describe('setupAddonInConfig', () => {
     vi.clearAllMocks();
 
     mockMain = {
+      editor: { quote: "'" },
+      getBodyDeclarations: () => [],
       getFieldNode: vi.fn(),
-      valueToNode: 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 = {
@@ -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.textOf(node)).toBe("getAbsolutePath('@storybook/addon-docs')");
     expect(mockMain.appendValueToArray).not.toHaveBeenCalled();
     expect(csfTools.writeConfig).toHaveBeenCalledWith(mockMain);
     expect(loadMainConfigModule.loadMainConfig).toHaveBeenCalledWith({
@@ -111,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 5f74b6180c38..fc123e246170 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;
@@ -28,12 +25,15 @@ export async function setupAddonInConfig({
   mainConfigCSFFile,
 }: 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);
-  } 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/common/utils/subcomponents.ts b/code/core/src/common/utils/subcomponents.ts
index 57df981ca4ed..5caa0968bb73 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,9 @@ function unwrapSubcomponentNode(
     }
 
     if (
-      t.isParenthesizedExpression(current) ||
-      t.isTSAsExpression(current) ||
-      t.isTSSatisfiesExpression(current) ||
-      t.isTSNonNullExpression(current)
+      current.type === 'TSAsExpression' ||
+      current.type === 'TSSatisfiesExpression' ||
+      current.type === 'TSNonNullExpression'
     ) {
       current = current.expression;
       continue;
@@ -85,28 +78,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..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,13 +40,13 @@ 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 { definePreview } from "@storybook/react/preview";
+      import * as addonA11yAnnotations from "@storybook/addon-a11y/preview";
 
-      export default definePreview({
-        addons: [myAddonAnnotations, addonA11yAnnotations],
-      });
+            export default definePreview({
+              addons: [myAddonAnnotations, addonA11yAnnotations],
+            });
     `);
   });
 
@@ -70,13 +70,13 @@ 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 { definePreview } from "@storybook/react/preview";
+      import addonA11yAnnotations from "@storybook/addon-a11y";
 
-      export default definePreview({
-        addons: [myAddonAnnotations, addonA11yAnnotations()],
-      });
+            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: [],
@@ -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..ee056cd57ca5 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 1bd281708189..9b82be6d7abd 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 { 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,6 +49,12 @@ 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.editor.quote)})`;
+}
+
 // Relative paths resolve from the config dir; the wrapper's `${value}/package.json` lookup breaks them.
 function isRelativePathSpecifier(value: string) {
   return value.startsWith('.');
@@ -79,36 +62,37 @@ function isRelativePathSpecifier(value: string) {
 
 /** 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)) {
+  node: Node,
+  cb: (node: Node) => void = () => {}
+): boolean {
+  if (isStringLiteral(node)) {
     if (isRelativePathSpecifier(node.value)) {
       return false;
     }
-    // value will be converted from StringLiteral to CallExpression.
     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) &&
+      nameProperty?.type === 'Property' &&
+      isStringLiteral(nameProperty.value) &&
       !isRelativePathSpecifier(nameProperty.value.value)
     ) {
-      cb(nameProperty);
+      cb(nameProperty.value);
       return true;
     }
   }
 
   if (
-    t.isArrayExpression(node) &&
+    node.type === 'ArrayExpression' &&
     node.elements.some((element) => element && isGetAbsolutePathWrapperNecessary(element))
   ) {
     cb(node);
@@ -123,24 +107,23 @@ 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, indented like `config`, for
+ * `ConfigFile#setBodyDeclaration`.
  *
  * @example
  *
@@ -150,119 +133,57 @@ export function getFieldsForGetAbsolutePathWrapper(config: ConfigFile): t.Node[]
  * }
  * ```
  */
-export function getAbsolutePathWrapperAsCallExpression(
+export function getAbsolutePathWrapperDeclaration(
+  config: ConfigFile,
   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' : ''} {`,
+    `${config.editor.indent}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.editor.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.editor.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
       );
@@ -272,7 +193,7 @@ export function ensureNamedImport(config: ConfigFile, imported: string, source:
     }
   }
 
-  const taken = new Set(body.flatMap(topLevelNames));
+  const taken = config.editor.scopes.program.bindings;
   if (!taken.has(imported)) {
     config.setImport([imported], source);
     return imported;
@@ -282,11 +203,6 @@ 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)
-    )
-  );
+  config.setImport([`${imported} as ${local}`], source);
   return local;
 }
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/core-server/utils/StoryIndexGenerator.test.ts b/code/core/src/core-server/utils/StoryIndexGenerator.test.ts
index 1279cfe57e96..8ea2c11df341 100644
--- a/code/core/src/core-server/utils/StoryIndexGenerator.test.ts
+++ b/code/core/src/core-server/utils/StoryIndexGenerator.test.ts
@@ -60,10 +60,16 @@ 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);
-    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 +79,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 +92,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..4da2544923d7 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,27 +874,28 @@ 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 tags = projectAnnotations.getValue(['tags']) ?? [];
+        const projectAnnotations = loadConfig(preview.code, preview.path).parse();
+        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;
@@ -912,7 +911,7 @@ export class StoryIndexGenerator {
 
           Received:
 
-          ${previewCode}
+          ${preview.code}
         `);
       }
     }
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..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
@@ -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);
+function isValidCandidate(source: string, file: string): boolean {
+  const { program } = parseModule(source, file);
 
   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;
@@ -76,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/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..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
@@ -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';
 
@@ -47,8 +47,13 @@ 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 = {
@@ -104,15 +109,11 @@ 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({});
       + "
     `);
@@ -154,6 +155,7 @@ describe('success', () => {
           },
         };
         
+      + 
       + export const CastDuplicated: Story = {};
       + export const AsDuplicated = {} as Story;
       + export const SatisfiesDuplicated = {} satisfies Story;
@@ -161,4 +163,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 } };`);
+  });
 });
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..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
@@ -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, staticKey, 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' && staticKey(property) === 'args'
+    );
+    if (args.length > 0) {
+      removeFromList(copy, objectList(copy, 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.editor.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.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 ede1c55a99fc..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
@@ -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,34 +20,14 @@ 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';
+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;
-  });
-
-// 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;
-};
+  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>) => {
@@ -61,7 +40,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 +78,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..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;
 
@@ -35,7 +36,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, {
@@ -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' };
 
@@ -104,7 +115,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 +131,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 +160,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 +185,6 @@ describe('success', () => {
       +     bordered: true,
       +     initial: "test1",
       +   },
-      + 
       + 
           render: (args) => <MyComponent {...args} />,
         } satisfies Story;
@@ -246,7 +255,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 +319,7 @@ describe('success', () => {
       if (node === undefined) {
         return;
       }
-      updateArgsInCsfFile(node, newArgs);
+      updateArgsInCsfFile(parsed, node, newArgs);
     });
 
     const after = await format(printCsf(parsed).code, {
@@ -368,7 +377,7 @@ describe('success', () => {
       if (node === undefined) {
         return;
       }
-      updateArgsInCsfFile(node, newArgs);
+      updateArgsInCsfFile(parsed, node, newArgs);
     });
 
     const after = await format(printCsf(parsed).code, {
@@ -426,11 +435,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..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
@@ -1,127 +1,100 @@
-import { types as t, traverse } from 'storybook/internal/babel';
+import type { CsfFile } from 'storybook/internal/csf-tools';
 
+import {
+  type E,
+  type Node,
+  staticKey,
+  isValidIdentifier,
+  walk,
+} from '../../../csf-tools/estree/ast.ts';
+import {
+  appendMembers,
+  prependMembers,
+  printMembers,
+  replaceValue,
+} from '../../../csf-tools/estree/editor.ts';
 import { SaveStoryError } from './utils.ts';
-import { valueToAST } from './valueToAST.ts';
 
-export const updateArgsInCsfFile = async (node: t.Node, input: Record<string, any>) => {
-  let found = false;
+import { valueToSource } from './valueToSource.ts';
+
+// Edits accumulate on `csf`; print them with `printCsf`.
+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]) => {
-      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)];
     })
   );
 
   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 (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 (child.type === 'ObjectExpression') {
+      story = child;
+      return false;
+    }
+  });
+  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' && staticKey(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: ${printMembers(
+        Object.entries(args).map(([key, value]) => `${key}: ${value}`),
+        editor.indent
+      )}`,
+    ]);
+    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 = staticKey(property);
+    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.test.ts b/code/core/src/core-server/utils/save-story/valueToSource.test.ts
new file mode 100644
index 000000000000..9925a8ae806b
--- /dev/null
+++ b/code/core/src/core-server/utils/save-story/valueToSource.test.ts
@@ -0,0 +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 }, 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
new file mode 100644
index 000000000000..9f4cc193d4c4
--- /dev/null
+++ b/code/core/src/core-server/utils/save-story/valueToSource.ts
@@ -0,0 +1,27 @@
+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 `() => {}`
+ * 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' && Object.getPrototypeOf(value) === Object.prototype) {
+    return Object.fromEntries(
+      Object.entries(value)
+        .filter(([, item]) => item !== undefined)
+        .map(([key, item]) => [key, withoutUndefined(item)])
+    );
+  }
+  return value;
+};
+
+/** 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, expand: 'objects' });
diff --git a/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts b/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts
index 10f34e07eaba..d14257c77643 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 { codeFrame, parseModule, walk } from '../../csf-tools/estree/ast.ts';
+
 export async function warnWhenUsingArgTypesRegex(
   previewConfigPath: string | undefined,
   config: StorybookConfig
@@ -23,34 +23,27 @@ 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, code } = 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, code, 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);
+      }
     });
   }
 }
diff --git a/code/core/src/csf-tools/ConfigFile.test.ts b/code/core/src/csf-tools/ConfigFile.test.ts
index 51808b164562..6a3da3337c75 100644
--- a/code/core/src/csf-tools/ConfigFile.test.ts
+++ b/code/core/src/csf-tools/ConfigFile.test.ts
@@ -1,11 +1,10 @@
 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';
+import { parseExpression } from './estree/ast.ts';
 
 expect.addSnapshotSerializer({
   serialize: (val: any) => (typeof val === 'string' ? val : val.toString()),
@@ -29,13 +28,19 @@ 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('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 } } });`,
@@ -49,7 +54,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();
@@ -191,6 +196,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(
@@ -448,6 +464,21 @@ 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('copies a node from another file by its source', () => {
+      const other = loadConfig(`export const a = 1;`).parse();
+      const config = loadConfig(`export const c = {};`).parse();
+      config.set(['c', 'd'], other.getFieldNode(['a']) as CsfExpression);
+      expect(formatConfig(config)).toBe(`export const c = { d: 1 };`);
+    });
+
     describe('named exports', () => {
       it('missing export', () => {
         expect(
@@ -460,10 +491,7 @@ describe('ConfigFile', () => {
           )
         ).toMatchInlineSnapshot(`
           export const addons = [];
-
-          export const core = {
-            builder: "webpack5"
-          };
+          export const core = { builder: "webpack5" };
         `);
       });
       it('missing field', () => {
@@ -475,12 +503,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 +536,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 +565,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 +576,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 +601,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 +612,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 +629,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 +680,7 @@ describe('ConfigFile', () => {
             `
           )
         ).toMatchInlineSnapshot(`
-          const parameters = {
-            foo: 'bar',
-            a11y: 'todo'
-          };
+          const parameters = { foo: 'bar', a11y: 'todo' };
           const preview = {
             parameters,
           }
@@ -722,9 +704,7 @@ describe('ConfigFile', () => {
         ).toMatchInlineSnapshot(`
           const parameters = { foo: 'bar' };
           const preview = {
-            parameters: {
-              a11y: 'todo'
-            },
+            parameters: { a11y: 'todo' },
           }
           export default preview;
         `);
@@ -748,10 +728,7 @@ describe('ConfigFile', () => {
           import { definePreview } from '@storybook/react-vite';
           export const foo = definePreview({
             addons: [],
-
-            core: {
-              builder: 'webpack5'
-            }
+            core: { builder: 'webpack5' },
           });
         `);
       });
@@ -770,10 +747,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,26 +783,80 @@ describe('ConfigFile', () => {
               export default { core: { builder: 'webpack5' } };
             `
         )
-      ).toMatchInlineSnapshot(`
-        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 'NumericLiteral'`
+      ).toMatchInlineSnapshot(
+        `export default { core: { builder: 'webpack5' }, addons: ['docs'] };`
       );
     });
+    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.each([
+      [
+        'a local object',
+        "const shared = { addons: ['a'] };\nexport default { ...shared };",
+        ['addons'],
+        "export default { ...shared, addons: [...(shared.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'],
+      [
+        '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();
+
+      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();
+
+      expect(config.appendValueToArray(['addons'], 'docs')).toEqual({ ok: true, changed: true });
+      expect(config.changed).toBe(true);
+    });
     it('array of simple values', () => {
       expect(
         appendToArray(
@@ -854,349 +882,48 @@ describe('ConfigFile', () => {
         `export default { addons: [require.resolve('a11y'), someVariable, 'docs'] };`
       );
     });
-  });
-
-  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' } };
-
-              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 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"]
+    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'] };`);
+    });
+
+    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: [\n  'b',\n  '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));
 
-          export const foo = {
-            bar: "baz"
-          };
-        `);
-      });
+      expect(printConfig(config).code).toBe(output);
     });
   });
 
-  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('removes a field of a multi-declarator export through remove, keeping its siblings', () => {
+    const config = loadConfig("export const framework = 'x', a = 1;").parse();
 
-    it('infers quotes and prints LF output for 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']);
-
-      const printed = printConfig(config).code;
-      expect(printed).not.toContain('\r');
-      expect(printed).toContain("'autodocs'");
-      expect(printed).not.toContain('"autodocs"');
-    });
+    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', () => {
@@ -1435,6 +1162,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`
         /*
@@ -1457,7 +1192,6 @@ describe('ConfigFile', () => {
          */
 
         import type { StorybookConfig } from '@storybook/react-vite';
-
         import { dirname } from 'node:path';
         import { fileURLToPath } from 'node:url';
 
@@ -1466,6 +1200,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
@@ -1482,7 +1227,6 @@ describe('ConfigFile', () => {
         // Copyright Example
 
         import { dirname } from "node:path";
-
         // @ts-expect-error not a number
         const config: number = {};
         export default config;
@@ -1502,10 +1246,7 @@ describe('ConfigFile', () => {
       expect(formatConfig(config)).toMatchInlineSnapshot(`
         // Copyright Example
 
-        const {
-          dirname
-        } = require("node:path");
-
+        const { dirname } = require("node:path");
         module.exports = { stories: [] };
       `);
     });
@@ -1519,10 +1260,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 +1279,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 +1297,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 +1315,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 +1335,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';
@@ -1604,22 +1345,168 @@ 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 * as ns from 'x'; // why`,
+        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',
+        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.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');
 
-      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 +1520,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 +1539,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 +1557,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,19 +1577,75 @@ 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;
       `);
     });
 
+    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.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');
@@ -1717,13 +1657,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 +1679,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 +1697,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 +1715,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 +1734,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 +1753,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 +1772,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';
@@ -1848,6 +1781,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';
@@ -1857,7 +1797,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 +1814,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 +1833,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 +1851,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 +1869,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 +1887,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 +1904,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 +1919,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,11 +1934,49 @@ 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);
     });
 
+    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';
@@ -2010,7 +1988,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 +2008,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';
@@ -2085,32 +2063,55 @@ describe('ConfigFile', () => {
       expect(config.getValue(['addons'])).toMatchInlineSnapshot(`a,c`);
     });
 
-    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('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 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('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('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);
     });
   });
 
   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 6c6259daf0fe..b1c049a54419 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -1,28 +1,54 @@
 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, locateConfigRoot } from './ConfigObject.ts';
 import {
+  type CsfExpression,
+  type CsfInspection,
   type CsfMutationDiagnostic,
   type CsfMutationResult,
   type CsfObject,
+  type CsfObjectEditor,
+  type CsfObjectHost,
   type CsfValue,
   createCsfObject,
 } from './CsfObject.ts';
-import { unwrapExpression } from './story-shape/utils.ts';
+import { literalRoot } from './ObjectRoot.ts';
+import {
+  type E,
+  EstreeParseError,
+  type Node,
+  isIdentifier,
+  isStringLiteral,
+  locationOf,
+  parseExpression,
+  placeableTextOf,
+  staticKey,
+  unwrapExpression,
+  walk,
+} from './estree/ast.ts';
+import {
+  SourceEditor,
+  appendStatement,
+  appendToList,
+  arrayList,
+  insertAfterImports,
+  insertStatementAfter,
+  objectList,
+  prependStatement,
+  printString,
+  printValue,
+  removeFromList,
+  removeStatement,
+  setImportSpecifiers,
+} from './estree/editor.ts';
+import { isDeclared } from './estree/scope.ts';
+import { findVarInitialization } from './findVarInitialization.ts';
 
 export interface CallArgumentsOptions {
   importedName: string;
@@ -47,48 +73,41 @@ const getCsfParsingErrorMessage = ({
     `;
 };
 
-const propKey = (p: t.ObjectProperty) => {
-  if (t.isIdentifier(p.key)) {
-    return p.key.name;
-  }
-
-  if (t.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) => staticKey(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) => staticKey(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,81 +115,76 @@ 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;
     }
-
-    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 declarator = declaration.declarations.find((decl) => isIdentifier(decl.id, identifier));
+    if (declarator) {
+      return declarator;
+    }
+  }
+  return undefined;
 };
 
-const _findVarInitialization = (identifier: string, program: t.Program) => {
-  const declarator = _findVarDeclarator(identifier, program);
-  return declarator?.init;
-};
+const isRequireOf = (node: Node | null | undefined, fromImport: string) =>
+  node?.type === 'CallExpression' &&
+  isIdentifier(node.callee, 'require') &&
+  isStringLiteral(node.arguments[0]) &&
+  isSource(node.arguments[0].value, fromImport);
 
-type RecastComment = t.Comment & { leading?: boolean };
-type CommentedStatement = t.Statement & { comments?: RecastComment[] };
+// `node:path` also finds an import of `path`.
+const isSource = (value: string, fromImport: string) =>
+  value === fromImport || value === fromImport.split('node:')[1];
 
-const NEXT_LINE_DIRECTIVE =
-  /^\s*(@ts-(expect-error|ignore)|[a-z]+-disable-next-line|prettier-ignore|biome-ignore)\b/;
+interface ImportName {
+  imported: string;
+  local: string;
+}
 
-/**
- * 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 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;
 
-// 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 });
+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 });
   }
-  program.body.splice(index, 0, statement);
+  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 {
   /**
-   * 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
@@ -200,8 +214,24 @@ 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.
+   * 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 or mutations. `writeConfig` refuses to write a
+   * config with diagnostics, even if another edit succeeded.
    *
    * @example
    * ```ts
@@ -216,7 +246,9 @@ 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`;
+   * so does a path through a value that is not an object literal, or one a spread, computed key, or
+   * duplicate field leaves unproven. `inspect` tells these apart.
    *
    * @example
    * ```ts
@@ -225,14 +257,33 @@ export class ConfigFile implements CsfObject {
    * object.get(['missing']); // undefined
    * ```
    */
-  get(path: readonly string[]): t.Expression | undefined {
-    const editor = this._editor('read');
-    return editor.ok ? editor.object.get(path) : undefined;
+  get(path: readonly string[]): CsfExpression | undefined {
+    const reader = this._reader();
+    return reader.ok ? reader.object.get(path) : undefined;
   }
 
   /**
-   * Read plain values without executing code. Missing fields return `undefined`; unresolved
-   * expressions also return `undefined` and add a mutation diagnostic.
+   * Read the expression at a property path like `get`, telling a missing field from one that cannot
+   * be read statically, and why.
+   *
+   * @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'
+   * ```
+   */
+  inspect(path: readonly string[]): CsfInspection {
+    const reader = this._reader();
+    return reader.ok
+      ? reader.object.inspect(path)
+      : { kind: 'unreadable', diagnostic: { ...reader.diagnostic, path: [...path] } };
+  }
+
+  /**
+   * 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
@@ -243,13 +294,12 @@ export class ConfigFile implements CsfObject {
    * ```
    */
   getValue(path: readonly string[]): CsfValue {
-    const editor = this._editor('read');
-    return editor.ok ? editor.object.getValue(path) : undefined;
+    const reader = this._reader();
+    return reader.ok ? reader.object.getValue(path) : undefined;
   }
 
   /**
-   * 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 +309,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(`[...${placeableTextOf(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));
   }
@@ -347,249 +396,280 @@ export class ConfigFile implements CsfObject {
     return this._mutate((object) => object.group(path, names));
   }
 
-  _mutate(operation: (object: CsfObject) => CsfMutationResult): CsfMutationResult {
-    const editor = this._editor('mutate');
-    return editor.ok === true
-      ? operation(editor.object)
-      : { ok: false, changed: false, diagnostic: editor.diagnostic };
+  /**
+   * 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 {
+    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;
+      });
+    }
   }
 
-  _editor(mode: 'read' | 'mutate') {
+  _mutate(operation: (object: CsfObjectEditor) => CsfMutationResult): CsfMutationResult {
     const editor = createConfigObject(
       this,
-      mode,
+      'mutate',
       (diagnostic) => this._mutationDiagnostics.push(diagnostic),
       () => {
-        this._changed = true;
-        this._exports = {};
-        this._exportDecls = {};
-        this.parse();
+        this._markChanged();
       }
     );
-    if (editor.ok === false) {
-      this._mutationDiagnostics.push(editor.diagnostic);
+    if (editor.ok === true) {
+      return operation(editor.object);
     }
-    return editor;
+    this._mutationDiagnostics.push(editor.diagnostic);
+    this.editor._refuse();
+    return { ok: false, changed: false, diagnostic: editor.diagnostic };
   }
 
-  _ast: t.File;
+  _reader() {
+    return createConfigObject(
+      this,
+      'read',
+      () => {},
+      () => {}
+    );
+  }
 
-  _code: string;
+  /** Edit the file's source directly, for edits that have no path. Commit to parse it again. */
+  editor: 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> = {};
-
-  _exportsObject: t.ObjectExpression | undefined;
+  _exportDecls: Record<string, E.VariableDeclarator | E.Function> = {};
 
-  _quotes: 'single' | 'double' | undefined;
+  _exportsObject: E.ObjectExpression | undefined;
 
   fileName?: string;
 
   hasDefaultExport = false;
 
-  constructor(ast: t.File, code: string, fileName?: string) {
-    this._ast = ast;
-    this._code = code;
+  constructor(code: string, fileName?: string) {
+    this.editor = new SourceEditor(code, fileName, () => {
+      this._exports = {};
+      this._exportDecls = {};
+      this._exportsObject = undefined;
+      this.hasDefaultExport = false;
+      this.parse();
+    });
     this.fileName = fileName;
   }
 
-  _parseExportsObject(exportsObject: t.ObjectExpression) {
+  /** 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.program;
+  }
+
+  get _code(): string {
+    return this.editor.code;
+  }
+
+  _parseExportsObject(exportsObject: E.ObjectExpression) {
     this._exportsObject = exportsObject;
-    (exportsObject.properties as t.ObjectProperty[]).forEach((p) => {
-      const exportName = propKey(p);
+    for (const p of exportsObject.properties) {
+      const exportName = staticKey(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)) {
-      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: t.Node, parent: t.Node = this._ast.program) => {
-    const decl = this._unwrap(node);
-    if (t.isIdentifier(decl) && t.isProgram(parent)) {
-      const initialization = _findVarInitialization(decl.name, parent);
-      return initialization ? this._unwrap(initialization) : decl;
+  _resolveDeclaration = (node: Node, isTopLevel = true) => {
+    const decl = unwrapExpression(node);
+    if (decl?.type === 'Identifier' && isTopLevel) {
+      const initialization = findVarInitialization(decl.name, this.program);
+      return initialization ? unwrapExpression(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;
-            }
+    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;
+            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) ??
+              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;
+              }
+              if (value) {
+                this._exports[exportName] = value;
               }
-            });
-          } 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._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 = staticKey(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 +733,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 +758,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 +777,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);
     }
 
@@ -720,173 +794,77 @@ export class ConfigFile implements CsfObject {
     return value;
   }
 
-  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);
-      }
-    };
-    // 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
-      this._ast.program.body.forEach((node) => {
-        // named export
-        if (t.isExportNamedDeclaration(node) && t.isVariableDeclaration(node.declaration)) {
-          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);
-            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]);
-            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)
-        ) {
-          const properties = node.expression.right.properties as t.ObjectProperty[];
-          removeProperty(properties, path[0]);
-          removedRootProperty = true;
-        }
-      });
-
-      if (removedRootProperty) {
-        return;
-      }
-    }
-
-    const properties = this.getFieldProperties(path) as t.ObjectProperty[];
-    if (properties) {
-      const lastPath = path.at(-1) as string;
-      removeProperty(properties, lastPath);
-    }
+  /** 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));
   }
 
-  appendValueToArray(path: string[], value: any) {
-    const node = this.valueToNode(value);
-
-    if (node) {
-      this.appendNodeToArray(path, node);
-    }
-  }
-
-  appendNodeToArray(path: string[], node: t.Expression) {
+  /** 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, t.arrayExpression([node]));
-    } else if (t.isArrayExpression(current)) {
-      current.elements.push(node);
-    } else {
-      throw new Error(`Expected array at '${path.join('.')}', got '${current.type}'`);
+      return this._mutate((object) => object.createArray(path, [source]));
+    }
+    if (current.type !== 'ArrayExpression') {
+      return this._notAnArray(path, current);
     }
+    appendToList(this.editor, arrayList(this.editor, current), [source]);
+    this.editor.commit();
+    this._markChanged();
+    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 (t.isArrayExpression(current)) {
-      const index = current.elements.findIndex((element) => {
-        if (t.isStringLiteral(element)) {
-          return element.value === value;
-        }
-        if (t.isObjectExpression(element)) {
-          const name = this._getPresetValue(element, 'name');
-          return name === value;
-        }
-        return this._getWrappedValue(element as t.Node) === value;
-      });
-      if (index >= 0) {
-        current.elements.splice(index, 1);
-      } 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._markChanged();
+    return { ok: true, changed: true };
   }
 
-  _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;
-        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;
+  _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);
+    this.editor._refuse();
+    return { ok: false, changed: false, diagnostic };
   }
 
-  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;
+  valueToNode(value: any): CsfExpression {
+    return parseExpression(printValue(value, this.editor.quote));
   }
 
-  getBodyDeclarations(): t.Statement[] {
-    return this._ast.program.body;
+  getBodyDeclarations(): Node[] {
+    return this.program.body;
   }
 
   /**
@@ -909,263 +887,121 @@ 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.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 createCsfObject(target, host, report, () => {
+        this._markChanged();
+      });
     });
-
-    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.editor, declaration);
+    this.editor.commit();
   }
 
   /**
-   * 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._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
-      );
+    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);
 
-    /**
-     * 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;
-
-    // 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();
+      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 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)
-          );
-        }
-      });
     } 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)
+      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)
               )
-            ),
-            t.callExpression(t.identifier('require'), [t.stringLiteral(fromImport)])
-          ),
-        ])
+            )
+        )
+        .map((name) => printImportName(name, ': '));
+      // Nothing may follow a rest element.
+      const pattern = patterns.find((id) =>
+        id.properties.every((property) => property.type === 'Property')
       );
+      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();
+  }
+
+  _findRequires(fromImport: string) {
+    return this.program.body.filter(
+      (node): node is E.VariableDeclaration =>
+        node.type === 'VariableDeclaration' &&
+        node.declarations.length === 1 &&
+        isRequireOf(node.declarations[0].init, fromImport)
+    );
+  }
+
+  _findImports(fromImport: string) {
+    return this.program.body.filter(
+      (node): node is E.ImportDeclaration =>
+        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');
@@ -1177,125 +1013,114 @@ 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._ast.program.body.find((node) => {
-      const hasDeclaration =
-        t.isImportDeclaration(node) &&
-        (node.source.value === fromImport || node.source.value === fromImport.split('node:')[1]);
+    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();
 
-      if (hasDeclaration) {
-        fromImport = node.source.value;
+    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 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 {
+        insertAfterImports(editor, `import ${clause} from ${source}${end}`);
       }
-
-      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(
-        (specifier) =>
-          t.isImportDefaultSpecifier(specifier) &&
-          t.isIdentifier(specifier.local) &&
-          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)));
+      if (values.length === 0) {
+        insertAfterImports(editor, `import ${source}${end}`);
       }
       // 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 (
+        !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)) {
-      if (importDeclaration) {
-        importSpecifier.forEach((specifier) => {
-          if (!hasImportSpecifier(importDeclaration, specifier)) {
-            importDeclaration.specifiers.push(getNewImportSpecifier(specifier));
-          }
+      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 },
         });
-      } else {
-        prependStatement(
-          this._ast.program,
-          t.importDeclaration(
-            importSpecifier.map(getNewImportSpecifier),
-            t.stringLiteral(fromImport)
-          )
-        );
       }
       // 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)
-          )
-        );
+    } else if (
+      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);
       }
     }
   }
@@ -1304,69 +1129,28 @@ export class ConfigFile implements CsfObject {
     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) {
-      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;
-    }
-
-    // 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);
+    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)) {
+      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;
-    }
-
-    // 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 no properties left in the destructuring, remove the entire declaration
-      if (objectPattern.properties.length === 0) {
-        this._ast.program.body.splice(requireDeclarationIndex, 1);
+      // 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' &&
+          names.some((name) => removesImport(name, property.key, property.value))
+      );
+      if (removed.length === id.properties.length) {
+        removeStatement(editor, declaration);
+      } else if (removed.length > 0) {
+        removeFromList(editor, objectList(editor, id), removed);
       }
     }
   }
@@ -1375,127 +1159,182 @@ 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) {
-      return;
-    }
-    const importDeclaration = this._ast.program.body[importDeclarationIndex] as t.ImportDeclaration;
-
     // 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);
+      for (const declaration of this._findImports(fromImport)) {
+        if (declaration.specifiers.length === 0) {
+          removeStatement(this.editor, declaration);
+        }
       }
-
       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) &&
-          specifier.local.name === importSpecifier.namespace
-      );
-
-      if (index !== -1) {
-        importDeclaration.specifiers.splice(index, 1);
+    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') {
-      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 default imports e.g. import foo from 'bar'
+      if (typeof importSpecifier === 'string') {
+        return (
+          specifier.type === 'ImportDefaultSpecifier' && specifier.local.name === importSpecifier
+        );
       }
-    }
-
-    // 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 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))
         );
-
-        if (index !== -1) {
-          importDeclaration.specifiers.splice(index, 1);
-        }
-      });
-    }
-
-    // If the import declaration has no specifiers left, remove it.
-    if (importDeclaration.specifiers.length === 0) {
-      this._ast.program.body.splice(importDeclarationIndex, 1);
-    }
+      }
+      // Handle namespace imports e.g. import * as foo from 'bar'
+      return (
+        specifier.type === 'ImportNamespaceSpecifier' &&
+        specifier.local.name === importSpecifier.namespace
+      );
+    });
   }
 
   /**
-   * 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,
     fromImport: string
   ) {
     this._removeRequireImport(importSpecifier, fromImport);
+    this.editor.commit();
     this._removeImport(importSpecifier, fromImport);
+    this.editor.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.editor;
+  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 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();
+  return { code, toString: () => code };
 };
 
 export const readConfig = async (fileName: string) => {
@@ -1515,18 +1354,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/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 e5a8c7d153ad..da8d09a31ffa 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 { type E, parseExpression, textOf } from './estree/ast.ts';
 
 const configurations = [
   `export default { parameters: { a11y: { element: '#root' } } };`,
@@ -70,7 +69,48 @@ describe('ConfigFile mutations', () => {
     }
   );
 
-  it('infers quotes and prints LF output for CRLF sources', () => {
+  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('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';",
       '',
@@ -79,13 +119,13 @@ describe('ConfigFile mutations', () => {
     const config = loadConfig(source).parse();
     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.
-    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', () => {
@@ -113,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([
@@ -160,11 +206,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 +286,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 +304,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 = textOf(value);
+        return parseExpression(`${source.slice(0, source.lastIndexOf('}'))} spy(); }`);
       })
     ).toEqual({ ok: true, changed: true });
 
@@ -285,14 +326,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 +339,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 +354,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 +370,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);
@@ -368,18 +402,65 @@ 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('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(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', () => {
+    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;
 
-    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');
     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) => {
@@ -387,7 +468,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..845a1c11b4b9 100644
--- a/code/core/src/csf-tools/ConfigObject.ts
+++ b/code/core/src/csf-tools/ConfigObject.ts
@@ -1,416 +1,489 @@
-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';
-
-type NamedExport = {
-  declaration: NodePath<t.VariableDeclarator | t.FunctionDeclaration>;
-  specifier?: NodePath<t.ExportSpecifier>;
-};
+import {
+  type CsfMutationDiagnostic,
+  type CsfObjectEditor,
+  type CsfObjectHost,
+  createCsfObject,
+} from './CsfObject.ts';
+import { type MemberInsert, type ObjectRoot, detachedMember, literalRoot } from './ObjectRoot.ts';
+import {
+  type E,
+  type Node,
+  type Property,
+  type Span,
+  isIdentifier,
+  isStringLiteral,
+  isTSWrapper,
+  isValidIdentifier,
+  locationOf,
+  outerSpan,
+  walk,
+} from './estree/ast.ts';
+import {
+  type List,
+  type SourceEditor,
+  appendStatement,
+  declaratorList,
+  lineIndent,
+  printKey,
+  printString,
+  reindent,
+  removeFromList,
+  removeStatement,
+  specifierList,
+} from './estree/editor.ts';
+import { generateUid } from './estree/scope.ts';
+import { placeableValueSource } from './estree/values.ts';
 
-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');
+
+// `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.editor;
+  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 && isTSWrapper(parent)) {
+      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'
         );
-        return;
       }
+    }
+    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'
+        );
+      }
+    }
+    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 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 } : {}),
-        });
+  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 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>();
+  const properties = entries.map((entry) => {
+    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 as E.IdentifierName);
+    const property = detachedMember(key, value, false, entry.declaration);
+    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 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 } : {}),
-            });
-          }
+  const removalOf = ({ specifier, statement, exportStatement, declaration }: NamedEntry) =>
+    specifier
+      ? {
+          statement: specifier.statement,
+          list: specifierList(editor, specifier.statement),
+          item: specifier.specifier,
         }
-        program.scope.crawl();
-        markChanged();
-      };
+      : {
+          statement: exportStatement ?? statement,
+          list:
+            statement.type === 'VariableDeclaration'
+              ? declaratorList(editor, statement)
+              : undefined,
+          item: declaration,
+        };
+
+  // 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);
+      }
+    }
+  };
+
+  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) => 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') {
+        editor.edits.overwrite(span.start, span.end, indented);
+        return;
+      }
+      const id = declaration.id!.name;
+      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 + indented.slice(fn[0].length)
+        );
+        return;
+      }
+      editor.edits.overwrite(declaration.start, declaration.end, `const ${id} = ${indented};`);
+    },
+    rename: (member, key) => {
+      const entry = entryOf(member);
+      const name = key;
+      if (entry.specifier) {
+        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,
+          exported.start === local.start ? `${editor.source(local)} as ${printed}` : printed
+        );
+        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;
+      }
+      removeEntries([entry]);
+      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)}: ${placeableValueSource(editor, member)}`
+        )
+        .join(', ');
+      declare([{ key, value: `{ ${inner} }`, text: '' }]);
+    },
+    take: (member, key) => {
+      const value = placeableValueSource(editor, member);
+      return { key, value, text: `${printKey(key, quote)}: ${value}` };
+    },
+  };
+};
 
-      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: CsfObjectEditor } | { ok: false; diagnostic: CsfMutationDiagnostic } {
+  const located = locateConfigRoot(config, mode);
+  if (located.ok === false) {
+    return located;
+  }
+  const host: CsfObjectHost = {
+    editor: config.editor,
+    root: () => {
+      const current = locateConfigRoot(config, mode);
+      return current.ok ? current.root : undefined;
     },
-  });
-  return result;
+  };
+  return { ok: true, object: createCsfObject({ kind: 'config' }, host, report, markChanged) };
 }
diff --git a/code/core/src/csf-tools/CsfFile.test.ts b/code/core/src/csf-tools/CsfFile.test.ts
index b99ddc322ef7..09c5ceb3795e 100644
--- a/code/core/src/csf-tools/CsfFile.test.ts
+++ b/code/core/src/csf-tools/CsfFile.test.ts
@@ -36,19 +36,39 @@ 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('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'
+    );
+    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" };\r\n\r\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', () => {
@@ -83,9 +103,7 @@ describe('CsfFile', () => {
           { transformInlineMeta: true }
         )
       ).toMatchInlineSnapshot(`
-        "const _meta = {
-          title: 'foo/bar'
-        };
+        "const _meta = { title: 'foo/bar' };
         export default _meta;"
       `);
     });
@@ -1297,6 +1315,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(
@@ -2455,6 +2504,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(
@@ -3019,7 +3102,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]
         `);
@@ -3075,6 +3158,57 @@ 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 = () => {};
+            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();
+
+        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 },
+          { 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 3ad209064eaa..2648955e4e51 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,31 @@ 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,
+  EstreeParseError,
+  type Node,
+  type SourceLocation,
+  type Span,
+  children,
+  staticKey,
+  isFunction,
+  isIdentifier,
+  isRegExpLiteral,
+  isStringLiteral,
+  locationOf,
+  outerSpan,
   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 {
+  type GeneratedMap,
+  type InputSourceMap,
+  SourceEditor,
+  appendStatement,
+  insertStatementAfter,
+} from './estree/editor.ts';
+import { generateUid, isDeclared } from './estree/scope.ts';
+import { findVarInitialization } from './findVarInitialization.ts';
 
 type CsfMutationState = {
   diagnostics: CsfMutationDiagnostic[];
@@ -61,59 +57,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' && staticKey(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 +162,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 +176,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 +219,16 @@ 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' && staticKey(prop) === 'mount');
     }
   }
   return false;
@@ -208,17 +241,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 +259,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 +270,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 +281,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 +305,54 @@ 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;
+/** The import a meta's `component` refers to: `imported` is `'default'` for a default import. */
+export interface CsfComponentImport {
+  source: string;
+  imported: string;
+  local: string;
+}
 
-  _file: BabelFile;
+export class CsfFile {
+  /**
+   * 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;
 
   _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> = {};
+  _metaAnnotations: Record<string, Node> = {};
 
-  _storyDeclarationPath: Record<string, NodePath<t.VariableDeclarator | t.FunctionDeclaration>> =
-    {};
+  _storyExports: Record<string, E.VariableDeclarator | E.Function> = {};
 
-  _storyPaths: Record<string, NodePath<t.ExportNamedDeclaration>> = {};
+  // The `export` statement of each story (the declaration for `export { X as Y }`).
+  _storyStatements: Record<string, E.ExportNamedDeclaration | Node> = {};
 
-  _metaStatement: t.Statement | undefined;
+  _metaStatement: Node | undefined;
 
-  _metaStatementPath: NodePath<t.Statement> | undefined;
-
-  _metaNode: t.ObjectExpression | 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 +360,9 @@ export class CsfFile {
    */
   _metaNodeIsSynthetic: boolean | undefined;
 
-  _storyStatements: Record<string, t.ExportNamedDeclaration | t.Expression> = {};
-
-  _storyAnnotations: Record<string, Record<string, t.Node>> = {};
+  _storyAnnotations: Record<string, Record<string, Node>> = {};
 
-  _templates: Record<string, t.Expression> = {};
+  _templates: Record<string, Node> = {};
 
   _namedExportsOrder?: string[];
 
@@ -339,16 +370,41 @@ export class CsfFile {
 
   _tests: StoryTest[] = [];
 
-  constructor(ast: t.File, options: CsfOptions, file: BabelFile) {
-    this._ast = ast;
-    this._file = file;
+  // 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._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.program;
+  }
+
+  get _code(): string {
+    return this.editor.code;
+  }
+
+  _loc(node: Span | undefined): Located {
+    return node ? { loc: locationOf(this.editor.code, node.start, node.end) } : undefined;
+  }
+
   /**
-   * 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
@@ -380,8 +436,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
@@ -401,575 +457,639 @@ 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;
+          });
+        }
       }
     );
   }
 
-  _parseTitle(value: t.Node) {
-    const node = t.isIdentifier(value)
-      ? findVarInitialization(value.name, this._ast.program)
-      : value;
-    if (t.isStringLiteral(node)) {
+  /**
+   * 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 {
+    return this.editor.transaction(fn);
+  }
+
+  /**
+   * 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) {
+    this.appendStatement(code);
+  }
+
+  _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 = [];
+    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) {
+    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 = staticKey(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 {
+    this._assertIndexed();
+    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;
+      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) {
+      // 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 = staticKey(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' && staticKey(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;
+        } 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;
+        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') {
+          this._metaVariableName = localName;
+          const metaNode = this._metaObjectFrom(decl);
+          if (metaNode && isTopLevel) {
+            this._parseMeta(metaNode, this.program);
           }
-        },
-      },
-      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 {
+          const annotations = {} as Record<string, Node>;
+          let storyNode: Node | null | undefined = decl;
+          let storyIsFactory = false;
+          const unwrappedDecl = unwrapExpression(decl);
+          if (this._metaIsFactory && isCsfFactoryCall(unwrappedDecl)) {
+            storyIsFactory = true;
+            storyNode = unwrappedDecl.arguments[0] as Node | undefined;
           }
-          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
-                  );
-                }
+          // 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';
+          if (this._metaIsFactory && !storyIsFactory && !isImported) {
+            continue;
+          }
+          if (storyNode?.type === 'ObjectExpression') {
+            for (const p of storyNode.properties) {
+              const key = staticKey(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: storyIsFactory ? { factory: true } : {},
+          };
+        }
+      }
+    }
+  }
+
+  _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);
+      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();
+    };
+    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 +1097,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 +1110,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 +1137,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,18 +1160,50 @@ export class CsfFile {
       }
     }
 
-    return self as CsfFile & IndexedCSFFile;
+    return this as CsfFile & IndexedCSFFile;
   }
 
   public get meta() {
+    this._assertIndexed();
     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);
   }
 
-  public getStoryTests(story: string | t.Node) {
+  public getStoryTests(story: string | Node) {
+    this._assertIndexed();
     const storyNode = typeof story === 'string' ? this._storyStatements[story] : story;
     if (!storyNode) {
       return [];
@@ -1060,6 +1212,7 @@ export class CsfFile {
   }
 
   public get indexInputs(): IndexInput[] {
+    this._assertIndexed();
     const { fileName } = this._options;
     if (!fileName) {
       throw new Error(
@@ -1122,47 +1275,53 @@ 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.
+export const loadCsf = (code: string, options: CsfOptions) => new CsfFile(code, options);
 
-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);
+/**
+ * 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[];
 };
 
+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;
+}
+
+/**
+ * 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.generateMap({
+      source: options.sourceFileName ?? csf._options.fileName,
+      inputSourceMap: options.inputSourceMap,
+    }) as unknown 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 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();
+  return { code, toString: () => code };
 };
 
 export const readCsf = async (fileName: string, options: CsfOptions) => {
@@ -1176,5 +1335,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..d3a98109de9d
--- /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 CRLF', 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' };\r\nexport const Primary = { args: { label: 'Hi' } };\r\n"
+    );
+  });
+});
diff --git a/code/core/src/csf-tools/CsfObject.test.ts b/code/core/src/csf-tools/CsfObject.test.ts
index e2167bbb0133..930376b45e03 100644
--- a/code/core/src/csf-tools/CsfObject.test.ts
+++ b/code/core/src/csf-tools/CsfObject.test.ts
@@ -1,10 +1,15 @@
 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 { loadConfig, printConfig } from './ConfigFile.ts';
+import type { CsfExpression, CsfValue } from './CsfObject.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();
@@ -12,6 +17,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(textOf(meta.get(['parameters'])!)).toBe(expression);
+      expect(textOf(parseExpression(expression))).toBe(expression);
+    }
+  );
+
   it.each([
     { expression: 'false', expected: false },
     { expression: '-2.5', expected: -2.5 },
@@ -42,23 +61,69 @@ 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);
+  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 } };'
+    );
+    const [story] = csf.objects({ meta: false });
 
-      const result = printCsf(csf);
-      expect(result.code).not.toContain('\r');
-    } finally {
-      Object.defineProperty(os, 'EOL', { value: original });
-    }
+    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(story.get(['args', 'size'])).toBeUndefined();
+    expect(csf.mutationDiagnostics).toEqual([]);
+  });
+
+  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', () => {
+    const csf = parse(
+      'export default {};\nexport const A = Template.bind({});\nA.args = { size: "l" };\nA.parameters = { a: 1 };'
+    );
+    const [story] = csf.objects({ meta: false });
+    const [meta] = csf.objects({ stories: false });
+
+    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: [] },
+    });
+    expect(meta.inspect([])).toMatchObject({ kind: 'unreadable' });
+    expect(story.get([])).toBeUndefined();
+    expect(csf.mutationDiagnostics).toEqual([]);
   });
 
   it('keeps local bindings readable after replacing a story expression', () => {
@@ -105,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} };`);
@@ -113,15 +178,187 @@ describe('CsfObject', () => {
 
     expect(meta.getValue(['parameters'])).toBeUndefined();
     expect(probe).not.toHaveBeenCalled();
-    expect(csf.mutationDiagnostics).toContainEqual(
-      expect.objectContaining({
+    expect(csf.mutationDiagnostics).toEqual([]);
+    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)).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,
+    });
+    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.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();
+
+    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(textOf(again.get(['b'])!)).toBe('1, 2');
+    expect(again.getValue(['c'])).toBe(1);
+    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 });
+
+    const copy = { ...meta.get(['a'])!, value: 5, raw: '5' } as CsfExpression;
+    expect(meta.set(['b'], copy)).toMatchObject({
+      ok: false,
+      changed: false,
+      diagnostic: {
         code: 'unsupported-value',
-        path: ['parameters'],
-      })
+        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 };`);
+  });
+
+  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 });
+
+    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)) };`
     );
-    expect(csf.changed).toBe(false);
   });
 
+  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};' },
+  ])('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.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};',
+    },
+    {
+      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 in $object',
+    ({ 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 } };`
@@ -143,13 +380,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 = textOf(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 +447,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) {
@@ -239,19 +474,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([]);
   });
 
@@ -293,7 +533,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 });
@@ -318,21 +557,31 @@ 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' }],
     });
   });
 
-  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 replacement = t.stringLiteral('Replacement');
+    const value = meta.get(['title']) as ESTree.StringLiteral;
+    const inspected = meta.inspect(['args']);
+    const replacement = parseExpression('"Replacement"');
 
-    if (t.isStringLiteral(value)) {
+    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.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 +599,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',
     });
   });
@@ -408,15 +657,16 @@ 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', 'first'] }),
+    ]);
   });
 
   it.each([
@@ -475,6 +725,356 @@ 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([
+    [
+      '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 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 };',
+      ['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 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, ...Two, args: { ...Two.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.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 };'],
+    [
+      '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};"
+    );
+    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 });
+
+    expect(story.set(path, 'x')).toMatchObject({
+      ok: false,
+      changed: false,
+      diagnostic: { code },
+    });
+    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('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('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 {
@@ -487,8 +1087,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: ${textOf(values.elements[0])}\n}`)
           : undefined
       )
     ).toEqual({ ok: true, changed: true });
@@ -522,6 +1122,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);
@@ -550,12 +1177,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);
   });
 
@@ -567,6 +1194,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' };
@@ -682,10 +1322,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 +1388,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', () => {
@@ -822,4 +1462,302 @@ 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();
+    const source = "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) =>
+        parseExpression(`[...${placeableTextOf(value)}, 'autodocs']`)
+      );
+
+      expect(result).toEqual({
+        ok: false,
+        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(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('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.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' },
+    ])(
+      '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', () => {
+    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);
+      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', () => {
+      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' });
+    });
+
+    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);
+    });
+  });
+});
+
+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 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 };\nexport const Secondary = { args: {} };\nSecondary.parameters = { a: 1 };`
+    );
+    const [primary, secondary] = csf.objects({ meta: false });
+
+    expect(primary.node).toBeUndefined();
+    expect(textOf(secondary.node!)).toBe('{ args: {} }');
+
+    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 6f9f688faf0a..804b8192a846 100644
--- a/code/core/src/csf-tools/CsfObject.ts
+++ b/code/core/src/csf-tools/CsfObject.ts
@@ -1,18 +1,39 @@
-import { type NodePath, types as t } from 'storybook/internal/babel';
-
-import { pathForNode, unwrapExpression } from './story-shape/index.ts';
+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,
+  locationOf,
+  parseExpression,
+  staticKey,
+  unwrapExpression,
+} from './estree/ast.ts';
+import {
+  type SourceEditor,
+  detachedTextOf,
+  printKey,
+  printMembers,
+  printValue,
+} from './estree/editor.ts';
+import {
+  type CsfValue,
+  UNRESOLVED,
+  isEvaluationInert,
+  nodeWithoutParse,
+  readValue,
+  resolveExpression,
+  valueSource,
+} from './estree/values.ts';
+
+export type { CsfValue };
 
 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'
@@ -24,32 +45,44 @@ export type CsfMutationDiagnosticCode =
   | 'unsupported-member'
   | 'occupied-destination'
   | 'cyclic-move'
-  | 'evaluation-order';
+  | 'evaluation-order'
+  | 'invalid-csf';
 
 export interface CsfMutationDiagnostic {
   code: CsfMutationDiagnosticCode;
   target: CsfObjectTarget;
   path: readonly string[];
   message: string;
-  loc?: t.SourceLocation;
+  loc?: SourceLocation;
 }
 
+/**
+ * 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 }
+  | { kind: 'missing' }
+  | { kind: 'unreadable'; diagnostic: CsfMutationDiagnostic };
+
+/**
+ * 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: 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
+ * one file can be written to another without a code generator.
+ */
+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
@@ -71,8 +104,25 @@ 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`.
+   * 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
+   * ```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. 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. `inspect` tells these apart.
    *
    * @example
    * ```ts
@@ -81,10 +131,23 @@ export interface CsfObject {
    * object.get(['missing']); // undefined
    * ```
    */
-  get(path: readonly string[]): t.Expression | undefined;
+  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, and why.
+   *
+   * @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'
+   * ```
+   */
+  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
@@ -96,8 +159,8 @@ 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.
+   * Expressions can also be nested in the arrays and objects of a plain value.
    *
    * @example
    * ```ts
@@ -107,24 +170,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')])
+   * 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']
+   * textOf(object.get(['args', 'count'])!); // '1 + 1'
    * ```
    */
   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.
@@ -179,248 +241,268 @@ 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;
 }
 
-const UNRESOLVED = Symbol('unresolved');
+export interface CsfObjectHost {
+  readonly editor: SourceEditor;
+  // Located again after every commit.
+  root(): ObjectRoot | undefined;
+}
 
 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 };
-
-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);
 
 const unsafePath = (path: readonly string[]) => path.includes('__proto__');
 
-const lookupProperty = (
-  object: t.ObjectExpression,
-  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;
-
-  for (const member of object.properties) {
-    const key = t.isSpreadElement(member) ? undefined : staticKey(member);
-    if (key === undefined) {
-      unknown = {
-        code: t.isSpreadElement(member) ? 'spread-field' : 'dynamic-key',
-        node: member,
-      };
-      if (matches.length > 0) {
-        unknownAfterMatch = unknown;
-      }
-      continue;
-    }
-    if (key !== name) {
-      continue;
+// `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);
     }
-    if (!t.isObjectProperty(member) && !t.isObjectMethod(member, { kind: 'method' })) {
-      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 ?? (removing || matches.length === 0 ? unknown : undefined);
-  if (unproven) {
-    return { ok: false, code: unproven.code, node: unproven.node };
-  }
-  return { ok: true, property: matches[0] };
+  return Object.freeze(node);
 };
 
-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;
-};
+class Editor implements CsfObjectEditor {
+  #changed = false;
 
-const isEvaluationInert = (node: t.Node): boolean => {
-  const value = unwrapExpression(node);
-  if (t.isTemplateLiteral(value)) {
-    return value.expressions.length === 0;
-  }
-  if (t.isLiteral(value) || t.isFunctionExpression(value) || t.isArrowFunctionExpression(value)) {
-    return true;
-  }
-  if (t.isUnaryExpression(value)) {
-    return ['!', 'void', 'typeof'].includes(value.operator)
-      ? isEvaluationInert(value.argument)
-      : t.isNumericLiteral(unwrapExpression(value.argument));
-  }
-  if (t.isArrayExpression(value)) {
-    return value.elements.every((element) => element === null || isEvaluationInert(element));
-  }
-  if (t.isObjectExpression(value)) {
-    return value.properties.every(
-      (property) =>
-        t.isObjectProperty(property) &&
-        !property.computed &&
-        staticKey(property) !== undefined &&
-        isEvaluationInert(property.value)
-    );
-  }
-  return false;
-};
+  readonly target: CsfObjectTarget;
 
-class CsfObjectEditor implements CsfObject {
-  #changed = false;
+  private readonly host: CsfObjectHost;
+
+  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,
+    reportDiagnostic: ReportDiagnostic,
+    markChanged: MarkChanged
+  ) {
+    this.target = target;
+    this.host = host;
+    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;
+  get node() {
+    return this.host.root()?.node;
   }
 
-  getValue(path: readonly string[]): CsfValue {
-    const expression = this.getExpression(path);
-    if (!expression) {
-      return 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');
     }
-    const value = this.readValue(expression);
-    if (value === UNRESOLVED) {
-      this.failure('unsupported-value', path, expression);
-      return undefined;
+    return root;
+  }
+
+  get(path: readonly string[]): CsfExpression | undefined {
+    const property = this.getProperty(path);
+    return property && readOnly(parseExpression(valueSource(this.editor, property)));
+  }
+
+  // Unlike `get`, which reads the object itself as missing, `inspect` reports it.
+  inspect(path: readonly string[]): CsfInspection {
+    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),
+      };
     }
-    return value;
+    const found = this.find(path);
+    return found.kind === 'property'
+      ? { kind: 'value', node: readOnly(parseExpression(valueSource(this.editor, found.property))) }
+      : found;
   }
 
-  private getExpression(path: readonly string[]): t.Expression | undefined {
-    const logicalPath = this.normalizePath(path);
-    if (!logicalPath) {
+  getValue(path: readonly string[]): CsfValue {
+    const property = this.getProperty(path);
+    if (!property || property.method) {
       return undefined;
     }
-    if (logicalPath.length === 0) {
-      return this.prefix.length > 0 ? this.root.node : undefined;
+    const value = readValue(this.editor.scopes, property.value);
+    return value === UNRESOLVED ? undefined : value;
+  }
+
+  private find(
+    path: readonly string[]
+  ):
+    | { kind: 'property'; property: Property }
+    | { kind: 'missing' }
+    | { kind: 'unreadable'; diagnostic: CsfMutationDiagnostic } {
+    if (path.length === 0) {
+      return { kind: 'missing' };
     }
-    const found = this.inspect(logicalPath);
+    const found = this.locate(path, 'read', false);
     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 && propertyExpression(found.property);
+    return found.property ? { kind: 'property', property: found.property } : { kind: 'missing' };
+  }
+
+  private getProperty(path: readonly string[]): Property | undefined {
+    const found = this.find(path);
+    return found.kind === 'property' ? found.property : undefined;
+  }
+
+  set(path: readonly string[], value: CsfValue<CsfExpression>): CsfMutationResult {
+    return this.atomic(() => this.setValue(path, value));
   }
 
-  set(path: readonly string[], value: CsfValue | t.Expression): CsfMutationResult {
-    const logicalPath = this.normalizePath(path);
-    if (!logicalPath || logicalPath.length === 0 || unsafePath(logicalPath)) {
-      return this.failure('unsupported-member', path, this.root.node);
+  private setValue(path: readonly string[], value: CsfValue<CsfExpression>): CsfMutationResult {
+    if (path.length === 0 || unsafePath(path)) {
+      return this.failure('unsupported-member', path, this.anchor());
     }
-    const inspected = this.inspect(logicalPath);
+    const unprintable = this.unprintable(path, value);
+    if (unprintable) {
+      return unprintable;
+    }
+    const inspected = this.locate(path, 'set');
     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 };
+    if (inspected.missing !== undefined) {
+      const refused = this.refusedKey(inspected.parent, path[inspected.missing], path);
+      if (refused) {
+        return refused;
+      }
     }
-    const expression =
-      t.isNode(value) && t.isExpression(value) ? t.cloneNode(value, true) : t.valueToNode(value);
-    if (inspected.property && inspected.parent) {
-      this.replaceValue(inspected.property, inspected.parent, expression);
+    if (inspected.missing !== undefined && inspected.missing < path.length - 1) {
+      const carried = carriedSpreads(
+        this.editor,
+        inspected.parent.properties,
+        path[inspected.missing]
+      );
+      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.replaceValue(inspected.property, text);
     } else {
-      this.insert(logicalPath, t.objectProperty(keyNode(logicalPath.at(-1)!), expression));
+      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 {
+    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());
+    }
+    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);
     }
-    return this.success();
+    const refused = this.refusedKey(inspected.parent, path[inspected.missing!], path);
+    if (refused) {
+      return refused;
+    }
+    const carried = carriedSpreads(
+      this.editor,
+      inspected.parent.properties,
+      path[inspected.missing!]
+    );
+    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: t.Expression) => t.Expression | undefined
+    derive: (value: CsfExpression) => CsfExpression | undefined
+  ): CsfMutationResult {
+    return this.atomic(() => this.transformValue(path, derive));
+  }
+
+  private transformValue(
+    path: readonly string[],
+    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);
+    if (path.length === 0 || unsafePath(path)) {
+      return this.failure('unsupported-member', path, this.anchor());
     }
-    const inspected = this.inspect(logicalPath);
+    const inspected = this.locate(path);
     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) {
       return { ok: true, changed: false };
     }
+    const value = readOnly(parseExpression(valueSource(this.editor, property)));
     const derived = derive(value);
     if (!derived || derived === value) {
       return { ok: true, changed: false };
     }
-    this.replaceValue(property, parent, derived);
-    return this.success();
+    const unprintable = this.unprintable(path, derived);
+    if (unprintable) {
+      return unprintable;
+    }
+    parent.replaceValue(property, detachedTextOf(derived));
+    return this.commit(path);
   }
 
   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.atomic(() => this.removeValue(path));
+  }
+
+  private removeValue(path: readonly string[]): CsfMutationResult {
+    if (path.length === 0 || unsafePath(path)) {
+      return this.failure('unsupported-member', path, this.anchor());
     }
-    const inspected = this.inspect(logicalPath);
+    const inspected = this.locate(path);
     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, logicalPath.at(-1)!, true);
+    const removal = lookupProperty(inspected.parent.properties, path.at(-1)!, 'remove');
     if (!removal.ok) {
       return this.failure(removal.code, path, removal.node);
     }
-    inspected.parent.properties.splice(inspected.parent.properties.indexOf(inspected.property), 1);
-    this.removeEmptyParents(logicalPath);
-    return this.success();
+    inspected.parent.remove([inspected.property]);
+    const removed = this.commit(path);
+    if (!removed.ok) {
+      return removed;
+    }
+    return this.removeEmptyParents(path) ?? removed;
   }
 
   rename(path: readonly string[], name: string): CsfMutationResult {
@@ -429,122 +511,125 @@ 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.root.node);
+    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());
     }
-    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)
-    ) {
-      return this.failure('cyclic-move', to, this.root.node);
+    if (to.length > from.length && from.every((part, index) => to[index] === part)) {
+      return this.failure('cyclic-move', to, this.anchor());
     }
 
-    const source = this.inspect(sourcePath);
+    const source = this.locate(from);
     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, sourcePath.at(-1)!, true);
+    const removal = lookupProperty(source.parent.properties, from.at(-1)!, 'remove');
     if (!removal.ok) {
       return this.failure(removal.code, from, removal.node);
     }
-    const destination = this.inspect(destinationPath);
+    const destination = this.locate(to);
     if (destination.ok === false) {
       return this.failure(destination.code, to, destination.node);
     }
     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 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)
     ) {
-      if (t.isObjectProperty(source.property)) {
-        source.property.shorthand = false;
-      }
-      source.property.key = keyNode(destinationPath.at(-1)!);
-      source.property.computed = false;
-      return this.success();
+      source.parent.rename(source.property, key);
+      return this.commit(from);
     }
 
-    source.parent.properties.splice(source.parent.properties.indexOf(source.property), 1);
-    if (t.isObjectProperty(source.property)) {
-      source.property.shorthand = false;
+    const moved = source.parent.take(source.property, key);
+    // 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) {
+      return inserted;
     }
-    source.property.key = keyNode(destinationPath.at(-1)!);
-    source.property.computed = false;
-    this.insert(destinationPath, source.property);
-    this.removeEmptyParents(sourcePath);
-    return this.success();
+    const remaining = this.locate(from);
+    if (remaining.ok === false || !remaining.property) {
+      throw new Error(`CsfObject: ${from.join('.')} was not found again after moving it`);
+    }
+    remaining.parent.remove([remaining.property]);
+    const removed = this.commit(from);
+    if (!removed.ok) {
+      return 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)) {
-      return this.failure('unsupported-member', path, this.root.node);
+    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());
     }
-    const group = logicalPath.at(-1)!;
+    const group = path.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;
-    if (logicalPath.length > 1) {
-      const inspected = this.inspect(logicalPath.slice(0, -1));
+    let parent: ObjectRoot = this.root();
+    if (path.length > 1) {
+      const inspected = this.locate(path.slice(0, -1));
       if (inspected.ok === false) {
         return this.failure(inspected.code, path, inspected.node);
       }
       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 = resolveExpression(this.editor.scopes, 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 +642,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 +655,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 +665,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 +688,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 +701,26 @@ 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)
-        );
+      const refused = this.refusedKey(parent, group, path);
+      if (refused) {
+        return refused;
+      }
+      if (parent.detached) {
+        const effectful = moved.find((property) => !isEvaluationInert(property.value));
         if (effectful) {
           return this.failure(
             'evaluation-order',
@@ -638,6 +730,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) {
@@ -648,254 +750,228 @@ 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))
-      );
-    }
-    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)
-      );
+      parent.group(moved, group);
     }
+    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[]): CsfMutationResult | undefined {
     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) {
+      const ancestor = this.locate(path.slice(0, depth));
+      if (ancestor.ok === false || !ancestor.property || ancestor.property.method) {
         return;
       }
-      const value = this.resolveExpression(ancestor.property.value);
-      if (!t.isObjectExpression(value) || value.properties.length > 0) {
+      const value = resolveExpression(this.editor.scopes, ancestor.property.value);
+      if (value?.type !== 'ObjectExpression' || value.properties.length > 0) {
         return;
       }
-      if (!lookupProperty(ancestor.parent, path[depth - 1], true).ok) {
+      if (!lookupProperty(ancestor.parent.properties, path[depth - 1], 'remove').ok) {
         return;
       }
-      ancestor.parent.properties.splice(ancestor.parent.properties.indexOf(ancestor.property), 1);
-    }
-  }
-
-  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);
-  }
-
-  private readValue(node: t.Node): CsfValue | typeof UNRESOLVED {
-    const value = this.resolveExpression(node);
-    if (t.isStringLiteral(value) || t.isNumericLiteral(value) || t.isBooleanLiteral(value)) {
-      return value.value;
-    }
-    if (t.isNullLiteral(value)) {
-      return null;
-    }
-    if (t.isIdentifier(value)) {
-      return value.name === 'undefined' ? undefined : UNRESOLVED;
-    }
-    if (t.isTemplateLiteral(value) && value.expressions.length === 0) {
-      return value.quasis[0].value.cooked ?? UNRESOLVED;
-    }
-    if (t.isUnaryExpression(value)) {
-      const argument = this.readValue(value.argument);
-      if (typeof argument !== 'number') {
-        return UNRESOLVED;
-      }
-      if (value.operator === '-') {
-        return -argument;
-      }
-      return value.operator === '+' ? argument : UNRESOLVED;
-    }
-    if (t.isArrayExpression(value)) {
-      const elements: CsfValue[] = [];
-      for (const element of value.elements) {
-        if (!element) {
-          elements.length++;
-          continue;
-        }
-        const item = this.readValue(t.isSpreadElement(element) ? element.argument : element);
-        if (item === UNRESOLVED) {
-          return UNRESOLVED;
-        }
-        if (t.isSpreadElement(element)) {
-          if (!Array.isArray(item)) {
-            return UNRESOLVED;
-          }
-          elements.push(...item);
-        } else {
-          elements.push(item);
-        }
+      ancestor.parent.remove([ancestor.property]);
+      const committed = this.commit(path);
+      if (!committed.ok) {
+        return committed;
       }
-      return elements;
     }
-    if (t.isObjectExpression(value)) {
-      const entries: [string, CsfValue][] = [];
-      for (const property of value.properties) {
-        if (t.isSpreadElement(property)) {
-          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 (
-          !t.isObjectProperty(property) ||
-          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: t.Node): t.Node | undefined {
-    const program = this.root.scope.getProgramParent().path;
-    if (!program.isProgram()) {
-      return undefined;
-    }
-    let value = unwrapExpression(node);
-    const visited = new Set<t.Node>();
-    while (t.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') {
-        return value;
-      }
-      if (
-        !binding?.constant ||
-        binding.referencePaths.length !== 1 ||
-        binding.referencePaths[0].node !== value ||
-        !binding.path.isVariableDeclarator() ||
-        !binding.path.node.init
-      ) {
-        return undefined;
-      }
-      value = unwrapExpression(binding.path.node.init);
-    }
-    return value;
+    return undefined;
   }
 
-  private inspect(path: readonly string[]) {
-    let object = this.root.node;
-    let parent: t.ObjectExpression | undefined;
-    let property: t.ObjectProperty | t.ObjectMethod | undefined;
+  // `access` applies to the last field of the path, and to its parents for a `set`, which creates
+  // missing ones; other parents are read. Only a lookup for a read follows a shared constant.
+  private locate(
+    path: readonly string[],
+    access: Access = 'read',
+    edits = true
+  ):
+    | { ok: true; parent: ObjectRoot; property?: Property; missing?: number }
+    | { ok: false; code: CsfMutationDiagnosticCode; node: Node } {
+    let parent = this.root();
+    let property: Property | undefined;
 
     for (const [index, name] of path.entries()) {
-      const lookup = lookupProperty(object, name);
+      const lookup = lookupProperty(
+        parent.properties,
+        name,
+        index === path.length - 1 || access === 'set' ? access : 'read'
+      );
       if (lookup.ok === false) {
         return lookup;
       }
-      parent = object;
       property = lookup.property;
-      if (!property || index === path.length - 1) {
-        return { ok: true as const, parent, property };
+      if (!property) {
+        return { ok: true, parent, missing: index };
+      }
+      if (index === path.length - 1) {
+        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 };
+      const value = resolveExpression(this.editor.scopes, property.value, edits ? 'write' : 'read');
+      if (value?.type !== 'ObjectExpression') {
+        return { ok: false, code: 'unsupported-member', node: property.value };
       }
-      object = value;
+      parent = literalRoot(this.editor, 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);
+  // 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;
+    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 this.root.buildCodeFrameError('CsfObject mutation preflight was invalidated');
+        throw 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');
+        const carried = carriedSpreads(this.editor, parent.properties, name);
+        if (carried.ok === false) {
+          throw invalidated();
         }
-        object = value;
+        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 = texts.some((text) => text.includes('\n'));
+        const block = (members: string[]) =>
+          multiline ? printMembers(members, indent) : `{ ${members.join(', ')} }`;
+        const forward = (depth: number, into: 'object' | 'array' = 'object') => {
+          const spread = carriedSpread(carried.spread, 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, 'array'), ...texts].join(', ')}]`;
+        for (let depth = last - 1; depth >= 0; depth--) {
+          nested = block([...forward(depth), `${printKey(missing[depth + 1], quote)}: ${nested}`]);
+        }
+        parent.append([{ key: name, value: nested, text: `${printKey(name, quote)}: ${nested}` }]);
+        return;
+      }
+      const value = lookup.property.method
+        ? undefined
+        : resolveExpression(this.editor.scopes, lookup.property.value);
+      if (value?.type !== 'ObjectExpression') {
+        throw invalidated();
       }
+      parent = literalRoot(this.editor, value);
     }
-    object.properties.push(property);
+    if (!('members' in content)) {
+      throw invalidated();
+    }
+    parent.append(content.members);
   }
 
-  private failure(
+  // `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;
+  }
+
+  private anchor(): Node {
+    return this.editor.program;
+  }
+
+  private diagnostic(
     code: CsfMutationDiagnosticCode,
     path: readonly string[],
-    node: t.Node,
+    node: Node,
     message = `Cannot mutate ${path.join('.')} because the target contains ${code.replaceAll('-', ' ')}`
-  ) {
-    const diagnostic: CsfMutationDiagnostic = {
+  ): CsfMutationDiagnostic {
+    return {
       code,
       target: this.target,
       path: [...path],
       message,
-      ...(node.loc ? { loc: node.loc } : {}),
+      ...(node !== this.editor.program
+        ? { 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);
+    // 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 };
   }
 
-  private success(): CsfMutationResult {
-    this.#changed = true;
-    this.markChanged();
-    this.root.scope.getProgramParent().crawl();
+  // 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._onRollback(() => {
+          this.#changed = false;
+        });
+      }
+      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) {
+      if (this.editor.pending) {
+        throw error;
+      }
+      const reason = error instanceof Error ? error.message : String(error);
+      return this.failure(
+        'invalid-csf',
+        path,
+        this.anchor(),
+        `Edited ${path.join('.')}, but the result is not valid CSF: ${reason}`
+      );
+    }
     return { ok: true, changed: true };
   }
 }
 
 export const createCsfObject = (
   target: CsfObjectTarget,
-  root: ObjectRoot,
-  prefix: readonly string[],
+  host: CsfObjectHost,
   report: ReportDiagnostic,
   markChanged: MarkChanged
-): CsfObject => new CsfObjectEditor(target, root, prefix, report, markChanged);
+): CsfObjectEditor => new Editor(target, host, report, markChanged);
diff --git a/code/core/src/csf-tools/CsfObjectDiscovery.test.ts b/code/core/src/csf-tools/CsfObjectDiscovery.test.ts
index 963f61e791ba..a57ceca5c6d6 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', () => {
@@ -156,7 +150,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([
@@ -222,4 +216,366 @@ 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;
+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('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('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() {}
+[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;
+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.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' } };
+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']);
+    });
+
+    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('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;
+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 228a2d43c818..7a5394b0434d 100644
--- a/code/core/src/csf-tools/CsfObjectDiscovery.ts
+++ b/code/core/src/csf-tools/CsfObjectDiscovery.ts
@@ -1,21 +1,36 @@
-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 CsfMutationDiagnosticCode,
   type CsfObject,
+  type CsfObjectHost,
   type CsfObjectOptions,
   type CsfObjectTarget,
   createCsfObject,
 } from './CsfObject.ts';
+import { type MemberInsert, type ObjectRoot, detachedMember, literalRoot } from './ObjectRoot.ts';
 import {
-  csfFactoryReceiver,
-  isCsfFactoryCall,
-  metaObjectPath,
-  pathForNode,
+  type E,
+  type Node,
+  type Property,
+  isFunction,
+  isIdentifier,
+  isStringLiteral,
+  locationOf,
+  outerSpan,
+  staticKey,
   unwrapExpression,
-  withoutTypeCalls,
-} from './story-shape/index.ts';
+} from './estree/ast.ts';
+import {
+  insertStatementAfter,
+  printKey,
+  printMemberAccess,
+  printMembers,
+  removeStatements,
+} from './estree/editor.ts';
+import { placeableValueSource } from './estree/values.ts';
+import type { Binding } from './estree/scope.ts';
 
 type ReportDiagnostic = (diagnostic: CsfMutationDiagnostic) => void;
 type MarkChanged = () => void;
@@ -23,192 +38,160 @@ 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;
-  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;
+  left: E.MemberExpression;
+  property: Property;
 };
 
+type Rejection = { code: CsfMutationDiagnosticCode; node: Node; path: string[]; message: string };
+
+const loc = (csf: CsfFile, node: Node) => ({ loc: locationOf(csf._code, node.start, node.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 +203,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 +249,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' }, root: literalRoot(csf.editor, csf._metaNode) }];
   }
   if (csf._metaIsFactory && csf._metaFactoryCall) {
     report({
@@ -284,193 +261,329 @@ 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 [];
 };
 
+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, left: parent, property });
+  }
+  assignments.sort((a, b) => a.statement.start - b.statement.start);
+  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.
+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
+  )!;
+  // `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}${printMemberAccess(key, editor.quote)} = ${value}${end}`
+      );
+    }
+  };
+  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.property.value);
+      editor.edits.overwrite(start, end, text);
+    },
+    rename: (member, key) => {
+      const assignment = byProperty.get(member);
+      if (!assignment) {
+        literal!.rename(member, key);
+        return;
+      }
+      const { left } = assignment;
+      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) => {
+      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,
+    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,
+  };
+};
+
+// 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[],
-  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), root: literalRoot(csf.editor, 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)] : [];
+    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 (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);
+    }
+    if (!object && !isAnnotatable(node)) {
+      const name = annotationName(assignments[0].left)!;
+      return reject({
+        code: 'unsupported-initializer',
+        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 [{ target: storyTarget(binding), root: storyRoot(csf, binding, object, assignments) }];
   });
 
-const annotationCandidates = (
+const discover = (
   csf: CsfFile,
-  statement: NodePath<t.Statement>,
-  bindings: Map<string, StoryBinding>
-): AnnotationCandidate[] => {
-  if (!statement.isExpressionStatement()) {
-    return [];
-  }
-  const expression = statement.get('expression');
-  if (!expression.isAssignmentExpression()) {
-    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()) {
-    return [];
-  }
-  const propertyName =
-    !left.node.computed && property.isIdentifier()
-      ? property.node.name
-      : left.node.computed && property.isStringLiteral()
-        ? property.node.value
-        : undefined;
-  const binding = bindings.get(object.node.name);
-  if (!propertyName && left.node.computed && binding) {
-    return [
-      {
-        target: {
-          kind: 'story-annotation',
-          exportName: binding.exportName,
-          localName: binding.localName,
-          annotation: 'parameters',
-        },
-        annotation: 'parameters',
-        node: property.node,
-        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);
-  return [
-    {
-      target: {
-        kind: 'story-annotation',
-        exportName: binding.exportName,
-        localName: binding.localName,
-        annotation,
-      },
-      annotation,
-      root:
-        expression.node.operator === '=' && t.isObjectExpression(rootNode)
-          ? pathForNode(csf._file.path, rootNode)
-          : undefined,
-      node: right.node,
-      ...(expression.node.operator === '='
-        ? {}
-        : {
-            message: `Cannot mutate ${binding.localName}.${annotation} because it uses ${expression.node.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 [];
-  }
+  options: CsfObjectOptions,
+  report: ReportDiagnostic
+): Discovered[] => {
+  csf._assertIndexed();
+  const includeStories = options.stories ?? true;
+  const bindings = includeStories ? storyBindings(csf, report) : [];
   return [
-    createCsfObject(candidate.target, candidate.root, [candidate.annotation], report, markChanged),
+    ...((options.meta ?? true) ? discoverMeta(csf, report) : []),
+    ...(includeStories ? discoverStories(csf, bindings, report) : []),
   ];
 };
 
-const discoverAnnotations = (
-  csf: CsfFile,
-  storyBindings: StoryBinding[],
-  report: ReportDiagnostic,
-  markChanged: MarkChanged
-): CsfObject[] => {
-  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)) {
-      const identity = `${candidate.target.localName}:${candidate.annotation}`;
-      candidates.set(identity, [...(candidates.get(identity) ?? []), candidate]);
-    }
-  }
-  return [...candidates.values()].flatMap((matches) =>
-    reportOrCreateAnnotation(matches, report, markChanged)
-  );
-};
+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[] => {
-  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) : []),
-  ];
-};
+): readonly CsfObject[] =>
+  discover(csf, options, report).map(({ target }) => {
+    const host: CsfObjectHost = {
+      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))
+          ?.root,
+    };
+    return createCsfObject(target, host, report, markChanged);
+  });
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');
diff --git a/code/core/src/csf-tools/ObjectMembers.ts b/code/core/src/csf-tools/ObjectMembers.ts
new file mode 100644
index 000000000000..fd849509f664
--- /dev/null
+++ b/code/core/src/csf-tools/ObjectMembers.ts
@@ -0,0 +1,217 @@
+// 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,
+  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 }
+  | { 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] };
+};
+
+// 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 =>
+  node.type === 'Identifier' ||
+  (node.type === 'MemberExpression' &&
+    !node.computed &&
+    !node.optional &&
+    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);
+    }
+  });
+
+// 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[],
+  key: string
+):
+  | { ok: true; spread: CarriedSpread | undefined }
+  | { ok: false; code: CsfMutationDiagnosticCode; node: Node } => {
+  // 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) {
+        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' && 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);
+    const candidate = {
+      spread: {
+        source: reference === member.argument ? source : `(${source})`,
+        object: known?.kind === 'value' && known.object,
+      },
+      node: member,
+    };
+    candidates = known?.kind === 'value' ? [candidate] : [...candidates, candidate];
+  }
+  if (candidates.length > 1) {
+    return { ok: false, code: 'spread-field', node: candidates.at(-1)!.node };
+  }
+  return { ok: true, spread: candidates[0]?.spread };
+};
+
+// 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 = (
+  spread: CarriedSpread | undefined,
+  keys: readonly string[],
+  quote: string,
+  into: 'object' | 'array'
+) => {
+  if (!spread) {
+    return undefined;
+  }
+  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/ObjectRoot.ts b/code/core/src/csf-tools/ObjectRoot.ts
new file mode 100644
index 000000000000..30207842126f
--- /dev/null
+++ b/code/core/src/csf-tools/ObjectRoot.ts
@@ -0,0 +1,88 @@
+// 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;
+  // 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
+// `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)),
+  }),
+});
diff --git a/code/core/src/csf-tools/README.md b/code/core/src/csf-tools/README.md
index 7e629cb2e939..251ed32b83d2 100644
--- a/code/core/src/csf-tools/README.md
+++ b/code/core/src/csf-tools/README.md
@@ -2,32 +2,73 @@
 
 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.
 
+`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
 
-`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.
+
+`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:
 
-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.
+```ts
+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
+}
+```
+
+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.
-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.
-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 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 } }`. 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.
 
 `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.
+
+```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)})`));
+    });
+  }
+}
+```
+
+`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.
@@ -44,7 +85,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.
+
+`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.
 
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..bfff1c6b878e
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/README.md
@@ -0,0 +1,28 @@
+# CSF corpus
+
+Frozen story files and two sets of golden outputs, which `corpus.test.ts` compares with `toEqual`,
+so `vitest -u` cannot re-baseline them.
+
+- `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 index <babel-checkout>/code
+node code/core/src/csf-tools/__corpus__/record.mjs transforms
+```
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..eed2f3d8aa3b
--- /dev/null
+++ b/code/core/src/csf-tools/__corpus__/record.mjs
@@ -0,0 +1,85 @@
+// Records golden outputs for the corpus from a Storybook checkout with `core` compiled.
+//
+//   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]
+//
+// `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 [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 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 summarizeIndex = (file, code) => {
+  const traverse = require('@babel/traverse').default;
+  let csf;
+  try {
+    csf = csfTools
+      .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 recorded = {};
+for (const file of readdirSync(inputs).sort()) {
+  const code = readFileSync(join(inputs, file), 'utf8');
+  recorded[file] =
+    mode === 'index'
+      ? summarizeIndex(file, code)
+      : await summarizeTransforms({ csfTools, format }, inputs, file, code);
+}
+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..3d90b81e3176
--- /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 { 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",
+    "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 { 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/corpus.test.ts b/code/core/src/csf-tools/corpus.test.ts
new file mode 100644
index 000000000000..c95ada262384
--- /dev/null
+++ b/code/core/src/csf-tools/corpus.test.ts
@@ -0,0 +1,101 @@
+import { readdirSync, readFileSync } from 'node:fs';
+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.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');
+
+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());
+    expect(files).toEqual(Object.keys(transforms).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.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');
+    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/src/csf-tools/enrichCsf.test.ts b/code/core/src/csf-tools/enrichCsf.test.ts
index 155b50060f8f..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,
 });
 
@@ -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,10 +755,29 @@ 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', () => {
+  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`
@@ -1036,7 +790,7 @@ describe('extractSource', () => {
       source(dedent`
         export const Basic =  (args) => <Button {...args} />;
       `)
-    ).toMatchInlineSnapshot(`args => <Button {...args} />`);
+    ).toMatchInlineSnapshot(`(args) => <Button {...args} />`);
   });
   it('csf3', () => {
     expect(
@@ -1047,9 +801,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..7df1d7147746 100644
--- a/code/core/src/csf-tools/enrichCsf.ts
+++ b/code/core/src/csf-tools/enrichCsf.ts
@@ -1,7 +1,14 @@
-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, staticKey } from './estree/ast.ts';
+import {
+  type SourceEditor,
+  appendMembers,
+  appendStatement,
+  prependMembers,
+  triviaBefore,
+} from './estree/editor.ts';
 
 export interface EnrichCsfOptions {
   disableSource?: boolean;
@@ -16,126 +23,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])
-      )
-    );
-    const addParameter = t.expressionStatement(
-      t.assignmentExpression('=', originalParameters, t.objectExpression(parameters))
+    appendStatement(
+      csf.editor,
+      `${originalParameters} = { ...${originalParameters}, docs: { ...${optionalDocs}, ${extraDocsParameters.join(', ')} } };`
     );
-    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' && staticKey(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' && staticKey(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 +118,21 @@ 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;
+  return src ? code.slice(src.start, src.end) : '';
 };
 
-export const extractDescription = (node?: t.Node) => {
-  if (!node?.leadingComments) {
-    return '';
-  }
-  const comments = node.leadingComments
+const leadingComments = (node: Node | undefined, editor: SourceEditor) => {
+  const start = (node as { start?: number } | undefined)?.start;
+  return start === undefined ? [] : triviaBefore(editor, start).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/estree/ast.test.ts b/code/core/src/csf-tools/estree/ast.test.ts
new file mode 100644
index 000000000000..0d15321503f2
--- /dev/null
+++ b/code/core/src/csf-tools/estree/ast.test.ts
@@ -0,0 +1,206 @@
+import { inspect } from 'node:util';
+
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { parseSync } from 'oxc-parser';
+
+import {
+  type E,
+  codeFrame,
+  moduleOf,
+  parseExpression,
+  outerSpan,
+  parseModule,
+  parsePrintable,
+  rawTransferAvailable,
+  textOf,
+  walk,
+  withRawTransfer,
+} from './ast.ts';
+
+vi.mock('oxc-parser', { spy: true });
+
+// 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 } = {};';
+
+  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'
+    );
+  });
+
+  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');
+  });
+
+  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.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('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.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 } = withRawTransfer(rawTransfer, () => parseModule(code));
+      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 = 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(() =>
+      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', () => {
+  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}`);
+  });
+
+  it('normalizes a CRLF fragment to LF', () => {
+    expect(textOf(parseExpression('{\r\n  a: 1,\r\n}'))).toBe('{\n  a: 1,\n}');
+  });
+});
+
+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    |           ^'
+    );
+  });
+});
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..006b06207000
--- /dev/null
+++ b/code/core/src/csf-tools/estree/ast.ts
@@ -0,0 +1,593 @@
+import type * as E from 'oxc-parser';
+import { parseSync, rawTransferSupported, 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;
+  }
+}
+
+type Lang = 'js' | 'jsx' | 'ts' | 'tsx';
+
+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';
+  }
+  // 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;
+
+// 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. 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: 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.154.
+type ParseOptions = E.ParserOptions & { experimentalRawTransfer: boolean };
+
+/**
+ * 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 {
+    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;
+  }
+};
+
+const parseWith = (code: string, fileName: string | undefined, lang: Lang): ParseAttempt => {
+  const rawTransfer = rawTransferEnabled;
+  const name = fileName ?? `file.${lang}`;
+  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,
+    experimentalRawTransfer: rawTransfer,
+  };
+  let result: E.ParseResult;
+  try {
+    result = parseSync(name, code, options);
+  } catch (error) {
+    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, 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 };
+    result = parseSync(name, code, json);
+  }
+  const [error] = result.errors.filter((diagnostic) => diagnostic.severity === 'Error');
+  if (error) {
+    const offset = labelStart(error) ?? 0;
+    return {
+      error: new EstreeParseError(
+        error.message,
+        fileName,
+        error.labels?.[0] ? locationOf(code, offset, offset) : undefined
+      ),
+      offset,
+    };
+  }
+  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');
+
+/**
+ * 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');
+  const normalized = normalizeLineEndings(code);
+  return lineBreak > 0 && original[lineBreak - 1] === '\r'
+    ? normalized.replaceAll('\n', '\r\n')
+    : normalized;
+};
+
+/**
+ * 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 => {
+  const module = parseWithParentheses(code, fileName);
+  normalize(module.program, undefined);
+  return module;
+};
+
+// `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;
+};
+
+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) {
+    return attempt.module;
+  }
+  throw hasFlowPragma(code)
+    ? new EstreeParseError(
+        `Flow syntax is no longer supported, parse failed with: ${attempt.error.message}`,
+        fileName,
+        undefined
+      )
+    : attempt.error;
+};
+
+// 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 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');
+  return 'module' in ts || ts.offset > tsx.offset ? ts : tsx;
+};
+
+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),
+});
+
+/** `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';
+
+// 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: { 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({ key, node: item });
+        }
+      }
+    } else if (isNode(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,
+  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',
+]);
+
+/** 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 && isTSWrapper(current)) {
+    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` 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;
+  }
+  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;
+};
+
+export const objectProperty = (object: E.ObjectExpression, name: string): Property | undefined =>
+  object.properties.find(
+    (member): member is Property => member.type === 'Property' && staticKey(member) === name
+  );
+
+export type Span = { start: number; end: number };
+
+export const sourceOf = (code: string, node: Span) => code.slice(node.start, node.end);
+
+// 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.
+interface Tags {
+  module: ParsedModule;
+  outerSpan: Span;
+  fragment: { text: string; placeable: string };
+}
+
+// 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. 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 as Partial<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 => 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.set(value, 'module', module);
+  return value;
+};
+
+/** The span of a node with the parentheses written around it. */
+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';
+
+// 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;
+  }
+  Tag.set(inner, 'outerSpan', { start: node.start, end: node.end });
+  return inner;
+};
+
+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 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, module: ParsedModule | undefined) => {
+  const stack = [root];
+  let size = 1;
+  while (size > 0) {
+    const node = stack[--size];
+    if (module !== undefined) {
+      Tag.set(node, 'module', module);
+    }
+    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;
+      }
+    }
+  }
+};
+
+const codeOf = (node: Node) => {
+  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\``
+    );
+  }
+  return code;
+};
+
+/**
+ * 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 =>
+  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 = Tag.get(node, 'fragment');
+  if (fragment) {
+    return fragment.placeable;
+  }
+  const code = codeOf(node);
+  if (node.type !== 'SequenceExpression') {
+    return sourceOf(code, node);
+  }
+  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);
+
+/**
+ * Parse source into a detached expression, such as for `CsfObject#set` and `transform`. `textOf`
+ * gives its source back.
+ *
+ * @example
+ * ```ts
+ * object.transform(['args', 'count'], (value) => parseExpression(`${placeableTextOf(value)} + 1`));
+ * ```
+ */
+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)`;
+  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, module);
+  const expression = (statement as E.ExpressionStatement).expression;
+  // The wrapper's parentheses are not part of the fragment.
+  Tag.set(expression, 'outerSpan', undefined);
+  const comment = comments.at(-1);
+  const ended = comment?.type === 'Line' && comment.end === code.length + 1 ? `${code}\n` : code;
+  Tag.set(expression, 'fragment', {
+    text: code,
+    placeable: expression.type === 'SequenceExpression' && !parenthesized ? `(${ended})` : ended,
+  });
+  return 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.test.ts b/code/core/src/csf-tools/estree/editor.test.ts
new file mode 100644
index 000000000000..47dbdfcd6a86
--- /dev/null
+++ b/code/core/src/csf-tools/estree/editor.test.ts
@@ -0,0 +1,1699 @@
+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 { 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 {
+  SourceEditor,
+  appendStatement,
+  appendToList,
+  argumentList,
+  arrayList,
+  declaratorList,
+  insertAfterImports,
+  insertStatementAfter,
+  objectList,
+  prependStatement,
+  prependToList,
+  printMembers,
+  reindent,
+  removeFromList,
+  removeMembers,
+  removeStatement,
+  removeStatements,
+  replaceValue,
+  setImportSpecifiers,
+  wrapExpression,
+} 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('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  }'
+    );
+    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('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  }`');
+  });
+
+  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('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('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('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;
+    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 = {};');
+    csf.editor.commit();
+    expect(Object.keys(csf._stories)).toEqual(['A', 'B']);
+  });
+});
+
+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("'");
+    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('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');
+    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('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('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;
+    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 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', () => {
+    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;
+    removeFromList(editor, declaratorList(editor, declaration), [declaration.declarations[0]]);
+    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('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('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)] };`);
+    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', () => {
+    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'] };`);
+  });
+
+  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', () => {
+  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'] };`);
+
+    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'] };`);
+  });
+});
+
+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] };`
+    );
+  });
+
+  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([
+    [
+      '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) => {
+      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${eol}4,${eol}];`);
+    }
+  );
+});
+
+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;
+    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('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');
+    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('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 {\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 {\n  a: 1,\n  b: x, // c\n  d: 2\n};`);
+  });
+});
+
+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';
+
+      /** 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`);
+  });
+
+  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;`);
+  });
+
+  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]);
+    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"
+    );
+    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('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', () => {
+    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', () => {
+  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 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 c from 'c';\nimport a from 'a';\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';\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`);
+  });
+
+  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';`);
+    expect(editor.toString()).toBe(`\uFEFFimport a from 'a';\n`);
+  });
+});
+
+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');
+    }
+  );
+
+  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', () => {
+  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 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();`);
+  });
+});
+
+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;`);
+  });
+
+  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('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('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('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.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('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));
+    appendStatement(editor, `const c = 3;`);
+    expect(editor.toString()).toBe(`const c = 3;\n`);
+  });
+});
+
+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 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'] });
+    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('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('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 });
+    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 });
+    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() {} };`);
+  });
+
+  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', () => {
+  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 = {};`
+    );
+  });
+
+  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,
+      makeTitle: (title) => title ?? 'title',
+    }).parse();
+    expect(printCsf(csf).code).toBe(
+      `const _meta = { title: 'X' };\nexport default _meta;\nexport const A = {};`
+    );
+  });
+});
+
+describe('line endings', () => {
+  const edited = (eol: string) => {
+    const csf = parse(['export default {', '  title: "A",', '};', ''].join(eol));
+    const [meta] = csf.objects({ stories: false });
+    meta.set(['parameters', 'layout'], 'centered');
+    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');
+  });
+
+  it.each([
+    ['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;');
+    expect(editor.toString()).toBe(expected);
+  });
+});
+
+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 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(['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(['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 });
+    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('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(
+      '{\n  fn: () => {\n    return `a\nb`;\n  },\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`.
+  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('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('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);
+    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
new file mode 100644
index 000000000000..d909094d9fda
--- /dev/null
+++ b/code/core/src/csf-tools/estree/editor.ts
@@ -0,0 +1,1706 @@
+import remapping, { type SourceMapInput } from '@jridgewell/remapping';
+import MagicString, { SourceMap } from 'magic-string';
+
+import {
+  type E,
+  type Node,
+  type ParsedModule,
+  type Property,
+  type Span,
+  isNode,
+  isStringLiteral,
+  isValidIdentifier,
+  derivedFrom,
+  moduleOf,
+  normalizeLineEndings,
+  outerSpan,
+  parseModule,
+  parsePrintable,
+  placeableTextOf,
+  restoreLineEndings,
+  sourceOf,
+  walk,
+} 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`.
+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 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;
+  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. */
+  slice(start: number, end: number): string;
+  hasChanged(): boolean;
+  generateMap(options?: {
+    hires?: boolean | 'boundary';
+    includeContent?: boolean;
+    source?: string;
+    file?: string;
+  }): GeneratedMap;
+  toString(): string;
+}
+
+/** 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 as written;
+ * `commit()` applies them, parses the result again and calls `onCommit`, so whoever derived state
+ * 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 {
+  // 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.
+  _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.
+  _committed: SourceEdits[] = [];
+
+  // The code the editor was created with, line endings included: the content its maps name.
+  readonly _originalCode: string;
+
+  readonly fileName: string | undefined;
+
+  readonly _onCommit: (() => void) | undefined;
+
+  _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;
+
+  // Marks a mutation as refused, so the transaction it runs in rolls back.
+  _refuse() {
+    if (this._transaction) {
+      this._transaction.refused = true;
+    }
+  }
+
+  // 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.
+  _appendedWithoutBlankLine: (Node | string)[] = [];
+
+  constructor(code: string, fileName?: string, onCommit?: () => void) {
+    this.fileName = fileName;
+    this._onCommit = onCommit;
+    this._originalCode = code;
+    this._module = parsePrintable(code, fileName);
+    this._batch = newBatch(this.code, 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. */
+  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);
+      });
+      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._batch.edits;
+  }
+
+  get pending() {
+    return this.edits.hasChanged();
+  }
+
+  source(node: Span) {
+    this.assertCurrent(node);
+    return sourceOf(this.code, node);
+  }
+
+  /**
+   * 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 === 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`
+      );
+    }
+  }
+
+  /**
+   * 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;
+    }
+    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;
+    this._batch = newBatch(this.code, this.fileName);
+    this._onCommit?.();
+    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, 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;
+    const committed = this._committed.length;
+    const batch = copyBatch(this._batch);
+    const appended = [...this._appendedWithoutBlankLine];
+    const transaction = { refused: false, rollbacks: onRollback ? [onRollback] : [] };
+    this._transaction = transaction;
+    let kept = false;
+    try {
+      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'
+        );
+      }
+      kept = result !== false && !transaction.refused;
+    } finally {
+      this._transaction = outer;
+      if (kept) {
+        outer?.rollbacks.push(...transaction.rollbacks);
+      } else {
+        transaction.rollbacks.reverse().forEach((rollback) => rollback());
+        this._batch = batch;
+        this._appendedWithoutBlankLine = appended;
+        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.
+          }
+        }
+      }
+    }
+    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
+   * 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 ?? '';
+    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;
+    if (chain.length === 1 && !input) {
+      current.sources = [source];
+      current.sourcesContent = [this._originalCode];
+      return current;
+    }
+    const maps = chain.map((map) => map as unknown as SourceMapInput);
+    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 as string[],
+      // Unknown content stays `null`, so devtools load the file instead of showing it empty.
+      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,
+    }) as GeneratedMap;
+    if (input?.sourceRoot) {
+      map.sourceRoot = input.sourceRoot;
+    }
+    return map;
+  }
+
+  toString() {
+    return restoreLineEndings(this.edits.toString(), this._originalCode);
+  }
+
+  /** Quote for generated strings: the one most string literals of the file use. */
+  get quote() {
+    this._style ??= inferStyle(this._module);
+    return this._style.quote;
+  }
+
+  /** 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;
+  }
+
+  /** 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;
+  }
+}
+
+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) => {
+  switch (node.type) {
+    case 'ImportDeclaration':
+    case 'ExportAllDeclaration':
+    case 'ExpressionStatement':
+    case 'ReturnStatement':
+    case 'ThrowStatement':
+    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 === '"') {
+        counts[quote]++;
+        first ??= quote;
+      }
+    }
+    indent ??= blockIndent(code, node);
+  });
+  const quote =
+    counts["'"] === counts['"'] ? (first ?? '"') : counts["'"] > counts['"'] ? "'" : '"';
+  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.
+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);
+
+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 === '"'
+    ? json
+    : `'${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) =>
+  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';
+  }
+  if (value === null) {
+    return 'null';
+  }
+  if (typeof value === 'function') {
+    return value.toString();
+  }
+  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 (isNode(value) && moduleOf(value)) {
+    return detachedTextOf(value);
+  }
+  if (value instanceof RegExp) {
+    return value.toString();
+  }
+  if (Array.isArray(value)) {
+    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, layout)}`
+    );
+    if (layout && (layout.expand === 'objects' || spansLines(members))) {
+      return printMembers(members, layout.indent);
+    }
+    return members.length === 0 ? '{}' : `{ ${members.join(', ')} }`;
+  }
+  throw new Error(`Cannot print value of type ${typeof value}`);
+};
+
+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 (position < index) {
+      low = middle + 1;
+    } else {
+      high = middle - 1;
+    }
+  }
+  return undefined;
+};
+
+const SPACE = /\s/;
+const SPACE_ON_LINE = /[^\S\n]/;
+
+// 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) {
+      comments.push(comment);
+      end = comment.end;
+    } else if (space.test(code[end])) {
+      end++;
+    } else {
+      break;
+    }
+  }
+  return { comments, end };
+};
+
+// 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) {
+      comments.unshift(comment);
+      start = comment.start;
+    } else if (SPACE.test(code[start - 1])) {
+      start--;
+    } else {
+      break;
+    }
+  }
+  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, 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;
+}
+
+// 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,
+  declaration: E.ImportDeclaration | E.ExportNamedDeclaration
+): List => {
+  editor.assertCurrent(declaration);
+  const { code } = editor;
+  const items = declaration.specifiers.filter(
+    (specifier) => specifier.type === 'ImportSpecifier' || specifier.type === 'ExportSpecifier'
+  );
+  const afterLast = nextTokenStart(editor, items.at(-1)!.end);
+  return listOf(editor, {
+    open: previousTokenEnd(editor, items[0].start),
+    close: code[afterLast] === ',' ? nextTokenStart(editor, afterLast + 1) : afterLast,
+    items,
+    padding: ' ',
+  });
+};
+
+export const objectList = (
+  editor: SourceEditor,
+  object: E.ObjectExpression | E.ObjectPattern
+): List => {
+  editor.assertCurrent(object);
+  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.
+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;
+  const items = array.elements.map((element): Span => {
+    let item: Span;
+    if (element) {
+      item = outerSpan(element);
+    } else {
+      const comma = nextTokenStart(editor, cursor);
+      item = { start: comma, end: comma };
+    }
+    cursor = separatorAfter(editor, item) ?? item.end;
+    return item;
+  });
+  return listOf(editor, { 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);
+  }
+  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 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.
+const separatorAfter = (editor: SourceEditor, item: Span) => {
+  const next = nextTokenStart(editor, item.end);
+  return editor.code[next] === ',' ? next + 1 : undefined;
+};
+
+/** Leading whitespace of the line that `index` is on. */
+export const lineIndent = (code: string, index: number) =>
+  /^[ \t]*/.exec(code.slice(lineStart(code, index)))![0];
+
+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
+// 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;
+    if (end <= range.start || start >= range.end) {
+      return false;
+    }
+    if (
+      node.type === 'TemplateElement' ||
+      (node.type === 'Literal' && (typeof node.value === 'string' || 'regex' in node))
+    ) {
+      spans.push({ start: start - range.start, end: end - range.start });
+    }
+  });
+  return spans;
+};
+
+// 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;
+
+// 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) {
+    try {
+      return { ...parseModule(`${before}${text}${after}`), offset: before.length };
+    } catch {
+      continue;
+    }
+  }
+  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 })
+  );
+};
+
+const lineBreakAt = (code: string, index: number) => index === code.length || code[index] === '\n';
+
+// `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 { body, at: undefined };
+  }
+  const fragment = parsedFragment(body);
+  if (!fragment) {
+    return { body: text, at: undefined };
+  }
+  const comment = fragment.comments.findLast(
+    (candidate) => candidate.type === 'Line' && candidate.end === fragment.offset + body.length
+  );
+  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}`;
+  }
+  return `${body.slice(0, at).trimEnd()}${comma} ${body.slice(at)}${lineBreakFollows ? '' : '\n'}`;
+};
+
+const reindentLines = (text: string, from: string, to: string, literals: readonly Span[]) => {
+  let result = '';
+  let cursor = 0;
+  for (
+    let lineBreak = text.indexOf('\n');
+    lineBreak !== -1;
+    lineBreak = text.indexOf('\n', cursor)
+  ) {
+    result += text.slice(cursor, lineBreak + 1);
+    cursor = lineBreak + 1;
+    const inLiteral = literals.some((span) => span.start < lineBreak && lineBreak < span.end);
+    if (!inLiteral && text.startsWith(from, cursor)) {
+      result += to;
+      cursor += from.length;
+    }
+  }
+  return result + text.slice(cursor);
+};
+
+/**
+ * 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 = (source: string, from: string, to: string) => {
+  const text = normalizeLineEndings(source);
+  if (from === to || !text.includes('\n')) {
+    return text;
+  }
+  const literals = parsedLiteralSpans(text);
+  return literals ? reindentLines(text, from, to, literals) : text;
+};
+
+// 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 indent === '' || !text.includes('\n')
+    ? text
+    : 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` 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), '');
+
+// 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 comments that trail them.
+const itemEnd = (editor: SourceEditor, list: List, index: number) => {
+  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 comments trailing that.
+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`. 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 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` : '';
+  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()}`;
+};
+
+/**
+ * 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) => {
+  editor.assertCurrent(list);
+  editor.assertCurrent(item);
+  return itemTextWith(editor, list, list.items.indexOf(item), () => detachedSource(editor, item));
+};
+
+export const memberText = (
+  editor: SourceEditor,
+  object: E.ObjectExpression,
+  member: E.ObjectPropertyKind
+) => itemText(editor, objectList(editor, object), member);
+
+// 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);
+  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;
+};
+
+// 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. 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;
+  separator: string;
+}
+
+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[],
+  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 withSeparator = (
+  layout: Omit<Appended, 'separator'>,
+  written: string,
+  lastItem: string
+): Appended => ({
+  ...layout,
+  separator:
+    layout.trailingComma === ','
+      ? ''
+      : endsInLineComment(lastItem)
+        ? `${written.endsWith('\n') ? '' : '\n'}${layout.indent ?? ''},`
+        : ',',
+});
+
+// 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;
+  const write = (layout: Omit<Appended, 'separator'>, text: string) => {
+    insert(edits, layout, text);
+    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) => {
+    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);
+    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, lined
+      // up with the last comment when that starts a line.
+      const outer = lineIndent(code, list.open - 1);
+      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);
+      }
+      close(`\n${outer}`);
+      const layout = { at: end, right: false, indent, trailingComma: ',', lineBreakFollows: true };
+      return write(layout, itemLines(texts, indent, ',', true));
+    }
+    const oneLine = { right: false, indent: undefined, trailingComma: '', lineBreakFollows: false };
+    if (end > list.open) {
+      if (end === list.close) {
+        close(padding);
+      }
+      return write({ ...oneLine, at: end }, ` ${texts.join(', ')}`);
+    }
+    if (list.close > list.open) {
+      edits.remove(list.open, list.close);
+    }
+    close(padding);
+    return write({ ...oneLine, at: list.open }, `${padding}${texts.join(', ')}`);
+  }
+  const last = items.at(-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) ? '' : ',';
+  // 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 = breaks || lineBreakAt(code, at);
+    return write(
+      { at, right: true, indent, trailingComma, lineBreakFollows },
+      itemLines(texts, indent, trailingComma, lineBreakFollows)
+    );
+  }
+  const at = comma ?? last.end;
+  const lineBreakFollows = lineBreakAt(code, at);
+  const text = inline(editor, list, texts, trailingComma, lineBreakFollows);
+  return write(
+    { at, right: true, indent: undefined, trailingComma, lineBreakFollows },
+    comma === undefined ? `, ${text}` : ` ${text}`
+  );
+};
+
+const appendAfter = (editor: SourceEditor, list: List, previous: Appended, texts: string[]) => {
+  const { indent, trailingComma, lineBreakFollows, separator } = previous;
+  const text =
+    indent === undefined
+      ? ` ${inline(editor, list, texts, trailingComma, lineBreakFollows)}`
+      : itemLines(texts, indent, trailingComma, lineBreakFollows);
+  insert(editor.edits, previous, `${separator}${text}`);
+  return withSeparator(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);
+  const { lists } = editor._batch;
+  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[]) => {
+  editor.assertCurrent(list);
+  const { code, edits } = editor;
+  const [first] = list.items;
+  if (!first) {
+    appendToList(editor, list, texts);
+    return;
+  }
+  if (isMultiline(code, list)) {
+    // 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.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.appendLeft(first.start, items.endsWith('\n') ? items : `${items} `);
+};
+
+/** 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;
+  // 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);
+    }
+    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 (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. Only the comma: the comments around it stay with the kept item.
+      const previous = items[first - 1];
+      if (!isHole(previous)) {
+        const comma = separatorAfter(editor, previous)!;
+        edits.remove(comma - 1, comma);
+      }
+    }
+    const start = itemStart(editor, list, first);
+    const end = itemEnd(editor, list, last);
+    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 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 {
+      edits.remove(start, end);
+    }
+    first = last;
+  }
+};
+
+export const appendMembers = (editor: SourceEditor, object: E.ObjectExpression, texts: string[]) =>
+  appendToList(editor, objectList(editor, object), texts);
+
+export const prependMembers = (editor: SourceEditor, object: E.ObjectExpression, texts: string[]) =>
+  prependToList(editor, objectList(editor, 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 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');
+  removeMembers(editor, object, members.slice(1));
+  const { start } = members[0];
+  const indent = /[ \t]*$/.exec(editor.code.slice(lineStart(editor.code, start), start))![0];
+  const inner = multiline
+    ? 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}` : ' ';
+  editor.edits.overwrite(
+    itemStart(editor, list, first),
+    members[0].end,
+    `${lead}${printKey(key, editor.quote)}: ${inner}`
+  );
+  const comma = separatorAfter(editor, members[0]) ?? members[0].end;
+  if (itemEnd(editor, list, first) > comma) {
+    editor.edits.remove(comma, itemEnd(editor, list, first));
+  }
+};
+
+export const removeMembers = (
+  editor: SourceEditor,
+  object: E.ObjectExpression,
+  members: readonly E.ObjectPropertyKind[]
+) => 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/;
+
+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 before the file's first statement that form the file header, such as a license. The
+ * 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;
+  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 && 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 &&
+    ((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--;
+  }
+  const directive = leading.findIndex(isDirective);
+  return (directive === -1 ? leading : leading.slice(0, directive)).filter(
+    (comment, index) => index < owned || FILE_PRAGMA.test(comment.value)
+  );
+};
+
+/**
+ * The end of a statement past the comments that follow it on its line, even when another statement
+ * 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) => {
+  editor.assertCurrent(statement);
+  const { comments } = commentsBeside(editor, statement.end);
+  const below = comments.findIndex(
+    (comment) =>
+      NEXT_LINE_DIRECTIVE.test(comment.value) ||
+      (isJSDoc(comment) && editor.source(comment).includes('\n'))
+  );
+  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 = /^[([`+\-/]/;
+
+// 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.
+ */
+export const insertStatementAfter = (editor: SourceEditor, statement: Span, text: string) => {
+  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);
+  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.
+  const lead = /^\s*/.exec(text)![0];
+  const body = text.slice(lead.length);
+  const separator = !endsStatement(before) && CONTINUES_STATEMENT.test(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}`;
+  // 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`);
+    batch.insertedAt.add(at);
+    return;
+  }
+  edits.appendLeft(end, written);
+  // The same line break for every statement inserted here.
+  if (next > end) {
+    edits.overwrite(end, next, '\n');
+  } else {
+    edits.appendRight(next, '\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
+// 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 as the first statement after the directives, above the comments it owns. A file
+ * header stays above it, as does everything in a file without statements.
+ */
+export const prependStatement = (editor: SourceEditor, text: string) => {
+  const { body } = editor.program;
+  const first = body[leadingDirectives(editor).length];
+  if (!first) {
+    appendStatement(editor, text);
+    return;
+  }
+  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.
+const isRemoved = (editor: SourceEditor, span: Span) => {
+  try {
+    return editor.edits.slice(span.start, span.end) === '';
+  } catch {
+    return true;
+  }
+};
+
+// `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]
+    .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;
+  }
+};
+
+/**
+ * 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
+ * it before.
+ */
+export const appendStatement = (editor: SourceEditor, text: string) => {
+  const last = editor.program.body.findLast((statement) => !isRemoved(editor, statement));
+  if (!last) {
+    // 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;
+  }
+  // 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 multiline = text.includes('\n') || before.includes('\n');
+  if (!multiline) {
+    editor._appendedWithoutBlankLine.push(text);
+  }
+  insertStatementAfter(editor, last, `${multiline ? '\n' : ''}${text}`);
+};
+
+// Where a statement, or a text appended as one, is in `module`, the code `edits` produced.
+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);
+};
+
+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: TopLevel) => {
+  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: TopLevel) => {
+  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,
+  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) => {
+  const { code } = editor;
+  const { start, end } = statementSpan(editor, statement);
+  const lineBreak = lineEnd(code, end);
+  let from = lineStart(code, start);
+  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
+  // file it takes the ones below instead.
+  let to = Math.min(lineBreak + 1, code.length);
+  if (atTop ?? from === 0) {
+    to += /^\s*/.exec(code.slice(to))![0].length;
+  } else {
+    while (from > 0 && !code.slice(lineStart(code, from - 1), from).trim()) {
+      from = lineStart(code, from - 1);
+    }
+  }
+  removeKeeping(editor, from, to);
+};
+
+/** 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) => {
+    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 and layout included. A named specifier is its source text, such as `a` or `a as b`.
+ */
+export const setImportSpecifiers = (
+  editor: SourceEditor,
+  declaration: E.ImportDeclaration,
+  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');
+  const head = [
+    ...(added.default ? [added.default] : []),
+    ...others.filter((specifier) => kept.includes(specifier)).map((s) => editor.source(s)),
+  ];
+  const kind = declaration.importKind === 'type' ? 'import type' : 'import';
+  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('')}`
+    );
+  }
+};
+
+// 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;
+  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) {
+    replacement = `${editor.source(member.key)}: ${indented}`;
+  } else if (replacesMember) {
+    replacement =
+      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
+  // 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 takesComma = comma !== undefined && endsInLineComment(replacement);
+  const to = takesComma ? comma : span.end;
+  editor.edits.overwrite(
+    span.start,
+    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. 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.prependRight(start, before);
+  editor.edits.appendLeft(end, after);
+};
+
+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 => {
+  editor.assertCurrent(member);
+  if (!member.computed) {
+    return member.key;
+  }
+  const key = outerSpan(member.key);
+  return {
+    start: previousTokenEnd(editor, key.start) - 1,
+    end: nextTokenStart(editor, 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);
+};
+
+// 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 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), () => {
+    if (member.shorthand) {
+      return `${key}: ${editor.source(member.value)}`;
+    }
+    const range = keyRange(editor, member);
+    return `${dedent(member.start, range.start)}${key}${dedent(range.end, member.end)}`;
+  });
+};
+
+// 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 = dedentSource(editor, range.end, member.end, lineIndent(editor.code, member.start));
+  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 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..e20ca5f85475
--- /dev/null
+++ b/code/core/src/csf-tools/estree/scope.test.ts
@@ -0,0 +1,185 @@
+import { visitorKeys } from 'oxc-parser';
+import { describe, expect, it } from 'vitest';
+
+import { type E, parseModule } from './ast.ts';
+import { TS_EXPRESSIONS, TS_TYPES, 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, 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++;',
+      { 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('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('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 },
+    });
+  });
+
+  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.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');
+    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..f79d17e723a4
--- /dev/null
+++ b/code/core/src/csf-tools/estree/scope.ts
@@ -0,0 +1,850 @@
+import {
+  TYPE_KEYS,
+  type E,
+  type Node,
+  childEntries,
+  children,
+  isIdentifier,
+  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 nodes that hold runtime code and are visited like any other expression or declaration.
+export const TS_EXPRESSIONS = new Set([
+  'TSModuleDeclaration',
+  'TSModuleBlock',
+  'TSAsExpression',
+  'TSSatisfiesExpression',
+  'TSNonNullExpression',
+  'TSTypeAssertion',
+  'TSInstantiationExpression',
+  'TSExportAssignment',
+  'TSParameterProperty',
+  '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.
+export 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',
+  'TSPropertySignature',
+  'TSQualifiedName',
+  'TSRestType',
+  'TSStringKeyword',
+  'TSSymbolKeyword',
+  'TSTemplateLiteralType',
+  'TSThisType',
+  'TSTupleType',
+  'TSTypeAliasDeclaration',
+  'TSTypeAnnotation',
+  'TSTypeLiteral',
+  'TSTypeOperator',
+  'TSTypeParameter',
+  'TSTypeParameterDeclaration',
+  'TSTypeParameterInstantiation',
+  'TSTypePredicate',
+  'TSTypeQuery',
+  'TSTypeReference',
+  'TSUndefinedKeyword',
+  'TSUnionType',
+  'TSUnknownKeyword',
+  '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,
+// 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);
+      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);
+        }
+      }
+      // The body declares into its own scope, so a parameter default cannot see a body binding.
+      if (fn.body?.type === 'BlockStatement') {
+        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);
+    } 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' || node.type === 'StaticBlock') {
+        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);
+      // 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) {
+      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 => {
+    assertKnown(node);
+    switch (node.type) {
+      case 'TSDeclareFunction':
+        reserveName(node.id);
+        break;
+      case 'TSTypeAnnotation':
+        assertKnownWithin(node);
+        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);
+      }
+    }
+  };
+
+  // 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 => {
+    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') {
+            const body = nodeScopes.get(node.body) ?? current;
+            for (const statement of node.body.body) {
+              visit(statement, body);
+            }
+          } 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') {
+          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 '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':
+        reserveName(node.id);
+        visit(node.body, current);
+        return;
+      case 'TSModuleDeclaration':
+        reserveName(node.id);
+        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 [span, scope] of nodeScopes) {
+        if (
+          span.start <= node.start &&
+          node.end <= span.end &&
+          span.end - span.start < best.node.end - best.node.start
+        ) {
+          best = scope;
+        }
+      }
+      return best;
+    },
+  };
+};
+
+/** 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;
+};
+
+// 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);
+  });
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..1697282903c9
--- /dev/null
+++ b/code/core/src/csf-tools/estree/values.ts
@@ -0,0 +1,260 @@
+import { visitorKeys } from 'oxc-parser';
+
+import {
+  type E,
+  type Node,
+  type Property,
+  isIdentifier,
+  isNode,
+  isNumericLiteral,
+  moduleOf,
+  staticKey,
+  unwrapExpression,
+} from './ast.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`
+// `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) || BABEL_ONLY_TYPES.has(value.type));
+
+// A member's value as `detachedSource`; methods become function expressions.
+export const valueSource = (editor: SourceEditor, member: Property) =>
+  member.method || member.kind !== 'init'
+    ? 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'
+    ? functionFromMethod(editor, member)
+    : detachedTextOf(member.value);
+
+/**
+ * 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
+  | 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');
+
+/** 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;
+};
+
+// `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;
+    }
+    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, reading);
+    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,
+        reading
+      );
+      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, reading);
+        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, reading);
+      if (item === UNRESOLVED) {
+        return UNRESOLVED;
+      }
+      entries.push([key, item]);
+    }
+    return Object.fromEntries(entries);
+  }
+  return UNRESOLVED;
+};
+
+// 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)) {
+    visited.add(value);
+    const binding = scopes.bindingOf(value);
+    if (!binding && value.name === 'undefined') {
+      return value;
+    }
+    if (
+      !binding?.constant ||
+      (access === 'write' &&
+        (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;
+};
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..693d073343ed 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,
@@ -11,7 +12,47 @@ export type {
 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 } from './estree/ast.ts';
+export {
+  isStringLiteral,
+  isTSWrapper,
+  normalizeLineEndings,
+  outerSpan,
+  parseExpression,
+  parseModule,
+  placeableTextOf,
+  restoreLineEndings,
+  staticKey,
+  textOf,
+  unwrapExpression,
+  walk,
+} from './estree/ast.ts';
+export { SourceEditor, type GeneratedMap, type SourceEdits } from './estree/editor.ts';
+export { generateUid, type Binding, type ScopeInfo } from './estree/scope.ts';
+export {
+  appendStatement,
+  appendToList,
+  argumentList,
+  arrayList,
+  declaratorList,
+  detachedTextOf,
+  insertAfterImports,
+  itemText,
+  lineIndent,
+  objectList,
+  prependStatement,
+  prependToList,
+  printMembers,
+  printString,
+  reindent,
+  removeFromList,
+  removeStatement,
+  removeStatements,
+  setImportSpecifiers,
+  specifierList,
+  statementSpan,
+  wrapExpression,
+} from './estree/editor.ts';
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..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,10 +1,9 @@
-import { types as t } from 'storybook/internal/babel';
-
+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' }
@@ -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,23 +37,24 @@ 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);
     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' };
 };
@@ -72,15 +72,12 @@ 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)) {
-        return { kind: 'unresolvable', source: sourceOf(original) };
+        return { kind: 'unresolvable', source: oneLineTextOf(original) };
       }
       return depth === 0 ? { kind: 'missing' } : { kind: 'masked' };
     }
@@ -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..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' })._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..717bcc730f73 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..f428de5249d8 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,
@@ -24,7 +28,7 @@ export {
   resolveBindingMembers,
   resolveObjectMembers,
   resolveReferencedValue,
-  sourceOf,
+  oneLineTextOf,
   type ReferenceContext,
   type ReferenceModule,
   type ResolvedMembers,
@@ -41,23 +45,20 @@ export {
 export {
   resolveEffectiveRender,
   resolveRenderFunction,
-  type RenderFunctionPath,
+  type RenderFunction,
   type RenderResolution,
 } from './render.ts';
 export {
   csfFactoryReceiver,
   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..8861114a1ff6 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..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
@@ -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..c58a48a4f4d4 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,17 @@
-import type { NodePath, types as t } from 'storybook/internal/babel';
-
+import { type E, type Node, codeFrame } 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: 'config'; node: E.ObjectExpression }
+  | { type: 'fn'; node: E.ArrowFunctionExpression | E.Function }
+  | { type: 'emptyConfig'; node: E.CallExpression };
+
+type StoryDeclarationExpression = E.Function | E.Expression;
 
-type StoryDeclarationExpression = NodePath<t.FunctionDeclaration | t.Expression>;
+/** An error pointing at the node a story file got wrong. */
+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.
@@ -18,39 +19,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 +63,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()) {
-    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()) {
+  if (!isCanonicalCsf2BindCall(storyNode)) {
     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..11b67c9e0a19 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,11 @@ 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);
+    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..6cea9e7a9b54 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..62eb26f7465f 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, type Node, staticKey } 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, 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' && staticKey(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..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
@@ -1,16 +1,23 @@
 import { describe, expect, it } from 'vitest';
 
-import { babelParseFile } from '../CsfFile.ts';
+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 {
   type ReferenceContext,
   resolveArgsRecord,
   resolveBindingMembers,
-  sourceOf,
+  oneLineTextOf,
 } 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,
 });
 
@@ -19,13 +26,28 @@ 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,
   };
 };
 
 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'",
@@ -111,6 +133,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] }',
@@ -119,9 +148,56 @@ 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)',
+      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..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
@@ -1,16 +1,26 @@
 // 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,
+  parseExpression,
+  parseFragment,
+  isValidIdentifier,
+  placeableTextOf,
+  staticKey,
+  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';
 import { type ReferenceContext, resolveArgsRecord } from './resolve-members.ts';
-import { 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 +35,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 +56,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 +70,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 +89,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') {
+    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 (!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 +124,175 @@ 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(parseExpression(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)
     )
   );
 };
 
 /** 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 = staticKey(property);
+      key = property.computed
+        ? `[${placeableTextOf(property.key)}]`
+        : name !== undefined && isValidIdentifier(name, false)
+          ? name
+          : textOf(property.key);
+      original = property.value;
+    } else {
+      if (property.value.type === 'Property') {
+        return undefined;
+      }
+      key = isValidIdentifier(property.key, false) ? 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}: ${detachedTextOf(value)}`);
   }
-  return t.objectExpression(rebuilt);
+  // One member per line, so formatters keep the object expanded.
+  const { indent } = ctx.editor;
+  return rebuilt(
+    members.length === 0
+      ? '{}'
+      : `{\n${members.map((member) => `${indent}${reindent(member, '', indent)}`).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(`({ ${textOf(node)} })`);
   }
+  return unboundNames(`(${textOf(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..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
@@ -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 { parseExpression, isStringLiteral } from '../estree/ast.ts';
+import { SourceEditor } from '../estree/editor.ts';
 import { isSelfContained } from './resolve-arg-value.ts';
 import {
   type ReferenceContext,
@@ -12,11 +11,15 @@ import {
   resolveArgsRecord,
   resolveBindingMembers,
   resolveReferencedValue,
-  sourceOf,
+  oneLineTextOf,
 } 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,
 });
 
@@ -41,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],
   };
@@ -601,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';
@@ -644,7 +660,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,12 +668,9 @@ 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 = parseExpression(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 6b60f05700ac..e42ea1189fbf 100644
--- a/code/core/src/csf-tools/story-shape/resolve-members.ts
+++ b/code/core/src/csf-tools/story-shape/resolve-members.ts
@@ -1,20 +1,27 @@
 // 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 { importedName, isTypeSpecifier } from './imports.ts';
 import {
-  csfFactoryReceiver,
-  isCanonicalCsf2BindCall,
-  isCsfFactoryCall,
-  keyOf,
+  type E,
+  type Node,
+  parseExpression,
+  isStringLiteral,
+  placeableTextOf,
+  staticKey,
+  textOf,
   unwrapExpression,
-} from './utils.ts';
+} from '../estree/ast.ts';
+import type { SourceEditor } from '../estree/editor.ts';
+import { importedName, isTypeSpecifier } from './imports.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. */
 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 +33,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 +50,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 +62,18 @@ 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 on one line, for naming an expression a static pass could not read. */
+export const oneLineTextOf = (node: Node): string => textOf(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 +81,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 +92,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: ${oneLineTextOf(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;
   }
@@ -109,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,
@@ -142,8 +157,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 +186,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 +196,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,10 +214,10 @@ 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));
+        shadowKnownMembers(oneLineTextOf(property));
         continue;
       }
       for (const [key, value] of Object.entries(spread.properties)) {
@@ -214,21 +229,21 @@ 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 (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];
       shadowed.delete(key);
-      unresolved.push(sourceOf(property));
+      unresolved.push(oneLineTextOf(property));
       continue;
     }
-    properties[key] = t.isObjectMethod(property) ? property : property.value;
+    properties[key] = property.method ? property : property.value;
     shadowed.delete(key);
   }
 
@@ -238,24 +253,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 +279,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 +291,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 +337,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 +408,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 +458,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 +472,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 +500,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 +520,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: [oneLineTextOf(unwrapped)],
+      },
     };
   }
 
@@ -569,22 +591,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 +616,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 +638,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 = 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;
+  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 +675,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,41 +697,44 @@ 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 !== '=') {
-      unresolved.push(sourceOf(assignment));
+      unresolved.push(oneLineTextOf(assignment));
       continue;
     }
     properties[outermost] = assignment.right;
@@ -713,18 +745,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 +767,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 +793,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 +809,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..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
@@ -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 {
@@ -13,13 +12,13 @@ import {
   resolveArgsRecord,
   resolveBindingMembers,
   resolveObjectMembers,
-  sourceOf,
+  oneLineTextOf,
 } from './resolve-members.ts';
 
 /** 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. */
@@ -47,16 +46,15 @@ export function createStoryArgsResolver(
   references?: StoryReferences
 ): StoryArgsResolver {
   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 +65,15 @@ export function createStoryArgsResolver(
       const storyMembers = resolveBindingMembers(ctx, localName) ?? {
         properties: {},
         shadowed: [],
-        unresolved: [sourceOf(csf._storyStatements[storyExport] ?? t.identifier(storyExport))],
+        unresolved: [
+          csf._storyStatements[storyExport]
+            ? oneLineTextOf(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..f2db5e86e606 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,42 @@
 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,
+  parseExpression,
+  staticKey,
+  textOf,
+  unwrapExpression,
+} 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 +47,15 @@ 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(parseExpression(initializer))])
+    ).toEqual([
+      ['Template.bind()', true],
+      ['Template.bind({})', true],
+      ["Template.bind({ role: 'button' })", false],
+      ["Template['bind']({})", false],
+      ['Template[bind]({})', false],
+      ['makeStory({})', false],
+    ]);
   });
 });
 
@@ -159,71 +75,33 @@ 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(parseExpression(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 = parseExpression('meta.type<A>().type<B>().story({})');
 
     expect(isCsfFactoryCall(call) && csfFactoryReceiver(call).name).toBe('meta');
   });
 });
 
-describe('keyOf', () => {
-  it('returns literal object member keys and skips dynamic keys', () => {
-    const meta = metaObjectPath(
+describe('staticKey', () => {
+  it('returns literal object member keys and skips spreads and dynamic keys', () => {
+    const meta = metaObject(
       parse(dedent`
         const computed = 'dynamic';
         const spread = {};
@@ -232,7 +110,7 @@ describe('keyOf', () => {
           label: 'Save',
           'aria-label': 'Close',
           [computed]: 'ignored',
-          1: 'ignored',
+          1: 'one',
           method() {},
           'method-label'() {},
           [computed]() {},
@@ -241,63 +119,49 @@ describe('keyOf', () => {
       `)
     );
 
-    const keys = meta?.node.properties.map((property) =>
-      t.isSpreadElement(property) ? 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,
     ]);
   });
 });
 
 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',
+    '{}!',
+    '({})',
+    '<Story>{}',
+    '(({} as Story)!) satisfies Story',
+  ])('unwraps %s', (code) => {
+    const wrapped = parseExpression(code);
+    expect(unwrapExpression(wrapped).type).toBe('ObjectExpression');
   });
 
   it('returns other nodes untouched', () => {
-    const value = t.stringLiteral('Save');
+    const value = parseExpression("'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 +198,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 = parseExpression(`{ 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({});
-    `);
+  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 exported function declarations', () => {
-    const { identifier, storyPath } = storyBindIdentifier(dedent`
+  it.each(['const', 'export const'])('resolves %s arrow initializers', (keyword) => {
+    const csf = parse(dedent`
       export default { title: 'Button' };
-      export function Template(args) {
-        return args;
-      }
+      ${keyword} Template = (args) => 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 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`
-      export default { title: 'Button' };
-      export const 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 +257,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 +270,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..9039070fe70a 100644
--- a/code/core/src/csf-tools/story-shape/utils.ts
+++ b/code/core/src/csf-tools/story-shape/utils.ts
@@ -1,72 +1,36 @@
-import { type NodePath, types as t } from 'storybook/internal/babel';
-
 import type { CsfFile } from '../CsfFile.ts';
-import type { RenderFunctionPath } from './render.ts';
-
-type StaticIdentifierMemberCall = t.CallExpression & {
-  callee: t.MemberExpression & { object: t.Identifier; property: t.Identifier };
-};
-
-type CsfFactoryCall = t.CallExpression & {
-  callee: t.MemberExpression & { property: t.Identifier };
-};
+import {
+  type E,
+  type Node,
+  isFunction,
+  isStringLiteral,
+  staticKey,
+  unwrapExpression,
+} from '../estree/ast.ts';
+
+export {
+  csfFactoryReceiver,
+  isCanonicalCsf2BindCall,
+  isCsfFactoryCall,
+  withoutTypeCalls,
+} from '../CsfFile.ts';
+
+/** 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,39 +39,24 @@ 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' });
-
-/**
- * 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: t.ObjectMethod | t.ObjectProperty): string | null =>
-  t.isStringLiteral(p.key) ? p.key.value : !p.computed && t.isIdentifier(p.key) ? p.key.name : null;
+  tag.object.type === 'Identifier' &&
+  tag.object.name === 'String' &&
+  tag.property.type === 'Identifier' &&
+  tag.property.name === 'raw';
 
 /** 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 && staticKey(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 +64,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;
+  if (fn.body.type !== 'BlockStatement') {
+    return fn.body as E.Expression;
   }
-
-  const body = renderFunction.get('body');
-  if (body.isExpression()) {
-    return body;
-  }
-
-  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 +86,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;
 }
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..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
@@ -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" }));
+      }
+      "
     `);
   });
 
@@ -135,100 +114,58 @@ 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(`
-      "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 +188,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 +286,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,34 +342,28 @@ 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" }));
+      }
+      "
     `);
   });
 
+  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).not.toContain('\r');
+  });
+
   it('correctly handles aliased function and class exports', async () => {
     const code = `
       function MyComponent() {
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..dcefd15d2945 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,23 @@
 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, outerSpan, unwrapExpression, walk } from '../estree/ast.ts';
+import {
+  SourceEditor,
+  appendToList,
+  insertStatementAfter,
+  prependStatement,
+  printKey,
+  printValue,
+  specifierList,
+} 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 +25,7 @@ const STORYBOOK_TEST_IMPORT_SOURCE = 'storybook/test';
 
 type ComponentExport = {
   exportedName: string;
-  localIdentifier: t.Identifier;
+  localName: string;
 };
 
 const sanitizeIdentifier = (value: string) => {
@@ -39,240 +42,166 @@ 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) {
+    appendToList(editor, specifierList(editor, existing), 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);
+        editor.edits.overwrite(node.start, outerSpan(declaration).start, `const ${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.
+          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..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,6 +49,15 @@ const transform = async ({
 };
 
 describe('transformer', () => {
+  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).not.toContain('\r');
+  });
+
   describe('CSF v1/v2/v3', () => {
     describe('default exports (meta)', () => {
       it('should add title to inline default export if not present', async () => {
@@ -67,20 +76,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 +106,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 +137,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 +170,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 +204,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 +231,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 +250,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 +279,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 +313,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 +348,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 +385,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 +414,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 +443,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 +472,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 +499,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 +526,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 +615,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 +673,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 +696,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 +724,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 +759,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 +793,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 +830,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 +857,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 +884,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 +915,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 +949,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 +979,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 +1007,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 +1035,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 +1069,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..63de37cadd22 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, locationOf, staticKey } 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,53 @@ 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. 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) => {
+  const head = editor.edits.toString();
+  const map = editor.generateMap({ source: fileName });
+  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 +112,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 +137,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 +148,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' && staticKey(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 +179,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/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/manager-api/lib/stories.test.ts b/code/core/src/manager-api/lib/stories.test.ts
index 047b29a6bf86..eae9a3aa8149 100644
--- a/code/core/src/manager-api/lib/stories.test.ts
+++ b/code/core/src/manager-api/lib/stories.test.ts
@@ -243,4 +243,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 7c1f461786f2..47ae8e83d9dd 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,
@@ -25,7 +25,6 @@ import { dedent } from 'ts-dedent';
 import { Tag } from '../../shared/constants/tags.ts';
 import { type API, type State } from '../root.tsx';
 import intersect from './intersect.ts';
-import merge from './merge.ts';
 
 const TITLE_PATH_SEPARATOR = /\s*\/\s*/;
 
@@ -84,6 +83,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;
@@ -149,9 +159,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.
@@ -182,141 +203,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;
+  };
+
+  const storiesHash: API_IndexHash = {};
 
-    // Finally add an entry for the docs/story/test itself
-    acc[item.id] = {
+  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;
 };
@@ -348,6 +352,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/shortcuts.ts b/code/core/src/manager-api/modules/shortcuts.ts
index bdcad416b8e7..c886fe332e50 100644
--- a/code/core/src/manager-api/modules/shortcuts.ts
+++ b/code/core/src/manager-api/modules/shortcuts.ts
@@ -377,12 +377,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 9521105d13b8..e7245ba0dbc5 100644
--- a/code/core/src/manager-api/modules/stories.ts
+++ b/code/core/src/manager-api/modules/stories.ts
@@ -194,13 +194,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
+   * unattached docs page.
    *
-   * @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.
    *
@@ -581,7 +582,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);
 
@@ -675,7 +676,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}'`);
@@ -1139,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 === 'root' || type === 'component' || type === 'group');
+        const isLeaf = type === 'story' || type === 'docs';
 
         /**
          * When storybook starts, we want to navigate to the first story. But there are a few
@@ -1172,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,
diff --git a/code/core/src/manager-api/tests/refs.test.ts b/code/core/src/manager-api/tests/refs.test.ts
index 31399b39fd90..9563b1ea4726 100644
--- a/code/core/src/manager-api/tests/refs.test.ts
+++ b/code/core/src/manager-api/tests/refs.test.ts
@@ -1257,7 +1257,6 @@ describe('Refs API', () => {
           'component-a',
           'component-a--page',
           'component-a--story-2',
-          'component-b',
           'component-b--page',
           'component-c',
           'component-c--story-4',
@@ -1309,7 +1308,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 b71dfcf04f37..e3b0442059db 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';
 
@@ -373,36 +377,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'],
@@ -416,10 +420,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({
@@ -561,7 +567,6 @@ describe('stories API', () => {
           'component-a',
           'component-a--page',
           'component-a--story-2',
-          'component-b',
           'component-b--docs',
           'component-c',
           'component-c--story-4',
@@ -581,7 +586,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']);
         });
       });
     });
@@ -738,6 +743,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: {} },
@@ -1029,7 +1049,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 });
@@ -1037,7 +1057,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', () => {
@@ -1051,7 +1071,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', () => {
@@ -1065,9 +1085,32 @@ 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', () => {
+      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.jumpToSubtree(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 });
@@ -1075,7 +1118,7 @@ describe('stories API', () => {
       const { navigate } = moduleArgs;
 
       api.setIndex({ v: 5, entries: navigationEntries });
-      api.jumpToComponent(-1);
+      api.jumpToSubtree(-1);
       expect(navigate).not.toHaveBeenCalled();
     });
   });
@@ -1123,6 +1166,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/ChecklistWidget.stories.tsx b/code/core/src/manager/components/sidebar/ChecklistWidget.stories.tsx
index d6aae83edcf7..8eaaba3884e8 100644
--- a/code/core/src/manager/components/sidebar/ChecklistWidget.stories.tsx
+++ b/code/core/src/manager/components/sidebar/ChecklistWidget.stories.tsx
@@ -1,7 +1,9 @@
+import React, { useEffect, useRef } from 'react';
+
 import type { PlayFunction } from 'storybook/internal/csf';
 
 import { ManagerContext } from 'storybook/manager-api';
-import { expect, 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';
@@ -133,3 +135,84 @@ 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);
+    }
+  },
+});
+
+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 7281ee5f9e97..db9308f08cc0 100644
--- a/code/core/src/manager/components/sidebar/ChecklistWidget.tsx
+++ b/code/core/src/manager/components/sidebar/ChecklistWidget.tsx
@@ -58,13 +58,22 @@ const useTransitionArray = <K, V>(
     allowMultiple: true,
     mountOnEnter: true,
     unmountOnExit: true,
-    preEnter: true,
     ...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/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/components/sidebar/Search.tsx b/code/core/src/manager/components/sidebar/Search.tsx
index db0cc2be7cce..c6cafe4e7b78 100644
--- a/code/core/src/manager/components/sidebar/Search.tsx
+++ b/code/core/src/manager/components/sidebar/Search.tsx
@@ -259,55 +259,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 310b66ee4f77..f29c7173bc02 100644
--- a/code/core/src/manager/components/sidebar/Tree.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Tree.stories.tsx
@@ -325,28 +325,16 @@ export const DocsOnlySingleStoryComponents = {
     return (
       <Tree
         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') {
@@ -377,6 +365,48 @@ export const DocsOnlySingleStoryComponents = {
   },
 };
 
+/** A component whose stories are all hidden (`!dev`) shows as a single docs page. */
+export const ComponentWithOnlyDocsLeft: Story = {
+  render: () => (
+    <Tree
+      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',
+        },
+      }}
+      selectedStoryId={null}
+      onSelectStoryId={fn().mockName('onSelectStoryId')}
+    />
+  ),
+  play: async ({ canvasElement }) => {
+    await waitFor(() =>
+      expect(canvasElement.querySelector('[data-item-id="docs-only--docs"]')).not.toBeNull()
+    );
+    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();
+  },
+};
+
 export const WithContextContent: Story = {
   ...DocsOnlySingleStoryComponents,
   parameters: {
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/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 4eed433f77fa..2efe2d05a49b 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',
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..dec94109fab7
--- /dev/null
+++ b/code/core/src/mocking-utils/automock.test.ts
@@ -0,0 +1,50 @@
+import { describe, expect, it } from 'vitest';
+
+import { getAutomockCode } from './automock.ts';
+import { parseModule } from '../csf-tools/estree/ast.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, '/mod.ts').toString();
+
+    for (const name of ['a', 'renamed', 'first', 'getUser']) {
+      expect(mocked).toContain(`["${name}"]: ${name},`);
+    }
+  });
+
+  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, '/mod.ts').toString();
+
+    expect(mocked.startsWith(declaration)).toBe(true);
+    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, '/mod.ts').toString();
+
+    expect(mocked).toContain('["a"]: a,');
+    expect(mocked).toContain('["b"]: b,');
+    expect(mocked).toContain('["__vitest_default"]: __vitest_default,');
+    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, '/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 c176fce49272..32bd340d7b4f 100644
--- a/code/core/src/mocking-utils/automock.ts
+++ b/code/core/src/mocking-utils/automock.ts
@@ -2,20 +2,19 @@ import type {
   Declaration,
   ExportDefaultDeclaration,
   ExportNamedDeclaration,
-  Expression,
   Pattern,
   Program,
 } from 'estree';
 import MagicString from 'magic-string';
 
+import { outerSpan, parseModule } from '../csf-tools/estree/ast.ts';
 import { type Positioned, getArbitraryModuleIdentifier } from './esmWalker.ts';
 
-type ParseFn = (code: string) => Program;
-
 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;
@@ -44,17 +43,19 @@ export function getAutomockCode(originalCode: string, isSpy: boolean, parse: Par
  * 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',
-  parse: (code: string) => any,
+  fileName: string | undefined,
   options: any = {}
 ): 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 { code: text, program } = parseModule(code, fileName);
+  const ast = program as unknown as Program;
 
-  const m = new MagicString(code);
+  const m = new MagicString(text);
 
   const allSpecifiers: { name: string; alias?: string }[] = [];
   let importIndex = 0;
@@ -98,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
@@ -159,9 +159,12 @@ 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 = `);
+      m.overwrite(
+        node.start,
+        outerSpan(node.declaration as Positioned<typeof node.declaration>).start,
+        `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 2de77fb2ef1c..79a3b7918bb5 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,9 +40,6 @@ vi.mock('storybook/internal/telemetry', () => ({
   telemetry: vi.fn(),
 }));
 
-const parser = (input: string) =>
-  parse(input, { sourceType: 'module', plugins: ['jsx', 'typescript'] });
-
 describe('isModuleDirectory', () => {
   it('returns true for node_modules path', () => {
     expect(extractModule.isModuleDirectory('/foo/node_modules/bar')).toBe(true);
@@ -66,7 +62,6 @@ describe('extractMockCalls', () => {
     vi.mocked(readFileSync).mockReturnValue(previewContent);
     return extractModule.extractMockCalls(
       { previewConfigPath, configDir, coreOptions },
-      parser,
       root,
       findMockRedirect
     );
@@ -218,22 +213,46 @@ 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
-        });"
+        "
+                sb.mock("./bar/baz", { spy: true });
+              "
       `);
     });
 
+    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';\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', () => {
+      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('rewrites sb.mock(import("<xyz>")) to sb.mock("<xyz>")', () => {
       const code = `
         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");"
+        "
+                sb.mock("./bar/baz");
+              "
       `);
     });
   });
diff --git a/code/core/src/mocking-utils/extract.ts b/code/core/src/mocking-utils/extract.ts
index 3c051c1fa947..2b48efcddbfd 100644
--- a/code/core/src/mocking-utils/extract.ts
+++ b/code/core/src/mocking-utils/extract.ts
@@ -1,6 +1,5 @@
 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';
@@ -9,6 +8,8 @@ import { transformSync } from 'esbuild';
 import { walk } from 'estree-walker';
 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/'];
@@ -34,27 +35,18 @@ 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;
-};
+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);
+export function rewriteSbMockImportCalls(code: string, fileName: string) {
+  const editor = new SourceEditor(code, fileName);
 
-  walk(ast as any, {
+  walk(editor.program as any, {
     enter(node: any) {
       if (
         node.type === 'CallExpression' &&
@@ -64,17 +56,23 @@ 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;
+        editor.edits.overwrite(argument.start, argument.end, JSON.stringify(argument.source.value));
       }
     },
   });
-  return generate(ast, {}, code);
+  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 = { ...editor.generateMap() };
+  return {
+    code: editor.toString(),
+    map: { ...map, sourcesContent: map.sourcesContent as string[] },
+  };
 }
 
 /**
@@ -84,13 +82,6 @@ export function rewriteSbMockImportCalls(code: string) {
  */
 export function extractMockCalls(
   options: ExtractMockCallsOptions,
-  parse: (
-    input: string,
-    options?: {
-      allowReturnOutsideFunction?: boolean;
-      jsx?: boolean;
-    }
-  ) => t.Node,
   root: string,
   findMockRedirect: (
     root: string,
@@ -101,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 */
@@ -111,10 +102,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 +115,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 +131,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;
         }
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 ac2e9170d0b0..b8cb1e1dda9a 100644
--- a/code/core/src/preview-api/modules/preview-web/emitTransformCode.ts
+++ b/code/core/src/preview-api/modules/preview-web/emitTransformCode.ts
@@ -23,6 +23,7 @@ export async function emitTransformCode(
   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,
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 dc9b2c2e9f5b..77626a420f77 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
@@ -93,6 +93,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) {
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..a88cd12d8188
--- /dev/null
+++ b/code/core/src/shared/utils/module.test.ts
@@ -0,0 +1,75 @@
+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 importFreshModule = async () => {
+  vi.resetModules();
+  return import('./module.ts');
+};
+
+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(() => {
+    vi.restoreAllMocks();
+    vi.unstubAllEnvs();
+  });
+
+  it('still imports the module when the runtime forbids module hook registration', async () => {
+    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.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);
+      // Calling twice is what makes the toBe(1) below prove memoization.
+      await importModule(new URL('./module.ts', import.meta.url).href);
+
+      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 a49d4d3e2fd2..e5453e57cd9b 100644
--- a/code/core/src/shared/utils/module.ts
+++ b/code/core/src/shared/utils/module.ts
@@ -47,28 +47,30 @@ export const resolvePackageDir = (
 };
 
 let typescriptLoaderRegistration: Promise<void> | null = null;
+let typescriptLoaderRegistrationError: unknown = null;
 
 function registerTypescriptLoader() {
-  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 {
-        const typescriptLoaderUrl = importMetaResolve('storybook/internal/bin/loader');
-        nodeModule.register(typescriptLoaderUrl, import.meta.url);
+  typescriptLoaderRegistration ??= (async () => {
+    if (semver.gte(process.versions.node, '26.0.0')) {
+      try {
+        const { load } = await import('storybook/internal/bin/loader');
+        nodeModule.registerHooks({ load });
+        return;
+      } catch {
+        // Fallback in case nodejs/node#62786 caused an exception
       }
-    })().catch((e) => {
-      typescriptLoaderRegistration = null;
-      throw e;
-    });
-  }
+    }
+
+    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}`);
+  });
   return typescriptLoaderRegistration;
 }
 
@@ -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;
     }
   }
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/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"]
 }
diff --git a/code/e2e-internal/navigation.spec.ts b/code/e2e-internal/navigation.spec.ts
index be71894f5b95..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);
 
@@ -40,13 +54,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 +78,7 @@ test.describe('navigating', () => {
 
       await page
         .getByRole('option', {
-          name: 'Docs / Monospace brand / Typography',
+          name: 'Typography / Monospace brand',
           exact: true,
         })
         .click();
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);
   });
diff --git a/code/frameworks/angular-vite/package.json b/code/frameworks/angular-vite/package.json
index 9c4561c4fe46..eb6d27d480f3 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/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/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..fdac68129205
--- /dev/null
+++ b/code/frameworks/angular-vite/src/docgen/story-docs-args.test.ts
@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest';
+
+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(parseExpression(`helper(/* note */ 'x')`), [])).toBe(
+      `helper('x')`
+    );
+    expect(
+      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(parseExpression('helper(`a  \nb`)'), [])).toBe('helper(`a  \nb`)');
+  });
+
+  it('drops the whitespace before a trailing comment in a CRLF file', () => {
+    expect(
+      evaluateArgExpression(
+        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(parseExpression('a/* c */instanceof B'), [])).toBe(
+      'a instanceof B'
+    );
+  });
+});
+
+describe('argFieldValue', () => {
+  it('keeps comments and dedents continuation lines, but not template literal values', () => {
+    expect(argFieldValue(parseExpression(`(value) => /* why */ value.trim()`))).toBe(
+      `(value) => /* why */ value.trim()`
+    );
+    expect(argFieldValue(parseExpression('helper({\n      code: `a\n  b`,\n    })'))).toBe(
+      'helper({\n  code: `a\n  b`,\n})'
+    );
+    expect(
+      argFieldValue(
+        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 6e6d0bd85692..c9bfeea99eb3 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,14 @@
 // 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,
+  textOf,
+  parseExpression,
+  staticKey,
+  parseModule,
+  reindent,
+  unwrapExpression,
+} from 'storybook/internal/csf-tools';
 
 import type { SnippetEnum } from './build-docgen.ts';
 import { isValidIdentifier } from '../template-grammar.ts';
@@ -16,19 +23,13 @@ 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
+      : parseExpression(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 => {
-  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.
  *
@@ -36,17 +37,65 @@ 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(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
+// 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(textOf(unwrapExpression(node))))
+  );
+};
+
+// 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 = (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]);
+  // 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] ?? ''
+        );
+  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;
+};
 
-// 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));
+const withoutComments = (code: string): string => {
+  const { code: wrapped, comments } = parseModule(`(${code}\n)`);
+  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);
+};
 
 // Angular expression strings support backslash escapes, so quoting stays lossless.
 const quoteExpressionString = (value: string): string =>
@@ -84,38 +133,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,14 +173,14 @@ 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);
-      if (key === null) {
+      const key = staticKey(property);
+      if (key === undefined) {
         return EVAL_FAILED;
       }
       const propertyValue = evaluateNode(property.value, enums);
@@ -147,10 +194,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..aa85aacfe2a7 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,
@@ -28,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';
@@ -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 {
@@ -224,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));
     }
   }
 
@@ -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;
@@ -352,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 });
@@ -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..134c6095b32a 100644
--- a/code/frameworks/angular-vite/src/docgen/story-docs-markup.ts
+++ b/code/frameworks/angular-vite/src/docgen/story-docs-markup.ts
@@ -1,12 +1,18 @@
 // 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,
-  sourceOf,
+  isStringLiteral,
+  oneLineTextOf,
+  staticKey,
   templateParts,
   type TemplateParts,
   unwrapExpression,
@@ -23,12 +29,12 @@ 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[];
 }
 
-export { sourceOf };
+export { oneLineTextOf };
 
 /** Bindings the generated snippet would carry, which is also what `argsToTemplate` expands to. */
 export interface Bindings {
@@ -136,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,
@@ -160,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);
@@ -176,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,
@@ -196,19 +205,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);
@@ -217,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 = (
@@ -281,7 +290,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 +298,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 +320,7 @@ const substituteExpression = (
     return marker;
   }
 
-  if (!t.isIdentifier(expression)) {
+  if (expression.type !== 'Identifier') {
     return undefined;
   }
   const argName = scope.argBindings.get(expression.name);
@@ -334,34 +344,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 +391,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 +440,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 = staticKey(property);
+    if (name === key) {
+      found = property;
+      opaqueAfter = undefined;
+    } else if (name === undefined) {
       opaqueAfter = property;
     }
   });
@@ -448,53 +463,30 @@ 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 };
   }
   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: t.ObjectMethod | t.ObjectProperty): string | undefined => {
-  if (t.isIdentifier(property.key) && !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;
-};
-
-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 +495,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 +548,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 argName = staticKey(property);
+      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,17 +585,17 @@ 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)) {
-        const key = property.computed ? undefined : keyNameOf(property);
+      } else if (property.type === 'Property') {
+        const key = property.computed ? undefined : staticKey(property);
         if (key !== undefined) {
           destructured.push(key);
         } else {
@@ -623,18 +611,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 +637,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..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,8 +1,7 @@
-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,
+  staticKey,
   resolveComponentImport,
   unwrapExpression,
 } from 'storybook/internal/csf-tools';
@@ -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 key = staticKey(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..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 {
-  babelParser,
   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 },
-          babelParser,
           (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, babelParser as any);
+          const automocked = getAutomockCode(code, a.spy, id);
           return {
             code: automocked.toString(),
             map: automocked.generateMap(),
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/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/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,
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())],
   })
 );
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..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
@@ -97,6 +97,36 @@ 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('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';`,
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..96d8f4fed6e3 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,228 @@ 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,
-        };
+        return { code: editor.toString(), map: editor.generateMap({ source: id }).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 +293,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 +320,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 +338,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 +358,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 +385,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;
       }
     }
   }
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 (
diff --git a/code/lib/angular-cm/README.md b/code/lib/angular-cm/README.md
index de60a90401b4..97cdc34dbc04 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 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.
 
 Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme).
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..eb6a6da550e2
--- /dev/null
+++ b/code/lib/angular-cm/src/__testfixtures__/manager/declarations/index.d.ts
@@ -0,0 +1,2 @@
+export { ButtonComponent } from './button.component.js';
+export { ButtonTheme } from './button-theme.js';
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/__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/analyze-file.test.ts b/code/lib/angular-cm/src/analyzer/analyze-file.test.ts
index da8b217859d5..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,7 +6,8 @@
  *     @Component / @Directive  -> components / directives, members split into
  *                                 inputsClass, outputsClass, propertiesClass, methodsClass
  *     @Pipe / @Injectable      -> pipes / injectables, members split into properties, methods
- *     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
@@ -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, and drops any other .d.ts class', () => {
+    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(meta.classes).toEqual([]);
+    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..f957df2b0c65 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,6 +54,12 @@ export function analyzeSourceFile(
       logger.debug(`[angular-cm] ${statement.name.text} left out of docgen: an @NgModule`);
       continue;
     }
+    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 name = statement.name.text;
     const file = sourceFile.fileName;
     const members = collectClassMembers(ctx, statement, kind);
@@ -63,13 +70,7 @@ export function analyzeSourceFile(
     };
 
     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);
+      const { selector, standalone } = componentMetadata(ctx, statement, kind);
       const record: Directive & typeof common & { selector?: string; standalone?: boolean } = {
         name,
         type: kind,
@@ -138,7 +139,23 @@ const classify = (ctx: AnalyzerContext, node: tsModule.ClassDeclaration): ClassK
       return kind;
     }
   }
-  return 'class';
+  return readComponentDeclaration(ctx, node) ? 'component' : 'class';
+};
+
+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),
+    standalone: metadata && decoratorStandalone(ctx, metadata),
+  };
 };
 
 const decoratorSelector = (
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..7fdf547d54ec
--- /dev/null
+++ b/code/lib/angular-cm/src/analyzer/component-declaration.test.ts
@@ -0,0 +1,351 @@
+import { describe, expect, it } from 'vitest';
+
+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 });
+
+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']);
+  });
+});
+
+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;
+    @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' });
+  }
+`;
+
+// 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;
+      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; }; "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;
+  }
+`;
+
+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([
+      'amount',
+      'checked',
+      'expanded',
+      'flag',
+      'metaAlias',
+      'needed',
+      'plain',
+      'publicName',
+      'size',
+      'total',
+    ]);
+  });
+
+  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',
+    ]);
+    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 expectLeftOut = (meta: ReturnType<typeof analyzeDeclaration>) => {
+    expect(meta.components).toEqual([]);
+    expect(meta.classes).toEqual([]);
+  };
+
+  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}>;`],
+  ])('is left out when `ɵcmp` has %s', (_, member) => {
+    expectLeftOut(analyzeDeclaration(declaringMember(member)));
+  });
+
+  it('does not mistake a locally declared `ɵɵComponentDeclaration` for Angular', () => {
+    expectLeftOut(
+      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', () => {
+    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;
+        `,
+      })
+    );
+  });
+
+  it('does not mistake a package whose name merely starts with `@angular/core` for Angular', () => {
+    expectLeftOut(
+      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', () => {
+    expectLeftOut(
+      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..39bca9443e7e
--- /dev/null
+++ b/code/lib/angular-cm/src/analyzer/component-declaration.ts
@@ -0,0 +1,153 @@
+import type * as ts from 'typescript';
+
+import { resolvedSymbol, type AnalyzerContext } from './context.ts';
+import { isDeclaredInAngularCore, type MetadataIOEntry } from './decorators.ts';
+
+export interface ComponentMetadata {
+  selector: string | undefined;
+  standalone: boolean | undefined;
+}
+
+export interface ComponentDeclaration extends ComponentMetadata {
+  inputsOutputs: MetadataIOEntry[];
+}
+
+// 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.ClassLikeDeclaration
+): ComponentDeclaration | 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: 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.ClassLikeDeclaration
+): 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.ClassLikeDeclaration
+): 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 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;
+};
+
+// Keyed by class field. An entry is the public name, or since Angular 16 an object type such as
+// `{ alias: 'label'; required: false }`.
+const ioMapEntries = (
+  ctx: AnalyzerContext,
+  map: ts.TypeNode,
+  bucket: MetadataIOEntry['bucket']
+): MetadataIOEntry[] => {
+  const { ts } = ctx;
+  if (!ts.isTypeLiteralNode(map)) {
+    return [];
+  }
+  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;
+    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;
+    entries.push({
+      bucket,
+      name,
+      ...(alias === undefined || alias === name ? {} : { alias }),
+      ...(required === undefined ? {} : { required }),
+    });
+  }
+  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 21ad6c34a9f9..226447bae222 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,
@@ -163,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/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 86ad8c292dd9..327d20b146ba 100644
--- a/code/lib/angular-cm/src/analyzer/members.ts
+++ b/code/lib/angular-cm/src/analyzer/members.ts
@@ -3,8 +3,9 @@ import { logger } from 'storybook/internal/node-logger';
 import type * as ts from 'typescript';
 
 import type { Argument, Method, Property } from '../types.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,
@@ -15,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 } from './signals.ts';
+import {
+  buildDeclaredSignalEntry,
+  buildSignalEntry,
+  declaredSignalKind,
+  parseSignalCall,
+} from './signals.ts';
 
 /**
  * A collected member, paired with the identity Angular itself merges on.
@@ -111,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.
@@ -123,34 +130,88 @@ 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 ?? []) {
+    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),
+    });
+  }
 }
 
+// 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: {
+      ...member.value,
+      name: entry.alias ?? entry.name,
+      ...(entry.bucket === 'inputs' ? inputFields : {}),
+    },
+  });
+
+  const index = members.properties.findIndex(isField);
+  if (index >= 0) {
+    const [property] = members.properties.splice(index, 1);
+    bucket.push(bind(property));
+    return;
+  }
+  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 transform input's write type survives in a declaration file only as a generated static.
+const acceptedInputType = (
+  ctx: AnalyzerContext,
+  classNode: ts.ClassLikeDeclaration,
+  entry: MetadataIOEntry
+): Partial<Property> => {
+  const { ts } = ctx;
+  if (entry.bucket !== 'inputs') {
+    return {};
+  }
+  const accepted = classNode.members.find(
+    (member): member is ts.PropertyDeclaration =>
+      ts.isPropertyDeclaration(member) &&
+      isStatic(ctx, member) &&
+      memberName(ts, member.name) === `ngAcceptInputType_${entry.name}`
+  );
+  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>(
   ctx: AnalyzerContext,
   member: ts.ClassElement & { name: ts.PropertyName },
@@ -182,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
diff --git a/code/lib/angular-cm/src/manager.test.ts b/code/lib/angular-cm/src/manager.test.ts
index 2e51c310741f..6e0ea119a693 100644
--- a/code/lib/angular-cm/src/manager.test.ts
+++ b/code/lib/angular-cm/src/manager.test.ts
@@ -164,6 +164,31 @@ 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,
+      });
+      expect(inputsOf(result).map((input) => input.name)).toEqual(['disabled', 'label']);
+    }
+  );
+
+  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..709f6d0c5acc 100644
--- a/code/lib/angular-cm/src/project.ts
+++ b/code/lib/angular-cm/src/project.ts
@@ -187,7 +187,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();
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/fix-files.test.ts b/code/lib/cli-storybook/src/automigrate/fix-files.test.ts
index becaa5479e79..4c6bc994d69a 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 {};');
   });
@@ -80,6 +77,19 @@ describe('createFixFiles', () => {
     ).toEqual([story]);
   });
 
+  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");
+
+    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 {\r\n  addons: ['a'],\r\n  framework: 'x',\r\n};\r\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..49fa694f0537 100644
--- a/code/lib/cli-storybook/src/automigrate/fix-files.ts
+++ b/code/lib/cli-storybook/src/automigrate/fix-files.ts
@@ -2,7 +2,13 @@ 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,
+  restoreLineEndings,
+} from 'storybook/internal/csf-tools';
 
 import { editParsedFile } from './helpers/edit-parsed-file.ts';
 
@@ -21,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, 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;
@@ -58,7 +67,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) => {
@@ -136,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 7f5086169f95..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 files with CRLF 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"
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..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
@@ -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 });
     }
   }
@@ -167,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
     );
 };
 
@@ -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) => ast.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 = 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: '' }
-          : { start: node.start!, end: node.end!, text: '' }
+          ? { start: lineStart, end: node.end + lineEnd, text: '' }
+          : { start: node.start, end: node.end, text: '' }
       );
     }
   }
@@ -220,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
     );
 };
 
@@ -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.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 0b42990a0391..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
@@ -1,4 +1,3 @@
-import { types as t } from 'storybook/internal/babel';
 import {
   ANALOG_VITE_PLUGIN_ANGULAR_VERSION,
   editJsonText,
@@ -86,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';
 
@@ -95,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: {
@@ -109,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',
@@ -216,9 +211,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..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
@@ -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,30 +135,31 @@ 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;
 };
 
-const previewWiresCompodoc = (source: string): boolean => {
+const previewWiresCompodoc = (source: string, fileName: string): boolean => {
   try {
-    return wiresCompodoc(babelParse(source));
+    return wiresCompodoc(parseModule(source, fileName).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);
         }
       },
@@ -297,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, [
@@ -412,14 +421,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.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/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 e39d48deaf31..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
@@ -1,27 +1,27 @@
-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 { everyCsfObject, readForEdit } from '../helpers/edit-parsed-file.ts';
 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;
 };
 
 const strip = (object: CsfObject) => {
-  const argTypes = object.get(['argTypes']);
-  if (!t.isObjectExpression(argTypes)) {
+  const argTypes = readForEdit(object, ['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);
@@ -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/fixes/component-subtitle.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/component-subtitle.test.ts
index 9c5dc6aee415..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
@@ -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 () => {
@@ -116,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/csf-next-mocked-args.ts b/code/lib/cli-storybook/src/automigrate/fixes/csf-next-mocked-args.ts
index 6ecf1c839a69..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._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/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/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 669c23de532d..07088cd6ca43 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 } });"
     `);
   });
 
@@ -444,9 +421,7 @@ describe('setConfigLayout', () => {
 
       await expect(fsp.readFile(managerConfigPath, 'utf8')).resolves.toBe(dedent`
       import { addons } from '${specifier}';
-      addons.setConfig({ layout: {
-        showToolbar: false
-      } });
+      addons.setConfig({ layout: { showToolbar: false } });
     `);
     }
   );
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.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..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
@@ -1,13 +1,8 @@
-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';
 
+import { readForEdit } from '../helpers/edit-parsed-file.ts';
 import type { Fix } from '../types.ts';
 
 const tagOptionRenames = {
@@ -15,15 +10,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 +29,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;
 };
 
@@ -92,13 +82,13 @@ export const tagFilterApi: Fix = {
     {
       filter: { kind: ['main'], code: /excludeFromSidebar|excludeFromDocsStories/ },
       editConfig: (main) => {
-        const tags = main.get(['tags']);
-        if (!tags || !t.isObjectExpression(tags)) {
+        const tags = readForEdit(main, ['tags']);
+        if (tags?.type !== 'ObjectExpression') {
           return;
         }
         for (const tagName of objectKeys(tags)) {
-          const option = main.get(['tags', tagName]);
-          if (!option || !t.isObjectExpression(option)) {
+          const option = readForEdit(main, ['tags', tagName]);
+          if (option?.type !== 'ObjectExpression') {
             continue;
           }
           const keys = new Set(objectKeys(option));
@@ -109,9 +99,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..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
@@ -413,11 +413,29 @@ describe('vitestSetupFile', () => {
         "import { MotionGlobalConfig } from 'framer-motion';
 
         // Skip animations
-        MotionGlobalConfig.skipAnimations = true;"
+        MotionGlobalConfig.skipAnimations = true;
+        "
       `);
       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,
@@ -1037,7 +1055,6 @@ describe('transformSetupFile', () => {
       //
 
       import { setupTests } from './setup';
-
       setupTests();"
     `);
   });
@@ -1062,7 +1079,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..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
@@ -6,6 +6,14 @@ import {
   getAddonNames,
   rendererPackages,
 } from 'storybook/internal/common';
+import {
+  type ESTree as E,
+  type ESTreeNode as Node,
+  SourceEditor,
+  walk,
+  removeStatements,
+  setImportSpecifiers,
+} from 'storybook/internal/csf-tools';
 
 import jscodeshift from 'jscodeshift';
 import path from 'path';
@@ -13,9 +21,6 @@ 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 type { Fix } from '../types.ts';
 
@@ -276,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));
       }
     }
 
@@ -322,20 +329,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 +369,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 +389,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 +404,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 +447,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 +462,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 +473,37 @@ 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 ?? [])];
+  removeStatements(editor, removedStatements);
+
+  return { kind: 'rewritten', code: editor.toString() };
 }
 
 function resolvesToPreview(importSource: string, options: TransformOptions) {
@@ -513,7 +516,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 +524,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 +541,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..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
@@ -458,15 +458,25 @@ 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' },
         },
       };"
     `);
   });
 
+  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' };",
@@ -475,13 +485,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 +497,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 +627,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 +655,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')
@@ -838,7 +829,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(`
       [
@@ -864,7 +856,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 ddd6ae04c687..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
@@ -1,6 +1,12 @@
-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,
+  removeStatements,
+  setImportSpecifiers,
+} from 'storybook/internal/csf-tools';
 import { logger } from 'storybook/internal/node-logger';
 import { SupportedRenderer } from 'storybook/internal/types';
 
@@ -60,19 +66,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 +128,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 +220,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 +249,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 +290,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.editor;
+  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.editor.commit();
 };
 
 const removePreviewWiring = (
@@ -300,12 +315,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 +334,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 +345,15 @@ const removePreviewWiring = (
   }
 
   for (const [name, specifier] of keptImports) {
+    const editor = preview.editor;
     // 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 cea44fa879e6..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
@@ -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';
@@ -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: [
@@ -95,6 +95,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\`)));
         }
@@ -112,10 +116,9 @@ 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';
+        "import path, { dirname as pathDirname } from 'node:path';
         import { fileURLToPath } from 'node:url';
 
         const dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -128,6 +131,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 pathDirname(fileURLToPath(import.meta.resolve(\`\${value}/package.json\`)));
         }
@@ -146,8 +153,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)'],
@@ -156,6 +163,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 value(fileURLToPath(import.meta.resolve(\`\${_value}/package.json\`)));
         }
@@ -173,11 +184,10 @@ 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';
-        import path from 'node:path';
+        "import path, { dirname as pathDirname } from 'node:path';
+        import { fileURLToPath } from 'node:url';
 
         const { dirname } = path;
 
@@ -188,6 +198,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 pathDirname(fileURLToPath(import.meta.resolve(\`\${value}/package.json\`)));
         }
@@ -206,8 +220,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)'],
@@ -216,6 +230,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 pathDirname(fileURLToPath(import.meta.resolve(\`\${value}/package.json\`)));
         }
@@ -234,8 +252,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: [
@@ -253,6 +271,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\`)));
         }
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..ee09ee34e5be 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(mainConfig, /\.tsx?$/.test(id), names)
           );
         }
       },
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..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,8 +1,21 @@
 import { HandledError } from 'storybook/internal/common';
-import type { ConfigFile } from 'storybook/internal/csf-tools';
+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;
+
 /** 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,
@@ -10,11 +23,78 @@ 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) {
-    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;
+};
+
+// 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;
 };
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..8ab7c845c10c 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,
+  removeStatements,
+  setImportSpecifiers,
+} from 'storybook/internal/csf-tools';
 
 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: t.Program, callee: string): t.ExpressionStatement[] =>
-  program.body.filter((node): node is t.ExpressionStatement => isTopLevelCall(node, callee));
+export const topLevelCalls = (program: E.Program, callee: string): E.ExpressionStatement[] =>
+  program.body.filter((node): node is E.ExpressionStatement => isTopLevelCall(node, callee));
 
-/** 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);
-    },
+const isWithin = (node: Node, statements: readonly Node[]) =>
+  statements.some((statement) => statement.start <= node.start && node.end <= statement.end);
+
+/**
+ * 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.editor;
+  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.editor.commit();
   return { removed: true, keptArguments };
 };
diff --git a/code/lib/cli-storybook/src/automigrate/pipeline.test.ts b/code/lib/cli-storybook/src/automigrate/pipeline.test.ts
index 03b09097b882..8869a16cf337 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,16 +339,13 @@ 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: [] });
   });
 
-  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 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: () => {} };
 
@@ -361,18 +356,10 @@ 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\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';" });
@@ -418,10 +405,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({
@@ -431,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,
diff --git a/code/lib/cli-storybook/src/automigrate/pipeline.ts b/code/lib/cli-storybook/src/automigrate/pipeline.ts
index 5b3e84dbbee1..87d7e95d93a4 100644
--- a/code/lib/cli-storybook/src/automigrate/pipeline.ts
+++ b/code/lib/cli-storybook/src/automigrate/pipeline.ts
@@ -8,7 +8,9 @@ import {
   formatConfig,
   loadConfig,
   loadCsf,
+  normalizeLineEndings,
   printCsf,
+  restoreLineEndings,
 } from 'storybook/internal/csf-tools';
 
 import { createFixFiles } from './fix-files.ts';
@@ -220,9 +222,8 @@ export const runTransforms = async (
       continue;
     }
 
-    // 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);
+    // 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
     // the next edit parses `code`, the output of the last hook that succeeded.
@@ -257,8 +258,9 @@ 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);
+        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) {
           if (outcome.changed.includes(context.id)) {
diff --git a/code/lib/cli-storybook/src/codemod/csf-factories.ts b/code/lib/cli-storybook/src/codemod/csf-factories.ts
index 8c7502e436da..a8d04112378b 100644
--- a/code/lib/cli-storybook/src/codemod/csf-factories.ts
+++ b/code/lib/cli-storybook/src/codemod/csf-factories.ts
@@ -23,6 +23,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;
@@ -33,14 +34,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}';
+    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,11 +56,17 @@ 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') {
+    // 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;
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..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
@@ -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: {},
+      })
     `);
   });
 
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..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
@@ -1,13 +1,24 @@
-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,
+  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';
 
 import picocolors from 'picocolors';
 
 import type { FileInfo } from '../../automigrate/codemod.ts';
 import {
-  addImportToTop,
   cleanupTypeImports,
   getConfigProperties,
   removeExportDeclarations,
@@ -18,7 +29,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) {
@@ -27,43 +38,42 @@ export async function configToCsfFactory(
   }
 
   const methodName = configType === 'main' ? 'defineMain' : 'definePreview';
-  const programNode = config._ast.program;
+  const editor = config.editor;
   const exportDecls = config._exportDecls;
 
-  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 = unwrapExpression(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 +84,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)
-          );
-        })
+            unwrapExpression(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 ? unwrapExpression(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 +142,10 @@ 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;
-    }
+    prependToList(editor, objectList(editor, config._exportsObject), defineConfigProps);
+    removeExportDeclarations(editor, exportDecls);
+    config.editor.commit();
+    wrapDefaultExport(false);
   } else if (config._exportsObject) {
     /**
      * Scenario 2: Default exports
@@ -156,59 +155,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 +179,31 @@ 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));
+    appendStatement(editor, `export default ${methodName}({});`);
   }
-
-  const configImport = t.importDeclaration(
-    [t.importSpecifier(t.identifier(methodName), t.identifier(methodName))],
-    t.stringLiteral(frameworkPackage + `${configType === 'main' ? '/node' : ''}`)
-  );
+  config.editor.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);
+    prependStatement(
+      editor,
+      `import { ${methodName} } from ${printString(expectedImportSource, editor.quote)};`
+    );
   }
+  config.editor.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..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
@@ -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,28 @@ 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([])),
-    };
+  it('keeps the parentheses of a comma expression', () => {
+    const editor = new SourceEditor(`export const foo = (track(), 'fooValue');`);
 
-    const properties = getConfigProperties(exportDecls, { configType: 'main' });
+    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() {}`);
 
-    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..921f219c7364 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,16 @@
-import { types as t, traverse } from 'storybook/internal/babel';
+import {
+  type ESTree as E,
+  type ESTreeNode as Node,
+  type SourceEditor,
+  placeableTextOf,
+  walk,
+  removeStatements,
+  setImportSpecifiers,
+} from 'storybook/internal/csf-tools';
+
+import path from 'path';
+
+import { DOCUMENTED_PREVIEW_IMPORT } from '../../../../../core/src/shared/constants/config-folder.ts';
 
 const projectAnnotationNames = [
   'decorators',
@@ -20,128 +32,117 @@ 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>();
-
-  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
-  }
-
-  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;
-        });
-
-        // Remove the entire import if no valid specifiers remain
-        if (allowedSpecifiers.length > 0) {
-          node.specifiers = allowedSpecifiers;
-          return true;
-        }
-        return false;
-      }
+  walk(editor.program, (node) => {
+    if (node.type === 'ImportDeclaration') {
+      return false;
     }
+    if (node.type === 'Identifier') {
+      usedIdentifiers.add(node.name);
+    }
+  });
 
-    // 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;
+  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);
 }
 
-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]
+export type ExportDeclarations = Record<string, E.VariableDeclarator | E.Function>;
+
+// 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;
+    }
+    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}: ${placeableTextOf(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.
+
+// 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 };
+
+export function getPreviewImportPath(
+  storiesFilePath: string,
+  { useSubPathImports, previewConfigPath }: PreviewImportOptions
+) {
+  if (useSubPathImports) {
+    return DOCUMENTED_PREVIEW_IMPORT;
   }
 
-  programNode.body.unshift(importDecl);
+  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/custom-args-type.ts b/code/lib/cli-storybook/src/codemod/helpers/custom-args-type.ts
index e11b7964b86f..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
@@ -1,19 +1,27 @@
-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']);
 
+// 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(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 +29,117 @@ 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;
+  // 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) => {
+      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 componentName = dottedName(component);
 
-  const isComponentClass = (type: t.Node | null | undefined): type is t.TSTypeReference =>
-    t.isTSTypeReference(type) && generate(type.typeName).code === componentCode;
+  const isComponentClass = (type: Node | null | undefined): type is E.TSTypeReference =>
+    type?.type === 'TSTypeReference' &&
+    componentName !== undefined &&
+    dottedName(type.typeName) === componentName;
 
-  const isComponent = (type: t.Node | null | undefined) =>
-    t.isTSTypeQuery(type) || isComponentClass(type);
+  const isComponent = (type: Node | null | undefined) =>
+    type?.type === 'TSTypeQuery' || isComponentClass(type);
 
-  const aliasedType = (type: t.Node | null | undefined) =>
-    t.isTSTypeReference(type) && !type.typeParameters && t.isIdentifier(type.typeName)
+  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)) {
-        return customArgs(member.typeAnnotation);
-      }
+  const customArgs = (type: E.TSType | undefined): E.TSType[] =>
+    (type?.type === 'TSIntersectionType' ? type.types : type ? [type] : []).flatMap((member) => {
       // `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) =>
+                LOOSER_THAN_INTERSECTION.has(type.type)
+                  ? `(${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..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._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..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
@@ -1,4 +1,10 @@
-import { types as t, traverse } from 'storybook/internal/babel';
+import {
+  type ESTree as E,
+  type ESTreeNode as Node,
+  type SourceEditor,
+  walk,
+  removeStatements,
+} from 'storybook/internal/csf-tools';
 
 import { cleanupTypeImports } from './csf-factories-utils.ts';
 
@@ -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..bb03f2ad2c96 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,13 +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 { 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(),
@@ -15,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,
@@ -63,7 +72,6 @@ describe('stories codemod', () => {
          * Copyright 2024
          */
         import preview from "#.storybook/preview";
-
         const meta = preview.meta({ title: "Component" });
         export const A = meta.story();
       `);
@@ -77,11 +85,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 +214,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();
@@ -293,6 +293,38 @@ describe('stories codemod', () => {
       `);
     });
 
+    it('keeps the exports of an imported Svelte CSF file that are not stories', async () => {
+      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: '/project/src/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`
@@ -324,9 +356,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,
@@ -934,6 +964,71 @@ 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('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';
+          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`
@@ -1099,6 +1194,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`
@@ -1126,6 +1236,81 @@ 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('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`
@@ -1182,6 +1367,64 @@ 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(
@@ -1234,9 +1477,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 +1508,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 +1690,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..b2e4cfd5fe2e 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,30 +1,89 @@
-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,
+  printString,
+  outerSpan,
+  walk,
+  wrapExpression,
+  removeStatements,
+  setImportSpecifiers,
+  prependStatement,
+} 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 { addImportToTop } from './csf-factories-utils.ts';
+import {
+  type PreviewImportOptions,
+  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'];
+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';
 
-type Options =
-  | { useSubPathImports: true; previewConfigPath?: string }
-  | { useSubPathImports: false; previewConfigPath: string };
+// OXC types declare no annotation on binding identifiers, but TypeScript sources have them.
+const typeAnnotationOf = (id: Node) =>
+  (id as { typeAnnotation?: E.TSTypeAnnotation | null }).typeAnnotation;
 
-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' });
+    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;
@@ -43,42 +102,23 @@ 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;
 
   // 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;
-  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';
-
-  const sbConfigImportSpecifier = t.importDefaultSpecifier(t.identifier(sbConfigImportName));
+  let previewImport: E.ImportDeclaration | undefined;
+  let previewImportNeedsDefault = false;
 
   /**
    * Collect imports from other .stories files.
@@ -99,42 +139,44 @@ export async function storyToCsfFactory(
    */
   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)) {
-      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
+  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|svelte))?$/.test(importPath)) {
+      const nonStories = findSvelteCsfNonStoryExports(info.path, importPath);
+      node.specifiers.forEach((specifier) => {
+        if (specifier.type === 'ImportSpecifier') {
+          const imported =
+            specifier.imported.type === 'Identifier'
+              ? specifier.imported.name
+              : specifier.imported.value;
+          // import { Primary } from './Button.stories': Primary itself is a story
+          if (!nonStories.includes(imported)) {
             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);
           }
-        });
-      }
+        } else {
+          nonStoryExports.set(specifier.local.name, nonStories);
+          // 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 +187,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,321 +199,187 @@ 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;
+    if (decl.type !== 'VariableDeclarator' || decl.id.type !== 'Identifier' || !decl.init) {
+      return;
+    }
+    const argsTypes: E.TSType[] = [];
 
-      const wrappedCall = t.callExpression(
-        t.memberExpression(t.identifier(metaVariableName), t.identifier('story')),
-        [arrowFn]
-      );
+    // 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);
+    }
 
-      const replacement = t.exportNamedDeclaration(
-        t.variableDeclaration('const', [
-          t.variableDeclarator(t.identifier(exportName), wrappedCall),
-        ])
-      );
+    // 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;
+    }
 
-      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 (story.type === 'ObjectExpression' || story.type === 'ArrowFunctionExpression') {
+      storyInits.push({ init: decl.init, story, argsTypes });
+      transformedStoryExports.add(exportName);
     }
   });
 
-  const storyExportDecls = new Map(
-    Object.entries(csf._storyExports).filter(
-      (
-        entry
-      ): entry is [string, Exclude<(typeof csf._storyExports)[string], t.FunctionDeclaration>] =>
-        !t.isFunctionDeclaration(entry[1])
-    )
+  // If no stories were transformed, bail early to avoid having a mixed CSF syntax and therefore a broken indexer.
+  if (transformedStoryExports.size === 0) {
+    logger.warn(
+      `Skipping codemod for ${info.path}: no stories were transformed. Either there are no stories, file has been already transformed or some stories are written in an unsupported format.`
+    );
+    return info.source;
+  }
+
+  // If some stories were detected but not all could be transformed, we skip the codemod to avoid mixed csf syntax and therefore a broken indexer.
+  if (detectedStoryNames.length > 0 && transformedStoryExports.size !== detectedStoryNames.length) {
+    logger.warn(
+      `Skipping codemod for ${info.path}:\nSome of the detected stories [${detectedStoryNames
+        .map((name) => `"${name}"`)
+        .join(', ')}] would not be transformed because they are written in an unsupported format.`
+    );
+    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 isNonStoryExport = (namespace: E.IdentifierReference, property: Node) =>
+    property.type === 'Identifier' &&
+    !!nonStoryExports.get(namespace.name)?.includes(property.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)
-  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
-
+  walk(program, (node, parent) => {
+    if (node.type === '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
+      // Cross-file namespace access: BaseStories.Primary.args → BaseStories.Primary.input.args
+      if (
+        innerObject.type === 'MemberExpression' &&
+        isIdentifierNamed(innerObject.object, storyFileImports) &&
+        innerObject.property.type === 'Identifier'
+      ) {
         if (
-          t.isIdentifier(importName) &&
-          storyFileImports.has(importName.name) &&
-          t.isIdentifier(storyName)
+          innerObject.property.name === 'input' ||
+          isNonStoryExport(innerObject.object, innerObject.property) ||
+          !isAllowedAccess(node.property)
         ) {
-          // 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;
-
-        // 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;
+        editor.edits.appendLeft(innerObject.end, '.input');
+        return false;
       }
 
-      // 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;
-
-        // Skip if this is already .input
-        if (t.isIdentifier(storyName, { name: 'input' })) {
+      // Named story imports: Primary.args → Primary.input.args
+      if (isIdentifierNamed(innerObject, namedStoryImports)) {
+        if (!isAllowedAccess(node.property)) {
           return;
         }
-
-        // 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
+        editor.edits.appendLeft(innerObject.end, '.input');
+        return false;
       }
-    },
-  });
 
-  // If no stories were transformed, bail early to avoid having a mixed CSF syntax and therefore a broken indexer.
-  if (transformedStoryExports.size === 0) {
-    logger.warn(
-      `Skipping codemod for ${info.path}: no stories were transformed. Either there are no stories, file has been already transformed or some stories are written in an unsupported format.`
-    );
-    return info.source;
-  }
+      // Namespace spreads: ...BaseStories.Secondary → ...BaseStories.Secondary.input
+      if (
+        isIdentifierNamed(innerObject, namespaceStoryImports) &&
+        !(node.property.type === 'Identifier' && node.property.name === 'input') &&
+        !isNonStoryExport(innerObject, node.property) &&
+        parent?.type === 'SpreadElement'
+      ) {
+        editor.edits.appendLeft(node.end, '.input');
+        return false;
+      }
+      return;
+    }
 
-  // If some stories were detected but not all could be transformed, we skip the codemod to avoid mixed csf syntax and therefore a broken indexer.
-  if (detectedStoryNames.length > 0 && transformedStoryExports.size !== detectedStoryNames.length) {
-    logger.warn(
-      `Skipping codemod for ${info.path}:\nSome of the detected stories [${detectedStoryNames
-        .map((name) => `"${name}"`)
-        .join(', ')}] would not be transformed because they are written in an unsupported format.`
-    );
-    return info.source;
-  }
+    // 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. The parentheses
+  // of `(inner) satisfies T` stay with `inner`.
+  const wrap = (outer: Node, inner: Node, before: string, after: string) => {
+    const { end } = outerSpan(inner);
+    if (end < outer.end) {
+      editor.edits.remove(end, outer.end);
+    }
+    wrapExpression(editor, inner, before, 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 +389,78 @@ 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,
+        printString(previewPath, editor.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)
+    prependStatement(
+      editor,
+      `import ${sbConfigImportName} from ${printString(previewPath, editor.quote)};`
     );
-    addImportToTop(programNode, configImport);
   }
 
-  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/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..506c8dae7e98
--- /dev/null
+++ b/code/lib/cli-storybook/src/codemod/helpers/svelte-csf-to-csf-factory.test.ts
@@ -0,0 +1,381 @@
+import { readFileSync } from 'node:fs';
+
+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,
+  '../../../../../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', () => {
+    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: {} };
+          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 }} />
+        `,
+        '/project/src/stories/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('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`
+        <!--
+        <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/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..4af020bbf66c
--- /dev/null
+++ b/code/lib/cli-storybook/src/codemod/helpers/svelte-csf-to-csf-factory.ts
@@ -0,0 +1,208 @@
+import { readFileSync } from 'node:fs';
+
+import { type ESTree as E, SourceEditor, walk } from 'storybook/internal/csf-tools';
+import { logger } from 'storybook/internal/node-logger';
+
+import { dirname, resolve } from 'pathe';
+
+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 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 [];
+  }
+  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');
+  } catch {
+    return [];
+  }
+  return [...code.matchAll(SCRIPT_BLOCK)].flatMap(([, open, content]) => {
+    if (!MODULE_SCRIPT_TAG.test(open)) {
+      return [];
+    }
+    try {
+      return new SourceEditor(content, source).program.body.flatMap((node) => {
+        if (node.type !== 'ExportNamedDeclaration') {
+          return [];
+        }
+        const names = node.specifiers.map(({ exported }) =>
+          exported.type === 'Identifier' ? exported.name : String(exported.value)
+        );
+        const { declaration } = node;
+        if (declaration?.type === 'VariableDeclaration') {
+          names.push(
+            ...declaration.declarations.flatMap(({ id }) =>
+              id.type === 'Identifier' ? id.name : []
+            )
+          );
+        } else if (declaration && 'id' in declaration && declaration.id?.type === 'Identifier') {
+          names.push(declaration.id.name);
+        }
+        return names;
+      });
+    } 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: E.ImportSpecifier) =>
+  specifier.imported.type === 'Identifier' ? specifier.imported.name : specifier.imported.value;
+
+const isDefineMetaSpecifier = (
+  specifier: E.ImportDeclaration['specifiers'][number]
+): specifier is E.ImportSpecifier =>
+  specifier.type === 'ImportSpecifier' &&
+  specifier.importKind !== 'type' &&
+  importedName(specifier) === 'defineMeta';
+
+function transformModuleScript(
+  content: string,
+  filePath: string,
+  previewPath: string
+): { code: string; storyImports: StoryImports } | undefined {
+  let editor;
+  try {
+    editor = new SourceEditor(content, filePath);
+  } catch {
+    return undefined;
+  }
+  const { code, program } = editor;
+
+  const svelteCsfImport = program.body.find(
+    (node): node is E.ImportDeclaration =>
+      node.type === 'ImportDeclaration' &&
+      SVELTE_CSF_IMPORT_SOURCES.includes(node.source.value) &&
+      node.specifiers.some(isDefineMetaSpecifier)
+  );
+  const defineMetaSpecifier = svelteCsfImport?.specifiers.find(isDefineMetaSpecifier);
+  if (!svelteCsfImport || !defineMetaSpecifier) {
+    return undefined;
+  }
+
+  const previewName = editor.scopes.program.bindings.has('preview')
+    ? 'storybookPreview'
+    : 'preview';
+  let migrated = false;
+  walk(program, (node) => {
+    if (
+      node.type === 'CallExpression' &&
+      node.callee.type === 'Identifier' &&
+      node.callee.name === defineMetaSpecifier.local.name
+    ) {
+      editor.edits.overwrite(node.callee.start, node.callee.end, `${previewName}.meta`);
+      migrated = true;
+    }
+  });
+  if (!migrated) {
+    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) {
+    editor.edits.overwrite(start, end, previewImport);
+  } else {
+    const indentation = code.slice(code.lastIndexOf('\n', start - 1) + 1, start);
+    editor.edits
+      .overwrite(
+        specifiers[0].start,
+        specifiers.at(-1)!.end,
+        otherSpecifiers.map((specifier) => code.slice(specifier.start, specifier.end)).join(', ')
+      )
+      .appendLeft(end, `\n${indentation}${previewImport}`);
+  }
+
+  const storyImports: StoryImports = { namespaces: [], stories: [] };
+  for (const node of program.body) {
+    if (node.type === 'ImportDeclaration' && STORIES_FILE.test(node.source.value)) {
+      const nonStories = findSvelteCsfNonStoryExports(filePath, node.source.value);
+      for (const specifier of node.specifiers) {
+        if (specifier.type !== 'ImportSpecifier') {
+          storyImports.namespaces.push({ name: specifier.local.name, nonStories });
+        } else if (!nonStories.includes(importedName(specifier))) {
+          storyImports.stories.push(specifier.local.name);
+        }
+      }
+    }
+  }
+
+  return { code: editor.toString(), storyImports };
+}
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..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._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..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
@@ -1,7 +1,18 @@
-import { types as t, traverse } from 'storybook/internal/babel';
-import type { NodePath } from 'storybook/internal/babel';
-
-type Binding = NonNullable<ReturnType<NodePath['scope']['getBinding']>>;
+import {
+  type Binding,
+  type ESTree as E,
+  type ESTreeNode as Node,
+  type SourceEditor,
+  generateUid,
+  insertAfterImports,
+  isTSWrapper,
+  printString,
+  walk,
+  setImportSpecifiers,
+  staticKey,
+  unwrapExpression,
+  wrapExpression,
+} from 'storybook/internal/csf-tools';
 
 const mockMembers = [
   'mock',
@@ -23,189 +34,178 @@ const mockMembers = [
   'mockRejectedValueOnce',
 ];
 
-function keyName(node: t.Node) {
-  if (t.isIdentifier(node)) {
+// The name a member access or an import specifier spells.
+function nameOf(node: Node) {
+  if (node.type === 'Identifier') {
     return node.name;
   }
-  return t.isStringLiteral(node) ? node.value : undefined;
-}
-
-function withoutDefault(node: t.Node) {
-  return t.isAssignmentPattern(node) ? node.left : node;
+  return node.type === 'Literal' && typeof node.value === 'string' ? node.value : undefined;
 }
 
-function withoutTypeCast(node: t.Node): t.Node {
-  return t.isTSNonNullExpression(node) ||
-    t.isTSAsExpression(node) ||
-    t.isTSSatisfiesExpression(node)
-    ? withoutTypeCast(node.expression)
-    : node;
+function withoutDefault(node: Node) {
+  return node.type === 'AssignmentPattern' ? node.left : node;
 }
 
-function isRender(path: NodePath<t.Function>) {
-  if (path.isObjectMethod()) {
-    return keyName(path.node.key) === 'render';
+function isRender(editor: SourceEditor, fn: Node) {
+  let value = fn;
+  let owner = editor.parentOf(fn);
+  while (owner && isTSWrapper(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 && staticKey(owner) === '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 node = withoutTypeCast(expression);
-    return (
-      isBoundIn(argsObjects, path, node) || (isMember(node) && keyName(node.property) === 'args')
-    );
+  const isArgsObject = (expression: Node) => {
+    const node = unwrapExpression(expression);
+    return isBoundIn(argsObjects, node) || (isMember(node) && nameOf(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' && staticKey(property) === '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(nameOf(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 = unwrapExpression(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;
-      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);
+    } else if (node.type === 'VariableDeclarator') {
+      const { id, init } = node;
+      const value = init && unwrapExpression(init);
+      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'
+      nameOf(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'))
+      insertAfterImports(
+        editor,
+        `import { ${specifier} } from ${printString('storybook/test', editor.quote)};`
       );
     }
   }
 
   for (const target of targets) {
-    target.replaceWith(t.callExpression(t.cloneNode(callee), [target.node]));
+    wrapExpression(editor, target, `${callee}(`, ')');
   }
 }
diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts
index 3cfb6385615f..162958dcf317 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)',
@@ -603,6 +609,9 @@ export const baseTemplates = {
       renderer: '@storybook/svelte',
       builder: '@storybook/builder-vite',
     },
+    modifications: {
+      useCsfFactory: true,
+    },
     skipTasks: ['e2e-tests', 'bench'],
   },
   'svelte-vite/default-ts': {
@@ -613,6 +622,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'],
   },
@@ -625,6 +637,9 @@ export const baseTemplates = {
       renderer: '@storybook/svelte',
       builder: '@storybook/builder-vite',
     },
+    modifications: {
+      useCsfFactory: true,
+    },
     skipTasks: ['e2e-tests', 'bench'],
   },
   'angular-cli/default-ts': {
@@ -1065,7 +1080,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 +1097,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 +1120,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/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__/__snapshots__/upgrade-deprecated-types.test.ts.snap b/code/lib/codemod/src/transforms/__tests__/__snapshots__/upgrade-deprecated-types.test.ts.snap
index a7744d638370..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,11 +3,9 @@
 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.
+Component.stories.tsx: (1:10)
 > 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>
+    |           ^
 `;
 
 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..191541b46ce8 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,16 +11,34 @@ 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', () => {
+  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' })).resolves.toBe(source);
+  });
+
   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`
@@ -60,6 +77,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`
@@ -143,7 +178,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 +261,56 @@ 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`
+          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 +326,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 +344,6 @@ describe('csf-2-to-3', () => {
         `)
       ).resolves.toMatchInlineSnapshot(`
         export default { title: "Cat" };
-
         export const A = {
           render: (args) => <Cat {...args} />,
           parameters: { foo: 2 },
@@ -271,6 +353,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/__tests__/find-implicit-spies.test.ts b/code/lib/codemod/src/transforms/__tests__/find-implicit-spies.test.ts
index d3e83091c1a6..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,24 +49,16 @@ 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();",
+        "Possible implicit spy found
+    Component.stories.tsx: (7:20)
+    > 7 |   await expect(args.onImplicit).toHaveBeenCalled();
+        |                     ^",
       ],
       [
-        "Component.stories.tsx Possible implicit spy found
-      15 |   play: async ({ args }) => {
-      16 |     await userEvent.click(screen.getByRole("button"));
+        "Possible implicit spy found
+    Component.stories.tsx: (17:22)
     > 17 |     await expect(args.onImplicit).toHaveBeenCalled();
-         |                       ^^^^^^^^^^
-      18 |     await expect(args.onClick).toHaveBeenCalled();
-      19 |     await expect(args.onHover).toHaveBeenCalled();
-      20 |     await expect(args.onBla).toHaveBeenCalled();",
+         |                       ^",
       ],
     ]
   `);
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..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
@@ -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', () => {
@@ -89,6 +84,49 @@ 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('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/csf-2-to-3.ts b/code/lib/codemod/src/transforms/csf-2-to-3.ts
index 4fd671098a5f..666311b7576e 100644
--- a/code/lib/codemod/src/transforms/csf-2-to-3.ts
+++ b/code/lib/codemod/src/transforms/csf-2-to-3.ts
@@ -1,28 +1,35 @@
-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,
+  declaratorList,
+  loadCsf,
+  placeableTextOf,
+  printCsf,
+  removeFromList,
+  removeStatement,
+  walk,
+} 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 { 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 = (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 +37,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)}: ${placeableTextOf(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,38 +102,48 @@ 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;
+    if (declaration.declarations.length === 1) {
+      removeStatement(editor, declaration);
+    } else {
+      removeFromList(editor, declaratorList(editor, declaration), [declarator]);
     }
   });
+  editor.commit();
 }
 
-export default async function transform(info: FileInfo, api: API, options: { parser?: string }) {
+export default async function transform(info: TransformFile) {
+  // 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';
   };
-  const csf = loadCsf(info.source, { makeTitle });
+  const csf = loadCsf(info.source, { makeTitle, fileName: info.path });
 
   try {
     csf.parse();
@@ -144,85 +152,63 @@ 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 file: BabelFile = new babel.File(
-    { filename: info.path },
-    { code: info.source, ast: csf._ast }
-  );
+  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 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]);
 
-    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;
+      removeStatement(editor, statement);
     }
+  }
+  editor.commit();
 
-    // replace story exports with new object exports
-    const newExport = getNewExport(statement, objectExports);
-    if (newExport) {
-      acc.push(newExport);
-      return acc;
-    }
-
-    // include unknown statements
-    acc.push(statement);
-    return acc;
-  }, []);
-
-  upgradeDeprecatedTypes(file);
-  importHelper.removeDeprecatedStoryImport();
-  removeUnusedTemplates(csf);
+  upgradeDeprecatedTypes(editor);
+  removeUnusedTemplates(editor, templates);
 
   let output = printCsf(csf).code;
 
@@ -238,155 +224,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);
-  }
+const storyTypes = [
+  'Story',
+  'StoryFn',
+  'StoryObj',
+  'Meta',
+  'ComponentStory',
+  'ComponentStoryFn',
+  'ComponentStoryObj',
+  'ComponentMeta',
+];
 
-  private sbImportDeclarations: NodePath<t.ImportDeclaration>[];
-
-  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)) {
+      if (apply) {
         const localTypeImport = this.getOrAddImport(type);
-        return {
-          ...id,
-          typeAnnotation: t.tsTypeAnnotation(
-            t.tsTypeReference(
-              t.identifier(localTypeImport ?? ''),
-              id.typeAnnotation.typeAnnotation.typeParameters
-            )
-          ),
-        };
+        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..251d5e1c181a 100644
--- a/code/lib/codemod/src/transforms/find-implicit-spies.ts
+++ b/code/lib/codemod/src/transforms/find-implicit-spies.ts
@@ -1,104 +1,75 @@
-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 { 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] : []
-        )
-      );
-    },
+import {
+  type ESTree as E,
+  type ESTreeNode as Node,
+  type SourceEditor,
+  loadCsf,
+  storyShapeError,
+  walk,
+} from 'storybook/internal/csf-tools';
+
+import type { TransformFile } from '../lib/utils.ts';
+
+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('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: TransformFile) {
+  const csf = loadCsf(info.source, { makeTitle: (title) => title, fileName: info.path });
   csf.parse();
+  const editor = csf.editor;
 
   const metaKeys = [
     ...getObjectExpressionKeys(csf._metaAnnotations.args),
@@ -111,55 +82,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, 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, 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..4a77331be7f1 100644
--- a/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts
+++ b/code/lib/codemod/src/transforms/upgrade-deprecated-types.ts
@@ -1,10 +1,17 @@
-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,
+  SourceEditor,
+  removeFromList,
+  specifierList,
+  storyShapeError,
+  walk,
+} 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',
@@ -20,19 +27,12 @@ function migrateType(oldType: string) {
   return oldType.replace('Component', '');
 }
 
-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 }
-  );
+export default async function transform(info: TransformFile) {
+  const editor = new SourceEditor(info.source, info.path);
 
-  upgradeDeprecatedTypes(file);
+  upgradeDeprecatedTypes(editor);
 
-  let output = printCsf(csf).code;
+  let output = editor.toString();
 
   try {
     output = await prettier.format(output, {
@@ -48,100 +48,105 @@ 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;
+    }
+
+    const removed: E.ImportSpecifier[] = [];
+    for (const specifier of specifiers) {
+      if (specifier.type === 'ImportNamespaceSpecifier') {
+        importedNamespaces.add(specifier.local.name);
+      }
+      const imported = importedName(specifier);
+      if (
+        specifier.type !== 'ImportSpecifier' ||
+        !imported ||
+        !deprecatedTypes.includes(imported)
+      ) {
+        continue;
+      }
+      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);
 
-      if (!source.startsWith('@storybook')) {
-        return;
+      // 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 });
+        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
+      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
+      removed.push(specifier);
+    }
+
+    if (removed.length > 0) {
+      removeFromList(editor, specifierList(editor, statement), removed);
+    }
+  }
 
-      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();
-            }
-          }
-        }
-      });
-    },
-  });
-
-  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/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/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..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
@@ -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));
       + "
     `);
@@ -129,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'));
@@ -160,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';
@@ -215,7 +235,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'
@@ -246,11 +265,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;
@@ -432,36 +452,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 8af586c63b0f..cc3a56a76e5d 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,18 @@
 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,
+  insertAfterImports,
+  isStringLiteral,
+  parseModule,
+  prependStatement,
+  walk,
+  wrapExpression,
+} 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 +59,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;
-      }
+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;
     }
-
-    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);
-      }
-    }
-  }
-
-  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) => {
+export const containsStorybookImport = (source: string, filePath: 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, filePath);
+    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 +130,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 +186,19 @@ 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));
-    }
-  }
-};
-
-const injectWithStorybookImport = (program: t.Program, useEsmImport: boolean) => {
+const injectWithStorybookImport = (editor: SourceEditor, 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);
-    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);
+    insertAfterImports(editor, WITH_STORYBOOK_IMPORT);
+  } else {
+    prependStatement(editor, WITH_STORYBOOK_REQUIRE);
   }
-  program.body.splice(insertAt, 0, requireDeclaration);
 };
 
+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 +208,22 @@ 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, filePath);
+  const { program } = editor;
   const withStorybookLocalName = hasWithStorybookBinding(program) ?? 'withStorybook';
   let matchedExport = false;
   let changed = false;
 
+  const wrap = (node: Node) => {
+    wrapExpression(editor, node, `${withStorybookLocalName}(`, ')');
+    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 +233,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 +276,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) => {
@@ -548,7 +400,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/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..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  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.\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 f0598da21000..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   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.\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",
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": {
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"
 }
diff --git a/code/renderers/react/src/componentManifest/buildReactComponentDocgen.ts b/code/renderers/react/src/componentManifest/buildReactComponentDocgen.ts
index 219f566ee209..5086172c3e6c 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 51984e86d47e..6d7667bf34fc 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,8 +23,7 @@ function generateResolved(code: string) {
   return Object.keys(csf._storyExports).map((name) => {
     const snippet = getCodeSnippet(csf, name, csf._meta?.component ?? 'ComponentTitle');
     return {
-      // Recast defaults to `os.EOL`, which would carriage-return snippets built on Windows.
-      snippet: recast.print(snippet.node, { lineTerminator: '\n' }).code,
+      snippet: snippet.code,
       imports: snippet.imports.map((ref) => `${ref.importName} from ${ref.importId}`),
       unresolved: snippet.unresolved,
     };
@@ -109,11 +107,9 @@ test('Edge case identifier we can not find', () => {
   expect(() => generateExample(input)).toThrowErrorMatchingInlineSnapshot(
     `
     [SyntaxError: Expected story to be csf factory, function or an object expression
-      11 |
-      12 |
+    (13:27)
     > 13 |     export const Default = someImportOrWhatever;
-         |                            ^^^^^^^^^^^^^^^^^^^^
-      14 |   ]
+         |                            ^]
   `
   );
 });
@@ -187,14 +183,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', () => {
@@ -259,11 +250,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)', () => {
@@ -438,12 +427,46 @@ test('CustomRenderBlockBody only', async () => {
     };`
   );
   expect(generateExample(input)).toMatchInlineSnapshot(
-    `
-    "const CustomRenderBlockBody = () => {
-        return <Button foo="bar">Render</Button>;
+    `"const CustomRenderBlockBody = () => { return <Button foo="bar">Render</Button> };"`
+  );
+});
+
+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 () => {
@@ -485,15 +508,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)', () => {
@@ -563,11 +580,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>;"
   `
   );
@@ -591,11 +608,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>;"
   `
   );
@@ -616,9 +633,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>;"
   `
   );
@@ -643,12 +660,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>;"
   `
   );
@@ -673,12 +690,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>;"
   `
   );
@@ -698,8 +715,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>;"
   `);
 });
@@ -716,11 +733,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>
+      );
     }"
   `);
 });
@@ -735,7 +752,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>;
     };"
   `);
 });
@@ -849,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' } };
@@ -875,7 +919,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>;
     }"
   `);
 });
@@ -909,7 +953,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>;
     }"
   `);
 });
@@ -920,14 +964,49 @@ 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>;"
+  `
+  );
+});
+
+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 Shorthand = () => <Button
-        cfg={{
-            dep,
+    "const Braces = () => <Button>{'a {b} <c>'}</Button>;
+    const Entity = () => <Button>{'a &amp; b'}</Button>;
+    const Lines = () => <Button>{'a\\nb'}</Button>;"
+  `);
+});
 
-            nested: {
-                size: 'md'
-            }
-        }}>Click me</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 c64be265a935..f70ff73c9acb 100644
--- a/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
+++ b/code/renderers/react/src/componentManifest/generateCodeSnippet.ts
@@ -1,30 +1,40 @@
-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,
+  textOf,
+  collectImportBindings,
+  createStoryArgsResolver,
   isCanonicalCsf2BindCall,
-  metaObjectPath,
+  isStringLiteral,
+  lineIndent,
+  metaObject,
   normalizeStoryDeclaration,
-  type ReferenceContext,
-  type RenderResolution,
+  parseModule,
+  placeableTextOf,
+  reindent,
   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 +51,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()) {
+  args: Args
+): { code: string; importRef: ImportRef } | undefined {
+  const declaration = csf._storyExports[storyName];
+  if (declaration?.type !== 'VariableDeclarator' || !isCanonicalCsf2BindCall(declaration.init)) {
     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()) {
-    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)}: ${placeableTextOf(value)}`
+  );
+  const argsObject = values.length ? `{\n${values.join(',\n')}\n}` : '{}';
   return {
-    node,
+    code: `const ${storyName} = () => ${textOf(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 +148,104 @@ 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),
-        ]);
-      }
-    }
+    return functionSnippet(
+      editor.code,
+      storyName,
+      storyFn,
+      isMethod(editor.parentOf(storyFn)),
+      merged
+    );
+  }
 
-    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;
-      });
+  // No function: synthesize `<Component {...attrs}/>`
+  invariant(componentName, 'Could not generate snippet without component name.');
+  const attrs = injectedAttributes(merged, new Set());
+  const children = toJsxChildren(merged.children);
+  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');
 
-      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)
-              ),
-            ]);
+// 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(`${asyncPrefix}() => (${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 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};`;
+    }
+  }
 
-    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
-          ),
-        ]);
+  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, [])};`;
+}
 
-  // 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 isJsx = (node: Node | null | undefined): node is E.JSXElement | E.JSXFragment =>
+  node?.type === 'JSXElement' || node?.type === 'JSXFragment';
 
-  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
-    )
-  );
-
-  return t.variableDeclaration('const', [t.variableDeclarator(t.identifier(storyName), arrow)]);
-}
+// 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);
 
-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 : [];
+  return reindent(text, lineIndent(code, range.start), '');
 }
 
-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 +253,141 @@ 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));
+  // 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)}}`;
+};
 
-  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)}: ${placeableTextOf(v)}`);
+    attrs.push(`{...{ ${members.join(', ')} }}`);
   }
-  return null;
-};
+  return attrs;
+}
 
-const toJsxChildren = (node: t.Node | null | undefined) =>
+// JSX text cannot hold braces or tags, decodes entities and folds line breaks.
+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) && !/[{}<>&\r\n]/.test(node.value)
+      ? node.value
+      : isJsx(node)
+        ? textOf(node)
+        : `{${placeableTextOf(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 !== null && Object.hasOwn(merged, key)) {
+        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..3adc8bda4589 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,
             },
             {
@@ -295,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 {
@@ -325,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',
@@ -374,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",
@@ -468,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",
@@ -496,10 +492,9 @@ test('component exported from other file', async () => {
         {
           "error": {
             "message": "Expected story to be a function or variable declaration
-       9 | export default meta;
-      10 |
+    /app/src/stories/Button.stories.tsx: (11:0)
     > 11 | export { Primary } from './other-file';
-         | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^",
+         | ^",
             "name": "SyntaxError",
           },
           "id": "example-button--primary",
@@ -523,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",
@@ -551,10 +546,9 @@ test('unknown expressions', async () => {
         {
           "error": {
             "message": "Expected story to be csf factory, function or an object expression
-       9 | export default meta;
-      10 |
+    /app/src/stories/Button.stories.tsx: (11:23)
     > 11 | export const Primary = someWeirdExpression;
-         |                        ^^^^^^^^^^^^^^^^^^^",
+         |                        ^",
             "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..8c98a0a8da5d 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 3a3f12d7af25..78c917126f9a 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,
@@ -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);
@@ -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,8 +184,7 @@ export function extractStorySnippets(
         return {
           id: story.id,
           name,
-          // Recast defaults to `os.EOL`, which would carriage-return snippets built on Windows.
-          snippet: recast.print(snippet.node, { lineTerminator: '\n' }).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..4738f24fbaaa 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);
diff --git a/code/renderers/react/src/preset.test.ts b/code/renderers/react/src/preset.test.ts
index 2f71d5916fa0..d466d6360c06 100644
--- a/code/renderers/react/src/preset.test.ts
+++ b/code/renderers/react/src/preset.test.ts
@@ -15,6 +15,12 @@ describe('optimizeViteDeps', () => {
     expect(optimizeViteDeps).toContain('react-dom/test-utils');
   });
 
+  it('includes react', () => {
+    // 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');
+  });
+
   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..76f01e483eb4 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 {
@@ -76,23 +77,51 @@ 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;
   }
 };
 
+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
@@ -146,6 +175,15 @@ 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'".
+  // 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',
   'react/jsx-runtime',
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..1d24f4ab475f
--- /dev/null
+++ b/code/renderers/react/src/preview-react-alias.test.ts
@@ -0,0 +1,88 @@
+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({
+      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('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);
+    expect(config.plugins?.[0]).toMatchObject({ name: 'storybook:react-dedupe', enforce: 'pre' });
+    expect(config.plugins?.[1]).toBe(later);
+  });
+
+  it('exposes the alias through the vite plugin config hook', () => {
+    expect(reactDedupeVitePlugin(target).config().resolve.alias).toEqual(reactViteAlias(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..38e536473fcb
--- /dev/null
+++ b/code/renderers/react/src/preview-react-alias.ts
@@ -0,0 +1,75 @@
+import { isAbsolute } from 'pathe';
+
+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,
+});
+
+// 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: reactViteAlias(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/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/__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/__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();
+});
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/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/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/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/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..52d1b7c868aa
--- /dev/null
+++ b/code/renderers/svelte/src/__test__/svelte-csf-factories/svelte-csf-factories.test.ts
@@ -0,0 +1,52 @@
+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 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';
+import * as TypeAfterMetaStories from './type-after-meta.stories.svelte';
+
+afterEach(() => {
+  cleanup();
+});
+
+const files = {
+  ButtonStories,
+  GenericComponentStories,
+  InteractionsStories,
+  MetaTypeStories,
+  TemplatingStories,
+  TypeAfterMetaStories,
+};
+
+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('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>;
+
+  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-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/__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/__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..b9a0faf3e7a3
--- /dev/null
+++ b/code/renderers/svelte/src/__test__/svelte-csf-factories/type-checks.svelte
@@ -0,0 +1,123 @@
+<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';
+  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 })}
+  <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' }} />
+
+<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}
+<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/csf-factories.test.ts b/code/renderers/svelte/src/csf-factories.test.ts
new file mode 100644
index 000000000000..8e5232f1afcd
--- /dev/null
+++ b/code/renderers/svelte/src/csf-factories.test.ts
@@ -0,0 +1,585 @@
+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 Counter from './__test__/Counter.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('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 }) {
+        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/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;
     }
 
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..7ced4f3afec0
--- /dev/null
+++ b/code/renderers/svelte/src/preview.ts
@@ -0,0 +1,227 @@
+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,
+  StoryContext,
+} from 'storybook/internal/types';
+
+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';
+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>> {
+  const preview = definePreviewBase({
+    ...input,
+    addons: [svelteAnnotations, svelteDocsAnnotations, ...(input.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.
+// 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> extends Record<string, never>
+        ? {}
+        : 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.
+ */
+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?: MetaRender<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?: MetaRender<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> {
+  /** 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
+      | (() => 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> {}
+
+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.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/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/compiler/post-transform/index.test.ts b/code/renderers/svelte/src/svelte-csf/compiler/post-transform/index.test.ts
index 5e8c053feb24..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
@@ -331,3 +331,472 @@ 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('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).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('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('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 };"
+    `);
+  });
+
+  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/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/compiler/vitest-transform.test.ts b/code/renderers/svelte/src/svelte-csf/compiler/vitest-transform.test.ts
new file mode 100644
index 000000000000..eb39f514aeff
--- /dev/null
+++ b/code/renderers/svelte/src/svelte-csf/compiler/vitest-transform.test.ts
@@ -0,0 +1,129 @@
+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" }));
+      }
+      "
+    `);
+  });
+
+  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 ba9b10a42b85..faa8793cf64e 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 }) => {
@@ -175,4 +177,200 @@ 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;`,
+      ],
+      [
+        'preview.type<>().meta()',
+        `import preview from '#.storybook/preview';
+        const { Story } = preview
+          .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 } }>();`,
+      ],
+    ])('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('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';
+        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 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 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';
+        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/indexer/parser.ts b/code/renderers/svelte/src/svelte-csf/indexer/parser.ts
index c550dc1d3d41..02167f013da9 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';
@@ -15,6 +15,7 @@ import {
   DefaultOrNamespaceImportUsedError,
   GetDefineMetaFirstArgumentError,
   MissingDefineMetaImportError,
+  MissingDefineMetaVariableDeclarationError,
   MissingModuleTagError,
   NoStoryComponentDestructuredError,
 } from '../utils/error/parser/extract/svelte.ts';
@@ -56,11 +57,12 @@ export async function parseForIndexer(filename: string): Promise<Results> {
 
   const svelteAST = getIndexableAST(code, filename);
   const results: Results & {
-    defineMetaImport?: ESTreeAST.ImportSpecifier;
-    defineMetaStory?: ESTreeAST.Identifier;
+    hasMetaImport?: boolean;
+    storyNames: string[];
   } = {
     meta: {},
     stories: [],
+    storyNames: [],
   };
 
   let hasDefaultOrNamespaceImport = false;
@@ -93,64 +95,48 @@ 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) {
+        if (state.hasMetaImport) {
+          throw new MissingDefineMetaVariableDeclarationError(filename);
         }
+        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.storyNames.length === 0) {
+        throw new NoStoryComponentDestructuredError({
+          filename,
+          metaFunctionName: meta.functionName,
+        });
+      }
+
+      state.storyNames = meta.storyNames;
+
+      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;
@@ -200,7 +186,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'],
@@ -249,7 +235,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/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..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
@@ -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>
@@ -32,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' },
+      });
     }
   );
 
@@ -47,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 }) => {
@@ -65,8 +67,48 @@ 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
       ]
     `);
   });
+  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.storyNames).toEqual(['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.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/compiled/nodes.ts b/code/renderers/svelte/src/svelte-csf/parser/extract/compiled/nodes.ts
index 351c4b6f4d1f..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
@@ -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,36 +18,32 @@ 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.
    */
   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.
    */
   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.storyNames.length === 0) {
     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,
+    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/define-meta.ts b/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/define-meta.ts
index afc814d99c43..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';
@@ -42,22 +43,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;
+  const init = declaration.init && skipTypeCalls(declaration.init);
 
   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/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.test.ts b/code/renderers/svelte/src/svelte-csf/parser/extract/svelte/module-nodes.test.ts
index 6b0b6d30c466..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
@@ -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 }) => {
@@ -17,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";
@@ -26,8 +25,9 @@ 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${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
       ]
     `);
   });
@@ -39,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:
 
@@ -50,8 +50,9 @@ 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${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
       ]
     `);
   });
@@ -67,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>
@@ -77,8 +78,9 @@ 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${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
       ]
     `);
   });
@@ -94,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>
@@ -104,8 +106,9 @@ 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${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
       ]
     `);
   });
@@ -147,11 +150,10 @@ 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.storyIdentifier).toBeDefined();
-    expect(nodes.storyIdentifier.name).toBe('Story');
+    expect(nodes.defineMetaVariableDeclaration.declarations[0].init).toMatchObject({
+      callee: { name: 'defineMeta' },
+    });
+    expect(nodes.storyNames).toEqual(['Story']);
   });
 
   it('extracts module nodes with renamed identifiers', async ({ expect }) => {
@@ -166,9 +168,11 @@ 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');
+    expect(nodes.storyNames).toEqual(['S']);
   });
 
   it.for(SVELTE_CSF_IMPORT_SOURCES)(
@@ -185,7 +189,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' },
+      });
     }
   );
 
@@ -203,7 +209,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 }) => {
@@ -219,7 +227,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 }) => {
@@ -235,7 +245,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 }) => {
@@ -257,9 +269,210 @@ 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
         ]
       `);
     });
   });
+  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.storyNames).toEqual(['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.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 }) => {
+      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.storyNames).toEqual(['Story']);
+    });
+  });
 });
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..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
@@ -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,28 +8,23 @@ 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.
+   * 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 {
@@ -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.storyNames.length === 0) {
+    throw new NoStoryComponentDestructuredError({
+      filename,
+      metaFunctionName: meta.functionName,
+    });
   }
 
   return {
-    defineMetaImport,
-    defineMetaVariableDeclaration,
-    storyIdentifier,
+    isFactory: meta.isFactory,
+    defineMetaVariableDeclaration: meta.declaration,
+    metaIdentifier: meta.metaIdentifier,
+    storyNames: meta.storyNames,
   };
 }
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 6268f43f4b5c..ae53c46806ec 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';
 
 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;
+    }
+
+    if (!isSvelteCsfImportSource(source.value)) {
       continue;
     }
 
-    for (const specifier of statement.specifiers) {
+    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,151 @@ 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({ … }).type<…>()`, or
+// `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;
+  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;
+  // The names of the `Story` components. They can be renamed: `const { Story: S } = …`
+  storyNames: string[];
+}
+
+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: initWithTypeCalls } = statement.declarations[0];
+    const init = initWithTypeCalls && skipTypeCalls(initWithTypeCalls);
+    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,
+        storyNames: findStoryNames(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));
+        }
+      }
+    }
+  }
+
+  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.property.type !== 'Identifier' ||
+    callee.property.name !== 'meta'
+  ) {
+    return undefined;
+  }
+
+  const object = skipTypeCalls(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 (object.name === 'preview') {
+    throw new PreviewNotImportedError(filename);
+  }
+
+  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`
+export 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;
+  }
+
+  return current;
+}
+
+function findStoryNames(id: ESTreeAST.Pattern): string[] {
+  if (id.type !== 'ObjectPattern') {
+    return [];
+  }
+
+  return id.properties.flatMap((property) =>
+    property.type === 'Property' &&
+    property.key.type === 'Identifier' &&
+    property.key.name === 'Story' &&
+    property.value.type === 'Identifier'
+      ? [property.value.name]
+      : []
+  );
+}
diff --git a/code/renderers/svelte/src/types.ts b/code/renderers/svelte/src/types.ts
index 24e45f7fdbf4..4b197ea5c2eb 100644
--- a/code/renderers/svelte/src/types.ts
+++ b/code/renderers/svelte/src/types.ts
@@ -17,6 +17,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,
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>
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/**/*",
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..5a1c98f762d2 100644
--- a/code/renderers/svelte/vitest.config.ts
+++ b/code/renderers/svelte/vitest.config.ts
@@ -1,16 +1,19 @@
 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()),
     ],
     test: {
       environment: 'happy-dom',
+      setupFiles: ['./vitest-setup.ts'],
     },
   })
 );
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..f71a335df94b 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';
 
@@ -119,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),
@@ -143,8 +147,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 +175,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..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,8 +1,13 @@
 import { describe, expect, it } from 'vitest';
 
-import { babelParse, types as t } from 'storybook/internal/babel';
+import { parseExpression } 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 = parseExpression;
diff --git a/code/renderers/vue3/src/docgen/shared/classify-value.ts b/code/renderers/vue3/src/docgen/shared/classify-value.ts
index e65b6476b712..20842af419e1 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,
+  textOf,
+  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 = textOf(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..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
@@ -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,
-  keyOf,
+  jsDocTagsForNode,
+  staticKey,
   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';
@@ -142,12 +141,12 @@ 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;
   }
 
-  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,12 +171,11 @@ export async function buildStoryDocsPayload(
   const extracted = extractStories(csf, {
     snippet,
     importBindings,
-    metaPath,
     resolver: createStoryArgsResolver(csf, {
       filePath: storyPath,
       ...(context.references ?? openStoryReferences()),
     }),
-    source: storyFile,
+    source: csf._code,
   });
 
   return {
@@ -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,12 +490,12 @@ 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);
+    const key = staticKey(property);
     return key === 'setup' || key === 'components' || key === 'inheritAttrs';
   });
   if (!supported) {
@@ -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' && staticKey(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..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,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { babelParse, types as t } from 'storybook/internal/babel';
+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';
@@ -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 = parseExpression(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 = staticKey(property);
+      if (name === undefined) {
+        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..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
@@ -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..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
@@ -1,9 +1,13 @@
-import { types as t } from 'storybook/internal/babel';
 import {
-  keyOf,
+  type ESTree as E,
+  type ESTreeNode as Node,
+  type ImportBinding,
+  textOf,
+  isStringLiteral,
+  staticKey,
   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,18 +324,18 @@ 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;
     }
 
-    const name = keyOf(property);
+    const name = staticKey(property);
     if (!name) {
       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,15 +471,15 @@ 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;
     }
 
-    const name = keyOf(property);
+    const name = staticKey(property);
     const slotFunction = unwrapExpression(property.value);
     if (!name || !isFunctionExpression(slotFunction)) {
       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 = textOf(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..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
@@ -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,
+  staticKey,
+  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 key = staticKey(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..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 { babelParse, types as t } from 'storybook/internal/babel';
+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';
 
@@ -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';
@@ -498,6 +496,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 = {
@@ -1703,7 +1736,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 +1848,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 }}');
   });
 
@@ -1833,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'`)]);
 
@@ -1850,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 {
@@ -1879,11 +1925,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 parseExpression(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..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
@@ -7,12 +7,17 @@ import {
   type TemplateChildNode,
 } from '@vue/compiler-dom';
 
-import { babelParseExpression, types as t } from 'storybook/internal/babel';
 import {
-  keyOf,
+  type ESTree as E,
+  type ESTreeNode as Node,
+  type ImportBinding,
+  isStringLiteral,
+  staticKey,
+  normalizeLineEndings,
+  parseModule,
   propertyValue,
   unwrapExpression,
-  type ImportBinding,
+  walk,
 } from 'storybook/internal/csf-tools';
 
 import type { ClassifiedArg } from '../classify-args/classify-args.ts';
@@ -139,7 +144,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 {
@@ -199,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;
   }
@@ -213,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)) {
@@ -234,7 +241,7 @@ export function transformTemplate(
 
   return {
     snippet: renderPreparedSfcSnippet({
-      templateCode: applyEdits(input.template, state.edits),
+      templateCode: applyEdits(template, state.edits),
       ctx: state.ctx,
     }),
   };
@@ -279,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;
@@ -636,10 +642,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 +722,71 @@ 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;
+  // 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 === 0
+  ) {
+    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 +800,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 +823,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(
@@ -861,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 };
 }
@@ -888,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.
  *
@@ -1037,25 +1058,25 @@ 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;
     }
 
-    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'
@@ -1065,7 +1086,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 +1097,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 tagName = staticKey(property);
     const component = unwrapExpression(property.value);
-    if (!tagName || !t.isIdentifier(component)) {
+    if (!tagName || component.type !== 'Identifier') {
       return undefined;
     }
 
@@ -1106,13 +1127,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' && staticKey(property) === SETUP_PROPERTY
+  );
 }
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..a05be63d0146 100644
--- a/code/renderers/web-components/src/bind-args.test.ts
+++ b/code/renderers/web-components/src/bind-args.test.ts
@@ -8,13 +8,35 @@ 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',
+    'name',
+  ];
+
+  defaultValue = '';
 
   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';
+
+  value = '';
 }
 
 if (!customElements.get(X_DEMO_TAG)) {
@@ -65,10 +87,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>',
-      expectedProperties: { text: '' },
+    },
+    {
+      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: { customValue: undefined },
     },
     {
       name: 'assigns unknown arg keys as properties',
@@ -100,15 +143,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',
@@ -116,6 +164,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..684ebcf81687 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,12 +19,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; `-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[] = [];
 
   for (const [key, value] of Object.entries(args)) {
+    if (value === undefined || value === null) {
+      continue;
+    }
+
     const parsedKey = parseArgKey(key);
 
     if (parsedKey?.category === 'cssProperties') {
@@ -34,8 +41,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 +79,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/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);
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 4613756bec60..0aa513fe0794 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
@@ -207,6 +207,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 79218acc84e6..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
@@ -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 'pathe';
@@ -61,6 +64,14 @@ export async 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}\``,
@@ -74,7 +85,7 @@ export async 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/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/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..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
@@ -43,6 +43,56 @@ 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 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);
   });
@@ -68,13 +118,47 @@ 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 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') };`,
+      { 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..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
@@ -1,45 +1,127 @@
-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 ESTree,
+  type ESTreeNode,
+  type ReferenceContext,
+  type ResolvedMembers,
+  isStringLiteral,
+  loadCsf,
+  oneLineTextOf,
+  resolveBindingMembers,
+  resolveObjectMembers,
+  unwrapExpression,
+} from 'storybook/internal/csf-tools';
 
 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 {
     const source = readFileSync(storyFilePath, 'utf8');
-    return loadCsf(source, { makeTitle: () => title }).parse();
+    return loadCsf(source, { makeTitle: () => title, fileName: storyFilePath }).parse();
   } catch {
     return undefined;
   }
 }
 
-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) };
 }
 
+/**
+ * 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) {
+  if (!csf._metaNode) {
     return { reason: 'no-meta-component' };
   }
+  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' }
+  );
+}
+
+/** The last write of `component`, or `undefined` when nothing knowably writes it. */
+function componentIn(
+  csf: CsfFile,
+  members: ResolvedMembers,
+  object: ESTree.ObjectExpression,
+  ctx: ReferenceContext,
+  visited: Set<ESTree.ObjectExpression>
+): WebComponentsComponentResolution | undefined {
+  const component = members.properties.component;
+  if (component && !members.shadowed.includes('component')) {
+    return tagFromNode(csf, 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 ESTree.SpreadElement => property.type === 'SpreadElement')
+    .filter((spread) => members.unresolved.includes(oneLineTextOf(spread)))
+    .reverse();
+  for (const spread of unreadable) {
+    const found = spreadComponent(csf, spread, ctx, visited);
+    if (found || component) {
+      return found ?? { reason: 'unresolvable-meta-spread', spread: oneLineTextOf(spread) };
+    }
+  }
+  return component && tagFromNode(csf, component);
+}
+
+function spreadComponent(
+  csf: CsfFile,
+  spread: ESTree.SpreadElement,
+  ctx: ReferenceContext,
+  visited: Set<ESTree.ObjectExpression>
+): WebComponentsComponentResolution | undefined {
+  const local = localObject(unwrapExpression(spread.argument), ctx);
+  if (!local || visited.has(local.object)) {
+    return { reason: 'unresolvable-meta-spread', spread: oneLineTextOf(spread) };
+  }
+  return componentIn(csf, local.members, local.object, ctx, new Set(visited).add(local.object));
+}
 
-  return tagFromNode(component);
+/** The object literal a spread argument writes out or names, with the members it resolves to. */
+function localObject(
+  argument: ESTreeNode,
+  ctx: ReferenceContext
+): { object: ESTree.ObjectExpression; members: ResolvedMembers } | undefined {
+  if (argument.type === 'ObjectExpression') {
+    return { object: argument, members: resolveObjectMembers(argument, ctx) };
+  }
+  if (argument.type !== 'Identifier') {
+    return undefined;
+  }
+  const declarator = ctx.editor.scopes.program.bindings.get(argument.name)?.node;
+  const init =
+    declarator?.type === 'VariableDeclarator' && 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 init?.type === 'ObjectExpression' && members ? { object: init, members } : undefined;
 }
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..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,7 +1,7 @@
-import { babelParseExpression } from 'storybook/internal/babel';
-
 import { describe, expect, it } from 'vitest';
 
+import { parseExpression } 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(parseExpression(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..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,42 +1,59 @@
-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,
+  staticKey,
+  oneLineTextOf,
+  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) };
+      : { kind: 'unresolved', source: oneLineTextOf(node) };
   }
   if (value === undefined) {
     return { kind: 'unset' };
   }
   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,15 +80,20 @@ 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);
+    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.test.ts b/code/renderers/web-components/src/docgen/story-docs/build-story-docs.test.ts
index 7edaa29c84a5..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
@@ -327,7 +327,35 @@ describe('buildStoryDocsPayload', () => {
 <script>
   {
     const host = document.currentScript.previousElementSibling;
-    host.addEventListener('shape-change', event => event.preventDefault());
+    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>`,
       },
@@ -367,7 +395,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..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
@@ -1,14 +1,19 @@
-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,
-  sourceOf,
+  resolveEffectiveRender,
+  oneLineTextOf,
   unwrapExpression,
   unresolvedWarning,
 } from 'storybook/internal/csf-tools';
@@ -22,13 +27,13 @@ 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 { handlerText } from './template-holes.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 +151,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 +227,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 +245,7 @@ const renderedArgsSnippet = (
         ...joinWarnings(hasSnippet ? warnings : [...warnings, noSnippetWarning(unresolved)]),
       };
     }
-    warnings.push(unresolvedWarning([sourceOf(render.path.node)]));
+    warnings.push(unresolvedWarning([oneLineTextOf(render.node)]));
   } else if (render.kind === 'unresolved') {
     warnings.push(unresolvedWarning(unresolvedRenderSource(render, resolved)));
   }
@@ -258,7 +266,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 +283,12 @@ const unresolvedRenderSource = (
   const node =
     resolved.storyMembers.properties.render ??
     resolved.metaMembers.properties.render ??
-    render.shadowedRender?.node;
-  return node ? [sourceOf(node)] : [];
+    render.shadowedRender;
+  return node ? [oneLineTextOf(node)] : [];
 };
 
 const argsSnippet = (
-  args: Record<string, t.Node>,
+  args: Record<string, Node>,
   declaration: ManifestDeclaration,
   argTypes: WebComponentsDocgenPayload['argTypes'],
   tag: string,
@@ -427,10 +435,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)) ? handlerText(node) : '() => {}';
 
 const incompleteList = (names: string[], suffix: string): string | undefined =>
   names.length === 0
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;
 };
 
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..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,8 +1,13 @@
-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 {
+  oneLineTextOf,
+  reindent,
+  textOf,
+  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,
@@ -10,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 }
@@ -21,24 +34,25 @@ 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));
+    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;
@@ -48,20 +62,24 @@ export const resolveHoleValue = (expression: t.Expression, context: HoleContext)
   if (isStaticLiteral(unwrapped)) {
     return { kind: 'value', value: literalValue(unwrapped) };
   }
-  if (t.isFunction(unwrapped)) {
-    return { handler: sourceOf(expression), kind: 'function' };
+  if (isFunctionNode(unwrapped)) {
+    return {
+      handler: handlerText(expression),
+      kind: 'function',
+      source: oneLineTextOf(expression),
+    };
   }
   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] 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;
@@ -73,40 +91,17 @@ export const resolveHoleValue = (expression: t.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: 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);
-      }
+  walk(expression, (node, parent) => {
+    if (isStaticName(node, parent)) {
+      return false;
     }
-
-    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);
-      }
-    }
-  };
-
-  visit(expression);
+    referencedArgsForExpression(node, scope).forEach((arg) => referenced.add(arg));
+  });
   return referenced;
 };
 
@@ -139,14 +134,14 @@ 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 };
   }
   const value = evaluateArgValue(node);
   switch (value.kind) {
     case 'function':
-      return { handler: sourceOf(node), kind: 'function', arg };
+      return { handler: handlerText(node), kind: 'function', arg, source: oneLineTextOf(node) };
     case 'unset':
       return { kind: 'value', arg, value: undefined };
     case 'unresolved':
@@ -177,7 +172,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 +200,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,68 +232,51 @@ 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);
   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);
@@ -310,7 +286,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.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..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
@@ -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,42 @@ 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: [],
+      },
+    },
+    {
+      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: [],
@@ -1096,19 +1122,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..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 { types as t } from 'storybook/internal/babel';
-import { sourceOf } from 'storybook/internal/csf-tools';
+import type { ESTree as E, ESTreeNode as Node } 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';
@@ -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) {
@@ -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') {
@@ -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);
@@ -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));
     }
   }
 };
@@ -382,8 +382,8 @@ 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)
-    .map(sourceOf)
+    .filter((expression): expression is E.Expression => expression !== undefined)
+    .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 11aa3610f354..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
@@ -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,
-  keyOf,
-  returnedExpressionPath,
-  sourceOf,
+  isStringLiteral,
+  staticKey,
+  returnedExpression,
+  oneLineTextOf,
   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,91 +52,92 @@ 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: [],
       lit: false,
       quasis: [expression.value],
       scope,
-      source: sourceOf(expression),
+      source: oneLineTextOf(expression),
     };
   }
-  if (t.isTemplateLiteral(expression)) {
-    return templateFromLiteral(expression, bindings, false, scope, sourceOf(expression));
+  if (expression.type === 'TemplateLiteral') {
+    return templateFromLiteral(expression, bindings, false, scope, oneLineTextOf(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) ||
     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;
 }
 
 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,45 +208,45 @@ 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 };
+    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;
 };
 
 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 = staticKey(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;
 };
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": []
 }
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,
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/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-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-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-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/_snippets/web-components-story-snippet-args.md b/docs/_snippets/web-components-story-snippet-args.md
new file mode 100644
index 000000000000..d8f5f379de21
--- /dev/null
+++ b/docs/_snippets/web-components-story-snippet-args.md
@@ -0,0 +1,80 @@
+```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 {
+  component: 'lit-slots-and-css',
+};
+
+export const Basic = {
+  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 3"
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+
+import './lit-slots-and-css';
+
+const meta = {
+  component: 'lit-slots-and-css',
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    heading: 'Hello',
+    '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..de170a5716cc
--- /dev/null
+++ b/docs/_snippets/web-components-story-snippet-listeners.md
@@ -0,0 +1,68 @@
+```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 {
+  component: 'lit-events',
+};
+
+export const WithListener = {
+  args: {
+    value: 'changed',
+    'my-change-event': () => {},
+  },
+};
+```
+
+```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';
+
+const meta = {
+  component: 'lit-events',
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+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
new file mode 100644
index 000000000000..3dcaae3092ef
--- /dev/null
+++ b/docs/_snippets/web-components-story-snippet-template.md
@@ -0,0 +1,89 @@
+```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';
+
+export default {
+  component: 'lit-slots-and-css',
+};
+
+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: 'Hello',
+  },
+};
+```
+
+```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';
+
+import './lit-slots-and-css';
+
+const meta = {
+  component: 'lit-slots-and-css',
+} satisfies Meta;
+
+export default meta;
+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>`,
+  args: {
+    heading: 'Hello',
+  },
+};
+```
diff --git a/docs/_snippets/web-components-vite-framework-options.md b/docs/_snippets/web-components-vite-framework-options.md
index ea3cf5e1be42..9074d294e1ea 100644
--- a/docs/_snippets/web-components-vite-framework-options.md
+++ b/docs/_snippets/web-components-vite-framework-options.md
@@ -3,7 +3,7 @@ export default {
   framework: {
     name: '@storybook/web-components-vite',
     options: {
-      // ...
+      customElementsManifest: '../custom-elements.json',
     },
   },
 };
@@ -16,7 +16,7 @@ const config: StorybookConfig = {
   framework: {
     name: '@storybook/web-components-vite',
     options: {
-      // ...
+      customElementsManifest: '../custom-elements.json',
     },
   },
 };
@@ -31,7 +31,7 @@ export default defineMain({
   framework: {
     name: '@storybook/web-components-vite',
     options: {
-      // ...
+      customElementsManifest: '../custom-elements.json',
     },
   },
 });
@@ -46,7 +46,7 @@ export default defineMain({
   framework: {
     name: '@storybook/web-components-vite',
     options: {
-      // ...
+      customElementsManifest: '../custom-elements.json',
     },
   },
 });
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/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/frameworks/web-components-vite.mdx b/docs/get-started/frameworks/web-components-vite.mdx
index 89239328839b..fbe5a5d2c782 100644
--- a/docs/get-started/frameworks/web-components-vite.mdx
+++ b/docs/get-started/frameworks/web-components-vite.mdx
@@ -40,6 +40,75 @@ To build Storybook, run:
 
 You will find the output in the configured `outputDir` (default is `storybook-static`).
 
+## 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. This needs the [`docgenServer`](../../api/main-config/main-config-features.mdx) feature, which is on by default.
+
+### Writing stories
+
+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                                                          |
+| ------------------- | ----------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------- |
+| 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                                         |
+| CSS custom property | `--<name>`                                            | `'--panel-color': 'teal'`                    | `style="--panel-color: teal"`                                   |
+
+To write the markup yourself, add a `render` function that returns a Lit `html` template:
+
+<CodeSnippets path="web-components-story-snippet-template.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, as will agents using the Storybook's [AI tools](../../ai/index.mdx). The build does not fail.
+
+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](../../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>
+  lit-slots-and-css::part(panel) {
+    color: rebeccapurple;
+  }
+</style>
+<lit-slots-and-css heading="Hello" style="--slot-panel-color: teal;">
+  Body <b>text</b>
+  <button slot="actions">Confirm</button>
+</lit-slots-and-css>
+```
+
+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.
+
+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
+
+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-vite-framework-options.md" />
+
+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.
+
 ## FAQ
 
 ### How do I use Stencil with static Storybook builds?
@@ -80,6 +149,14 @@ You can pass an options object for additional configuration if needed:
 
 The available options are:
 
+#### `customElementsManifest`
+
+Type: `string | string[]`
+
+Default: The `customElements` field in your `package.json`. If that field does not exist, Storybook reads all elements from your source code.
+
+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`
 
 Type: `Record<string, any>`
diff --git a/docs/get-started/install.mdx b/docs/get-started/install.mdx
index cd93584097bf..5714a6654a93 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',
   }}
 >
@@ -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,75 @@ You can also develop or build your Storybook in ["preview-only" mode](../sharing
 
 </details>
 
+## Package manager release delays
+
+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.
+
+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.
+
+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 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 the `pnpm_config_minimum_release_age` environment variable as the `minimumReleaseAge` setting:
+
+```bash
+pnpm_config_minimum_release_age=0 pnpm dlx storybook@latest upgrade
+```
+
+</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 title=".yarnrc.yml"
+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.
+
+</details>
+
+<details>
+<summary>npm</summary>
+
+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/*
+```
+
+</details>
+
+<details>
+<summary>Bun</summary>
+
+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 title="bunfig.toml"
+[install]
+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:
@@ -167,6 +238,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+ 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.
+
 #### 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',
   }}
 >
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">
diff --git a/scripts/ecosystem-ci/before-test.js b/scripts/ecosystem-ci/before-test.js
index d32dea940a88..2744e8a0e06c 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.ts';
 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.test.ts b/scripts/ecosystem-ci/disable-npm-minimal-age-gate.test.ts
new file mode 100644
index 000000000000..602519dc2f85
--- /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.ts';
+
+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');
+  });
+});
diff --git a/scripts/ecosystem-ci/disable-npm-minimal-age-gate.ts b/scripts/ecosystem-ci/disable-npm-minimal-age-gate.ts
new file mode 100644
index 000000000000..1100f6cf042d
--- /dev/null
+++ b/scripts/ecosystem-ci/disable-npm-minimal-age-gate.ts
@@ -0,0 +1,29 @@
+import { readFile, writeFile } from 'node:fs/promises';
+import { join } from 'pathe';
+
+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: string) {
+  const configPath = join(sandboxDir, '.yarnrc.yml');
+
+  let content = '';
+  try {
+    content = await readFile(configPath, 'utf-8');
+  } catch (error) {
+    if (!isEnoent(error)) {
+      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);
+}
+
+function isEnoent(error: unknown): error is NodeJS.ErrnoException {
+  return error instanceof Error && 'code' in error && error.code === 'ENOENT';
+}
diff --git a/scripts/tasks/sandbox-parts.test.ts b/scripts/tasks/sandbox-parts.test.ts
index 8397f369a6aa..243229a382c1 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;
@@ -135,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');
@@ -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 46b545ff929d..2edc0c930ab5 100644
--- a/scripts/tasks/sandbox-parts.ts
+++ b/scripts/tasks/sandbox-parts.ts
@@ -14,11 +14,24 @@ 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,
+  appendToList,
+  argumentList,
+  readConfig as csfReadConfig,
+  insertAfterImports,
+  objectList,
+  parseExpression,
+  staticKey,
+  textOf,
+  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 +109,51 @@ async function pathExists(path: string) {
   }
 }
 
-const propKey = (p: t.ObjectProperty) => {
-  if (t.isIdentifier(p.key)) {
-    return p.key.name;
-  }
-
-  if (t.isStringLiteral(p.key)) {
-    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 editor = config.editor;
   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) => staticKey(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);
+    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 {
-    existingField.value = makeObjectExpression(rest, expr);
+    editor.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 +172,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 +183,29 @@ function setPluginParam(
     );
   }
 
+  const valueNode = config.valueToNode(paramValue);
+  if (!valueNode) {
+    throw new Error(`Unexpected value ${JSON.stringify(paramValue)}`);
+  }
+  const value = textOf(valueNode);
+
   if (paramPos === call.arguments.length) {
-    call.arguments.push(t.objectExpression([]));
+    appendToList(config.editor, argumentList(config.editor, call), [
+      makeObjectSource(paramPath, value),
+    ]);
+    config.editor.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.editor.commit();
 }
 
 const logger = console;
@@ -411,11 +415,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 +450,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 +913,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 +940,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 +1003,7 @@ export const extendPreview: Task['run'] = async ({ key, 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);');
     }
   }
 
@@ -1030,7 +1024,7 @@ export const extendPreview: Task['run'] = async ({ key, 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')) {
@@ -1048,20 +1042,19 @@ export const extendPreview: Task['run'] = async ({ key, 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');
+
+  insertAfterImports(previewConfig.editor, mockStatements);
+  previewConfig.editor.commit();
 
   await writeConfig(previewConfig);
 };
diff --git a/yarn.lock b/yarn.lock
index 33d68cb3b1f2..4de5d7464fb9 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.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
@@ -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.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
@@ -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.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
@@ -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.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
@@ -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.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
@@ -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.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
@@ -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.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
@@ -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.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
@@ -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.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
@@ -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.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
@@ -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.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
@@ -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.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
@@ -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.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
@@ -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.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
@@ -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.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
@@ -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.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
@@ -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.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
@@ -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.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
@@ -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.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
@@ -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.154.0":
+  version: 0.154.0
+  resolution: "@oxc-project/types@npm:0.154.0"
+  checksum: 10c0/fa91599d087ea4d37c5a3b40dd8e2cb431a7d37730116069f2577dee0b104dc5abb06c96b931c517c8b86f618df1e0c7a37d24086f3cfe39d81eb6db59e70add
+  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"
@@ -10151,7 +10121,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:*"
@@ -28283,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
@@ -28341,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.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
@@ -28416,7 +28382,7 @@ __metadata:
       optional: true
     "@oxc-parser/binding-win32-x64-msvc":
       optional: true
-  checksum: 10c0/a799b87b16153188bdb91adb7c30e27ab721f7cd860435f61d215487e84f5ad2e0c8930ce7e79d72864e9afad104a8a134c50a2cee839bc73a96a623d36867b0
+  checksum: 10c0/6512e0901618735f5baea0619a021e23ee8e51fedb9c54c1d6807bf2655f9642c3355672b5c0492e3fd7f0dd0de43e98e6e28f4a9d3f2ffbb5e7aaef7ca25564
   languageName: node
   linkType: hard
 
@@ -31261,7 +31227,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:
@@ -33581,10 +33547,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"
@@ -33594,6 +33556,8 @@ __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"
     "@preact/signals-core": "npm:^1.14.2"
@@ -33675,6 +33639,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"
@@ -33685,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.154.0"
     oxc-resolver: "npm:11.21.2"
     p-limit: "npm:^7.2.0"
     package-manager-detector: "npm:^1.1.0"
@@ -33709,7 +33674,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"