diff --git a/.circleci/config.yml b/.circleci/config.yml
index c71bbbbae66b..72adc93ef564 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -8,7 +8,7 @@ parameters:
     default: "skipped"
 
 executors:
-  sb_node_16_classic:
+  sb_node_18_classic:
     parameters:
       class:
         description: The Resource class
@@ -21,7 +21,7 @@ executors:
         environment:
           NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
-  sb_node_16_browsers:
+  sb_node_18_browsers:
     parameters:
       class:
         description: The Resource class
@@ -99,7 +99,7 @@ jobs:
   pretty-docs:
     executor:
       class: medium
-      name: sb_node_16_classic
+      name: sb_node_18_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -125,7 +125,7 @@ jobs:
   build:
     executor:
       class: xlarge
-      name: sb_node_16_classic
+      name: sb_node_18_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -169,7 +169,7 @@ jobs:
   lint:
     executor:
       class: large
-      name: sb_node_16_classic
+      name: sb_node_18_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -185,7 +185,7 @@ jobs:
   check:
     executor:
       class: xlarge
-      name: sb_node_16_classic
+      name: sb_node_18_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -202,7 +202,7 @@ jobs:
       - report-workflow-on-failure
       - cancel-workflow-on-failure
   script-checks:
-    executor: sb_node_16_browsers
+    executor: sb_node_18_browsers
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -230,7 +230,7 @@ jobs:
   unit-tests:
     executor:
       class: xlarge
-      name: sb_node_16_browsers
+      name: sb_node_18_browsers
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -252,7 +252,7 @@ jobs:
   coverage:
     executor:
       class: small
-      name: sb_node_16_browsers
+      name: sb_node_18_browsers
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -263,7 +263,7 @@ jobs:
   chromatic-internal-storybooks:
     executor:
       class: medium+
-      name: sb_node_16_browsers
+      name: sb_node_18_browsers
     environment:
       NODE_OPTIONS: --max_old_space_size=6144
     steps:
@@ -287,13 +287,16 @@ jobs:
         type: integer
     executor:
       class: medium
-      name: sb_node_16_browsers
+      name: sb_node_18_browsers
     parallelism: << parameters.parallelism >>
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
       - attach_workspace:
           at: .
+      - run:
+          name: Enable Corepack
+          command: sudo corepack enable yarn
       - run:
           name: Creating Sandboxes
           command: yarn task --task sandbox --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task sandbox) --no-link --start-from=never --junit
@@ -311,7 +314,7 @@ jobs:
         type: integer
     executor:
       class: medium
-      name: sb_node_16_browsers
+      name: sb_node_18_browsers
     parallelism: << parameters.parallelism >>
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -331,7 +334,7 @@ jobs:
         type: integer
     executor:
       class: large
-      name: sb_node_16_browsers
+      name: sb_node_18_browsers
     parallelism: << parameters.parallelism >>
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -410,7 +413,7 @@ jobs:
         type: integer
     executor:
       class: medium
-      name: sb_node_16_browsers
+      name: sb_node_18_browsers
     parallelism: << parameters.parallelism >>
     steps:
       - checkout
@@ -493,7 +496,7 @@ jobs:
   test-empty-init:
     executor:
       class: medium
-      name: sb_node_16_browsers
+      name: sb_node_18_browsers
     parameters:
       packageManager:
         type: string
diff --git a/.github/workflows/prepare-non-patch-release.yml b/.github/workflows/prepare-non-patch-release.yml
index 3cbf8f8b1fc9..c495114d461e 100644
--- a/.github/workflows/prepare-non-patch-release.yml
+++ b/.github/workflows/prepare-non-patch-release.yml
@@ -113,10 +113,6 @@ jobs:
         run: |
           yarn release:version --deferred --release-type ${{ inputs.release-type || 'prerelease' }} ${{ inputs.pre-id && format('{0} {1}', '--pre-id', inputs.pre-id) || '' }} --verbose
 
-      - name: Check release vs prerelease
-        id: is-prerelease
-        run: yarn release:is-prerelease ${{ steps.bump-version.outputs.next-version }} --verbose
-
       - name: Write changelog
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -133,19 +129,6 @@ jobs:
           git commit -m "Write changelog for ${{ steps.bump-version.outputs.next-version }} [skip ci]" || true
           git push --force origin version-non-patch-from-${{ steps.bump-version.outputs.current-version }}
 
-      - name: Resolve merge-conflicts with base branch
-        if: steps.is-prerelease.outputs.prerelease == 'false'
-        working-directory: .
-        env:
-          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: |
-          git config pull.rebase false
-          git pull --no-commit --no-ff origin latest-release || true
-          git checkout --ours .
-          git add .
-          git commit --no-verify -m "Merge latest-release into version-non-patch-from-${{ steps.bump-version.outputs.current-version }} with conflicts resolved to ours [skip ci]"
-          git push origin version-non-patch-from-${{ steps.bump-version.outputs.current-version }}
-
       - name: Generate PR description
         id: description
         env:
@@ -162,14 +145,13 @@ jobs:
             gh pr edit \
               --repo "${{github.repository }}" \
               --title "Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \
-              --base ${{ steps.is-prerelease.outputs.prerelease == 'true' && 'next-release' || 'latest-release' }} \
               --body "${{ steps.description.outputs.description }}"
           else
             gh pr create \
               --repo "${{github.repository }}"\
               --title "Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \
               --label "release" \
-              --base ${{ steps.is-prerelease.outputs.prerelease == 'true' && 'next-release' || 'latest-release' }} \
+              --base next-release \
               --head version-non-patch-from-${{ steps.bump-version.outputs.current-version }} \
               --body "${{ steps.description.outputs.description }}"
           fi
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 8aa7928748bc..61566b49d5bb 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -154,6 +154,14 @@ jobs:
           git merge ${{ github.ref_name }}
           git push origin ${{ steps.target.outputs.target }}
 
+      - name: Force push from 'next' to 'latest-release' and 'main' on minor/major releases
+        if: github.ref_name == 'next-release' && steps.is-prerelease.outputs.prerelease == 'false'
+        run: |
+          git checkout next
+          git pull
+          git push --force origin latest-release
+          git push --force origin main
+
       - name: Sync CHANGELOG.md from `main` to `next`
         if: steps.target.outputs.target == 'main'
         working-directory: .
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0fdbefeb9821..66d87cccc4c8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,13 @@
+## 8.1.3
+
+- Angular: Support v18 - [#27237](https://github.com/storybookjs/storybook/pull/27237), thanks @valentinpalkovic!
+- Telemetry: Add test packages - [#27226](https://github.com/storybookjs/storybook/pull/27226), thanks @shilman!
+
+## 8.1.2
+
+- Angular: Fix filtering of workspace config styles - [#27108](https://github.com/storybookjs/storybook/pull/27108), thanks @valentinpalkovic!
+- Next.js: Avoid interfering with the svgr loader - [#27198](https://github.com/storybookjs/storybook/pull/27198), thanks @seanparmelee!
+
 ## 8.1.1
 
 - Docgen: Only add react-docgen info when a component is defined in the file - [#26967](https://github.com/storybookjs/storybook/pull/26967), thanks @glenjamin!
diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
index 11b40449bfff..c989504cf696 100644
--- a/CHANGELOG.prerelease.md
+++ b/CHANGELOG.prerelease.md
@@ -1,3 +1,18 @@
+## 8.2.0-alpha.3
+
+- Addon-A11y: Fix property default assignment - [#27224](https://github.com/storybookjs/storybook/pull/27224), thanks @valentinpalkovic!
+- Angular: Revert style adjustments - [#27361](https://github.com/storybookjs/storybook/pull/27361), thanks @valentinpalkovic!
+- Angular: Support v18 - [#27237](https://github.com/storybookjs/storybook/pull/27237), thanks @valentinpalkovic!
+- Controls: Fix date picker control validation and assignment - [#26695](https://github.com/storybookjs/storybook/pull/26695), thanks @leeovictor!
+- Next.js: Avoid interfering with the svgr loader - [#27198](https://github.com/storybookjs/storybook/pull/27198), thanks @seanparmelee!
+- Svelte: Support latest prerelease - [#27378](https://github.com/storybookjs/storybook/pull/27378), thanks @valentinpalkovic!
+- Tags: Fix composition with older storybooks - [#27358](https://github.com/storybookjs/storybook/pull/27358), thanks @shilman!
+- Telemetry: Add test packages - [#27226](https://github.com/storybookjs/storybook/pull/27226), thanks @shilman!
+- Types: Fix type implementation for `CompatibleString` - [#27180](https://github.com/storybookjs/storybook/pull/27180), thanks @sni-J!
+- Vite: Fix HMR issue for Storybook preview files - [#27256](https://github.com/storybookjs/storybook/pull/27256), thanks @valentinpalkovic!
+- Vite: Fix asset warning by externalizing sb-common-assets font - [#27110](https://github.com/storybookjs/storybook/pull/27110), thanks @valentinpalkovic!
+- Webpack5/Vite: Fix sourcemaps - [#27171](https://github.com/storybookjs/storybook/pull/27171), thanks @valentinpalkovic!
+
 ## 8.2.0-alpha.2
 
 - Angular: Cleanup types - [#27189](https://github.com/storybookjs/storybook/pull/27189), thanks @valentinpalkovic!
diff --git a/code/addons/a11y/src/a11yRunner.ts b/code/addons/a11y/src/a11yRunner.ts
index ec33803558c3..82a851b89b05 100644
--- a/code/addons/a11y/src/a11yRunner.ts
+++ b/code/addons/a11y/src/a11yRunner.ts
@@ -17,9 +17,9 @@ const defaultParameters = { config: {}, options: {} };
  * Handle A11yContext events.
  * Because the event are sent without manual check, we split calls
  */
-const handleRequest = async (storyId: string, input: A11yParameters = defaultParameters) => {
+const handleRequest = async (storyId: string, input: A11yParameters | null) => {
   if (!input?.manual) {
-    await run(storyId, input);
+    await run(storyId, input ?? defaultParameters);
   }
 };
 
diff --git a/code/builders/builder-manager/templates/template.ejs b/code/builders/builder-manager/templates/template.ejs
index af42859a0791..c1fa9310acd4 100644
--- a/code/builders/builder-manager/templates/template.ejs
+++ b/code/builders/builder-manager/templates/template.ejs
@@ -11,21 +11,39 @@
     <% } else if (favicon.endsWith('.ico')) { %>
     <link rel="icon" type="image/x-icon" href="./<%= favicon %>" />
     <% } %>
-    <link
-      rel="prefetch"
-      href="./sb-common-assets/nunito-sans-regular.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin
-    />
-    <link
-      rel="prefetch"
-      href="./sb-common-assets/nunito-sans-bold.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin
-    />
-    <link rel="stylesheet" href="./sb-common-assets/fonts.css" />
+    <style>
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: normal;
+        font-weight: 400;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: italic;
+        font-weight: 400;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: normal;
+        font-weight: 700;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: italic;
+        font-weight: 700;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
+      }
+    </style>
 
     <link href="./sb-manager/runtime.js" rel="modulepreload" />
 
diff --git a/code/builders/builder-vite/input/iframe.html b/code/builders/builder-vite/input/iframe.html
index 7720ef6b9482..23c280c02242 100644
--- a/code/builders/builder-vite/input/iframe.html
+++ b/code/builders/builder-vite/input/iframe.html
@@ -6,35 +6,39 @@
     <title>Storybook</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <link
-      rel="prefetch"
-      href="./sb-common-assets/nunito-sans-regular.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin
-    />
-    <link
-      rel="prefetch"
-      href="./sb-common-assets/nunito-sans-italic.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin
-    />
-    <link
-      rel="prefetch"
-      href="./sb-common-assets/nunito-sans-bold.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin
-    />
-    <link
-      rel="prefetch"
-      href="./sb-common-assets/nunito-sans-bold-italic.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin
-    />
-    <link rel="stylesheet" href="./sb-common-assets/fonts.css" />
+    <style>
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: normal;
+        font-weight: 400;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: italic;
+        font-weight: 400;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: normal;
+        font-weight: 700;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: italic;
+        font-weight: 700;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
+      }
+    </style>
 
     <script>
       window.CONFIG_TYPE = '[CONFIG_TYPE HERE]';
diff --git a/code/builders/builder-vite/src/build.ts b/code/builders/builder-vite/src/build.ts
index 67ce2c42942d..6017481cc68c 100644
--- a/code/builders/builder-vite/src/build.ts
+++ b/code/builders/builder-vite/src/build.ts
@@ -23,8 +23,11 @@ export async function build(options: Options) {
       outDir: options.outputDir,
       emptyOutDir: false, // do not clean before running Vite build - Storybook has already added assets in there!
       rollupOptions: {
-        // Do not try to bundle the storybook runtime, it is copied into the output dir after the build.
-        external: ['./sb-preview/runtime.js'],
+        external: [
+          // Do not try to bundle the Storybook runtime, it is copied into the output dir after the build.
+          './sb-preview/runtime.js',
+          /\.\/sb-common-assets\/.*\.woff2/,
+        ],
       },
       ...(options.test
         ? {
diff --git a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
index 39109c148df4..2d5da031e73d 100644
--- a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
+++ b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
@@ -21,9 +21,13 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
   // and the HMR handler.  We don't use the hot.accept callback params because only the changed
   // modules are provided, the rest are null.  We can just re-import everything again in that case.
   const getPreviewAnnotationsFunction = `
-  const getProjectAnnotations = async () => {
+  const getProjectAnnotations = async (hmrPreviewAnnotationModules = []) => {
     const configs = await Promise.all([${previewAnnotationURLs
-      .map((previewAnnotation) => `import('${previewAnnotation}')`)
+      .map(
+        (previewAnnotation, index) =>
+          // Prefer the updated module from an HMR update, otherwise import the original module
+          `hmrPreviewAnnotationModules.at(${index}) ?? import('${previewAnnotation}')`
+      )
       .join(',\n')}])
     return composeConfigs(configs);
   }`;
@@ -45,10 +49,10 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
       window.__STORYBOOK_PREVIEW__.onStoriesChanged({ importFn: newModule.importFn });
       });
 
-    import.meta.hot.accept(${JSON.stringify(previewAnnotationURLs)}, () => {
+    import.meta.hot.accept(${JSON.stringify(previewAnnotationURLs)}, (previewAnnotationModules) => {
       ${getPreviewAnnotationsFunction}
       // getProjectAnnotations has changed so we need to patch the new one in
-      window.__STORYBOOK_PREVIEW__.onGetProjectAnnotationsChanged({ getProjectAnnotations });
+      window.__STORYBOOK_PREVIEW__.onGetProjectAnnotationsChanged({ getProjectAnnotations: () => getProjectAnnotations(previewAnnotationModules) });
     });
   }`.trim();
   };
diff --git a/code/builders/builder-vite/src/plugins/external-globals-plugin.ts b/code/builders/builder-vite/src/plugins/external-globals-plugin.ts
index 1debc299aa99..94af1a74999c 100644
--- a/code/builders/builder-vite/src/plugins/external-globals-plugin.ts
+++ b/code/builders/builder-vite/src/plugins/external-globals-plugin.ts
@@ -88,7 +88,6 @@ export async function externalGlobalsPlugin(externals: Record<string, string>) {
         code: src.toString(),
         map: src.generateMap({
           source: id,
-          includeContent: true,
           hires: true,
         }),
       };
diff --git a/code/builders/builder-webpack5/src/loaders/export-order-loader.ts b/code/builders/builder-webpack5/src/loaders/export-order-loader.ts
index 8f0b90882278..ef3149a424c1 100644
--- a/code/builders/builder-webpack5/src/loaders/export-order-loader.ts
+++ b/code/builders/builder-webpack5/src/loaders/export-order-loader.ts
@@ -49,9 +49,7 @@ export default async function loader(
       );
     }
 
-    const generatedMap = magicString.generateMap({ hires: true });
-
-    return callback(null, magicString.toString(), generatedMap, meta);
+    return callback(null, magicString.toString(), map, meta);
   } catch (err) {
     return callback(null, source, map, meta);
   }
diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
index 6eca9b6a3dff..ef510ef2378f 100644
--- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -2,7 +2,6 @@ import { dirname, join, resolve } from 'path';
 import { DefinePlugin, HotModuleReplacementPlugin, ProgressPlugin, ProvidePlugin } from 'webpack';
 import type { Configuration } from 'webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
-
 // @ts-expect-error (I removed this on purpose, because it's incorrect)
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import TerserWebpackPlugin from 'terser-webpack-plugin';
@@ -54,11 +53,7 @@ const storybookPaths: Record<string, string> = {
 };
 
 export default async (
-  options: Options & {
-    typescriptOptions: TypescriptOptions;
-    /* Build entries, which should not be linked in the iframe HTML file */
-    excludeChunks?: string[];
-  }
+  options: Options & { typescriptOptions: TypescriptOptions }
 ): Promise<Configuration> => {
   const {
     outputDir = join('.', 'public'),
@@ -69,7 +64,6 @@ export default async (
     previewUrl,
     typescriptOptions,
     features,
-    excludeChunks = [],
   } = options;
 
   const isProd = configType === 'PRODUCTION';
@@ -178,7 +172,6 @@ export default async (
         alwaysWriteToDisk: true,
         inject: false,
         template,
-        excludeChunks,
         templateParameters: {
           version: packageJson.version,
           globals: {
diff --git a/code/builders/builder-webpack5/templates/preview.ejs b/code/builders/builder-webpack5/templates/preview.ejs
index 007f769a3eb0..06f5691b3a19 100644
--- a/code/builders/builder-webpack5/templates/preview.ejs
+++ b/code/builders/builder-webpack5/templates/preview.ejs
@@ -10,11 +10,39 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <link rel="prefetch" href="./sb-common-assets/nunito-sans-regular.woff2" as="font" type="font/woff2" crossorigin />
-    <link rel="prefetch" href="./sb-common-assets/nunito-sans-italic.woff2" as="font" type="font/woff2" crossorigin />
-    <link rel="prefetch" href="./sb-common-assets/nunito-sans-bold.woff2" as="font" type="font/woff2" crossorigin />
-    <link rel="prefetch" href="./sb-common-assets/nunito-sans-bold-italic.woff2" as="font" type="font/woff2" crossorigin />
-    <link rel="stylesheet" href="./sb-common-assets/fonts.css" />
+    <style>
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: normal;
+        font-weight: 400;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: italic;
+        font-weight: 400;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: normal;
+        font-weight: 700;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
+      }
+
+      @font-face {
+        font-family: 'Nunito Sans';
+        font-style: italic;
+        font-weight: 700;
+        font-display: swap;
+        src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
+      }
+    </style>
   
     <% if (typeof headHtmlSnippet !== 'undefined') { %> <%= headHtmlSnippet %> <% } %> <%
     htmlWebpackPlugin.files.css.forEach(file => { %>
diff --git a/code/e2e-tests/composition.spec.ts b/code/e2e-tests/composition.spec.ts
new file mode 100644
index 000000000000..2cc2e18f42ca
--- /dev/null
+++ b/code/e2e-tests/composition.spec.ts
@@ -0,0 +1,43 @@
+import { test, expect } from '@playwright/test';
+import { SbPage } from './util';
+
+const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:6006';
+
+// This is a slow test, and (presumably) framework independent, so only run it on one sandbox
+const skipTest = process.env.STORYBOOK_TEMPLATE_NAME !== 'react-vite/default-ts';
+
+test.describe('composition', () => {
+  test.beforeEach(async ({ page }) => {
+    if (skipTest) return;
+    await page.goto(storybookUrl);
+    await new SbPage(page).waitUntilLoaded();
+  });
+
+  test('should correctly filter composed stories', async ({ page }) => {
+    if (skipTest) return;
+
+    // Expect that composed Storybooks are visible
+    await expect(await page.getByTitle('Storybook 8.0.0')).toBeVisible();
+    await expect(await page.getByTitle('Storybook 7.6.18')).toBeVisible();
+
+    // Expect composed stories to be available in the sidebar
+    await page.locator('[id="storybook\\@8\\.0\\.0_components-badge"]').click();
+    await expect(
+      await page.locator('[id="storybook\\@8\\.0\\.0_components-badge--default"]')
+    ).toBeVisible();
+
+    await page.locator('[id="storybook\\@7\\.6\\.18_components-badge"]').click();
+    await expect(
+      await page.locator('[id="storybook\\@7\\.6\\.18_components-badge--default"]')
+    ).toBeVisible();
+
+    // Expect composed stories `to be available in the search
+    await page.getByPlaceholder('Find components').fill('Button');
+    await expect(
+      await page.getByRole('option', { name: 'Button Storybook 8.0.0 / @blocks / examples' })
+    ).toBeVisible();
+    await expect(
+      await page.getByRole('option', { name: 'Button Storybook 7.6.18 / @blocks / examples' })
+    ).toBeVisible();
+  });
+});
diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json
index 8dc61c214df6..4b3d7b442e88 100644
--- a/code/frameworks/angular/package.json
+++ b/code/frameworks/angular/package.json
@@ -87,17 +87,17 @@
     "zone.js": "^0.14.2"
   },
   "peerDependencies": {
-    "@angular-devkit/architect": ">=0.1500.0 < 0.1800.0",
-    "@angular-devkit/build-angular": ">=15.0.0 < 18.0.0",
-    "@angular-devkit/core": ">=15.0.0 < 18.0.0",
-    "@angular/cli": ">=15.0.0 < 18.0.0",
-    "@angular/common": ">=15.0.0 < 18.0.0",
-    "@angular/compiler": ">=15.0.0 < 18.0.0",
-    "@angular/compiler-cli": ">=15.0.0 < 18.0.0",
-    "@angular/core": ">=15.0.0 < 18.0.0",
-    "@angular/forms": ">=15.0.0 < 18.0.0",
-    "@angular/platform-browser": ">=15.0.0 < 18.0.0",
-    "@angular/platform-browser-dynamic": ">=15.0.0 < 18.0.0",
+    "@angular-devkit/architect": ">=0.1500.0 < 0.1900.0",
+    "@angular-devkit/build-angular": ">=15.0.0 < 19.0.0",
+    "@angular-devkit/core": ">=15.0.0 < 19.0.0",
+    "@angular/cli": ">=15.0.0 < 19.0.0",
+    "@angular/common": ">=15.0.0 < 19.0.0",
+    "@angular/compiler": ">=15.0.0 < 19.0.0",
+    "@angular/compiler-cli": ">=15.0.0 < 19.0.0",
+    "@angular/core": ">=15.0.0 < 19.0.0",
+    "@angular/forms": ">=15.0.0 < 19.0.0",
+    "@angular/platform-browser": ">=15.0.0 < 19.0.0",
+    "@angular/platform-browser-dynamic": ">=15.0.0 < 19.0.0",
     "rxjs": "^6.0.0 || ^7.4.0",
     "typescript": "^4.0.0 || ^5.0.0",
     "zone.js": ">= 0.11.1 < 1.0.0"
diff --git a/code/frameworks/angular/src/builders/build-storybook/index.ts b/code/frameworks/angular/src/builders/build-storybook/index.ts
index a41c1490e41a..25f7faeb5268 100644
--- a/code/frameworks/angular/src/builders/build-storybook/index.ts
+++ b/code/frameworks/angular/src/builders/build-storybook/index.ts
@@ -1,22 +1,36 @@
-import { BuilderContext, BuilderOutput, createBuilder } from '@angular-devkit/architect';
+import {
+  BuilderContext,
+  BuilderHandlerFn,
+  BuilderOutput,
+  BuilderOutputLike,
+  Target,
+  createBuilder,
+  targetFromTargetString,
+} from '@angular-devkit/architect';
 import { JsonObject } from '@angular-devkit/core';
+import { from, of, throwError } from 'rxjs';
+import { catchError, map, mapTo, switchMap } from 'rxjs/operators';
 import { sync as findUpSync } from 'find-up';
 import { sync as readUpSync } from 'read-pkg-up';
+import { BrowserBuilderOptions, StylePreprocessorOptions } from '@angular-devkit/build-angular';
 
 import { CLIOptions } from '@storybook/types';
 import { getEnvConfig, versions } from '@storybook/core-common';
 import { addToGlobalContext } from '@storybook/telemetry';
 
 import { buildStaticStandalone, withTelemetry } from '@storybook/core-server';
-import { StyleClass } from '@angular-devkit/build-angular/src/builders/browser/schema';
+import {
+  AssetPattern,
+  SourceMapUnion,
+  StyleElement,
+} from '@angular-devkit/build-angular/src/builders/browser/schema';
 import { StandaloneOptions } from '../utils/standalone-options';
 import { runCompodoc } from '../utils/run-compodoc';
 import { errorSummary, printErrorDetails } from '../utils/error-handler';
-import { AngularBuilderOptions, setup } from '../utils/setup';
 
 addToGlobalContext('cliVersion', versions.storybook);
 
-export type StorybookBuilderOptions = AngularBuilderOptions & {
+export type StorybookBuilderOptions = JsonObject & {
   browserTarget?: string | null;
   tsConfig?: string;
   test: boolean;
@@ -24,6 +38,10 @@ export type StorybookBuilderOptions = AngularBuilderOptions & {
   compodoc: boolean;
   compodocArgs: string[];
   enableProdMode?: boolean;
+  styles?: StyleElement[];
+  stylePreprocessorOptions?: StylePreprocessorOptions;
+  assets?: AssetPattern[];
+  sourceMap?: SourceMapUnion;
 } & Pick<
     // makes sure the option exists
     CLIOptions,
@@ -41,77 +59,112 @@ export type StorybookBuilderOptions = AngularBuilderOptions & {
 
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & { [key: string]: any };
 
-type StandaloneBuildOptions = StandaloneOptions & { outputDir: string; excludeChunks: string[] };
+type StandaloneBuildOptions = StandaloneOptions & { outputDir: string };
+
+const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (
+  options,
+  context
+): BuilderOutputLike => {
+  const builder = from(setup(options, context)).pipe(
+    switchMap(({ tsConfig }) => {
+      const docTSConfig = findUpSync('tsconfig.doc.json', { cwd: options.configDir });
+      const runCompodoc$ = options.compodoc
+        ? runCompodoc(
+            { compodocArgs: options.compodocArgs, tsconfig: docTSConfig ?? tsConfig },
+            context
+          ).pipe(mapTo({ tsConfig }))
+        : of({});
+
+      return runCompodoc$.pipe(mapTo({ tsConfig }));
+    }),
+    map(({ tsConfig }) => {
+      getEnvConfig(options, {
+        staticDir: 'SBCONFIG_STATIC_DIR',
+        outputDir: 'SBCONFIG_OUTPUT_DIR',
+        configDir: 'SBCONFIG_CONFIG_DIR',
+      });
+
+      const {
+        browserTarget,
+        stylePreprocessorOptions,
+        styles,
+        configDir,
+        docs,
+        loglevel,
+        test,
+        outputDir,
+        quiet,
+        enableProdMode = true,
+        webpackStatsJson,
+        statsJson,
+        debugWebpack,
+        disableTelemetry,
+        assets,
+        previewUrl,
+        sourceMap = false,
+      } = options;
+
+      const standaloneOptions: StandaloneBuildOptions = {
+        packageJson: readUpSync({ cwd: __dirname }).packageJson,
+        configDir,
+        ...(docs ? { docs } : {}),
+        loglevel,
+        outputDir,
+        test,
+        quiet,
+        enableProdMode,
+        disableTelemetry,
+        angularBrowserTarget: browserTarget,
+        angularBuilderContext: context,
+        angularBuilderOptions: {
+          ...(stylePreprocessorOptions ? { stylePreprocessorOptions } : {}),
+          ...(styles ? { styles } : {}),
+          ...(assets ? { assets } : {}),
+          sourceMap,
+        },
+        tsConfig,
+        webpackStatsJson,
+        statsJson,
+        debugWebpack,
+        previewUrl,
+      };
+
+      return standaloneOptions;
+    }),
+    switchMap((standaloneOptions) => runInstance({ ...standaloneOptions, mode: 'static' })),
+    map(() => {
+      return { success: true };
+    })
+  );
+
+  return builder as any as BuilderOutput;
+};
 
-const commandBuilder = async (
-  options: StorybookBuilderOptions,
-  context: BuilderContext
-): Promise<BuilderOutput> => {
-  const { tsConfig, angularBuilderContext, angularBuilderOptions } = await setup(options, context);
+export default createBuilder(commandBuilder);
 
-  const docTSConfig = findUpSync('tsconfig.doc.json', { cwd: options.configDir });
+async function setup(options: StorybookBuilderOptions, context: BuilderContext) {
+  let browserOptions: (JsonObject & BrowserBuilderOptions) | undefined;
+  let browserTarget: Target | undefined;
 
-  if (options.compodoc) {
-    await runCompodoc(
-      { compodocArgs: options.compodocArgs, tsconfig: docTSConfig ?? tsConfig },
-      context
+  if (options.browserTarget) {
+    browserTarget = targetFromTargetString(options.browserTarget);
+    browserOptions = await context.validateOptions<JsonObject & BrowserBuilderOptions>(
+      await context.getTargetOptions(browserTarget),
+      await context.getBuilderNameForTarget(browserTarget)
     );
   }
 
-  getEnvConfig(options, {
-    staticDir: 'SBCONFIG_STATIC_DIR',
-    outputDir: 'SBCONFIG_OUTPUT_DIR',
-    configDir: 'SBCONFIG_CONFIG_DIR',
-  });
-
-  const {
-    configDir,
-    docs,
-    loglevel,
-    test,
-    outputDir,
-    quiet,
-    enableProdMode = true,
-    webpackStatsJson,
-    statsJson,
-    debugWebpack,
-    disableTelemetry,
-    previewUrl,
-  } = options;
-
-  const standaloneOptions: StandaloneBuildOptions = {
-    packageJson: readUpSync({ cwd: __dirname }).packageJson,
-    configDir,
-    ...(docs ? { docs } : {}),
-    excludeChunks: angularBuilderOptions.styles
-      ?.filter((style) => typeof style !== 'string' && style.inject === false)
-      .map((s: StyleClass) => s.bundleName),
-    loglevel,
-    outputDir,
-    test,
-    quiet,
-    enableProdMode,
-    disableTelemetry,
-    angularBrowserTarget: options.browserTarget,
-    angularBuilderContext,
-    angularBuilderOptions,
-    tsConfig,
-    webpackStatsJson,
-    statsJson,
-    debugWebpack,
-    previewUrl,
+  return {
+    tsConfig:
+      options.tsConfig ??
+      findUpSync('tsconfig.json', { cwd: options.configDir }) ??
+      browserOptions.tsConfig,
   };
+}
 
-  await runInstance({ ...standaloneOptions, mode: 'static' });
-
-  return { success: true };
-};
-
-export default createBuilder(commandBuilder);
-
-async function runInstance(options: StandaloneBuildOptions) {
-  try {
-    await withTelemetry(
+function runInstance(options: StandaloneBuildOptions) {
+  return from(
+    withTelemetry(
       'build',
       {
         cliOptions: options,
@@ -119,8 +172,6 @@ async function runInstance(options: StandaloneBuildOptions) {
         printError: printErrorDetails,
       },
       () => buildStaticStandalone(options)
-    );
-  } catch (error) {
-    throw new Error(errorSummary(error));
-  }
+    )
+  ).pipe(catchError((error: any) => throwError(errorSummary(error))));
 }
diff --git a/code/frameworks/angular/src/builders/start-storybook/index.ts b/code/frameworks/angular/src/builders/start-storybook/index.ts
index 194674b0ffd5..2ecbb63c8a0f 100644
--- a/code/frameworks/angular/src/builders/start-storybook/index.ts
+++ b/code/frameworks/angular/src/builders/start-storybook/index.ts
@@ -1,6 +1,15 @@
-import { BuilderHandlerFn, BuilderOutput, createBuilder } from '@angular-devkit/architect';
+import {
+  BuilderContext,
+  BuilderHandlerFn,
+  BuilderOutput,
+  Target,
+  createBuilder,
+  targetFromTargetString,
+} from '@angular-devkit/architect';
 import { JsonObject } from '@angular-devkit/core';
-import { StylePreprocessorOptions } from '@angular-devkit/build-angular';
+import { BrowserBuilderOptions, StylePreprocessorOptions } from '@angular-devkit/build-angular';
+import { from, Observable, of } from 'rxjs';
+import { map, switchMap, mapTo } from 'rxjs/operators';
 import { sync as findUpSync } from 'find-up';
 import { sync as readUpSync } from 'read-pkg-up';
 
@@ -11,22 +20,24 @@ import { buildDevStandalone, withTelemetry } from '@storybook/core-server';
 import {
   AssetPattern,
   SourceMapUnion,
-  StyleClass,
   StyleElement,
 } from '@angular-devkit/build-angular/src/builders/browser/schema';
 import { StandaloneOptions } from '../utils/standalone-options';
 import { runCompodoc } from '../utils/run-compodoc';
 import { printErrorDetails, errorSummary } from '../utils/error-handler';
-import { AngularBuilderOptions, setup } from '../utils/setup';
 
 addToGlobalContext('cliVersion', versions.storybook);
 
-export type StorybookBuilderOptions = AngularBuilderOptions & {
+export type StorybookBuilderOptions = JsonObject & {
   browserTarget?: string | null;
   tsConfig?: string;
   compodoc: boolean;
   compodocArgs: string[];
   enableProdMode?: boolean;
+  styles?: StyleElement[];
+  stylePreprocessorOptions?: StylePreprocessorOptions;
+  assets?: AssetPattern[];
+  sourceMap?: SourceMapUnion;
 } & Pick<
     // makes sure the option exists
     CLIOptions,
@@ -53,96 +64,131 @@ export type StorybookBuilderOptions = AngularBuilderOptions & {
 
 export type StorybookBuilderOutput = JsonObject & BuilderOutput & {};
 
-const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = async (options, context) => {
-  const { tsConfig, angularBuilderContext, angularBuilderOptions } = await setup(options, context);
+const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (options, context) => {
+  const builder = from(setup(options, context)).pipe(
+    switchMap(({ tsConfig }) => {
+      const docTSConfig = findUpSync('tsconfig.doc.json', { cwd: options.configDir });
 
-  const docTSConfig = findUpSync('tsconfig.doc.json', { cwd: options.configDir });
+      const runCompodoc$ = options.compodoc
+        ? runCompodoc(
+            {
+              compodocArgs: [...options.compodocArgs, ...(options.quiet ? ['--silent'] : [])],
+              tsconfig: docTSConfig ?? tsConfig,
+            },
+            context
+          ).pipe(mapTo({ tsConfig }))
+        : of({});
 
-  if (options.compodoc) {
-    await runCompodoc(
-      {
-        compodocArgs: [...options.compodocArgs, ...(options.quiet ? ['--silent'] : [])],
-        tsconfig: docTSConfig ?? tsConfig,
-      },
-      context
-    );
-  }
+      return runCompodoc$.pipe(mapTo({ tsConfig }));
+    }),
+    map(({ tsConfig }) => {
+      getEnvConfig(options, {
+        port: 'SBCONFIG_PORT',
+        host: 'SBCONFIG_HOSTNAME',
+        staticDir: 'SBCONFIG_STATIC_DIR',
+        configDir: 'SBCONFIG_CONFIG_DIR',
+        ci: 'CI',
+      });
 
-  getEnvConfig(options, {
-    port: 'SBCONFIG_PORT',
-    host: 'SBCONFIG_HOSTNAME',
-    staticDir: 'SBCONFIG_STATIC_DIR',
-    configDir: 'SBCONFIG_CONFIG_DIR',
-    ci: 'CI',
-  });
+      options.port = parseInt(`${options.port}`, 10);
 
-  options.port = parseInt(`${options.port}`, 10);
-
-  const {
-    browserTarget,
-    ci,
-    configDir,
-    docs,
-    host,
-    https,
-    port,
-    quiet,
-    enableProdMode = false,
-    smokeTest,
-    sslCa,
-    sslCert,
-    sslKey,
-    disableTelemetry,
-    initialPath,
-    open,
-    debugWebpack,
-    loglevel,
-    webpackStatsJson,
-    statsJson,
-    previewUrl,
-  } = options;
-
-  const standaloneOptions: StandaloneOptions = {
-    packageJson: readUpSync({ cwd: __dirname }).packageJson,
-    ci,
-    configDir,
-    ...(docs ? { docs } : {}),
-    excludeChunks: angularBuilderOptions.styles
-      ?.filter((style) => typeof style !== 'string' && style.inject === false)
-      .map((s: StyleClass) => s.bundleName),
-    host,
-    https,
-    port,
-    quiet,
-    enableProdMode,
-    smokeTest,
-    sslCa,
-    sslCert,
-    sslKey,
-    disableTelemetry,
-    angularBrowserTarget: browserTarget,
-    angularBuilderContext,
-    angularBuilderOptions,
-    tsConfig,
-    initialPath,
-    open,
-    debugWebpack,
-    webpackStatsJson,
-    statsJson,
-    loglevel,
-    previewUrl,
-  };
+      const {
+        browserTarget,
+        stylePreprocessorOptions,
+        styles,
+        ci,
+        configDir,
+        docs,
+        host,
+        https,
+        port,
+        quiet,
+        enableProdMode = false,
+        smokeTest,
+        sslCa,
+        sslCert,
+        sslKey,
+        disableTelemetry,
+        assets,
+        initialPath,
+        open,
+        debugWebpack,
+        loglevel,
+        webpackStatsJson,
+        statsJson,
+        previewUrl,
+        sourceMap = false,
+      } = options;
 
-  const devPort = await runInstance(standaloneOptions);
+      const standaloneOptions: StandaloneOptions = {
+        packageJson: readUpSync({ cwd: __dirname }).packageJson,
+        ci,
+        configDir,
+        ...(docs ? { docs } : {}),
+        host,
+        https,
+        port,
+        quiet,
+        enableProdMode,
+        smokeTest,
+        sslCa,
+        sslCert,
+        sslKey,
+        disableTelemetry,
+        angularBrowserTarget: browserTarget,
+        angularBuilderContext: context,
+        angularBuilderOptions: {
+          ...(stylePreprocessorOptions ? { stylePreprocessorOptions } : {}),
+          ...(styles ? { styles } : {}),
+          ...(assets ? { assets } : {}),
+          sourceMap,
+        },
+        tsConfig,
+        initialPath,
+        open,
+        debugWebpack,
+        webpackStatsJson,
+        statsJson,
+        loglevel,
+        previewUrl,
+      };
 
-  return { success: true, info: { port: devPort } };
+      return standaloneOptions;
+    }),
+    switchMap((standaloneOptions) => runInstance(standaloneOptions)),
+    map((port: number) => {
+      return { success: true, info: { port } };
+    })
+  );
+
+  return builder as any as BuilderOutput;
 };
 
 export default createBuilder(commandBuilder);
 
-async function runInstance(options: StandaloneOptions): Promise<number> {
-  try {
-    const { port } = await withTelemetry(
+async function setup(options: StorybookBuilderOptions, context: BuilderContext) {
+  let browserOptions: (JsonObject & BrowserBuilderOptions) | undefined;
+  let browserTarget: Target | undefined;
+
+  if (options.browserTarget) {
+    browserTarget = targetFromTargetString(options.browserTarget);
+    browserOptions = await context.validateOptions<JsonObject & BrowserBuilderOptions>(
+      await context.getTargetOptions(browserTarget),
+      await context.getBuilderNameForTarget(browserTarget)
+    );
+  }
+
+  return {
+    tsConfig:
+      options.tsConfig ??
+      findUpSync('tsconfig.json', { cwd: options.configDir }) ??
+      browserOptions.tsConfig,
+  };
+}
+function runInstance(options: StandaloneOptions) {
+  return new Observable<number>((observer) => {
+    // This Observable intentionally never complete, leaving the process running ;)
+    withTelemetry(
       'dev',
       {
         cliOptions: options,
@@ -150,9 +196,10 @@ async function runInstance(options: StandaloneOptions): Promise<number> {
         printError: printErrorDetails,
       },
       () => buildDevStandalone(options)
-    );
-    return port;
-  } catch (error) {
-    throw new Error(errorSummary(error));
-  }
+    )
+      .then(({ port }) => observer.next(port))
+      .catch((error) => {
+        observer.error(errorSummary(error));
+      });
+  });
 }
diff --git a/code/frameworks/angular/src/builders/utils/run-compodoc.spec.ts b/code/frameworks/angular/src/builders/utils/run-compodoc.spec.ts
index a8f7428e7cec..cf0686b11b1d 100644
--- a/code/frameworks/angular/src/builders/utils/run-compodoc.spec.ts
+++ b/code/frameworks/angular/src/builders/utils/run-compodoc.spec.ts
@@ -1,6 +1,7 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { vi, describe, afterEach, it, expect } from 'vitest';
 import { LoggerApi } from '@angular-devkit/core/src/logger';
+import { take } from 'rxjs/operators';
 import { BuilderContext } from '@angular-devkit/architect';
 
 import { runCompodoc } from './run-compodoc';
@@ -36,13 +37,15 @@ describe('runCompodoc', () => {
   } as BuilderContext;
 
   it('should run compodoc with tsconfig from context', async () => {
-    await runCompodoc(
+    runCompodoc(
       {
         compodocArgs: [],
         tsconfig: 'path/to/tsconfig.json',
       },
       builderContextMock
-    );
+    )
+      .pipe(take(1))
+      .subscribe();
 
     expect(mockRunScript).toHaveBeenCalledWith(
       'compodoc',
@@ -53,13 +56,15 @@ describe('runCompodoc', () => {
   });
 
   it('should run compodoc with tsconfig from compodocArgs', async () => {
-    await runCompodoc(
+    runCompodoc(
       {
         compodocArgs: ['-p', 'path/to/tsconfig.stories.json'],
         tsconfig: 'path/to/tsconfig.json',
       },
       builderContextMock
-    );
+    )
+      .pipe(take(1))
+      .subscribe();
 
     expect(mockRunScript).toHaveBeenCalledWith(
       'compodoc',
@@ -70,13 +75,15 @@ describe('runCompodoc', () => {
   });
 
   it('should run compodoc with default output folder.', async () => {
-    await runCompodoc(
+    runCompodoc(
       {
         compodocArgs: [],
         tsconfig: 'path/to/tsconfig.json',
       },
       builderContextMock
-    );
+    )
+      .pipe(take(1))
+      .subscribe();
 
     expect(mockRunScript).toHaveBeenCalledWith(
       'compodoc',
@@ -87,13 +94,15 @@ describe('runCompodoc', () => {
   });
 
   it('should run with custom output folder specified with --output compodocArgs', async () => {
-    await runCompodoc(
+    runCompodoc(
       {
         compodocArgs: ['--output', 'path/to/customFolder'],
         tsconfig: 'path/to/tsconfig.json',
       },
       builderContextMock
-    );
+    )
+      .pipe(take(1))
+      .subscribe();
 
     expect(mockRunScript).toHaveBeenCalledWith(
       'compodoc',
@@ -104,13 +113,15 @@ describe('runCompodoc', () => {
   });
 
   it('should run with custom output folder specified with -d compodocArgs', async () => {
-    await runCompodoc(
+    runCompodoc(
       {
         compodocArgs: ['-d', 'path/to/customFolder'],
         tsconfig: 'path/to/tsconfig.json',
       },
       builderContextMock
-    );
+    )
+      .pipe(take(1))
+      .subscribe();
 
     expect(mockRunScript).toHaveBeenCalledWith(
       'compodoc',
diff --git a/code/frameworks/angular/src/builders/utils/run-compodoc.ts b/code/frameworks/angular/src/builders/utils/run-compodoc.ts
index 512f884b408d..e926c041bfa8 100644
--- a/code/frameworks/angular/src/builders/utils/run-compodoc.ts
+++ b/code/frameworks/angular/src/builders/utils/run-compodoc.ts
@@ -1,4 +1,5 @@
 import { BuilderContext } from '@angular-devkit/architect';
+import { Observable } from 'rxjs';
 import * as path from 'path';
 import { JsPackageManagerFactory } from '@storybook/core-common';
 
@@ -12,30 +13,34 @@ const toRelativePath = (pathToTsConfig: string) => {
   return path.isAbsolute(pathToTsConfig) ? path.relative('.', pathToTsConfig) : pathToTsConfig;
 };
 
-export const runCompodoc = async (
+export const runCompodoc = (
   { compodocArgs, tsconfig }: { compodocArgs: string[]; tsconfig: string },
   context: BuilderContext
-): Promise<void> => {
-  const tsConfigPath = toRelativePath(tsconfig);
-  const finalCompodocArgs = [
-    ...(hasTsConfigArg(compodocArgs) ? [] : ['-p', tsConfigPath]),
-    ...(hasOutputArg(compodocArgs) ? [] : ['-d', `${context.workspaceRoot || '.'}`]),
-    ...compodocArgs,
-  ];
+): Observable<void> => {
+  return new Observable<void>((observer) => {
+    const tsConfigPath = toRelativePath(tsconfig);
+    const finalCompodocArgs = [
+      ...(hasTsConfigArg(compodocArgs) ? [] : ['-p', tsConfigPath]),
+      ...(hasOutputArg(compodocArgs) ? [] : ['-d', `${context.workspaceRoot || '.'}`]),
+      ...compodocArgs,
+    ];
 
-  const packageManager = JsPackageManagerFactory.getPackageManager();
+    const packageManager = JsPackageManagerFactory.getPackageManager();
 
-  try {
-    const stdout = packageManager.runPackageCommandSync(
-      'compodoc',
-      finalCompodocArgs,
-      context.workspaceRoot,
-      'inherit'
-    );
+    try {
+      const stdout = packageManager.runPackageCommandSync(
+        'compodoc',
+        finalCompodocArgs,
+        context.workspaceRoot,
+        'inherit'
+      );
 
-    context.logger.info(stdout);
-  } catch (e) {
-    context.logger.error(e);
-    throw e;
-  }
+      context.logger.info(stdout);
+      observer.next();
+      observer.complete();
+    } catch (e) {
+      context.logger.error(e);
+      observer.error();
+    }
+  });
 };
diff --git a/code/frameworks/angular/src/builders/utils/setup.ts b/code/frameworks/angular/src/builders/utils/setup.ts
deleted file mode 100644
index 976f1115c061..000000000000
--- a/code/frameworks/angular/src/builders/utils/setup.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import { Target, targetFromTargetString } from '@angular-devkit/architect';
-import { BuilderContext } from '@angular-devkit/architect';
-import { JsonObject, logging } from '@angular-devkit/core';
-import { sync as findUpSync } from 'find-up';
-import { BrowserBuilderOptions } from '@angular-devkit/build-angular';
-import { logger } from '@storybook/node-logger';
-
-export type AngularBuilderOptions = BrowserBuilderOptions & {
-  browserTarget?: string | null;
-  configDir?: string;
-};
-
-export async function setup(
-  { stylePreprocessorOptions, styles, assets, sourceMap, ...options }: AngularBuilderOptions,
-  context: BuilderContext
-) {
-  let browserOptions: BrowserBuilderOptions | undefined;
-  let browserTarget: Target | undefined;
-
-  if (options.browserTarget) {
-    browserTarget = targetFromTargetString(options.browserTarget);
-    browserOptions = await context.validateOptions<any>(
-      await context.getTargetOptions(browserTarget),
-      await context.getBuilderNameForTarget(browserTarget)
-    );
-  }
-
-  const tsConfig =
-    options.tsConfig ??
-    findUpSync('tsconfig.json', { cwd: options.configDir }) ??
-    browserOptions.tsConfig;
-
-  const angularBuilderContext = getBuilderContext(context);
-
-  const angularBuilderOptions = await getBuilderOptions(
-    options.browserTarget,
-    {
-      ...options,
-      ...(stylePreprocessorOptions ? { stylePreprocessorOptions } : {}),
-      ...(styles ? { styles } : {}),
-      ...(assets ? { assets } : {}),
-      sourceMap: sourceMap ?? false,
-    },
-    tsConfig,
-    options.configDir,
-    angularBuilderContext
-  );
-
-  return {
-    tsConfig,
-    angularBuilderContext,
-    angularBuilderOptions,
-  };
-}
-
-/**
- * Get Builder Context
- * If storybook is not start by angular builder create dumb BuilderContext
- */
-function getBuilderContext(builderContext: BuilderContext): BuilderContext {
-  return (
-    builderContext ??
-    ({
-      target: { project: 'noop-project', builder: '', options: {} },
-      workspaceRoot: process.cwd(),
-      getProjectMetadata: () => ({}),
-      getTargetOptions: () => ({}),
-      logger: new logging.Logger('Storybook'),
-    } as unknown as BuilderContext)
-  );
-}
-
-/**
- * Get builder options
- * Merge target options from browser target and from storybook options
- */
-async function getBuilderOptions(
-  angularBrowserTarget: string,
-  angularBuilderOptions: AngularBuilderOptions,
-  tsConfig: string,
-  configDir: string,
-  builderContext: BuilderContext
-): Promise<BrowserBuilderOptions> {
-  /**
-   * Get Browser Target options
-   */
-  let browserTargetOptions: JsonObject = {};
-
-  if (angularBrowserTarget) {
-    const browserTarget = targetFromTargetString(angularBrowserTarget);
-
-    browserTargetOptions = await builderContext.getTargetOptions(browserTarget);
-  }
-
-  /**
-   * Merge target options from browser target options and from storybook options
-   */
-  const builderOptions = {
-    ...browserTargetOptions,
-    ...angularBuilderOptions,
-    tsConfig:
-      tsConfig ??
-      findUpSync('tsconfig.json', { cwd: configDir }) ??
-      (browserTargetOptions.tsConfig as string),
-  };
-  logger.info(`=> Using angular project with "tsConfig:${builderOptions.tsConfig}"`);
-
-  return builderOptions;
-}
diff --git a/code/frameworks/angular/src/builders/utils/standalone-options.ts b/code/frameworks/angular/src/builders/utils/standalone-options.ts
index 9889797bcbe3..ef73d78f01b5 100644
--- a/code/frameworks/angular/src/builders/utils/standalone-options.ts
+++ b/code/frameworks/angular/src/builders/utils/standalone-options.ts
@@ -1,7 +1,11 @@
 import { BuilderContext } from '@angular-devkit/architect';
-
+import {
+  AssetPattern,
+  SourceMapUnion,
+  StyleElement,
+  StylePreprocessorOptions,
+} from '@angular-devkit/build-angular/src/builders/browser/schema';
 import { LoadOptions, CLIOptions, BuilderOptions } from '@storybook/types';
-import { AngularBuilderOptions } from './setup';
 
 export type StandaloneOptions = CLIOptions &
   LoadOptions &
@@ -9,8 +13,12 @@ export type StandaloneOptions = CLIOptions &
     mode?: 'static' | 'dev';
     enableProdMode: boolean;
     angularBrowserTarget?: string | null;
-    angularBuilderOptions?: AngularBuilderOptions;
+    angularBuilderOptions?: Record<string, any> & {
+      styles?: StyleElement[];
+      stylePreprocessorOptions?: StylePreprocessorOptions;
+      assets?: AssetPattern[];
+      sourceMap?: SourceMapUnion;
+    };
     angularBuilderContext?: BuilderContext | null;
     tsConfig?: string;
-    excludeChunks?: string[];
   };
diff --git a/code/frameworks/angular/src/server/angular-cli-webpack.d.ts b/code/frameworks/angular/src/server/angular-cli-webpack.d.ts
index 8450a946025a..b2f79e4d963a 100644
--- a/code/frameworks/angular/src/server/angular-cli-webpack.d.ts
+++ b/code/frameworks/angular/src/server/angular-cli-webpack.d.ts
@@ -1,7 +1,7 @@
+import { JsonObject } from '@angular-devkit/core';
 import { BuilderContext } from '@angular-devkit/architect';
-import { AngularBuilderOptions } from '../builders/utils/setup';
 
 export declare function getWebpackConfig(
   baseConfig: any,
-  options: { builderOptions: AngularBuilderOptions; builderContext: BuilderContext }
+  options: { builderOptions: JsonObject; builderContext: BuilderContext }
 ): any;
diff --git a/code/frameworks/angular/src/server/angular-cli-webpack.js b/code/frameworks/angular/src/server/angular-cli-webpack.js
index 32b31c1418a1..621680125536 100644
--- a/code/frameworks/angular/src/server/angular-cli-webpack.js
+++ b/code/frameworks/angular/src/server/angular-cli-webpack.js
@@ -56,7 +56,6 @@ exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }
    */
   const { getCommonConfig, getStylesConfig, getDevServerConfig, getTypeScriptConfig } =
     getAngularWebpackUtils();
-
   const { config: cliConfig } = await generateI18nBrowserWebpackConfigFromContext(
     {
       // Default options
@@ -66,15 +65,10 @@ exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }
 
       // Options provided by user
       ...builderOptions,
-      styles: builderOptions.styles?.map((style) =>
-        typeof style === 'string'
-          ? {
-              input: style,
-              inject: true,
-              bundleName: style.split('/').pop(),
-            }
-          : style
-      ),
+      styles: builderOptions.styles
+        ?.map((style) => (typeof style === 'string' ? style : style.input))
+        .filter((style) => typeof style === 'string' || style.inject !== false),
+
       // Fixed options
       optimization: false,
       namedChunks: false,
diff --git a/code/frameworks/angular/src/server/framework-preset-angular-cli.ts b/code/frameworks/angular/src/server/framework-preset-angular-cli.ts
index 9c52447b3faf..059d8b30f4d1 100644
--- a/code/frameworks/angular/src/server/framework-preset-angular-cli.ts
+++ b/code/frameworks/angular/src/server/framework-preset-angular-cli.ts
@@ -1,6 +1,9 @@
 import webpack from 'webpack';
 import { logger } from '@storybook/node-logger';
 import { AngularLegacyBuildOptionsError } from '@storybook/core-events/server-errors';
+import { BuilderContext, targetFromTargetString } from '@angular-devkit/architect';
+import { sync as findUpSync } from 'find-up';
+import { JsonObject, logging } from '@angular-devkit/core';
 
 import { getWebpackConfig as getCustomWebpackConfig } from './angular-cli-webpack';
 import { moduleIsAvailable } from './utils/module-is-available';
@@ -14,15 +17,74 @@ export async function webpackFinal(baseConfig: webpack.Configuration, options: P
 
   checkForLegacyBuildOptions(options);
 
+  const builderContext = getBuilderContext(options);
+  const builderOptions = await getBuilderOptions(options, builderContext);
+
   return getCustomWebpackConfig(baseConfig, {
     builderOptions: {
       watch: options.configType === 'DEVELOPMENT',
-      ...options.angularBuilderOptions,
+      ...builderOptions,
     },
-    builderContext: options.angularBuilderContext,
+    builderContext,
   });
 }
 
+/**
+ * Get Builder Context
+ * If storybook is not start by angular builder create dumb BuilderContext
+ */
+function getBuilderContext(options: PresetOptions): BuilderContext {
+  return (
+    options.angularBuilderContext ??
+    ({
+      target: { project: 'noop-project', builder: '', options: {} },
+      workspaceRoot: process.cwd(),
+      getProjectMetadata: () => ({}),
+      getTargetOptions: () => ({}),
+      logger: new logging.Logger('Storybook'),
+    } as unknown as BuilderContext)
+  );
+}
+
+/**
+ * Get builder options
+ * Merge target options from browser target and from storybook options
+ */
+async function getBuilderOptions(
+  options: PresetOptions,
+  builderContext: BuilderContext
+): Promise<JsonObject> {
+  /**
+   * Get Browser Target options
+   */
+  let browserTargetOptions: JsonObject = {};
+  if (options.angularBrowserTarget) {
+    const browserTarget = targetFromTargetString(options.angularBrowserTarget);
+
+    logger.info(
+      `=> Using angular browser target options from "${browserTarget.project}:${
+        browserTarget.target
+      }${browserTarget.configuration ? `:${browserTarget.configuration}` : ''}"`
+    );
+    browserTargetOptions = await builderContext.getTargetOptions(browserTarget);
+  }
+
+  /**
+   * Merge target options from browser target options and from storybook options
+   */
+  const builderOptions = {
+    ...browserTargetOptions,
+    ...(options.angularBuilderOptions as JsonObject),
+    tsConfig:
+      options.tsConfig ??
+      findUpSync('tsconfig.json', { cwd: options.configDir }) ??
+      browserTargetOptions.tsConfig,
+  };
+  logger.info(`=> Using angular project with "tsConfig:${builderOptions.tsConfig}"`);
+
+  return builderOptions;
+}
+
 /**
  * Checks if using legacy configuration that doesn't use builder and logs message referring to migration docs.
  */
diff --git a/code/frameworks/angular/src/server/preset-options.ts b/code/frameworks/angular/src/server/preset-options.ts
index c854b2834e39..5412d5a19482 100644
--- a/code/frameworks/angular/src/server/preset-options.ts
+++ b/code/frameworks/angular/src/server/preset-options.ts
@@ -1,13 +1,17 @@
 import { Options as CoreOptions } from '@storybook/types';
 
 import { BuilderContext } from '@angular-devkit/architect';
-import { AngularBuilderOptions } from '../builders/utils/setup';
+import { StylePreprocessorOptions } from '@angular-devkit/build-angular';
+import { StyleElement } from '@angular-devkit/build-angular/src/builders/browser/schema';
 
 export type PresetOptions = CoreOptions & {
   /* Allow to get the options of a targeted "browser builder"  */
   angularBrowserTarget?: string | null;
   /* Defined set of options. These will take over priority from angularBrowserTarget options  */
-  angularBuilderOptions?: AngularBuilderOptions;
+  angularBuilderOptions?: {
+    styles?: StyleElement[];
+    stylePreprocessorOptions?: StylePreprocessorOptions;
+  };
   /* Angular context from builder */
   angularBuilderContext?: BuilderContext | null;
   tsConfig?: string;
diff --git a/code/frameworks/nextjs/src/swc/loader.ts b/code/frameworks/nextjs/src/swc/loader.ts
index c9ca896d533b..bec334ed64d0 100644
--- a/code/frameworks/nextjs/src/swc/loader.ts
+++ b/code/frameworks/nextjs/src/swc/loader.ts
@@ -24,14 +24,13 @@ export const configureSWCLoader = async (
   );
 
   if (rawRule && typeof rawRule === 'object') {
-    rawRule.test = /^(?!__barrel_optimize__)/;
+    rawRule.exclude = /^__barrel_optimize__/;
   }
 
   baseConfig.module?.rules?.push({
     test: /\.((c|m)?(j|t)sx?)$/,
     include: [getProjectRoot()],
     exclude: [/(node_modules)/, ...Object.keys(virtualModules)],
-    enforce: 'post',
     use: {
       // we use our own patch because we need to remove tracing from the original code
       // which is not possible otherwise
diff --git a/code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts b/code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts
index d70579d8fc72..5742ef7c9469 100644
--- a/code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts
+++ b/code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts
@@ -100,7 +100,10 @@ async function loaderTransform(this: any, parentTrace: any, source?: string, inp
   const programmaticOptions = {
     ...swcOptions,
     filename,
-    inputSourceMap: inputSourceMap ? JSON.stringify(inputSourceMap) : undefined,
+    inputSourceMap:
+      inputSourceMap && typeof inputSourceMap === 'object'
+        ? JSON.stringify(inputSourceMap)
+        : undefined,
 
     // Set the default sourcemap behavior based on Webpack's mapping flag,
     sourceMaps: this.sourceMap,
@@ -166,20 +169,11 @@ export function pitch(this: any) {
   }, callback);
 }
 
-function sanitizeSourceMap(rawSourceMap: any): any {
-  const { sourcesContent, ...sourceMap } = rawSourceMap ?? {};
-
-  // JSON parse/stringify trick required for swc to accept the SourceMap
-  return JSON.parse(JSON.stringify(sourceMap));
-}
-
 export default function swcLoader(this: any, inputSource: string, inputSourceMap: any) {
   const loaderSpan = mockCurrentTraceSpan.traceChild('next-swc-loader');
   const callback = this.async();
   loaderSpan
-    .traceAsyncFn(() =>
-      loaderTransform.call(this, loaderSpan, inputSource, sanitizeSourceMap(inputSourceMap))
-    )
+    .traceAsyncFn(() => loaderTransform.call(this, loaderSpan, inputSource, inputSourceMap))
     .then(
       ([transformedSource, outputSourceMap]: any) => {
         callback(null, transformedSource, outputSourceMap || inputSourceMap);
diff --git a/code/frameworks/react-vite/src/plugins/react-docgen.ts b/code/frameworks/react-vite/src/plugins/react-docgen.ts
index f41191dc0024..9ede729a79f8 100644
--- a/code/frameworks/react-vite/src/plugins/react-docgen.ts
+++ b/code/frameworks/react-vite/src/plugins/react-docgen.ts
@@ -80,7 +80,7 @@ export async function reactDocgen({
 
         return {
           code: s.toString(),
-          map: s.generateMap(),
+          map: s.generateMap({ hires: true, source: id }),
         };
       } catch (e: any) {
         // Ignore the error when react-docgen cannot find a react component
diff --git a/code/frameworks/svelte-webpack5/templates/SlotDecorator.svelte b/code/frameworks/svelte-webpack5/templates/SlotDecorator.svelte
index bd51e06f4271..ba40b6d039fb 100644
--- a/code/frameworks/svelte-webpack5/templates/SlotDecorator.svelte
+++ b/code/frameworks/svelte-webpack5/templates/SlotDecorator.svelte
@@ -1,5 +1,6 @@
 <script>
   import { onMount } from 'svelte';
+  export let svelteVersion;
   export let decorator;
   export let decoratorProps = {};
   export let component;
@@ -14,7 +15,7 @@
     return instance || decoratorInstance;
   }
 
-  if (on) {
+  if (on && svelteVersion < 5) {
     // Attach svelte event listeners.
     Object.keys(on).forEach((eventName) => {
       onMount(() => getInstance().$on(eventName, on[eventName]));
diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts
index 0e51a725470a..ccce3fe481bc 100644
--- a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts
+++ b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts
@@ -88,7 +88,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -119,7 +119,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -150,7 +150,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -192,7 +192,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -294,7 +294,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -440,7 +440,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -593,7 +593,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -656,7 +656,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -714,7 +714,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -771,7 +771,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -789,7 +789,7 @@ describe('StoryIndexGenerator', () => {
         expect(await generator.getIndex()).toMatchInlineSnapshot(`
           {
             "entries": {},
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -832,7 +832,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -933,7 +933,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "docs",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -1066,7 +1066,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "docs",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -1127,7 +1127,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "docs",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
@@ -1176,7 +1176,7 @@ describe('StoryIndexGenerator', () => {
                 "type": "story",
               },
             },
-            "v": 4,
+            "v": 5,
           }
         `);
       });
diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
index 34838d1e2eb7..ca8149656992 100644
--- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts
+++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
@@ -592,7 +592,7 @@ export class StoryIndexGenerator {
       );
 
       this.lastIndex = {
-        v: 4,
+        v: 5,
         entries: sorted,
       };
 
diff --git a/code/lib/core-server/src/utils/stories-json.test.ts b/code/lib/core-server/src/utils/stories-json.test.ts
index 21a901ada040..0a7a2f4a3b5c 100644
--- a/code/lib/core-server/src/utils/stories-json.test.ts
+++ b/code/lib/core-server/src/utils/stories-json.test.ts
@@ -263,7 +263,7 @@ describe('useStoriesJson', () => {
               "type": "story",
             },
           },
-          "v": 4,
+          "v": 5,
         }
       `);
     }, 20_000);
diff --git a/code/lib/core-server/src/utils/summarizeIndex.test.ts b/code/lib/core-server/src/utils/summarizeIndex.test.ts
index a2702a38a704..8d71317f3918 100644
--- a/code/lib/core-server/src/utils/summarizeIndex.test.ts
+++ b/code/lib/core-server/src/utils/summarizeIndex.test.ts
@@ -38,7 +38,7 @@ describe('summarizeIndex', () => {
   it('example stories', () => {
     expect(
       summarizeIndex({
-        v: 4,
+        v: 5,
         entries: {
           'example-introduction--docs': {
             id: 'example-introduction--docs',
@@ -146,14 +146,14 @@ describe('summarizeIndex', () => {
         "playStoryCount": 0,
         "storiesMdxCount": 0,
         "storyCount": 0,
-        "version": 4,
+        "version": 5,
       }
     `);
   });
   it('onboarding stories', () => {
     expect(
       summarizeIndex({
-        v: 4,
+        v: 5,
         entries: {
           'example-introduction--docs': {
             id: 'example-introduction--docs',
@@ -204,14 +204,14 @@ describe('summarizeIndex', () => {
         "playStoryCount": 0,
         "storiesMdxCount": 0,
         "storyCount": 0,
-        "version": 4,
+        "version": 5,
       }
     `);
   });
   it('user stories', () => {
     expect(
       summarizeIndex({
-        v: 4,
+        v: 5,
         entries: {
           'stories-renderers-react-errors--story-contains-unrenderable': {
             id: 'stories-renderers-react-errors--story-contains-unrenderable',
@@ -260,14 +260,14 @@ describe('summarizeIndex', () => {
         "playStoryCount": 0,
         "storiesMdxCount": 0,
         "storyCount": 4,
-        "version": 4,
+        "version": 5,
       }
     `);
   });
   it('pages', () => {
     expect(
       summarizeIndex({
-        v: 4,
+        v: 5,
         entries: {
           'example-page--logged-out': {
             id: 'example-page--logged-out',
@@ -317,14 +317,14 @@ describe('summarizeIndex', () => {
         "playStoryCount": 1,
         "storiesMdxCount": 0,
         "storyCount": 1,
-        "version": 4,
+        "version": 5,
       }
     `);
   });
   it('storiesMdx', () => {
     expect(
       summarizeIndex({
-        v: 4,
+        v: 5,
         entries: {
           'stories-renderers-react-react-mdx--docs': {
             id: 'stories-renderers-react-react-mdx--docs',
@@ -374,14 +374,14 @@ describe('summarizeIndex', () => {
         "playStoryCount": 0,
         "storiesMdxCount": 1,
         "storyCount": 3,
-        "version": 4,
+        "version": 5,
       }
     `);
   });
   it('autodocs', () => {
     expect(
       summarizeIndex({
-        v: 4,
+        v: 5,
         entries: {
           'example-button--docs': {
             id: 'example-button--docs',
@@ -432,14 +432,14 @@ describe('summarizeIndex', () => {
         "playStoryCount": 0,
         "storiesMdxCount": 0,
         "storyCount": 0,
-        "version": 4,
+        "version": 5,
       }
     `);
   });
   it('mdx', () => {
     expect(
       summarizeIndex({
-        v: 4,
+        v: 5,
         entries: {
           'example-introduction--docs': {
             id: 'example-introduction--docs',
@@ -483,7 +483,7 @@ describe('summarizeIndex', () => {
         "playStoryCount": 0,
         "storiesMdxCount": 0,
         "storyCount": 0,
-        "version": 4,
+        "version": 5,
       }
     `);
   });
diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json
index e5248dcd6aa6..cb39114b2f56 100644
--- a/code/lib/csf-plugin/package.json
+++ b/code/lib/csf-plugin/package.json
@@ -27,6 +27,12 @@
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
+    "./dist/webpack-loader": {
+      "types": "./dist/webpack-loader.d.ts",
+      "node": "./dist/webpack-loader.js",
+      "require": "./dist/webpack-loader.js",
+      "import": "./dist/webpack-loader.mjs"
+    },
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -55,7 +61,8 @@
   },
   "bundler": {
     "entries": [
-      "./src/index.ts"
+      "./src/index.ts",
+      "./src/webpack-loader.ts"
     ],
     "externals": [
       "webpack",
diff --git a/code/lib/csf-plugin/src/constants.ts b/code/lib/csf-plugin/src/constants.ts
new file mode 100644
index 000000000000..d1c34d913687
--- /dev/null
+++ b/code/lib/csf-plugin/src/constants.ts
@@ -0,0 +1 @@
+export const STORIES_REGEX = /(?<!node_modules.*)\.(story|stories)\.[tj]sx?$/;
diff --git a/code/lib/csf-plugin/src/index.ts b/code/lib/csf-plugin/src/index.ts
index 6cc9cfcd594b..95dd6e3199fe 100644
--- a/code/lib/csf-plugin/src/index.ts
+++ b/code/lib/csf-plugin/src/index.ts
@@ -1,39 +1,39 @@
 import { createUnplugin } from 'unplugin';
-import fs from 'fs/promises';
-import { loadCsf, enrichCsf, formatCsf } from '@storybook/csf-tools';
 import type { EnrichCsfOptions } from '@storybook/csf-tools';
+import { rollupBasedPlugin } from './rollup-based-plugin';
+import { STORIES_REGEX } from './constants';
 
 export type CsfPluginOptions = EnrichCsfOptions;
 
-// Ignore node_modules
-const STORIES_REGEX = /(?<!node_modules.*)\.(story|stories)\.[tj]sx?$/;
-
-const logger = console;
-
 export const unplugin = createUnplugin<CsfPluginOptions>((options) => {
   return {
     name: 'unplugin-csf',
-    transformInclude(id) {
-      return STORIES_REGEX.test(id);
+    rollup: {
+      ...rollupBasedPlugin(options),
+    },
+    vite: {
+      enforce: 'pre',
+      ...rollupBasedPlugin(options),
+    },
+    webpack(compiler) {
+      compiler.options.module.rules.unshift({
+        test: STORIES_REGEX,
+        enforce: 'post',
+        use: {
+          options,
+          loader: require.resolve('@storybook/csf-plugin/dist/webpack-loader'),
+        },
+      });
     },
-    async transform(code, id) {
-      const sourceCode = await fs.readFile(id, 'utf-8');
-      try {
-        const makeTitle = (userTitle: string) => userTitle || 'default';
-        const csf = loadCsf(code, { makeTitle }).parse();
-        const csfSource = loadCsf(sourceCode, {
-          makeTitle,
-        }).parse();
-        enrichCsf(csf, csfSource, options);
-        return formatCsf(csf, { sourceMaps: true });
-      } catch (err: any) {
-        // This can be called on legacy storiesOf files, so just ignore
-        // those errors. But warn about other errors.
-        if (!err.message?.startsWith('CSF:')) {
-          logger.warn(err.message);
-        }
-        return code;
-      }
+    rspack(compiler) {
+      compiler.options.module.rules.unshift({
+        test: STORIES_REGEX,
+        enforce: 'post',
+        use: {
+          options,
+          loader: require.resolve('@storybook/csf-plugin/dist/webpack-loader'),
+        },
+      });
     },
   };
 });
diff --git a/code/lib/csf-plugin/src/rollup-based-plugin.ts b/code/lib/csf-plugin/src/rollup-based-plugin.ts
new file mode 100644
index 000000000000..a8e77e9f1f07
--- /dev/null
+++ b/code/lib/csf-plugin/src/rollup-based-plugin.ts
@@ -0,0 +1,37 @@
+import type { EnrichCsfOptions } from '@storybook/csf-tools';
+import { enrichCsf, formatCsf, loadCsf } from '@storybook/csf-tools';
+import type { RollupPlugin } from 'unplugin';
+import fs from 'fs/promises';
+import { STORIES_REGEX } from './constants';
+
+const logger = console;
+
+export function rollupBasedPlugin(options: EnrichCsfOptions): Partial<RollupPlugin<any>> {
+  return {
+    name: 'plugin-csf',
+    async transform(code, id) {
+      if (!STORIES_REGEX.test(id)) {
+        return;
+      }
+
+      const sourceCode = await fs.readFile(id, 'utf-8');
+      try {
+        const makeTitle = (userTitle: string) => userTitle || 'default';
+        const csf = loadCsf(code, { makeTitle }).parse();
+        const csfSource = loadCsf(sourceCode, {
+          makeTitle,
+        }).parse();
+        enrichCsf(csf, csfSource, options);
+        const inputSourceMap = this.getCombinedSourcemap();
+        return formatCsf(csf, { sourceMaps: true, inputSourceMap }, code);
+      } catch (err: any) {
+        // This can be called on legacy storiesOf files, so just ignore
+        // those errors. But warn about other errors.
+        if (!err.message?.startsWith('CSF:')) {
+          logger.warn(err.message);
+        }
+        return code;
+      }
+    },
+  };
+}
diff --git a/code/lib/csf-plugin/src/webpack-loader.ts b/code/lib/csf-plugin/src/webpack-loader.ts
new file mode 100644
index 000000000000..98ec11179308
--- /dev/null
+++ b/code/lib/csf-plugin/src/webpack-loader.ts
@@ -0,0 +1,40 @@
+import fs from 'fs/promises';
+import type { EnrichCsfOptions } from '@storybook/csf-tools';
+import { loadCsf, formatCsf, enrichCsf } from '@storybook/csf-tools';
+
+interface LoaderContext {
+  async: () => (err: Error | null, result?: string, map?: any) => void;
+  getOptions: () => EnrichCsfOptions;
+  resourcePath: string;
+}
+
+async function loader(this: LoaderContext, content: string, map: any) {
+  const callback = this.async();
+  const options = this.getOptions();
+  const id = this.resourcePath;
+
+  const sourceCode = await fs.readFile(id, 'utf-8');
+
+  try {
+    const makeTitle = (userTitle: string) => userTitle || 'default';
+    const csf = loadCsf(content, { makeTitle }).parse();
+    const csfSource = loadCsf(sourceCode, { makeTitle }).parse();
+    enrichCsf(csf, csfSource, options);
+    const formattedCsf = formatCsf(csf, { sourceMaps: true, inputSourceMap: map }, content);
+
+    if (typeof formattedCsf === 'string') {
+      return callback(null, formattedCsf, map);
+    }
+
+    callback(null, formattedCsf.code, formattedCsf.map);
+  } catch (err: any) {
+    // This can be called on legacy storiesOf files, so just ignore
+    // those errors. But warn about other errors.
+    if (!err.message?.startsWith('CSF:')) {
+      console.warn(err.message);
+    }
+    callback(null, content, map);
+  }
+}
+
+export default loader;
diff --git a/code/lib/csf-tools/src/CsfFile.ts b/code/lib/csf-tools/src/CsfFile.ts
index cac931501eec..ce0db70e3393 100644
--- a/code/lib/csf-tools/src/CsfFile.ts
+++ b/code/lib/csf-tools/src/CsfFile.ts
@@ -583,15 +583,19 @@ export const loadCsf = (code: string, options: CsfOptions) => {
 interface FormatOptions {
   sourceMaps?: boolean;
   preserveStyle?: boolean;
+  inputSourceMap?: any;
 }
 
-export const formatCsf = (csf: CsfFile, options: FormatOptions = { sourceMaps: false }) => {
-  const result = generate.default(csf._ast, options);
+export const formatCsf = (
+  csf: CsfFile,
+  options: FormatOptions = { sourceMaps: false },
+  code?: string
+) => {
+  const result = generate.default(csf._ast, options, code);
   if (options.sourceMaps) {
     return result;
   }
-  const { code } = result;
-  return code;
+  return result.code;
 };
 
 /**
diff --git a/code/lib/manager-api/src/lib/stories.test.ts b/code/lib/manager-api/src/lib/stories.test.ts
index fcce4a94d874..f8a7c5882cfb 100644
--- a/code/lib/manager-api/src/lib/stories.test.ts
+++ b/code/lib/manager-api/src/lib/stories.test.ts
@@ -1,6 +1,11 @@
 import { describe, it, expect } from 'vitest';
-import type { StoryIndexV2, StoryIndexV3 } from '@storybook/types';
-import { transformStoryIndexV2toV3, transformStoryIndexV3toV4 } from './stories';
+import type { StoryIndexV2, StoryIndexV3, API_PreparedStoryIndex } from '@storybook/types';
+import {
+  transformStoryIndexV2toV3,
+  transformStoryIndexV3toV4,
+  transformStoryIndexV4toV5,
+} from './stories';
+import { mockEntries } from '../tests/mockStoriesEntries';
 
 const baseV2: StoryIndexV2['stories'][0] = {
   id: '1',
@@ -151,3 +156,61 @@ describe('transformStoryIndexV3toV4', () => {
     `);
   });
 });
+
+describe('transformStoryIndexV4toV5', () => {
+  it('transforms a StoryIndexV4 to an API_PreparedStoryIndex correctly', () => {
+    const indexV4: API_PreparedStoryIndex = {
+      v: 4,
+      entries: mockEntries,
+    };
+
+    expect(transformStoryIndexV4toV5(indexV4)).toMatchInlineSnapshot(`
+      {
+        "entries": {
+          "component-a--docs": {
+            "id": "component-a--docs",
+            "importPath": "./path/to/component-a.ts",
+            "name": "Docs",
+            "storiesImports": [],
+            "tags": [
+              "dev",
+            ],
+            "title": "Component A",
+            "type": "docs",
+          },
+          "component-a--story-1": {
+            "id": "component-a--story-1",
+            "importPath": "./path/to/component-a.ts",
+            "name": "Story 1",
+            "tags": [
+              "dev",
+            ],
+            "title": "Component A",
+            "type": "story",
+          },
+          "component-a--story-2": {
+            "id": "component-a--story-2",
+            "importPath": "./path/to/component-a.ts",
+            "name": "Story 2",
+            "tags": [
+              "dev",
+            ],
+            "title": "Component A",
+            "type": "story",
+          },
+          "component-b--story-3": {
+            "id": "component-b--story-3",
+            "importPath": "./path/to/component-b.ts",
+            "name": "Story 3",
+            "tags": [
+              "dev",
+            ],
+            "title": "Component B",
+            "type": "story",
+          },
+        },
+        "v": 5,
+      }
+    `);
+  });
+});
diff --git a/code/lib/manager-api/src/lib/stories.ts b/code/lib/manager-api/src/lib/stories.ts
index 9d6b1817e677..b409754bb106 100644
--- a/code/lib/manager-api/src/lib/stories.ts
+++ b/code/lib/manager-api/src/lib/stories.ts
@@ -86,7 +86,7 @@ export const transformSetStoriesStoryDataToPreparedStoryIndex = (
     {} as API_PreparedStoryIndex['entries']
   );
 
-  return { v: 4, entries };
+  return { v: 5, entries };
 };
 
 export const transformStoryIndexV2toV3 = (index: StoryIndexV2): StoryIndexV3 => {
@@ -139,6 +139,30 @@ export const transformStoryIndexV3toV4 = (index: StoryIndexV3): API_PreparedStor
   };
 };
 
+/**
+ * Storybook 8.0 and below did not automatically tag stories with 'dev'.
+ * Therefore Storybook 8.1 and above would not show composed 8.0 stories by default.
+ * This function adds the 'dev' tag to all stories in the index to workaround this issue.
+ */
+export const transformStoryIndexV4toV5 = (
+  index: API_PreparedStoryIndex
+): API_PreparedStoryIndex => {
+  return {
+    v: 5,
+    entries: Object.values(index.entries).reduce(
+      (acc, entry) => {
+        acc[entry.id] = {
+          ...entry,
+          tags: entry.tags ? [...entry.tags, 'dev'] : ['dev'],
+        };
+
+        return acc;
+      },
+      {} as API_PreparedStoryIndex['entries']
+    ),
+  };
+};
+
 type ToStoriesHashOptions = {
   provider: API_Provider<API>;
   docsOptions: DocsOptions;
@@ -157,6 +181,7 @@ export const transformStoryIndexToStoriesHash = (
   let index = input;
   index = index.v === 2 ? transformStoryIndexV2toV3(index as any) : index;
   index = index.v === 3 ? transformStoryIndexV3toV4(index as any) : index;
+  index = index.v === 4 ? transformStoryIndexV4toV5(index as any) : index;
   index = index as API_PreparedStoryIndex;
 
   const entryValues = Object.values(index.entries).filter((entry: any) => {
diff --git a/code/lib/manager-api/src/tests/refs.test.ts b/code/lib/manager-api/src/tests/refs.test.ts
index 950b5e3e7a63..022573616835 100644
--- a/code/lib/manager-api/src/tests/refs.test.ts
+++ b/code/lib/manager-api/src/tests/refs.test.ts
@@ -448,7 +448,7 @@ describe('Refs API', () => {
       setupResponses({
         indexPrivate: {
           ok: true,
-          response: async () => ({ v: 4, entries: {} }),
+          response: async () => ({ v: 5, entries: {} }),
         },
         storiesPrivate: {
           ok: true,
@@ -506,7 +506,7 @@ describe('Refs API', () => {
               "index": {},
               "internal_index": {
                 "entries": {},
-                "v": 4,
+                "v": 5,
               },
               "title": "Fake",
               "type": "lazy",
@@ -524,7 +524,7 @@ describe('Refs API', () => {
               "index": {},
               "internal_index": {
                 "entries": {},
-                "v": 4,
+                "v": 5,
               },
               "title": "Fake",
               "type": "lazy",
@@ -542,7 +542,7 @@ describe('Refs API', () => {
       setupResponses({
         indexPrivate: {
           ok: true,
-          response: async () => ({ v: 4, entries: {} }),
+          response: async () => ({ v: 5, entries: {} }),
         },
         storiesPrivate: {
           ok: true,
@@ -603,7 +603,7 @@ describe('Refs API', () => {
               "index": {},
               "internal_index": {
                 "entries": {},
-                "v": 4,
+                "v": 5,
               },
               "title": "Fake",
               "type": "lazy",
@@ -622,7 +622,7 @@ describe('Refs API', () => {
       setupResponses({
         indexPrivate: {
           ok: true,
-          response: async () => ({ v: 4, entries: {} }),
+          response: async () => ({ v: 5, entries: {} }),
         },
         storiesPrivate: {
           ok: true,
@@ -684,7 +684,7 @@ describe('Refs API', () => {
               "index": {},
               "internal_index": {
                 "entries": {},
-                "v": 4,
+                "v": 5,
               },
               "title": "Fake",
               "type": "lazy",
@@ -781,7 +781,7 @@ describe('Refs API', () => {
       setupResponses({
         indexPrivate: {
           ok: true,
-          response: async () => ({ v: 4, entries: {} }),
+          response: async () => ({ v: 5, entries: {} }),
         },
         storiesPrivate: {
           ok: true,
@@ -927,7 +927,7 @@ describe('Refs API', () => {
       setupResponses({
         indexPublic: {
           ok: true,
-          response: async () => ({ v: 4, entries: {} }),
+          response: async () => ({ v: 5, entries: {} }),
         },
         storiesPublic: {
           ok: true,
@@ -989,7 +989,7 @@ describe('Refs API', () => {
               "index": {},
               "internal_index": {
                 "entries": {},
-                "v": 4,
+                "v": 5,
               },
               "title": "Fake",
               "type": "lazy",
@@ -1008,7 +1008,7 @@ describe('Refs API', () => {
       setupResponses({
         indexPrivate: {
           ok: true,
-          response: async () => ({ v: 4, entries: {} }),
+          response: async () => ({ v: 5, entries: {} }),
         },
         storiesPrivate: {
           ok: true,
@@ -1070,7 +1070,7 @@ describe('Refs API', () => {
               "index": {},
               "internal_index": {
                 "entries": {},
-                "v": 4,
+                "v": 5,
               },
               "title": "Fake",
               "type": "lazy",
@@ -1206,7 +1206,7 @@ describe('Refs API', () => {
   describe('setRef', () => {
     it('can filter', async () => {
       const index: StoryIndex = {
-        v: 4,
+        v: 5,
         entries: {
           'a--1': {
             id: 'a--1',
diff --git a/code/lib/manager-api/src/tests/stories.test.ts b/code/lib/manager-api/src/tests/stories.test.ts
index 9adec207d158..7fe6102d0fd4 100644
--- a/code/lib/manager-api/src/tests/stories.test.ts
+++ b/code/lib/manager-api/src/tests/stories.test.ts
@@ -38,7 +38,7 @@ vi.mock('../lib/events', () => ({
 vi.mock('@storybook/global', () => ({
   global: {
     ...globalThis,
-    fetch: vi.fn(() => ({ json: () => ({ v: 4, entries: mockGetEntries() }) })),
+    fetch: vi.fn(() => ({ json: () => ({ v: 5, entries: mockGetEntries() }) })),
     CONFIG_TYPE: 'DEVELOPMENT',
   },
 }));
@@ -97,7 +97,7 @@ describe('stories API', () => {
       const moduleArgs = createMockModuleArgs({});
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { store } = moduleArgs;
-      api.setIndex({ v: 4, entries: mockEntries });
+      api.setIndex({ v: 5, entries: mockEntries });
       const { index } = store.getState();
       // We need exact key ordering, even if in theory JS doesn't guarantee it
       expect(Object.keys(index!)).toEqual([
@@ -139,7 +139,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { store } = moduleArgs;
       api.setIndex({
-        v: 4,
+        v: 5,
         entries: {
           'design-system-some-component--my-story': {
             type: 'story',
@@ -176,7 +176,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { store } = moduleArgs;
       api.setIndex({
-        v: 4,
+        v: 5,
         entries: {
           'root-first--story-1': {
             type: 'story',
@@ -213,7 +213,7 @@ describe('stories API', () => {
       const { store, provider } = moduleArgs;
       provider.getConfig.mockReturnValue({ sidebar: { showRoots: true } });
       api.setIndex({
-        v: 4,
+        v: 5,
         entries: {
           'a-b--1': {
             type: 'story',
@@ -252,7 +252,7 @@ describe('stories API', () => {
       const { store, provider } = moduleArgs;
       provider.getConfig.mockReturnValue({ sidebar: { showRoots: true } });
       api.setIndex({
-        v: 4,
+        v: 5,
         entries: {
           'a--1': {
             type: 'story',
@@ -287,7 +287,7 @@ describe('stories API', () => {
       const { store, provider } = moduleArgs;
       provider.getConfig.mockReturnValue({ sidebar: { showRoots: true } });
       api.setIndex({
-        v: 4,
+        v: 5,
         entries: {
           'a--1': { type: 'story', title: 'a', name: '1', id: 'a--1', importPath: './a.ts' },
           'b--1': { type: 'story', title: 'b', name: '1', id: 'b--1', importPath: './b.ts' },
@@ -314,7 +314,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { store } = moduleArgs;
       api.setIndex({
-        v: 4,
+        v: 5,
         entries: {
           'prepared--story': {
             type: 'story',
@@ -344,7 +344,7 @@ describe('stories API', () => {
       const moduleArgs = createMockModuleArgs({ fullAPI });
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { store, provider } = moduleArgs;
-      api.setIndex({ v: 4, entries: mockEntries });
+      api.setIndex({ v: 5, entries: mockEntries });
       provider.channel.emit(STORY_PREPARED, {
         id: 'component-a--story-1',
         parameters: { a: 'b' },
@@ -357,7 +357,7 @@ describe('stories API', () => {
         parameters: { a: 'b' },
         args: { c: 'd' },
       });
-      api.setIndex({ v: 4, entries: mockEntries });
+      api.setIndex({ v: 5, entries: mockEntries });
       // Let the promise/await chain resolve
       await new Promise((r) => setTimeout(r, 0));
       expect(store.getState().index!['component-a--story-1'] as API_StoryEntry).toMatchObject({
@@ -373,7 +373,7 @@ describe('stories API', () => {
         const { api } = initStories(moduleArgs as unknown as ModuleArgs);
         const { store } = moduleArgs;
 
-        api.setIndex({ v: 4, entries: docsEntries });
+        api.setIndex({ v: 5, entries: docsEntries });
         const { index } = store.getState();
         // We need exact key ordering, even if in theory JS doesn't guarantee it
         expect(Object.keys(index!)).toEqual([
@@ -398,7 +398,7 @@ describe('stories API', () => {
             docsOptions: { docsMode: true },
           });
           const { store } = moduleArgs;
-          api.setIndex({ v: 4, entries: docsEntries });
+          api.setIndex({ v: 5, entries: docsEntries });
           const { index } = store.getState();
           expect(Object.keys(index!)).toEqual(['component-b', 'component-b--docs']);
         });
@@ -413,7 +413,7 @@ describe('stories API', () => {
       initStories(moduleArgs as unknown as ModuleArgs);
       const { store, provider } = moduleArgs;
 
-      provider.channel.emit(SET_INDEX, { v: 4, entries: mockEntries });
+      provider.channel.emit(SET_INDEX, { v: 5, entries: mockEntries });
       expect(store.getState().index).toEqual(
         expect.objectContaining({
           'component-a': expect.any(Object),
@@ -433,7 +433,7 @@ describe('stories API', () => {
         getCurrentParameter: vi.fn().mockReturnValue('options'),
       });
 
-      provider.channel.emit(SET_INDEX, { v: 4, entries: mockEntries });
+      provider.channel.emit(SET_INDEX, { v: 5, entries: mockEntries });
       expect(fullAPI.setOptions).toHaveBeenCalledWith('options');
     });
   });
@@ -461,7 +461,7 @@ describe('stories API', () => {
           status: 200,
           ok: true,
           json: () => ({
-            v: 4,
+            v: 5,
             entries: {
               'component-a--story-1': {
                 type: 'story',
@@ -512,7 +512,7 @@ describe('stories API', () => {
           status: 200,
           ok: true,
           json: () => ({
-            v: 4,
+            v: 5,
             entries: {
               'component-a--story-1': {
                 type: 'story',
@@ -616,7 +616,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { provider, store } = moduleArgs;
 
-      api.setIndex({ v: 4, entries: preparedEntries });
+      api.setIndex({ v: 5, entries: preparedEntries });
       const { index } = store.getState();
       expect((index!['a--1'] as API_StoryEntry).args).toEqual({ a: 'b' });
       expect((index!['b--1'] as API_StoryEntry).args).toEqual({ x: 'y' });
@@ -653,7 +653,7 @@ describe('stories API', () => {
       const listener = vi.fn();
       provider.channel.on(UPDATE_STORY_ARGS, listener);
 
-      api.setIndex({ v: 4, entries: preparedEntries });
+      api.setIndex({ v: 5, entries: preparedEntries });
       api.updateStoryArgs({ id: 'a--1' } as API_StoryEntry, { foo: 'bar' });
 
       expect(listener).toHaveBeenCalledWith({
@@ -677,7 +677,7 @@ describe('stories API', () => {
       const listener = vi.fn();
       provider.channel.on(UPDATE_STORY_ARGS, listener);
 
-      api.setIndex({ v: 4, entries: preparedEntries });
+      api.setIndex({ v: 5, entries: preparedEntries });
       api.updateStoryArgs({ id: 'a--1', refId: 'refId' } as API_StoryEntry, { foo: 'bar' });
       expect(listener).toHaveBeenCalledWith({
         storyId: 'a--1',
@@ -695,7 +695,7 @@ describe('stories API', () => {
       const listener = vi.fn();
       provider.channel.on(RESET_STORY_ARGS, listener);
 
-      api.setIndex({ v: 4, entries: preparedEntries });
+      api.setIndex({ v: 5, entries: preparedEntries });
       api.resetStoryArgs({ id: 'a--1' } as API_StoryEntry, ['foo']);
 
       expect(listener).toHaveBeenCalledWith({
@@ -719,7 +719,7 @@ describe('stories API', () => {
       const listener = vi.fn();
       provider.channel.on(RESET_STORY_ARGS, listener);
 
-      api.setIndex({ v: 4, entries: preparedEntries });
+      api.setIndex({ v: 5, entries: preparedEntries });
       api.resetStoryArgs({ id: 'a--1', refId: 'refId' } as API_StoryEntry, ['foo']);
       expect(listener).toHaveBeenCalledWith({
         storyId: 'a--1',
@@ -738,7 +738,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { navigate } = moduleArgs;
 
-      api.setIndex({ v: 4, entries: navigationEntries });
+      api.setIndex({ v: 5, entries: navigationEntries });
       api.jumpToStory(1);
 
       expect(navigate).toHaveBeenCalledWith('/story/a--2');
@@ -749,7 +749,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { navigate } = moduleArgs;
 
-      api.setIndex({ v: 4, entries: navigationEntries });
+      api.setIndex({ v: 5, entries: navigationEntries });
       api.jumpToStory(-1);
 
       expect(navigate).toHaveBeenCalledWith('/story/a--1');
@@ -764,7 +764,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { navigate } = moduleArgs;
 
-      api.setIndex({ v: 4, entries: navigationEntries });
+      api.setIndex({ v: 5, entries: navigationEntries });
       api.jumpToStory(1);
       expect(navigate).not.toHaveBeenCalled();
     });
@@ -774,7 +774,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { navigate } = moduleArgs;
 
-      api.setIndex({ v: 4, entries: navigationEntries });
+      api.setIndex({ v: 5, entries: navigationEntries });
       api.jumpToStory(-1);
       expect(navigate).not.toHaveBeenCalled();
     });
@@ -784,7 +784,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { navigate } = moduleArgs;
 
-      api.setIndex({ v: 4, entries: navigationEntries });
+      api.setIndex({ v: 5, entries: navigationEntries });
       api.jumpToStory(1);
       expect(navigate).not.toHaveBeenCalled();
     });
@@ -797,7 +797,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { store } = moduleArgs;
 
-      api.setIndex({ v: 4, entries: navigationEntries });
+      api.setIndex({ v: 5, entries: navigationEntries });
       const result = api.findSiblingStoryId('a--1', store.getState().index!, 1, false);
       expect(result).toBe('a--2');
     });
@@ -807,7 +807,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { store } = moduleArgs;
 
-      api.setIndex({ v: 4, entries: navigationEntries });
+      api.setIndex({ v: 5, entries: navigationEntries });
       const result = api.findSiblingStoryId('a--1', store.getState().index!, 1, true);
       expect(result).toBe('b-c--1');
     });
@@ -819,7 +819,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { navigate } = moduleArgs;
 
-      api.setIndex({ v: 4, entries: navigationEntries });
+      api.setIndex({ v: 5, entries: navigationEntries });
       api.jumpToComponent(1);
       expect(navigate).toHaveBeenCalledWith('/story/b-c--1');
     });
@@ -833,7 +833,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { navigate } = moduleArgs;
 
-      api.setIndex({ v: 4, entries: navigationEntries });
+      api.setIndex({ v: 5, entries: navigationEntries });
       api.jumpToComponent(-1);
       expect(navigate).toHaveBeenCalledWith('/story/a--1');
     });
@@ -847,7 +847,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { navigate } = moduleArgs;
 
-      api.setIndex({ v: 4, entries: navigationEntries });
+      api.setIndex({ v: 5, entries: navigationEntries });
       api.jumpToComponent(1);
       expect(navigate).not.toHaveBeenCalled();
     });
@@ -857,7 +857,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { navigate } = moduleArgs;
 
-      api.setIndex({ v: 4, entries: navigationEntries });
+      api.setIndex({ v: 5, entries: navigationEntries });
       api.jumpToComponent(-1);
       expect(navigate).not.toHaveBeenCalled();
     });
@@ -869,7 +869,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { navigate } = moduleArgs;
 
-      api.setIndex({ v: 4, entries: navigationEntries });
+      api.setIndex({ v: 5, entries: navigationEntries });
       api.selectStory('a--2');
       expect(navigate).toHaveBeenCalledWith('/story/a--2');
     });
@@ -880,7 +880,7 @@ describe('stories API', () => {
       const { navigate } = moduleArgs;
 
       api.setIndex({
-        v: 4,
+        v: 5,
         entries: {
           ...navigationEntries,
           'intro--docs': {
@@ -902,7 +902,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { store } = moduleArgs;
 
-      api.setIndex({ v: 4, entries: navigationEntries });
+      api.setIndex({ v: 5, entries: navigationEntries });
       api.selectStory('a--1');
       expect(store.getState().settings.lastTrackedStoryId).toBe('a--1');
     });
@@ -913,7 +913,7 @@ describe('stories API', () => {
         const { api } = initStories(moduleArgs as unknown as ModuleArgs);
         const { navigate } = moduleArgs;
 
-        api.setIndex({ v: 4, entries: navigationEntries });
+        api.setIndex({ v: 5, entries: navigationEntries });
         api.selectStory('a', '2');
         expect(navigate).toHaveBeenCalledWith('/story/a--2');
       });
@@ -923,7 +923,7 @@ describe('stories API', () => {
         const { api } = initStories(moduleArgs as unknown as ModuleArgs);
         const { navigate } = moduleArgs;
 
-        api.setIndex({ v: 4, entries: navigationEntries });
+        api.setIndex({ v: 5, entries: navigationEntries });
         api.selectStory(undefined, '2');
         expect(navigate).toHaveBeenCalledWith('/story/a--2');
       });
@@ -934,7 +934,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { navigate } = moduleArgs;
 
-      api.setIndex({ v: 4, entries: navigationEntries });
+      api.setIndex({ v: 5, entries: navigationEntries });
       api.selectStory('a--2');
       expect(navigate).toHaveBeenCalledWith('/story/a--2');
     });
@@ -944,7 +944,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { navigate } = moduleArgs;
 
-      api.setIndex({ v: 4, entries: navigationEntries });
+      api.setIndex({ v: 5, entries: navigationEntries });
       api.selectStory('a');
       expect(navigate).toHaveBeenCalledWith('/story/a--1');
     });
@@ -954,7 +954,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { navigate } = moduleArgs;
 
-      api.setIndex({ v: 4, entries: navigationEntries });
+      api.setIndex({ v: 5, entries: navigationEntries });
       api.selectStory('b');
       expect(navigate).toHaveBeenCalledWith('/story/b-c--1');
     });
@@ -964,7 +964,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { navigate } = moduleArgs;
 
-      api.setIndex({ v: 4, entries: navigationEntries });
+      api.setIndex({ v: 5, entries: navigationEntries });
       api.selectStory('A');
       expect(navigate).toHaveBeenCalledWith('/story/a--1');
     });
@@ -974,7 +974,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { navigate } = moduleArgs;
 
-      api.setIndex({ v: 4, entries: navigationEntries });
+      api.setIndex({ v: 5, entries: navigationEntries });
       api.selectStory();
       expect(navigate).toHaveBeenCalledWith('/story/a--1');
     });
@@ -985,7 +985,7 @@ describe('stories API', () => {
         const { api } = initStories(moduleArgs as unknown as ModuleArgs);
         const { navigate } = moduleArgs;
 
-        api.setIndex({ v: 4, entries: navigationEntries });
+        api.setIndex({ v: 5, entries: navigationEntries });
         api.selectStory('b/e', '1');
         expect(navigate).toHaveBeenCalledWith('/story/custom-id--1');
       });
@@ -995,7 +995,7 @@ describe('stories API', () => {
         const { api } = initStories(moduleArgs as unknown as ModuleArgs);
         const { navigate } = moduleArgs;
 
-        api.setIndex({ v: 4, entries: navigationEntries });
+        api.setIndex({ v: 5, entries: navigationEntries });
         api.selectStory('custom-id', '1');
         expect(navigate).toHaveBeenCalledWith('/story/custom-id--1');
       });
@@ -1005,7 +1005,7 @@ describe('stories API', () => {
         const { api } = initStories(moduleArgs as unknown as ModuleArgs);
         const { navigate } = moduleArgs;
 
-        api.setIndex({ v: 4, entries: navigationEntries });
+        api.setIndex({ v: 5, entries: navigationEntries });
         api.selectStory('b/e');
         expect(navigate).toHaveBeenCalledWith('/story/custom-id--1');
       });
@@ -1019,7 +1019,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { provider, store } = moduleArgs;
 
-      api.setIndex({ v: 4, entries: mockEntries });
+      api.setIndex({ v: 5, entries: mockEntries });
 
       provider.channel.emit(STORY_PREPARED, {
         id: 'component-a--story-1',
@@ -1045,7 +1045,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { provider } = moduleArgs;
 
-      api.setIndex({ v: 4, entries: mockEntries });
+      api.setIndex({ v: 5, entries: mockEntries });
 
       provider.channel.emit(STORY_PREPARED, {
         id: 'component-a--story-1',
@@ -1068,7 +1068,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { provider, store } = moduleArgs;
 
-      api.setIndex({ v: 4, entries: mockEntries });
+      api.setIndex({ v: 5, entries: mockEntries });
 
       provider.channel.emit(DOCS_PREPARED, {
         id: 'component-a--docs',
@@ -1092,7 +1092,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { provider, store } = moduleArgs;
 
-      api.setIndex({ v: 4, entries: mockEntries });
+      api.setIndex({ v: 5, entries: mockEntries });
 
       provider.channel.emit(CONFIG_ERROR, { message: 'Failed to run configure' });
       const { previewInitialized } = store.getState();
@@ -1104,7 +1104,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { provider } = moduleArgs;
 
-      api.setIndex({ v: 4, entries: mockEntries });
+      api.setIndex({ v: 5, entries: mockEntries });
 
       getEventMetadata.mockReturnValueOnce({
         sourceType: 'external',
@@ -1225,7 +1225,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { store } = moduleArgs;
 
-      await api.setIndex({ v: 4, entries: mockEntries });
+      await api.setIndex({ v: 5, entries: mockEntries });
 
       await expect(
         api.experimental_updateStatus('a-addon-id', {
@@ -1279,7 +1279,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { store } = moduleArgs;
 
-      await api.setIndex({ v: 4, entries: mockEntries });
+      await api.setIndex({ v: 5, entries: mockEntries });
 
       await expect(
         api.experimental_updateStatus('a-addon-id', {
@@ -1315,7 +1315,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { store } = moduleArgs;
 
-      await api.setIndex({ v: 4, entries: mockEntries });
+      await api.setIndex({ v: 5, entries: mockEntries });
 
       await expect(
         api.experimental_updateStatus('a-addon-id', {
@@ -1353,7 +1353,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { store } = moduleArgs;
 
-      await api.setIndex({ v: 4, entries: mockEntries });
+      await api.setIndex({ v: 5, entries: mockEntries });
 
       // setup initial state
       await expect(
@@ -1403,7 +1403,7 @@ describe('stories API', () => {
       const moduleArgs = createMockModuleArgs({});
       const { state, api } = initStories(moduleArgs as unknown as ModuleArgs);
 
-      await api.setIndex({ v: 4, entries: mockEntries });
+      await api.setIndex({ v: 5, entries: mockEntries });
 
       expect(state).toEqual(
         expect.objectContaining({
@@ -1416,7 +1416,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { store } = moduleArgs;
 
-      await api.setIndex({ v: 4, entries: mockEntries });
+      await api.setIndex({ v: 5, entries: mockEntries });
 
       api.experimental_setFilter('myCustomFilter', () => true);
 
@@ -1434,7 +1434,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { store } = moduleArgs;
 
-      await api.setIndex({ v: 4, entries: navigationEntries });
+      await api.setIndex({ v: 5, entries: navigationEntries });
       await api.experimental_setFilter('myCustomFilter', (item: any) => item.id.startsWith('a'));
 
       const { index } = store.getState();
@@ -1484,7 +1484,7 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { store } = moduleArgs;
 
-      await api.setIndex({ v: 4, entries: navigationEntries });
+      await api.setIndex({ v: 5, entries: navigationEntries });
       await api.experimental_setFilter(
         'myCustomFilter',
         (item: any) =>
@@ -1538,10 +1538,10 @@ describe('stories API', () => {
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
       const { store } = moduleArgs;
 
-      await api.setIndex({ v: 4, entries: navigationEntries });
+      await api.setIndex({ v: 5, entries: navigationEntries });
       await api.experimental_setFilter('myCustomFilter', (item: any) => item.id.startsWith('a'));
 
-      await api.setIndex({ v: 4, entries: navigationEntries });
+      await api.setIndex({ v: 5, entries: navigationEntries });
 
       const { index } = store.getState();
 
diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.mockdata.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.mockdata.ts
index 88dae40068dc..d2a7f884730d 100644
--- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.mockdata.ts
+++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.mockdata.ts
@@ -76,7 +76,7 @@ export const projectAnnotations = {
 export const getProjectAnnotations = vi.fn(() => projectAnnotations as any);
 
 export const storyIndex: StoryIndex = {
-  v: 4,
+  v: 5,
   entries: {
     'component-one--docs': {
       type: 'docs',
diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts
index 0ba45568789d..60110bc4686b 100644
--- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts
+++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts
@@ -314,7 +314,7 @@ describe('PreviewWeb', () => {
         preview.onStoriesChanged({
           importFn: newImportFn,
           storyIndex: {
-            v: 4,
+            v: 5,
             entries: {
               ...storyIndex.entries,
               'component-one--missing': {
@@ -369,7 +369,7 @@ describe('PreviewWeb', () => {
           preview.onStoriesChanged({
             importFn: newImportFn,
             storyIndex: {
-              v: 4,
+              v: 5,
               entries: {
                 ...storyIndex.entries,
                 'component-one--missing': {
@@ -2977,7 +2977,7 @@ describe('PreviewWeb', () => {
       const newImportFn = vi.fn(async (path) => ({ ...componentOneExports }));
 
       const newStoryIndex = {
-        v: 4,
+        v: 5,
         entries: {
           ...storyIndex.entries,
           'component-one--a': {
@@ -3174,7 +3174,7 @@ describe('PreviewWeb', () => {
       });
 
       const newStoryIndex = {
-        v: 4,
+        v: 5,
         entries: {
           'component-one--b': storyIndex.entries['component-one--b'],
         },
diff --git a/code/lib/preview-api/src/modules/store/StoryIndexStore.test.ts b/code/lib/preview-api/src/modules/store/StoryIndexStore.test.ts
index f9ec0b6102a3..84c80b5041f2 100644
--- a/code/lib/preview-api/src/modules/store/StoryIndexStore.test.ts
+++ b/code/lib/preview-api/src/modules/store/StoryIndexStore.test.ts
@@ -6,7 +6,7 @@ import { StoryIndexStore } from './StoryIndexStore';
 vi.mock('@storybook/channel-websocket', () => () => ({ on: vi.fn() }));
 
 const storyIndex: StoryIndex = {
-  v: 4,
+  v: 5,
   entries: {
     'component-one--a': {
       type: 'story',
@@ -34,7 +34,7 @@ const storyIndex: StoryIndex = {
 
 const makeStoryIndex = (titlesAndNames: any) => {
   return {
-    v: 4,
+    v: 5,
     entries: Object.fromEntries(
       titlesAndNames.map(([title, name]: [any, any]) => {
         const id = `${title}--${name}`.replace('/', '-');
diff --git a/code/lib/preview-api/src/modules/store/StoryIndexStore.ts b/code/lib/preview-api/src/modules/store/StoryIndexStore.ts
index 803e96553586..b56074778f6b 100644
--- a/code/lib/preview-api/src/modules/store/StoryIndexStore.ts
+++ b/code/lib/preview-api/src/modules/store/StoryIndexStore.ts
@@ -24,7 +24,7 @@ const getImportPathMap = memoize(1)((entries: StoryIndex['entries']) =>
 export class StoryIndexStore {
   entries: StoryIndex['entries'];
 
-  constructor({ entries }: StoryIndex = { v: 4, entries: {} }) {
+  constructor({ entries }: StoryIndex = { v: 5, entries: {} }) {
     this.entries = entries;
   }
 
diff --git a/code/lib/preview-api/src/modules/store/StoryStore.test.ts b/code/lib/preview-api/src/modules/store/StoryStore.test.ts
index 5df413e09ceb..51d7664b468d 100644
--- a/code/lib/preview-api/src/modules/store/StoryStore.test.ts
+++ b/code/lib/preview-api/src/modules/store/StoryStore.test.ts
@@ -49,7 +49,7 @@ const projectAnnotations: ProjectAnnotations<any> = {
 };
 
 const storyIndex: StoryIndex = {
-  v: 4,
+  v: 5,
   entries: {
     'component-one--a': {
       type: 'story',
@@ -183,7 +183,7 @@ describe('StoryStore', () => {
       expect(prepareStory).toHaveBeenCalledTimes(1);
 
       // The stories are no longer in the index
-      await store.onStoriesChanged({ storyIndex: { v: 4, entries: {} } });
+      await store.onStoriesChanged({ storyIndex: { v: 5, entries: {} } });
 
       await expect(store.loadStory({ storyId: 'component-one--a' })).rejects.toThrow();
 
@@ -202,7 +202,7 @@ describe('StoryStore', () => {
       // Add a new story to the index that isn't different
       await store.onStoriesChanged({
         storyIndex: {
-          v: 4,
+          v: 5,
           entries: {
             ...storyIndex.entries,
             'new-component--story': {
@@ -233,7 +233,7 @@ describe('StoryStore', () => {
       await store.onStoriesChanged({
         importFn: newImportFn,
         storyIndex: {
-          v: 4,
+          v: 5,
           entries: {
             'component-one--a': {
               type: 'story',
@@ -262,7 +262,7 @@ describe('StoryStore', () => {
       await store.onStoriesChanged({
         importFn: newImportFn,
         storyIndex: {
-          v: 4,
+          v: 5,
           entries: {
             'component-one--a': {
               type: 'story',
@@ -334,7 +334,7 @@ describe('StoryStore', () => {
 
     it('returns them in the order they are in the index, not the file', async () => {
       const reversedIndex = {
-        v: 4,
+        v: 5,
         entries: {
           'component-one--b': storyIndex.entries['component-one--b'],
           'component-one--a': storyIndex.entries['component-one--a'],
@@ -587,7 +587,7 @@ describe('StoryStore', () => {
 
     it('does not include (modern) docs entries ever', async () => {
       const unnattachedStoryIndex: StoryIndex = {
-        v: 4,
+        v: 5,
         entries: {
           ...storyIndex.entries,
           'introduction--docs': {
diff --git a/code/lib/telemetry/src/storybook-metadata.ts b/code/lib/telemetry/src/storybook-metadata.ts
index e9ff8d844954..d3367ccbca14 100644
--- a/code/lib/telemetry/src/storybook-metadata.ts
+++ b/code/lib/telemetry/src/storybook-metadata.ts
@@ -69,6 +69,34 @@ export const computeStorybookMetadata = async ({
     };
   }
 
+  const testPackages = [
+    'playwright',
+    'vitest',
+    'jest',
+    'cypress',
+    'nightwatch',
+    'webdriver',
+    '@web/test-runner',
+    'puppeteer',
+    'karma',
+    'jasmine',
+    'chai',
+    'testing-library',
+    '@ngneat/spectator',
+    'wdio',
+    'msw',
+    'miragejs',
+    'sinon',
+  ];
+  const testPackageDeps = Object.keys(allDependencies).filter((dep) =>
+    testPackages.find((pkg) => dep.includes(pkg))
+  );
+  metadata.testPackages = Object.fromEntries(
+    await Promise.all(
+      testPackageDeps.map(async (dep) => [dep, (await getActualPackageVersion(dep))?.version])
+    )
+  );
+
   const monorepoType = getMonorepoType();
   if (monorepoType) {
     metadata.monorepo = monorepoType;
diff --git a/code/lib/telemetry/src/types.ts b/code/lib/telemetry/src/types.ts
index c6372084c2c8..35be60a4e893 100644
--- a/code/lib/telemetry/src/types.ts
+++ b/code/lib/telemetry/src/types.ts
@@ -54,6 +54,7 @@ export type StorybookMetadata = {
     packageName: string;
     version: string;
   };
+  testPackages?: Record<string, string | undefined>;
   hasStorybookEslint?: boolean;
   hasStaticDirs?: boolean;
   hasCustomWebpack?: boolean;
diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts
index f16ef638cbf4..7addf01fcb5e 100644
--- a/code/lib/types/src/modules/core-common.ts
+++ b/code/lib/types/src/modules/core-common.ts
@@ -582,4 +582,4 @@ export interface CoreCommon_StorybookInfo {
  * const framework: Framework = '@storybook/nextjs'; // valid and will be autocompleted
  * const framework: Framework = path.dirname(require.resolve(path.join("@storybook/nextjs", "package.json"))) // valid
  */
-export type CompatibleString<T extends string> = T | (string & Record<string, never>);
+export type CompatibleString<T extends string> = T | (string & {});
diff --git a/code/package.json b/code/package.json
index d00f2cf4eed3..4236e27f941f 100644
--- a/code/package.json
+++ b/code/package.json
@@ -166,7 +166,6 @@
     "@storybook/svelte-webpack5": "workspace:*",
     "@storybook/telemetry": "workspace:*",
     "@storybook/test": "workspace:*",
-    "@storybook/testing-library": "next",
     "@storybook/theming": "workspace:*",
     "@storybook/types": "workspace:*",
     "@storybook/vue3": "workspace:*",
@@ -299,5 +298,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.2.0-alpha.3"
 }
diff --git a/code/presets/react-webpack/src/loaders/react-docgen-loader.ts b/code/presets/react-webpack/src/loaders/react-docgen-loader.ts
index ba3dd1805999..115b10684509 100644
--- a/code/presets/react-webpack/src/loaders/react-docgen-loader.ts
+++ b/code/presets/react-webpack/src/loaders/react-docgen-loader.ts
@@ -70,7 +70,8 @@ let matchPath: TsconfigPaths.MatchPath | undefined;
 
 export default async function reactDocgenLoader(
   this: LoaderContext<{ debug: boolean }>,
-  source: string
+  source: string,
+  map: any
 ) {
   const callback = this.async();
   // get options
@@ -115,11 +116,16 @@ export default async function reactDocgenLoader(
       }
     });
 
-    const map = magicString.generateMap({
-      includeContent: true,
-      source: this.resourcePath,
-    });
-    callback(null, magicString.toString(), map);
+    callback(
+      null,
+      magicString.toString(),
+      map ??
+        magicString.generateMap({
+          hires: true,
+          source: this.resourcePath,
+          includeContent: true,
+        })
+    );
   } catch (error: any) {
     if (error.code === ERROR_CODES.MISSING_DEFINITION) {
       callback(null, source);
diff --git a/code/renderers/svelte/src/components/PreviewRender.svelte b/code/renderers/svelte/src/components/PreviewRender.svelte
index b2900a0ddb24..af881443b651 100644
--- a/code/renderers/svelte/src/components/PreviewRender.svelte
+++ b/code/renderers/svelte/src/components/PreviewRender.svelte
@@ -2,6 +2,7 @@
   import SlotDecorator from './SlotDecorator.svelte';
   import { dedent } from 'ts-dedent';
 
+  export let svelteVersion;
   export let name;
   export let title;
   export let storyFn;
@@ -55,4 +56,4 @@
   }
 </script>
 
-<SlotDecorator {Component} {props} on={{ ...eventsFromArgTypes, ...on }} />
+<SlotDecorator {svelteVersion} {Component} {props} on={{ ...eventsFromArgTypes, ...on }} />
diff --git a/code/renderers/svelte/src/components/SlotDecorator.svelte b/code/renderers/svelte/src/components/SlotDecorator.svelte
index 9de64db04c3d..cf5849113a25 100644
--- a/code/renderers/svelte/src/components/SlotDecorator.svelte
+++ b/code/renderers/svelte/src/components/SlotDecorator.svelte
@@ -1,6 +1,7 @@
 <script>
   import { onMount } from 'svelte';
 
+  export let svelteVersion;
   export let decorator = undefined;
   export let Component;
   export let props = {};
@@ -9,7 +10,7 @@
   let instance;
   let decoratorInstance;
   
-  if (on) {
+  if (on && svelteVersion < 5) {
     // Attach Svelte event listeners in Svelte v4
     // In Svelte v5 this is not possible anymore as instances are no longer classes with $on() properties, so it will be a no-op
     onMount(() => {
diff --git a/code/renderers/svelte/src/render.ts b/code/renderers/svelte/src/render.ts
index 2219e21b3760..0ea4a86e9800 100644
--- a/code/renderers/svelte/src/render.ts
+++ b/code/renderers/svelte/src/render.ts
@@ -77,6 +77,7 @@ function renderToCanvasV4(
     const mountedComponent = new PreviewRender({
       target: canvasElement,
       props: {
+        svelteVersion: 4,
         storyFn,
         storyContext,
         name,
@@ -148,6 +149,7 @@ function renderToCanvasV5(
       name,
       title,
       showError,
+      svelteVersion: 5,
     });
     const mountedComponent = svelte.mount(PreviewRender, {
       target: canvasElement,
diff --git a/code/renderers/svelte/template/cli/js/Page.stories.js b/code/renderers/svelte/template/cli/js/Page.stories.js
index b46831695fb9..986d5e3e6ce8 100644
--- a/code/renderers/svelte/template/cli/js/Page.stories.js
+++ b/code/renderers/svelte/template/cli/js/Page.stories.js
@@ -1,4 +1,4 @@
-import { within, userEvent, expect } from '@storybook/test';
+import { within, userEvent, expect, waitFor } from '@storybook/test';
 
 import Page from './Page.svelte';
 
@@ -20,7 +20,7 @@ export const LoggedIn = {
     const loginButton = canvas.getByRole('button', { name: /Log in/i });
     await expect(loginButton).toBeInTheDocument();
     await userEvent.click(loginButton);
-    await expect(loginButton).not.toBeInTheDocument();
+    await waitFor(() => expect(loginButton).not.toBeInTheDocument());
 
     const logoutButton = canvas.getByRole('button', { name: /Log out/i });
     await expect(logoutButton).toBeInTheDocument();
diff --git a/code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts b/code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts
index 2283c6c74abe..38fc3bdc735e 100644
--- a/code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts
+++ b/code/renderers/svelte/template/cli/ts-3-8/Page.stories.ts
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/svelte';
-import { within, userEvent, expect } from '@storybook/test';
+import { within, userEvent, expect, waitFor } from '@storybook/test';
 
 import Page from './Page.svelte';
 
@@ -24,7 +24,7 @@ export const LoggedIn: Story = {
     const loginButton = canvas.getByRole('button', { name: /Log in/i });
     await expect(loginButton).toBeInTheDocument();
     await userEvent.click(loginButton);
-    await expect(loginButton).not.toBeInTheDocument();
+    await waitFor(() => expect(loginButton).not.toBeInTheDocument());
 
     const logoutButton = canvas.getByRole('button', { name: /Log out/i });
     await expect(logoutButton).toBeInTheDocument();
diff --git a/code/renderers/svelte/template/cli/ts-4-9/Page.stories.ts b/code/renderers/svelte/template/cli/ts-4-9/Page.stories.ts
index ace35ddb275d..6778ef2ef2b5 100644
--- a/code/renderers/svelte/template/cli/ts-4-9/Page.stories.ts
+++ b/code/renderers/svelte/template/cli/ts-4-9/Page.stories.ts
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/svelte';
-import { within, userEvent, expect } from '@storybook/test';
+import { within, userEvent, expect, waitFor } from '@storybook/test';
 
 import Page from './Page.svelte';
 
@@ -24,7 +24,7 @@ export const LoggedIn: Story = {
     const loginButton = canvas.getByRole('button', { name: /Log in/i });
     await expect(loginButton).toBeInTheDocument();
     await userEvent.click(loginButton);
-    await expect(loginButton).not.toBeInTheDocument();
+    await waitFor(() => expect(loginButton).not.toBeInTheDocument());
 
     const logoutButton = canvas.getByRole('button', { name: /Log out/i });
     await expect(logoutButton).toBeInTheDocument();
diff --git a/code/renderers/svelte/template/components/Pre.svelte b/code/renderers/svelte/template/components/Pre.svelte
index dd7bc5718d05..856448c220f5 100644
--- a/code/renderers/svelte/template/components/Pre.svelte
+++ b/code/renderers/svelte/template/components/Pre.svelte
@@ -12,7 +12,7 @@
    */
   export let text = '';
 
-  const finalText = object ? JSON.stringify(object, null, 2) : text;
+  $: finalText = object ? JSON.stringify(object, null, 2) : text;
 </script>
 
 <pre data-testid="pre" {style}>{finalText}</pre>
diff --git a/code/renderers/svelte/template/stories/args.stories.js b/code/renderers/svelte/template/stories/args.stories.js
index 71544066ecd1..c272310cb131 100644
--- a/code/renderers/svelte/template/stories/args.stories.js
+++ b/code/renderers/svelte/template/stories/args.stories.js
@@ -23,7 +23,10 @@ export const RemountOnResetStoryArgs = {
     await expect(button).toHaveTextContent('You clicked: 0');
 
     await userEvent.click(button);
-    await expect(button).toHaveTextContent('You clicked: 1');
+
+    await waitFor(async () => {
+      await expect(button).toHaveTextContent('You clicked: 1');
+    });
 
     await step("Update story args with { text: 'Changed' }", async () => {
       await channel.emit(UPDATE_STORY_ARGS, { storyId: id, updatedArgs: { text: 'Changed' } });
diff --git a/code/ui/blocks/src/blocks/Story.stories.tsx b/code/ui/blocks/src/blocks/Story.stories.tsx
index b3f8108feb23..6dcd2bfa9fb7 100644
--- a/code/ui/blocks/src/blocks/Story.stories.tsx
+++ b/code/ui/blocks/src/blocks/Story.stories.tsx
@@ -171,6 +171,9 @@ export const WithInteractionsAutoplayInParameters: Story = {
 
 export const ForceInitialArgs: Story = {
   ...StoryComponentStories.ForceInitialArgs,
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
   args: {
     of: ButtonStories.Primary,
     storyExport: ButtonStories.Primary,
diff --git a/code/ui/blocks/src/blocks/external/ExternalPreview.ts b/code/ui/blocks/src/blocks/external/ExternalPreview.ts
index bb6fc24764f2..203ac14ee3a0 100644
--- a/code/ui/blocks/src/blocks/external/ExternalPreview.ts
+++ b/code/ui/blocks/src/blocks/external/ExternalPreview.ts
@@ -31,7 +31,7 @@ export class ExternalPreview<TRenderer extends Renderer = Renderer> extends Prev
 
   private titles = new ConstantMap<MetaExports, ComponentTitle>('title-');
 
-  private storyIndex: StoryIndex = { v: 4, entries: {} };
+  private storyIndex: StoryIndex = { v: 5, entries: {} };
 
   private moduleExportsByImportPath: Record<Path, ModuleExports> = {};
 
diff --git a/code/ui/blocks/src/components/Story.stories.tsx b/code/ui/blocks/src/components/Story.stories.tsx
index fa1767d747af..b393a7e4614d 100644
--- a/code/ui/blocks/src/components/Story.stories.tsx
+++ b/code/ui/blocks/src/components/Story.stories.tsx
@@ -82,6 +82,9 @@ export const ForceInitialArgs = {
     forceInitialArgs: true,
     renderStoryToElement,
   },
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
   // test that it ignores updated args by emitting an arg update and assert that it isn't reflected in the DOM
   play: async ({ args, canvasElement, loaded }: PlayFunctionContext<WebRenderer>) => {
     const docsContext = loaded.docsContext as DocsContextProps;
diff --git a/code/ui/blocks/src/controls/Date.tsx b/code/ui/blocks/src/controls/Date.tsx
index 53eedf56c50c..938fc8c8c33b 100644
--- a/code/ui/blocks/src/controls/Date.tsx
+++ b/code/ui/blocks/src/controls/Date.tsx
@@ -74,15 +74,16 @@ export const DateControl: FC<DateProps> = ({ name, value, onChange, onFocus, onB
   useEffect(() => {
     if (valid !== false) {
       if (dateRef && dateRef.current) {
-        dateRef.current.value = formatDate(value);
+        dateRef.current.value = value ? formatDate(value) : '';
       }
       if (timeRef && timeRef.current) {
-        timeRef.current.value = formatTime(value);
+        timeRef.current.value = value ? formatTime(value) : '';
       }
     }
   }, [value]);
 
   const onDateChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.value) return onChange();
     const parsed = parseDate(e.target.value);
     const result = new Date(value);
     result.setFullYear(parsed.getFullYear(), parsed.getMonth(), parsed.getDate());
@@ -92,6 +93,7 @@ export const DateControl: FC<DateProps> = ({ name, value, onChange, onFocus, onB
   };
 
   const onTimeChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.value) return onChange();
     const parsed = parseTime(e.target.value);
     const result = new Date(value);
     result.setHours(parsed.getHours());
diff --git a/code/ui/blocks/src/controls/types.ts b/code/ui/blocks/src/controls/types.ts
index 26460ff6184c..4da8dc198977 100644
--- a/code/ui/blocks/src/controls/types.ts
+++ b/code/ui/blocks/src/controls/types.ts
@@ -5,7 +5,7 @@ export interface ControlProps<T> {
   value?: T;
   defaultValue?: T;
   argType?: ArgType;
-  onChange: (value: T) => T | void;
+  onChange: (value?: T) => T | void;
   onFocus?: (evt: any) => void;
   onBlur?: (evt: any) => void;
 }
diff --git a/code/ui/manager/static/fonts.css b/code/ui/manager/static/fonts.css
deleted file mode 100644
index 90050cc0bffa..000000000000
--- a/code/ui/manager/static/fonts.css
+++ /dev/null
@@ -1,31 +0,0 @@
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('./nunito-sans-regular.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url('./nunito-sans-italic.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('./nunito-sans-bold.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  src: url('./nunito-sans-bold-italic.woff2') format('woff2');
-}
diff --git a/code/yarn.lock b/code/yarn.lock
index f12c511b2380..16d76a138946 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -5537,17 +5537,17 @@ __metadata:
     webpack: "npm:5"
     zone.js: "npm:^0.14.2"
   peerDependencies:
-    "@angular-devkit/architect": ">=0.1500.0 < 0.1800.0"
-    "@angular-devkit/build-angular": ">=15.0.0 < 18.0.0"
-    "@angular-devkit/core": ">=15.0.0 < 18.0.0"
-    "@angular/cli": ">=15.0.0 < 18.0.0"
-    "@angular/common": ">=15.0.0 < 18.0.0"
-    "@angular/compiler": ">=15.0.0 < 18.0.0"
-    "@angular/compiler-cli": ">=15.0.0 < 18.0.0"
-    "@angular/core": ">=15.0.0 < 18.0.0"
-    "@angular/forms": ">=15.0.0 < 18.0.0"
-    "@angular/platform-browser": ">=15.0.0 < 18.0.0"
-    "@angular/platform-browser-dynamic": ">=15.0.0 < 18.0.0"
+    "@angular-devkit/architect": ">=0.1500.0 < 0.1900.0"
+    "@angular-devkit/build-angular": ">=15.0.0 < 19.0.0"
+    "@angular-devkit/core": ">=15.0.0 < 19.0.0"
+    "@angular/cli": ">=15.0.0 < 19.0.0"
+    "@angular/common": ">=15.0.0 < 19.0.0"
+    "@angular/compiler": ">=15.0.0 < 19.0.0"
+    "@angular/compiler-cli": ">=15.0.0 < 19.0.0"
+    "@angular/core": ">=15.0.0 < 19.0.0"
+    "@angular/forms": ">=15.0.0 < 19.0.0"
+    "@angular/platform-browser": ">=15.0.0 < 19.0.0"
+    "@angular/platform-browser-dynamic": ">=15.0.0 < 19.0.0"
     rxjs: ^6.0.0 || ^7.4.0
     typescript: ^4.0.0 || ^5.0.0
     zone.js: ">= 0.11.1 < 1.0.0"
@@ -6811,7 +6811,6 @@ __metadata:
     "@storybook/svelte-webpack5": "workspace:*"
     "@storybook/telemetry": "workspace:*"
     "@storybook/test": "workspace:*"
-    "@storybook/testing-library": "npm:next"
     "@storybook/theming": "workspace:*"
     "@storybook/types": "workspace:*"
     "@storybook/vue3": "workspace:*"
@@ -7081,17 +7080,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/testing-library@npm:next":
-  version: 0.2.2-next.0
-  resolution: "@storybook/testing-library@npm:0.2.2-next.0"
-  dependencies:
-    "@testing-library/dom": "npm:^9.0.0"
-    "@testing-library/user-event": "npm:^14.4.0"
-    ts-dedent: "npm:^2.2.0"
-  checksum: 10c0/4350e73776cba8ab5037ee9a8b07b957c73540873f64097648ed96b93f086469eab475ad19b917e5e2eee4faec67891fa443d703b9b4aa28efc9a74243970a4e
-  languageName: node
-  linkType: hard
-
 "@storybook/theming@workspace:*, @storybook/theming@workspace:lib/theming":
   version: 0.0.0-use.local
   resolution: "@storybook/theming@workspace:lib/theming"
@@ -7483,7 +7471,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/user-event@npm:^14.4.0, @testing-library/user-event@npm:^14.4.3, @testing-library/user-event@npm:^14.5.2":
+"@testing-library/user-event@npm:^14.4.3, @testing-library/user-event@npm:^14.5.2":
   version: 14.5.2
   resolution: "@testing-library/user-event@npm:14.5.2"
   peerDependencies:
diff --git a/docs/configure/telemetry.md b/docs/configure/telemetry.md
index ff3298ac86fd..291fa53e18d3 100644
--- a/docs/configure/telemetry.md
+++ b/docs/configure/telemetry.md
@@ -35,6 +35,7 @@ Specifically, we track the following information in our telemetry events:
   - Builder (e.g., Webpack5, Vite).
   - Meta framework (e.g., [Next](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.com/), [CRA](https://create-react-app.dev/)).
   - [Addons](https://storybook.js.org/integrations) (e.g., [Essentials](../essentials/index.md), [Accessibility](https://storybook.js.org/addons/@storybook/addon-a11y/)).
+  - Testing tools (e.g. [Jest](https://jestjs.io/), [Vitest](https://vitest.dev/), [Playwright](https://playwright.dev/)).
 - Package manager information (e.g., `npm`, `yarn`).
 - Monorepo information (e.g., [NX](https://nx.dev/), [Turborepo](https://turborepo.org/)).
 - In-app events (e.g., [Storybook guided tour](https://github.com/storybookjs/addon-onboarding)).
diff --git a/docs/contribute/RFC.md b/docs/contribute/RFC.md
index 96b93158d07d..ecb3283b0946 100644
--- a/docs/contribute/RFC.md
+++ b/docs/contribute/RFC.md
@@ -32,7 +32,7 @@ _Details matter_: RFCs that do not present convincing motivation, demonstrate a
 
 RFCs tend to remain in this stage for a while, giving the community and core team members time to weigh in. During this period, the author of an RFC should be prepared to revise the proposal, integrate feedback, and build consensus. RFCs that have broad support are much more likely to make progress than those that don't receive any comments.
 
-Every Monday at 11 a.m. (EST), the Storybook core team conducts a weekly triage meeting to review open RFCs as part of the meeting's agenda. The meeting is held in the [Storybook Discord's Watercooler channel](https://discord.com/channels/486522875931656193/486522876388704260). We invite the RFC author(s) and interested members of the community to participate and engage in a more detailed discussion of the RFC. If a core team member deems it necessary, they will be assigned as the "champion" of the RFC. The champion will collaborate with the RFC author and assist them throughout the RFC process.
+Every week, the Storybook core team conducts a triage meeting to review open RFCs as part of the meeting's agenda. The event is publicly scheduled in the [Storybook Discord](https://discord.gg/storybook) and held in the [Storybook Discord's Watercooler channel](https://discord.com/channels/486522875931656193/486522876388704260). We invite the RFC author(s) and interested members of the community to participate and engage in a more detailed discussion of the RFC. If a core team member deems it necessary, they will be assigned as the "champion" of the RFC. The champion will collaborate with the RFC author and assist them throughout the RFC process.
 
 ### 3. `Status: accepted/rejected`
 
diff --git a/docs/contribute/roadmap.md b/docs/contribute/roadmap.md
new file mode 100644
index 000000000000..509f71b07164
--- /dev/null
+++ b/docs/contribute/roadmap.md
@@ -0,0 +1,43 @@
+---
+title: 'Roadmap'
+hideRendererSelector: true
+---
+
+The Storybook team maintains a [public roadmap](https://github.com/orgs/storybookjs/projects/20/views/1) in the form of a GitHub project. This page explains what's in the roadmap, how to interpret it, and how to contribute to it.
+
+## What's in the roadmap?
+
+Each card represents a Storybook project. The columns represent how larger changes make their way from idea to shipped feature. Projects typically start as an [Request for Comment (RFC)](./RFC.md), then evolve into a [tracking issue](https://github.com/storybookjs/storybook/issues?q=is%3Aissue++sort%3Aupdated-desc+label%3ATracking+) once the team has fully scoped what it entails. We ship a Storybook [minor version](https://semver.org/) every eight weeks, and a major version once per year, typically in Feb/Mar.
+
+### Candidates
+
+These cards are ideas on our radar that we are considering for the current major release. For example, if `8.0` is the most recent major version, these would be ideas for `8.x` or `9.0`. The ideas in this column are the fuzziest and may come and go depending on our priorities.
+
+### Under consideration
+
+These are projects being discussed for the next dev cycle. For example, if the most recent minor version is `8.1`, and we are currently working on `8.2`, the projects in this column would be under consideration for `8.3`. Unlike the candidates column, which can contain any idea, the projects under consideration must be documented with an [RFC](./RFC.md).
+
+### In progress
+
+These are projects that we are currently working on. There are two kinds of projects in this column:
+
+1. **[Tracking issues](https://github.com/storybookjs/storybook/issues?q=is%3Aissue++sort%3Aupdated-desc+label%3ATracking+)**: Fully scoped projects expected to ship in the next minor release. For example, if the most recent minor is `8.1`, these should ship in `8.2`, eight weeks after `8.1`.
+2. **Other projects**: Community projects facilitated by the core team and side projects. These don't have an ETA but we will push to have them ready as part of the current major. For example, if `8.0` is the most recent major version, these should ship in `8.x` or `9.0`.
+
+### Done
+
+These projects are completed, documented, and released. We follow a "fixed time, variable scope" policy for core projects, which means we scope a project into milestones to provide the most value to users as early as possible and cut scope if necessary to ship on time. If a feature has been scoped out of a project, we might try to fit it into a follow-up project, treat it as general maintenance work, or forget about it. Storybook is open source, so PR contributions are always welcome!
+
+## Frequently asked questions
+
+### When will project X be available?
+
+This roadmap is an estimation, not a commitment. In general, every tracking issue "in progress" should be available in the next two months. Everything else on the board has a decent chance of getting into the next major release. For example, if `8.0` is the most recent major release, we will try to ship everything on the board as part of `8.x` or `9.0`. If we don't think a project is likely for the next major, we will kick it off the board.
+
+### What about issue Y or discussion Z?
+
+The Storybook core team and our community members continuously contribute bug fix bugs and smaller product improvements. The projects here are larger chunks of work. In some cases they may close out certain issues, and when possible we will call those out in the RFC or project tracking issue.
+
+### How do I get something onto the board?
+
+If there's a significant product improvement that you want to see, and there is currently an issue or an [RFC](./RFC.md) for it, upvote that issue/discussion, and comment on it with more information about your need or use case if it's not currently captured. If you don't see anything that's quite right, please feel free to [submit an RFC](https://github.com/storybookjs/storybook/discussions/new?category=rfc). We prioritize based on a combination of user/contributor interest (upvotes, comments, [Discord](https://discord.gg/storybook) conversations, etc.) and our own strategic ambitions for the project.
diff --git a/docs/snippets/angular/msw-addon-configure-handlers-graphql.ts.mdx b/docs/snippets/angular/msw-addon-configure-handlers-graphql.ts.mdx
index 23599c6494de..cfbd8a0cb731 100644
--- a/docs/snippets/angular/msw-addon-configure-handlers-graphql.ts.mdx
+++ b/docs/snippets/angular/msw-addon-configure-handlers-graphql.ts.mdx
@@ -57,7 +57,7 @@ export const MockedSuccess: Story = {
     msw: {
       handlers: [
         graphql.query('AllInfoQuery', () => {
-          return new HttpResponse.json({
+          return HttpResponse.json({
             data: {
               allInfo: {
                 ...TestData,
@@ -76,7 +76,7 @@ export const MockedError: Story = {
       handlers: [
         graphql.query('AllInfoQuery', async () => {
           await delay(800);
-          return new HttpResponse.json({
+          return HttpResponse.json({
             errors: [
               {
                 message: 'Access denied',
diff --git a/docs/snippets/angular/msw-addon-configure-handlers-http.ts.mdx b/docs/snippets/angular/msw-addon-configure-handlers-http.ts.mdx
index 820857b94b48..8ba674db76b5 100644
--- a/docs/snippets/angular/msw-addon-configure-handlers-http.ts.mdx
+++ b/docs/snippets/angular/msw-addon-configure-handlers-http.ts.mdx
@@ -43,7 +43,7 @@ export const MockedSuccess: Story = {
     msw: {
       handlers: [
         http.get('https://your-restful-endpoint/', () => {
-          return new HttpResponse.json(TestData);
+          return HttpResponse.json(TestData);
         }),
       ],
     },
diff --git a/docs/snippets/common/ghp-github-action.yml.mdx b/docs/snippets/common/ghp-github-action.yml.mdx
index d4c9b83a6bb5..6efff5954e66 100644
--- a/docs/snippets/common/ghp-github-action.yml.mdx
+++ b/docs/snippets/common/ghp-github-action.yml.mdx
@@ -30,7 +30,7 @@ jobs:
           node-version: '16.x'
 
       #👇 Add Storybook build and deploy to GitHub Pages as a step in the workflow
-      - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.1
+      - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
         with:
           install_command: yarn install # default: npm ci
           build_command: yarn build-storybook # default: npm run build-storybook
diff --git a/docs/snippets/common/msw-addon-configure-handlers-http.js.mdx b/docs/snippets/common/msw-addon-configure-handlers-http.js.mdx
index cd2138c50a0f..8311b919f53f 100644
--- a/docs/snippets/common/msw-addon-configure-handlers-http.js.mdx
+++ b/docs/snippets/common/msw-addon-configure-handlers-http.js.mdx
@@ -38,7 +38,7 @@ export const MockedSuccess = {
     msw: {
       handlers: [
         http.get('https://your-restful-endpoint/', () => {
-          return new HttpResponse.json(TestData);
+          return HttpResponse.json(TestData);
         }),
       ],
     },
diff --git a/docs/snippets/common/msw-addon-configure-handlers-http.ts-4-9.mdx b/docs/snippets/common/msw-addon-configure-handlers-http.ts-4-9.mdx
index 663a9fd0f1f2..fe6490665088 100644
--- a/docs/snippets/common/msw-addon-configure-handlers-http.ts-4-9.mdx
+++ b/docs/snippets/common/msw-addon-configure-handlers-http.ts-4-9.mdx
@@ -44,7 +44,7 @@ export const MockedSuccess: Story = {
     msw: {
       handlers: [
         http.get('https://your-restful-endpoint/', () => {
-          return new HttpResponse.json(TestData);
+          return HttpResponse.json(TestData);
         }),
       ],
     },
diff --git a/docs/snippets/common/msw-addon-configure-handlers-http.ts.mdx b/docs/snippets/common/msw-addon-configure-handlers-http.ts.mdx
index 26d7ffaae623..935fef3b2ca4 100644
--- a/docs/snippets/common/msw-addon-configure-handlers-http.ts.mdx
+++ b/docs/snippets/common/msw-addon-configure-handlers-http.ts.mdx
@@ -44,7 +44,7 @@ export const MockedSuccess: Story = {
     msw: {
       handlers: [
         http.get('https://your-restful-endpoint/', () => {
-          return new HttpResponse.json(TestData);
+          return HttpResponse.json(TestData);
         }),
       ],
     },
diff --git a/docs/snippets/react/button-story-with-args.ts-4-9.mdx b/docs/snippets/react/button-story-with-args.ts-4-9.mdx
index 32e4ac97662a..ddf531e2e8a8 100644
--- a/docs/snippets/react/button-story-with-args.ts-4-9.mdx
+++ b/docs/snippets/react/button-story-with-args.ts-4-9.mdx
@@ -3,7 +3,7 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Button, ButtonProps } from './Button';
+import { Button } from './Button';
 
 const meta = {
   component: Button,
diff --git a/docs/snippets/react/button-story-with-args.ts.mdx b/docs/snippets/react/button-story-with-args.ts.mdx
index 3464a9dc5c27..bc92ada612e2 100644
--- a/docs/snippets/react/button-story-with-args.ts.mdx
+++ b/docs/snippets/react/button-story-with-args.ts.mdx
@@ -3,7 +3,7 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Button, ButtonProps } from './Button';
+import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   component: Button,
diff --git a/docs/snippets/react/msw-addon-configure-handlers-graphql.js.mdx b/docs/snippets/react/msw-addon-configure-handlers-graphql.js.mdx
index b7964e2d4925..f8aa36d87880 100644
--- a/docs/snippets/react/msw-addon-configure-handlers-graphql.js.mdx
+++ b/docs/snippets/react/msw-addon-configure-handlers-graphql.js.mdx
@@ -61,7 +61,7 @@ export const MockedSuccess = {
     msw: {
       handlers: [
         graphql.query('AllInfoQuery', () => {
-          return new HttpResponse.json({
+          return HttpResponse.json({
             data: {
               allInfo: {
                 ...TestData,
@@ -80,7 +80,7 @@ export const MockedError = {
       handlers: [
         graphql.query('AllInfoQuery', async () => {
           await delay(800);
-          return new HttpResponse.json({
+          return HttpResponse.json({
             errors: [
               {
                 message: 'Access denied',
diff --git a/docs/snippets/react/msw-addon-configure-handlers-graphql.ts-4-9.mdx b/docs/snippets/react/msw-addon-configure-handlers-graphql.ts-4-9.mdx
index ab5786361bba..5d1047b2a30a 100644
--- a/docs/snippets/react/msw-addon-configure-handlers-graphql.ts-4-9.mdx
+++ b/docs/snippets/react/msw-addon-configure-handlers-graphql.ts-4-9.mdx
@@ -65,7 +65,7 @@ export const MockedSuccess: Story = {
     msw: {
       handlers: [
         graphql.query('AllInfoQuery', () => {
-          return new HttpResponse.json({
+          return HttpResponse.json({
             data: {
               allInfo: {
                 ...TestData,
@@ -84,7 +84,7 @@ export const MockedError: Story = {
       handlers: [
         graphql.query('AllInfoQuery', async () => {
           await delay(800);
-          return new HttpResponse.json({
+          return HttpResponse.json({
             errors: [
               {
                 message: 'Access denied',
diff --git a/docs/snippets/react/msw-addon-configure-handlers-graphql.ts.mdx b/docs/snippets/react/msw-addon-configure-handlers-graphql.ts.mdx
index 4ffb616b0c66..7e28c12fb043 100644
--- a/docs/snippets/react/msw-addon-configure-handlers-graphql.ts.mdx
+++ b/docs/snippets/react/msw-addon-configure-handlers-graphql.ts.mdx
@@ -65,7 +65,7 @@ export const MockedSuccess: Story = {
     msw: {
       handlers: [
         graphql.query('AllInfoQuery', () => {
-          return new HttpResponse.json({
+          return HttpResponse.json({
             data: {
               allInfo: {
                 ...TestData,
@@ -84,7 +84,7 @@ export const MockedError: Story = {
       handlers: [
         graphql.query('AllInfoQuery', async () => {
           await delay(800);
-          return new HttpResponse.json({
+          return HttpResponse.json({
             errors: [
               {
                 message: 'Access denied',
diff --git a/docs/snippets/svelte/msw-addon-configure-handlers-graphql.js.mdx b/docs/snippets/svelte/msw-addon-configure-handlers-graphql.js.mdx
index 6c9974f74e53..72ab24c05d6f 100644
--- a/docs/snippets/svelte/msw-addon-configure-handlers-graphql.js.mdx
+++ b/docs/snippets/svelte/msw-addon-configure-handlers-graphql.js.mdx
@@ -40,7 +40,7 @@ export const MockedSuccess = {
     msw: {
       handlers: [
         graphql.query('AllInfoQuery', () => {
-          return new HttpResponse.json({
+          return HttpResponse.json({
             data: {
               allInfo: {
                 ...TestData,
@@ -59,7 +59,7 @@ export const MockedError = {
       handlers: [
         graphql.query('AllInfoQuery', async () => {
           await delay(800);
-          return new HttpResponse.json({
+          return HttpResponse.json({
             errors: [
               {
                 message: 'Access denied',
diff --git a/docs/snippets/svelte/msw-addon-configure-handlers-graphql.ts-4-9.mdx b/docs/snippets/svelte/msw-addon-configure-handlers-graphql.ts-4-9.mdx
index a099095c28f8..440b47dc992d 100644
--- a/docs/snippets/svelte/msw-addon-configure-handlers-graphql.ts-4-9.mdx
+++ b/docs/snippets/svelte/msw-addon-configure-handlers-graphql.ts-4-9.mdx
@@ -45,7 +45,7 @@ export const MockedSuccess: Story = {
     msw: {
       handlers: [
         graphql.query('AllInfoQuery', () => {
-          return new HttpResponse.json({
+          return HttpResponse.json({
             data: {
               allInfo: {
                 ...TestData,
@@ -64,7 +64,7 @@ export const MockedError: Story = {
       handlers: [
         graphql.query('AllInfoQuery', async () => {
           await delay(800);
-          return new HttpResponse.json({
+          return HttpResponse.json({
             errors: [
               {
                 message: 'Access denied',
diff --git a/docs/snippets/svelte/msw-addon-configure-handlers-graphql.ts.mdx b/docs/snippets/svelte/msw-addon-configure-handlers-graphql.ts.mdx
index cc9fef5e7cb9..a186c5183bf2 100644
--- a/docs/snippets/svelte/msw-addon-configure-handlers-graphql.ts.mdx
+++ b/docs/snippets/svelte/msw-addon-configure-handlers-graphql.ts.mdx
@@ -45,7 +45,7 @@ export const MockedSuccess: Story = {
     msw: {
       handlers: [
         graphql.query('AllInfoQuery', () => {
-          return new HttpResponse.json({
+          return HttpResponse.json({
             data: {
               allInfo: {
                 ...TestData,
@@ -64,7 +64,7 @@ export const MockedError: Story = {
       handlers: [
         graphql.query('AllInfoQuery', async () => {
           await delay(800);
-          return new HttpResponse.json({
+          return HttpResponse.json({
             errors: [
               {
                 message: 'Access denied',
diff --git a/docs/snippets/vue/msw-addon-configure-handlers-graphql.js.mdx b/docs/snippets/vue/msw-addon-configure-handlers-graphql.js.mdx
index 137d1b9a37c4..407903cf95c4 100644
--- a/docs/snippets/vue/msw-addon-configure-handlers-graphql.js.mdx
+++ b/docs/snippets/vue/msw-addon-configure-handlers-graphql.js.mdx
@@ -43,7 +43,7 @@ export const MockedSuccess = {
     msw: {
       handlers: [
         graphql.query('AllInfoQuery', () => {
-          return new HttpResponse.json({
+          return HttpResponse.json({
             data: {
               allInfo: {
                 ...TestData,
@@ -62,7 +62,7 @@ export const MockedError = {
       handlers: [
         graphql.query('AllInfoQuery', async () => {
           await delay(800);
-          return new HttpResponse.json({
+          return HttpResponse.json({
             errors: [
               {
                 message: 'Access denied',
diff --git a/docs/snippets/vue/msw-addon-configure-handlers-graphql.ts-4-9.mdx b/docs/snippets/vue/msw-addon-configure-handlers-graphql.ts-4-9.mdx
index 701fc8dddd30..b85e3d507999 100644
--- a/docs/snippets/vue/msw-addon-configure-handlers-graphql.ts-4-9.mdx
+++ b/docs/snippets/vue/msw-addon-configure-handlers-graphql.ts-4-9.mdx
@@ -48,7 +48,7 @@ export const MockedSuccess: Story = {
     msw: {
       handlers: [
         graphql.query('AllInfoQuery', () => {
-          return new HttpResponse.json({
+          return HttpResponse.json({
             data: {
               allInfo: {
                 ...TestData,
@@ -67,7 +67,7 @@ export const MockedError: Story = {
       handlers: [
         graphql.query('AllInfoQuery', async () => {
           await delay(800);
-          return new HttpResponse.json({
+          return HttpResponse.json({
             errors: [
               {
                 message: 'Access denied',
diff --git a/docs/snippets/vue/msw-addon-configure-handlers-graphql.ts.mdx b/docs/snippets/vue/msw-addon-configure-handlers-graphql.ts.mdx
index da7551e9474c..56559de2b65a 100644
--- a/docs/snippets/vue/msw-addon-configure-handlers-graphql.ts.mdx
+++ b/docs/snippets/vue/msw-addon-configure-handlers-graphql.ts.mdx
@@ -48,7 +48,7 @@ export const MockedSuccess: Story = {
     msw: {
       handlers: [
         graphql.query('AllInfoQuery', () => {
-          return new HttpResponse.json({
+          return HttpResponse.json({
             data: {
               allInfo: {
                 ...TestData,
@@ -67,7 +67,7 @@ export const MockedError: Story = {
       handlers: [
         graphql.query('AllInfoQuery', async () => {
           await delay(800);
-          return new HttpResponse.json({
+          return HttpResponse.json({
             errors: [
               {
                 message: 'Access denied',
diff --git a/docs/snippets/vue/storybook-preview-use-global-type.3.js.mdx b/docs/snippets/vue/storybook-preview-use-global-type.3.js.mdx
index b95a6a0a5d05..d45c79dad770 100644
--- a/docs/snippets/vue/storybook-preview-use-global-type.3.js.mdx
+++ b/docs/snippets/vue/storybook-preview-use-global-type.3.js.mdx
@@ -1,11 +1,11 @@
 ```js
 // .storybook/preview.js
 
-import { setup } from "@storybook/vue3";
+import { setup } from '@storybook/vue3';
 
-import { VApp } from "vuetify/components";
+import { VApp } from 'vuetify/components';
 
-import { registerPlugins } from "../src/plugins";
+import { registerPlugins } from '../src/plugins';
 
 setup((app) => {
   // Registers your app's plugins including Vuetify into Storybook
@@ -15,7 +15,7 @@ setup((app) => {
 const preview = {
   decorators: [
     (story, context) => {
-      const theme = context.globals.theme || 'light'';
+      const theme = context.globals.theme || 'light';
       return {
         components: { story, VApp },
         template: `
diff --git a/docs/snippets/vue/storybook-preview-use-global-type.3.ts.mdx b/docs/snippets/vue/storybook-preview-use-global-type.3.ts.mdx
index 7486233502f4..7c8816faf8dc 100644
--- a/docs/snippets/vue/storybook-preview-use-global-type.3.ts.mdx
+++ b/docs/snippets/vue/storybook-preview-use-global-type.3.ts.mdx
@@ -1,12 +1,12 @@
 ```ts
 // .storybook/preview.ts
 
-import type { Preview } from "@storybook/vue3";
-import { setup } from "@storybook/vue3";
+import type { Preview } from '@storybook/vue3';
+import { setup } from '@storybook/vue3';
 
-import { VApp } from "vuetify/components";
+import { VApp } from 'vuetify/components';
 
-import { registerPlugins } from "../src/plugins";
+import { registerPlugins } from '../src/plugins';
 
 setup((app) => {
   // Registers your app's plugins including Vuetify into Storybook
@@ -16,7 +16,7 @@ setup((app) => {
 const preview: Preview = {
   decorators: [
     (story, context) => {
-      const theme = context.globals.theme || 'light'';
+      const theme = context.globals.theme || 'light';
       return {
         components: { story, VApp },
         template: `
diff --git a/docs/snippets/vue/storybook-preview-use-global-type.ts-4-9.mdx b/docs/snippets/vue/storybook-preview-use-global-type.ts-4-9.mdx
index 7486233502f4..7c8816faf8dc 100644
--- a/docs/snippets/vue/storybook-preview-use-global-type.ts-4-9.mdx
+++ b/docs/snippets/vue/storybook-preview-use-global-type.ts-4-9.mdx
@@ -1,12 +1,12 @@
 ```ts
 // .storybook/preview.ts
 
-import type { Preview } from "@storybook/vue3";
-import { setup } from "@storybook/vue3";
+import type { Preview } from '@storybook/vue3';
+import { setup } from '@storybook/vue3';
 
-import { VApp } from "vuetify/components";
+import { VApp } from 'vuetify/components';
 
-import { registerPlugins } from "../src/plugins";
+import { registerPlugins } from '../src/plugins';
 
 setup((app) => {
   // Registers your app's plugins including Vuetify into Storybook
@@ -16,7 +16,7 @@ setup((app) => {
 const preview: Preview = {
   decorators: [
     (story, context) => {
-      const theme = context.globals.theme || 'light'';
+      const theme = context.globals.theme || 'light';
       return {
         components: { story, VApp },
         template: `
diff --git a/docs/snippets/web-components/msw-addon-configure-handlers-http.js.mdx b/docs/snippets/web-components/msw-addon-configure-handlers-http.js.mdx
index d1c3cda8bc9f..fd212d46c43e 100644
--- a/docs/snippets/web-components/msw-addon-configure-handlers-http.js.mdx
+++ b/docs/snippets/web-components/msw-addon-configure-handlers-http.js.mdx
@@ -36,7 +36,7 @@ export const MockedSuccess = {
     msw: {
       handlers: [
         http.get('https://your-restful-endpoint/', () => {
-          return new HttpResponse.json(TestData);
+          return HttpResponse.json(TestData);
         }),
       ],
     },
diff --git a/docs/snippets/web-components/msw-addon-configure-handlers-http.ts.mdx b/docs/snippets/web-components/msw-addon-configure-handlers-http.ts.mdx
index b12fd8f93a41..f92501a7df63 100644
--- a/docs/snippets/web-components/msw-addon-configure-handlers-http.ts.mdx
+++ b/docs/snippets/web-components/msw-addon-configure-handlers-http.ts.mdx
@@ -41,7 +41,7 @@ export const MockedSuccess: Story = {
     msw: {
       handlers: [
         http.get('https://your-restful-endpoint/', () => {
-          return new HttpResponse.json(TestData);
+          return HttpResponse.json(TestData);
         }),
       ],
     },
diff --git a/docs/toc.js b/docs/toc.js
index 8915f1148f61..86e654d8f8f7 100644
--- a/docs/toc.js
+++ b/docs/toc.js
@@ -846,6 +846,11 @@ module.exports = {
           title: 'Reproduce',
           type: 'link',
         },
+        {
+          pathSegment: 'roadmap',
+          title: 'Roadmap',
+          type: 'link',
+        },
       ],
     },
     {
diff --git a/docs/versions/next.json b/docs/versions/next.json
index 677eac93350d..79e2866d8d0c 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"8.2.0-alpha.2","info":{"plain":"- Angular: Cleanup types - [#27189](https://github.com/storybookjs/storybook/pull/27189), thanks @valentinpalkovic!\n- Angular: Fix filtering of workspace config styles - [#27108](https://github.com/storybookjs/storybook/pull/27108), thanks @valentinpalkovic!\n- Controls: Fix grouped Radio controls to have the same name - [#23374](https://github.com/storybookjs/storybook/pull/23374), thanks @srapilly!\n- Controls: Throttling makes Color control lagging - [#22615](https://github.com/storybookjs/storybook/pull/22615), thanks @gitstart!\n- Docs: Fix `Typeset` Doc block `fontSizes` type - [#26475](https://github.com/storybookjs/storybook/pull/26475), thanks @noranda!"}}
+{"version":"8.2.0-alpha.3","info":{"plain":"- Addon-A11y: Fix property default assignment - [#27224](https://github.com/storybookjs/storybook/pull/27224), thanks @valentinpalkovic!\n- Angular: Revert style adjustments - [#27361](https://github.com/storybookjs/storybook/pull/27361), thanks @valentinpalkovic!\n- Angular: Support v18 - [#27237](https://github.com/storybookjs/storybook/pull/27237), thanks @valentinpalkovic!\n- Controls: Fix date picker control validation and assignment - [#26695](https://github.com/storybookjs/storybook/pull/26695), thanks @leeovictor!\n- Next.js: Avoid interfering with the svgr loader - [#27198](https://github.com/storybookjs/storybook/pull/27198), thanks @seanparmelee!\n- Svelte: Support latest prerelease - [#27378](https://github.com/storybookjs/storybook/pull/27378), thanks @valentinpalkovic!\n- Tags: Fix composition with older storybooks - [#27358](https://github.com/storybookjs/storybook/pull/27358), thanks @shilman!\n- Telemetry: Add test packages - [#27226](https://github.com/storybookjs/storybook/pull/27226), thanks @shilman!\n- Types: Fix type implementation for `CompatibleString` - [#27180](https://github.com/storybookjs/storybook/pull/27180), thanks @sni-J!\n- Vite: Fix HMR issue for Storybook preview files - [#27256](https://github.com/storybookjs/storybook/pull/27256), thanks @valentinpalkovic!\n- Vite: Fix asset warning by externalizing sb-common-assets font - [#27110](https://github.com/storybookjs/storybook/pull/27110), thanks @valentinpalkovic!\n- Webpack5/Vite: Fix sourcemaps - [#27171](https://github.com/storybookjs/storybook/pull/27171), thanks @valentinpalkovic!"}}
diff --git a/docs/writing-tests/test-runner.md b/docs/writing-tests/test-runner.md
index 6a39b2362ad3..759111e8ad9d 100644
--- a/docs/writing-tests/test-runner.md
+++ b/docs/writing-tests/test-runner.md
@@ -94,6 +94,7 @@ If you're already using any of those flags in your project, you should be able t
 | `--url`                         | Define the URL to run tests in. Useful for custom Storybook URLs <br/>`test-storybook --url http://the-storybook-url-here.com`                                                                          |
 | `--browsers`                    | Define browsers to run tests in. One or multiple of: chromium, firefox, webkit <br/>`test-storybook --browsers firefox chromium`                                                                        |
 | `--maxWorkers [amount]`         | Specifies the maximum number of workers the worker-pool will spawn for running tests <br/>`test-storybook --maxWorkers=2`                                                                               |
+| `--testTimeout [amount]`        | Defines the maximum time in milliseconds that a test can run before it is automatically marked as failed. Useful for long-running tests <br/> `test-storybook --testTimeout=60000`                      |
 | `--no-cache`                    | Disable the cache <br/>`test-storybook --no-cache`                                                                                                                                                      |
 | `--clearCache`                  | Deletes the Jest cache directory and then exits without running tests <br/>`test-storybook --clearCache`                                                                                                |
 | `--verbose`                     | Display individual test results with the test suite hierarchy <br/>`test-storybook --verbose`                                                                                                           |
@@ -202,12 +203,12 @@ The test-runner renders a story and executes its [play function](../writing-stor
 The test-runner exports test hooks that can be overridden globally to enable use cases like visual or DOM snapshots. These hooks give you access to the test lifecycle _before_ and _after_ the story is rendered.
 Listed below are the available hooks and an overview of how to use them.
 
-| Hook        | Description                                                                                                  |
-| ----------- | ------------------------------------------------------------------------------------------------------------ |
-| `prepare`   | Prepares the browser for tests<br/>`async prepare({ page, browserContext, testRunnerConfig }) {}`            |
-| `setup`     | Executes once before all the tests run<br/>`setup() {}`                                                      |
+| Hook        | Description                                                                                                     |
+| ----------- | --------------------------------------------------------------------------------------------------------------- |
+| `prepare`   | Prepares the browser for tests<br/>`async prepare({ page, browserContext, testRunnerConfig }) {}`               |
+| `setup`     | Executes once before all the tests run<br/>`setup() {}`                                                         |
 | `preVisit`  | Executes before a story is initially visited and rendered in the browser<br/>`async preVisit(page, context) {}` |
-| `postVisit` | Executes after the story is visited and fully rendered<br/>`async postVisit(page, context) {}`               |
+| `postVisit` | Executes after the story is visited and fully rendered<br/>`async postVisit(page, context) {}`                  |
 
 <Callout variant="info" icon="💡">
 
diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts
index bee4513a4326..b80c1d5e734b 100644
--- a/scripts/tasks/sandbox-parts.ts
+++ b/scripts/tasks/sandbox-parts.ts
@@ -282,6 +282,23 @@ function addStoriesEntry(mainConfig: ConfigFile, path: string, disableDocs: bool
   mainConfig.setFieldValue(['stories'], [...stories, entry]);
 }
 
+// Add refs to older versions of storybook to test out composition
+function addRefs(mainConfig: ConfigFile) {
+  const refs = mainConfig.getFieldValue(['refs']) as Record<string, string>;
+
+  mainConfig.setFieldValue(['refs'], {
+    ...refs,
+    'storybook@8.0.0': {
+      title: 'Storybook 8.0.0',
+      url: 'https://635781f3500dd2c49e189caf-gckybvsekn.chromatic.com/',
+    },
+    'storybook@7.6.18': {
+      title: 'Storybook 7.6.18',
+      url: 'https://635781f3500dd2c49e189caf-oljwjdrftz.chromatic.com/',
+    },
+  } as Record<string, any>);
+}
+
 function getStoriesFolderWithVariant(variant?: string, folder = 'stories') {
   return variant ? `${folder}_${variant}` : folder;
 }
@@ -352,8 +369,7 @@ export async function addExtraDependencies({
   debug: boolean;
   extraDeps?: string[];
 }) {
-  // web-components doesn't install '@storybook/testing-library' by default
-  const extraDevDeps = ['@storybook/testing-library@next', '@storybook/test-runner@next'];
+  const extraDevDeps = ['@storybook/test-runner@next'];
   if (debug) logger.log('🎁 Adding extra dev deps', extraDevDeps);
   let packageManager: JsPackageManager;
   if (!dryRun) {
@@ -516,9 +532,14 @@ export const addStories: Task['run'] = async (
   await writeConfig(mainConfig);
 };
 
-export const extendMain: Task['run'] = async ({ template, sandboxDir }, { disableDocs }) => {
+export const extendMain: Task['run'] = async ({ template, sandboxDir, key }, { disableDocs }) => {
   logger.log('📝 Extending main.js');
   const mainConfig = await readMainConfig({ cwd: sandboxDir });
+
+  if (key === 'react-vite/default-ts') {
+    addRefs(mainConfig);
+  }
+
   const templateConfig = template.modifications?.mainConfig || {};
   const configToAdd = {
     ...templateConfig,