Merge remote-tracking branch 'origin/next' into valentin/nextjs-vite

2025-04-08 11:11:53 +08:00 · 2024-08-07 07:26:32 +02:00 · 2024-08-07 07:26:32 +02:00 · 70193c9533
commit 70193c9533
parent e70b42f9f0 f77eff2afb
134 changed files with 14763 additions and 1346 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -238,7 +238,7 @@ jobs:
          name: Run tests
          command: |
            cd scripts
-            yarn test --coverage
+            yarn test --coverage --coverage.all=false
      - store_test_results:
          path: scripts/junit.xml
      - report-workflow-on-failure
@ -256,7 +256,7 @@ jobs:
          name: Test
          command: |
            cd code
-            yarn test --coverage
+            yarn test --coverage --coverage.all=false
      - store_test_results:
          path: code/junit.xml
      - persist_to_workspace:
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -24,14 +24,7 @@
  "eslint.options": {
    "cache": true,
    "cacheLocation": ".cache/eslint",
-    "extensions": [
-      ".js",
-      ".jsx",
-      ".mjs",
-      ".json",
-      ".ts",
-      ".tsx"
-    ]
+    "extensions": [".js", ".jsx", ".mjs", ".json", ".ts", ".tsx"]
  },
  "eslint.useESLintClass": true,
  "eslint.validate": [
@ -42,10 +35,7 @@
    "typescript",
    "typescriptreact"
  ],
-  "eslint.workingDirectories": [
-    "./code",
-    "./scripts"
-  ],
+  "eslint.workingDirectories": ["./code", "./scripts"],
  "files.associations": {
    "*.js": "javascriptreact"
  },
@ -59,5 +49,6 @@
  "typescript.preferences.preferTypeOnlyAutoImports": true,
  "typescript.preferences.quoteStyle": "single",
  "typescript.preferGoToSourceDefinition": true,
-  "typescript.tsdk": "./code/node_modules/typescript/lib"
-}
+  "typescript.tsdk": "./code/node_modules/typescript/lib",
+  "vitest.workspaceConfig": "./code/vitest.workspace.ts"
+}
--- a/CHANGELOG.prerelease.md
+++ b/CHANGELOG.prerelease.md
@ -1,3 +1,12 @@
+## 8.3.0-alpha.4
+
+- CSF: Allow overridding globals at the story level - [#26654](https://github.com/storybookjs/storybook/pull/26654), thanks @tmeasday!
+- Core: Introduce run over play in portable stories, and revert back play changes of 8.2 - [#28764](https://github.com/storybookjs/storybook/pull/28764), thanks @kasperpeulen!
+- Core: Split Storybook CLI  - [#28519](https://github.com/storybookjs/storybook/pull/28519), thanks @kasperpeulen!
+- Fix: Invariant failed: Expected package.json#version to be defined in the "undefined" package - [#28752](https://github.com/storybookjs/storybook/pull/28752), thanks @abcdmku!
+- Next.js: Make RSC portable-stories compatible - [#28756](https://github.com/storybookjs/storybook/pull/28756), thanks @valentinpalkovic!
+- UI: Fix collapse/expand all functionality - [#28582](https://github.com/storybookjs/storybook/pull/28582), thanks @filipemelo2002!
+
 ## 8.3.0-alpha.3

 - Angular: Fix Angular template error for props with a circular reference - [#28498](https://github.com/storybookjs/storybook/pull/28498), thanks @Marklb!
--- a/MIGRATION.md
+++ b/MIGRATION.md
@ -1,5 +1,8 @@
 <h1>Migration</h1>

+- [From version 8.2.x to 8.3.x](#from-version-82x-to-83x)
+  - [New parameters format for addon backgrounds](#new-parameters-format-for-addon-backgrounds)
+  - [New parameters format for addon viewport](#new-parameters-format-for-addon-viewport)
 - [From version 8.1.x to 8.2.x](#from-version-81x-to-82x)
  - [Failed to resolve import "@storybook/X" error](#failed-to-resolve-import-storybookx-error)
  - [Preview.js globals renamed to initialGlobals](#previewjs-globals-renamed-to-initialglobals)
@ -414,6 +417,90 @@
  - [Packages renaming](#packages-renaming)
  - [Deprecated embedded addons](#deprecated-embedded-addons)

+## From version 8.2.x to 8.3.x
+
+### New parameters format for addon backgrounds
+
+The `addon-backgrounds` addon now uses a new format for parameters. The `backgrounds` parameter is now an object with a `values` key that contains the background values.
+
+> ! You need to set the feature flag `backgroundsStoryGlobals` to `true` in your `.storybook/main.ts` to use the new format.
+
+```diff
+// .storybook/preview.js
+export const parameters = {
+  backgrounds: {
+-    values: [
+-      { name: 'twitter', value: '#00aced' },
+-      { name: 'facebook', value: '#3b5998' },
+-    ],
+    options: {
+      twitter: { name: 'twitter', value: '#00aced' },
+      facebook: { name: 'facebook', value: '#3b5998' },
+    },
+  },
+};
+```
+
+Setting an override value should now be done via a `globals` property on your component/meta or story itself:
+
+```ts
+// Button.stories.ts
+export default {
+  component: Button,
+  globals: {
+    backgrounds: { value: 'twitter' },
+  },
+};
+```
+
+This locks that story to the `twitter` background, it cannot be changed by the addon UI.
+
+### New parameters format for addon viewport
+
+> ! You need to set the feature flag `viewportStoryGlobals` to `true` in your `.storybook/main.ts` to use the new format.
+
+The `addon-viewport` addon now uses a new format for parameters. The `viewport` parameter is now an object with a `viewports` key that contains the viewport values.
+
+```diff
+// .storybook/preview.js
+export const parameters = {
+  viewport: {
+-    viewports: {
+-      iphone5: {
+-        name: 'phone',
+-        styles: {
+-          width: '320px',
+-          height: '568px',
+-        },
+-      },
+-     },
+    options: {
+      iphone5: {
+        name: 'phone',
+        styles: {
+          width: '320px',
+          height: '568px',
+        },
+      },
+    },
+  },
+};
+```
+
+Setting an override value should now be done via a `globals` property on your component/meta or story itself:
+
+```ts
+// Button.stories.ts
+export default {
+  component: Button,
+  globals: {
+    viewport: { value: 'phone' },
+  },
+};
+```
+
+This locks that story to the `phone` viewport, it cannot be changed by the addon UI.
+
 ## From version 8.1.x to 8.2.x

 ### Failed to resolve import "@storybook/X" error
@ -444,7 +531,7 @@ Starting in 8.2 `preview.js` `globals` are deprecated and have been renamed to `
 // .storybook/preview.js
 export default {
 -  globals: [ a: 1, b: 2 ],
-+  initiaGlobals: [ a: 1, b: 2 ],
+  initialGlobals: [ a: 1, b: 2 ],
 }
 ```

--- a/code/.yarn/patches/@vitest-expect-npm-2.0.5-8933466cce.patch
+++ b/code/.yarn/patches/@vitest-expect-npm-2.0.5-8933466cce.patch
@ -1,18 +1,20 @@
 diff --git a/dist/index.js b/dist/index.js
-index 13af149aa3c44f52dd5c5a80db3bf5689dfe15ea..1d111032c3fdc104723e19dea49db62be8b79b94 100644
+index ea14a7a52838ff2fb3010996a47f82507315019f..d5248b4daac4333ecdf250952cec3fbd39b89c19 100644
 --- a/dist/index.js
 +++ b/dist/index.js
-@@ -6,26 +6,32 @@ import { processError } from '@vitest/utils/error';
- import { util } from 'chai';
- 
+@@ -6,7 +6,9 @@ import { processError } from '@vitest/utils/error';
+ import { use, util } from 'chai';
+
 const MATCHERS_OBJECT = Symbol.for("matchers-object");
 -const JEST_MATCHERS_OBJECT = Symbol.for("$$jest-matchers-object");
 +// Patched this symbol for storybook, so that @storybook/test can be used in a jest environment as well.
 +// Otherwise, vitest will override global jest matchers, and crash.
 +const JEST_MATCHERS_OBJECT = Symbol.for("$$jest-matchers-object-storybook");
 const GLOBAL_EXPECT = Symbol.for("expect-global");
- const ASYMMETRIC_MATCHERS_OBJECT = Symbol.for("asymmetric-matchers-object");
- 
+ const ASYMMETRIC_MATCHERS_OBJECT = Symbol.for(
+   "asymmetric-matchers-object"
+@@ -14,20 +16,24 @@ const ASYMMETRIC_MATCHERS_OBJECT = Symbol.for(
+
 if (!Object.prototype.hasOwnProperty.call(globalThis, MATCHERS_OBJECT)) {
   const globalState = /* @__PURE__ */ new WeakMap();
 -  const matchers = /* @__PURE__ */ Object.create(null);
--- a/code/addons/a11y/package.json
+++ b/code/addons/a11y/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-a11y",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Test component compliance with web accessibility standards",
  "keywords": [
    "a11y",
--- a/code/addons/a11y/src/manager.test.tsx
+++ b/code/addons/a11y/src/manager.test.tsx
@ -56,7 +56,6 @@ describe('A11yManager', () => {
          >
            Accessibility
          </span>
-          
        </Spaced>
      </div>
    `);
--- a/code/addons/actions/package.json
+++ b/code/addons/actions/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-actions",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Get UI feedback when an action is performed on an interactive element",
  "keywords": [
    "storybook",
--- a/code/addons/backgrounds/package.json
+++ b/code/addons/backgrounds/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-backgrounds",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Switch backgrounds to view components in different settings",
  "keywords": [
    "addon",
--- a/code/addons/controls/package.json
+++ b/code/addons/controls/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-controls",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Interact with component inputs dynamically in the Storybook UI",
  "keywords": [
    "addon",
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-docs",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Document component usage and properties in Markdown",
  "keywords": [
    "addon",
--- a/code/addons/essentials/package.json
+++ b/code/addons/essentials/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-essentials",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Curated addons to bring out the best of Storybook",
  "keywords": [
    "addon",
--- a/code/addons/gfm/package.json
+++ b/code/addons/gfm/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-mdx-gfm",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "GitHub Flavored Markdown in Storybook",
  "keywords": [
    "addon",
--- a/code/addons/highlight/package.json
+++ b/code/addons/highlight/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-highlight",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Highlight DOM nodes within your stories",
  "keywords": [
    "storybook-addons",
--- a/code/addons/interactions/package.json
+++ b/code/addons/interactions/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-interactions",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Automate, test and debug user interactions",
  "keywords": [
    "storybook-addons",
--- a/code/addons/jest/package.json
+++ b/code/addons/jest/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-jest",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "React storybook addon that show component jest report",
  "keywords": [
    "addon",
--- a/code/addons/links/package.json
+++ b/code/addons/links/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-links",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Link stories together to build demos and prototypes with your UI components",
  "keywords": [
    "addon",
--- a/code/addons/measure/package.json
+++ b/code/addons/measure/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-measure",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Inspect layouts by visualizing the box model",
  "keywords": [
    "storybook-addons",
--- a/code/addons/onboarding/package.json
+++ b/code/addons/onboarding/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-onboarding",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
  "keywords": [
    "storybook-addons",
--- a/code/addons/outline/package.json
+++ b/code/addons/outline/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-outline",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Outline all elements with CSS to help with layout placement and alignment",
  "keywords": [
    "storybook-addons",
--- a/code/addons/storysource/package.json
+++ b/code/addons/storysource/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storysource",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "View a story’s source code to see how it works and paste into your app",
  "keywords": [
    "addon",
--- a/code/addons/themes/package.json
+++ b/code/addons/themes/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-themes",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Switch between multiple themes for you components in Storybook",
  "keywords": [
    "css",
--- a/code/addons/toolbars/package.json
+++ b/code/addons/toolbars/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-toolbars",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Create your own toolbar items that control story rendering",
  "keywords": [
    "addon",
--- a/code/addons/viewport/package.json
+++ b/code/addons/viewport/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-viewport",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
  "keywords": [
    "addon",
--- a/code/builders/builder-vite/package.json
+++ b/code/builders/builder-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/builder-vite",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "A plugin to run and build Storybooks with Vite",
  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
  "bugs": {
--- a/code/builders/builder-webpack5/package.json
+++ b/code/builders/builder-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/builder-webpack5",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook framework-agnostic API",
  "keywords": [
    "storybook"
--- a/code/core/package.json
+++ b/code/core/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/core",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook framework-agnostic API",
  "keywords": [
    "storybook"
@ -326,7 +326,6 @@
    "@types/react-transition-group": "^4",
    "@types/semver": "^7.5.8",
    "@types/ws": "^8",
-    "@vitest/utils": "^1.3.1",
    "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10",
    "@yarnpkg/fslib": "2.10.3",
    "@yarnpkg/libzip": "2.3.0",
--- a/code/core/src/common/js-package-manager/Yarn2Proxy.test.ts
+++ b/code/core/src/common/js-package-manager/Yarn2Proxy.test.ts
@ -309,6 +309,15 @@ describe('Yarn 2 Proxy', () => {
      expect(yarn2Proxy.parseErrorFromLogs(YARN2_ERROR_SAMPLE)).toMatchInlineSnapshot(
        `
        "YARN2 error
+        YN0002: MISSING_PEER_DEPENDENCY
+        -> before-storybook@workspace:. doesn't provide @testing-library/dom (p1ac37), requested by @testing-library/user-event.
+
+        YN0002: MISSING_PEER_DEPENDENCY
+        -> before-storybook@workspace:. doesn't provide eslint (p1f657), requested by eslint-plugin-storybook.
+
+        YN0086: EXPLAIN_PEER_DEPENDENCIES_CTA
+        -> Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code.
+
        YN0014: YARN_IMPORT_FAILED
        -> Failed to import certain dependencies

--- a/code/core/src/common/js-package-manager/Yarn2Proxy.ts
+++ b/code/core/src/common/js-package-manager/Yarn2Proxy.ts
@ -12,36 +12,9 @@ import type { PackageJson } from './PackageJson';
 import type { InstallationMetadata, PackageMetadata } from './types';
 import { parsePackageData } from './util';

+// more info at https://yarnpkg.com/advanced/error-codes
 const CRITICAL_YARN2_ERROR_CODES = {
  YN0001: 'EXCEPTION',
-  YN0009: 'BUILD_FAILED',
-  YN0010: 'RESOLVER_NOT_FOUND',
-  YN0011: 'FETCHER_NOT_FOUND',
-  YN0012: 'LINKER_NOT_FOUND',
-  YN0014: 'YARN_IMPORT_FAILED',
-  YN0015: 'REMOTE_INVALID',
-  YN0016: 'REMOTE_NOT_FOUND',
-  YN0020: 'MISSING_LOCKFILE_ENTRY',
-  YN0021: 'WORKSPACE_NOT_FOUND',
-  YN0028: 'FROZEN_LOCKFILE_EXCEPTION',
-  YN0030: 'FETCH_FAILED',
-  YN0046: 'AUTOMERGE_FAILED_TO_PARSE',
-  YN0062: 'INCOMPATIBLE_OS',
-  YN0063: 'INCOMPATIBLE_CPU',
-  YN0071: 'NM_CANT_INSTALL_EXTERNAL_SOFT_LINK',
-  YN0072: 'NM_PRESERVE_SYMLINKS_REQUIRED',
-  YN0075: 'PROLOG_INSTANTIATION_ERROR',
-  YN0076: 'INCOMPATIBLE_ARCHITECTURE',
-  YN0078: 'RESOLUTION_MISMATCH',
-  YN0081: 'NETWORK_UNSAFE_HTTP',
-  YN0082: 'RESOLUTION_FAILED',
-  YN0083: 'AUTOMERGE_GIT_ERROR',
-};
-
-// Keep the codes here, they might be helpful in the future
-const YARN2_ERROR_CODES = {
-  ...CRITICAL_YARN2_ERROR_CODES,
-  YN0000: 'UNNAMED',
  YN0002: 'MISSING_PEER_DEPENDENCY',
  YN0003: 'CYCLIC_DEPENDENCIES',
  YN0004: 'DISABLED_BUILD_SCRIPTS',
@ -49,36 +22,50 @@ const YARN2_ERROR_CODES = {
  YN0006: 'SOFT_LINK_BUILD',
  YN0007: 'MUST_BUILD',
  YN0008: 'MUST_REBUILD',
+  YN0009: 'BUILD_FAILED',
+  YN0010: 'RESOLVER_NOT_FOUND',
+  YN0011: 'FETCHER_NOT_FOUND',
+  YN0012: 'LINKER_NOT_FOUND',
  YN0013: 'FETCH_NOT_CACHED',
-  YN0017: 'RESOLUTION_PACK',
+  YN0014: 'YARN_IMPORT_FAILED',
+  YN0015: 'REMOTE_INVALID',
+  YN0016: 'REMOTE_NOT_FOUND',
  YN0018: 'CACHE_CHECKSUM_MISMATCH',
  YN0019: 'UNUSED_CACHE_ENTRY',
+  YN0020: 'MISSING_LOCKFILE_ENTRY',
  YN0022: 'TOO_MANY_MATCHING_WORKSPACES',
  YN0023: 'CONSTRAINTS_MISSING_DEPENDENCY',
  YN0024: 'CONSTRAINTS_INCOMPATIBLE_DEPENDENCY',
  YN0025: 'CONSTRAINTS_EXTRANEOUS_DEPENDENCY',
  YN0026: 'CONSTRAINTS_INVALID_DEPENDENCY',
  YN0027: 'CANT_SUGGEST_RESOLUTIONS',
+  YN0028: 'FROZEN_LOCKFILE_EXCEPTION',
  YN0029: 'CROSS_DRIVE_VIRTUAL_LOCAL',
+  YN0030: 'FETCH_FAILED',
  YN0031: 'DANGEROUS_NODE_MODULES',
-  YN0032: 'NODE_GYP_INJECTED',
+  YN0035: 'NETWORK_ERROR',
+  YN0046: 'AUTOMERGE_FAILED_TO_PARSE',
  YN0047: 'AUTOMERGE_IMMUTABLE',
  YN0048: 'AUTOMERGE_SUCCESS',
  YN0049: 'AUTOMERGE_REQUIRED',
  YN0050: 'DEPRECATED_CLI_SETTINGS',
  YN0059: 'INVALID_RANGE_PEER_DEPENDENCY',
  YN0060: 'INCOMPATIBLE_PEER_DEPENDENCY',
-  YN0061: 'DEPRECATED_PACKAGE',
-  YN0068: 'UNUSED_PACKAGE_EXTENSION',
+  YN0062: 'INCOMPATIBLE_OS',
+  YN0063: 'INCOMPATIBLE_CPU',
  YN0069: 'REDUNDANT_PACKAGE_EXTENSION',
+  YN0071: 'NM_CANT_INSTALL_EXTERNAL_SOFT_LINK',
+  YN0072: 'NM_PRESERVE_SYMLINKS_REQUIRED',
  YN0074: 'NM_HARDLINKS_MODE_DOWNGRADED',
+  YN0075: 'PROLOG_INSTANTIATION_ERROR',
+  YN0076: 'INCOMPATIBLE_ARCHITECTURE',
  YN0077: 'GHOST_ARCHITECTURE',
+  YN0078: 'RESOLUTION_MISMATCH',
  YN0080: 'NETWORK_DISABLED',
-  YN0085: 'UPDATED_RESOLUTION_RECORD',
+  YN0081: 'NETWORK_UNSAFE_HTTP',
+  YN0082: 'RESOLUTION_FAILED',
+  YN0083: 'AUTOMERGE_GIT_ERROR',
  YN0086: 'EXPLAIN_PEER_DEPENDENCIES_CTA',
-  YN0087: 'MIGRATION_SUCCESS',
-  YN0088: 'VERSION_NOTICE',
-  YN0089: 'TIPS_NOTICE',
  YN0090: 'OFFLINE_MODE_ENABLED',
 };

--- a/code/core/src/common/versions.ts
+++ b/code/core/src/common/versions.ts
@ -1,86 +1,86 @@
 // auto generated file, do not edit
 export default {
-  '@storybook/addon-a11y': '8.3.0-alpha.3',
-  '@storybook/addon-actions': '8.3.0-alpha.3',
-  '@storybook/addon-backgrounds': '8.3.0-alpha.3',
-  '@storybook/addon-controls': '8.3.0-alpha.3',
-  '@storybook/addon-docs': '8.3.0-alpha.3',
-  '@storybook/addon-essentials': '8.3.0-alpha.3',
-  '@storybook/addon-mdx-gfm': '8.3.0-alpha.3',
-  '@storybook/addon-highlight': '8.3.0-alpha.3',
-  '@storybook/addon-interactions': '8.3.0-alpha.3',
-  '@storybook/addon-jest': '8.3.0-alpha.3',
-  '@storybook/addon-links': '8.3.0-alpha.3',
-  '@storybook/addon-measure': '8.3.0-alpha.3',
-  '@storybook/addon-onboarding': '8.3.0-alpha.3',
-  '@storybook/addon-outline': '8.3.0-alpha.3',
-  '@storybook/addon-storysource': '8.3.0-alpha.3',
-  '@storybook/addon-themes': '8.3.0-alpha.3',
-  '@storybook/addon-toolbars': '8.3.0-alpha.3',
-  '@storybook/addon-viewport': '8.3.0-alpha.3',
-  '@storybook/builder-vite': '8.3.0-alpha.3',
-  '@storybook/builder-webpack5': '8.3.0-alpha.3',
-  '@storybook/core': '8.3.0-alpha.3',
-  '@storybook/builder-manager': '8.3.0-alpha.3',
-  '@storybook/channels': '8.3.0-alpha.3',
-  '@storybook/client-logger': '8.3.0-alpha.3',
-  '@storybook/components': '8.3.0-alpha.3',
-  '@storybook/core-common': '8.3.0-alpha.3',
-  '@storybook/core-events': '8.3.0-alpha.3',
-  '@storybook/core-server': '8.3.0-alpha.3',
-  '@storybook/csf-tools': '8.3.0-alpha.3',
-  '@storybook/docs-tools': '8.3.0-alpha.3',
-  '@storybook/manager': '8.3.0-alpha.3',
-  '@storybook/manager-api': '8.3.0-alpha.3',
-  '@storybook/node-logger': '8.3.0-alpha.3',
-  '@storybook/preview': '8.3.0-alpha.3',
-  '@storybook/preview-api': '8.3.0-alpha.3',
-  '@storybook/router': '8.3.0-alpha.3',
-  '@storybook/telemetry': '8.3.0-alpha.3',
-  '@storybook/theming': '8.3.0-alpha.3',
-  '@storybook/types': '8.3.0-alpha.3',
-  '@storybook/angular': '8.3.0-alpha.3',
-  '@storybook/ember': '8.3.0-alpha.3',
-  '@storybook/experimental-nextjs-vite': '8.3.0-alpha.3',
-  '@storybook/html-vite': '8.3.0-alpha.3',
-  '@storybook/html-webpack5': '8.3.0-alpha.3',
-  '@storybook/nextjs': '8.3.0-alpha.3',
-  '@storybook/preact-vite': '8.3.0-alpha.3',
-  '@storybook/preact-webpack5': '8.3.0-alpha.3',
-  '@storybook/react-vite': '8.3.0-alpha.3',
-  '@storybook/react-webpack5': '8.3.0-alpha.3',
-  '@storybook/server-webpack5': '8.3.0-alpha.3',
-  '@storybook/svelte-vite': '8.3.0-alpha.3',
-  '@storybook/svelte-webpack5': '8.3.0-alpha.3',
-  '@storybook/sveltekit': '8.3.0-alpha.3',
-  '@storybook/vue3-vite': '8.3.0-alpha.3',
-  '@storybook/vue3-webpack5': '8.3.0-alpha.3',
-  '@storybook/web-components-vite': '8.3.0-alpha.3',
-  '@storybook/web-components-webpack5': '8.3.0-alpha.3',
-  '@storybook/blocks': '8.3.0-alpha.3',
-  storybook: '8.3.0-alpha.3',
-  sb: '8.3.0-alpha.3',
-  '@storybook/cli': '8.3.0-alpha.3',
-  '@storybook/codemod': '8.3.0-alpha.3',
-  '@storybook/core-webpack': '8.3.0-alpha.3',
-  'create-storybook': '8.3.0-alpha.3',
-  '@storybook/csf-plugin': '8.3.0-alpha.3',
-  '@storybook/instrumenter': '8.3.0-alpha.3',
-  '@storybook/react-dom-shim': '8.3.0-alpha.3',
-  '@storybook/source-loader': '8.3.0-alpha.3',
-  '@storybook/test': '8.3.0-alpha.3',
-  '@storybook/preset-create-react-app': '8.3.0-alpha.3',
-  '@storybook/preset-html-webpack': '8.3.0-alpha.3',
-  '@storybook/preset-preact-webpack': '8.3.0-alpha.3',
-  '@storybook/preset-react-webpack': '8.3.0-alpha.3',
-  '@storybook/preset-server-webpack': '8.3.0-alpha.3',
-  '@storybook/preset-svelte-webpack': '8.3.0-alpha.3',
-  '@storybook/preset-vue3-webpack': '8.3.0-alpha.3',
-  '@storybook/html': '8.3.0-alpha.3',
-  '@storybook/preact': '8.3.0-alpha.3',
-  '@storybook/react': '8.3.0-alpha.3',
-  '@storybook/server': '8.3.0-alpha.3',
-  '@storybook/svelte': '8.3.0-alpha.3',
-  '@storybook/vue3': '8.3.0-alpha.3',
-  '@storybook/web-components': '8.3.0-alpha.3',
+  '@storybook/addon-a11y': '8.3.0-alpha.4',
+  '@storybook/addon-actions': '8.3.0-alpha.4',
+  '@storybook/addon-backgrounds': '8.3.0-alpha.4',
+  '@storybook/addon-controls': '8.3.0-alpha.4',
+  '@storybook/addon-docs': '8.3.0-alpha.4',
+  '@storybook/addon-essentials': '8.3.0-alpha.4',
+  '@storybook/addon-mdx-gfm': '8.3.0-alpha.4',
+  '@storybook/addon-highlight': '8.3.0-alpha.4',
+  '@storybook/addon-interactions': '8.3.0-alpha.4',
+  '@storybook/addon-jest': '8.3.0-alpha.4',
+  '@storybook/addon-links': '8.3.0-alpha.4',
+  '@storybook/addon-measure': '8.3.0-alpha.4',
+  '@storybook/addon-onboarding': '8.3.0-alpha.4',
+  '@storybook/addon-outline': '8.3.0-alpha.4',
+  '@storybook/addon-storysource': '8.3.0-alpha.4',
+  '@storybook/addon-themes': '8.3.0-alpha.4',
+  '@storybook/addon-toolbars': '8.3.0-alpha.4',
+  '@storybook/addon-viewport': '8.3.0-alpha.4',
+  '@storybook/builder-vite': '8.3.0-alpha.4',
+  '@storybook/builder-webpack5': '8.3.0-alpha.4',
+  '@storybook/core': '8.3.0-alpha.4',
+  '@storybook/builder-manager': '8.3.0-alpha.4',
+  '@storybook/channels': '8.3.0-alpha.4',
+  '@storybook/client-logger': '8.3.0-alpha.4',
+  '@storybook/components': '8.3.0-alpha.4',
+  '@storybook/core-common': '8.3.0-alpha.4',
+  '@storybook/core-events': '8.3.0-alpha.4',
+  '@storybook/core-server': '8.3.0-alpha.4',
+  '@storybook/csf-tools': '8.3.0-alpha.4',
+  '@storybook/docs-tools': '8.3.0-alpha.4',
+  '@storybook/manager': '8.3.0-alpha.4',
+  '@storybook/manager-api': '8.3.0-alpha.4',
+  '@storybook/node-logger': '8.3.0-alpha.4',
+  '@storybook/preview': '8.3.0-alpha.4',
+  '@storybook/preview-api': '8.3.0-alpha.4',
+  '@storybook/router': '8.3.0-alpha.4',
+  '@storybook/telemetry': '8.3.0-alpha.4',
+  '@storybook/theming': '8.3.0-alpha.4',
+  '@storybook/types': '8.3.0-alpha.4',
+  '@storybook/angular': '8.3.0-alpha.4',
+  '@storybook/ember': '8.3.0-alpha.4',
+  '@storybook/experimental-nextjs-vite': '8.3.0-alpha.4',
+  '@storybook/html-vite': '8.3.0-alpha.4',
+  '@storybook/html-webpack5': '8.3.0-alpha.4',
+  '@storybook/nextjs': '8.3.0-alpha.4',
+  '@storybook/preact-vite': '8.3.0-alpha.4',
+  '@storybook/preact-webpack5': '8.3.0-alpha.4',
+  '@storybook/react-vite': '8.3.0-alpha.4',
+  '@storybook/react-webpack5': '8.3.0-alpha.4',
+  '@storybook/server-webpack5': '8.3.0-alpha.4',
+  '@storybook/svelte-vite': '8.3.0-alpha.4',
+  '@storybook/svelte-webpack5': '8.3.0-alpha.4',
+  '@storybook/sveltekit': '8.3.0-alpha.4',
+  '@storybook/vue3-vite': '8.3.0-alpha.4',
+  '@storybook/vue3-webpack5': '8.3.0-alpha.4',
+  '@storybook/web-components-vite': '8.3.0-alpha.4',
+  '@storybook/web-components-webpack5': '8.3.0-alpha.4',
+  '@storybook/blocks': '8.3.0-alpha.4',
+  storybook: '8.3.0-alpha.4',
+  sb: '8.3.0-alpha.4',
+  '@storybook/cli': '8.3.0-alpha.4',
+  '@storybook/codemod': '8.3.0-alpha.4',
+  '@storybook/core-webpack': '8.3.0-alpha.4',
+  'create-storybook': '8.3.0-alpha.4',
+  '@storybook/csf-plugin': '8.3.0-alpha.4',
+  '@storybook/instrumenter': '8.3.0-alpha.4',
+  '@storybook/react-dom-shim': '8.3.0-alpha.4',
+  '@storybook/source-loader': '8.3.0-alpha.4',
+  '@storybook/test': '8.3.0-alpha.4',
+  '@storybook/preset-create-react-app': '8.3.0-alpha.4',
+  '@storybook/preset-html-webpack': '8.3.0-alpha.4',
+  '@storybook/preset-preact-webpack': '8.3.0-alpha.4',
+  '@storybook/preset-react-webpack': '8.3.0-alpha.4',
+  '@storybook/preset-server-webpack': '8.3.0-alpha.4',
+  '@storybook/preset-svelte-webpack': '8.3.0-alpha.4',
+  '@storybook/preset-vue3-webpack': '8.3.0-alpha.4',
+  '@storybook/html': '8.3.0-alpha.4',
+  '@storybook/preact': '8.3.0-alpha.4',
+  '@storybook/react': '8.3.0-alpha.4',
+  '@storybook/server': '8.3.0-alpha.4',
+  '@storybook/svelte': '8.3.0-alpha.4',
+  '@storybook/vue3': '8.3.0-alpha.4',
+  '@storybook/web-components': '8.3.0-alpha.4',
 };
--- a/code/core/src/manager-api/version.ts
+++ b/code/core/src/manager-api/version.ts
@ -1 +1 @@
-export const version = '8.3.0-alpha.3';
+export const version = '8.3.0-alpha.4';
--- a/code/core/src/preview-api/modules/preview-web/PreviewWeb.mockdata.ts
+++ b/code/core/src/preview-api/modules/preview-web/PreviewWeb.mockdata.ts
@ -71,7 +71,7 @@ export const docsRenderer = {
  render: vi.fn().mockImplementation((context, parameters, element) => Promise.resolve()),
  unmount: vi.fn(),
 };
-export const teardownrenderToCanvas: Mock<[TeardownRenderToCanvas]> = vi.fn();
+export const teardownrenderToCanvas: Mock<(teardown: TeardownRenderToCanvas) => void> = vi.fn();
 const rawProjectAnnotations = {
  initialGlobals: { a: 'b' },
  globalTypes: {},
--- a/code/deprecated/builder-manager/package.json
+++ b/code/deprecated/builder-manager/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/builder-manager",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook manager builder",
  "keywords": [
    "storybook"
--- a/code/deprecated/channels/package.json
+++ b/code/deprecated/channels/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/channels",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "",
  "keywords": [
    "storybook"
--- a/code/deprecated/client-logger/package.json
+++ b/code/deprecated/client-logger/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/client-logger",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "",
  "keywords": [
    "storybook"
--- a/code/deprecated/components/package.json
+++ b/code/deprecated/components/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/components",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Core Storybook Components",
  "keywords": [
    "storybook"
--- a/code/deprecated/core-common/package.json
+++ b/code/deprecated/core-common/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/core-common",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook framework-agnostic API",
  "keywords": [
    "storybook"
--- a/code/deprecated/core-events/package.json
+++ b/code/deprecated/core-events/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/core-events",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Event names used in storybook core",
  "keywords": [
    "storybook"
--- a/code/deprecated/core-server/package.json
+++ b/code/deprecated/core-server/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/core-server",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook framework-agnostic API",
  "keywords": [
    "storybook"
--- a/code/deprecated/csf-tools/package.json
+++ b/code/deprecated/csf-tools/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/csf-tools",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Parse and manipulate CSF and Storybook config files",
  "keywords": [
    "storybook"
--- a/code/deprecated/docs-tools/package.json
+++ b/code/deprecated/docs-tools/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/docs-tools",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Shared utility functions for frameworks to implement docs",
  "keywords": [
    "storybook"
--- a/code/deprecated/manager-api/package.json
+++ b/code/deprecated/manager-api/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/manager-api",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Core Storybook Manager API & Context",
  "keywords": [
    "storybook"
--- a/code/deprecated/manager/package.json
+++ b/code/deprecated/manager/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/manager",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Core Storybook UI",
  "keywords": [
    "storybook"
--- a/code/deprecated/node-logger/package.json
+++ b/code/deprecated/node-logger/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/node-logger",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "",
  "keywords": [
    "storybook"
--- a/code/deprecated/preview-api/package.json
+++ b/code/deprecated/preview-api/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/preview-api",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "",
  "keywords": [
    "storybook"
--- a/code/deprecated/preview/package.json
+++ b/code/deprecated/preview/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/preview",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "",
  "keywords": [
    "storybook"
--- a/code/deprecated/router/package.json
+++ b/code/deprecated/router/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/router",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Core Storybook Router",
  "keywords": [
    "storybook"
--- a/code/deprecated/telemetry/package.json
+++ b/code/deprecated/telemetry/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/telemetry",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Telemetry logging for crash reports and usage statistics",
  "keywords": [
    "storybook"
--- a/code/deprecated/theming/package.json
+++ b/code/deprecated/theming/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/theming",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Core Storybook Components",
  "keywords": [
    "storybook"
--- a/code/deprecated/types/package.json
+++ b/code/deprecated/types/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/types",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Core Storybook TS Types",
  "keywords": [
    "storybook"
--- a/code/frameworks/angular/package.json
+++ b/code/frameworks/angular/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/angular",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
  "keywords": [
    "storybook",
--- a/code/frameworks/ember/package.json
+++ b/code/frameworks/ember/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/ember",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember",
  "bugs": {
--- a/code/frameworks/html-vite/package.json
+++ b/code/frameworks/html-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/html-vite",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
--- a/code/frameworks/html-webpack5/package.json
+++ b/code/frameworks/html-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/html-webpack5",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
--- a/code/frameworks/nextjs/package.json
+++ b/code/frameworks/nextjs/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/nextjs",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook for Next.js",
  "keywords": [
    "storybook",
--- a/code/frameworks/preact-vite/package.json
+++ b/code/frameworks/preact-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/preact-vite",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
--- a/code/frameworks/preact-webpack5/package.json
+++ b/code/frameworks/preact-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/preact-webpack5",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook for Preact: Develop Preact Component in isolation.",
  "keywords": [
    "storybook"
--- a/code/frameworks/react-vite/package.json
+++ b/code/frameworks/react-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/react-vite",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
--- a/code/frameworks/react-webpack5/package.json
+++ b/code/frameworks/react-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/react-webpack5",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
--- a/code/frameworks/server-webpack5/package.json
+++ b/code/frameworks/server-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/server-webpack5",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
--- a/code/frameworks/svelte-vite/package.json
+++ b/code/frameworks/svelte-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/svelte-vite",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
--- a/code/frameworks/svelte-webpack5/package.json
+++ b/code/frameworks/svelte-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/svelte-webpack5",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
--- a/code/frameworks/sveltekit/package.json
+++ b/code/frameworks/sveltekit/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/sveltekit",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook for SvelteKit",
  "keywords": [
    "storybook",
--- a/code/frameworks/vue3-vite/package.json
+++ b/code/frameworks/vue3-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/vue3-vite",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
--- a/code/frameworks/vue3-webpack5/package.json
+++ b/code/frameworks/vue3-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/vue3-webpack5",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
--- 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.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
--- 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.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
  "keywords": [
    "lit",
--- a/code/lib/blocks/package.json
+++ b/code/lib/blocks/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/blocks",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook Doc Blocks",
  "keywords": [
    "storybook"
--- a/code/lib/cli-sb/package.json
+++ b/code/lib/cli-sb/package.json
@ -1,6 +1,6 @@
 {
  "name": "sb",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook CLI",
  "keywords": [
    "storybook"
--- a/code/lib/cli-storybook/package.json
+++ b/code/lib/cli-storybook/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/cli",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook CLI",
  "keywords": [
    "storybook"
--- a/code/lib/cli-storybook/src/upgrade.test.ts
+++ b/code/lib/cli-storybook/src/upgrade.test.ts
@ -4,7 +4,8 @@ import { UpgradeStorybookToLowerVersionError } from 'storybook/internal/server-e
 import { doUpgrade, getStorybookVersion } from './upgrade';
 import { logger } from 'storybook/internal/node-logger';

-const findInstallationsMock = vi.fn<string[], Promise<sbcc.InstallationMetadata | undefined>>();
+const findInstallationsMock =
+  vi.fn<(arg: string[]) => Promise<sbcc.InstallationMetadata | undefined>>();

 vi.mock('storybook/internal/telemetry');
 vi.mock('storybook/internal/common', async (importOriginal) => {
--- a/code/lib/cli/package.json
+++ b/code/lib/cli/package.json
@ -1,6 +1,6 @@
 {
  "name": "storybook",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook's CLI - install, dev, build, upgrade, and more",
  "keywords": [
    "cli",
--- a/code/lib/codemod/package.json
+++ b/code/lib/codemod/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/codemod",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "A collection of codemod scripts written with JSCodeshift",
  "keywords": [
    "storybook"
--- a/code/lib/core-webpack/package.json
+++ b/code/lib/core-webpack/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/core-webpack",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook framework-agnostic API",
  "keywords": [
    "storybook"
--- a/code/lib/create-storybook/package.json
+++ b/code/lib/create-storybook/package.json
@ -1,6 +1,6 @@
 {
  "name": "create-storybook",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Initialize Storybook into your project",
  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/lib/create-storybook",
  "bugs": {
--- a/code/lib/csf-plugin/package.json
+++ b/code/lib/csf-plugin/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/csf-plugin",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Enrich CSF files via static analysis",
  "keywords": [
    "storybook"
--- a/code/lib/instrumenter/package.json
+++ b/code/lib/instrumenter/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/instrumenter",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "",
  "keywords": [
    "storybook"
@ -45,7 +45,7 @@
  },
  "dependencies": {
    "@storybook/global": "^5.0.0",
-    "@vitest/utils": "^1.3.1",
+    "@vitest/utils": "^2.0.5",
    "util": "^0.12.4"
  },
  "devDependencies": {
--- 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.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "",
  "keywords": [
    "storybook"
--- a/code/lib/source-loader/package.json
+++ b/code/lib/source-loader/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/source-loader",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Source loader",
  "keywords": [
    "lib",
--- a/code/lib/test/package.json
+++ b/code/lib/test/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/test",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "",
  "keywords": [
    "storybook"
@ -46,16 +46,16 @@
  "dependencies": {
    "@storybook/csf": "^0.1.11",
    "@storybook/instrumenter": "workspace:*",
-    "@testing-library/dom": "10.1.0",
-    "@testing-library/jest-dom": "6.4.5",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "6.4.8",
    "@testing-library/user-event": "14.5.2",
-    "@vitest/expect": "1.6.0",
-    "@vitest/spy": "1.6.0",
+    "@vitest/expect": "2.0.5",
+    "@vitest/spy": "2.0.5",
    "util": "^0.12.4"
  },
  "devDependencies": {
-    "chai": "^4.4.1",
-    "tinyspy": "^2.2.0",
+    "chai": "^5.1.1",
+    "tinyspy": "^3.0.0",
    "ts-dedent": "^2.2.0",
    "type-fest": "~2.19",
    "typescript": "^5.3.2"
--- a/code/lib/test/src/expect.ts
+++ b/code/lib/test/src/expect.ts
@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import * as chai from 'chai';
 import type {
  AsymmetricMatchersContaining,
@ -65,7 +66,9 @@ export function createExpect() {
  // @ts-expect-error chai.extend is not typed
  expect.extend = (expects: MatchersObject) => chai.expect.extend(expect, expects);

+  // @ts-ignore tsup borks here for some reason
  expect.soft = (...args) => {
+    // @ts-ignore tsup borks here for some reason
    const assert = expect(...args);
    expect.setState({
      soft: true,
@ -73,6 +76,7 @@ export function createExpect() {
    return assert;
  };

+  // @ts-ignore tsup borks here for some reason
  expect.unreachable = (message?: string): never => {
    chai.assert.fail(`expected${message ? ` "${message}" ` : ' '}not to be reached`);
  };
@ -123,7 +127,7 @@ export function createExpect() {
  return expect as unknown as Expect;
 }

-const expect = createExpect();
+const expect: Expect = createExpect();

 // @vitest/expect expects this to be set
 Object.defineProperty(globalThis, GLOBAL_EXPECT, {
--- a/code/lib/test/src/index.ts
+++ b/code/lib/test/src/index.ts
@ -1,6 +1,6 @@
 import { instrument } from '@storybook/instrumenter';
 import type { LoaderFunction } from '@storybook/csf';
-import chai from 'chai';
+import * as chai from 'chai';
 import { global } from '@storybook/global';
 import { expect as rawExpect } from './expect';
 import {
--- a/code/lib/test/src/spy.ts
+++ b/code/lib/test/src/spy.ts
@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-shadow */
-import type { MockInstance } from '@vitest/spy';
+import type { Mock as MockV2, MockInstance } from '@vitest/spy';
 import {
  spyOn as vitestSpyOn,
  isMockFunction,
@ -31,11 +31,30 @@ export const spyOn: typeof vitestSpyOn = (...args) => {
  return reactiveMock(mock);
 };

-// @ts-expect-error Make sure we export the exact same type as @vitest/spy
-export const fn: typeof vitestFn = (implementation) => {
+type Procedure = (...args: any[]) => any;
+
+// TODO: Remove in 9.0
+export type Mock<T extends Procedure | any[] = any[], R = any> = T extends Procedure
+  ? MockV2<T>
+  : T extends any[]
+    ? MockV2<(...args: T) => R>
+    : never;
+
+// V2
+export function fn<T extends Procedure = Procedure>(implementation?: T): Mock<T>;
+// TODO: Remove in 9.0
+// V1
+export function fn<TArgs extends any[] = any, R = any>(): Mock<(...args: TArgs) => R>;
+export function fn<TArgs extends any[] = any[], R = any>(
+  implementation: (...args: TArgs) => R
+): Mock<(...args: TArgs) => R>;
+export function fn<TArgs extends any[] = any[], R = any>(
+  implementation?: (...args: TArgs) => R
+): Mock<(...args: TArgs) => R>;
+export function fn(implementation?: Procedure) {
  const mock = implementation ? vitestFn(implementation) : vitestFn();
  return reactiveMock(mock);
-};
+}

 function reactiveMock(mock: MockInstance) {
  const reactive = listenWhenCalled(mock);
--- a/code/package.json
+++ b/code/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/root",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "private": true,
  "description": "Storybook root",
  "homepage": "https://storybook.js.org/",
@ -76,9 +76,8 @@
  ],
  "resolutions": {
    "@playwright/test": "1.36.0",
-    "@testing-library/jest-dom/aria-query": "5.1.3",
    "@types/node": "^18.0.0",
-    "@vitest/expect": "patch:@vitest/expect@npm%3A1.6.0#~/.yarn/patches/@vitest-expect-npm-1.6.0-0e382f8212.patch",
+    "@vitest/expect@npm:2.0.5": "patch:@vitest/expect@npm%3A2.0.5#~/.yarn/patches/@vitest-expect-npm-2.0.5-8933466cce.patch",
    "esbuild": "^0.23.0",
    "playwright": "1.36.0",
    "playwright-core": "1.36.0",
@ -158,10 +157,10 @@
    "@storybook/web-components": "workspace:*",
    "@storybook/web-components-vite": "workspace:*",
    "@storybook/web-components-webpack5": "workspace:*",
-    "@testing-library/dom": "^7.29.4",
-    "@testing-library/jest-dom": "6.4.5",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
    "@types/express": "^4.17.21",
    "@types/fs-extra": "^11.0.1",
    "@types/lodash": "^4.14.167",
@ -174,7 +173,7 @@
    "@typescript-eslint/experimental-utils": "^5.62.0",
    "@typescript-eslint/parser": "^6.18.1",
    "@vitejs/plugin-react": "^3.0.1",
-    "@vitest/coverage-v8": "^1.2.2",
+    "@vitest/coverage-v8": "^2.0.5",
    "create-storybook": "workspace:*",
    "cross-env": "^7.0.3",
    "danger": "^12.3.3",
@ -208,7 +207,7 @@
    "typescript": "^5.4.3",
    "util": "^0.12.4",
    "vite": "^4.0.0",
-    "vitest": "^1.6.0",
+    "vitest": "^2.0.5",
    "wait-on": "^7.0.1"
  },
  "dependenciesMeta": {
--- 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.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook for Create React App preset",
  "keywords": [
    "storybook"
--- 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.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
--- 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.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook for Preact: Develop Preact Component in isolation.",
  "keywords": [
    "storybook"
--- 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.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook for React: Develop React Component in isolation with Hot Reloading",
  "keywords": [
    "storybook"
--- 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.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
--- 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.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
--- 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.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
--- a/code/renderers/html/package.json
+++ b/code/renderers/html/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/html",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook HTML renderer",
  "keywords": [
    "storybook"
--- a/code/renderers/preact/package.json
+++ b/code/renderers/preact/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/preact",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook Preact renderer",
  "keywords": [
    "storybook"
--- a/code/renderers/react/package.json
+++ b/code/renderers/react/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/react",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook React renderer",
  "keywords": [
    "storybook"
--- a/code/renderers/react/src/test/portable-stories.test.tsx
+++ b/code/renderers/react/src/test/portable-stories.test.tsx
@ -135,7 +135,6 @@ describe('CSF3', () => {
    const CSF3InputFieldFilled = composeStory(stories.CSF3InputFieldFilled, stories.default);

    const div = document.createElement('div');
-    console.log(div.tagName);
    document.body.appendChild(div);

    await CSF3InputFieldFilled.run({ canvasElement: div });
--- a/code/renderers/react/src/public-types.test.tsx
+++ b/code/renderers/react/src/public-types.test.tsx
@ -319,15 +319,11 @@ it('Infer mock function given to args in meta.', () => {
    play: async ({ args, mount }) => {
      const canvas = await mount(<TestButton {...args} />);
      expectTypeOf(canvas).toEqualTypeOf<Canvas>();
-      expectTypeOf(args.onClick).toEqualTypeOf<Mock<[], void>>();
+      expectTypeOf(args.onClick).toEqualTypeOf<Mock>();
      expectTypeOf(args.onRender).toEqualTypeOf<() => JSX.Element>();
    },
  };
-  type Expected = StoryAnnotations<
-    ReactRenderer,
-    Props & { onClick: Mock<[], void> },
-    Partial<Props>
-  >;
+  type Expected = StoryAnnotations<ReactRenderer, Props & { onClick: Mock }, Partial<Props>>;

  expectTypeOf(Basic).toEqualTypeOf<Expected>();
 });
--- a/code/renderers/server/package.json
+++ b/code/renderers/server/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/server",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook Server renderer",
  "keywords": [
    "storybook"
--- a/code/renderers/svelte/package.json
+++ b/code/renderers/svelte/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/svelte",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook Svelte renderer",
  "keywords": [
    "storybook"
--- a/code/renderers/vue3/package.json
+++ b/code/renderers/vue3/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/vue3",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook Vue 3 renderer",
  "keywords": [
    "storybook"
--- a/code/renderers/web-components/package.json
+++ b/code/renderers/web-components/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/web-components",
-  "version": "8.3.0-alpha.3",
+  "version": "8.3.0-alpha.4",
  "description": "Storybook web-components renderer",
  "keywords": [
    "lit",
--- a/Show More
+++ b/Show More