From 5461f739e21869d595f4210619d60e65e1c5b108 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 27 Sep 2024 15:45:25 +0200
Subject: [PATCH 01/28] support statsJson in angular schemas

---
 .../src/builders/build-storybook/schema.json  | 35 +++++++++++++++----
 .../src/builders/start-storybook/schema.json  | 35 +++++++++++++++----
 2 files changed, 58 insertions(+), 12 deletions(-)

diff --git a/code/frameworks/angular/src/builders/build-storybook/schema.json b/code/frameworks/angular/src/builders/build-storybook/schema.json
index dbc2a734417e..afd42aa4de07 100644
--- a/code/frameworks/angular/src/builders/build-storybook/schema.json
+++ b/code/frameworks/angular/src/builders/build-storybook/schema.json
@@ -67,16 +67,30 @@
     "compodocArgs": {
       "type": "array",
       "description": "Compodoc options : https://compodoc.app/guides/options.html. Options `-p` with tsconfig path and `-d` with workspace root is always given.",
-      "default": ["-e", "json"],
+      "default": [
+        "-e",
+        "json"
+      ],
       "items": {
         "type": "string"
       }
     },
     "webpackStatsJson": {
-      "type": ["boolean", "string"],
+      "type": [
+        "boolean",
+        "string"
+      ],
       "description": "Write Webpack Stats JSON to disk",
       "default": false
     },
+    "statsJson": {
+      "type": [
+        "boolean",
+        "string"
+      ],
+      "description": "Write stats JSON to disk",
+      "default": false
+    },
     "previewUrl": {
       "type": "string",
       "description": "Disables the default storybook preview and lets you use your own"
@@ -113,7 +127,10 @@
       }
     },
     "sourceMap": {
-      "type": ["boolean", "object"],
+      "type": [
+        "boolean",
+        "object"
+      ],
       "description": "Configure sourcemaps. See: https://angular.io/guide/workspace-config#source-map-configuration",
       "default": false
     }
@@ -151,7 +168,11 @@
             }
           },
           "additionalProperties": false,
-          "required": ["glob", "input", "output"]
+          "required": [
+            "glob",
+            "input",
+            "output"
+          ]
         },
         {
           "type": "string"
@@ -179,7 +200,9 @@
             }
           },
           "additionalProperties": false,
-          "required": ["input"]
+          "required": [
+            "input"
+          ]
         },
         {
           "type": "string",
@@ -188,4 +211,4 @@
       ]
     }
   }
-}
+}
\ No newline at end of file
diff --git a/code/frameworks/angular/src/builders/start-storybook/schema.json b/code/frameworks/angular/src/builders/start-storybook/schema.json
index a2eef03e4b08..a96182ea1b1e 100644
--- a/code/frameworks/angular/src/builders/start-storybook/schema.json
+++ b/code/frameworks/angular/src/builders/start-storybook/schema.json
@@ -94,7 +94,10 @@
     "compodocArgs": {
       "type": "array",
       "description": "Compodoc options : https://compodoc.app/guides/options.html. Options `-p` with tsconfig path and `-d` with workspace root is always given.",
-      "default": ["-e", "json"],
+      "default": [
+        "-e",
+        "json"
+      ],
       "items": {
         "type": "string"
       }
@@ -135,10 +138,21 @@
       "description": "URL path to be appended when visiting Storybook for the first time"
     },
     "webpackStatsJson": {
-      "type": ["boolean", "string"],
+      "type": [
+        "boolean",
+        "string"
+      ],
       "description": "Write Webpack Stats JSON to disk",
       "default": false
     },
+    "statsJson": {
+      "type": [
+        "boolean",
+        "string"
+      ],
+      "description": "Write stats JSON to disk",
+      "default": false
+    },
     "previewUrl": {
       "type": "string",
       "description": "Disables the default storybook preview and lets you use your own"
@@ -149,7 +163,10 @@
       "pattern": "(silly|verbose|info|warn|silent)"
     },
     "sourceMap": {
-      "type": ["boolean", "object"],
+      "type": [
+        "boolean",
+        "object"
+      ],
       "description": "Configure sourcemaps. See: https://angular.io/guide/workspace-config#source-map-configuration",
       "default": false
     }
@@ -187,7 +204,11 @@
             }
           },
           "additionalProperties": false,
-          "required": ["glob", "input", "output"]
+          "required": [
+            "glob",
+            "input",
+            "output"
+          ]
         },
         {
           "type": "string"
@@ -215,7 +236,9 @@
             }
           },
           "additionalProperties": false,
-          "required": ["input"]
+          "required": [
+            "input"
+          ]
         },
         {
           "type": "string",
@@ -224,4 +247,4 @@
       ]
     }
   }
-}
+}
\ No newline at end of file

From 2a02e134805f9659481f90237478a39516322c44 Mon Sep 17 00:00:00 2001
From: Kevin Yank <thatguy@kevinyank.com>
Date: Tue, 19 Nov 2024 18:14:41 +1100
Subject: [PATCH 02/28] Fix webpack fsCache not working with @storybook/nextjs

Next.js overrides certain internal webpack packages (particularly `webpack-sources`), which are involved with filesystem caching, with its own versions from next/dist/compiled.

For filesystem caching to work, Next.js must be allowed to perform these overrides before webpack is first initialized by @storybook/builder-webpack5. If it is not, the objects to be serialized to disk in the caching process will be instantiated using the original (non-Next.js) modules, but the serializers will be created using the Next.js modules. This mismatch between the objects to be cached and the serializers that write the filesystem cache prevents the cache from being written; instead, webpack outputs a warning message to the console for every object that it tries and fails to find a matching serializer for.

This fix works by invoking Next.js to configure webpack in the `core` hook of @storybook/nextjs/preset, immediately before loading @storybook/builder-webpack5. We don't actually use this configuration that Next.js creates; the actual configuration that will be used in the build is still generated in `webpackFinal` as before.

`fsCache` has a large impact on Storybook build performance. Even in a minimal project with a single story, enabling it reduces build time by 66%! This is therefore a very valuable option to be able to enable.

Fixes #29621
---
 code/frameworks/nextjs/src/preset.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts
index 3463910175e1..84255fc62e20 100644
--- a/code/frameworks/nextjs/src/preset.ts
+++ b/code/frameworks/nextjs/src/preset.ts
@@ -36,6 +36,19 @@ export const addons: PresetProperty<'addons'> = [
 export const core: PresetProperty<'core'> = async (config, options) => {
   const framework = await options.presets.apply('framework');
 
+  // Load the Next.js configuration before we need it in webpackFinal (below).
+  // This gives Next.js an opportunity to override some of webpack's internals
+  // (see next/dist/server/config-utils.js) before @storybook/builder-webpack5
+  // starts to use it. Without this, webpack's file system cache (fsCache: true)
+  // does not work.
+  const { nextConfigPath } = await options.presets.apply<FrameworkOptions>('frameworkOptions');
+  await configureConfig({
+    // Pass in a dummy webpack config object for now, since we don't want to
+    // modify the real one yet. We pass in the real one in webpackFinal.
+    baseConfig: {},
+    nextConfigPath,
+  });
+
   return {
     ...config,
     builder: {

From 0a3e05bceafe0ad4aae8a2d3e19984c2d337b420 Mon Sep 17 00:00:00 2001
From: Kevin Yank <thatguy@kevinyank.com>
Date: Wed, 27 Nov 2024 11:33:40 +1100
Subject: [PATCH 03/28] Fix crash when framework is not specified with options

---
 code/frameworks/nextjs/src/preset.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts
index 84255fc62e20..f10550acc900 100644
--- a/code/frameworks/nextjs/src/preset.ts
+++ b/code/frameworks/nextjs/src/preset.ts
@@ -34,19 +34,18 @@ export const addons: PresetProperty<'addons'> = [
 ];
 
 export const core: PresetProperty<'core'> = async (config, options) => {
-  const framework = await options.presets.apply('framework');
+  const framework = await options.presets.apply<StorybookConfig['framework']>('framework');
 
   // Load the Next.js configuration before we need it in webpackFinal (below).
   // This gives Next.js an opportunity to override some of webpack's internals
   // (see next/dist/server/config-utils.js) before @storybook/builder-webpack5
   // starts to use it. Without this, webpack's file system cache (fsCache: true)
   // does not work.
-  const { nextConfigPath } = await options.presets.apply<FrameworkOptions>('frameworkOptions');
   await configureConfig({
     // Pass in a dummy webpack config object for now, since we don't want to
     // modify the real one yet. We pass in the real one in webpackFinal.
     baseConfig: {},
-    nextConfigPath,
+    nextConfigPath: typeof framework === 'string' ? undefined : framework.options.nextConfigPath,
   });
 
   return {

From 83a1f24f02c50a0b5ed4a03c6b248100183a3b01 Mon Sep 17 00:00:00 2001
From: Kevin Yank <thatguy@kevinyank.com>
Date: Tue, 3 Dec 2024 12:27:09 +1100
Subject: [PATCH 04/28] Defer all imports from webpack until after Next.js has
 loaded its internal instance

---
 code/frameworks/nextjs/src/config/webpack.ts | 14 +++++---
 code/frameworks/nextjs/src/preset.ts         | 35 +++++++++++---------
 2 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/code/frameworks/nextjs/src/config/webpack.ts b/code/frameworks/nextjs/src/config/webpack.ts
index 76edac25c81c..030da6b2ab77 100644
--- a/code/frameworks/nextjs/src/config/webpack.ts
+++ b/code/frameworks/nextjs/src/config/webpack.ts
@@ -1,8 +1,7 @@
 import type { NextConfig } from 'next';
 import type { Configuration as WebpackConfig } from 'webpack';
-import { DefinePlugin } from 'webpack';
 
-import { addScopedAlias, resolveNextConfig, setAlias } from '../utils';
+import { addScopedAlias, resolveNextConfig } from '../utils';
 
 const tryResolve = (path: string) => {
   try {
@@ -48,12 +47,15 @@ export const configureConfig = async ({
     addScopedAlias(baseConfig, 'react-dom/server', 'next/dist/compiled/react-dom/server');
   }
 
-  setupRuntimeConfig(baseConfig, nextConfig);
+  await setupRuntimeConfig(baseConfig, nextConfig);
 
   return nextConfig;
 };
 
-const setupRuntimeConfig = (baseConfig: WebpackConfig, nextConfig: NextConfig): void => {
+const setupRuntimeConfig = async (
+  baseConfig: WebpackConfig,
+  nextConfig: NextConfig
+): Promise<void> => {
   const definePluginConfig: Record<string, any> = {
     // this mimics what nextjs does client side
     // https://github.com/vercel/next.js/blob/57702cb2a9a9dba4b552e0007c16449cf36cfb44/packages/next/client/index.tsx#L101
@@ -67,5 +69,7 @@ const setupRuntimeConfig = (baseConfig: WebpackConfig, nextConfig: NextConfig):
 
   definePluginConfig['process.env.__NEXT_NEW_LINK_BEHAVIOR'] = newNextLinkBehavior;
 
-  baseConfig.plugins?.push(new DefinePlugin(definePluginConfig));
+  // Load DefinePlugin with a dynamic import to ensure that Next.js can first
+  // replace webpack with its own internal instance, and we get that here.
+  baseConfig.plugins?.push(new (await import('webpack')).DefinePlugin(definePluginConfig));
 };
diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts
index f10550acc900..473e24655848 100644
--- a/code/frameworks/nextjs/src/preset.ts
+++ b/code/frameworks/nextjs/src/preset.ts
@@ -10,24 +10,10 @@ import type { ConfigItem, PluginItem, TransformOptions } from '@babel/core';
 import { loadPartialConfig } from '@babel/core';
 import semver from 'semver';
 
-import { configureAliases } from './aliases/webpack';
-import { configureBabelLoader } from './babel/loader';
 import nextBabelPreset from './babel/preset';
-import { configureCompatibilityAliases } from './compatibility/compatibility-map';
 import { configureConfig } from './config/webpack';
-import { configureCss } from './css/webpack';
-import { configureNextExportMocks } from './export-mocks/webpack';
-import { configureFastRefresh } from './fastRefresh/webpack';
 import TransformFontImports from './font/babel';
-import { configureNextFont } from './font/webpack/configureNextFont';
-import { configureImages } from './images/webpack';
-import { configureImports } from './imports/webpack';
-import { configureNodePolyfills } from './nodePolyfills/webpack';
-import { configureRSC } from './rsc/webpack';
-import { configureStyledJsx } from './styledJsx/webpack';
-import { configureSWCLoader } from './swc/loader';
 import type { FrameworkOptions, StorybookConfig } from './types';
-import { configureRuntimeNextjsVersionResolution, getNextjsVersion } from './utils';
 
 export const addons: PresetProperty<'addons'> = [
   dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))),
@@ -156,6 +142,22 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig,
     nextConfigPath,
   });
 
+  // Use dynamic imports to ensure these modules that use webpack load after
+  // Next.js has been configured (above), and has replaced webpack with its precompiled
+  // version.
+  const { configureNextFont } = await import('./font/webpack/configureNextFont');
+  const { configureRuntimeNextjsVersionResolution, getNextjsVersion } = await import('./utils');
+  const { configureImports } = await import('./imports/webpack');
+  const { configureCss } = await import('./css/webpack');
+  const { configureImages } = await import('./images/webpack');
+  const { configureStyledJsx } = await import('./styledJsx/webpack');
+  const { configureNodePolyfills } = await import('./nodePolyfills/webpack');
+  const { configureAliases } = await import('./aliases/webpack');
+  const { configureFastRefresh } = await import('./fastRefresh/webpack');
+  const { configureRSC } = await import('./rsc/webpack');
+  const { configureSWCLoader } = await import('./swc/loader');
+  const { configureBabelLoader } = await import('./babel/loader');
+
   const babelRCPath = join(getProjectRoot(), '.babelrc');
   const babelConfigPath = join(getProjectRoot(), 'babel.config.js');
   const hasBabelConfig = existsSync(babelRCPath) || existsSync(babelConfigPath);
@@ -168,7 +170,10 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig,
 
   configureNextFont(baseConfig, useSWC);
   configureRuntimeNextjsVersionResolution(baseConfig);
-  configureImports({ baseConfig, configDir: options.configDir });
+  configureImports({
+    baseConfig,
+    configDir: options.configDir,
+  });
   configureCss(baseConfig, nextConfig);
   configureImages(baseConfig, nextConfig);
   configureStyledJsx(baseConfig);

From c00c054199d73cd88e6f53b713c3b944422c72c9 Mon Sep 17 00:00:00 2001
From: Kevin Yank <thatguy@kevinyank.com>
Date: Wed, 4 Dec 2024 10:42:43 +1100
Subject: [PATCH 05/28] Undo unintentional formatting change

---
 code/frameworks/nextjs/src/preset.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts
index 473e24655848..6b90ae543a22 100644
--- a/code/frameworks/nextjs/src/preset.ts
+++ b/code/frameworks/nextjs/src/preset.ts
@@ -170,10 +170,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig,
 
   configureNextFont(baseConfig, useSWC);
   configureRuntimeNextjsVersionResolution(baseConfig);
-  configureImports({
-    baseConfig,
-    configDir: options.configDir,
-  });
+  configureImports({ baseConfig, configDir: options.configDir });
   configureCss(baseConfig, nextConfig);
   configureImages(baseConfig, nextConfig);
   configureStyledJsx(baseConfig);

From a91b0ba3a6c2f885d8f965e23cbd8c7bfdb42f11 Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Tue, 1 Oct 2024 11:47:43 +0200
Subject: [PATCH 06/28] feat: add code snippet panel to single story view mode

---
 code/addons/docs/package.json                 | 13 ++++++-
 code/addons/docs/src/manager.tsx              | 38 +++++++++++++++++++
 code/addons/essentials/package.json           |  5 +++
 code/addons/essentials/src/docs/manager.ts    |  2 +
 code/addons/essentials/src/index.ts           |  2 +-
 .../vue3/src/docs/sourceDecorator.ts          |  6 +--
 6 files changed, 58 insertions(+), 8 deletions(-)
 create mode 100644 code/addons/docs/src/manager.tsx
 create mode 100644 code/addons/essentials/src/docs/manager.ts

diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
index f5834a822026..fbfa158c43d1 100644
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@@ -71,7 +71,12 @@
     "./angular": "./angular/index.js",
     "./angular/index.js": "./angular/index.js",
     "./web-components/index.js": "./web-components/index.js",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./manager": {
+      "types": "./dist/manager.d.ts",
+      "import": "./dist/manager.mjs",
+      "require": "./dist/manager.js"
+    }
   },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -129,7 +134,11 @@
       "./src/preview.ts",
       "./src/blocks.ts",
       "./src/shims/mdx-react-shim.ts",
-      "./src/mdx-loader.ts"
+      "./src/mdx-loader.ts",
+      "./src/manager.tsx"
+    ],
+    "managerEntries": [
+      "./src/manager.tsx"
     ]
   },
   "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
diff --git a/code/addons/docs/src/manager.tsx b/code/addons/docs/src/manager.tsx
new file mode 100644
index 000000000000..9b8cdafb7799
--- /dev/null
+++ b/code/addons/docs/src/manager.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { AddonPanel, type SyntaxHighlighterFormatTypes } from 'storybook/internal/components';
+import { ADDON_ID, PANEL_ID, PARAM_KEY, SNIPPET_RENDERED } from 'storybook/internal/docs-tools';
+import { addons, types, useAddonState, useChannel } from 'storybook/internal/manager-api';
+
+import { Source } from '@storybook/blocks';
+
+addons.register(ADDON_ID, (api) => {
+  addons.add(PANEL_ID, {
+    title: 'Code',
+    type: types.PANEL,
+    paramKey: PARAM_KEY,
+    match: ({ viewMode }) => viewMode === 'story',
+    render: ({ active }) => {
+      const [codeSnippet, setSourceCode] = useAddonState<{
+        source: string;
+        format: SyntaxHighlighterFormatTypes;
+      }>(ADDON_ID, {
+        source: '',
+        format: 'html',
+      });
+
+      useChannel({
+        [SNIPPET_RENDERED]: ({ source, format }) => {
+          setSourceCode({ source, format: format ?? 'html' });
+          console.log('SOURCE CODE CHANGED', codeSnippet.source);
+        },
+      });
+
+      return (
+        <AddonPanel active={!!active}>
+          <Source code={codeSnippet.source} format={codeSnippet.format} />
+        </AddonPanel>
+      );
+    },
+  });
+});
diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json
index 4f7ad700ec0d..73e1cbcb6f9f 100644
--- a/code/addons/essentials/package.json
+++ b/code/addons/essentials/package.json
@@ -40,6 +40,7 @@
     },
     "./backgrounds/manager": "./dist/backgrounds/manager.js",
     "./controls/manager": "./dist/controls/manager.js",
+    "./docs/manager": "./dist/docs/manager.js",
     "./docs/preview": {
       "types": "./dist/docs/preview.d.ts",
       "import": "./dist/docs/preview.mjs",
@@ -114,10 +115,14 @@
       "./src/docs/preset.ts",
       "./src/docs/mdx-react-shim.ts"
     ],
+    "entries": [
+      "./src/docs/manager.ts"
+    ],
     "managerEntries": [
       "./src/actions/manager.ts",
       "./src/backgrounds/manager.ts",
       "./src/controls/manager.ts",
+      "./src/docs/manager.ts",
       "./src/measure/manager.ts",
       "./src/outline/manager.ts",
       "./src/toolbars/manager.ts",
diff --git a/code/addons/essentials/src/docs/manager.ts b/code/addons/essentials/src/docs/manager.ts
new file mode 100644
index 000000000000..6101f7d79261
--- /dev/null
+++ b/code/addons/essentials/src/docs/manager.ts
@@ -0,0 +1,2 @@
+// @ts-expect-error (no types needed for this)
+export * from '@storybook/addon-docs/manager';
diff --git a/code/addons/essentials/src/index.ts b/code/addons/essentials/src/index.ts
index 5809420bc1b8..a72554227ba2 100644
--- a/code/addons/essentials/src/index.ts
+++ b/code/addons/essentials/src/index.ts
@@ -88,9 +88,9 @@ export function addons(options: PresetOptions) {
 
   // NOTE: The order of these addons is important.
   return [
-    'docs',
     'controls',
     'actions',
+    'docs',
     'backgrounds',
     'viewport',
     'toolbars',
diff --git a/code/renderers/vue3/src/docs/sourceDecorator.ts b/code/renderers/vue3/src/docs/sourceDecorator.ts
index 7eb8734305af..cc2f922f63f1 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.ts
@@ -107,7 +107,6 @@ ${template}`;
  * Checks if the source code generation should be skipped for the given Story context. Will be true
  * if one of the following is true:
  *
- * - View mode is not "docs"
  * - Story is no arg story
  * - Story has set custom source code via parameters.docs.source.code
  * - Story has set source type to "code" via parameters.docs.source.type
@@ -120,13 +119,10 @@ export const shouldSkipSourceCodeGeneration = (context: StoryContext): boolean =
   }
 
   const isArgsStory = context?.parameters.__isArgsStory;
-  const isDocsViewMode = context?.viewMode === 'docs';
 
   // never render if the user is forcing the block to render code, or
   // if the user provides code, or if it's not an args story.
-  return (
-    !isDocsViewMode || !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE
-  );
+  return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
 };
 
 /**

From 107c40bf71a437b72f7c1d1755e10da0b7926a04 Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Tue, 1 Oct 2024 12:03:33 +0200
Subject: [PATCH 07/28] remove console log

---
 code/addons/docs/src/manager.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/code/addons/docs/src/manager.tsx b/code/addons/docs/src/manager.tsx
index 9b8cdafb7799..ed3823ed4492 100644
--- a/code/addons/docs/src/manager.tsx
+++ b/code/addons/docs/src/manager.tsx
@@ -24,7 +24,6 @@ addons.register(ADDON_ID, (api) => {
       useChannel({
         [SNIPPET_RENDERED]: ({ source, format }) => {
           setSourceCode({ source, format: format ?? 'html' });
-          console.log('SOURCE CODE CHANGED', codeSnippet.source);
         },
       });
 

From a283cea33680e379625bbc57dbd8b52c46c9ddcf Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Mon, 25 Nov 2024 10:04:25 +0100
Subject: [PATCH 08/28] use dark theme

---
 code/addons/docs/src/manager.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/addons/docs/src/manager.tsx b/code/addons/docs/src/manager.tsx
index ed3823ed4492..212956b99ebb 100644
--- a/code/addons/docs/src/manager.tsx
+++ b/code/addons/docs/src/manager.tsx
@@ -29,7 +29,7 @@ addons.register(ADDON_ID, (api) => {
 
       return (
         <AddonPanel active={!!active}>
-          <Source code={codeSnippet.source} format={codeSnippet.format} />
+          <Source code={codeSnippet.source} format={codeSnippet.format} dark />
         </AddonPanel>
       );
     },

From 1fa0e7da9125544912704155fcea4d8e1b115b0f Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Mon, 25 Nov 2024 11:15:44 +0100
Subject: [PATCH 09/28] feat: support `docs.source.addonPanel` parameter

---
 code/addons/docs/src/manager.tsx    | 37 ++++++++++++++++++++++++++++-
 code/addons/essentials/src/index.ts |  2 +-
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/code/addons/docs/src/manager.tsx b/code/addons/docs/src/manager.tsx
index 212956b99ebb..09c371be238b 100644
--- a/code/addons/docs/src/manager.tsx
+++ b/code/addons/docs/src/manager.tsx
@@ -1,12 +1,27 @@
 import React from 'react';
 
 import { AddonPanel, type SyntaxHighlighterFormatTypes } from 'storybook/internal/components';
+import { FORCE_RE_RENDER, PRELOAD_ENTRIES } from 'storybook/internal/core-events';
 import { ADDON_ID, PANEL_ID, PARAM_KEY, SNIPPET_RENDERED } from 'storybook/internal/docs-tools';
 import { addons, types, useAddonState, useChannel } from 'storybook/internal/manager-api';
 
 import { Source } from '@storybook/blocks';
 
-addons.register(ADDON_ID, (api) => {
+addons.register(ADDON_ID, async (api) => {
+  // at this point, the parameters are not yet defined so we can not check whether the addon panel should
+  // be added or not. The "PRELOAD_ENTRIES" event seems to be the earliest point in time where the parameters
+  // are available
+  const isDisabled = await new Promise<boolean>((resolve) => {
+    api.once(PRELOAD_ENTRIES, () => {
+      const parameter = api.getCurrentParameter(PARAM_KEY);
+      resolve(shouldDisableAddonPanel(parameter));
+    });
+  });
+
+  if (isDisabled) {
+    return;
+  }
+
   addons.add(PANEL_ID, {
     title: 'Code',
     type: types.PANEL,
@@ -34,4 +49,24 @@ addons.register(ADDON_ID, (api) => {
       );
     },
   });
+
+  api.emit(FORCE_RE_RENDER);
 });
+
+const isObject = (value: unknown): value is object => {
+  return value != null && typeof value === 'object';
+};
+
+/**
+ * Checks whether the addon panel should be disabled by checking the parameter.source.addonPanel
+ * property.
+ */
+const shouldDisableAddonPanel = (parameter: unknown) => {
+  return (
+    isObject(parameter) &&
+    'source' in parameter &&
+    isObject(parameter.source) &&
+    'addonPanel' in parameter.source &&
+    parameter.source.addonPanel === false
+  );
+};
diff --git a/code/addons/essentials/src/index.ts b/code/addons/essentials/src/index.ts
index a72554227ba2..5809420bc1b8 100644
--- a/code/addons/essentials/src/index.ts
+++ b/code/addons/essentials/src/index.ts
@@ -88,9 +88,9 @@ export function addons(options: PresetOptions) {
 
   // NOTE: The order of these addons is important.
   return [
+    'docs',
     'controls',
     'actions',
-    'docs',
     'backgrounds',
     'viewport',
     'toolbars',

From 01e11e5bb9f0e8fa8626d1c8a98230210af93670 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Tue, 3 Dec 2024 22:25:15 +0800
Subject: [PATCH 10/28] Addon-docs: Fix and document source panel disabling

---
 MIGRATION.md                                  | 20 ++++++++-
 code/addons/docs/src/manager.tsx              | 42 ++-----------------
 .../stories/sourcePanel/index.stories.tsx     | 15 +++++++
 3 files changed, 38 insertions(+), 39 deletions(-)
 create mode 100644 code/addons/docs/template/stories/sourcePanel/index.stories.tsx

diff --git a/MIGRATION.md b/MIGRATION.md
index 2e2e735fb21f..07aecbbe3973 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1,5 +1,7 @@
 <h1>Migration</h1>
 
+- [From version 8.4.x to 8.5.x](#from-version-84x-to-85x)
+  - [Added source code pnael to docs](#added-source-code-pnael-to-docs)
 - [From version 8.2.x to 8.3.x](#from-version-82x-to-83x)
   - [Removed `experimental_SIDEBAR_BOTTOM` and deprecated `experimental_SIDEBAR_TOP` addon types](#removed-experimental_sidebar_bottom-and-deprecated-experimental_sidebar_top-addon-types)
   - [New parameters format for addon backgrounds](#new-parameters-format-for-addon-backgrounds)
@@ -167,7 +169,7 @@
     - [Angular: Drop support for calling Storybook directly](#angular-drop-support-for-calling-storybook-directly)
     - [Angular: Application providers and ModuleWithProviders](#angular-application-providers-and-modulewithproviders)
     - [Angular: Removed legacy renderer](#angular-removed-legacy-renderer)
-    - [Angular: initializer functions](#angular-initializer-functions)
+    - [Angular: Initializer functions](#angular-initializer-functions)
     - [Next.js: use the `@storybook/nextjs` framework](#nextjs-use-the-storybooknextjs-framework)
     - [SvelteKit: needs the `@storybook/sveltekit` framework](#sveltekit-needs-the-storybooksveltekit-framework)
     - [Vue3: replaced app export with setup](#vue3-replaced-app-export-with-setup)
@@ -419,6 +421,22 @@
   - [Packages renaming](#packages-renaming)
   - [Deprecated embedded addons](#deprecated-embedded-addons)
 
+## From version 8.4.x to 8.5.x
+
+### Added source code pnael to docs
+
+Starting in 8.5, Storybook Docs (`@storybook/addon-docs`) automatically adds a new addon panel to stories that displays a source snippet beneath each story. This works similarly to the existing [source snippet doc block](https://storybook.js.org/docs/writing-docs/doc-blocks#source), but in the story view. It is intended to replace the [Storysource addon](https://storybook.js.org/addons/@storybook/addon-storysource).
+
+If you wish to disable this panel globally, add the following line to your `.storybook/preview.js` project configuration. You can also selectively disable/enable at the story level.
+
+```js
+export default {
+  parameters: {
+    docsSourcePanel: { disable: true },
+  },
+};
+```
+
 ## From version 8.2.x to 8.3.x
 
 ### Removed `experimental_SIDEBAR_BOTTOM` and deprecated `experimental_SIDEBAR_TOP` addon types
diff --git a/code/addons/docs/src/manager.tsx b/code/addons/docs/src/manager.tsx
index 09c371be238b..fdbe0375d369 100644
--- a/code/addons/docs/src/manager.tsx
+++ b/code/addons/docs/src/manager.tsx
@@ -1,31 +1,17 @@
 import React from 'react';
 
 import { AddonPanel, type SyntaxHighlighterFormatTypes } from 'storybook/internal/components';
-import { FORCE_RE_RENDER, PRELOAD_ENTRIES } from 'storybook/internal/core-events';
-import { ADDON_ID, PANEL_ID, PARAM_KEY, SNIPPET_RENDERED } from 'storybook/internal/docs-tools';
+import { ADDON_ID, PANEL_ID, SNIPPET_RENDERED } from 'storybook/internal/docs-tools';
 import { addons, types, useAddonState, useChannel } from 'storybook/internal/manager-api';
 
 import { Source } from '@storybook/blocks';
 
-addons.register(ADDON_ID, async (api) => {
-  // at this point, the parameters are not yet defined so we can not check whether the addon panel should
-  // be added or not. The "PRELOAD_ENTRIES" event seems to be the earliest point in time where the parameters
-  // are available
-  const isDisabled = await new Promise<boolean>((resolve) => {
-    api.once(PRELOAD_ENTRIES, () => {
-      const parameter = api.getCurrentParameter(PARAM_KEY);
-      resolve(shouldDisableAddonPanel(parameter));
-    });
-  });
-
-  if (isDisabled) {
-    return;
-  }
-
+addons.register(ADDON_ID, (api) => {
   addons.add(PANEL_ID, {
     title: 'Code',
     type: types.PANEL,
-    paramKey: PARAM_KEY,
+    // disable this with `docsSourcePanel: { disable: true }`
+    paramKey: 'docsSourcePanel',
     match: ({ viewMode }) => viewMode === 'story',
     render: ({ active }) => {
       const [codeSnippet, setSourceCode] = useAddonState<{
@@ -49,24 +35,4 @@ addons.register(ADDON_ID, async (api) => {
       );
     },
   });
-
-  api.emit(FORCE_RE_RENDER);
 });
-
-const isObject = (value: unknown): value is object => {
-  return value != null && typeof value === 'object';
-};
-
-/**
- * Checks whether the addon panel should be disabled by checking the parameter.source.addonPanel
- * property.
- */
-const shouldDisableAddonPanel = (parameter: unknown) => {
-  return (
-    isObject(parameter) &&
-    'source' in parameter &&
-    isObject(parameter.source) &&
-    'addonPanel' in parameter.source &&
-    parameter.source.addonPanel === false
-  );
-};
diff --git a/code/addons/docs/template/stories/sourcePanel/index.stories.tsx b/code/addons/docs/template/stories/sourcePanel/index.stories.tsx
new file mode 100644
index 000000000000..dd4d2208fe6e
--- /dev/null
+++ b/code/addons/docs/template/stories/sourcePanel/index.stories.tsx
@@ -0,0 +1,15 @@
+export default {
+  component: globalThis.Components.Button,
+  tags: ['autodocs'],
+  parameters: {
+    chromatic: { disable: true },
+    docsSourcePanel: { disable: true },
+  },
+};
+
+export const One = { args: { label: 'One' } };
+export const Two = { args: { label: 'Two' } };
+export const WithSource = {
+  args: { label: 'Three' },
+  parameters: { docsSourcePanel: { disable: false } },
+};

From 2be176923b7a2e00216d26b61142704851e82a92 Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Wed, 4 Dec 2024 08:10:31 +0100
Subject: [PATCH 11/28] fix typos

---
 MIGRATION.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 07aecbbe3973..db4d3b2d15c2 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1,7 +1,7 @@
 <h1>Migration</h1>
 
 - [From version 8.4.x to 8.5.x](#from-version-84x-to-85x)
-  - [Added source code pnael to docs](#added-source-code-pnael-to-docs)
+  - [Added source code panel to docs](#added-source-code-panel-to-docs)
 - [From version 8.2.x to 8.3.x](#from-version-82x-to-83x)
   - [Removed `experimental_SIDEBAR_BOTTOM` and deprecated `experimental_SIDEBAR_TOP` addon types](#removed-experimental_sidebar_bottom-and-deprecated-experimental_sidebar_top-addon-types)
   - [New parameters format for addon backgrounds](#new-parameters-format-for-addon-backgrounds)
@@ -423,7 +423,7 @@
 
 ## From version 8.4.x to 8.5.x
 
-### Added source code pnael to docs
+### Added source code panel to docs
 
 Starting in 8.5, Storybook Docs (`@storybook/addon-docs`) automatically adds a new addon panel to stories that displays a source snippet beneath each story. This works similarly to the existing [source snippet doc block](https://storybook.js.org/docs/writing-docs/doc-blocks#source), but in the story view. It is intended to replace the [Storysource addon](https://storybook.js.org/addons/@storybook/addon-storysource).
 

From 33ce8f93c8e9039c4566cc3e2ce484579282040d Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Wed, 4 Dec 2024 10:18:25 +0100
Subject: [PATCH 12/28] move docs source panel order

---
 code/addons/essentials/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/addons/essentials/src/index.ts b/code/addons/essentials/src/index.ts
index 5809420bc1b8..a72554227ba2 100644
--- a/code/addons/essentials/src/index.ts
+++ b/code/addons/essentials/src/index.ts
@@ -88,9 +88,9 @@ export function addons(options: PresetOptions) {
 
   // NOTE: The order of these addons is important.
   return [
-    'docs',
     'controls',
     'actions',
+    'docs',
     'backgrounds',
     'viewport',
     'toolbars',

From db146c34dcc878e321b167bdd743e1ec6d396ce9 Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Wed, 4 Dec 2024 10:54:04 +0100
Subject: [PATCH 13/28] fix react code snippet format

---
 code/addons/docs/src/manager.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/addons/docs/src/manager.tsx b/code/addons/docs/src/manager.tsx
index fdbe0375d369..a02fe22f0764 100644
--- a/code/addons/docs/src/manager.tsx
+++ b/code/addons/docs/src/manager.tsx
@@ -24,7 +24,7 @@ addons.register(ADDON_ID, (api) => {
 
       useChannel({
         [SNIPPET_RENDERED]: ({ source, format }) => {
-          setSourceCode({ source, format: format ?? 'html' });
+          setSourceCode({ source, format });
         },
       });
 

From 75f235a4bd67d2db69d98324236b9082992cbe50 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Mon, 9 Dec 2024 17:13:12 +0800
Subject: [PATCH 14/28] Fix merge conflict remnants

---
 MIGRATION.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 2b5ff2bcb9c6..7e46fa5bb1a2 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1,10 +1,8 @@
 <h1>Migration</h1>
 
 - [From version 8.4.x to 8.5.x](#from-version-84x-to-85x)
-  <<<<<<< HEAD
-  - # [Added source code panel to docs](#added-source-code-panel-to-docs)
+  - [Added source code panel to docs](#added-source-code-panel-to-docs)
   - [Indexing behavior of @storybook/experimental-addon-test is changed](#indexing-behavior-of-storybookexperimental-addon-test-is-changed)
-    > > > > > > > next
 - [From version 8.2.x to 8.3.x](#from-version-82x-to-83x)
   - [Removed `experimental_SIDEBAR_BOTTOM` and deprecated `experimental_SIDEBAR_TOP` addon types](#removed-experimental_sidebar_bottom-and-deprecated-experimental_sidebar_top-addon-types)
   - [New parameters format for addon backgrounds](#new-parameters-format-for-addon-backgrounds)

From d749986384f29891b24d45d76a86bcb27001b4ba Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Thu, 12 Dec 2024 10:15:45 +0100
Subject: [PATCH 15/28] refactor: update parameter to disable code panel

---
 MIGRATION.md                                  |  4 ++-
 code/addons/docs/src/manager.tsx              | 25 ++++++++++++++++---
 .../stories/sourcePanel/index.stories.tsx     | 12 +++++++--
 code/core/src/manager/container/Panel.tsx     |  6 +++++
 code/core/src/types/modules/addons.ts         |  4 +--
 5 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index f3fa585591e4..6e3f43cc5a48 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -435,7 +435,9 @@ If you wish to disable this panel globally, add the following line to your `.sto
 ```js
 export default {
   parameters: {
-    docsSourcePanel: { disable: true },
+    docs: {
+      codePanel: false,
+    },
   },
 };
 ```
diff --git a/code/addons/docs/src/manager.tsx b/code/addons/docs/src/manager.tsx
index a02fe22f0764..0b84cd6e36f8 100644
--- a/code/addons/docs/src/manager.tsx
+++ b/code/addons/docs/src/manager.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { AddonPanel, type SyntaxHighlighterFormatTypes } from 'storybook/internal/components';
-import { ADDON_ID, PANEL_ID, SNIPPET_RENDERED } from 'storybook/internal/docs-tools';
+import { ADDON_ID, PANEL_ID, PARAM_KEY, SNIPPET_RENDERED } from 'storybook/internal/docs-tools';
 import { addons, types, useAddonState, useChannel } from 'storybook/internal/manager-api';
 
 import { Source } from '@storybook/blocks';
@@ -10,8 +10,27 @@ addons.register(ADDON_ID, (api) => {
   addons.add(PANEL_ID, {
     title: 'Code',
     type: types.PANEL,
-    // disable this with `docsSourcePanel: { disable: true }`
-    paramKey: 'docsSourcePanel',
+    paramKey: PARAM_KEY,
+    /**
+     * This code panel can be disabled by the user by adding this parameter:
+     *
+     * @example
+     *
+     * ```ts
+     *  parameters: {
+     *    docs: {
+     *      codePanel: false,
+     *    },
+     *  },
+     * ```
+     */
+    disabled: (parameters) => {
+      return (
+        !!parameters &&
+        typeof parameters[PARAM_KEY] === 'object' &&
+        parameters[PARAM_KEY].codePanel === false
+      );
+    },
     match: ({ viewMode }) => viewMode === 'story',
     render: ({ active }) => {
       const [codeSnippet, setSourceCode] = useAddonState<{
diff --git a/code/addons/docs/template/stories/sourcePanel/index.stories.tsx b/code/addons/docs/template/stories/sourcePanel/index.stories.tsx
index dd4d2208fe6e..9958096cb815 100644
--- a/code/addons/docs/template/stories/sourcePanel/index.stories.tsx
+++ b/code/addons/docs/template/stories/sourcePanel/index.stories.tsx
@@ -3,13 +3,21 @@ export default {
   tags: ['autodocs'],
   parameters: {
     chromatic: { disable: true },
-    docsSourcePanel: { disable: true },
+    docs: {
+      codePanel: false,
+    },
   },
 };
 
 export const One = { args: { label: 'One' } };
+
 export const Two = { args: { label: 'Two' } };
+
 export const WithSource = {
   args: { label: 'Three' },
-  parameters: { docsSourcePanel: { disable: false } },
+  parameters: {
+    docs: {
+      codePanel: true,
+    },
+  },
 };
diff --git a/code/core/src/manager/container/Panel.tsx b/code/core/src/manager/container/Panel.tsx
index c81e489d8f68..f8cc2877cef0 100644
--- a/code/core/src/manager/container/Panel.tsx
+++ b/code/core/src/manager/container/Panel.tsx
@@ -32,6 +32,12 @@ const getPanels = (api: API) => {
     if (paramKey && parameters && parameters[paramKey] && parameters[paramKey].disable) {
       return;
     }
+    if (
+      panel.disabled === true ||
+      (typeof panel.disabled === 'function' && panel.disabled(parameters))
+    ) {
+      return;
+    }
     filteredPanels[id] = panel;
   });
 
diff --git a/code/core/src/types/modules/addons.ts b/code/core/src/types/modules/addons.ts
index 47f5aec6412b..b2c7b4ac2f3c 100644
--- a/code/core/src/types/modules/addons.ts
+++ b/code/core/src/types/modules/addons.ts
@@ -5,7 +5,7 @@ import type { TestProviderConfig, TestingModuleProgressReportProgress } from '..
 import type { RenderData as RouterData } from '../../router/types';
 import type { ThemeVars } from '../../theming/types';
 import type { API_SidebarOptions } from './api';
-import type { API_HashEntry, API_StatusState, API_StatusUpdate } from './api-stories';
+import type { API_HashEntry, API_StoryEntry } from './api-stories';
 import type {
   Args,
   ArgsStoryFn as ArgsStoryFnForFramework,
@@ -392,7 +392,7 @@ export interface Addon_BaseType {
   /** @unstable */
   paramKey?: string;
   /** @unstable */
-  disabled?: boolean;
+  disabled?: boolean | ((parameters: API_StoryEntry['parameters']) => boolean);
   /** @unstable */
   hidden?: boolean;
 }

From 9c4d4f06150af2e910b7ed31e3c2684315707c84 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 12 Dec 2024 12:49:32 +0100
Subject: [PATCH 16/28] Experimental Nextjs: Add docgen types to main config

---
 .../experimental-nextjs-vite/src/types.ts     | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/code/frameworks/experimental-nextjs-vite/src/types.ts b/code/frameworks/experimental-nextjs-vite/src/types.ts
index 8de91a4430d9..588caf0919bf 100644
--- a/code/frameworks/experimental-nextjs-vite/src/types.ts
+++ b/code/frameworks/experimental-nextjs-vite/src/types.ts
@@ -1,10 +1,13 @@
 import type {
   CompatibleString,
   StorybookConfig as StorybookConfigBase,
+  TypescriptOptions as TypescriptOptionsBase,
 } from 'storybook/internal/types';
 
 import type { BuilderOptions, StorybookConfigVite } from '@storybook/builder-vite';
 
+import type docgenTypescript from '@joshwooding/vite-plugin-react-docgen-typescript';
+
 type FrameworkName = CompatibleString<'@storybook/experimental-nextjs-vite'>;
 type BuilderName = CompatibleString<'@storybook/builder-vite'>;
 
@@ -31,10 +34,23 @@ type StorybookConfigFramework = {
   };
 };
 
+type TypescriptOptions = TypescriptOptionsBase & {
+  /**
+   * Sets the type of Docgen when working with React and TypeScript
+   *
+   * @default `'react-docgen'`
+   */
+  reactDocgen: 'react-docgen-typescript' | 'react-docgen' | false;
+  /** Configures `@joshwooding/vite-plugin-react-docgen-typescript` */
+  reactDocgenTypescriptOptions: Parameters<typeof docgenTypescript>[0];
+};
+
 /** The interface for Storybook configuration in `main.ts` files. */
 export type StorybookConfig = Omit<
   StorybookConfigBase,
-  keyof StorybookConfigVite | keyof StorybookConfigFramework
+  keyof StorybookConfigVite | keyof StorybookConfigFramework | 'typescript'
 > &
   StorybookConfigVite &
-  StorybookConfigFramework & {};
+  StorybookConfigFramework & {
+    typescript?: Partial<TypescriptOptions>;
+  };

From bb323de1fc7413a0a7a318e76ba0286cc8c00b46 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 13 Dec 2024 11:21:30 +0100
Subject: [PATCH 17/28] simplify config types in experimental-nextjs-vite by
 reutilizing react-vite ones

---
 .../experimental-nextjs-vite/src/types.ts     | 34 ++++---------------
 1 file changed, 6 insertions(+), 28 deletions(-)

diff --git a/code/frameworks/experimental-nextjs-vite/src/types.ts b/code/frameworks/experimental-nextjs-vite/src/types.ts
index 588caf0919bf..0221787dccb6 100644
--- a/code/frameworks/experimental-nextjs-vite/src/types.ts
+++ b/code/frameworks/experimental-nextjs-vite/src/types.ts
@@ -1,12 +1,7 @@
-import type {
-  CompatibleString,
-  StorybookConfig as StorybookConfigBase,
-  TypescriptOptions as TypescriptOptionsBase,
-} from 'storybook/internal/types';
+import type { CompatibleString } from 'storybook/internal/types';
 
-import type { BuilderOptions, StorybookConfigVite } from '@storybook/builder-vite';
-
-import type docgenTypescript from '@joshwooding/vite-plugin-react-docgen-typescript';
+import type { BuilderOptions } from '@storybook/builder-vite';
+import type { StorybookConfig as StorybookConfigReactVite } from '@storybook/react-vite';
 
 type FrameworkName = CompatibleString<'@storybook/experimental-nextjs-vite'>;
 type BuilderName = CompatibleString<'@storybook/builder-vite'>;
@@ -24,7 +19,7 @@ type StorybookConfigFramework = {
         name: FrameworkName;
         options: FrameworkOptions;
       };
-  core?: StorybookConfigBase['core'] & {
+  core?: StorybookConfigReactVite['core'] & {
     builder?:
       | BuilderName
       | {
@@ -34,23 +29,6 @@ type StorybookConfigFramework = {
   };
 };
 
-type TypescriptOptions = TypescriptOptionsBase & {
-  /**
-   * Sets the type of Docgen when working with React and TypeScript
-   *
-   * @default `'react-docgen'`
-   */
-  reactDocgen: 'react-docgen-typescript' | 'react-docgen' | false;
-  /** Configures `@joshwooding/vite-plugin-react-docgen-typescript` */
-  reactDocgenTypescriptOptions: Parameters<typeof docgenTypescript>[0];
-};
-
 /** The interface for Storybook configuration in `main.ts` files. */
-export type StorybookConfig = Omit<
-  StorybookConfigBase,
-  keyof StorybookConfigVite | keyof StorybookConfigFramework | 'typescript'
-> &
-  StorybookConfigVite &
-  StorybookConfigFramework & {
-    typescript?: Partial<TypescriptOptions>;
-  };
+export type StorybookConfig = Omit<StorybookConfigReactVite, keyof StorybookConfigFramework> &
+  StorybookConfigFramework;

From 902dc18344bbc209804de0715a523b9529d8717c Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Fri, 13 Dec 2024 12:51:52 +0100
Subject: [PATCH 18/28] Fix webpack DefinePlugin import to use default export

---
 code/frameworks/nextjs/src/config/webpack.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/frameworks/nextjs/src/config/webpack.ts b/code/frameworks/nextjs/src/config/webpack.ts
index 030da6b2ab77..4b10922c9df9 100644
--- a/code/frameworks/nextjs/src/config/webpack.ts
+++ b/code/frameworks/nextjs/src/config/webpack.ts
@@ -71,5 +71,5 @@ const setupRuntimeConfig = async (
 
   // Load DefinePlugin with a dynamic import to ensure that Next.js can first
   // replace webpack with its own internal instance, and we get that here.
-  baseConfig.plugins?.push(new (await import('webpack')).DefinePlugin(definePluginConfig));
+  baseConfig.plugins?.push(new (await import('webpack')).default.DefinePlugin(definePluginConfig));
 };

From 6dc27904eabb0fbfc9a4be3c8dbebe877104c571 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Thu, 12 Dec 2024 17:56:42 +0800
Subject: [PATCH 19/28] UI: Fix controls and parameters on tag-filtered stories

---
 code/core/src/manager-api/lib/stories.ts      |  1 +
 code/core/src/manager-api/modules/refs.ts     | 26 +++++-
 code/core/src/manager-api/modules/stories.ts  | 79 +++++++++++++------
 code/core/src/manager-api/tests/refs.test.ts  | 28 +++++--
 .../src/manager-api/tests/stories.test.ts     | 20 +++--
 .../components/sidebar/Explorer.stories.tsx   | 10 +--
 .../components/sidebar/Refs.stories.tsx       | 24 +++---
 .../src/manager/components/sidebar/Refs.tsx   |  2 +-
 .../components/sidebar/Sidebar.stories.tsx    |  6 +-
 .../manager/components/sidebar/Sidebar.tsx    |  1 +
 code/core/src/manager/container/Sidebar.tsx   |  2 +-
 code/core/src/types/modules/api.ts            |  2 +
 12 files changed, 136 insertions(+), 65 deletions(-)

diff --git a/code/core/src/manager-api/lib/stories.ts b/code/core/src/manager-api/lib/stories.ts
index 59b59f070a10..28fbc190853b 100644
--- a/code/core/src/manager-api/lib/stories.ts
+++ b/code/core/src/manager-api/lib/stories.ts
@@ -342,6 +342,7 @@ export const transformStoryIndexToStoriesHash = (
     .reduce(addItem, orphanHash);
 };
 
+/** Now we need to patch in the existing prepared stories */
 export const addPreparedStories = (newHash: API_IndexHash, oldHash?: API_IndexHash) => {
   if (!oldHash) {
     return newHash;
diff --git a/code/core/src/manager-api/modules/refs.ts b/code/core/src/manager-api/modules/refs.ts
index 166c04786adc..cb9b8916ce29 100644
--- a/code/core/src/manager-api/modules/refs.ts
+++ b/code/core/src/manager-api/modules/refs.ts
@@ -179,7 +179,15 @@ export const init: ModuleFn<SubAPI, SubState> = (
     },
     changeRefVersion: async (id, url) => {
       const { versions, title } = api.getRefs()[id];
-      const ref: API_SetRefData = { id, url, versions, title, index: {}, expanded: true };
+      const ref: API_SetRefData = {
+        id,
+        url,
+        versions,
+        title,
+        index: {},
+        filteredIndex: {},
+        expanded: true,
+      };
 
       await api.setRef(id, { ...ref, type: 'unknown' }, false);
       await api.checkRef(ref);
@@ -292,6 +300,7 @@ export const init: ModuleFn<SubAPI, SubState> = (
       // eslint-disable-next-line @typescript-eslint/naming-convention
       let internal_index: StoryIndex | undefined;
       let index: API_IndexHash | undefined;
+      let filteredIndex: API_IndexHash | undefined;
       const { filters } = store.getState();
       const { storyMapper = defaultStoryMapper } = provider.getConfig();
       const ref = api.getRefs()[id];
@@ -304,19 +313,28 @@ export const init: ModuleFn<SubAPI, SubState> = (
           : storyIndex;
 
         // @ts-expect-error (could be undefined)
-        index = transformStoryIndexToStoriesHash(storyIndex, {
+        filteredIndex = transformStoryIndexToStoriesHash(storyIndex, {
           provider,
           docsOptions,
           filters,
           status: {},
         });
+        // @ts-expect-error (could be undefined)
+        index = transformStoryIndexToStoriesHash(storyIndex, {
+          provider,
+          docsOptions,
+          filters: {},
+          status: {},
+        });
       }
 
       if (index) {
         index = addRefIds(index, ref);
       }
-
-      await api.updateRef(id, { ...ref, ...rest, index, internal_index });
+      if (filteredIndex) {
+        filteredIndex = addRefIds(filteredIndex, ref);
+      }
+      await api.updateRef(id, { ...ref, ...rest, index, filteredIndex, internal_index });
     },
 
     updateRef: async (id, data) => {
diff --git a/code/core/src/manager-api/modules/stories.ts b/code/core/src/manager-api/modules/stories.ts
index 3c5aac769c6a..fa295bc20567 100644
--- a/code/core/src/manager-api/modules/stories.ts
+++ b/code/core/src/manager-api/modules/stories.ts
@@ -568,41 +568,61 @@ export const init: ModuleFn<SubAPI, SubState> = ({
     // The story index we receive on fetchStoryIndex is not, but all the prepared fields are optional
     // so we can cast one to the other easily enough
     setIndex: async (input) => {
-      const { index: oldHash, status, filters } = store.getState();
-      const newHash = transformStoryIndexToStoriesHash(input, {
+      const { filteredIndex: oldFilteredHash, index: oldHash, status, filters } = store.getState();
+      const newFilteredHash = transformStoryIndexToStoriesHash(input, {
         provider,
         docsOptions,
         status,
         filters,
       });
+      const newHash = transformStoryIndexToStoriesHash(input, {
+        provider,
+        docsOptions,
+        status,
+        filters: {},
+      });
 
-      // Now we need to patch in the existing prepared stories
-      const output = addPreparedStories(newHash, oldHash);
-
-      await store.setState({ internal_index: input, index: output, indexError: undefined });
+      await store.setState({
+        internal_index: input,
+        filteredIndex: addPreparedStories(newFilteredHash, oldFilteredHash),
+        index: addPreparedStories(newHash, oldHash),
+        indexError: undefined,
+      });
     },
+    // FIXME: is there a bug where filtered stories get added back in on updateStory???
     updateStory: async (
       storyId: StoryId,
       update: StoryUpdate,
       ref?: API_ComposedRef
     ): Promise<void> => {
       if (!ref) {
-        const { index } = store.getState();
-        if (!index) {
-          return;
+        const { index, filteredIndex } = store.getState();
+        if (index) {
+          index[storyId] = {
+            ...index[storyId],
+            ...update,
+          } as API_StoryEntry;
+        }
+        if (filteredIndex) {
+          filteredIndex[storyId] = {
+            ...filteredIndex[storyId],
+            ...update,
+          } as API_StoryEntry;
+        }
+        if (index || filteredIndex) {
+          await store.setState({ index, filteredIndex });
         }
+      } else {
+        const { id: refId, index, filteredIndex }: any = ref;
         index[storyId] = {
           ...index[storyId],
           ...update,
         } as API_StoryEntry;
-        await store.setState({ index });
-      } else {
-        const { id: refId, index }: any = ref;
-        index[storyId] = {
-          ...index[storyId],
+        filteredIndex[storyId] = {
+          ...filteredIndex[storyId],
           ...update,
         } as API_StoryEntry;
-        await fullAPI.updateRef(refId, { index });
+        await fullAPI.updateRef(refId, { index, filteredIndex });
       }
     },
     updateDocs: async (
@@ -611,22 +631,33 @@ export const init: ModuleFn<SubAPI, SubState> = ({
       ref?: API_ComposedRef
     ): Promise<void> => {
       if (!ref) {
-        const { index } = store.getState();
-        if (!index) {
-          return;
+        const { index, filteredIndex } = store.getState();
+        if (index) {
+          index[docsId] = {
+            ...index[docsId],
+            ...update,
+          } as API_DocsEntry;
         }
+        if (filteredIndex) {
+          filteredIndex[docsId] = {
+            ...filteredIndex[docsId],
+            ...update,
+          } as API_DocsEntry;
+        }
+        if (index || filteredIndex) {
+          await store.setState({ index, filteredIndex });
+        }
+      } else {
+        const { id: refId, index, filteredIndex }: any = ref;
         index[docsId] = {
           ...index[docsId],
           ...update,
         } as API_DocsEntry;
-        await store.setState({ index });
-      } else {
-        const { id: refId, index }: any = ref;
-        index[docsId] = {
-          ...index[docsId],
+        filteredIndex[docsId] = {
+          ...filteredIndex[docsId],
           ...update,
         } as API_DocsEntry;
-        await fullAPI.updateRef(refId, { index });
+        await fullAPI.updateRef(refId, { index, filteredIndex });
       }
     },
     setPreviewInitialized: async (ref) => {
diff --git a/code/core/src/manager-api/tests/refs.test.ts b/code/core/src/manager-api/tests/refs.test.ts
index c8d65baafc57..b9d39ee6a88b 100644
--- a/code/core/src/manager-api/tests/refs.test.ts
+++ b/code/core/src/manager-api/tests/refs.test.ts
@@ -291,6 +291,7 @@ describe('Refs API', () => {
         {
           "refs": {
             "fake": {
+              "filteredIndex": undefined,
               "id": "fake",
               "index": undefined,
               "indexError": {
@@ -360,6 +361,7 @@ describe('Refs API', () => {
         {
           "refs": {
             "fake": {
+              "filteredIndex": undefined,
               "id": "fake",
               "index": undefined,
               "indexError": {
@@ -504,6 +506,7 @@ describe('Refs API', () => {
         {
           "refs": {
             "fake": {
+              "filteredIndex": {},
               "id": "fake",
               "index": {},
               "internal_index": {
@@ -522,6 +525,7 @@ describe('Refs API', () => {
         {
           "refs": {
             "fake": {
+              "filteredIndex": {},
               "id": "fake",
               "index": {},
               "internal_index": {
@@ -601,6 +605,7 @@ describe('Refs API', () => {
         {
           "refs": {
             "fake": {
+              "filteredIndex": {},
               "id": "fake",
               "index": {},
               "internal_index": {
@@ -682,6 +687,7 @@ describe('Refs API', () => {
         {
           "refs": {
             "fake": {
+              "filteredIndex": {},
               "id": "fake",
               "index": {},
               "internal_index": {
@@ -763,6 +769,7 @@ describe('Refs API', () => {
         {
           "refs": {
             "fake": {
+              "filteredIndex": undefined,
               "id": "fake",
               "index": undefined,
               "internal_index": undefined,
@@ -905,6 +912,7 @@ describe('Refs API', () => {
         {
           "refs": {
             "fake": {
+              "filteredIndex": undefined,
               "id": "fake",
               "index": undefined,
               "internal_index": undefined,
@@ -987,6 +995,7 @@ describe('Refs API', () => {
         {
           "refs": {
             "fake": {
+              "filteredIndex": {},
               "id": "fake",
               "index": {},
               "internal_index": {
@@ -1068,6 +1077,7 @@ describe('Refs API', () => {
         {
           "refs": {
             "fake": {
+              "filteredIndex": {},
               "id": "fake",
               "index": {},
               "internal_index": {
@@ -1227,18 +1237,20 @@ describe('Refs API', () => {
         },
       };
 
+      const transformOptions = {
+        provider: provider as any,
+        docsOptions: {},
+        filters: {},
+        status: {},
+      };
       const initialState: Partial<State> = {
         refs: {
           fake: {
             id: 'fake',
             url: 'https://example.com',
             previewInitialized: true,
-            index: transformStoryIndexToStoriesHash(index, {
-              provider: provider as any,
-              docsOptions: {},
-              filters: {},
-              status: {},
-            }),
+            index: transformStoryIndexToStoriesHash(index, transformOptions),
+            filteredIndex: transformStoryIndexToStoriesHash(index, transformOptions),
             internal_index: index,
           },
         },
@@ -1261,10 +1273,10 @@ describe('Refs API', () => {
 
       await api.setRef('fake', { storyIndex: index });
 
-      await expect(api.getRefs().fake.index).toEqual(
+      await expect(api.getRefs().fake.filteredIndex).toEqual(
         expect.objectContaining({ 'a--1': expect.anything() })
       );
-      await expect(api.getRefs().fake.index).not.toEqual(
+      await expect(api.getRefs().fake.filteredIndex).not.toEqual(
         expect.objectContaining({ 'a--2': expect.anything() })
       );
     });
diff --git a/code/core/src/manager-api/tests/stories.test.ts b/code/core/src/manager-api/tests/stories.test.ts
index b652c87cd7a1..6f480061d9ec 100644
--- a/code/core/src/manager-api/tests/stories.test.ts
+++ b/code/core/src/manager-api/tests/stories.test.ts
@@ -765,10 +765,15 @@ describe('stories API', () => {
         source: '',
         sourceLocation: '',
         type: '',
-        ref: { id: 'refId', index: { 'a--1': { args: { a: 'b' } } } } as any,
+        ref: {
+          id: 'refId',
+          index: { 'a--1': { args: { a: 'b' } } },
+          filteredIndex: { 'a--1': { args: { a: 'b' } } },
+        } as any,
       });
       provider.channel.emit(STORY_ARGS_UPDATED, { storyId: 'a--1', args: { foo: 'bar' } });
       expect(fullAPI.updateRef).toHaveBeenCalledWith('refId', {
+        filteredIndex: { 'a--1': { args: { foo: 'bar' } } },
         index: { 'a--1': { args: { foo: 'bar' } } },
       });
     });
@@ -1539,6 +1544,7 @@ describe('stories API', () => {
         })
       );
     });
+
     it('updates state', async () => {
       const moduleArgs = createMockModuleArgs({});
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
@@ -1565,9 +1571,9 @@ describe('stories API', () => {
       await api.setIndex({ v: 5, entries: navigationEntries });
       await api.experimental_setFilter('myCustomFilter', (item: any) => item.id.startsWith('a'));
 
-      const { index } = store.getState();
+      const { filteredIndex } = store.getState();
 
-      expect(index).toMatchInlineSnapshot(`
+      expect(filteredIndex).toMatchInlineSnapshot(`
         {
           "a": {
             "children": [
@@ -1624,7 +1630,7 @@ describe('stories API', () => {
       );
 
       // empty, because there are no stories with status
-      expect(store.getState().index).toMatchInlineSnapshot('{}');
+      expect(store.getState().filteredIndex).toMatchInlineSnapshot('{}');
 
       // setting status should update the index
       await api.experimental_updateStatus('a-addon-id', {
@@ -1636,7 +1642,7 @@ describe('stories API', () => {
         'a--2': { status: 'success', title: 'a addon title', description: '' },
       });
 
-      expect(store.getState().index).toMatchInlineSnapshot(`
+      expect(store.getState().filteredIndex).toMatchInlineSnapshot(`
         {
           "a": {
             "children": [
@@ -1676,9 +1682,9 @@ describe('stories API', () => {
 
       await api.setIndex({ v: 5, entries: navigationEntries });
 
-      const { index } = store.getState();
+      const { filteredIndex } = store.getState();
 
-      expect(index).toMatchInlineSnapshot(`
+      expect(filteredIndex).toMatchInlineSnapshot(`
         {
           "a": {
             "children": [
diff --git a/code/core/src/manager/components/sidebar/Explorer.stories.tsx b/code/core/src/manager/components/sidebar/Explorer.stories.tsx
index 908ead2be9f3..34adad0a32a0 100644
--- a/code/core/src/manager/components/sidebar/Explorer.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Explorer.stories.tsx
@@ -34,7 +34,7 @@ const simple: Record<string, RefType> = {
     url: 'iframe.html',
     previewInitialized: true,
     // @ts-expect-error (invalid input)
-    index: mockDataset.withRoot,
+    filteredIndex: mockDataset.withRoot,
   },
 };
 
@@ -47,7 +47,7 @@ const withRefs: Record<string, RefType> = {
     previewInitialized: true,
     type: 'auto-inject',
     // @ts-expect-error (invalid input)
-    index: mockDataset.noRoot,
+    filteredIndex: mockDataset.noRoot,
   },
   injected: {
     id: 'injected',
@@ -56,7 +56,7 @@ const withRefs: Record<string, RefType> = {
     previewInitialized: false,
     type: 'auto-inject',
     // @ts-expect-error (invalid input)
-    index: mockDataset.noRoot,
+    filteredIndex: mockDataset.noRoot,
   },
   unknown: {
     id: 'unknown',
@@ -65,7 +65,7 @@ const withRefs: Record<string, RefType> = {
     previewInitialized: true,
     type: 'unknown',
     // @ts-expect-error (invalid input)
-    index: mockDataset.noRoot,
+    filteredIndex: mockDataset.noRoot,
   },
   lazy: {
     id: 'lazy',
@@ -74,7 +74,7 @@ const withRefs: Record<string, RefType> = {
     previewInitialized: false,
     type: 'lazy',
     // @ts-expect-error (invalid input)
-    index: mockDataset.withRoot,
+    filteredIndex: mockDataset.withRoot,
   },
 };
 
diff --git a/code/core/src/manager/components/sidebar/Refs.stories.tsx b/code/core/src/manager/components/sidebar/Refs.stories.tsx
index a042970beadc..3b6e37efce50 100644
--- a/code/core/src/manager/components/sidebar/Refs.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Refs.stories.tsx
@@ -37,11 +37,11 @@ export default {
 };
 
 const { menu } = standardHeaderData;
-const index = mockDataset.withRoot;
+const filteredIndex = mockDataset.withRoot;
 const storyId = '1-12-121';
 
-export const simpleData = { menu, index, storyId };
-export const loadingData = { menu, index: {} };
+export const simpleData = { menu, filteredIndex, storyId };
+export const loadingData = { menu, filteredIndex: {} };
 
 // @ts-expect-error (non strict)
 const indexError: Error = (() => {
@@ -60,14 +60,14 @@ const refs: Record<string, RefType> = {
     previewInitialized: false,
     type: 'lazy',
     // @ts-expect-error (invalid input)
-    index,
+    filteredIndex,
   },
   empty: {
     id: 'empty',
     title: 'It is empty because no stories were loaded',
     url: 'https://example.com',
     type: 'lazy',
-    index: {},
+    filteredIndex: {},
     previewInitialized: false,
   },
   startInjected_unknown: {
@@ -77,7 +77,7 @@ const refs: Record<string, RefType> = {
     type: 'unknown',
     previewInitialized: false,
     // @ts-expect-error (invalid input)
-    index,
+    filteredIndex,
   },
   startInjected_loading: {
     id: 'startInjected_loading',
@@ -86,7 +86,7 @@ const refs: Record<string, RefType> = {
     type: 'auto-inject',
     previewInitialized: false,
     // @ts-expect-error (invalid input)
-    index,
+    filteredIndex,
   },
   startInjected_ready: {
     id: 'startInjected_ready',
@@ -95,7 +95,7 @@ const refs: Record<string, RefType> = {
     type: 'auto-inject',
     previewInitialized: true,
     // @ts-expect-error (invalid input)
-    index,
+    filteredIndex,
   },
   versions: {
     id: 'versions',
@@ -103,7 +103,7 @@ const refs: Record<string, RefType> = {
     url: 'https://example.com',
     type: 'lazy',
     // @ts-expect-error (invalid input)
-    index,
+    filteredIndex,
     versions: { '1.0.0': 'https://example.com/v1', '2.0.0': 'https://example.com' },
     previewInitialized: true,
   },
@@ -113,7 +113,7 @@ const refs: Record<string, RefType> = {
     url: 'https://example.com',
     type: 'lazy',
     // @ts-expect-error (invalid input)
-    index,
+    filteredIndex,
     versions: { '1.0.0': 'https://example.com/v1', '2.0.0': 'https://example.com/v2' },
     previewInitialized: true,
   },
@@ -138,7 +138,7 @@ const refs: Record<string, RefType> = {
     title: 'This storybook has a very very long name for some reason',
     url: 'https://example.com',
     // @ts-expect-error (invalid input)
-    index,
+    filteredIndex,
     type: 'lazy',
     versions: {
       '111.111.888-new': 'https://example.com/new',
@@ -154,7 +154,7 @@ const refs: Record<string, RefType> = {
     previewInitialized: false,
     type: 'lazy',
     // @ts-expect-error (invalid input)
-    index,
+    filteredIndex,
   },
 };
 
diff --git a/code/core/src/manager/components/sidebar/Refs.tsx b/code/core/src/manager/components/sidebar/Refs.tsx
index 7412a627e889..b4d2a79ca351 100644
--- a/code/core/src/manager/components/sidebar/Refs.tsx
+++ b/code/core/src/manager/components/sidebar/Refs.tsx
@@ -81,7 +81,7 @@ export const Ref: FC<RefType & RefProps & { status?: State['status'] }> = React.
     const { docsOptions } = useStorybookState();
     const api = useStorybookApi();
     const {
-      index,
+      filteredIndex: index,
       id: refId,
       title = refId,
       isLoading: isLoadingMain,
diff --git a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
index 53f22957f17d..0e2df01f6aed 100644
--- a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
@@ -111,7 +111,7 @@ const refs: Record<string, RefType> = {
     title: 'This is a ref',
     url: 'https://example.com',
     type: 'lazy',
-    index,
+    filteredIndex: index,
     previewInitialized: true,
   },
 };
@@ -123,7 +123,7 @@ const refsError = {
   optimized: {
     ...refs.optimized,
     // @ts-expect-error (non strict)
-    index: undefined as IndexHash,
+    filteredIndex: undefined as IndexHash,
     indexError,
   },
 };
@@ -132,7 +132,7 @@ const refsEmpty = {
   optimized: {
     ...refs.optimized,
     // type: 'auto-inject',
-    index: {} as IndexHash,
+    filteredIndex: {} as IndexHash,
   },
 };
 
diff --git a/code/core/src/manager/components/sidebar/Sidebar.tsx b/code/core/src/manager/components/sidebar/Sidebar.tsx
index d4784cc8c562..dfec7fba7826 100644
--- a/code/core/src/manager/components/sidebar/Sidebar.tsx
+++ b/code/core/src/manager/components/sidebar/Sidebar.tsx
@@ -93,6 +93,7 @@ const useCombination = (
     () => ({
       [DEFAULT_REF_ID]: {
         index,
+        filteredIndex: index,
         indexError,
         previewInitialized,
         status,
diff --git a/code/core/src/manager/container/Sidebar.tsx b/code/core/src/manager/container/Sidebar.tsx
index bc05d1713b59..723d9989ac10 100755
--- a/code/core/src/manager/container/Sidebar.tsx
+++ b/code/core/src/manager/container/Sidebar.tsx
@@ -27,7 +27,7 @@ const Sidebar = React.memo(function Sideber({ onMenuClick }: SidebarProps) {
       // is actually the stories hash. We should fix this up and make it consistent.
       // eslint-disable-next-line @typescript-eslint/naming-convention
       internal_index,
-      index,
+      filteredIndex: index,
       status,
       indexError,
       previewInitialized,
diff --git a/code/core/src/types/modules/api.ts b/code/core/src/types/modules/api.ts
index 30edbe36ad29..f5e2d6f32100 100644
--- a/code/core/src/types/modules/api.ts
+++ b/code/core/src/types/modules/api.ts
@@ -155,6 +155,7 @@ export type API_StoryMapper = (ref: API_ComposedRef, story: SetStoriesStory) =>
 
 export interface API_LoadedRefData {
   index?: API_IndexHash;
+  filteredIndex?: API_IndexHash;
   indexError?: Error;
   previewInitialized: boolean;
 }
@@ -180,6 +181,7 @@ export type API_ComposedRefUpdate = Partial<
     | 'type'
     | 'expanded'
     | 'index'
+    | 'filteredIndex'
     | 'versions'
     | 'loginUrl'
     | 'version'

From 632402769c40be7c979a0095e16ee5c30667900b Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 13 Dec 2024 13:12:20 +0100
Subject: [PATCH 20/28] Build: Improve waiting detection on E2E to fix flake

---
 code/e2e-tests/util.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/code/e2e-tests/util.ts b/code/e2e-tests/util.ts
index 057dc91f715d..0e8c6d0b93d8 100644
--- a/code/e2e-tests/util.ts
+++ b/code/e2e-tests/util.ts
@@ -112,6 +112,10 @@ export class SbPage {
     const storyLoadingPage = root.locator('.sb-preparing-story');
     await docsLoadingPage.waitFor({ state: 'hidden' });
     await storyLoadingPage.waitFor({ state: 'hidden' });
+    await this.page.waitForFunction(() => {
+      const storybookRoot = document.querySelector('#storybook-root');
+      return storybookRoot && storybookRoot.children.length > 0;
+    });
   }
 
   previewIframe() {

From cf809b93e46286e5a446153e6d567bf1428d52bd Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 13 Dec 2024 13:15:51 +0100
Subject: [PATCH 21/28] add deps optimization in react kitchen sink

---
 .../react/.storybook/main.ts                     | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/test-storybooks/portable-stories-kitchen-sink/react/.storybook/main.ts b/test-storybooks/portable-stories-kitchen-sink/react/.storybook/main.ts
index 0a76f80b4d25..57b96d2e8d1e 100644
--- a/test-storybooks/portable-stories-kitchen-sink/react/.storybook/main.ts
+++ b/test-storybooks/portable-stories-kitchen-sink/react/.storybook/main.ts
@@ -12,9 +12,21 @@ const config: StorybookConfig = {
     options: {},
   },
   core: {
-    disableWhatsNewNotifications: true
+    disableWhatsNewNotifications: true,
   },
-  previewHead: (head = '') => `${head}
+  viteFinal: (config) => ({
+    ...config,
+    optimizeDeps: {
+      ...config.optimizeDeps,
+      include: [
+        ...(config.optimizeDeps?.include || []),
+        "react-dom/test-utils",
+        "@storybook/react/**",
+        "@storybook/experimental-addon-test/preview",
+      ],
+    },
+  }),
+  previewHead: (head = "") => `${head}
   <style>
     body {
       border: 1px solid red;

From f2a8af81c1ab5b8b665a6ccc167eb1fb8df9b784 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Fri, 13 Dec 2024 20:37:40 +0800
Subject: [PATCH 22/28] Fix typechecks

---
 code/core/src/manager/components/preview/Toolbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/core/src/manager/components/preview/Toolbar.tsx b/code/core/src/manager/components/preview/Toolbar.tsx
index 5dd460e80e69..05385487a804 100644
--- a/code/core/src/manager/components/preview/Toolbar.tsx
+++ b/code/core/src/manager/components/preview/Toolbar.tsx
@@ -92,7 +92,7 @@ export const createTabsTool = (tabs: Addon_BaseType[]): Addon_BaseType => ({
                 const isActive = rp.path.includes(`tab=${tab.id}`);
                 return (
                   <TabButton
-                    disabled={tab.disabled}
+                    disabled={!!tab.disabled}
                     active={isActive}
                     onClick={() => {
                       rp.applyQueryParams({ tab: tabIdToApply });
@@ -146,7 +146,7 @@ export const ToolbarComp = React.memo<ToolData>(function ToolbarComp({
                 {tabs.map((tab, index) => {
                   return (
                     <TabButton
-                      disabled={tab.disabled}
+                      disabled={!!tab.disabled}
                       active={tab.id === tabId || (tab.id === 'canvas' && !tabId)}
                       onClick={() => {
                         api.applyQueryParams({ tab: tab.id === 'canvas' ? undefined : tab.id });

From 42b895d583e9d4d834659af581199ef4050f8f40 Mon Sep 17 00:00:00 2001
From: storybook-bot <32066757+storybook-bot@users.noreply.github.com>
Date: Fri, 13 Dec 2024 13:42:04 +0000
Subject: [PATCH 23/28] Write changelog for 8.5.0-alpha.22 [skip ci]

---
 CHANGELOG.prerelease.md | 16 ++++++++++++++++
 code/package.json       |  3 ++-
 docs/versions/next.json |  2 +-
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
index c10fb3b99635..d83e71323f92 100644
--- a/CHANGELOG.prerelease.md
+++ b/CHANGELOG.prerelease.md
@@ -1,3 +1,19 @@
+## 8.5.0-alpha.22
+
+- Addon Docs: Dynamically import rehype - [#29544](https://github.com/storybookjs/storybook/pull/29544), thanks @valentinpalkovic!
+- Addon Test: Fix duplicate `test.include` patterns - [#30029](https://github.com/storybookjs/storybook/pull/30029), thanks @JReinhold!
+- Addon Test: Fix environment variable for Vitest Storybook integration - [#30054](https://github.com/storybookjs/storybook/pull/30054), thanks @valentinpalkovic!
+- Addon Test: Use local storybook binary instead - [#30021](https://github.com/storybookjs/storybook/pull/30021), thanks @kasperpeulen!
+- Addon Test: Wait for 2 seconds before showing result mismatch warning - [#30002](https://github.com/storybookjs/storybook/pull/30002), thanks @ghengeveld!
+- Angular: Support statsJson in angular schemas - [#29233](https://github.com/storybookjs/storybook/pull/29233), thanks @yannbf!
+- Core: Fix `scrollIntoView` behavior and reimplement testing module time rendering - [#30044](https://github.com/storybookjs/storybook/pull/30044), thanks @ghengeveld!
+- Docs: Add code snippet to addons panel - [#29253](https://github.com/storybookjs/storybook/pull/29253), thanks @larsrickert!
+- Next.js: Fix webpack fsCache not working - [#29654](https://github.com/storybookjs/storybook/pull/29654), thanks @sentience!
+- Nextjs-Vite: Add TS docgen support - [#29824](https://github.com/storybookjs/storybook/pull/29824), thanks @yannbf!
+- Nextjs-Vite: Fix docgen types in main config - [#30042](https://github.com/storybookjs/storybook/pull/30042), thanks @yannbf!
+- React: Fix RSC compatibility with addon-themes and hooks - [#26243](https://github.com/storybookjs/storybook/pull/26243), thanks @shilman!
+- UI: Fix controls and parameters on tag-filtered stories - [#30038](https://github.com/storybookjs/storybook/pull/30038), thanks @shilman!
+
 ## 8.5.0-alpha.21
 
 - Addon A11y: Add typesVersions support for TypeScript definitions in a11y package - [#30005](https://github.com/storybookjs/storybook/pull/30005), thanks @valentinpalkovic!
diff --git a/code/package.json b/code/package.json
index 50f1604dc814..6a7cb034c37f 100644
--- a/code/package.json
+++ b/code/package.json
@@ -294,5 +294,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.5.0-alpha.22"
 }
diff --git a/docs/versions/next.json b/docs/versions/next.json
index c38c2352087f..8ba437344971 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"8.5.0-alpha.21","info":{"plain":"- Addon A11y: Add typesVersions support for TypeScript definitions in a11y package - [#30005](https://github.com/storybookjs/storybook/pull/30005), thanks @valentinpalkovic!\n- Addon A11y: Refactor environment variable handling for Vitest integration - [#30022](https://github.com/storybookjs/storybook/pull/30022), thanks @valentinpalkovic!\n- Addon A11y: Run the a11y automigration on postInstall - [#30004](https://github.com/storybookjs/storybook/pull/30004), thanks @kasperpeulen!\n- Addon A11y: Update accessibility status handling in TestProviderRender - [#30027](https://github.com/storybookjs/storybook/pull/30027), thanks @valentinpalkovic!\n- Addon Onboarding: Prebundle react-confetti - [#29996](https://github.com/storybookjs/storybook/pull/29996), thanks @yannbf!\n- Addon Test: Correctly stop Storybook when Vitest closes - [#30012](https://github.com/storybookjs/storybook/pull/30012), thanks @JReinhold!\n- Addon Test: Show sub test provider toggle state in main testing module - [#30019](https://github.com/storybookjs/storybook/pull/30019), thanks @ghengeveld!\n- Addon Test: Wrap sub-paths exported with `require.resolve` - [#30026](https://github.com/storybookjs/storybook/pull/30026), thanks @ndelangen!\n- Core: Fix bundling of React - [#30003](https://github.com/storybookjs/storybook/pull/30003), thanks @yannbf!"}}
+{"version":"8.5.0-alpha.22","info":{"plain":"- Addon Docs: Dynamically import rehype - [#29544](https://github.com/storybookjs/storybook/pull/29544), thanks @valentinpalkovic!\n- Addon Test: Fix duplicate `test.include` patterns - [#30029](https://github.com/storybookjs/storybook/pull/30029), thanks @JReinhold!\n- Addon Test: Fix environment variable for Vitest Storybook integration - [#30054](https://github.com/storybookjs/storybook/pull/30054), thanks @valentinpalkovic!\n- Addon Test: Use local storybook binary instead - [#30021](https://github.com/storybookjs/storybook/pull/30021), thanks @kasperpeulen!\n- Addon Test: Wait for 2 seconds before showing result mismatch warning - [#30002](https://github.com/storybookjs/storybook/pull/30002), thanks @ghengeveld!\n- Angular: Support statsJson in angular schemas - [#29233](https://github.com/storybookjs/storybook/pull/29233), thanks @yannbf!\n- Core: Fix `scrollIntoView` behavior and reimplement testing module time rendering - [#30044](https://github.com/storybookjs/storybook/pull/30044), thanks @ghengeveld!\n- Docs: Add code snippet to addons panel - [#29253](https://github.com/storybookjs/storybook/pull/29253), thanks @larsrickert!\n- Next.js: Fix webpack fsCache not working - [#29654](https://github.com/storybookjs/storybook/pull/29654), thanks @sentience!\n- Nextjs-Vite: Add TS docgen support - [#29824](https://github.com/storybookjs/storybook/pull/29824), thanks @yannbf!\n- Nextjs-Vite: Fix docgen types in main config - [#30042](https://github.com/storybookjs/storybook/pull/30042), thanks @yannbf!\n- React: Fix RSC compatibility with addon-themes and hooks - [#26243](https://github.com/storybookjs/storybook/pull/26243), thanks @shilman!\n- UI: Fix controls and parameters on tag-filtered stories - [#30038](https://github.com/storybookjs/storybook/pull/30038), thanks @shilman!"}}

From 235e6399d9b44ff3a8a12c9ae467b8e12b1d7b6a Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Fri, 13 Dec 2024 06:48:33 -0700
Subject: [PATCH 24/28] Update exclude details

---
 docs/writing-tests/test-coverage.mdx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/writing-tests/test-coverage.mdx b/docs/writing-tests/test-coverage.mdx
index bb150ef1af56..4f0dd7700a1c 100644
--- a/docs/writing-tests/test-coverage.mdx
+++ b/docs/writing-tests/test-coverage.mdx
@@ -192,7 +192,7 @@ When calculating coverage in the Storybook UI, the following options are always
 
 #### Excluding stories from the coverage report
 
-Until Vitest 2.2.0 is released, the generated coverage report will include the stories files themselves. This is misleading and they should be excluded. To do this, you can add the following to your Vitest config:
+Until Vitest 3.0.0 is released, the generated coverage report will include the stories files themselves and output from your built Storybook application. This is misleading and they should be excluded. To do this, you can add the following to your Vitest config:
 
 ```ts title="vitest.config.ts"
 import { coverageConfigDefaults, defineConfig } from 'vitest/config';
@@ -205,7 +205,9 @@ export default defineConfig({
       exclude: [
          ...coverageConfigDefaults.exclude,
          // This pattern must align with the `stories` property of your `.storybook/main.ts` config
-         '**/*.stories.*', '**/*.story.*', '**/stories.*', '**/story.*'
+         '**/*.stories.*',
+         // This pattern must align with the output directory of `storybook build`
+         'storybook-static/**',
        ], 
     }
   }

From b9550a95f055230b944e78a847bcccb3fef4db9e Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Fri, 13 Dec 2024 14:59:05 +0100
Subject: [PATCH 25/28] Refactor addonA11yAddonTest to improve setup file
 transformation and version range handling

---
 .../fixes/addon-a11y-addon-test.test.ts       | 33 +++++++++++++++++--
 .../fixes/addon-a11y-addon-test.ts            | 23 ++++++++-----
 2 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.test.ts
index 71110733d896..7bd831d082b7 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.test.ts
@@ -141,7 +141,8 @@ describe('addonA11yAddonTest', () => {
       `;
       vi.mocked(readFileSync).mockReturnValue(source);
 
-      const transformedCode = transformSetupFile(setupFile);
+      const s = readFileSync(setupFile, 'utf8');
+      const transformedCode = transformSetupFile(s);
       expect(transformedCode).toMatchInlineSnapshot(`
         "import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
         import { beforeAll } from 'vitest';
@@ -169,7 +170,35 @@ describe('addonA11yAddonTest', () => {
       `;
       vi.mocked(readFileSync).mockReturnValue(source);
 
-      const transformedCode = transformSetupFile(setupFile);
+      const s = readFileSync(setupFile, 'utf8');
+      const transformedCode = transformSetupFile(s);
+      expect(transformedCode).toMatchInlineSnapshot(`
+        "import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+        import { beforeAll } from 'vitest';
+        import { setProjectAnnotations } from 'storybook';
+        import * as projectAnnotations from './preview';
+
+        const project = setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);
+
+        beforeAll(project.beforeAll);"
+      `);
+    });
+
+    it('should transform setup file correctly - project annotation is not an array', () => {
+      const setupFile = '/path/to/vitest.setup.ts';
+      const source = dedent`
+        import { beforeAll } from 'vitest';
+        import { setProjectAnnotations } from 'storybook';
+        import * as projectAnnotations from './preview';
+
+        const project = setProjectAnnotations(projectAnnotations);
+
+        beforeAll(project.beforeAll);
+      `;
+      vi.mocked(readFileSync).mockReturnValue(source);
+
+      const s = readFileSync(setupFile, 'utf8');
+      const transformedCode = transformSetupFile(s);
       expect(transformedCode).toMatchInlineSnapshot(`
         "import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
         import { beforeAll } from 'vitest';
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.ts b/code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.ts
index ae848cf57689..6b85146407f6 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.ts
@@ -22,8 +22,7 @@ interface AddonA11yAddonTestOptions {
  */
 export const addonA11yAddonTest: Fix<AddonA11yAddonTestOptions> = {
   id: 'addonA11yAddonTest',
-  // TODO: Change to the correct version after testing
-  versionRange: ['<8.5.0', '*'],
+  versionRange: ['<8.5.0', '>=8.5.0'],
 
   promptType(result) {
     if (result.setupFile === null) {
@@ -53,7 +52,11 @@ export const addonA11yAddonTest: Fix<AddonA11yAddonTestOptions> = {
 
     try {
       if (vitestSetupFile) {
-        const transformedSetupCode = transformSetupFile(vitestSetupFile);
+        const source = readFileSync(vitestSetupFile, 'utf8');
+        if (source.includes('@storybook/addon-a11y')) {
+          return null;
+        }
+        const transformedSetupCode = transformSetupFile(source);
         return {
           setupFile: vitestSetupFile,
           transformedSetupCode,
@@ -124,8 +127,7 @@ export const addonA11yAddonTest: Fix<AddonA11yAddonTestOptions> = {
   },
 };
 
-export function transformSetupFile(setupFile: string) {
-  const source = readFileSync(setupFile, 'utf8');
+export function transformSetupFile(source: string) {
   const j = jscodeshift.withParser('ts');
 
   const root = j(source);
@@ -148,9 +150,14 @@ export function transformSetupFile(setupFile: string) {
     throw new Error('Could not find setProjectAnnotations call in vitest.setup file');
   }
 
-  // Add a11yAddonAnnotations to the annotations array
-  setProjectAnnotationsCall.find(j.ArrayExpression).forEach((p) => {
-    p.value.elements.unshift(j.identifier('a11yAddonAnnotations'));
+  // Add a11yAddonAnnotations to the annotations array or create a new array if argument is a string
+  setProjectAnnotationsCall.forEach((p) => {
+    if (p.value.arguments.length === 1 && p.value.arguments[0].type === 'ArrayExpression') {
+      p.value.arguments[0].elements.unshift(j.identifier('a11yAddonAnnotations'));
+    } else if (p.value.arguments.length === 1 && p.value.arguments[0].type === 'Identifier') {
+      const arg = p.value.arguments[0];
+      p.value.arguments[0] = j.arrayExpression([j.identifier('a11yAddonAnnotations'), arg]);
+    }
   });
 
   // Add the import declaration at the top

From d821e7f4081a03112c62751123c0ef395c83265d Mon Sep 17 00:00:00 2001
From: storybook-bot <32066757+storybook-bot@users.noreply.github.com>
Date: Fri, 13 Dec 2024 15:30:04 +0000
Subject: [PATCH 26/28] Bump version from "8.5.0-alpha.21" to "8.5.0-alpha.22"
 [skip ci]

---
 code/addons/a11y/package.json                 |   2 +-
 code/addons/actions/package.json              |   2 +-
 code/addons/backgrounds/package.json          |   2 +-
 code/addons/controls/package.json             |   2 +-
 code/addons/docs/package.json                 |   2 +-
 code/addons/essentials/package.json           |   2 +-
 code/addons/gfm/package.json                  |   2 +-
 code/addons/highlight/package.json            |   2 +-
 code/addons/interactions/package.json         |   2 +-
 code/addons/jest/package.json                 |   2 +-
 code/addons/links/package.json                |   2 +-
 code/addons/measure/package.json              |   2 +-
 code/addons/onboarding/package.json           |   2 +-
 code/addons/outline/package.json              |   2 +-
 code/addons/storysource/package.json          |   2 +-
 code/addons/test/package.json                 |   2 +-
 code/addons/themes/package.json               |   2 +-
 code/addons/toolbars/package.json             |   2 +-
 code/addons/viewport/package.json             |   2 +-
 code/builders/builder-vite/package.json       |   2 +-
 code/builders/builder-webpack5/package.json   |   2 +-
 code/core/package.json                        |   2 +-
 code/core/src/common/versions.ts              | 170 +++++++++---------
 code/core/src/manager-api/version.ts          |   2 +-
 code/deprecated/builder-manager/package.json  |   2 +-
 code/deprecated/channels/package.json         |   2 +-
 code/deprecated/client-logger/package.json    |   2 +-
 code/deprecated/components/package.json       |   2 +-
 code/deprecated/core-common/package.json      |   2 +-
 code/deprecated/core-events/package.json      |   2 +-
 code/deprecated/core-server/package.json      |   2 +-
 code/deprecated/csf-tools/package.json        |   2 +-
 code/deprecated/docs-tools/package.json       |   2 +-
 code/deprecated/manager-api/package.json      |   2 +-
 code/deprecated/manager/package.json          |   2 +-
 code/deprecated/node-logger/package.json      |   2 +-
 code/deprecated/preview-api/package.json      |   2 +-
 code/deprecated/preview/package.json          |   2 +-
 code/deprecated/router/package.json           |   2 +-
 code/deprecated/telemetry/package.json        |   2 +-
 code/deprecated/theming/package.json          |   2 +-
 code/deprecated/types/package.json            |   2 +-
 code/frameworks/angular/package.json          |   2 +-
 code/frameworks/ember/package.json            |   2 +-
 .../experimental-nextjs-vite/package.json     |   2 +-
 code/frameworks/html-vite/package.json        |   2 +-
 code/frameworks/html-webpack5/package.json    |   2 +-
 code/frameworks/nextjs/package.json           |   2 +-
 code/frameworks/preact-vite/package.json      |   2 +-
 code/frameworks/preact-webpack5/package.json  |   2 +-
 .../react-native-web-vite/package.json        |   2 +-
 code/frameworks/react-vite/package.json       |   2 +-
 code/frameworks/react-webpack5/package.json   |   2 +-
 code/frameworks/server-webpack5/package.json  |   2 +-
 code/frameworks/svelte-vite/package.json      |   2 +-
 code/frameworks/svelte-webpack5/package.json  |   2 +-
 code/frameworks/sveltekit/package.json        |   2 +-
 code/frameworks/vue3-vite/package.json        |   2 +-
 code/frameworks/vue3-webpack5/package.json    |   2 +-
 .../web-components-vite/package.json          |   2 +-
 .../web-components-webpack5/package.json      |   2 +-
 code/lib/blocks/package.json                  |   2 +-
 code/lib/cli-sb/package.json                  |   2 +-
 code/lib/cli-storybook/package.json           |   2 +-
 code/lib/cli/package.json                     |   2 +-
 code/lib/codemod/package.json                 |   2 +-
 code/lib/core-webpack/package.json            |   2 +-
 code/lib/create-storybook/package.json        |   2 +-
 code/lib/csf-plugin/package.json              |   2 +-
 code/lib/instrumenter/package.json            |   2 +-
 code/lib/react-dom-shim/package.json          |   2 +-
 code/lib/source-loader/package.json           |   2 +-
 code/lib/test/package.json                    |   2 +-
 code/package.json                             |   5 +-
 code/presets/create-react-app/package.json    |   2 +-
 code/presets/html-webpack/package.json        |   2 +-
 code/presets/preact-webpack/package.json      |   2 +-
 code/presets/react-webpack/package.json       |   2 +-
 code/presets/server-webpack/package.json      |   2 +-
 code/presets/svelte-webpack/package.json      |   2 +-
 code/presets/vue3-webpack/package.json        |   2 +-
 code/renderers/html/package.json              |   2 +-
 code/renderers/preact/package.json            |   2 +-
 code/renderers/react/package.json             |   2 +-
 code/renderers/server/package.json            |   2 +-
 code/renderers/svelte/package.json            |   2 +-
 code/renderers/vue3/package.json              |   2 +-
 code/renderers/web-components/package.json    |   2 +-
 88 files changed, 173 insertions(+), 174 deletions(-)

diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
index 67e5942522ea..871521c0bbb5 100644
--- a/code/addons/a11y/package.json
+++ b/code/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",
diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json
index 7fbcf17f65ca..cd465addf3f5 100644
--- a/code/addons/actions/package.json
+++ b/code/addons/actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",
diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json
index eb5029e0cf4f..64ddf7cbe09b 100644
--- a/code/addons/backgrounds/package.json
+++ b/code/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",
diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json
index 57f55867aab1..d7837a6dbb59 100644
--- a/code/addons/controls/package.json
+++ b/code/addons/controls/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",
diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
index 85ad01ecc334..4e2a84bfd70a 100644
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json
index 8946fc941275..3fde9eab3744 100644
--- a/code/addons/essentials/package.json
+++ b/code/addons/essentials/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",
diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json
index 050e23eee083..c4042cd7690a 100644
--- a/code/addons/gfm/package.json
+++ b/code/addons/gfm/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",
diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json
index 132725309900..f84dfd1ed338 100644
--- a/code/addons/highlight/package.json
+++ b/code/addons/highlight/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",
diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json
index 94616d18d0b2..b584e70801c4 100644
--- a/code/addons/interactions/package.json
+++ b/code/addons/interactions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",
diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json
index 6cd0af1cf358..05197566dd86 100644
--- a/code/addons/jest/package.json
+++ b/code/addons/jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",
diff --git a/code/addons/links/package.json b/code/addons/links/package.json
index 400983200101..a5068e439214 100644
--- a/code/addons/links/package.json
+++ b/code/addons/links/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "storybook-addons",
diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json
index c3dc010a7a79..036809014573 100644
--- a/code/addons/measure/package.json
+++ b/code/addons/measure/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",
diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json
index da5be23da6de..496fdf643e76 100644
--- a/code/addons/onboarding/package.json
+++ b/code/addons/onboarding/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-onboarding",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
   "keywords": [
     "storybook-addons",
diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json
index 7a835eb493b4..404c69cb7c1d 100644
--- a/code/addons/outline/package.json
+++ b/code/addons/outline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",
diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json
index edb6981d7fcf..46db49209197 100644
--- a/code/addons/storysource/package.json
+++ b/code/addons/storysource/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",
diff --git a/code/addons/test/package.json b/code/addons/test/package.json
index e74a870c875a..9c96805ede79 100644
--- a/code/addons/test/package.json
+++ b/code/addons/test/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/experimental-addon-test",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Integrate Vitest with Storybook",
   "keywords": [
     "storybook-addons",
diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json
index 30ac3cda924c..9e788efc90cf 100644
--- a/code/addons/themes/package.json
+++ b/code/addons/themes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Switch between multiple themes for you components in Storybook",
   "keywords": [
     "css",
diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json
index 740f58f8ad96..21716863b7b6 100644
--- a/code/addons/toolbars/package.json
+++ b/code/addons/toolbars/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Create your own toolbar items that control story rendering",
   "keywords": [
     "addon",
diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json
index 4202107ed176..dfe78a2799b1 100644
--- a/code/addons/viewport/package.json
+++ b/code/addons/viewport/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",
diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json
index 856346cc86a2..1a19730107ca 100644
--- a/code/builders/builder-vite/package.json
+++ b/code/builders/builder-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-vite",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "A plugin to run and build Storybooks with Vite",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
   "bugs": {
diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json
index 387b808ae269..8dca343bbc1f 100644
--- a/code/builders/builder-webpack5/package.json
+++ b/code/builders/builder-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
diff --git a/code/core/package.json b/code/core/package.json
index ff9c6c9b3c3f..c0a6b170ff23 100644
--- a/code/core/package.json
+++ b/code/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts
index ddc0f5d2ed67..cd5bdcc85a13 100644
--- a/code/core/src/common/versions.ts
+++ b/code/core/src/common/versions.ts
@@ -1,88 +1,88 @@
 // auto generated file, do not edit
 export default {
-  '@storybook/addon-a11y': '8.5.0-alpha.21',
-  '@storybook/addon-actions': '8.5.0-alpha.21',
-  '@storybook/addon-backgrounds': '8.5.0-alpha.21',
-  '@storybook/addon-controls': '8.5.0-alpha.21',
-  '@storybook/addon-docs': '8.5.0-alpha.21',
-  '@storybook/addon-essentials': '8.5.0-alpha.21',
-  '@storybook/addon-mdx-gfm': '8.5.0-alpha.21',
-  '@storybook/addon-highlight': '8.5.0-alpha.21',
-  '@storybook/addon-interactions': '8.5.0-alpha.21',
-  '@storybook/addon-jest': '8.5.0-alpha.21',
-  '@storybook/addon-links': '8.5.0-alpha.21',
-  '@storybook/addon-measure': '8.5.0-alpha.21',
-  '@storybook/addon-onboarding': '8.5.0-alpha.21',
-  '@storybook/addon-outline': '8.5.0-alpha.21',
-  '@storybook/addon-storysource': '8.5.0-alpha.21',
-  '@storybook/experimental-addon-test': '8.5.0-alpha.21',
-  '@storybook/addon-themes': '8.5.0-alpha.21',
-  '@storybook/addon-toolbars': '8.5.0-alpha.21',
-  '@storybook/addon-viewport': '8.5.0-alpha.21',
-  '@storybook/builder-vite': '8.5.0-alpha.21',
-  '@storybook/builder-webpack5': '8.5.0-alpha.21',
-  '@storybook/core': '8.5.0-alpha.21',
-  '@storybook/builder-manager': '8.5.0-alpha.21',
-  '@storybook/channels': '8.5.0-alpha.21',
-  '@storybook/client-logger': '8.5.0-alpha.21',
-  '@storybook/components': '8.5.0-alpha.21',
-  '@storybook/core-common': '8.5.0-alpha.21',
-  '@storybook/core-events': '8.5.0-alpha.21',
-  '@storybook/core-server': '8.5.0-alpha.21',
-  '@storybook/csf-tools': '8.5.0-alpha.21',
-  '@storybook/docs-tools': '8.5.0-alpha.21',
-  '@storybook/manager': '8.5.0-alpha.21',
-  '@storybook/manager-api': '8.5.0-alpha.21',
-  '@storybook/node-logger': '8.5.0-alpha.21',
-  '@storybook/preview': '8.5.0-alpha.21',
-  '@storybook/preview-api': '8.5.0-alpha.21',
-  '@storybook/router': '8.5.0-alpha.21',
-  '@storybook/telemetry': '8.5.0-alpha.21',
-  '@storybook/theming': '8.5.0-alpha.21',
-  '@storybook/types': '8.5.0-alpha.21',
-  '@storybook/angular': '8.5.0-alpha.21',
-  '@storybook/ember': '8.5.0-alpha.21',
-  '@storybook/experimental-nextjs-vite': '8.5.0-alpha.21',
-  '@storybook/html-vite': '8.5.0-alpha.21',
-  '@storybook/html-webpack5': '8.5.0-alpha.21',
-  '@storybook/nextjs': '8.5.0-alpha.21',
-  '@storybook/preact-vite': '8.5.0-alpha.21',
-  '@storybook/preact-webpack5': '8.5.0-alpha.21',
-  '@storybook/react-native-web-vite': '8.5.0-alpha.21',
-  '@storybook/react-vite': '8.5.0-alpha.21',
-  '@storybook/react-webpack5': '8.5.0-alpha.21',
-  '@storybook/server-webpack5': '8.5.0-alpha.21',
-  '@storybook/svelte-vite': '8.5.0-alpha.21',
-  '@storybook/svelte-webpack5': '8.5.0-alpha.21',
-  '@storybook/sveltekit': '8.5.0-alpha.21',
-  '@storybook/vue3-vite': '8.5.0-alpha.21',
-  '@storybook/vue3-webpack5': '8.5.0-alpha.21',
-  '@storybook/web-components-vite': '8.5.0-alpha.21',
-  '@storybook/web-components-webpack5': '8.5.0-alpha.21',
-  '@storybook/blocks': '8.5.0-alpha.21',
-  storybook: '8.5.0-alpha.21',
-  sb: '8.5.0-alpha.21',
-  '@storybook/cli': '8.5.0-alpha.21',
-  '@storybook/codemod': '8.5.0-alpha.21',
-  '@storybook/core-webpack': '8.5.0-alpha.21',
-  'create-storybook': '8.5.0-alpha.21',
-  '@storybook/csf-plugin': '8.5.0-alpha.21',
-  '@storybook/instrumenter': '8.5.0-alpha.21',
-  '@storybook/react-dom-shim': '8.5.0-alpha.21',
-  '@storybook/source-loader': '8.5.0-alpha.21',
-  '@storybook/test': '8.5.0-alpha.21',
-  '@storybook/preset-create-react-app': '8.5.0-alpha.21',
-  '@storybook/preset-html-webpack': '8.5.0-alpha.21',
-  '@storybook/preset-preact-webpack': '8.5.0-alpha.21',
-  '@storybook/preset-react-webpack': '8.5.0-alpha.21',
-  '@storybook/preset-server-webpack': '8.5.0-alpha.21',
-  '@storybook/preset-svelte-webpack': '8.5.0-alpha.21',
-  '@storybook/preset-vue3-webpack': '8.5.0-alpha.21',
-  '@storybook/html': '8.5.0-alpha.21',
-  '@storybook/preact': '8.5.0-alpha.21',
-  '@storybook/react': '8.5.0-alpha.21',
-  '@storybook/server': '8.5.0-alpha.21',
-  '@storybook/svelte': '8.5.0-alpha.21',
-  '@storybook/vue3': '8.5.0-alpha.21',
-  '@storybook/web-components': '8.5.0-alpha.21',
+  '@storybook/addon-a11y': '8.5.0-alpha.22',
+  '@storybook/addon-actions': '8.5.0-alpha.22',
+  '@storybook/addon-backgrounds': '8.5.0-alpha.22',
+  '@storybook/addon-controls': '8.5.0-alpha.22',
+  '@storybook/addon-docs': '8.5.0-alpha.22',
+  '@storybook/addon-essentials': '8.5.0-alpha.22',
+  '@storybook/addon-mdx-gfm': '8.5.0-alpha.22',
+  '@storybook/addon-highlight': '8.5.0-alpha.22',
+  '@storybook/addon-interactions': '8.5.0-alpha.22',
+  '@storybook/addon-jest': '8.5.0-alpha.22',
+  '@storybook/addon-links': '8.5.0-alpha.22',
+  '@storybook/addon-measure': '8.5.0-alpha.22',
+  '@storybook/addon-onboarding': '8.5.0-alpha.22',
+  '@storybook/addon-outline': '8.5.0-alpha.22',
+  '@storybook/addon-storysource': '8.5.0-alpha.22',
+  '@storybook/experimental-addon-test': '8.5.0-alpha.22',
+  '@storybook/addon-themes': '8.5.0-alpha.22',
+  '@storybook/addon-toolbars': '8.5.0-alpha.22',
+  '@storybook/addon-viewport': '8.5.0-alpha.22',
+  '@storybook/builder-vite': '8.5.0-alpha.22',
+  '@storybook/builder-webpack5': '8.5.0-alpha.22',
+  '@storybook/core': '8.5.0-alpha.22',
+  '@storybook/builder-manager': '8.5.0-alpha.22',
+  '@storybook/channels': '8.5.0-alpha.22',
+  '@storybook/client-logger': '8.5.0-alpha.22',
+  '@storybook/components': '8.5.0-alpha.22',
+  '@storybook/core-common': '8.5.0-alpha.22',
+  '@storybook/core-events': '8.5.0-alpha.22',
+  '@storybook/core-server': '8.5.0-alpha.22',
+  '@storybook/csf-tools': '8.5.0-alpha.22',
+  '@storybook/docs-tools': '8.5.0-alpha.22',
+  '@storybook/manager': '8.5.0-alpha.22',
+  '@storybook/manager-api': '8.5.0-alpha.22',
+  '@storybook/node-logger': '8.5.0-alpha.22',
+  '@storybook/preview': '8.5.0-alpha.22',
+  '@storybook/preview-api': '8.5.0-alpha.22',
+  '@storybook/router': '8.5.0-alpha.22',
+  '@storybook/telemetry': '8.5.0-alpha.22',
+  '@storybook/theming': '8.5.0-alpha.22',
+  '@storybook/types': '8.5.0-alpha.22',
+  '@storybook/angular': '8.5.0-alpha.22',
+  '@storybook/ember': '8.5.0-alpha.22',
+  '@storybook/experimental-nextjs-vite': '8.5.0-alpha.22',
+  '@storybook/html-vite': '8.5.0-alpha.22',
+  '@storybook/html-webpack5': '8.5.0-alpha.22',
+  '@storybook/nextjs': '8.5.0-alpha.22',
+  '@storybook/preact-vite': '8.5.0-alpha.22',
+  '@storybook/preact-webpack5': '8.5.0-alpha.22',
+  '@storybook/react-native-web-vite': '8.5.0-alpha.22',
+  '@storybook/react-vite': '8.5.0-alpha.22',
+  '@storybook/react-webpack5': '8.5.0-alpha.22',
+  '@storybook/server-webpack5': '8.5.0-alpha.22',
+  '@storybook/svelte-vite': '8.5.0-alpha.22',
+  '@storybook/svelte-webpack5': '8.5.0-alpha.22',
+  '@storybook/sveltekit': '8.5.0-alpha.22',
+  '@storybook/vue3-vite': '8.5.0-alpha.22',
+  '@storybook/vue3-webpack5': '8.5.0-alpha.22',
+  '@storybook/web-components-vite': '8.5.0-alpha.22',
+  '@storybook/web-components-webpack5': '8.5.0-alpha.22',
+  '@storybook/blocks': '8.5.0-alpha.22',
+  storybook: '8.5.0-alpha.22',
+  sb: '8.5.0-alpha.22',
+  '@storybook/cli': '8.5.0-alpha.22',
+  '@storybook/codemod': '8.5.0-alpha.22',
+  '@storybook/core-webpack': '8.5.0-alpha.22',
+  'create-storybook': '8.5.0-alpha.22',
+  '@storybook/csf-plugin': '8.5.0-alpha.22',
+  '@storybook/instrumenter': '8.5.0-alpha.22',
+  '@storybook/react-dom-shim': '8.5.0-alpha.22',
+  '@storybook/source-loader': '8.5.0-alpha.22',
+  '@storybook/test': '8.5.0-alpha.22',
+  '@storybook/preset-create-react-app': '8.5.0-alpha.22',
+  '@storybook/preset-html-webpack': '8.5.0-alpha.22',
+  '@storybook/preset-preact-webpack': '8.5.0-alpha.22',
+  '@storybook/preset-react-webpack': '8.5.0-alpha.22',
+  '@storybook/preset-server-webpack': '8.5.0-alpha.22',
+  '@storybook/preset-svelte-webpack': '8.5.0-alpha.22',
+  '@storybook/preset-vue3-webpack': '8.5.0-alpha.22',
+  '@storybook/html': '8.5.0-alpha.22',
+  '@storybook/preact': '8.5.0-alpha.22',
+  '@storybook/react': '8.5.0-alpha.22',
+  '@storybook/server': '8.5.0-alpha.22',
+  '@storybook/svelte': '8.5.0-alpha.22',
+  '@storybook/vue3': '8.5.0-alpha.22',
+  '@storybook/web-components': '8.5.0-alpha.22',
 };
diff --git a/code/core/src/manager-api/version.ts b/code/core/src/manager-api/version.ts
index 0bba74f935f9..90c0bfd8e29f 100644
--- a/code/core/src/manager-api/version.ts
+++ b/code/core/src/manager-api/version.ts
@@ -1 +1 @@
-export const version = '8.5.0-alpha.21';
+export const version = '8.5.0-alpha.22';
diff --git a/code/deprecated/builder-manager/package.json b/code/deprecated/builder-manager/package.json
index 126dfe4c5815..fd71436811d1 100644
--- a/code/deprecated/builder-manager/package.json
+++ b/code/deprecated/builder-manager/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-manager",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook manager builder",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/channels/package.json b/code/deprecated/channels/package.json
index 6c31fd448d6a..e0f982ac028b 100644
--- a/code/deprecated/channels/package.json
+++ b/code/deprecated/channels/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channels",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/client-logger/package.json b/code/deprecated/client-logger/package.json
index f32f09ca650a..d09c87e56926 100644
--- a/code/deprecated/client-logger/package.json
+++ b/code/deprecated/client-logger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/client-logger",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/components/package.json b/code/deprecated/components/package.json
index 2928619eb576..469a51d0ebb5 100644
--- a/code/deprecated/components/package.json
+++ b/code/deprecated/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/core-common/package.json b/code/deprecated/core-common/package.json
index ea6f5f01af92..fe28424bb50b 100644
--- a/code/deprecated/core-common/package.json
+++ b/code/deprecated/core-common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-common",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/core-events/package.json b/code/deprecated/core-events/package.json
index ec7a6f10d658..9f6b683c3320 100644
--- a/code/deprecated/core-events/package.json
+++ b/code/deprecated/core-events/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-events",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Event names used in storybook core",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/core-server/package.json b/code/deprecated/core-server/package.json
index 9a9e140507e8..2ad77557ad53 100644
--- a/code/deprecated/core-server/package.json
+++ b/code/deprecated/core-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-server",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/csf-tools/package.json b/code/deprecated/csf-tools/package.json
index 6e1a317e6aef..58acc248335c 100644
--- a/code/deprecated/csf-tools/package.json
+++ b/code/deprecated/csf-tools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/csf-tools",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Parse and manipulate CSF and Storybook config files",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/docs-tools/package.json b/code/deprecated/docs-tools/package.json
index 8ca8d5eca235..fe154c164db4 100644
--- a/code/deprecated/docs-tools/package.json
+++ b/code/deprecated/docs-tools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/docs-tools",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Shared utility functions for frameworks to implement docs",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/manager-api/package.json b/code/deprecated/manager-api/package.json
index 8fa0294fa760..a0cb5ac6f9b6 100644
--- a/code/deprecated/manager-api/package.json
+++ b/code/deprecated/manager-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/manager-api",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Core Storybook Manager API & Context",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/manager/package.json b/code/deprecated/manager/package.json
index d5df04c24258..941049b955b2 100644
--- a/code/deprecated/manager/package.json
+++ b/code/deprecated/manager/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/manager",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Core Storybook UI",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/node-logger/package.json b/code/deprecated/node-logger/package.json
index 67784935f5e5..f1081b028213 100644
--- a/code/deprecated/node-logger/package.json
+++ b/code/deprecated/node-logger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/node-logger",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/preview-api/package.json b/code/deprecated/preview-api/package.json
index 2995ec342e9a..5c5d894f90af 100644
--- a/code/deprecated/preview-api/package.json
+++ b/code/deprecated/preview-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preview-api",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/preview/package.json b/code/deprecated/preview/package.json
index 27da2496c369..fa91ac524655 100644
--- a/code/deprecated/preview/package.json
+++ b/code/deprecated/preview/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preview",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/router/package.json b/code/deprecated/router/package.json
index 7224c7ce0ce4..3b2e0b23416e 100644
--- a/code/deprecated/router/package.json
+++ b/code/deprecated/router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/router",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Core Storybook Router",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/telemetry/package.json b/code/deprecated/telemetry/package.json
index fd7a105320d8..c2a12b4fd4a9 100644
--- a/code/deprecated/telemetry/package.json
+++ b/code/deprecated/telemetry/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/telemetry",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Telemetry logging for crash reports and usage statistics",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/theming/package.json b/code/deprecated/theming/package.json
index db27fb520d9a..7d232d7d961a 100644
--- a/code/deprecated/theming/package.json
+++ b/code/deprecated/theming/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/theming",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
diff --git a/code/deprecated/types/package.json b/code/deprecated/types/package.json
index 6d4a568f68b6..d8aa8cf50e59 100644
--- a/code/deprecated/types/package.json
+++ b/code/deprecated/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/types",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Core Storybook TS Types",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json
index 92eb88d21a34..7ac17f6c5506 100644
--- a/code/frameworks/angular/package.json
+++ b/code/frameworks/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json
index 13ce986ce29d..9b63281d1e21 100644
--- a/code/frameworks/ember/package.json
+++ b/code/frameworks/ember/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ember",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember",
   "bugs": {
diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json
index f5737d7c79f6..c8beb6e37803 100644
--- a/code/frameworks/experimental-nextjs-vite/package.json
+++ b/code/frameworks/experimental-nextjs-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/experimental-nextjs-vite",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook for Next.js and Vite",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json
index 4ebf99ebf5d1..f6e7d96701f6 100644
--- a/code/frameworks/html-vite/package.json
+++ b/code/frameworks/html-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html-vite",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json
index 98225ebcdc48..c6597bb17a64 100644
--- a/code/frameworks/html-webpack5/package.json
+++ b/code/frameworks/html-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html-webpack5",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json
index fb6f6a1d1f98..fe21d56ea6b9 100644
--- a/code/frameworks/nextjs/package.json
+++ b/code/frameworks/nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/nextjs",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook for Next.js",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json
index 1687b02e0230..94c8152f6308 100644
--- a/code/frameworks/preact-vite/package.json
+++ b/code/frameworks/preact-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact-vite",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json
index 17fc5dd05953..22a6956d8142 100644
--- a/code/frameworks/preact-webpack5/package.json
+++ b/code/frameworks/preact-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact-webpack5",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook for Preact: Develop Preact Component in isolation.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json
index 42847738ee1d..b256cf70d1b6 100644
--- a/code/frameworks/react-native-web-vite/package.json
+++ b/code/frameworks/react-native-web-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-web-vite",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Develop react-native components an isolated web environment with hot reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json
index 6d07c52bfac8..c6a45266f22b 100644
--- a/code/frameworks/react-vite/package.json
+++ b/code/frameworks/react-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-vite",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json
index bb74a3e7240a..8e564dffa63f 100644
--- a/code/frameworks/react-webpack5/package.json
+++ b/code/frameworks/react-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-webpack5",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json
index 1de70d7f8b63..58ed15954906 100644
--- a/code/frameworks/server-webpack5/package.json
+++ b/code/frameworks/server-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/server-webpack5",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json
index 83ffa79e2f8c..955e2206cfe9 100644
--- a/code/frameworks/svelte-vite/package.json
+++ b/code/frameworks/svelte-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte-vite",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json
index 065828177e41..6bc52a6b823c 100644
--- a/code/frameworks/svelte-webpack5/package.json
+++ b/code/frameworks/svelte-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte-webpack5",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json
index 69a794c5365a..77fb37cc5f03 100644
--- a/code/frameworks/sveltekit/package.json
+++ b/code/frameworks/sveltekit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/sveltekit",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook for SvelteKit",
   "keywords": [
     "storybook",
diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json
index 8e93d5775057..7bb0922259a9 100644
--- a/code/frameworks/vue3-vite/package.json
+++ b/code/frameworks/vue3-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3-vite",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json
index f05663bad9c6..4cc005ebf449 100644
--- a/code/frameworks/vue3-webpack5/package.json
+++ b/code/frameworks/vue3-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3-webpack5",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json
index f367cc35ce05..e6fa38e1646a 100644
--- a/code/frameworks/web-components-vite/package.json
+++ b/code/frameworks/web-components-vite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components-vite",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json
index faa2b6763fa3..58dfcaa0738b 100644
--- a/code/frameworks/web-components-webpack5/package.json
+++ b/code/frameworks/web-components-webpack5/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components-webpack5",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
   "keywords": [
     "lit",
diff --git a/code/lib/blocks/package.json b/code/lib/blocks/package.json
index 430250ca9e3a..12504b248173 100644
--- a/code/lib/blocks/package.json
+++ b/code/lib/blocks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/blocks",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook Doc Blocks",
   "keywords": [
     "storybook"
diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json
index 858eaee4fcd8..3d9f74381e87 100644
--- a/code/lib/cli-sb/package.json
+++ b/code/lib/cli-sb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sb",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"
diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json
index 5164fbf92187..7e0d04ac274a 100644
--- a/code/lib/cli-storybook/package.json
+++ b/code/lib/cli-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/cli",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"
diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json
index 879f9fda1ed8..765a06c1f3d6 100644
--- a/code/lib/cli/package.json
+++ b/code/lib/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "storybook",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook's CLI - install, dev, build, upgrade, and more",
   "keywords": [
     "cli",
diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json
index d0075f450f7a..b41d0290501c 100644
--- a/code/lib/codemod/package.json
+++ b/code/lib/codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/codemod",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "A collection of codemod scripts written with JSCodeshift",
   "keywords": [
     "storybook"
diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json
index 5ac62b95195c..bb490874f2ba 100644
--- a/code/lib/core-webpack/package.json
+++ b/code/lib/core-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-webpack",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
diff --git a/code/lib/create-storybook/package.json b/code/lib/create-storybook/package.json
index 984e9d7df530..8916f1e56826 100644
--- a/code/lib/create-storybook/package.json
+++ b/code/lib/create-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-storybook",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Initialize Storybook into your project",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/lib/create-storybook",
   "bugs": {
diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json
index b05f5b11e303..21b0e8b1855f 100644
--- a/code/lib/csf-plugin/package.json
+++ b/code/lib/csf-plugin/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/csf-plugin",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Enrich CSF files via static analysis",
   "keywords": [
     "storybook"
diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json
index 6c15c502a711..a015da12f533 100644
--- a/code/lib/instrumenter/package.json
+++ b/code/lib/instrumenter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/instrumenter",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json
index 8a17e18920d3..75818dcef25d 100644
--- a/code/lib/react-dom-shim/package.json
+++ b/code/lib/react-dom-shim/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-dom-shim",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json
index c52a0f92894f..a3073390d00d 100644
--- a/code/lib/source-loader/package.json
+++ b/code/lib/source-loader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/source-loader",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Source loader",
   "keywords": [
     "lib",
diff --git a/code/lib/test/package.json b/code/lib/test/package.json
index f142e3644729..e1d356bdb570 100644
--- a/code/lib/test/package.json
+++ b/code/lib/test/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/test",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/package.json b/code/package.json
index 6a7cb034c37f..80fb0fb2089f 100644
--- a/code/package.json
+++ b/code/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/root",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "private": true,
   "description": "Storybook root",
   "homepage": "https://storybook.js.org/",
@@ -294,6 +294,5 @@
         "Dependency Upgrades"
       ]
     ]
-  },
-  "deferredNextVersion": "8.5.0-alpha.22"
+  }
 }
diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json
index 6affbff09691..f0b9550cd8e1 100644
--- a/code/presets/create-react-app/package.json
+++ b/code/presets/create-react-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-create-react-app",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook for Create React App preset",
   "keywords": [
     "storybook"
diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json
index 7ae3edc465f6..0187f6af1adc 100644
--- a/code/presets/html-webpack/package.json
+++ b/code/presets/html-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-html-webpack",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json
index 13c9c5badaf4..45fe95cdc3c3 100644
--- a/code/presets/preact-webpack/package.json
+++ b/code/presets/preact-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-preact-webpack",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook for Preact: Develop Preact Component in isolation.",
   "keywords": [
     "storybook"
diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json
index acfe5f3ea4e1..65bdb059fed4 100644
--- a/code/presets/react-webpack/package.json
+++ b/code/presets/react-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-react-webpack",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading",
   "keywords": [
     "storybook"
diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json
index a783568c9eff..e3e366850900 100644
--- a/code/presets/server-webpack/package.json
+++ b/code/presets/server-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-server-webpack",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json
index 6e4a595a9bb0..45448bf58dc0 100644
--- a/code/presets/svelte-webpack/package.json
+++ b/code/presets/svelte-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-svelte-webpack",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json
index 38d7ec940384..aedd88aff477 100644
--- a/code/presets/vue3-webpack/package.json
+++ b/code/presets/vue3-webpack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preset-vue3-webpack",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json
index 056a860d6dde..817ba8045700 100644
--- a/code/renderers/html/package.json
+++ b/code/renderers/html/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook HTML renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json
index 921291e4fd75..b47e3cbd0164 100644
--- a/code/renderers/preact/package.json
+++ b/code/renderers/preact/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook Preact renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json
index 968b2be5d175..a58ef3d8dde8 100644
--- a/code/renderers/react/package.json
+++ b/code/renderers/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook React renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json
index 8f05da4f5759..232c064fbd58 100644
--- a/code/renderers/server/package.json
+++ b/code/renderers/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/server",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook Server renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json
index c8a221096ee9..0e084a61dd4f 100644
--- a/code/renderers/svelte/package.json
+++ b/code/renderers/svelte/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook Svelte renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json
index c57db46d9306..c5a70b1bf71f 100644
--- a/code/renderers/vue3/package.json
+++ b/code/renderers/vue3/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook Vue 3 renderer",
   "keywords": [
     "storybook"
diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json
index cfcdef31e344..3365415dccca 100644
--- a/code/renderers/web-components/package.json
+++ b/code/renderers/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components",
-  "version": "8.5.0-alpha.21",
+  "version": "8.5.0-alpha.22",
   "description": "Storybook web-components renderer",
   "keywords": [
     "lit",

From 447426e294cf0854f4173c7a9bc73f7373363a0c Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Fri, 13 Dec 2024 09:05:29 -0700
Subject: [PATCH 27/28] Remove mention of Vitest prompting of coverage support
 pkgs

---
 docs/writing-tests/test-coverage.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/writing-tests/test-coverage.mdx b/docs/writing-tests/test-coverage.mdx
index 4f0dd7700a1c..1b62f752dfbd 100644
--- a/docs/writing-tests/test-coverage.mdx
+++ b/docs/writing-tests/test-coverage.mdx
@@ -25,7 +25,7 @@ Coverage is included in the Test addon and, when enabled, will be calculated whe
 
 ![Screenshot of test module, expanded, showing coverage toggle](../_assets/writing-tests/addon-test-module-edit-coverage.png)
 
-Before coverage can be calculated, you may be prompted to install a support package corresponding to your [coverage provider](#coverage-provider):
+Before coverage can be calculated, you may need to install a support package corresponding to your [coverage provider](#coverage-provider):
 
 
 {/* prettier-ignore-start */}

From a30a5f39875ff9f2f5d0ec9a462e3b27fdaf843c Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Fri, 13 Dec 2024 19:43:05 +0100
Subject: [PATCH 28/28] improve story loading

---
 code/e2e-tests/util.ts | 52 ++++++++++++++++++++++++++++++++++++++----
 1 file changed, 47 insertions(+), 5 deletions(-)

diff --git a/code/e2e-tests/util.ts b/code/e2e-tests/util.ts
index 0e8c6d0b93d8..d9faad22939a 100644
--- a/code/e2e-tests/util.ts
+++ b/code/e2e-tests/util.ts
@@ -1,3 +1,4 @@
+/* eslint-disable local-rules/no-uncategorized-errors */
 import { toId } from '@storybook/csf';
 
 import type { Expect, Page } from '@playwright/test';
@@ -61,6 +62,7 @@ export class SbPage {
     await this.expect(selected).toHaveAttribute('data-selected', 'true');
 
     await this.previewRoot();
+    await this.waitUntilLoaded();
   }
 
   async navigateToUnattachedDocs(title: string, name = 'docs') {
@@ -80,7 +82,25 @@ export class SbPage {
     const selected = storyLink;
     await this.expect(selected).toHaveAttribute('data-selected', 'true');
 
-    await this.previewRoot();
+    await this.waitForStoryLoaded();
+  }
+
+  async waitForStoryLoaded() {
+    try {
+      const root = this.previewRoot();
+      // Wait until there is at least one child (a story element) in the preview iframe
+      await root.locator(':scope > *').first().waitFor({
+        state: 'attached',
+        timeout: 10000,
+      });
+    } catch (error: any) {
+      if (error.name === 'TimeoutError') {
+        throw new Error(
+          'The Storybook iframe did not have children within the specified timeout. Did the story load correctly?'
+        );
+      }
+      throw error;
+    }
   }
 
   async waitUntilLoaded() {
@@ -112,10 +132,8 @@ export class SbPage {
     const storyLoadingPage = root.locator('.sb-preparing-story');
     await docsLoadingPage.waitFor({ state: 'hidden' });
     await storyLoadingPage.waitFor({ state: 'hidden' });
-    await this.page.waitForFunction(() => {
-      const storybookRoot = document.querySelector('#storybook-root');
-      return storybookRoot && storybookRoot.children.length > 0;
-    });
+
+    await this.waitForStoryLoaded();
   }
 
   previewIframe() {
@@ -147,6 +165,30 @@ export class SbPage {
   getCanvasBodyElement() {
     return this.previewIframe().locator('body');
   }
+
+  // utility to try and decrease flake
+  async retryTimes(
+    fn: () => Promise<void>,
+    options?: {
+      retries?: number;
+      delay?: number;
+    }
+  ): Promise<void> {
+    let attempts = 0;
+    const { retries = 3, delay = 0 } = options || {};
+    while (attempts < retries) {
+      try {
+        await fn();
+        return;
+      } catch (error) {
+        attempts++;
+        if (attempts === retries) {
+          throw error;
+        }
+        await new Promise<void>((resolve) => setTimeout(resolve, delay));
+      }
+    }
+  }
 }
 
 const templateName: keyof typeof allTemplates = process.env.STORYBOOK_TEMPLATE_NAME || ('' as any);