diff --git a/.circleci/config.yml b/.circleci/config.yml
index 72f3bf9dc225..f67b712e04df 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -64,7 +64,7 @@ executors:
         default: "small"
     working_directory: /tmp/storybook
     docker:
-      - image: mcr.microsoft.com/playwright:v1.46.0-jammy
+      - image: mcr.microsoft.com/playwright:v1.48.1-jammy
         environment:
           NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
@@ -154,6 +154,8 @@ jobs:
             cd code
             yarn local-registry --publish
       - report-workflow-on-failure
+      - store_artifacts:
+          path: code/bench/esbuild-metafiles
       - save_cache:
           name: Save Yarn cache
           key: build-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
@@ -163,16 +165,15 @@ jobs:
           root: .
           paths:
             - code/node_modules
+            - code/addons
             - scripts/node_modules
+            - code/bench
             - code/examples
-            - code/node_modules
-            - code/addons
             - code/frameworks
             - code/deprecated
             - code/lib
             - code/core
             - code/builders
-            - code/ui
             - code/renderers
             - code/presets
             - .verdaccio-cache
@@ -192,23 +193,104 @@ jobs:
             yarn lint
       - report-workflow-on-failure
       - cancel-workflow-on-failure
-  check:
+  knip:
     executor:
-      class: xlarge
+      class: large
+      name: sb_node_22_classic
+    steps:
+      - git-shallow-clone/checkout_advanced:
+          clone_options: "--depth 1 --verbose"
+      - attach_workspace:
+          at: .
+      - run:
+          name: Knip
+          command: |
+            cd code
+            yarn knip --no-exit-code
+      - report-workflow-on-failure
+      - cancel-workflow-on-failure
+  bench-packages:
+    executor:
+      class: medium
       name: sb_node_22_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
       - attach_workspace:
           at: .
+      # if there is a base branch AND a PR number in parameters, benchmark packages against those
+      # this happens when run against a PR
+      - when:
+          condition:
+            and:
+              - << pipeline.parameters.ghBaseBranch >>
+              - << pipeline.parameters.ghPrNumber >>
+          steps:
+            - run:
+                name: Benchmarking packages against base branch
+                working_directory: scripts
+                command: |
+                  yarn local-registry --open &
+                  until curl -s http://localhost:6001 > /dev/null; do
+                    echo 'Waiting for local registry to be available...'
+                    sleep 2
+                  done
+                  yarn bench-packages --base-branch << pipeline.parameters.ghBaseBranch >> --pull-request << pipeline.parameters.ghPrNumber >> --upload
+      # if there is a NOT a base branch OR NOT a PR number in parameters, just upload benchmarks for the branch
+      # this happens when runned directly on branches, like next or main
+      - when:
+          condition:
+            or:
+              - not: << pipeline.parameters.ghBaseBranch >>
+              - not: << pipeline.parameters.ghPrNumber >>
+          steps:
+            - run:
+                name: Uploading package benchmarks for branch
+                working_directory: scripts
+                command: |
+                  yarn local-registry --open &
+                  until curl -s http://localhost:6001 > /dev/null; do
+                    echo 'Waiting for local registry to be available...'
+                    sleep 2
+                  done
+                  yarn bench-packages --upload
+      - store_artifacts:
+          path: bench/packages/results.json
+      - store_artifacts:
+          path: bench/packages/compare-with-<< pipeline.parameters.ghBaseBranch >>.json
+      - report-workflow-on-failure
+      - cancel-workflow-on-failure
+  check:
+    executor:
+      class: xlarge
+      name: sb_node_22_classic
+    steps:
+      - git-shallow-clone/checkout_advanced:
+          clone_options: "--depth 1 --verbose"
       - nx/set-shas:
           main-branch-name: "next"
           workflow-name: << pipeline.parameters.workflow >>
+      - run:
+          name: install in scripts
+          command: |
+            cd scripts
+            yarn install
+      - run:
+          name: install in code
+          command: |
+            cd code
+            yarn install
+      - run:
+          name: Compile
+          command: |
+            yarn task --task compile --start-from=compile --no-link --debug
       - run:
           name: Check
           command: |
-            yarn task --task compile --start-from=auto --no-link --debug
-            yarn task --task check --start-from=auto --no-link --debug
+            yarn task --task check --start-from=check --no-link --debug
+      - run:
+          name: Ensure no changes pending
+          command: |
             git diff --exit-code
       - report-workflow-on-failure
       - cancel-workflow-on-failure
@@ -242,6 +324,7 @@ jobs:
     executor:
       class: xlarge
       name: sb_playwright
+    parallelism: 4
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -251,15 +334,35 @@ jobs:
           name: Test
           command: |
             cd code
-            yarn test --coverage
-      - store_test_results:
-          path: code/junit.xml
+            SHARD="$((${CIRCLE_NODE_INDEX}+1))"; yarn test --reporter=blob --shard=${SHARD}/${CIRCLE_NODE_TOTAL}
+      # TODO: bring coverage back later. This has caused flakiness in the tests because
+      # Somehow Vitest reports coverage while some tests are still running,
+      # then it tries to report coverage again and as result it crashes like this:
+      # https://app.circleci.com/pipelines/github/storybookjs/storybook/85043/workflows/4ddf7907-b93c-4b17-8fdf-fe0bd7fde905/jobs/715446
+      # - persist_to_workspace:
+      #     root: .
+      #     paths:
+      #       - code/coverage
       - persist_to_workspace:
           root: .
           paths:
-            - code/coverage
+            - code/.vitest-reports
       - report-workflow-on-failure
       - cancel-workflow-on-failure
+  store-test-results:
+    executor:
+      class: small
+      name: sb_node_22_browsers
+    steps:
+      - git-shallow-clone/checkout_advanced:
+          clone_options: "--depth 1 --verbose"
+      - attach_workspace:
+          at: .
+      - run:
+          name: Merge test results
+          command: cd code && yarn vitest run --merge-reports --reporter=junit --outputFile=junit.xml
+      - store_test_results:
+          path: code/junit.xml
   coverage:
     executor:
       class: small
@@ -503,7 +606,7 @@ jobs:
       - store_artifacts: # this is where playwright puts more complex stuff
           path: code/playwright-results/
           destination: playwright
-  bench:
+  bench-sandboxes:
     parameters:
       parallelism:
         type: integer
@@ -635,6 +738,31 @@ jobs:
                   STORYBOOK_INIT_EMPTY_TYPE: << parameters.template >>
                   STORYBOOK_DISABLE_TELEMETRY: true
       - report-workflow-on-failure
+  test-ui-testing-module:
+    executor:
+      name: sb_playwright
+      class: medium
+    steps:
+      - git-shallow-clone/checkout_advanced:
+          clone_options: "--depth 1 --verbose"
+      - attach_workspace:
+          at: .
+      - run:
+          name: Install dependencies
+          command: yarn install --no-immutable
+          working_directory: test-storybooks/portable-stories-kitchen-sink/react
+          environment:
+            YARN_ENABLE_IMMUTABLE_INSTALLS: false
+      - run:
+          name: Run E2E tests
+          command: yarn playwright-e2e
+          working_directory: test-storybooks/portable-stories-kitchen-sink/react
+      - store_test_results:
+          path: test-results
+      - store_artifacts:
+          path: test-storybooks/portable-stories-kitchen-sink/react/test-results/
+          destination: playwright
+      - report-workflow-on-failure
   test-portable-stories:
     parameters:
       directory:
@@ -663,7 +791,7 @@ jobs:
           working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >>
       - run:
           name: Run Playwright CT tests
-          command: yarn playwright
+          command: yarn playwright-ct
           working_directory: test-storybooks/portable-stories-kitchen-sink/<< parameters.directory >>
       - run:
           name: Run Cypress CT tests
@@ -685,12 +813,19 @@ workflows:
       - lint:
           requires:
             - build
-      - check:
+      - knip:
+          requires:
+            - build
+      - bench-packages:
           requires:
             - build
+      - check
       - unit-tests:
           requires:
             - build
+      - store-test-results:
+          requires:
+            - unit-tests
       - script-checks:
           requires:
             - build
@@ -717,7 +852,7 @@ workflows:
           requires:
             - build-sandboxes
       - e2e-dev:
-          parallelism: 2
+          parallelism: 1
           requires:
             - create-sandboxes
       - test-runner-production:
@@ -728,10 +863,13 @@ workflows:
           parallelism: 5
           requires:
             - create-sandboxes
-      - bench:
+      - bench-sandboxes:
           parallelism: 5
           requires:
             - build-sandboxes
+      - test-ui-testing-module:
+          requires:
+            - build
       - test-portable-stories:
           requires:
             - build
@@ -751,12 +889,19 @@ workflows:
       - lint:
           requires:
             - build
-      - check:
+      - knip:
+          requires:
+            - build
+      - bench-packages:
           requires:
             - build
+      - check
       - unit-tests:
           requires:
             - build
+      - store-test-results:
+          requires:
+            - unit-tests
       - script-checks:
           requires:
             - build
@@ -783,7 +928,7 @@ workflows:
           requires:
             - build-sandboxes
       - e2e-dev:
-          parallelism: 2
+          parallelism: 1
           requires:
             - create-sandboxes
       - test-runner-production:
@@ -800,7 +945,10 @@ workflows:
           matrix:
             parameters:
               directory: ["react", "vue3", "nextjs", "svelte"]
-      - bench:
+      - test-ui-testing-module:
+          requires:
+            - build
+      - bench-sandboxes:
           parallelism: 5
           requires:
             - build-sandboxes
@@ -818,12 +966,19 @@ workflows:
       - lint:
           requires:
             - build
-      - check:
+      - knip:
           requires:
             - build
+      - bench-packages:
+          requires:
+            - build
+      - check
       - unit-tests:
           requires:
             - build
+      - store-test-results:
+          requires:
+            - unit-tests
       - script-checks:
           requires:
             - build
@@ -831,30 +986,30 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 38
+          parallelism: 37
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 38
+          parallelism: 37
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 35
+          parallelism: 34
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 33
+          parallelism: 32
           requires:
             - build-sandboxes
       - e2e-dev:
-          parallelism: 2
+          parallelism: 1
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 33
+          parallelism: 32
           requires:
             - build-sandboxes
       - vitest-integration:
@@ -867,6 +1022,9 @@ workflows:
           matrix:
             parameters:
               directory: ["react", "vue3", "nextjs", "svelte"]
+      - test-ui-testing-module:
+          requires:
+            - build
       - test-empty-init:
           requires:
             - build
@@ -885,7 +1043,7 @@ workflows:
                 # --smoke-test is not supported for the angular builder right now
                 # - "angular-cli"
                 - "lit-vite-ts"
-      - bench:
+      - bench-sandboxes:
           parallelism: 5
           requires:
             - build-sandboxes
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index e56e437088eb..98a3f8475e6d 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -19,6 +19,7 @@ Thank you for contributing to Storybook! Please submit all PRs to the `next` bra
 <!-- Please check (put an "x" inside the "[ ]") the applicable items below to communicate how to test your changes -->
 
 #### The changes in this PR are covered in the following automated tests:
+
 - [ ] stories
 - [ ] unit tests
 - [ ] integration tests
@@ -46,21 +47,21 @@ _This section is mandatory for all contributions. If you believe no manual test
 
 ## Checklist for Maintainers
 
-- [ ] When this PR is ready for testing, make sure to add `ci:normal`, `ci:merged` or `ci:daily` GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in `code/lib/cli/src/sandbox-templates.ts`
+- [ ] When this PR is ready for testing, make sure to add `ci:normal`, `ci:merged` or `ci:daily` GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in `code/lib/cli-storybook/src/sandbox-templates.ts`
 - [ ] Make sure this PR contains **one** of the labels below:
    <details>
      <summary>Available labels</summary>
 
-     - `bug`: Internal changes that fixes incorrect behavior.
-     - `maintenance`: User-facing maintenance tasks.
-     - `dependencies`: Upgrading (sometimes downgrading) dependencies.
-     - `build`: Internal-facing build tooling & test updates. Will not show up in release changelog.
-     - `cleanup`: Minor cleanup style change. Will not show up in release changelog.
-     - `documentation`: Documentation **only** changes. Will not show up in release changelog.
-     - `feature request`: Introducing a new feature.
-     - `BREAKING CHANGE`: Changes that break compatibility in some way with current major version.
-     - `other`: Changes that don't fit in the above categories.
-   
+  - `bug`: Internal changes that fixes incorrect behavior.
+  - `maintenance`: User-facing maintenance tasks.
+  - `dependencies`: Upgrading (sometimes downgrading) dependencies.
+  - `build`: Internal-facing build tooling & test updates. Will not show up in release changelog.
+  - `cleanup`: Minor cleanup style change. Will not show up in release changelog.
+  - `documentation`: Documentation **only** changes. Will not show up in release changelog.
+  - `feature request`: Introducing a new feature.
+  - `BREAKING CHANGE`: Changes that break compatibility in some way with current major version.
+  - `other`: Changes that don't fit in the above categories.
+
    </details>
 
 ### 🦋 Canary release
@@ -74,4 +75,4 @@ _core team members can create a canary release [here](https://github.com/storybo
 <!-- CANARY_RELEASE_SECTION -->
 
 <!-- BENCHMARK_SECTION -->
-<!-- BENCHMARK_SECTION -->
\ No newline at end of file
+<!-- BENCHMARK_SECTION -->
diff --git a/.github/workflows/generate-sandboxes.yml b/.github/workflows/generate-sandboxes.yml
index 09ab43d53601..88dc9e21bb41 100644
--- a/.github/workflows/generate-sandboxes.yml
+++ b/.github/workflows/generate-sandboxes.yml
@@ -29,7 +29,7 @@ jobs:
       - uses: actions/checkout@v4
         with:
           ref: next
-  
+
       - uses: actions/setup-node@v4
         with:
           node-version-file: ".nvmrc"
diff --git a/.github/workflows/tests-unit.yml b/.github/workflows/tests-unit.yml
index d50dc7efdf27..c0e166bea164 100644
--- a/.github/workflows/tests-unit.yml
+++ b/.github/workflows/tests-unit.yml
@@ -17,6 +17,8 @@ jobs:
     runs-on: ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
       - name: Set node version
         uses: actions/setup-node@v4
         with:
diff --git a/.gitignore b/.gitignore
index acfc54475076..fe790007a21e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,6 +12,7 @@ test-results
 /repros
 /sandbox
 /bench
+/code/bench
 .verdaccio-cache
 .next
 /.npmrc
@@ -54,7 +55,11 @@ code/bench-results/
 
 /packs
 code/.nx/cache
+code/.nx/workspace-data
 code/.vite-inspect
 .nx/cache
+.nx/workspace-data
 !**/fixtures/**/yarn.lock
 code/core/report
+
+*storybook.log
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0bae092457f4..38eb1cc6cb56 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,134 @@
+## 8.4.7
+
+- Telemetry: Improve anonymous id calculation - [#29736](https://github.com/storybookjs/storybook/pull/29736), thanks @tmeasday!
+- Vue: Properly resolve Vite plugin - [#29795](https://github.com/storybookjs/storybook/pull/29795), thanks @tobiasdiez!
+
+## 8.4.6
+
+- Addon Test: Use pathe for better windows support - [#29676](https://github.com/storybookjs/storybook/pull/29676), thanks @yannbf!
+- Angular: Default to standalone components in Angular v19 - [#29677](https://github.com/storybookjs/storybook/pull/29677), thanks @ingowagner!
+- Frameworks: Add Vite 6 support - [#29710](https://github.com/storybookjs/storybook/pull/29710), thanks @yannbf!
+- Portable stories: Support multiple annotation notations from preview - [#29733](https://github.com/storybookjs/storybook/pull/29733), thanks @yannbf!
+- React: Upgrade react-docgen-typescript to support Vite 6 - [#29724](https://github.com/storybookjs/storybook/pull/29724), thanks @yannbf!
+- Svelte: Support `@sveltejs/vite-plugin-svelte` v5 - [#29731](https://github.com/storybookjs/storybook/pull/29731), thanks @JReinhold!
+
+## 8.4.5
+
+- Angular: Support v19 - [#29659](https://github.com/storybookjs/storybook/pull/29659), thanks @leosvelperez!
+- CLI: Disable corepack auto pin behavior - [#29627](https://github.com/storybookjs/storybook/pull/29627), thanks @yannbf!
+- CLI: Fix qwik init - [#29632](https://github.com/storybookjs/storybook/pull/29632), thanks @shilman!
+- Nextjs-Vite: Add Next.js 15 support - [#29640](https://github.com/storybookjs/storybook/pull/29640), thanks @yannbf!
+
+## 8.4.4
+
+- Addon Test: Only optimize react deps if applicable in vitest-plugin - [#29617](https://github.com/storybookjs/storybook/pull/29617), thanks @yannbf!
+
+## 8.4.3
+
+- Addon Test: Optimize internal dependencies - [#29595](https://github.com/storybookjs/storybook/pull/29595), thanks @yannbf!
+- Next.js: Add support for Next 15 - [#29587](https://github.com/storybookjs/storybook/pull/29587), thanks @yannbf!
+
+## 8.4.2
+
+- Addon Test: Fix post-install logic for Next.js Vite framework support - [#29524](https://github.com/storybookjs/storybook/pull/29524), thanks @valentinpalkovic!
+- Addon Test: Only render the TestingModule component in development mode - [#29501](https://github.com/storybookjs/storybook/pull/29501), thanks @yannbf!
+- CLI: Fix Solid init by installing `@storybook/test` - [#29514](https://github.com/storybookjs/storybook/pull/29514), thanks @shilman!
+- Core: Shim CJS-only globals in ESM output - [#29157](https://github.com/storybookjs/storybook/pull/29157), thanks @valentinpalkovic!
+- Next.js: Fix bundled react and react-dom in monorepos - [#29444](https://github.com/storybookjs/storybook/pull/29444), thanks @sentience!
+
+## 8.4.1
+
+- Core: Relax peer dep constraint of shim packages - [#29503](https://github.com/storybookjs/storybook/pull/29503), thanks @kasperpeulen!
+
+## 8.4.0
+
+Storybook 8.4 comes with a ton of exciting new features designed to give you the best experience developing, testing, and debugging tests in the browser!
+
+- ▶️ **Unified UI** for component testing
+- 5️⃣ **Svelte 5** and Svelte CSF support
+- ⚛️ **React Native Storybook 8** release
+- 🏷️ **Tags-based filtering** to organize your Storybook
+- 🫧 **Dependency cleanup** to reduce install footprint
+- 💯 **Hundreds** more improvements
+
+<details>
+<summary>List of all updates</summary>
+
+- Addon Test: Adjust file exports to be ESM/CJS compatible - [#29471](https://github.com/storybookjs/storybook/pull/29471), thanks @valentinpalkovic!
+- Addon Test: Error when addon interactions exists - [#29434](https://github.com/storybookjs/storybook/pull/29434), thanks @valentinpalkovic!
+- Addon Test: Escape XML when converting ANSI to HTML in test errors - [#29446](https://github.com/storybookjs/storybook/pull/29446), thanks @ghengeveld!
+- Addon Test: Fix hiding stacktrace for assertion errors in test panel - [#29458](https://github.com/storybookjs/storybook/pull/29458), thanks @ghengeveld!
+- Addon Test: Improve Error Handling - [#29476](https://github.com/storybookjs/storybook/pull/29476), thanks @valentinpalkovic!
+- Addon Test: Improve postinstall script - [#29479](https://github.com/storybookjs/storybook/pull/29479), thanks @yannbf!
+- Addon Test: Improve unsupported vitest message - [#29486](https://github.com/storybookjs/storybook/pull/29486), thanks @valentinpalkovic!
+- Addon Test: Only register testing module in Vite projects - [#29472](https://github.com/storybookjs/storybook/pull/29472), thanks @yannbf!
+- Addon Test: Throttle Vitest progress updates more heavily - [#29482](https://github.com/storybookjs/storybook/pull/29482), thanks @ghengeveld!
+- Addon-docs, blocks: Prebundle dependencies - [#29301](https://github.com/storybookjs/storybook/pull/29301), thanks @JReinhold!
+- Addon-Test: Support for `@vitest/browser` v2.1.2 - [#29407](https://github.com/storybookjs/storybook/pull/29407), thanks @strozw!
+- Blocks: Prebundle `es-toolkit` - [#29259](https://github.com/storybookjs/storybook/pull/29259), thanks @JReinhold!
+- Builder-vite: Replace .at() call with [] in codegen - [#29048](https://github.com/storybookjs/storybook/pull/29048), thanks @Chudesnov!
+- CLI: Don't add `@storybook/addon-links` by default - [#29177](https://github.com/storybookjs/storybook/pull/29177), thanks @tobiasdiez!
+- CLI: Ensure `.gitignore` updated via CLI ends with a newline - [#29124](https://github.com/storybookjs/storybook/pull/29124), thanks @3w36zj6!
+- CLI: Fix `yarn` detection - [#29448](https://github.com/storybookjs/storybook/pull/29448), thanks @ndelangen!
+- CLI: Migrate from `chalk` to `picocolors` - [#28262](https://github.com/storybookjs/storybook/pull/28262), thanks @43081j!
+- CLI: Refactor NPMProxy error parsing logic - [#29459](https://github.com/storybookjs/storybook/pull/29459), thanks @yannbf!
+- ConfigFile: Fix `export { X }` parsing - [#29344](https://github.com/storybookjs/storybook/pull/29344), thanks @vctqs1!
+- Core: Add unified UI Testing Module - [#29241](https://github.com/storybookjs/storybook/pull/29241), thanks @yannbf!
+- Core: Close story status menu when selecting an item - [#29455](https://github.com/storybookjs/storybook/pull/29455), thanks @ghengeveld!
+- Core: Fix building Storybook deleting project root files - [#29371](https://github.com/storybookjs/storybook/pull/29371), thanks @JReinhold!
+- Core: Fix race condition during empty folder init - [#29490](https://github.com/storybookjs/storybook/pull/29490), thanks @valentinpalkovic!
+- Core: Make `prettier` an optional peer dependency - [#29223](https://github.com/storybookjs/storybook/pull/29223), thanks @JReinhold!
+- Core: Migrate from `express` to `polka` - [#29230](https://github.com/storybookjs/storybook/pull/29230), thanks @43081j!
+- Core: Migrate from `qs` to `picoquery` - [#28315](https://github.com/storybookjs/storybook/pull/28315), thanks @43081j!
+- Core: Open 'Component tests' addon panel when clicking a story status - [#29456](https://github.com/storybookjs/storybook/pull/29456), thanks @ghengeveld!
+- Core: Remove `handlebars` usage - [#29208](https://github.com/storybookjs/storybook/pull/29208), thanks @ndelangen!
+- Core: Remove dependence on `file-system-cache` - [#29256](https://github.com/storybookjs/storybook/pull/29256), thanks @ndelangen!
+- Core: Replace `fs-extra` with the native APIs - [#29126](https://github.com/storybookjs/storybook/pull/29126), thanks @ziebam!
+- Core: Replace `lodash` with `es-toolkit` - [#28981](https://github.com/storybookjs/storybook/pull/28981), thanks @ndelangen!
+- Core: Show checkmark icon in story status dropdown and update status label for component tests - [#29451](https://github.com/storybookjs/storybook/pull/29451), thanks @ghengeveld!
+- Core: Show tooltip on filter toggles to clarify their purpose - [#29447](https://github.com/storybookjs/storybook/pull/29447), thanks @ghengeveld!
+- Core: Track test provider state in sessionStorage - [#29450](https://github.com/storybookjs/storybook/pull/29450), thanks @ghengeveld!
+- Core: Upgrade `esbuild`, broadening version range - [#29254](https://github.com/storybookjs/storybook/pull/29254), thanks @ndelangen!
+- Dependencies: Upgrade VTA to v3.1.0 - [#29449](https://github.com/storybookjs/storybook/pull/29449), thanks @ghengeveld!
+- Dependencies: Upgrade VTA to v3.2.0 to resolve peerDep conflict - [#29461](https://github.com/storybookjs/storybook/pull/29461), thanks @ghengeveld!
+- Interactions: Escape xml of interactions errors - [#29414](https://github.com/storybookjs/storybook/pull/29414), thanks @kasperpeulen!
+- Maintenance: Fix broken and outdated documentation links - [#29412](https://github.com/storybookjs/storybook/pull/29412), thanks @jonniebigodes!
+- Manager: Add tags property to ComponentEntry objects - [#29343](https://github.com/storybookjs/storybook/pull/29343), thanks @Sidnioulz!
+- React: Prebundle all of `renderers/react`'s dependencies - [#29298](https://github.com/storybookjs/storybook/pull/29298), thanks @ndelangen!
+- Svelte: Improve argTypes inference with `svelte2tsx` - support runes - [#29423](https://github.com/storybookjs/storybook/pull/29423), thanks @JReinhold!
+- Test: Remove unused `util` dependency - [#29310](https://github.com/storybookjs/storybook/pull/29310), thanks @JReinhold!
+- UI: Brand image css class conflict causes image to resize on hot reloads - [#29129](https://github.com/storybookjs/storybook/pull/29129), thanks @ShreySinha02!
+- UI: Fix RefIndicator to use CheckIcon instead of string - [#29209](https://github.com/storybookjs/storybook/pull/29209), thanks @JSMike!
+- UI: Simple tag filtering - [#29333](https://github.com/storybookjs/storybook/pull/29333), thanks @shilman!
+- UI: Use production-mode `react` in manager - [#29197](https://github.com/storybookjs/storybook/pull/29197), thanks @ndelangen!
+- Viewport-addon: Add InitialViewportKeys type to viewport addon - [#29182](https://github.com/storybookjs/storybook/pull/29182), thanks @hyeongrok7874!
+- Vite: Add jsdoc-type-pratt-parser to `optimizeDeps` - [#29179](https://github.com/storybookjs/storybook/pull/29179), thanks @tobiasdiez!
+- Vite: Cleanup and prebundle dependencies - [#29302](https://github.com/storybookjs/storybook/pull/29302), thanks @JReinhold!
+- Webpack: Fix export 'act' (imported as 'React4') was not found in 'react' errors in webpack - [#29235](https://github.com/storybookjs/storybook/pull/29235), thanks @kasperpeulen!
+
+</details>
+
+## 8.3.6
+
+- CLI: Install Svelte CSF v5 in Svelte5 projects - [#29323](https://github.com/storybookjs/storybook/pull/29323), thanks @shilman!
+- Svelte: Add v5 stories to CLI templates - [#29382](https://github.com/storybookjs/storybook/pull/29382), thanks @JReinhold!
+
+## 8.3.5
+
+- CLI: Update the React Native init to include v8 dependencies - [#29273](https://github.com/storybookjs/storybook/pull/29273), thanks @dannyhw!
+- Vitest plugin: Fix renamed export stories - [#29250](https://github.com/storybookjs/storybook/pull/29250), thanks @shilman!
+
+## 8.3.4
+
+- Addon Test: Support story name as test description - [#29147](https://github.com/storybookjs/storybook/pull/29147), thanks @InfiniteXyy!
+- Addon-Interactions: Use ansi-to-html for colored test errors - [#29110](https://github.com/storybookjs/storybook/pull/29110), thanks @kasperpeulen!
+
+## 8.3.3
+
+- CLI: Show constraints in error when getting depndencies - [#29187](https://github.com/storybookjs/storybook/pull/29187), thanks @andrasczeh!
+- React-Vite: Downgrade react-docgen-typescript plugin - [#29184](https://github.com/storybookjs/storybook/pull/29184), thanks @shilman!
+- UI: Fix composed storybook TooltipLinkList bug where href isn't passed forward - [#29175](https://github.com/storybookjs/storybook/pull/29175), thanks @JSMike!
+
 ## 8.3.2
 
 - CLI: Fix skip-install for stable latest releases - [#29133](https://github.com/storybookjs/storybook/pull/29133), thanks @valentinpalkovic!
diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
index 692c7edaf2e9..2a2eb7b7453d 100644
--- a/CHANGELOG.prerelease.md
+++ b/CHANGELOG.prerelease.md
@@ -1,3 +1,316 @@
+## 8.5.0-beta.5
+
+- Addon Test: Only reset story count on file change when watch mode is enabled - [#30121](https://github.com/storybookjs/storybook/pull/30121), thanks @ghengeveld!
+- Build: Revert Downgrade to esbuild 0.24.0 - [#30120](https://github.com/storybookjs/storybook/pull/30120), thanks @yannbf!
+- Core: Fix `ERR_PACKAGE_PATH_NOT_EXPORTED` in `@storybook/node-logger`  - [#30093](https://github.com/storybookjs/storybook/pull/30093), thanks @JReinhold!
+- React: Use Act wrapper in Storybook for component rendering - [#30037](https://github.com/storybookjs/storybook/pull/30037), thanks @valentinpalkovic!
+- Vite: Add extra entries to `optimizeDeps` - [#30117](https://github.com/storybookjs/storybook/pull/30117), thanks @ndelangen!
+
+## 8.5.0-beta.4
+
+- Addon Themes: Deprecate useThemeParameters - [#30111](https://github.com/storybookjs/storybook/pull/30111), thanks @yannbf!
+- Build: Downgrade to esbuild 0.24.0 - [#30116](https://github.com/storybookjs/storybook/pull/30116), thanks @yannbf!
+- CLI: Re-Add Nuxt support - [#28607](https://github.com/storybookjs/storybook/pull/28607), thanks @valentinpalkovic!
+- Core: Prevent infinite rerendering caused by comparison by reference - [#30081](https://github.com/storybookjs/storybook/pull/30081), thanks @ghengeveld!
+
+## 8.5.0-beta.3
+
+- Addon A11y: Fix skipped status handling in Testing Module - [#30077](https://github.com/storybookjs/storybook/pull/30077), thanks @valentinpalkovic!
+- Core: Float context menu button on top of story titles in sidebar - [#30080](https://github.com/storybookjs/storybook/pull/30080), thanks @ghengeveld!
+- Onboarding: Replace `react-confetti` with `@neoconfetti/react` - [#30098](https://github.com/storybookjs/storybook/pull/30098), thanks @ndelangen!
+
+## 8.5.0-beta.2
+
+- Addon Test: Clear coverage data when starting or watching - [#30072](https://github.com/storybookjs/storybook/pull/30072), thanks @ghengeveld!
+- Addon Test: Improve error message on missing coverage package - [#30088](https://github.com/storybookjs/storybook/pull/30088), thanks @JReinhold!
+- UI: Fix test provider event handling on startup - [#30083](https://github.com/storybookjs/storybook/pull/30083), thanks @ghengeveld!
+- UI: Keep failing stories in the sidebar, disregarding filters - [#30086](https://github.com/storybookjs/storybook/pull/30086), thanks @JReinhold!
+
+## 8.5.0-beta.1
+
+- Addon A11y: Add conditional rendering for a11y violation number in Testing Module - [#30073](https://github.com/storybookjs/storybook/pull/30073), thanks @valentinpalkovic!
+- Addon A11y: Remove warnings API - [#30049](https://github.com/storybookjs/storybook/pull/30049), thanks @kasperpeulen!
+- Addon A11y: Show errors of axe properly - [#30050](https://github.com/storybookjs/storybook/pull/30050), thanks @kasperpeulen!
+- Addon Test: Fix printing null% for coverage - [#30061](https://github.com/storybookjs/storybook/pull/30061), thanks @ghengeveld!
+- Telemetry: Add metadata distinguishing "apps" from "design systems" - [#30070](https://github.com/storybookjs/storybook/pull/30070), thanks @tmeasday!
+
+## 8.5.0-beta.0
+
+- Automigration: Improve setup file transformation and version range handling for a11y migration - [#30060](https://github.com/storybookjs/storybook/pull/30060), thanks @valentinpalkovic!
+- Next.js: Support v15.1.1 - [#30068](https://github.com/storybookjs/storybook/pull/30068), thanks @valentinpalkovic!
+
+## 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!
+- Addon A11y: Refactor environment variable handling for Vitest integration - [#30022](https://github.com/storybookjs/storybook/pull/30022), thanks @valentinpalkovic!
+- Addon A11y: Run the a11y automigration on postInstall - [#30004](https://github.com/storybookjs/storybook/pull/30004), thanks @kasperpeulen!
+- Addon A11y: Update accessibility status handling in TestProviderRender - [#30027](https://github.com/storybookjs/storybook/pull/30027), thanks @valentinpalkovic!
+- Addon Onboarding: Prebundle react-confetti - [#29996](https://github.com/storybookjs/storybook/pull/29996), thanks @yannbf!
+- Addon Test: Correctly stop Storybook when Vitest closes - [#30012](https://github.com/storybookjs/storybook/pull/30012), thanks @JReinhold!
+- Addon Test: Show sub test provider toggle state in main testing module - [#30019](https://github.com/storybookjs/storybook/pull/30019), thanks @ghengeveld!
+- Addon Test: Wrap sub-paths exported with `require.resolve` - [#30026](https://github.com/storybookjs/storybook/pull/30026), thanks @ndelangen!
+- Core: Fix bundling of React - [#30003](https://github.com/storybookjs/storybook/pull/30003), thanks @yannbf!
+
+## 8.5.0-alpha.20
+
+- Addon Test: Add `@vitest/coverage-v8` during postinstall if no coverage reporter is installed - [#29993](https://github.com/storybookjs/storybook/pull/29993), thanks @ghengeveld!
+- Addon Test: Add support for previewHead - [#29808](https://github.com/storybookjs/storybook/pull/29808), thanks @ndelangen!
+- Addon Test: Always run Vitest in watch mode internally - [#29749](https://github.com/storybookjs/storybook/pull/29749), thanks @JReinhold!
+- Addon Test: Filter out falsy test results in TestProviderRender - [#30001](https://github.com/storybookjs/storybook/pull/30001), thanks @valentinpalkovic!
+- Addon Test: Handle undefined storyId - [#29998](https://github.com/storybookjs/storybook/pull/29998), thanks @ghengeveld!
+- Addon Test: Make component tests status row link to the story's tests panel - [#29992](https://github.com/storybookjs/storybook/pull/29992), thanks @ghengeveld!
+- Addon Test: Merge viteFinal config into vitest config - [#29806](https://github.com/storybookjs/storybook/pull/29806), thanks @ndelangen!
+- Addon Test: Prompt switch to `experimental-nextjs-vite` - [#29814](https://github.com/storybookjs/storybook/pull/29814), thanks @ndelangen!
+- Addon Test: Use ProgressSpinner for stop button in Testing Module - [#29997](https://github.com/storybookjs/storybook/pull/29997), thanks @ghengeveld!
+
+## 8.5.0-alpha.19
+
+- Addon A11y: Create a11y test provider and revamp a11y addon - [#29643](https://github.com/storybookjs/storybook/pull/29643), thanks @valentinpalkovic!
+- Addon Test: Fix indexing behavior - [#29836](https://github.com/storybookjs/storybook/pull/29836), thanks @yannbf!
+- Addon Test: Fix run request while booting or restarting Vitest - [#29829](https://github.com/storybookjs/storybook/pull/29829), thanks @ghengeveld!
+- Addon Test: Serve `staticDirs` with Vitest - [#29811](https://github.com/storybookjs/storybook/pull/29811), thanks @ghengeveld!
+- RNW-Vite: Add tsconfig path aliases support - [#29953](https://github.com/storybookjs/storybook/pull/29953), thanks @shilman!
+- RNW-Vite: Fix flow plugin including too many things - [#29952](https://github.com/storybookjs/storybook/pull/29952), thanks @dannyhw!
+
+## 8.5.0-alpha.18
+
+- Addon Test: Clarify message when `vitest` detects missing deps - [#29763](https://github.com/storybookjs/storybook/pull/29763), thanks @ndelangen!
+- Addon Test: Refactor test addon to include stories automatically - [#29367](https://github.com/storybookjs/storybook/pull/29367), thanks @yannbf!
+- Addon Test: Replace `glob` with `tinyglobby` - [#29817](https://github.com/storybookjs/storybook/pull/29817), thanks @ghengeveld!
+- Addon Test: Support Storybook environment variables in Vitest - [#29792](https://github.com/storybookjs/storybook/pull/29792), thanks @ghengeveld!
+- Composition: Hide contextMenu on composed storybooks - [#29803](https://github.com/storybookjs/storybook/pull/29803), thanks @ndelangen!
+- Vue: Properly resolve Vite plugin - [#29795](https://github.com/storybookjs/storybook/pull/29795), thanks @tobiasdiez!
+
+## 8.5.0-alpha.17
+
+- CLI: Fix new-frameworks automigration - [#29804](https://github.com/storybookjs/storybook/pull/29804), thanks @yannbf!
+- ReactVite: Add `@storybook/test` as optional peer dependency - [#29754](https://github.com/storybookjs/storybook/pull/29754), thanks @yannbf!
+- Vite: Fix preview runtime import - [#29802](https://github.com/storybookjs/storybook/pull/29802), thanks @yannbf!
+
+## 8.5.0-alpha.16
+
+- Core: Avoid getting stuck in locked state - [#29768](https://github.com/storybookjs/storybook/pull/29768), thanks @ghengeveld!
+- Core: Evaluate main config when checking 'whats new' notifications - [#29622](https://github.com/storybookjs/storybook/pull/29622), thanks @yannbf!
+- Vite: Don't prefix story import with `@fs` - [#28941](https://github.com/storybookjs/storybook/pull/28941), thanks @tobiasdiez!
+- Vite: Import preview runtime as ordinary module - [#29172](https://github.com/storybookjs/storybook/pull/29172), thanks @tobiasdiez!
+
+## 8.5.0-alpha.15
+
+- Addon Test: Context menu UI - [#29727](https://github.com/storybookjs/storybook/pull/29727), thanks @ghengeveld!
+- Addon Test: Fix error reporting for `vitest` crashes - [#29751](https://github.com/storybookjs/storybook/pull/29751), thanks @ndelangen!
+- Addon Test: Remove a11y placeholder - [#29769](https://github.com/storybookjs/storybook/pull/29769), thanks @JReinhold!
+- Core / Addon Test: Support intercepting and modifying internal test provider state updates - [#29680](https://github.com/storybookjs/storybook/pull/29680), thanks @ghengeveld!
+- Core: Disable SidebarContextMenu in static builds - [#29743](https://github.com/storybookjs/storybook/pull/29743), thanks @ndelangen!
+- Telemetry: Improve anonymous id calculation - [#29736](https://github.com/storybookjs/storybook/pull/29736), thanks @tmeasday!
+
+## 8.5.0-alpha.14
+
+- RNW-Vite: Add built-in Flow support - [#29756](https://github.com/storybookjs/storybook/pull/29756), thanks @dannyhw!
+- Test: Add coverage feature - [#29713](https://github.com/storybookjs/storybook/pull/29713), thanks @ndelangen!
+
+## 8.5.0-alpha.13
+
+- Portable stories: Support multiple annotation notations from preview - [#29733](https://github.com/storybookjs/storybook/pull/29733), thanks @yannbf!
+- React: Upgrade react-docgen-typescript to support Vite 6 - [#29724](https://github.com/storybookjs/storybook/pull/29724), thanks @yannbf!
+
+## 8.5.0-alpha.12
+
+- Core / Addon Test: Add config UI to Testing Module - [#29708](https://github.com/storybookjs/storybook/pull/29708), thanks @ghengeveld!
+- Manager: Add tags property to GroupEntry objects - [#29672](https://github.com/storybookjs/storybook/pull/29672), thanks @Sidnioulz!
+- Svelte: Support `@sveltejs/vite-plugin-svelte` v5 - [#29731](https://github.com/storybookjs/storybook/pull/29731), thanks @JReinhold!
+- Toolbars: Suppress deprecation warning when using dynamic icons - [#29545](https://github.com/storybookjs/storybook/pull/29545), thanks @ValeraS!
+
+## 8.5.0-alpha.11
+
+- Core + Addon Test: Refactor test API and fix total test count - [#29656](https://github.com/storybookjs/storybook/pull/29656), thanks @ghengeveld!
+- Core: Emit deprecated `TESTING_MODULE_RUN_ALL_REQUEST` for backward compatibility - [#29711](https://github.com/storybookjs/storybook/pull/29711), thanks @ghengeveld!
+- Frameworks: Add Vite 6 support - [#29710](https://github.com/storybookjs/storybook/pull/29710), thanks @yannbf!
+- TestAddon: Refactor UI & add config options - [#29662](https://github.com/storybookjs/storybook/pull/29662), thanks @ndelangen!
+- Vue: Fix `vue-component-meta` docgen HMR not working - [#29518](https://github.com/storybookjs/storybook/pull/29518), thanks @IonianPlayboy!
+
+## 8.5.0-alpha.10
+
+- Addon Test: Use pathe for better windows support - [#29676](https://github.com/storybookjs/storybook/pull/29676), thanks @yannbf!
+- Angular: Default to standalone components in Angular v19 - [#29677](https://github.com/storybookjs/storybook/pull/29677), thanks @ingowagner!
+
+## 8.5.0-alpha.9
+
+- Angular: Support v19 - [#29659](https://github.com/storybookjs/storybook/pull/29659), thanks @leosvelperez!
+- Manager: Fix size regression - [#29660](https://github.com/storybookjs/storybook/pull/29660), thanks @JReinhold!
+- Nextjs-Vite: Add Next.js 15 support - [#29640](https://github.com/storybookjs/storybook/pull/29640), thanks @yannbf!
+
+## 8.5.0-alpha.8
+
+- UI: Sidebar context menu addon API - [#29557](https://github.com/storybookjs/storybook/pull/29557), thanks @ndelangen!
+
+## 8.5.0-alpha.7
+
+- CLI: Disable corepack auto pin behavior - [#29627](https://github.com/storybookjs/storybook/pull/29627), thanks @yannbf!
+- RNW-Vite: Integrate with experimental-addon-test - [#29645](https://github.com/storybookjs/storybook/pull/29645), thanks @shilman!
+
+## 8.5.0-alpha.6
+
+- CLI: Fix qwik init - [#29632](https://github.com/storybookjs/storybook/pull/29632), thanks @shilman!
+- React Native Web: Add framework, CLI integration, sandboxes - [#29520](https://github.com/storybookjs/storybook/pull/29520), thanks @shilman!
+
+## 8.5.0-alpha.5
+
+- Addon Test: Only optimize react deps if applicable in vitest-plugin - [#29617](https://github.com/storybookjs/storybook/pull/29617), thanks @yannbf!
+- Addon Test: Optimize internal dependencies - [#29595](https://github.com/storybookjs/storybook/pull/29595), thanks @yannbf!
+- CLI: Fix init help for `storybook` command - [#29480](https://github.com/storybookjs/storybook/pull/29480), thanks @toothlessdev!
+- Composition: Fix composed story search - [#29453](https://github.com/storybookjs/storybook/pull/29453), thanks @jsingh0026!
+
+## 8.5.0-alpha.4
+
+- Next.js: Add support for Next 15 - [#29587](https://github.com/storybookjs/storybook/pull/29587), thanks @yannbf!
+- UI: Add Yarn to About Section - [#29225](https://github.com/storybookjs/storybook/pull/29225), thanks @grantwforsythe!
+
+## 8.5.0-alpha.3
+
+- Addon Test: Fix post-install logic for Next.js Vite framework support - [#29524](https://github.com/storybookjs/storybook/pull/29524), thanks @valentinpalkovic!
+- Core: Prevent clipping box shadow on file search modal - [#29523](https://github.com/storybookjs/storybook/pull/29523), thanks @ghengeveld!
+
+## 8.5.0-alpha.2
+
+- Addon Test: Only render the TestingModule component in development mode - [#29501](https://github.com/storybookjs/storybook/pull/29501), thanks @yannbf!
+- CLI: Fix Solid init by installing `@storybook/test` - [#29514](https://github.com/storybookjs/storybook/pull/29514), thanks @shilman!
+- Core: Add bun support with npm fallback - [#29267](https://github.com/storybookjs/storybook/pull/29267), thanks @stephenjason89!
+- Core: Shim CJS-only globals in ESM output - [#29157](https://github.com/storybookjs/storybook/pull/29157), thanks @valentinpalkovic!
+- Next.js: Fix bundled react and react-dom in monorepos - [#29444](https://github.com/storybookjs/storybook/pull/29444), thanks @sentience!
+- Next.js: Upgrade sass-loader from ^13.2.0 to ^14.2.1 - [#29264](https://github.com/storybookjs/storybook/pull/29264), thanks @HoncharenkoZhenya!
+- UI: Add support for groups to `TooltipLinkList` and use it in main menu - [#29507](https://github.com/storybookjs/storybook/pull/29507), thanks @ghengeveld!
+
+## 8.5.0-alpha.1
+
+- Core: Relax peer dep constraint of shim packages - [#29503](https://github.com/storybookjs/storybook/pull/29503), thanks @kasperpeulen!
+
+## 8.5.0-alpha.0
+
+
+## 8.4.0-beta.5
+
+- Addon Test: Improve unsupported vitest message - [#29486](https://github.com/storybookjs/storybook/pull/29486), thanks @valentinpalkovic!
+- Core: Fix race condition during empty folder init - [#29490](https://github.com/storybookjs/storybook/pull/29490), thanks @valentinpalkovic!
+
+## 8.4.0-beta.4
+
+- Addon Test: Improve Error Handling - [#29476](https://github.com/storybookjs/storybook/pull/29476), thanks @valentinpalkovic!
+- Addon Test: Improve postinstall script - [#29479](https://github.com/storybookjs/storybook/pull/29479), thanks @yannbf!
+- Addon Test: Throttle Vitest progress updates more heavily - [#29482](https://github.com/storybookjs/storybook/pull/29482), thanks @ghengeveld!
+- CLI: Refactor NPMProxy error parsing logic - [#29459](https://github.com/storybookjs/storybook/pull/29459), thanks @yannbf!
+- Core: Track test provider state in sessionStorage - [#29450](https://github.com/storybookjs/storybook/pull/29450), thanks @ghengeveld!
+- Dependencies: Upgrade VTA to v3.2.0 to resolve peerDep conflict - [#29461](https://github.com/storybookjs/storybook/pull/29461), thanks @ghengeveld!
+
+## 8.4.0-beta.3
+
+- Addon Test: Only register testing module in Vite projects - [#29472](https://github.com/storybookjs/storybook/pull/29472), thanks @yannbf!
+
+## 8.4.0-beta.2
+
+- Addon Test: Adjust file exports to be ESM/CJS compatible - [#29471](https://github.com/storybookjs/storybook/pull/29471), thanks @valentinpalkovic!
+- Core: Show tooltip on filter toggles to clarify their purpose - [#29447](https://github.com/storybookjs/storybook/pull/29447), thanks @ghengeveld!
+- Webpack: Fix export 'act' (imported as 'React4') was not found in 'react' errors in webpack - [#29235](https://github.com/storybookjs/storybook/pull/29235), thanks @kasperpeulen!
+
+## 8.4.0-beta.1
+
+- Addon Test: Error when addon interactions exists - [#29434](https://github.com/storybookjs/storybook/pull/29434), thanks @valentinpalkovic!
+- Addon Test: Escape XML when converting ANSI to HTML in test errors - [#29446](https://github.com/storybookjs/storybook/pull/29446), thanks @ghengeveld!
+- Addon Test: Fix hiding stacktrace for assertion errors in test panel - [#29458](https://github.com/storybookjs/storybook/pull/29458), thanks @ghengeveld!
+- CLI: Fix `yarn` detection - [#29448](https://github.com/storybookjs/storybook/pull/29448), thanks @ndelangen!
+- Core: Close story status menu when selecting an item - [#29455](https://github.com/storybookjs/storybook/pull/29455), thanks @ghengeveld!
+- Core: Open 'Component tests' addon panel when clicking a story status - [#29456](https://github.com/storybookjs/storybook/pull/29456), thanks @ghengeveld!
+- Core: Show checkmark icon in story status dropdown and update status label for component tests - [#29451](https://github.com/storybookjs/storybook/pull/29451), thanks @ghengeveld!
+- Dependencies: Upgrade VTA to v3.1.0 - [#29449](https://github.com/storybookjs/storybook/pull/29449), thanks @ghengeveld!
+- Maintenance: Fix broken and outdated documentation links - [#29412](https://github.com/storybookjs/storybook/pull/29412), thanks @jonniebigodes!
+
+## 8.4.0-beta.0
+
+- Core: Add unified UI Testing Module - [#29241](https://github.com/storybookjs/storybook/pull/29241), thanks @yannbf!
+- Svelte: Improve argTypes inference with `svelte2tsx` - support runes - [#29423](https://github.com/storybookjs/storybook/pull/29423), thanks @JReinhold!
+
+## 8.4.0-alpha.8
+
+- Addon-Test: Support for `@vitest/browser` v2.1.2 - [#29407](https://github.com/storybookjs/storybook/pull/29407), thanks @strozw!
+- ConfigFile: Fix `export { X }` parsing - [#29344](https://github.com/storybookjs/storybook/pull/29344), thanks @vctqs1!
+- Core: Fix building Storybook deleting project root files - [#29371](https://github.com/storybookjs/storybook/pull/29371), thanks @JReinhold!
+- Interactions: Escape xml of interactions errors - [#29414](https://github.com/storybookjs/storybook/pull/29414), thanks @kasperpeulen!
+- Svelte: Add v5 stories to CLI templates - [#29382](https://github.com/storybookjs/storybook/pull/29382), thanks @JReinhold!
+- Test: Remove unused `util` dependency - [#29310](https://github.com/storybookjs/storybook/pull/29310), thanks @JReinhold!
+- UI: Fix RefIndicator to use CheckIcon instead of string - [#29209](https://github.com/storybookjs/storybook/pull/29209), thanks @JSMike!
+- UI: Simple tag filtering - [#29333](https://github.com/storybookjs/storybook/pull/29333), thanks @shilman!
+
+## 8.4.0-alpha.7
+
+- CLI: Install Svelte CSF v5 in Svelte5 projects - [#29323](https://github.com/storybookjs/storybook/pull/29323), thanks @shilman!
+- Manager: Add tags property to ComponentEntry objects - [#29343](https://github.com/storybookjs/storybook/pull/29343), thanks @Sidnioulz!
+
+## 8.4.0-alpha.6
+
+- Addon-docs, blocks: Prebundle dependencies - [#29301](https://github.com/storybookjs/storybook/pull/29301), thanks @JReinhold!
+- React: Prebundle all of `renderers/react`'s dependencies - [#29298](https://github.com/storybookjs/storybook/pull/29298), thanks @ndelangen!
+- Vite: Cleanup and prebundle dependencies - [#29302](https://github.com/storybookjs/storybook/pull/29302), thanks @JReinhold!
+
+## 8.4.0-alpha.5
+
+- Core: Migrate from `express` to `polka` - [#29230](https://github.com/storybookjs/storybook/pull/29230), thanks @43081j!
+- Core: Remove dependence on `file-system-cache` - [#29256](https://github.com/storybookjs/storybook/pull/29256), thanks @ndelangen!
+
+## 8.4.0-alpha.4
+
+- Blocks: Prebundle `es-toolkit` - [#29259](https://github.com/storybookjs/storybook/pull/29259), thanks @JReinhold!
+- CLI: Update the React Native init to include v8 dependencies - [#29273](https://github.com/storybookjs/storybook/pull/29273), thanks @dannyhw!
+- Core: Upgrade `esbuild`, broadening version range - [#29254](https://github.com/storybookjs/storybook/pull/29254), thanks @ndelangen!
+- Vitest plugin: Fix renamed export stories - [#29250](https://github.com/storybookjs/storybook/pull/29250), thanks @shilman!
+
+## 8.4.0-alpha.3
+
+- CLI: Migrate from `chalk` to `picocolors` - [#28262](https://github.com/storybookjs/storybook/pull/28262), thanks @43081j!
+- Core: Migrate from `qs` to `picoquery` - [#28315](https://github.com/storybookjs/storybook/pull/28315), thanks @43081j!
+- UI: Brand image css class conflict causes image to resize on hot reloads - [#29129](https://github.com/storybookjs/storybook/pull/29129), thanks @ShreySinha02!
+
+## 8.4.0-alpha.2
+
+- CLI: Don't add `@storybook/addon-links` by default - [#29177](https://github.com/storybookjs/storybook/pull/29177), thanks @tobiasdiez!
+- Core: Make `prettier` an optional peer dependency - [#29223](https://github.com/storybookjs/storybook/pull/29223), thanks @JReinhold!
+- Core: Remove `handlebars` usage - [#29208](https://github.com/storybookjs/storybook/pull/29208), thanks @ndelangen!
+- Core: Replace `lodash` with `es-toolkit` - [#28981](https://github.com/storybookjs/storybook/pull/28981), thanks @ndelangen!
+- UI: Use production-mode `react` in manager - [#29197](https://github.com/storybookjs/storybook/pull/29197), thanks @ndelangen!
+
+## 8.4.0-alpha.1
+
+- Addon Test: Support story name as test description - [#29147](https://github.com/storybookjs/storybook/pull/29147), thanks @InfiniteXyy!
+- Addon-Interactions: Use ansi-to-html for colored test errors - [#29110](https://github.com/storybookjs/storybook/pull/29110), thanks @kasperpeulen!
+- Angular: Fix sourceDecorator to apply excludeDecorators flag - [#29069](https://github.com/storybookjs/storybook/pull/29069), thanks @JSMike!
+- Builder-vite: Replace .at() call with [] in codegen - [#29048](https://github.com/storybookjs/storybook/pull/29048), thanks @Chudesnov!
+- CLI: Ensure `.gitignore` updated via CLI ends with a newline - [#29124](https://github.com/storybookjs/storybook/pull/29124), thanks @3w36zj6!
+- CLI: Fix skip-install for stable latest releases - [#29133](https://github.com/storybookjs/storybook/pull/29133), thanks @valentinpalkovic!
+- CLI: Show constraints in error when getting depndencies - [#29187](https://github.com/storybookjs/storybook/pull/29187), thanks @andrasczeh!
+- Core: Do not add packageManager field to package.json during `storybook dev` - [#29152](https://github.com/storybookjs/storybook/pull/29152), thanks @valentinpalkovic!
+- Core: Do not prebundle better-opn - [#29137](https://github.com/storybookjs/storybook/pull/29137), thanks @valentinpalkovic!
+- Core: Do not prebundle jsdoc-type-pratt-parser - [#29134](https://github.com/storybookjs/storybook/pull/29134), thanks @valentinpalkovic!
+- Core: Replace `fs-extra` with the native APIs - [#29126](https://github.com/storybookjs/storybook/pull/29126), thanks @ziebam!
+- Next.js: Upgrade sass-loader from ^12 to ^13 - [#29040](https://github.com/storybookjs/storybook/pull/29040), thanks @HoncharenkoZhenya!
+- React-Vite: Downgrade react-docgen-typescript plugin - [#29184](https://github.com/storybookjs/storybook/pull/29184), thanks @shilman!
+- UI: Fix composed storybook TooltipLinkList bug where href isn't passed forward - [#29175](https://github.com/storybookjs/storybook/pull/29175), thanks @JSMike!
+- Viewport-addon: Add InitialViewportKeys type to viewport addon - [#29182](https://github.com/storybookjs/storybook/pull/29182), thanks @hyeongrok7874!
+- Vite: Add jsdoc-type-pratt-parser to `optimizeDeps` - [#29179](https://github.com/storybookjs/storybook/pull/29179), thanks @tobiasdiez!
+
 ## 8.4.0-alpha.0
 
 
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 4f65401dd4a8..6d2f04d9e253 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -5,6 +5,7 @@ Storybook is developed against a specific node version which is defined in an `.
 ## Ensure you have the required system utilities
 
 You will need to have the following installed:
+
 - git
 - node
 - yarn
@@ -20,7 +21,7 @@ You will need to have the following installed:
 
 ## Running the local development environment
 
-- Ensure if you are using Windows to use the Windows Subsystem for Linux (WSL).
+- All commands should be run in a terminal with administrator privileges in Windows environments.
 - Run `yarn start` in the root directory to run a basic test Storybook "sandbox".
 
 The `yarn start` script will generate a React Vite TypeScript sandbox with a set of test stories inside it, as well as taking all steps required to get it running (building the various packages we need etc). There is no need to run `yarn` or `yarn install` as `yarn start` will do this for you.
diff --git a/CONTRIBUTING/RELEASING.md b/CONTRIBUTING/RELEASING.md
index afc1bc377451..33a74bfdc224 100644
--- a/CONTRIBUTING/RELEASING.md
+++ b/CONTRIBUTING/RELEASING.md
@@ -19,6 +19,7 @@
   - [5. Make Manual Changes](#5-make-manual-changes)
   - [6. Merge](#6-merge)
   - [7. See the "Publish" Workflow Finish](#7-see-the-publish-workflow-finish)
+- [Releasing changes to older minor versions](#releasing-changes-to-older-minor-versions)
 - [Releasing Locally in an Emergency 🚨](#releasing-locally-in-an-emergency-)
 - [Canary Releases](#canary-releases)
   - [With GitHub UI](#with-github-ui)
@@ -330,6 +331,59 @@ Merging the pull request will trigger [the publish workflow](https://github.com/
 
 Done! 🚀
 
+## Releasing changes to older minor versions
+
+If you need to release a change to an older minor version that is not the latest, you have to do it manually, locally. The process is described below, with an example of releasing a new `v8.3.7` in a situation where `8.4.0` is currently the latest version.
+
+1. Checkout the _existing_ tag that matches the latest minor release you want to bump, and create a new branch from it. In this case, we want to do:
+    1. `git fetch --all --tags`
+    2. `git checkout tags/v8.3.6 -b patch-8-3-7`
+2. Make the changes you need to, most likely cherry-picking commits from the fix you need to back-port.
+3. Run `yarn install` in `scripts` and `code`
+4. Build all packages in `code` with `yarn task --task compile --no-link`
+5. Commit and push your changes.
+6. Trigger _daily_ CI manually on your branch:
+    1. Open [CircleCI](https://app.circleci.com/pipelines/github/storybookjs/storybook) and click "Trigger Pipeline" on the top right corner of the page.
+    2. Set the following configuration options:
+        - Pipeline: _"storybook default"_
+        - Config Source: _"storybook"_
+        - Branch: Your branch, eg. `patch-8-3-7`
+    3. Add a parameter, with _"name"_ `workflow`, _"value"_ `daily`
+7. Wait for CI to finish successfully.
+8. Bump all package versions:
+    1. `cd scripts`
+    2. `yarn release:version --release-type patch`
+9.  Commit with `git commit -m "Bump version from <CURRENT_VERSION> to <NEXT_VERSION> MANUALLY"`
+10. Add a new entry to `CHANGELOG.md`, describing your changes
+11. Commit with `git commit -m "Update CHANGELOG.md with <NEXT_VERSION> MANUALLY"`
+12. Ensure you have the correct write permissions for all the Storybook npm packages. You need to be an admin of the _storybook_ org, and the packages that are not in the org. The simplest way to check this is to ensure you can see the _"Settings"_ tab in the following packages:
+    1.  [`@storybook/react-vite`](https://www.npmjs.com/package/@storybook/react-vite/access)
+    2.  [`storybook`](https://www.npmjs.com/package/storybook/access)
+    3.  [`sb`](https://www.npmjs.com/package/sb/access)
+    4.  [`create-storybook`](https://www.npmjs.com/package/create-storybook/access)
+13. Get your npm access token or generate a new one at https://www.npmjs.com/settings/your-username/tokens. Remember to give it access to the `storybook` org and the packages not in the org, as listed above.
+14. Publish all packages with `YARN_NPM_AUTH_TOKEN=<NPM_TOKEN> yarn release:publish --tag tag-for-publishing-older-releases --verbose`
+    - It goes through all packages and publishes them. If any number of packages fails to publish, it will retry 5 times, skipping those that have already been published.
+15. Confirm the new version has been released on npm with the tag `tag-for-publishing-older-releases`:
+    1. [`@storybook/react-vite`](https://www.npmjs.com/package/@storybook/react-vite?activeTab=versions)
+    2. [`storybook`](https://www.npmjs.com/package/storybook?activeTab=versions)
+    3. [`sb`](https://www.npmjs.com/package/sb?activeTab=versions)
+    4. [`create-storybook`](https://www.npmjs.com/package/create-storybook?activeTab=versions)
+16. Push
+17. Manually create a GitHub Release at https://github.com/storybookjs/storybook/releases/new with:
+    1.  Create new tag: `v<VERSION>` (e.g., `v8.3.7`)
+    2.  Target: your branch (e.g., `patch-8-3-7`)
+    3.  Previous tag: `v<PREVIOUS_VERSION>` (e.g., `v8.3.6`)
+    4.  Title: `v<VERSION>` (e.g., `v8.3.7`)
+    5.  Description: The content you added to `CHANGELOG.md`
+    6.  Untick _"Set as the latest release"_
+18. Cherry-pick your changelog changes into `next`, so they are actually visible 
+    1.  Checkout the `next` branch
+    2.  Cherry-pick the commit you created with your changelog modifications
+    3.  Push
+
+Done. 🎉
+
 ## Releasing Locally in an Emergency 🚨
 
 Things can fail, code can break, and bugs can exist. When automation is broken, there may be a need for an emergency escape hatch to release new fixes. In such a situation, it's valid to run the whole release process locally instead of relying on pull requests and workflows. You don't need to create pull requests or split preparation and publishing; you can do it all at once, but make sure you still follow the correct branching strategy.
diff --git a/MIGRATION.md b/MIGRATION.md
index d63cd568816f..7ab60984a274 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1,5 +1,11 @@
 <h1>Migration</h1>
 
+- [From version 8.4.x to 8.5.x](#from-version-84x-to-85x)
+  - [Introducing features.developmentModeForBuild](#introducing-featuresdevelopmentmodeforbuild)
+  - [Added source code panel to docs](#added-source-code-panel-to-docs)
+  - [Addon-a11y: Component test integration](#addon-a11y-component-test-integration)
+  - [Addon-a11y: Deprecated `parameters.a11y.manual`](#addon-a11y-deprecated-parametersa11ymanual)
+  - [Indexing behavior of @storybook/experimental-addon-test is changed](#indexing-behavior-of-storybookexperimental-addon-test-is-changed)
 - [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)
@@ -105,17 +111,17 @@
     - [Tab addons cannot manually route, Tool addons can filter their visibility via tabId](#tab-addons-cannot-manually-route-tool-addons-can-filter-their-visibility-via-tabid)
     - [Removed `config` preset](#removed-config-preset-1)
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
-    - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
-    - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
-    - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated)
-    - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
-    - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react)
+  - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
+  - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
+  - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated)
+  - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
+  - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react)
 - [From version 7.4.0 to 7.5.0](#from-version-740-to-750)
-    - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
-    - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
+  - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
+  - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
 - [From version 7.0.0 to 7.2.0](#from-version-700-to-720)
-    - [Addon API is more type-strict](#addon-api-is-more-type-strict)
-    - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated)
+  - [Addon API is more type-strict](#addon-api-is-more-type-strict)
+  - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated)
 - [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
   - [7.0 breaking changes](#70-breaking-changes)
     - [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below)
@@ -141,7 +147,7 @@
     - [Deploying build artifacts](#deploying-build-artifacts)
       - [Dropped support for file URLs](#dropped-support-for-file-urls)
       - [Serving with nginx](#serving-with-nginx)
-      - [Ignore story files from node\_modules](#ignore-story-files-from-node_modules)
+      - [Ignore story files from node_modules](#ignore-story-files-from-node_modules)
   - [7.0 Core changes](#70-core-changes)
     - [7.0 feature flags removed](#70-feature-flags-removed)
     - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates)
@@ -155,7 +161,7 @@
     - [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default)
   - [7.0 Vite changes](#70-vite-changes)
     - [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically)
-    - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
+    - [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
   - [7.0 Webpack changes](#70-webpack-changes)
     - [Webpack4 support discontinued](#webpack4-support-discontinued)
     - [Babel mode v7 exclusively](#babel-mode-v7-exclusively)
@@ -167,6 +173,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)
     - [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)
@@ -205,7 +212,7 @@
     - [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration)
     - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
     - [Autoplay in docs](#autoplay-in-docs)
-    - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global)
+    - [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global)
   - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes)
     - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default)
     - [`Story` type deprecated](#story-type-deprecated)
@@ -418,6 +425,69 @@
   - [Packages renaming](#packages-renaming)
   - [Deprecated embedded addons](#deprecated-embedded-addons)
 
+## From version 8.4.x to 8.5.x
+
+### Introducing features.developmentModeForBuild
+
+As part of our ongoing efforts to improve the testability and debuggability of Storybook, we are introducing a new feature flag: `developmentModeForBuild`. This feature flag allows you to set `process.env.NODE_ENV` to `development` in built Storybooks, enabling development-related optimizations that are typically disabled in production builds.
+
+In development mode, React and other libraries often include additional checks and warnings that help catch potential issues early. These checks are usually stripped out in production builds to optimize performance. However, when running tests or debugging issues in a built Storybook, having these additional checks can be incredibly valuable. One such feature is React's `act`, which ensures that all updates related to a test are processed and applied before making assertions. `act` is crucial for reliable and predictable test results, but it only works correctly when `NODE_ENV` is set to `development`.
+
+```js
+// main.js
+export default {
+  features: {
+    developmentModeForBuild: true,
+  },
+};
+```
+
+### 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).
+
+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: {
+    docs: {
+      codePanel: false,
+    },
+  },
+};
+```
+
+### Addon-a11y: Component test integration
+
+In Storybook 8.4, we introduced the [Test addon](https://storybook.js.org/docs/writing-tests/test-addon) (`@storybook/experimental-addon-test`). Powered by Vitest under the hood, this addon lets you watch, run, and debug your component tests directly in Storybook.
+
+In Storybook 8.5, we revamped the [Accessibility addon](https://storybook.js.org/docs/writing-tests/accessibility-testing) (`@storybook/addon-a11y`) to integrate it with the component tests feature. This means you can now extend your component tests to include accessibility tests.
+
+If you upgrade to Storybook 8.5 via `npx storybook@latest upgrade`, the Accessibility addon will be automatically configured to work with the component tests. However, if you're upgrading manually and you have the Test addon installed, adjust your configuration as follows:
+
+```diff
+// .storybook/vitest.setup.ts
+...
++import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
+
+const annotations = setProjectAnnotations([
+  previewAnnotations,
++ a11yAddonAnnotations,
+]);
+
+// Run Storybook's beforeAll hook
+beforeAll(annotations.beforeAll);
+```
+
+### Addon-a11y: Deprecated `parameters.a11y.manual`
+
+We have deprecated `parameters.a11y.manual` in 8.5. Please use `globals.a11y.manual` instead.
+
+### Indexing behavior of @storybook/experimental-addon-test is changed
+
+The Storybook test addon used to index stories based on the `test.include` field in the Vitest config file. This caused indexing issues with Storybook, because stories could have been indexed by Storybook and not Vitest, and vice versa. Starting in Storybook 8.5.0-alpha.18, we changed the indexing behavior so that it always uses the globs defined in the `stories` field in `.storybook/main.js` for a more consistent experience. It is now discouraged to use `test.include`, please remove it.
+
 ## From version 8.2.x to 8.3.x
 
 ### Removed `experimental_SIDEBAR_BOTTOM` and deprecated `experimental_SIDEBAR_TOP` addon types
@@ -430,7 +500,7 @@ These APIs allowed addons to render arbitrary content in the Storybook sidebar.
 
 > [!NOTE]
 > You need to set the feature flag `backgroundsStoryGlobals` to `true` in your `.storybook/main.ts` to use the new format and set the value with `globals`.
-> 
+>
 > See here how to set feature flags: https://storybook.js.org/docs/api/main-config/main-config-features
 
 The `addon-backgrounds` addon now uses a new format for configuring its list of selectable backgrounds.
@@ -476,7 +546,7 @@ This locks that story to the `twitter` background, it cannot be changed by the a
 
 > [!NOTE]
 > You need to set the feature flag `viewportStoryGlobals` to `true` in your `.storybook/main.ts` to use the new format and set the value with `globals`.
-> 
+>
 > See here how to set feature flags: https://storybook.js.org/docs/api/main-config/main-config-features
 
 The `addon-viewport` addon now uses a new format for configuring its list of selectable viewports.
@@ -2579,6 +2649,15 @@ Please visit https://angular.io/guide/standalone-components#configuring-dependen
 
 The `parameters.angularLegacyRendering` option is removed. You cannot use the old legacy renderer anymore.
 
+#### Angular: Initializer functions
+
+Initializer functions using the `APP_INITIALIZER` dependency injection token only run when the component renders. To ensure an initializer function is always executed, you can adjust your `.storybook/preview.ts` and invoke it directly.
+
+```js
+myCustomInitializer();
+export default preview;
+```
+
 #### Next.js: use the `@storybook/nextjs` framework
 
 In Storybook 7.0 we introduced a convenient package that provides an out of the box experience for Next.js projects: `@storybook/nextjs`. Please see the [following resource](./code/frameworks/nextjs/README.md#getting-started) to get started with it.
diff --git a/README.md b/README.md
index e6585e83a094..aea220e8b1d8 100644
--- a/README.md
+++ b/README.md
@@ -36,7 +36,7 @@
   <a href="#sponsors">
     <img src="https://opencollective.com/storybook/tiers/sponsors/badge.svg" alt="Sponsors on Open Collective" />
   </a>
-  <a href="https://twitter.com/intent/follow?screen_name=storybookjs">
+  <a href="https://x.com/intent/follow?screen_name=storybookjs">
     <img src="https://img.shields.io/twitter/follow/storybookjs?color=blue&logo=twitter" alt="Official Twitter Handle" />
   </a>
   <a href="https://api.securityscorecards.dev/projects/github.com/storybookjs/storybook">
@@ -68,8 +68,8 @@ Storybook is a frontend workshop for building UI components and pages in isolati
 - 👥 [Community](#community)
 - 👏 [Contributing](#contributing)
   - 👨‍💻 [Development scripts](#development-scripts)
-  - 💵 [Backers](#backers)
   - 💸 [Sponsors](#sponsors)
+  - 💵 [Backers](#backers)
 - :memo: [License](#license)
 
 ## Getting Started
@@ -86,7 +86,7 @@ View [Component Encyclopedia](https://storybook.js.org/showcase) to see how lead
 
 Use [storybook.new](https://storybook.new) to quickly create an example project in Stackblitz.
 
-Storybook comes with a lot of [addons](https://storybook.js.org/docs/react/configure/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile.
+Storybook comes with a lot of [addons](https://storybook.js.org/docs/configure/user-interface/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile.
 
 ### Community
 
@@ -97,10 +97,10 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/
 ### Supported Frameworks
 
 | Renderer                                                       | Demo                                                                                                                                                                         |                                                                                                                                                       |
-|----------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------|
+| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
 | [React](code/renderers/react)                                  | [![Storybook demo](https://img.shields.io/npm/v/@storybook/react/latest?style=flat-square&color=blue&label)](https://next--630511d655df72125520f051.chromatic.com/)          | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](code/renderers/react)                                          |
 | [Angular](code/frameworks/angular/)                            | [![Storybook demo](https://img.shields.io/npm/v/@storybook/angular/latest?style=flat-square&color=blue&label)](https://next--6322ce6af69825592bbb28fc.chromatic.com/)        | [![Angular](https://img.shields.io/npm/dm/@storybook/angular?style=flat-square&color=eee)](code/frameworks/angular/)                                  |
-| [Vue 3](code/renderers/vue3)                                   | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue3/latest?style=flat-square&color=blue&label)](https://next--630513346a8e284ae244d415.chromatic.com/)            | [![Vue 3](https://img.shields.io/npm/dm/@storybook/vue3?style=flat-square&color=eee)](code/renderers/vue3/)                                                |
+| [Vue 3](code/renderers/vue3)                                   | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue3/latest?style=flat-square&color=blue&label)](https://next--630513346a8e284ae244d415.chromatic.com/)           | [![Vue 3](https://img.shields.io/npm/dm/@storybook/vue3?style=flat-square&color=eee)](code/renderers/vue3/)                                           |
 | [Web components](code/renderers/web-components)                | [![Storybook demo](https://img.shields.io/npm/v/@storybook/web-components/latest?style=flat-square&color=blue&label)](https://next--638db5bf49adfdfe8cf545e0.chromatic.com/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components?style=flat-square&color=eee)](code/renderers/web-components)                       |
 | [React Native](https://github.com/storybookjs/react-native)    | [![](https://img.shields.io/npm/v/@storybook/react-native/latest?style=flat-square&color=blue&label)](/)                                                                     | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native?style=flat-square&color=eee)](https://github.com/storybookjs/react-native)     |
 | [HTML](code/renderers/html)                                    | [![Storybook demo](https://img.shields.io/npm/v/@storybook/html/latest?style=flat-square&color=blue&label)](https://next--63dd39a158cf6fc05199b4bb.chromatic.com/)           | [![HTML](https://img.shields.io/npm/dm/@storybook/html?style=flat-square&color=eee)](code/renderers/html)                                             |
@@ -132,7 +132,7 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/
 | [storysource](code/addons/storysource/)                                   | View the code of your stories within the Storybook UI                      |
 | [viewport](code/addons/viewport/)                                         | Change display sizes and layouts for responsive components using Storybook |
 
-See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/frameworks-feature-support)
+See [Addon / Framework Support Table](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
 
 To continue improving your experience, we have to eventually deprecate or remove certain addons in favor of new and better tools.
 
@@ -156,7 +156,7 @@ If you're looking for material to use in your Storybook presentation, such as lo
 
 ## Community
 
-- Tweeting via [@storybookjs](https://twitter.com/storybookjs)
+- Tweeting via [@storybookjs](https://x.com/storybookjs)
 - Blogging at [storybook.js.org](https://storybook.js.org/blog/) and [Medium](https://medium.com/storybookjs)
 - Chatting on [Discord](https://discord.gg/storybook)
 - Videos and streams at [YouTube](https://www.youtube.com/channel/UCr7Quur3eIyA_oe8FNYexfg)
@@ -237,7 +237,6 @@ By making a recurring donation, you can support us and our work. \[[Become a bac
 
 <a href="https://opencollective.com/storybook"><img src="https://opencollective.com/storybook/tiers/backers.svg?limit=80&button=false&avatarHeight=46&width=750"></a>
 
-
 ## License
 
 [MIT](https://github.com/storybookjs/storybook/blob/main/LICENSE)
diff --git a/RESOLUTIONS.md b/RESOLUTIONS.md
index 4e2a64960edd..c89dd7ff96d4 100644
--- a/RESOLUTIONS.md
+++ b/RESOLUTIONS.md
@@ -2,10 +2,6 @@
 
 This file keeps track of any resolutions or exact versions specified in any `package.json` file. Resolutions are used to specify a specific version of a package to be used, even if a different version is specified as a dependency of another package.
 
-## code/renderers/svelte/package.json
+## path/to/package.json
 
-svelte-check@3.4.6 (bug: 3.5.x): Type issues
-
-## code/ui/components/package.json
-
-overlayscrollbars@2.2.1 (bug: 2.3.x): The Scrollbar doesn't disappear anymore by default. It might has something to do with the `scrollbars.autoHideSuspend` option, which was introduced in 2.3.0. https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars/CHANGELOG.md#230
\ No newline at end of file
+example-library@3.4.6 (bug: 3.5.x): Pinned as there is a bug in version 3.5.x that prevents foo from doing bar.
diff --git a/SECURITY.md b/SECURITY.md
index 123b5d5bbeac..ac75ea2100ff 100644
--- a/SECURITY.md
+++ b/SECURITY.md
@@ -8,6 +8,6 @@ In the event of a high-risk vulnerability, we may backport the security fixes to
 
 ## Reporting a Vulnerability
 
-To report a vulnerability, you can reach out to the maintainers directly on Twitter: https://twitter.com/storybookjs
+To report a vulnerability, you can reach out to the maintainers directly on Twitter: https://twitter.com/storybookjs or Bluesky: https://bsky.app/profile/storybook.js.org
 
 When we fix a security issue, we will post a security advisory on Github/NPM, describe the change in the [release notes](https://github.com/storybookjs/storybook/releases), and also announce notify the community on [our Discord](https://discord.gg/storybook).
diff --git a/code/.eslintrc.js b/code/.eslintrc.js
index e7294f412ede..4268ec993dd6 100644
--- a/code/.eslintrc.js
+++ b/code/.eslintrc.js
@@ -42,6 +42,13 @@ module.exports = {
     '@typescript-eslint/default-param-last': 'off',
   },
   overrides: [
+    {
+      files: ['**/templates/virtualModuleModernEntry.js'],
+      rules: {
+        'no-underscore-dangle': 'off',
+        'import/no-extraneous-dependencies': 'off',
+      },
+    },
     {
       // this package depends on a lot of peerDependencies we don't want to specify, because npm would install them
       files: ['**/frameworks/angular/template/**/*'],
diff --git a/code/.gitignore b/code/.gitignore
new file mode 100644
index 000000000000..9d3dd898a13d
--- /dev/null
+++ b/code/.gitignore
@@ -0,0 +1 @@
+vite.config.*.timestamp*
\ No newline at end of file
diff --git a/code/.prettierignore b/code/.prettierignore
index 0e000200275b..1cc00895640d 100644
--- a/code/.prettierignore
+++ b/code/.prettierignore
@@ -2,3 +2,5 @@
 
 /.nx/cache
 core/report
+
+/.nx/workspace-data
\ No newline at end of file
diff --git a/code/.storybook/bench.stories.tsx b/code/.storybook/bench.stories.tsx
new file mode 100644
index 000000000000..5f59a0550eb4
--- /dev/null
+++ b/code/.storybook/bench.stories.tsx
@@ -0,0 +1,89 @@
+import React from 'react';
+
+import type { Meta } from '@storybook/react';
+
+// @ts-expect-error - TS doesn't know about import.meta.glob from Vite
+const allMetafiles = import.meta.glob([
+  '../bench/esbuild-metafiles/**/*.json',
+  // the core metafile is too big to be loaded automatically in the iframe
+  '!../bench/esbuild-metafiles/core/core.json',
+]);
+
+const METAFILES_DIR = '../bench/esbuild-metafiles/';
+const PACKAGES_WITHOUT_ORG = ['storybook', 'sb', 'create-storybook'];
+
+// allows the metafile path to be used in the URL hash
+const safeMetafileArg = (path: string) =>
+  path
+    .replace(METAFILES_DIR, '')
+    .replaceAll('/', '__')
+    .replace(/(\w*).json/, '$1');
+
+export default {
+  title: 'Bench',
+  parameters: {
+    layout: 'fullscreen',
+    chromatic: { disableSnapshot: true },
+  },
+  args: {
+    metafile: safeMetafileArg(Object.keys(allMetafiles)[0]),
+  },
+  argTypes: {
+    metafile: {
+      options: Object.keys(allMetafiles).concat('core - core').map(safeMetafileArg).sort(),
+      mapping: Object.fromEntries(
+        Object.keys(allMetafiles).map((path) => [safeMetafileArg(path), path])
+      ),
+      control: {
+        type: 'select',
+        labels: Object.fromEntries(
+          Object.keys(allMetafiles)
+            .map((path) => {
+              const [, dirName, subEntry] = /esbuild-metafiles\/(.+)\/(.+).json/.exec(path)!;
+              const pkgName = PACKAGES_WITHOUT_ORG.includes(dirName)
+                ? dirName
+                : `@storybook/${dirName}`;
+
+              return [
+                safeMetafileArg(path),
+                subEntry !== 'metafile' ? `${pkgName} - ${subEntry}` : pkgName,
+              ];
+            })
+            .concat([['core - core', '@storybook/core - core - TOO BIG PLEASE UPLOAD MANUALLY']])
+        ),
+      },
+    },
+  },
+  loaders: [
+    async ({ args }) => {
+      if (!args.metafile) {
+        return;
+      }
+      let metafile;
+      try {
+        metafile = await allMetafiles[args.metafile]();
+      } catch (e) {
+        return;
+      }
+      const encodedMetafile = btoa(JSON.stringify(metafile));
+      return { encodedMetafile };
+    },
+  ],
+  render: (args, { loaded }) => {
+    const { encodedMetafile = '' } = loaded ?? {};
+
+    return (
+      <iframe
+        // esbuild analyzer has a hidden feature to load a base64-encoded metafile from the the URL hash
+        // see https://github.com/esbuild/esbuild.github.io/blob/ccf70086543a034495834b4135e15e91a3ffceb8/src/analyze/index.ts#L113-L116
+        src={`https://esbuild.github.io/analyze/#${encodedMetafile}`}
+        style={{ border: 'none', width: '100%', height: '100vh' }}
+        key={args.metafile} // force re-render on args change
+      />
+    );
+  },
+} satisfies Meta;
+
+export const ESBuildAnalyzer = {
+  name: 'ESBuild Metafiles',
+};
diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts
index a4cedde66608..9870741de29e 100644
--- a/code/.storybook/main.ts
+++ b/code/.storybook/main.ts
@@ -4,9 +4,11 @@ import type { StorybookConfig } from '../frameworks/react-vite';
 
 const componentsPath = join(__dirname, '../core/src/components');
 const managerApiPath = join(__dirname, '../core/src/manager-api');
+const imageContextPath = join(__dirname, '..//frameworks/nextjs/src/image-context.ts');
 
 const config: StorybookConfig = {
   stories: [
+    './*.stories.@(js|jsx|ts|tsx)',
     {
       directory: '../core/template/stories',
       titlePrefix: 'core',
@@ -79,16 +81,22 @@ const config: StorybookConfig = {
       directory: '../addons/interactions/src',
       titlePrefix: 'addons/interactions',
     },
-    // {
-    //   directory: '../addons/interactions/template/stories',
-    //   titlePrefix: 'addons/interactions',
-    // },
+    {
+      directory: '../addons/interactions/template/stories',
+      titlePrefix: 'addons/interactions/tests',
+    },
+    {
+      directory: '../addons/test/src/components',
+      titlePrefix: 'addons/test',
+    },
+    {
+      directory: '../addons/test/template/stories',
+      titlePrefix: 'addons/test',
+    },
   ],
   addons: [
-    '@storybook/addon-links',
     '@storybook/addon-themes',
     '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
     '@storybook/addon-storysource',
     '@storybook/addon-designs',
     '@storybook/experimental-addon-test',
@@ -125,6 +133,7 @@ const config: StorybookConfig = {
   features: {
     viewportStoryGlobals: true,
     backgroundsStoryGlobals: true,
+    developmentModeForBuild: true,
   },
   viteFinal: async (viteConfig, { configType }) => {
     const { mergeConfig } = await import('vite');
@@ -138,6 +147,7 @@ const config: StorybookConfig = {
                 'storybook/internal/components': componentsPath,
                 '@storybook/manager-api': managerApiPath,
                 'storybook/internal/manager-api': managerApiPath,
+                'sb-original/image-context': imageContextPath,
               }
             : {}),
         },
diff --git a/code/.storybook/manager.tsx b/code/.storybook/manager.tsx
index b6c5ed75c345..1a06234f6e2e 100644
--- a/code/.storybook/manager.tsx
+++ b/code/.storybook/manager.tsx
@@ -1,6 +1,6 @@
 import { addons } from 'storybook/internal/manager-api';
 
-import startCase from 'lodash/startCase.js';
+import { startCase } from 'es-toolkit/compat';
 
 addons.setConfig({
   sidebar: {
diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx
index 1f366074846f..23f95a0c5d5e 100644
--- a/code/.storybook/preview.tsx
+++ b/code/.storybook/preview.tsx
@@ -18,12 +18,11 @@ import { DocsContext } from '@storybook/blocks';
 import { global } from '@storybook/global';
 import type { Decorator, Loader, ReactRenderer } from '@storybook/react';
 
-import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
-
 import { DocsPageWrapper } from '../lib/blocks/src/components';
 import { isChromatic } from './isChromatic';
 
 const { document } = global;
+globalThis.CONFIG_TYPE = 'DEVELOPMENT';
 
 const ThemeBlock = styled.div<{ side: 'left' | 'right'; layout: string }>(
   {
@@ -119,8 +118,8 @@ const ThemedSetRoot = () => {
 };
 
 // eslint-disable-next-line no-underscore-dangle
-const preview = (window as any).__STORYBOOK_PREVIEW__ as PreviewWeb<ReactRenderer>;
-const channel = (window as any).__STORYBOOK_ADDONS_CHANNEL__ as Channel;
+const preview = (window as any).__STORYBOOK_PREVIEW__ as PreviewWeb<ReactRenderer> | undefined;
+const channel = (window as any).__STORYBOOK_ADDONS_CHANNEL__ as Channel | undefined;
 export const loaders = [
   /**
    * This loader adds a DocsContext to the story, which is required for the most Blocks to work. A
@@ -135,7 +134,9 @@ export const loaders = [
    * The DocsContext will then be added via the decorator below.
    */
   async ({ parameters: { relativeCsfPaths, attached = true } }) => {
-    if (!relativeCsfPaths) {
+    // __STORYBOOK_PREVIEW__ and __STORYBOOK_ADDONS_CHANNEL__ is set in the PreviewWeb constructor
+    // which isn't loaded in portable stories/vitest
+    if (!relativeCsfPaths || !preview || !channel) {
       return {};
     }
     const csfFiles = await Promise.all(
@@ -320,9 +321,9 @@ export const parameters = {
       { color: '#ff4785', title: 'Coral' },
       { color: '#1EA7FD', title: 'Ocean' },
       { color: 'rgb(252, 82, 31)', title: 'Orange' },
-      { color: 'RGBA(255, 174, 0, 0.5)', title: 'Gold' },
+      { color: 'rgba(255, 174, 0, 0.5)', title: 'Gold' },
       { color: 'hsl(101, 52%, 49%)', title: 'Green' },
-      { color: 'HSLA(179,65%,53%,0.5)', title: 'Seafoam' },
+      { color: 'hsla(179,65%,53%,0.5)', title: 'Seafoam' },
       { color: '#6F2CAC', title: 'Purple' },
       { color: '#2A0481', title: 'Ultraviolet' },
       { color: 'black' },
@@ -338,7 +339,7 @@ export const parameters = {
       '#fe4a49',
       '#FED766',
       'rgba(0, 159, 183, 1)',
-      'HSLA(240,11%,91%,0.5)',
+      'hsla(240,11%,91%,0.5)',
       'slategray',
     ],
   },
@@ -358,3 +359,5 @@ export const parameters = {
     },
   },
 };
+
+export const tags = ['test', 'vitest', '!a11ytest'];
diff --git a/code/.storybook/storybook.setup.ts b/code/.storybook/storybook.setup.ts
index 41573bb356b7..ce62499fa0a6 100644
--- a/code/.storybook/storybook.setup.ts
+++ b/code/.storybook/storybook.setup.ts
@@ -3,6 +3,11 @@ import { beforeAll, vi, expect as vitestExpect } from 'vitest';
 import { setProjectAnnotations } from '@storybook/react';
 import { userEvent as storybookEvent, expect as storybookExpect } from '@storybook/test';
 
+// eslint-disable-next-line import/namespace
+import * as testAnnotations from '@storybook/experimental-addon-test/preview';
+
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
+
 import * as coreAnnotations from '../addons/toolbars/template/stories/preview';
 import * as componentAnnotations from '../core/template/stories/preview';
 // register global components used in many stories
@@ -12,11 +17,11 @@ import * as projectAnnotations from './preview';
 vi.spyOn(console, 'warn').mockImplementation((...args) => console.log(...args));
 
 const annotations = setProjectAnnotations([
-  // @ts-expect-error check type errors later
+  a11yAddonAnnotations,
   projectAnnotations,
-  // @ts-expect-error check type errors later
   componentAnnotations,
   coreAnnotations,
+  testAnnotations,
   {
     // experiment with injecting Vitest's interactivity API over our userEvent while tests run in browser mode
     // https://vitest.dev/guide/browser/interactivity-api.html
diff --git a/code/.storybook/vitest.config.ts b/code/.storybook/vitest.config.ts
index 25a83b4396ea..4b177f409281 100644
--- a/code/.storybook/vitest.config.ts
+++ b/code/.storybook/vitest.config.ts
@@ -19,29 +19,32 @@ if (process.env.INSPECT === 'true') {
 
 export default mergeConfig(
   vitestCommonConfig,
+  // @ts-expect-error added this because of testNamePattern below
   defineProject({
     plugins: [
       import('@storybook/experimental-addon-test/vitest-plugin').then(({ storybookTest }) =>
         storybookTest({
           configDir: process.cwd(),
+          tags: {
+            include: ['vitest'],
+          },
         })
       ),
       ...extraPlugins,
     ],
     test: {
       name: 'storybook-ui',
-      include: [
-        // TODO: test all core and addon stories later
-        // './core/**/components/**/*.{story,stories}.?(c|m)[jt]s?(x)',
-        '../addons/**/src/**/*.{story,stories}.?(c|m)[jt]s?(x)',
-      ],
       exclude: [
         ...defaultExclude,
         '../node_modules/**',
         '**/__mockdata__/**',
-        // expected to fail in Vitest because of fetching /iframe.html to cause ECONNREFUSED
-        '**/Zoom.stories.tsx',
+        '../**/__mockdata__/**',
+        '**/Zoom.stories.tsx', // expected to fail in Vitest because of fetching /iframe.html to cause ECONNREFUSED
+        '**/lib/blocks/src/**', // won't work because of https://github.com/storybookjs/storybook/issues/29783
       ],
+      // TODO: bring this back once portable stories support @storybook/core/preview-api hooks
+      // @ts-expect-error this type does not exist but the property does!
+      testNamePattern: /^(?!.*(UseState)).*$/,
       browser: {
         enabled: true,
         name: 'chromium',
diff --git a/code/.yarn/patches/@testing-library-svelte-npm-4.1.0-34b7037bc0.patch b/code/.yarn/patches/@testing-library-svelte-npm-4.1.0-34b7037bc0.patch
deleted file mode 100644
index 212dfcc7d0ea..000000000000
--- a/code/.yarn/patches/@testing-library-svelte-npm-4.1.0-34b7037bc0.patch
+++ /dev/null
@@ -1,97 +0,0 @@
-diff --git a/package.json b/package.json
-index 195dac9ee7d42fdb76bb22dc37580fa0bffd4680..980ad42f41a06023f9f7e370fd382c9217c24be5 100644
---- a/package.json
-+++ b/package.json
-@@ -55,7 +55,7 @@
-     "contributors:generate": "all-contributors generate"
-   },
-   "peerDependencies": {
--    "svelte": "^3 || ^4"
-+    "svelte": "^3 || ^4 || ^5"
-   },
-   "dependencies": {
-     "@testing-library/dom": "^9.3.1"
-diff --git a/src/pure.js b/src/pure.js
-index 6d4943412448c9f310f007ca7dab9d04cef90d0d..d62f4aebeb1b23ccc3c3d82aadd67075c6507c0e 100644
---- a/src/pure.js
-+++ b/src/pure.js
-@@ -3,7 +3,7 @@ import {
-   getQueriesForElement,
-   prettyDOM
- } from '@testing-library/dom'
--import { tick } from 'svelte'
-+import { tick, mount, unmount } from 'svelte'
- 
- const containerCache = new Set()
- const componentCache = new Set()
-@@ -54,40 +54,34 @@ const render = (
-     return { props: options }
-   }
- 
--  let component = new ComponentConstructor({
-+  let component = mount(ComponentConstructor, {
-     target,
--    ...checkProps(options)
-+    ...checkProps(options),
-+    ondestroy: () => componentCache.delete(component)
-   })
- 
-   containerCache.add({ container, target, component })
-   componentCache.add(component)
- 
--  component.$$.on_destroy.push(() => {
--    componentCache.delete(component)
--  })
--
-   return {
-     container,
-     component,
-     debug: (el = container) => console.log(prettyDOM(el)),
-     rerender: (options) => {
--      if (componentCache.has(component)) component.$destroy()
-+      if (componentCache.has(component)) unmount(component)
- 
-       // eslint-disable-next-line no-new
-       component = new ComponentConstructor({
-         target,
--        ...checkProps(options)
-+        ...checkProps(options),
-+        ondestroy: () => componentCache.delete(component)
-       })
- 
-       containerCache.add({ container, target, component })
-       componentCache.add(component)
--
--      component.$$.on_destroy.push(() => {
--        componentCache.delete(component)
--      })
-     },
-     unmount: () => {
--      if (componentCache.has(component)) component.$destroy()
-+      if (componentCache.has(component)) unmount(component)
-     },
-     ...getQueriesForElement(container, queries)
-   }
-@@ -96,7 +90,7 @@ const render = (
- const cleanupAtContainer = (cached) => {
-   const { target, component } = cached
- 
--  if (componentCache.has(component)) component.$destroy()
-+  if (componentCache.has(component)) unmount(component)
- 
-   if (target.parentNode === document.body) {
-     document.body.removeChild(target)
-@@ -109,9 +103,10 @@ const cleanup = () => {
-   Array.from(containerCache.keys()).forEach(cleanupAtContainer)
- }
- 
--const act = async (fn) => {
--  if (fn) {
--    await fn()
-+const act = (fn) => {
-+  const value = fn && fn()
-+  if (value !== undefined && typeof value.then === 'function') {
-+    return value.then(() => tick())
-   }
-   return tick()
- }
diff --git a/code/__mocks__/fs.ts b/code/__mocks__/fs.ts
index 50e34e8e4ca1..f617d31141f6 100644
--- a/code/__mocks__/fs.ts
+++ b/code/__mocks__/fs.ts
@@ -19,6 +19,7 @@ export const realpathSync = vi.fn();
 export const readdir = vi.fn();
 export const readdirSync = vi.fn();
 export const readlinkSync = vi.fn();
+export const mkdirSync = vi.fn();
 
 export default {
   __setMockFiles,
@@ -29,4 +30,5 @@ export default {
   readdir,
   readdirSync,
   readlinkSync,
+  mkdirSync,
 };
diff --git a/code/addons/a11y/README.md b/code/addons/a11y/README.md
index a6c984d21f65..3f3e8e86504f 100755
--- a/code/addons/a11y/README.md
+++ b/code/addons/a11y/README.md
@@ -1,206 +1,13 @@
-# storybook-addon-a11y
+# Storybook Accessibility Addon
 
-This Storybook addon can be helpful to make your UI components more accessible.
+The @storybook/addon-a11y package provides accessibility testing for Storybook stories. It uses axe-core to run the tests.
 
-[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
+## Getting Started
 
-![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/a11y/docs/screenshot.png)
+### Add the addon to an existing Storybook
 
-## Getting started
-
-First, install the addon.
-
-```sh
-$ yarn add @storybook/addon-a11y --dev
-```
-
-Add this line to your `main.js` file (create this file inside your Storybook config directory if needed).
-
-```js
-export default {
-  addons: ['@storybook/addon-a11y'],
-};
-```
-
-And here's a sample story file to test the addon:
-
-```js
-import React from 'react';
-
-export default {
-  title: 'button',
-};
-
-export const Accessible = () => <button>Accessible button</button>;
-
-export const Inaccessible = () => (
-  <button style={{ backgroundColor: 'red', color: 'darkRed' }}>Inaccessible button</button>
-);
-```
-
-## Handling failing rules
-
-When Axe reports accessibility violations in stories, there are multiple ways to handle these failures depending on your needs.
-
-### Story-level overrides
-
-At the Story level, override rules using `parameters.a11y.config.rules`.
-
-```js
-export const InputWithoutAutofill = () => <input type="text" autocomplete="nope" />;
-
-InputWithoutAutofill.parameters = {
-  a11y: {
-    // Avoid doing this, as it will fully disable all accessibility checks for this story.
-    disable: true,
-
-    // Instead, override rules 👇
-    // axe-core configurationOptions (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#parameters-1)
-    config: {
-      rules: [
-        {
-          // You can exclude some elements from failing a specific rule:
-          id: 'autocomplete-valid',
-          selector: '*:not([autocomplete="nope"])',
-        },
-        {
-          // You can also signify that a violation will need to be fixed in the future
-          // by overriding the result of a rule to return "Needs Review"
-          // rather than "Violation" if the rule fails:
-          id: 'landmark-complementary-is-top-level',
-          reviewOnFail: true,
-        },
-      ],
-    },
-  },
-};
-```
-
-Alternatively, you can disable specific rules in a Story:
-
-```js
-export const Inaccessible = () => (
-  <button style={{ backgroundColor: 'red', color: 'darkRed' }}>Inaccessible button</button>
-);
-Inaccessible.parameters = {
-  a11y: {
-    config: {
-      rules: [{ id: 'color-contrast', enabled: false }],
-    },
-  },
-};
+```bash
+npx storybook add @storybook/addon-a11y
 ```
 
-Tip: clearly explain in a comment why a rule was overridden, it’ll help you and your team trace back why certain violations aren’t being reported or need to be addressed. For example:
-
-```js
-MyStory.parameters = {
-  a11y: {
-    config: {
-      rules: [
-        {
-          // Allow `autocomplete="nope"` on form elements,
-          // a workaround to disable autofill in Chrome.
-          // @link https://bugs.chromium.org/p/chromium/issues/detail?id=468153
-          id: 'autocomplete-valid',
-          selector: '*:not([autocomplete="nope"])',
-        },
-        {
-          // @fixme Color contrast of subdued text fails, as raised in issue #123.
-          id: 'color-contrast',
-          reviewOnFail: true,
-        },
-      ],
-    },
-  },
-};
-```
-
-### Global overrides
-
-When you want to ignore an accessibility rule or change its settings across all stories, set `parameters.a11y.config.rules` in your Storybook’s `preview.ts` file. This can be particularly useful for ignoring false positives commonly reported by Axe.
-
-```ts
-// .storybook/preview.ts
-
-export const parameters = {
-  a11y: {
-    config: {
-      rules: [
-        {
-          // This tells Axe to run the 'autocomplete-valid' rule on selectors
-          // that match '*:not([autocomplete="nope"])' (all elements except [autocomplete="nope"]).
-          // This is the safest way of ignoring a violation across all stories,
-          // as Axe will only ignore very specific elements and keep reporting
-          // violations on other elements of this rule.
-          id: 'autocomplete-valid',
-          selector: '*:not([autocomplete="nope"])',
-        },
-        {
-          // To disable a rule across all stories, set `enabled` to `false`.
-          // Use with caution: all violations of this rule will be ignored!
-          id: 'autocomplete-valid',
-          enabled: false,
-        },
-      ],
-    },
-  },
-};
-```
-
-### Disabling checks
-
-If you wish to entirely disable `a11y` checks for a subset of stories, you can control this with story parameters:
-
-```js
-export const MyNonCheckedStory = () => <SomeComponent />;
-MyNonCheckedStory.parameters = {
-  // Avoid doing this, as it fully disables all accessibility checks for this story,
-  // and consider the techniques described above.
-  a11y: { disable: true },
-};
-```
-
-## Parameters
-
-For more customizability use parameters to configure [aXe options](https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure).
-You can override these options [at story level too](https://storybook.js.org/docs/react/configure/features-and-behavior#per-story-options).
-
-```js
-import React from 'react';
-import { addDecorator, addParameters, storiesOf } from '@storybook/react';
-
-export default {
-  title: 'button',
-  parameters: {
-    a11y: {
-      // optional selector which element to inspect
-      element: '#storybook-root',
-      // axe-core configurationOptions (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#parameters-1)
-      config: {},
-      // axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter)
-      options: {},
-      // optional flag to prevent the automatic check
-      manual: true,
-    },
-  },
-};
-
-export const accessible = () => <button>Accessible button</button>;
-
-export const inaccessible = () => (
-  <button style={{ backgroundColor: 'red', color: 'darkRed' }}>Inaccessible button</button>
-);
-```
-
-## Automate accessibility tests with test runner
-
-The test runner does not apply any rules that you have set on your stories by default. You can configure the runner to correctly apply the rules by [following the guide on the Storybook docs](https://storybook.js.org/docs/writing-tests/accessibility-testing#automate-accessibility-tests-with-test-runner).
-
-## Roadmap
-
-- Make UI accessible
-- Show in story where violations are.
-- Add more example tests
-- Add tests
-- Make CI integration possible
+[More on getting started with the accessibility addon](https://storybook.js.org/docs/writing-tests/accessibility-testing#accessibility-checks-with-a11y-addon)
diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
index 82f3c87c1375..b6a82ae028fd 100644
--- a/code/addons/a11y/package.json
+++ b/code/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",
@@ -38,11 +38,22 @@
     },
     "./manager": "./dist/manager.js",
     "./register": "./dist/manager.js",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./postinstall": "./dist/postinstall.js"
   },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "preview": [
+        "dist/preview.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist/**/*",
     "README.md",
@@ -56,13 +67,17 @@
   },
   "dependencies": {
     "@storybook/addon-highlight": "workspace:*",
-    "axe-core": "^4.2.0"
+    "@storybook/test": "workspace:*",
+    "axe-core": "^4.2.0",
+    "vitest-axe": "^0.1.0"
   },
   "devDependencies": {
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "@testing-library/react": "^14.0.0",
-    "lodash": "^4.17.21",
+    "execa": "^9.5.2",
+    "picocolors": "^1.1.0",
+    "pretty-format": "^29.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-resize-detector": "^7.1.2",
@@ -84,6 +99,9 @@
     ],
     "previewEntries": [
       "./src/preview.tsx"
+    ],
+    "nodeEntries": [
+      "./src/postinstall.ts"
     ]
   },
   "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
diff --git a/code/addons/a11y/project.json b/code/addons/a11y/project.json
index 6f6ae5001641..e27e525561ad 100644
--- a/code/addons/a11y/project.json
+++ b/code/addons/a11y/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "a11y",
+  "name": "addon-a11y",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {
diff --git a/code/addons/a11y/src/a11yRunner.test.ts b/code/addons/a11y/src/a11yRunner.test.ts
index 402ff24f6cb9..ef44f367f000 100644
--- a/code/addons/a11y/src/a11yRunner.test.ts
+++ b/code/addons/a11y/src/a11yRunner.test.ts
@@ -22,7 +22,6 @@ describe('a11yRunner', () => {
     await import('./a11yRunner');
 
     expect(mockedAddons.getChannel).toHaveBeenCalled();
-    expect(mockChannel.on).toHaveBeenCalledWith(EVENTS.REQUEST, expect.any(Function));
     expect(mockChannel.on).toHaveBeenCalledWith(EVENTS.MANUAL, expect.any(Function));
   });
 });
diff --git a/code/addons/a11y/src/a11yRunner.ts b/code/addons/a11y/src/a11yRunner.ts
index 5e45a20ac7b0..be6de1be255f 100644
--- a/code/addons/a11y/src/a11yRunner.ts
+++ b/code/addons/a11y/src/a11yRunner.ts
@@ -2,70 +2,88 @@ import { addons } from 'storybook/internal/preview-api';
 
 import { global } from '@storybook/global';
 
+import type { AxeResults } from 'axe-core';
+
 import { EVENTS } from './constants';
 import type { A11yParameters } from './params';
 
 const { document } = global;
 
 const channel = addons.getChannel();
-// Holds axe core running state
-let active = false;
-// Holds latest story we requested a run
-let activeStoryId: string | undefined;
 
 const defaultParameters = { config: {}, options: {} };
 
-/** Handle A11yContext events. Because the event are sent without manual check, we split calls */
-const handleRequest = async (storyId: string, input: A11yParameters | null) => {
-  if (!input?.manual) {
-    await run(storyId, input ?? defaultParameters);
+const disabledRules = [
+  // In component testing, landmarks are not always present
+  // and the rule check can cause false positives
+  'region',
+];
+
+// A simple queue to run axe-core in sequence
+// This is necessary because axe-core is not designed to run in parallel
+const queue: (() => Promise<void>)[] = [];
+let isRunning = false;
+
+const runNext = async () => {
+  if (queue.length === 0) {
+    isRunning = false;
+    return;
+  }
+
+  isRunning = true;
+  const next = queue.shift();
+  if (next) {
+    await next();
   }
+  runNext();
 };
 
-const run = async (storyId: string, input: A11yParameters = defaultParameters) => {
-  activeStoryId = storyId;
-  try {
-    if (!active) {
-      active = true;
-      channel.emit(EVENTS.RUNNING);
-      const { default: axe } = await import('axe-core');
+export const run = async (input: A11yParameters = defaultParameters) => {
+  const { default: axe } = await import('axe-core');
 
-      const { element = '#storybook-root', config, options = {} } = input;
-      const htmlElement = document.querySelector(element as string);
+  const { element = '#storybook-root', config = {}, options = {} } = input;
+  const htmlElement = document.querySelector(element as string) ?? document.body;
 
-      if (!htmlElement) {
-        return;
-      }
+  if (!htmlElement) {
+    return;
+  }
 
-      axe.reset();
-      if (config) {
-        axe.configure(config);
-      }
+  axe.reset();
 
-      const result = await axe.run(htmlElement, options);
-
-      // Axe result contains class instances, which telejson deserializes in a
-      // way that violates:
-      //  Content Security Policy directive: "script-src 'self' 'unsafe-inline'".
-      const resultJson = JSON.parse(JSON.stringify(result));
-
-      // It's possible that we requested a new run on a different story.
-      // Unfortunately, axe doesn't support a cancel method to abort current run.
-      // We check if the story we run against is still the current one,
-      // if not, trigger a new run using the current story
-      if (activeStoryId === storyId) {
-        channel.emit(EVENTS.RESULT, resultJson);
-      } else {
-        active = false;
-        run(activeStoryId);
+  const configWithDefault = {
+    ...config,
+    rules: [...disabledRules.map((id) => ({ id, enabled: false })), ...(config?.rules ?? [])],
+  };
+
+  axe.configure(configWithDefault);
+
+  return new Promise<AxeResults>((resolve, reject) => {
+    const task = async () => {
+      try {
+        const result = await axe.run(htmlElement, options);
+        resolve(result);
+      } catch (error) {
+        reject(error);
       }
+    };
+
+    queue.push(task);
+
+    if (!isRunning) {
+      runNext();
     }
+  });
+};
+
+channel.on(EVENTS.MANUAL, async (storyId: string, input: A11yParameters = defaultParameters) => {
+  try {
+    const result = await run(input);
+    // Axe result contains class instances, which telejson deserializes in a
+    // way that violates:
+    //  Content Security Policy directive: "script-src 'self' 'unsafe-inline'".
+    const resultJson = JSON.parse(JSON.stringify(result));
+    channel.emit(EVENTS.RESULT, resultJson, storyId);
   } catch (error) {
     channel.emit(EVENTS.ERROR, error);
-  } finally {
-    active = false;
   }
-};
-
-channel.on(EVENTS.REQUEST, handleRequest);
-channel.on(EVENTS.MANUAL, run);
+});
diff --git a/code/addons/a11y/src/components/A11YPanel.stories.tsx b/code/addons/a11y/src/components/A11YPanel.stories.tsx
new file mode 100644
index 000000000000..701b5a509338
--- /dev/null
+++ b/code/addons/a11y/src/components/A11YPanel.stories.tsx
@@ -0,0 +1,222 @@
+import React from 'react';
+
+import { ManagerContext } from 'storybook/internal/manager-api';
+import { ThemeProvider, convert, themes } from 'storybook/internal/theming';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import type axe from 'axe-core';
+
+import { A11YPanel } from './A11YPanel';
+import { A11yContext } from './A11yContext';
+import type { A11yContextStore } from './A11yContext';
+
+const managerContext: any = {
+  state: {},
+  api: {
+    getDocsUrl: fn().mockName('api::getDocsUrl'),
+  },
+};
+
+const meta: Meta = {
+  title: 'A11YPanel',
+  component: A11YPanel,
+  decorators: [
+    (Story) => (
+      <ManagerContext.Provider value={managerContext}>
+        <ThemeProvider theme={convert(themes.light)}>
+          <Story />
+        </ThemeProvider>
+      </ManagerContext.Provider>
+    ),
+  ],
+} satisfies Meta<typeof A11YPanel>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const violations: axe.Result[] = [
+  {
+    id: 'aria-command-name',
+    impact: 'serious',
+    tags: ['cat.aria', 'wcag2a', 'wcag412', 'TTv5', 'TT6.a', 'EN-301-549', 'EN-9.4.1.2', 'ACT'],
+    description: 'Ensures every ARIA button, link and menuitem has an accessible name',
+    help: 'ARIA commands must have an accessible name',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.8/aria-command-name?application=axeAPI',
+    nodes: [
+      {
+        any: [
+          {
+            id: 'has-visible-text',
+            data: null,
+            relatedNodes: [],
+            impact: 'serious',
+            message: 'Element does not have text that is visible to screen readers',
+          },
+          {
+            id: 'aria-label',
+            data: null,
+            relatedNodes: [],
+            impact: 'serious',
+            message: 'aria-label attribute does not exist or is empty',
+          },
+          {
+            id: 'aria-labelledby',
+            data: null,
+            relatedNodes: [],
+            impact: 'serious',
+            message:
+              'aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty',
+          },
+          {
+            id: 'non-empty-title',
+            data: {
+              messageKey: 'noAttr',
+            },
+            relatedNodes: [],
+            impact: 'serious',
+            message: 'Element has no title attribute',
+          },
+        ],
+        all: [],
+        none: [],
+        impact: 'serious',
+        html: '<div role="button" class="css-12jpz5t">',
+        target: ['.css-12jpz5t'],
+        failureSummary:
+          'Fix any of the following:\n  Element does not have text that is visible to screen readers\n  aria-label attribute does not exist or is empty\n  aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty\n  Element has no title attribute',
+      },
+    ],
+  },
+];
+
+const Template = (args: Pick<A11yContextStore, 'results' | 'error' | 'status' | 'discrepancy'>) => (
+  <A11yContext.Provider
+    value={{
+      handleManual: fn(),
+      highlighted: [],
+      toggleHighlight: fn(),
+      clearHighlights: fn(),
+      tab: 0,
+      setTab: fn(),
+      setStatus: fn(),
+      ...args,
+    }}
+  >
+    <A11YPanel />
+  </A11yContext.Provider>
+);
+
+export const Initializing: Story = {
+  render: () => {
+    return (
+      <Template
+        results={{ passes: [], incomplete: [], violations: [] }}
+        status="initial"
+        error={null}
+        discrepancy={null}
+      />
+    );
+  },
+};
+
+export const Manual: Story = {
+  render: () => {
+    return (
+      <Template
+        results={{ passes: [], incomplete: [], violations: [] }}
+        status="manual"
+        error={null}
+        discrepancy={null}
+      />
+    );
+  },
+};
+
+export const ManualWithDiscrepancy: Story = {
+  render: () => {
+    return (
+      <Template
+        results={{ passes: [], incomplete: [], violations: [] }}
+        status="manual"
+        error={null}
+        discrepancy={'cliFailedButModeManual'}
+      />
+    );
+  },
+};
+
+export const Running: Story = {
+  render: () => {
+    return (
+      <Template
+        results={{ passes: [], incomplete: [], violations: [] }}
+        status="running"
+        error={null}
+        discrepancy={null}
+      />
+    );
+  },
+};
+
+export const ReadyWithResults: Story = {
+  render: () => {
+    return (
+      <Template
+        results={{
+          passes: [],
+          incomplete: [],
+          violations,
+        }}
+        status="ready"
+        error={null}
+        discrepancy={null}
+      />
+    );
+  },
+};
+
+export const ReadyWithResultsDiscrepancyCLIPassedBrowserFailed: Story = {
+  render: () => {
+    return (
+      <Template
+        results={{
+          passes: [],
+          incomplete: [],
+          violations,
+        }}
+        status="ready"
+        error={null}
+        discrepancy={'cliPassedBrowserFailed'}
+      />
+    );
+  },
+};
+
+export const Error: Story = {
+  render: () => {
+    return (
+      <Template
+        results={{ passes: [], incomplete: [], violations: [] }}
+        status="error"
+        error="Test error message"
+        discrepancy={null}
+      />
+    );
+  },
+};
+
+export const ErrorStateWithObject: Story = {
+  render: () => {
+    return (
+      <Template
+        results={{ passes: [], incomplete: [], violations: [] }}
+        status="error"
+        error={{ message: 'Test error object message' }}
+        discrepancy={null}
+      />
+    );
+  },
+};
diff --git a/code/addons/a11y/src/components/A11YPanel.test.tsx b/code/addons/a11y/src/components/A11YPanel.test.tsx
index a88e3b678288..22171ad99e41 100644
--- a/code/addons/a11y/src/components/A11YPanel.test.tsx
+++ b/code/addons/a11y/src/components/A11YPanel.test.tsx
@@ -1,153 +1,132 @@
 // @vitest-environment happy-dom
-import { act, cleanup, fireEvent, render, waitFor } from '@testing-library/react';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { fireEvent, render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
 
 import React from 'react';
 
-import * as api from 'storybook/internal/manager-api';
 import { ThemeProvider, convert, themes } from 'storybook/internal/theming';
 
-import { EVENTS } from '../constants';
 import { A11YPanel } from './A11YPanel';
+import { type A11yContextStore, useA11yContext } from './A11yContext';
 
-vi.mock('storybook/internal/manager-api');
-
-global.ResizeObserver = require('resize-observer-polyfill');
-
-const mockedApi = vi.mocked(api);
-
-const axeResult = {
-  incomplete: [
-    {
-      id: 'color-contrast',
-      impact: 'serious',
-      tags: ['cat.color', 'wcag2aa', 'wcag143'],
-      description:
-        'Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds',
-      help: 'Elements must have sufficient color contrast',
-      helpUrl: 'https://dequeuniversity.com/rules/axe/3.2/color-contrast?application=axeAPI',
-      nodes: [],
-    },
-  ],
-  passes: [
-    {
-      id: 'aria-allowed-attr',
-      impact: null,
-      tags: ['cat.aria', 'wcag2a', 'wcag412'],
-      description: "Ensures ARIA attributes are allowed for an element's role",
-      help: 'Elements must only use allowed ARIA attributes',
-      helpUrl: 'https://dequeuniversity.com/rules/axe/3.2/aria-allowed-attr?application=axeAPI',
-      nodes: [],
-    },
-  ],
-  violations: [
-    {
-      id: 'color-contrast',
-      impact: 'serious',
-      tags: ['cat.color', 'wcag2aa', 'wcag143'],
-      description:
-        'Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds',
-      help: 'Elements must have sufficient color contrast',
-      helpUrl: 'https://dequeuniversity.com/rules/axe/3.2/color-contrast?application=axeAPI',
-      nodes: [],
-    },
-  ],
-};
-
-function ThemedA11YPanel() {
-  return (
-    <ThemeProvider theme={convert(themes.light)}>
-      <A11YPanel />
-    </ThemeProvider>
-  );
-}
+vi.mock('./A11yContext');
+const mockedUseA11yContext = vi.mocked(useA11yContext);
 
 describe('A11YPanel', () => {
-  beforeEach(() => {
-    mockedApi.useChannel.mockReset();
-    mockedApi.useParameter.mockReset();
-    mockedApi.useStorybookState.mockReset();
-    mockedApi.useAddonState.mockReset();
-
-    mockedApi.useAddonState.mockImplementation((_, defaultState) => React.useState(defaultState));
-    mockedApi.useChannel.mockReturnValue(vi.fn());
-    mockedApi.useParameter.mockReturnValue({ manual: false });
-    const state: Partial<api.State> = { storyId: 'jest' };
-    // Lazy to mock entire state
-    mockedApi.useStorybookState.mockReturnValue(state as any);
-    mockedApi.useAddonState.mockImplementation(React.useState);
-  });
+  it('should render initializing state', () => {
+    mockedUseA11yContext.mockReturnValue({
+      results: { passes: [], incomplete: [], violations: [] },
+      status: 'initial',
+      handleManual: vi.fn(),
+      error: null,
+    } as Partial<A11yContextStore> as any);
 
-  afterEach(() => {
-    cleanup();
-  });
+    const element = render(<A11YPanel />);
 
-  it('should render', () => {
-    const { container } = render(<A11YPanel />);
-    expect(container.firstChild).toBeTruthy();
+    expect(element.getByText('Initializing...')).toBeInTheDocument();
   });
 
-  it('should register event listener on mount', () => {
-    render(<A11YPanel />);
-    expect(mockedApi.useChannel).toHaveBeenCalledWith(
-      expect.objectContaining({
-        [EVENTS.RESULT]: expect.any(Function),
-        [EVENTS.ERROR]: expect.any(Function),
-      })
+  it('should render manual state', () => {
+    const handleManual = vi.fn();
+    mockedUseA11yContext.mockReturnValue({
+      results: { passes: [], incomplete: [], violations: [] },
+      status: 'manual',
+      handleManual,
+      error: null,
+    } as Partial<A11yContextStore> as any);
+
+    const component = render(
+      <ThemeProvider theme={convert(themes.light)}>
+        <A11YPanel />
+      </ThemeProvider>
     );
-  });
 
-  it('should handle "initial" status', () => {
-    const { getByText } = render(<A11YPanel />);
-    expect(getByText(/Initializing/)).toBeTruthy();
+    expect(component.getByText('Manually run the accessibility scan.')).toBeInTheDocument();
+    const runTestButton = component.getByText('Run test');
+    expect(runTestButton).toBeInTheDocument();
+
+    fireEvent.click(runTestButton);
+    expect(handleManual).toHaveBeenCalled();
   });
 
-  it('should set running status on event', async () => {
-    const { getByText } = render(<ThemedA11YPanel />);
-    const useChannelArgs = mockedApi.useChannel.mock.calls[0][0];
-    act(() => useChannelArgs[EVENTS.RUNNING]());
-    await waitFor(() => {
-      expect(getByText(/Please wait while the accessibility scan is running/)).toBeTruthy();
-    });
+  it('should render running state', () => {
+    mockedUseA11yContext.mockReturnValue({
+      results: { passes: [], incomplete: [], violations: [] },
+      status: 'running',
+      handleManual: vi.fn(),
+      error: null,
+    } as Partial<A11yContextStore> as any);
+
+    const component = render(
+      <ThemeProvider theme={convert(themes.light)}>
+        <A11YPanel />
+      </ThemeProvider>
+    );
+
+    expect(
+      component.getByText('Please wait while the accessibility scan is running ...')
+    ).toBeInTheDocument();
   });
 
-  // TODO: The tests below are skipped because of unknown issues with ThemeProvider
-  // which cause errors like TypeError: Cannot read properties of undefined (reading 'defaultText')
-  it.skip('should handle "manual" status', async () => {
-    mockedApi.useParameter.mockReturnValue({ manual: true });
-    const { getByText } = render(<ThemedA11YPanel />);
-    await waitFor(() => {
-      expect(getByText(/Manually run the accessibility scan/)).toBeTruthy();
-    });
+  it('should render ready state with results', () => {
+    const handleManual = vi.fn();
+    mockedUseA11yContext.mockReturnValue({
+      results: {
+        passes: [{ id: 'pass1' } as any],
+        incomplete: [{ id: 'incomplete1' } as any],
+        violations: [{ id: 'violation1', nodes: [] } as any],
+      },
+      status: 'ready',
+      tab: 0,
+      handleManual,
+      highlighted: [],
+      error: null,
+    } as Partial<A11yContextStore> as any);
+
+    const component = render(
+      <ThemeProvider theme={convert(themes.light)}>
+        <A11YPanel />
+      </ThemeProvider>
+    );
+
+    expect(component.getByText('1 Violations')).toBeInTheDocument();
+    expect(component.getByText('1 Passes')).toBeInTheDocument();
+    expect(component.getByText('1 Incomplete')).toBeInTheDocument();
+
+    const rerunTestsButton = component.getByText('Rerun tests');
+    expect(rerunTestsButton).toBeInTheDocument();
+
+    fireEvent.click(rerunTestsButton);
+    expect(handleManual).toHaveBeenCalled();
   });
 
-  it.skip('should handle "running" status', async () => {
-    const emit = vi.fn();
-    mockedApi.useChannel.mockReturnValue(emit);
-    mockedApi.useParameter.mockReturnValue({ manual: true });
-    const { getByRole, getByText } = render(<ThemedA11YPanel />);
-    await waitFor(() => {
-      const button = getByRole('button', { name: 'Run test' });
-      fireEvent.click(button);
-    });
-    await waitFor(() => {
-      expect(getByText(/Please wait while the accessibility scan is running/)).toBeTruthy();
-      expect(emit).toHaveBeenCalledWith(EVENTS.MANUAL, 'jest');
-    });
+  it('should render error state', () => {
+    mockedUseA11yContext.mockReturnValue({
+      results: { passes: [], incomplete: [], violations: [] },
+      status: 'error',
+      handleManual: vi.fn(),
+      error: 'Test error message',
+    } as Partial<A11yContextStore> as any);
+
+    const component = render(<A11YPanel />);
+
+    expect(component.container).toHaveTextContent('The accessibility scan encountered an error.');
+    expect(component.container).toHaveTextContent('Test error message');
   });
 
-  it.skip('should handle "ran" status', async () => {
-    const { getByText } = render(<ThemedA11YPanel />);
-    const useChannelArgs = mockedApi.useChannel.mock.calls[0][0];
-    act(() => useChannelArgs[EVENTS.RESULT](axeResult));
-    await waitFor(
-      () => {
-        expect(getByText(/Tests completed/)).toBeTruthy();
-        expect(getByText(/Violations/)).toBeTruthy();
-        expect(getByText(/Passes/)).toBeTruthy();
-        expect(getByText(/Incomplete/)).toBeTruthy();
-      },
-      { timeout: 2000 }
+  it('should render error state with object error', () => {
+    mockedUseA11yContext.mockReturnValue({
+      results: { passes: [], incomplete: [], violations: [] },
+      status: 'error',
+      handleManual: vi.fn(),
+      error: { message: 'Test error object message' },
+    } as Partial<A11yContextStore> as any);
+
+    const component = render(<A11YPanel />);
+
+    expect(component.container).toHaveTextContent('The accessibility scan encountered an error.');
+    expect(component.container).toHaveTextContent(
+      JSON.stringify({ message: 'Test error object message' })
     );
   });
 });
diff --git a/code/addons/a11y/src/components/A11YPanel.tsx b/code/addons/a11y/src/components/A11YPanel.tsx
index 4e259c4c155a..61ea9a663af4 100644
--- a/code/addons/a11y/src/components/A11YPanel.tsx
+++ b/code/addons/a11y/src/components/A11YPanel.tsx
@@ -1,23 +1,14 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 
 import { ActionBar, ScrollArea } from 'storybook/internal/components';
-import {
-  useChannel,
-  useParameter,
-  useStorybookApi,
-  useStorybookState,
-} from 'storybook/internal/manager-api';
 import { styled } from 'storybook/internal/theming';
 
 import { CheckIcon, SyncIcon } from '@storybook/icons';
 
-import type { AxeResults } from 'axe-core';
-
-import { EVENTS } from '../constants';
-import type { A11yParameters } from '../params';
 import { useA11yContext } from './A11yContext';
 import { Report } from './Report';
 import { Tabs } from './Tabs';
+import { TestDiscrepancyMessage } from './TestDiscrepancyMessage';
 
 export enum RuleType {
   VIOLATION,
@@ -52,52 +43,8 @@ const Centered = styled.span({
   height: '100%',
 });
 
-type Status = 'initial' | 'manual' | 'running' | 'error' | 'ran' | 'ready';
-
 export const A11YPanel: React.FC = () => {
-  const { manual } = useParameter<Pick<A11yParameters, 'manual'>>('a11y', {
-    manual: false,
-  });
-  const [status, setStatus] = useState<Status>(manual ? 'manual' : 'initial');
-  const [error, setError] = React.useState<unknown>(undefined);
-  const { setResults, results } = useA11yContext();
-  const { storyId } = useStorybookState();
-  const api = useStorybookApi();
-
-  React.useEffect(() => {
-    setStatus(manual ? 'manual' : 'initial');
-  }, [manual]);
-
-  const handleResult = (axeResults: AxeResults) => {
-    setStatus('ran');
-    setResults(axeResults);
-
-    setTimeout(() => {
-      if (status === 'ran') {
-        setStatus('ready');
-      }
-    }, 900);
-  };
-
-  const handleRun = useCallback(() => {
-    setStatus('running');
-  }, []);
-
-  const handleError = useCallback((err: unknown) => {
-    setStatus('error');
-    setError(err);
-  }, []);
-
-  const emit = useChannel({
-    [EVENTS.RUNNING]: handleRun,
-    [EVENTS.RESULT]: handleResult,
-    [EVENTS.ERROR]: handleError,
-  });
-
-  const handleManual = useCallback(() => {
-    setStatus('running');
-    emit(EVENTS.MANUAL, storyId, api.getParameters(storyId, 'a11y'));
-  }, [storyId]);
+  const { results, status, handleManual, error, discrepancy } = useA11yContext();
 
   const manualActionItems = useMemo(
     () => [{ title: 'Run test', onClick: handleManual }],
@@ -111,7 +58,8 @@ export const A11YPanel: React.FC = () => {
             'Rerun tests'
           ) : (
             <>
-              <CheckIcon /> Tests completed
+              <CheckIcon style={{ marginRight: '0.4em' }} />
+              Tests completed
             </>
           ),
         onClick: handleManual,
@@ -156,33 +104,42 @@ export const A11YPanel: React.FC = () => {
       },
     ];
   }, [results]);
+
   return (
     <>
-      {status === 'initial' && <Centered>Initializing...</Centered>}
-      {status === 'manual' && (
-        <>
-          <Centered>Manually run the accessibility scan.</Centered>
-          <ActionBar key="actionbar" actionItems={manualActionItems} />
-        </>
-      )}
-      {status === 'running' && (
-        <Centered>
-          <RotatingIcon size={12} /> Please wait while the accessibility scan is running ...
-        </Centered>
-      )}
-      {(status === 'ready' || status === 'ran') && (
+      {discrepancy && <TestDiscrepancyMessage discrepancy={discrepancy} />}
+      {status === 'ready' || status === 'ran' ? (
         <>
           <ScrollArea vertical horizontal>
             <Tabs key="tabs" tabs={tabs} />
           </ScrollArea>
           <ActionBar key="actionbar" actionItems={readyActionItems} />
         </>
-      )}
-      {status === 'error' && (
-        <Centered>
-          The accessibility scan encountered an error.
-          <br />
-          {typeof error === 'string' ? error : JSON.stringify(error)}
+      ) : (
+        <Centered style={{ marginTop: discrepancy ? '1em' : 0 }}>
+          {status === 'initial' && 'Initializing...'}
+          {status === 'manual' && (
+            <>
+              <>Manually run the accessibility scan.</>
+              <ActionBar key="actionbar" actionItems={manualActionItems} />
+            </>
+          )}
+          {status === 'running' && (
+            <>
+              <RotatingIcon size={12} /> Please wait while the accessibility scan is running ...
+            </>
+          )}
+          {status === 'error' && (
+            <>
+              The accessibility scan encountered an error.
+              <br />
+              {typeof error === 'string'
+                ? error
+                : error instanceof Error
+                  ? error.toString()
+                  : JSON.stringify(error)}
+            </>
+          )}
         </Centered>
       )}
     </>
diff --git a/code/addons/a11y/src/components/A11yContext.test.tsx b/code/addons/a11y/src/components/A11yContext.test.tsx
index 1a1aab3412b2..20b5f90cc2ee 100644
--- a/code/addons/a11y/src/components/A11yContext.test.tsx
+++ b/code/addons/a11y/src/components/A11yContext.test.tsx
@@ -4,20 +4,22 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import * as React from 'react';
 
-import { STORY_CHANGED } from 'storybook/internal/core-events';
+import {
+  STORY_FINISHED,
+  STORY_RENDER_PHASE_CHANGED,
+  type StoryFinishedPayload,
+} from 'storybook/internal/core-events';
 import * as api from 'storybook/internal/manager-api';
 
-import { HIGHLIGHT } from '@storybook/addon-highlight';
-
 import type { AxeResults } from 'axe-core';
 
-import { EVENTS } from '../constants';
+import { EVENTS, TEST_PROVIDER_ID } from '../constants';
 import { A11yContextProvider, useA11yContext } from './A11yContext';
 
 vi.mock('storybook/internal/manager-api');
 const mockedApi = vi.mocked(api);
 
-const storyId = 'jest';
+const storyId = 'button--primary';
 const axeResult: Partial<AxeResults> = {
   incomplete: [
     {
@@ -56,93 +58,377 @@ const axeResult: Partial<AxeResults> = {
   ],
 };
 
-describe('A11YPanel', () => {
+describe('A11yContext', () => {
   afterEach(() => {
     cleanup();
   });
 
   const getCurrentStoryData = vi.fn();
   const getParameters = vi.fn();
-  beforeEach(() => {
-    mockedApi.useChannel.mockReset();
-    mockedApi.useStorybookApi.mockReset();
-    mockedApi.useAddonState.mockReset();
+  const getCurrentStoryStatus = vi.fn();
 
+  beforeEach(() => {
     mockedApi.useAddonState.mockImplementation((_, defaultState) => React.useState(defaultState));
     mockedApi.useChannel.mockReturnValue(vi.fn());
-    getCurrentStoryData.mockReset().mockReturnValue({ id: storyId, type: 'story' });
+    getCurrentStoryData.mockReturnValue({ id: storyId, type: 'story' });
     getParameters.mockReturnValue({});
-    mockedApi.useStorybookApi.mockReturnValue({ getCurrentStoryData, getParameters } as any);
+    getCurrentStoryStatus.mockReturnValue({ [TEST_PROVIDER_ID]: { status: 'success' } });
+    mockedApi.useStorybookApi.mockReturnValue({
+      getCurrentStoryData,
+      getParameters,
+      getCurrentStoryStatus,
+    } as any);
+    mockedApi.useParameter.mockReturnValue({ manual: false });
+    mockedApi.useStorybookState.mockReturnValue({ storyId } as any);
+    mockedApi.useGlobals.mockReturnValue([{ a11y: {} }] as any);
+
+    mockedApi.useChannel.mockClear();
+    mockedApi.useStorybookApi.mockClear();
+    mockedApi.useAddonState.mockClear();
+    mockedApi.useParameter.mockClear();
+    mockedApi.useStorybookState.mockClear();
+    mockedApi.useGlobals.mockClear();
   });
 
   it('should render children', () => {
     const { getByTestId } = render(
-      <A11yContextProvider active>
+      <A11yContextProvider>
         <div data-testid="child" />
       </A11yContextProvider>
     );
     expect(getByTestId('child')).toBeTruthy();
   });
 
-  it('should not render when inactive', () => {
+  it('should handle STORY_FINISHED event correctly', () => {
     const emit = vi.fn();
     mockedApi.useChannel.mockReturnValue(emit);
+
+    const Component = () => {
+      const { results } = useA11yContext();
+      return (
+        <>
+          {!!results.passes.length && (
+            <div data-testid="anyPassesResults">{JSON.stringify(results.passes)}</div>
+          )}
+          {!!results.incomplete.length && (
+            <div data-testid="anyIncompleteResults">{JSON.stringify(results.incomplete)}</div>
+          )}
+          {!!results.violations.length && (
+            <div data-testid="anyViolationsResults">{JSON.stringify(results.violations)}</div>
+          )}
+        </>
+      );
+    };
+
     const { queryByTestId } = render(
-      <A11yContextProvider active={false}>
-        <div data-testid="child" />
+      <A11yContextProvider>
+        <Component />
+      </A11yContextProvider>
+    );
+
+    expect(queryByTestId('anyPassesResults')).toBeFalsy();
+    expect(queryByTestId('anyIncompleteResults')).toBeFalsy();
+    expect(queryByTestId('anyViolationsResults')).toBeFalsy();
+
+    const useChannelArgs = mockedApi.useChannel.mock.calls[0][0];
+    const storyFinishedPayload: StoryFinishedPayload = {
+      storyId,
+      status: 'error',
+      reporters: [
+        {
+          type: 'a11y',
+          result: axeResult as any,
+          status: 'failed',
+          version: 1,
+        },
+      ],
+    };
+
+    act(() => useChannelArgs[STORY_FINISHED](storyFinishedPayload));
+    expect(queryByTestId('anyPassesResults')).toHaveTextContent(JSON.stringify(axeResult.passes));
+    expect(queryByTestId('anyIncompleteResults')).toHaveTextContent(
+      JSON.stringify(axeResult.incomplete)
+    );
+    expect(queryByTestId('anyViolationsResults')).toHaveTextContent(
+      JSON.stringify(axeResult.violations)
+    );
+  });
+
+  it('should set discrepancy to cliFailedButModeManual when in manual mode', () => {
+    mockedApi.useParameter.mockReturnValue({ manual: true });
+    getCurrentStoryStatus.mockReturnValue({ [TEST_PROVIDER_ID]: { status: 'error' } });
+
+    const Component = () => {
+      const { discrepancy } = useA11yContext();
+      return <div data-testid="discrepancy">{discrepancy}</div>;
+    };
+
+    const { getByTestId } = render(
+      <A11yContextProvider>
+        <Component />
+      </A11yContextProvider>
+    );
+
+    expect(getByTestId('discrepancy').textContent).toBe('cliFailedButModeManual');
+  });
+
+  it('should set discrepancy to cliFailedButModeManual when in manual mode (set via globals', () => {
+    mockedApi.useGlobals.mockReturnValue([{ a11y: { manual: true } }] as any);
+    getCurrentStoryStatus.mockReturnValue({ [TEST_PROVIDER_ID]: { status: 'error' } });
+
+    const Component = () => {
+      const { discrepancy } = useA11yContext();
+      return <div data-testid="discrepancy">{discrepancy}</div>;
+    };
+
+    const { getByTestId } = render(
+      <A11yContextProvider>
+        <Component />
+      </A11yContextProvider>
+    );
+
+    expect(getByTestId('discrepancy').textContent).toBe('cliFailedButModeManual');
+  });
+
+  it('should set discrepancy to cliPassedBrowserFailed', () => {
+    mockedApi.useParameter.mockReturnValue({ manual: true });
+    getCurrentStoryStatus.mockReturnValue({ [TEST_PROVIDER_ID]: { status: 'success' } });
+
+    const Component = () => {
+      const { discrepancy } = useA11yContext();
+      return <div data-testid="discrepancy">{discrepancy}</div>;
+    };
+
+    const { getByTestId } = render(
+      <A11yContextProvider>
+        <Component />
+      </A11yContextProvider>
+    );
+
+    const storyFinishedPayload: StoryFinishedPayload = {
+      storyId,
+      status: 'error',
+      reporters: [
+        {
+          type: 'a11y',
+          result: axeResult as any,
+          status: 'failed',
+          version: 1,
+        },
+      ],
+    };
+
+    const useChannelArgs = mockedApi.useChannel.mock.calls[0][0];
+
+    act(() => useChannelArgs[STORY_FINISHED](storyFinishedPayload));
+
+    expect(getByTestId('discrepancy').textContent).toBe('cliPassedBrowserFailed');
+  });
+
+  it('should handle STORY_RENDER_PHASE_CHANGED event correctly', () => {
+    const emit = vi.fn();
+    mockedApi.useChannel.mockReturnValue(emit);
+
+    const Component = () => {
+      const { status } = useA11yContext();
+      return <div data-testid="status">{status}</div>;
+    };
+
+    const { queryByTestId } = render(
+      <A11yContextProvider>
+        <Component />
+      </A11yContextProvider>
+    );
+
+    expect(queryByTestId('status')).toHaveTextContent('initial');
+
+    const useChannelArgs = mockedApi.useChannel.mock.calls[0][0];
+    const storyRenderPhaseChangedPayload = {
+      newPhase: 'loading',
+    };
+
+    act(() => useChannelArgs[STORY_RENDER_PHASE_CHANGED](storyRenderPhaseChangedPayload));
+
+    expect(queryByTestId('status')).toHaveTextContent('running');
+  });
+
+  it('should handle STORY_RENDER_PHASE_CHANGED event correctly when in manual mode', () => {
+    mockedApi.useParameter.mockReturnValue({ manual: true });
+
+    const emit = vi.fn();
+    mockedApi.useChannel.mockReturnValue(emit);
+
+    const Component = () => {
+      const { status } = useA11yContext();
+      return <div data-testid="status">{status}</div>;
+    };
+
+    const { queryByTestId } = render(
+      <A11yContextProvider>
+        <Component />
+      </A11yContextProvider>
+    );
+
+    expect(queryByTestId('status')).toHaveTextContent('manual');
+
+    const useChannelArgs = mockedApi.useChannel.mock.calls[0][0];
+    const storyRenderPhaseChangedPayload = {
+      newPhase: 'loading',
+    };
+
+    act(() => useChannelArgs[STORY_RENDER_PHASE_CHANGED](storyRenderPhaseChangedPayload));
+
+    expect(queryByTestId('status')).toHaveTextContent('manual');
+  });
+
+  it('should handle STORY_RENDER_PHASE_CHANGED event correctly when in manual mode (set via globals)', () => {
+    mockedApi.useGlobals.mockReturnValue([{ a11y: { manual: true } }] as any);
+
+    const emit = vi.fn();
+    mockedApi.useChannel.mockReturnValue(emit);
+
+    const Component = () => {
+      const { status } = useA11yContext();
+      return <div data-testid="status">{status}</div>;
+    };
+
+    const { queryByTestId } = render(
+      <A11yContextProvider>
+        <Component />
       </A11yContextProvider>
     );
-    expect(queryByTestId('child')).toBeFalsy();
-    expect(emit).not.toHaveBeenCalledWith(EVENTS.REQUEST);
+
+    expect(queryByTestId('status')).toHaveTextContent('manual');
+
+    const useChannelArgs = mockedApi.useChannel.mock.calls[0][0];
+    const storyRenderPhaseChangedPayload = {
+      newPhase: 'loading',
+    };
+
+    act(() => useChannelArgs[STORY_RENDER_PHASE_CHANGED](storyRenderPhaseChangedPayload));
+
+    expect(queryByTestId('status')).toHaveTextContent('manual');
   });
 
-  it('should emit request when moving from inactive to active', () => {
+  it('should handle STORY_FINISHED event with error correctly', () => {
     const emit = vi.fn();
     mockedApi.useChannel.mockReturnValue(emit);
-    const { rerender } = render(<A11yContextProvider active={false} />);
-    rerender(<A11yContextProvider active />);
-    expect(emit).toHaveBeenLastCalledWith(EVENTS.REQUEST, storyId, {});
+
+    const Component = () => {
+      const { error } = useA11yContext();
+      return <div data-testid="error">{error ? (error as any).message : 'No Error'}</div>;
+    };
+
+    const { getByTestId } = render(
+      <A11yContextProvider>
+        <Component />
+      </A11yContextProvider>
+    );
+
+    expect(getByTestId('error').textContent).toBe('No Error');
+
+    const useChannelArgs = mockedApi.useChannel.mock.calls[0][0];
+    const storyFinishedPayload: StoryFinishedPayload = {
+      storyId,
+      status: 'error',
+      reporters: [
+        {
+          status: 'failed',
+          version: 1,
+          type: 'a11y',
+          result: { error: new Error('Test error') } as any,
+        },
+      ],
+    };
+
+    act(() => useChannelArgs[STORY_FINISHED](storyFinishedPayload));
+    expect(getByTestId('error').textContent).toBe('Test error');
   });
 
-  it('should emit highlight with no values when inactive', () => {
+  it('should handle manual run correctly', () => {
     const emit = vi.fn();
     mockedApi.useChannel.mockReturnValue(emit);
-    const { rerender } = render(<A11yContextProvider active />);
-    rerender(<A11yContextProvider active={false} />);
-    expect(emit).toHaveBeenLastCalledWith(
-      HIGHLIGHT,
-      expect.objectContaining({
-        color: expect.any(String),
-        elements: [],
-      })
+
+    const Component = () => {
+      const { handleManual } = useA11yContext();
+      return (
+        <button onClick={handleManual} data-testid="manualRunButton">
+          Run Manual
+        </button>
+      );
+    };
+
+    const { getByTestId } = render(
+      <A11yContextProvider>
+        <Component />
+      </A11yContextProvider>
     );
+
+    act(() => {
+      getByTestId('manualRunButton').click();
+    });
+
+    expect(emit).toHaveBeenCalledWith(EVENTS.MANUAL, storyId, expect.any(Object));
   });
 
-  it('should emit highlight with no values when story changed', () => {
+  it('should toggle highlight correctly', () => {
     const Component = () => {
-      const { results, setResults } = useA11yContext();
-      // As any because of unit tests...
-      React.useEffect(() => setResults(axeResult as any), []);
+      const { toggleHighlight, highlighted } = useA11yContext();
       return (
         <>
-          {!!results.passes.length && <div data-testid="anyPassesResults" />}
-          {!!results.incomplete.length && <div data-testid="anyIncompleteResults" />}
-          {!!results.violations.length && <div data-testid="anyViolationsResults" />}
+          <button onClick={() => toggleHighlight(['element1'], true)} data-testid="highlightButton">
+            Highlight
+          </button>
+          <div data-testid="highlightedElements">{highlighted.join(',')}</div>
         </>
       );
     };
-    const { queryByTestId } = render(
-      <A11yContextProvider active>
+
+    const { getByTestId } = render(
+      <A11yContextProvider>
         <Component />
       </A11yContextProvider>
     );
-    expect(queryByTestId('anyPassesResults')).toBeTruthy();
-    expect(queryByTestId('anyIncompleteResults')).toBeTruthy();
-    expect(queryByTestId('anyViolationsResults')).toBeTruthy();
-    const useChannelArgs = mockedApi.useChannel.mock.calls[0][0];
-    act(() => useChannelArgs[STORY_CHANGED]());
-    expect(queryByTestId('anyPassesResults')).toBeFalsy();
-    expect(queryByTestId('anyIncompleteResults')).toBeFalsy();
-    expect(queryByTestId('anyViolationsResults')).toBeFalsy();
+
+    act(() => {
+      getByTestId('highlightButton').click();
+    });
+
+    expect(getByTestId('highlightedElements').textContent).toBe('element1');
+  });
+
+  it('should clear highlights correctly', () => {
+    const Component = () => {
+      const { toggleHighlight, clearHighlights, highlighted } = useA11yContext();
+      return (
+        <>
+          <button onClick={() => toggleHighlight(['element1'], true)} data-testid="highlightButton">
+            Highlight
+          </button>
+          <button onClick={clearHighlights} data-testid="clearHighlightsButton">
+            Clear Highlights
+          </button>
+          <div data-testid="highlightedElements">{highlighted.join(',')}</div>
+        </>
+      );
+    };
+
+    const { getByTestId } = render(
+      <A11yContextProvider>
+        <Component />
+      </A11yContextProvider>
+    );
+
+    act(() => {
+      getByTestId('highlightButton').click();
+    });
+
+    expect(getByTestId('highlightedElements').textContent).toBe('element1');
+
+    act(() => {
+      getByTestId('clearHighlightsButton').click();
+    });
+
+    expect(getByTestId('highlightedElements').textContent).toBe('');
   });
 });
diff --git a/code/addons/a11y/src/components/A11yContext.tsx b/code/addons/a11y/src/components/A11yContext.tsx
index 5dd11bd456f2..53f2a1e36208 100644
--- a/code/addons/a11y/src/components/A11yContext.tsx
+++ b/code/addons/a11y/src/components/A11yContext.tsx
@@ -1,14 +1,30 @@
-import * as React from 'react';
-
-import { STORY_CHANGED, STORY_RENDERED } from 'storybook/internal/core-events';
-import { useAddonState, useChannel, useStorybookApi } from 'storybook/internal/manager-api';
+import type { FC, PropsWithChildren } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+
+import {
+  STORY_FINISHED,
+  STORY_RENDER_PHASE_CHANGED,
+  type StoryFinishedPayload,
+} from 'storybook/internal/core-events';
+import {
+  useAddonState,
+  useChannel,
+  useGlobals,
+  useParameter,
+  useStorybookApi,
+  useStorybookState,
+} from 'storybook/internal/manager-api';
+import type { Report } from 'storybook/internal/preview-api';
 import { convert, themes } from 'storybook/internal/theming';
 
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
-import type { Result } from 'axe-core';
+import type { AxeResults, Result } from 'axe-core';
 
-import { ADDON_ID, EVENTS } from '../constants';
+import { ADDON_ID, EVENTS, TEST_PROVIDER_ID } from '../constants';
+import type { A11yParameters } from '../params';
+import type { A11YReport } from '../types';
+import type { TestDiscrepancy } from './TestDiscrepancyMessage';
 
 export interface Results {
   passes: Result[];
@@ -16,14 +32,18 @@ export interface Results {
   incomplete: Result[];
 }
 
-interface A11yContextStore {
+export interface A11yContextStore {
   results: Results;
-  setResults: (results: Results) => void;
   highlighted: string[];
   toggleHighlight: (target: string[], highlight: boolean) => void;
   clearHighlights: () => void;
   tab: number;
   setTab: (index: number) => void;
+  status: Status;
+  setStatus: (status: Status) => void;
+  error: unknown;
+  handleManual: () => void;
+  discrepancy: TestDiscrepancy;
 }
 
 const colorsByType = [
@@ -32,97 +52,187 @@ const colorsByType = [
   convert(themes.light).color.warning, // INCOMPLETION,
 ];
 
-export const A11yContext = React.createContext<A11yContextStore>({
+export const A11yContext = createContext<A11yContextStore>({
   results: {
     passes: [],
     incomplete: [],
     violations: [],
   },
-  setResults: () => {},
   highlighted: [],
   toggleHighlight: () => {},
   clearHighlights: () => {},
   tab: 0,
   setTab: () => {},
+  setStatus: () => {},
+  status: 'initial',
+  error: undefined,
+  handleManual: () => {},
+  discrepancy: null,
 });
 
-interface A11yContextProviderProps {
-  active: boolean;
-}
-
 const defaultResult = {
   passes: [],
   incomplete: [],
   violations: [],
 };
 
-export const A11yContextProvider: React.FC<React.PropsWithChildren<A11yContextProviderProps>> = ({
-  active,
-  ...props
-}) => {
-  const [results, setResults] = useAddonState<Results>(ADDON_ID, defaultResult);
-  const [tab, setTab] = React.useState(0);
-  const [highlighted, setHighlighted] = React.useState<string[]>([]);
+type Status = 'initial' | 'manual' | 'running' | 'error' | 'ran' | 'ready';
+
+export const A11yContextProvider: FC<PropsWithChildren> = (props) => {
+  const parameters = useParameter<A11yParameters>('a11y', {
+    manual: false,
+  });
+
+  const [globals] = useGlobals() ?? [];
+
+  const getInitialStatus = useCallback((manual = false) => (manual ? 'manual' : 'initial'), []);
+
+  const manual = useMemo(
+    () => globals?.a11y?.manual ?? parameters.manual ?? false,
+    [globals?.a11y?.manual, parameters.manual]
+  );
+
   const api = useStorybookApi();
-  const storyEntry = api.getCurrentStoryData();
+  const [results, setResults] = useAddonState<Results>(ADDON_ID, defaultResult);
+  const [tab, setTab] = useState(0);
+  const [error, setError] = React.useState<unknown>(undefined);
+  const [status, setStatus] = useState<Status>(getInitialStatus(manual));
+  const [highlighted, setHighlighted] = useState<string[]>([]);
 
-  const handleToggleHighlight = React.useCallback((target: string[], highlight: boolean) => {
+  const { storyId } = useStorybookState();
+  const storyStatus = api.getCurrentStoryStatus();
+
+  const handleToggleHighlight = useCallback((target: string[], highlight: boolean) => {
     setHighlighted((prevHighlighted) =>
       highlight
         ? [...prevHighlighted, ...target]
         : prevHighlighted.filter((t) => !target.includes(t))
     );
   }, []);
-  const handleRun = (renderedStoryId: string) => {
-    emit(EVENTS.REQUEST, renderedStoryId, api.getParameters(renderedStoryId, 'a11y'));
-  };
-  const handleClearHighlights = React.useCallback(() => setHighlighted([]), []);
-  const handleSetTab = React.useCallback((index: number) => {
-    handleClearHighlights();
-    setTab(index);
-  }, []);
 
-  const handleReset = React.useCallback(() => {
-    setTab(0);
-    setResults(defaultResult);
-    // Highlights is cleared by addon-highlight
+  const handleClearHighlights = useCallback(() => setHighlighted([]), []);
+
+  const handleSetTab = useCallback(
+    (index: number) => {
+      handleClearHighlights();
+      setTab(index);
+    },
+    [handleClearHighlights]
+  );
+
+  const handleError = useCallback((err: unknown) => {
+    setStatus('error');
+    setError(err);
   }, []);
 
-  const emit = useChannel({
-    [STORY_RENDERED]: handleRun,
-    [STORY_CHANGED]: handleReset,
-  });
+  const handleResult = useCallback(
+    (axeResults: AxeResults, id: string) => {
+      if (storyId === id) {
+        setStatus('ran');
+        setResults(axeResults);
+
+        setTimeout(() => {
+          if (status === 'ran') {
+            setStatus('ready');
+          }
+        }, 900);
+      }
+    },
+    [setResults, status, storyId]
+  );
+
+  const handleReport = useCallback(
+    ({ reporters }: StoryFinishedPayload) => {
+      const a11yReport = reporters.find((r) => r.type === 'a11y') as Report<A11YReport> | undefined;
+
+      if (a11yReport) {
+        if ('error' in a11yReport.result) {
+          handleError(a11yReport.result.error);
+        } else {
+          handleResult(a11yReport.result, storyId);
+        }
+      }
+    },
+    [handleError, handleResult, storyId]
+  );
+
+  const handleReset = useCallback(
+    ({ newPhase }: { newPhase: string }) => {
+      if (newPhase === 'loading') {
+        setResults(defaultResult);
+        if (manual) {
+          setStatus('manual');
+        } else {
+          setStatus('running');
+        }
+      }
+    },
+    [manual, setResults]
+  );
 
-  React.useEffect(() => {
+  const emit = useChannel(
+    {
+      [EVENTS.RESULT]: handleResult,
+      [EVENTS.ERROR]: handleError,
+      [STORY_RENDER_PHASE_CHANGED]: handleReset,
+      [STORY_FINISHED]: handleReport,
+    },
+    [handleReset, handleReport, handleReset, handleError, handleResult]
+  );
+
+  const handleManual = useCallback(() => {
+    setStatus('running');
+    emit(EVENTS.MANUAL, storyId, parameters);
+  }, [emit, parameters, storyId]);
+
+  useEffect(() => {
+    setStatus(getInitialStatus(manual));
+  }, [getInitialStatus, manual]);
+
+  useEffect(() => {
     emit(HIGHLIGHT, { elements: highlighted, color: colorsByType[tab] });
-  }, [highlighted, tab]);
+  }, [emit, highlighted, tab]);
 
-  React.useEffect(() => {
-    if (active && storyEntry?.type === 'story') {
-      handleRun(storyEntry.id);
-    } else {
-      handleClearHighlights();
+  const discrepancy: TestDiscrepancy = useMemo(() => {
+    const storyStatusA11y = storyStatus?.[TEST_PROVIDER_ID]?.status;
+
+    if (storyStatusA11y) {
+      if (storyStatusA11y === 'success' && results.violations.length > 0) {
+        return 'cliPassedBrowserFailed';
+      }
+
+      if (storyStatusA11y === 'error' && results.violations.length === 0) {
+        if (status === 'ready' || status === 'ran') {
+          return 'browserPassedCliFailed';
+        }
+
+        if (status === 'manual') {
+          return 'cliFailedButModeManual';
+        }
+      }
     }
-  }, [active, handleClearHighlights, emit, storyEntry]);
 
-  if (!active) {
     return null;
-  }
+  }, [results.violations.length, status, storyStatus]);
 
   return (
     <A11yContext.Provider
       value={{
         results,
-        setResults,
         highlighted,
         toggleHighlight: handleToggleHighlight,
         clearHighlights: handleClearHighlights,
         tab,
         setTab: handleSetTab,
+        status,
+        setStatus,
+        error,
+        handleManual,
+        discrepancy,
       }}
       {...props}
     />
   );
 };
 
-export const useA11yContext = () => React.useContext(A11yContext);
+export const useA11yContext = () => useContext(A11yContext);
diff --git a/code/addons/a11y/src/components/Report/HighlightToggle.test.tsx b/code/addons/a11y/src/components/Report/HighlightToggle.test.tsx
index 4bfc197395a9..dcacd643b414 100644
--- a/code/addons/a11y/src/components/Report/HighlightToggle.test.tsx
+++ b/code/addons/a11y/src/components/Report/HighlightToggle.test.tsx
@@ -6,7 +6,7 @@ import React from 'react';
 
 import type { NodeResult } from 'axe-core';
 
-import { A11yContext } from '../A11yContext';
+import { A11yContext, type A11yContextStore } from '../A11yContext';
 import HighlightToggle from './HighlightToggle';
 
 const nodeResult = (target: string): NodeResult => ({
@@ -17,13 +17,17 @@ const nodeResult = (target: string): NodeResult => ({
   none: [],
 });
 
-const defaultProviderValue = {
+const defaultProviderValue: A11yContextStore = {
   results: {
     passes: [],
     incomplete: [],
     violations: [],
   },
-  setResults: vi.fn(),
+  status: 'initial',
+  discrepancy: null,
+  error: null,
+  setStatus: vi.fn(),
+  handleManual: vi.fn(),
   highlighted: [],
   toggleHighlight: vi.fn(),
   clearHighlights: vi.fn(),
diff --git a/code/addons/a11y/src/components/Tabs.tsx b/code/addons/a11y/src/components/Tabs.tsx
index 08ae46714dbd..8f1c3fa46c1d 100644
--- a/code/addons/a11y/src/components/Tabs.tsx
+++ b/code/addons/a11y/src/components/Tabs.tsx
@@ -23,30 +23,21 @@ const HighlightToggleLabel = styled.label(({ theme }) => ({
   color: theme.color.dark,
 }));
 
-const GlobalToggle = styled.div<{ elementWidth: number }>(({ elementWidth, theme }) => {
-  const maxWidthBeforeBreak = 450;
-  return {
-    cursor: 'pointer',
-    fontSize: 13,
-    lineHeight: '20px',
-    padding: elementWidth > maxWidthBeforeBreak ? '10px 15px 10px 0' : '10px 0px 10px 15px',
-    height: '40px',
-    border: 'none',
-    marginTop: elementWidth > maxWidthBeforeBreak ? -40 : 0,
-    float: elementWidth > maxWidthBeforeBreak ? 'right' : 'left',
-    display: 'flex',
-    alignItems: 'center',
-    width: elementWidth > maxWidthBeforeBreak ? 'auto' : '100%',
-    borderBottom: elementWidth > maxWidthBeforeBreak ? 'none' : `1px solid ${theme.appBorderColor}`,
-
-    input: {
-      marginLeft: 10,
-      marginRight: 0,
-      marginTop: -1,
-      marginBottom: 0,
-    },
-  };
-});
+const GlobalToggle = styled.div(() => ({
+  alignItems: 'center',
+  cursor: 'pointer',
+  display: 'flex',
+  fontSize: 13,
+  height: 40,
+  padding: '0 15px',
+
+  input: {
+    marginBottom: 0,
+    marginLeft: 10,
+    marginRight: 0,
+    marginTop: -1,
+  },
+}));
 
 const Item = styled.button<{ active?: boolean }>(
   ({ theme }) => ({
@@ -82,6 +73,7 @@ const List = styled.div(({ theme }) => ({
   boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`,
   background: theme.background.app,
   display: 'flex',
+  flexWrap: 'wrap',
   justifyContent: 'space-between',
   whiteSpace: 'nowrap',
 }));
@@ -131,16 +123,18 @@ export const Tabs: React.FC<TabsProps> = ({ tabs }) => {
             </Item>
           ))}
         </TabsWrapper>
+        {tabs[activeTab].items.length > 0 ? (
+          <GlobalToggle>
+            <HighlightToggleLabel htmlFor={highlightToggleId}>
+              {highlightLabel}
+            </HighlightToggleLabel>
+            <HighlightToggle
+              toggleId={highlightToggleId}
+              elementsToHighlight={retrieveAllNodesFromResults(tabs[activeTab].items)}
+            />
+          </GlobalToggle>
+        ) : null}
       </List>
-      {tabs[activeTab].items.length > 0 ? (
-        <GlobalToggle elementWidth={width || 0}>
-          <HighlightToggleLabel htmlFor={highlightToggleId}>{highlightLabel}</HighlightToggleLabel>
-          <HighlightToggle
-            toggleId={highlightToggleId}
-            elementsToHighlight={retrieveAllNodesFromResults(tabs[activeTab].items)}
-          />
-        </GlobalToggle>
-      ) : null}
       {tabs[activeTab].panel}
     </Container>
   );
diff --git a/code/addons/a11y/src/components/TestDiscrepancyMessage.stories.tsx b/code/addons/a11y/src/components/TestDiscrepancyMessage.stories.tsx
new file mode 100644
index 000000000000..578c2bbac792
--- /dev/null
+++ b/code/addons/a11y/src/components/TestDiscrepancyMessage.stories.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { ManagerContext } from 'storybook/internal/manager-api';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { TestDiscrepancyMessage } from './TestDiscrepancyMessage';
+
+type Story = StoryObj<typeof TestDiscrepancyMessage>;
+
+const managerContext: any = {
+  state: {},
+  api: {
+    getDocsUrl: fn().mockName('api::getDocsUrl'),
+  },
+};
+
+export default {
+  title: 'TestDiscrepancyMessage',
+  component: TestDiscrepancyMessage,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    storyId: 'story-id',
+  },
+  decorators: [
+    (storyFn) => (
+      <ManagerContext.Provider value={managerContext}>{storyFn()}</ManagerContext.Provider>
+    ),
+  ],
+} as Meta<typeof TestDiscrepancyMessage>;
+
+export const BrowserPassedCliFailed: Story = {
+  args: {
+    discrepancy: 'browserPassedCliFailed',
+  },
+};
+
+export const CliPassedBrowserFailed: Story = {
+  args: {
+    discrepancy: 'cliPassedBrowserFailed',
+  },
+};
+
+export const CliFailedButModeManual: Story = {
+  args: {
+    discrepancy: 'cliFailedButModeManual',
+  },
+};
diff --git a/code/addons/a11y/src/components/TestDiscrepancyMessage.tsx b/code/addons/a11y/src/components/TestDiscrepancyMessage.tsx
new file mode 100644
index 000000000000..d759435ffc96
--- /dev/null
+++ b/code/addons/a11y/src/components/TestDiscrepancyMessage.tsx
@@ -0,0 +1,73 @@
+import React, { useMemo } from 'react';
+
+import { Link } from 'storybook/internal/components';
+import { useStorybookApi } from 'storybook/internal/manager-api';
+import { styled } from 'storybook/internal/theming';
+
+import { DOCUMENTATION_DISCREPANCY_LINK } from '../constants';
+
+const Wrapper = styled.div(({ theme: { color, typography, background } }) => ({
+  textAlign: 'start',
+  padding: '11px 15px',
+  fontSize: `${typography.size.s2}px`,
+  fontWeight: typography.weight.regular,
+  lineHeight: '1rem',
+  background: background.app,
+  borderBottom: `1px solid ${color.border}`,
+  color: color.defaultText,
+  backgroundClip: 'padding-box',
+  position: 'relative',
+  code: {
+    fontSize: `${typography.size.s1 - 1}px`,
+    color: 'inherit',
+    margin: '0 0.2em',
+    padding: '0 0.2em',
+    background: 'rgba(255, 255, 255, 0.8)',
+    borderRadius: '2px',
+    boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
+  },
+}));
+
+export type TestDiscrepancy =
+  | 'browserPassedCliFailed'
+  | 'cliPassedBrowserFailed'
+  | 'cliFailedButModeManual'
+  | null;
+
+interface TestDiscrepancyMessageProps {
+  discrepancy: TestDiscrepancy;
+}
+export const TestDiscrepancyMessage = ({ discrepancy }: TestDiscrepancyMessageProps) => {
+  const api = useStorybookApi();
+  const docsUrl = api.getDocsUrl({
+    subpath: DOCUMENTATION_DISCREPANCY_LINK,
+    versioned: true,
+    renderer: true,
+  });
+
+  const message = useMemo(() => {
+    switch (discrepancy) {
+      case 'browserPassedCliFailed':
+        return 'Accessibility checks passed in this browser but failed in the CLI.';
+      case 'cliPassedBrowserFailed':
+        return 'Accessibility checks passed in the CLI but failed in this browser.';
+      case 'cliFailedButModeManual':
+        return 'Accessibility checks failed in the CLI. Run the tests manually to see the results.';
+      default:
+        return null;
+    }
+  }, [discrepancy]);
+
+  if (!message) {
+    return null;
+  }
+
+  return (
+    <Wrapper>
+      {message}{' '}
+      <Link href={docsUrl} target="_blank" withArrow>
+        Learn what could cause this
+      </Link>
+    </Wrapper>
+  );
+};
diff --git a/code/addons/a11y/src/constants.ts b/code/addons/a11y/src/constants.ts
index 11c307c18f86..e7c1c319df06 100755
--- a/code/addons/a11y/src/constants.ts
+++ b/code/addons/a11y/src/constants.ts
@@ -7,4 +7,11 @@ const RUNNING = `${ADDON_ID}/running`;
 const ERROR = `${ADDON_ID}/error`;
 const MANUAL = `${ADDON_ID}/manual`;
 
+export const DOCUMENTATION_LINK = 'writing-tests/accessibility-testing';
+export const DOCUMENTATION_DISCREPANCY_LINK = `${DOCUMENTATION_LINK}#why-are-my-tests-failing-in-different-environments`;
+
+export const TEST_PROVIDER_ID = 'storybook/addon-a11y/test-provider';
+
 export const EVENTS = { RESULT, REQUEST, RUNNING, ERROR, MANUAL };
+
+export const A11Y_TEST_TAG = 'a11ytest';
diff --git a/code/addons/a11y/src/manager.tsx b/code/addons/a11y/src/manager.tsx
index 41e79b3061df..d07f7c3b0ef2 100644
--- a/code/addons/a11y/src/manager.tsx
+++ b/code/addons/a11y/src/manager.tsx
@@ -39,9 +39,7 @@ addons.register(ADDON_ID, (api) => {
     title: Title,
     type: types.PANEL,
     render: ({ active = true }) => (
-      <A11yContextProvider active={active}>
-        <A11YPanel />
-      </A11yContextProvider>
+      <A11yContextProvider>{active ? <A11YPanel /> : null}</A11yContextProvider>
     ),
     paramKey: PARAM_KEY,
   });
diff --git a/code/addons/a11y/src/params.ts b/code/addons/a11y/src/params.ts
index 2428b38add45..e66a0813a42c 100644
--- a/code/addons/a11y/src/params.ts
+++ b/code/addons/a11y/src/params.ts
@@ -1,4 +1,4 @@
-import type { ElementContext, RunOptions, Spec } from 'axe-core';
+import type { ElementContext, ImpactValue, RunOptions, Spec } from 'axe-core';
 
 export interface Setup {
   element?: ElementContext;
@@ -10,5 +10,7 @@ export interface A11yParameters {
   element?: ElementContext;
   config?: Spec;
   options?: RunOptions;
+  /** @deprecated Use globals.a11y.manual instead */
   manual?: boolean;
+  disable?: boolean;
 }
diff --git a/code/addons/a11y/src/postinstall.ts b/code/addons/a11y/src/postinstall.ts
new file mode 100644
index 000000000000..9a64796f5e1b
--- /dev/null
+++ b/code/addons/a11y/src/postinstall.ts
@@ -0,0 +1,15 @@
+import type { PostinstallOptions } from '@storybook/cli/src/add';
+
+// eslint-disable-next-line depend/ban-dependencies
+import { execa } from 'execa';
+
+const $ = execa({
+  preferLocal: true,
+  stdio: 'inherit',
+  // we stream the stderr to the console
+  reject: false,
+});
+
+export default async function postinstall(options: PostinstallOptions) {
+  await $`storybook automigrate addonA11yAddonTest ${options.yes ? '--yes' : ''}`;
+}
diff --git a/code/addons/a11y/src/preview.test.tsx b/code/addons/a11y/src/preview.test.tsx
new file mode 100644
index 000000000000..d09ba89462ed
--- /dev/null
+++ b/code/addons/a11y/src/preview.test.tsx
@@ -0,0 +1,272 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import type { StoryContext } from '@storybook/csf';
+
+import { run } from './a11yRunner';
+import { A11Y_TEST_TAG } from './constants';
+import { experimental_afterEach } from './preview';
+import { getIsVitestRunning, getIsVitestStandaloneRun } from './utils';
+
+const mocks = vi.hoisted(() => {
+  return {
+    getIsVitestRunning: vi.fn(),
+    getIsVitestStandaloneRun: vi.fn(),
+  };
+});
+
+vi.mock(import('./a11yRunner'));
+vi.mock(import('./utils'), async (importOriginal) => {
+  const mod = await importOriginal(); // type is inferred
+  return {
+    ...mod,
+    getIsVitestRunning: mocks.getIsVitestRunning,
+    getIsVitestStandaloneRun: mocks.getIsVitestStandaloneRun,
+  };
+});
+
+const mockedRun = vi.mocked(run);
+
+const violations = [
+  {
+    id: 'color-contrast',
+    impact: 'serious',
+    tags: '_duplicate_["args","0","reporters","0","result","passes","12","tags"]',
+    description:
+      'Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds',
+    help: 'Elements must meet minimum color contrast ratio thresholds',
+    helpUrl: 'https://dequeuniversity.com/rules/axe/4.8/color-contrast?application=axeAPI',
+    nodes: [
+      {
+        any: [
+          {
+            id: 'color-contrast',
+            data: {
+              fgColor: '#029cfd',
+              bgColor: '#f6f9fc',
+              contrastRatio: 2.76,
+              fontSize: '10.5pt (14px)',
+              fontWeight: 'normal',
+              messageKey: null,
+              expectedContrastRatio: '4.5:1',
+              shadowColor: '_undefined_',
+            },
+            relatedNodes: [
+              {
+                html: '<div class="css-1av19vu">',
+                target: ['.css-1av19vu'],
+              },
+            ],
+            impact: 'serious',
+            message:
+              'Element has insufficient color contrast of 2.76 (foreground color: #029cfd, background color: #f6f9fc, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1',
+            '_constructor-name_': 'CheckResult',
+          },
+        ],
+        all: [],
+        none: [],
+        impact: 'serious',
+        html: '<span class="css-1mjgzsp">',
+        target: ['.css-1mjgzsp'],
+        failureSummary:
+          'Fix any of the following:\n  Element has insufficient color contrast of 2.76 (foreground color: #029cfd, background color: #f6f9fc, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1',
+      },
+    ],
+  },
+];
+
+describe('afterEach', () => {
+  beforeEach(() => {
+    vi.mocked(getIsVitestRunning).mockReturnValue(false);
+    vi.mocked(getIsVitestStandaloneRun).mockReturnValue(true);
+  });
+
+  const createContext = (overrides: Partial<StoryContext> = {}): StoryContext =>
+    ({
+      reporting: {
+        reports: [],
+        addReport: vi.fn(),
+      },
+      parameters: {
+        a11y: {},
+      },
+      globals: {
+        a11y: {},
+      },
+      tags: [A11Y_TEST_TAG],
+      ...overrides,
+    }) as any;
+
+  it('should run accessibility checks and report results', async () => {
+    const context = createContext();
+    const result = {
+      violations,
+    };
+
+    mockedRun.mockResolvedValue(result as any);
+
+    await expect(() => experimental_afterEach(context)).rejects.toThrow();
+
+    expect(mockedRun).toHaveBeenCalledWith(context.parameters.a11y);
+
+    expect(context.reporting.addReport).toHaveBeenCalledWith({
+      type: 'a11y',
+      version: 1,
+      result,
+      status: 'failed',
+    });
+  });
+
+  it('should run accessibility checks and report results without throwing', async () => {
+    const context = createContext();
+    const result = {
+      violations,
+    };
+
+    mockedRun.mockResolvedValue(result as any);
+    mocks.getIsVitestStandaloneRun.mockReturnValue(false);
+
+    await experimental_afterEach(context);
+
+    expect(mockedRun).toHaveBeenCalledWith(context.parameters.a11y);
+
+    expect(context.reporting.addReport).toHaveBeenCalledWith({
+      type: 'a11y',
+      version: 1,
+      result,
+      status: 'failed',
+    });
+  });
+
+  it('should report passed status when there are no violations', async () => {
+    const context = createContext();
+    const result = {
+      violations: [],
+    };
+    mockedRun.mockResolvedValue(result as any);
+
+    await experimental_afterEach(context);
+
+    expect(mockedRun).toHaveBeenCalledWith(context.parameters.a11y);
+    expect(context.reporting.addReport).toHaveBeenCalledWith({
+      type: 'a11y',
+      version: 1,
+      result,
+      status: 'passed',
+    });
+  });
+
+  it('should run accessibility checks if "a11ytest" flag is not available and is not running in Vitest', async () => {
+    const context = createContext({
+      tags: [],
+    });
+    const result = {
+      violations: [],
+    };
+    mockedRun.mockResolvedValue(result as any);
+    vi.mocked(getIsVitestRunning).mockReturnValue(false);
+
+    await experimental_afterEach(context);
+
+    expect(mockedRun).toHaveBeenCalledWith(context.parameters.a11y);
+    expect(context.reporting.addReport).toHaveBeenCalledWith({
+      type: 'a11y',
+      version: 1,
+      result,
+      status: 'passed',
+    });
+  });
+
+  it('should not run accessibility checks when manual is true', async () => {
+    const context = createContext({
+      parameters: {
+        a11y: {
+          manual: true,
+        },
+      },
+    });
+
+    await experimental_afterEach(context);
+
+    expect(mockedRun).not.toHaveBeenCalled();
+    expect(context.reporting.addReport).not.toHaveBeenCalled();
+  });
+
+  it('should not run accessibility checks when disable is true', async () => {
+    const context = createContext({
+      parameters: {
+        a11y: {
+          disable: true,
+        },
+      },
+    });
+
+    await experimental_afterEach(context);
+
+    expect(mockedRun).not.toHaveBeenCalled();
+    expect(context.reporting.addReport).not.toHaveBeenCalled();
+  });
+
+  it('should not run accessibility checks when globals manual is true', async () => {
+    const context = createContext({
+      globals: {
+        a11y: {
+          manual: true,
+        },
+      },
+    });
+
+    await experimental_afterEach(context);
+
+    expect(mockedRun).not.toHaveBeenCalled();
+    expect(context.reporting.addReport).not.toHaveBeenCalled();
+  });
+
+  it('should not run accessibility checks if vitest is running and story is not tagged with a11ytest', async () => {
+    const context = createContext({
+      tags: [],
+    });
+    vi.mocked(getIsVitestRunning).mockReturnValue(true);
+
+    await experimental_afterEach(context);
+
+    expect(mockedRun).not.toHaveBeenCalled();
+    expect(context.reporting.addReport).not.toHaveBeenCalled();
+  });
+
+  it('should report error when run throws an error', async () => {
+    const context = createContext();
+    const error = new Error('Test error');
+    mockedRun.mockRejectedValue(error);
+
+    await expect(() => experimental_afterEach(context)).rejects.toThrow();
+
+    expect(mockedRun).toHaveBeenCalledWith(context.parameters.a11y);
+    expect(context.reporting.addReport).toHaveBeenCalledWith({
+      type: 'a11y',
+      version: 1,
+      result: {
+        error,
+      },
+      status: 'failed',
+    });
+  });
+
+  it('should report error when run throws an error', async () => {
+    const context = createContext();
+    const error = new Error('Test error');
+    mockedRun.mockRejectedValue(error);
+
+    await expect(() => experimental_afterEach(context)).rejects.toThrow();
+
+    expect(mockedRun).toHaveBeenCalledWith(context.parameters.a11y);
+    expect(context.reporting.addReport).toHaveBeenCalledWith({
+      type: 'a11y',
+      version: 1,
+      result: {
+        error,
+      },
+      status: 'failed',
+    });
+  });
+});
diff --git a/code/addons/a11y/src/preview.tsx b/code/addons/a11y/src/preview.tsx
index 1325793c119a..e496894cb113 100644
--- a/code/addons/a11y/src/preview.tsx
+++ b/code/addons/a11y/src/preview.tsx
@@ -1 +1,90 @@
-import './a11yRunner';
+// Source: https://github.com/chaance/vitest-axe/blob/main/src/to-have-no-violations.ts
+import * as matchers from 'vitest-axe/matchers';
+
+import type { AfterEach } from 'storybook/internal/types';
+
+import { expect } from '@storybook/test';
+
+import { run } from './a11yRunner';
+import { A11Y_TEST_TAG } from './constants';
+import type { A11yParameters } from './params';
+import { getIsVitestRunning, getIsVitestStandaloneRun } from './utils';
+
+expect.extend(matchers);
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const experimental_afterEach: AfterEach<any> = async ({
+  reporting,
+  parameters,
+  globals,
+  tags,
+}) => {
+  const a11yParameter: A11yParameters | undefined = parameters.a11y;
+  const a11yGlobals = globals.a11y;
+
+  const shouldRunEnvironmentIndependent =
+    a11yParameter?.manual !== true &&
+    a11yParameter?.disable !== true &&
+    a11yGlobals?.manual !== true;
+
+  if (shouldRunEnvironmentIndependent) {
+    if (getIsVitestRunning() && !tags.includes(A11Y_TEST_TAG)) {
+      return;
+    }
+    try {
+      const result = await run(a11yParameter);
+
+      if (result) {
+        const hasViolations = (result?.violations.length ?? 0) > 0;
+
+        reporting.addReport({
+          type: 'a11y',
+          version: 1,
+          result: result,
+          status: hasViolations ? 'failed' : 'passed',
+        });
+
+        /**
+         * When Vitest is running outside of Storybook, we need to throw an error to fail the test
+         * run when there are accessibility issues.
+         *
+         * @todo In the future, we want to always throw an error when there are accessibility
+         *   issues. This is a temporary solution. Later, portable stories and Storybook should
+         *   implement proper try catch handling.
+         */
+        if (getIsVitestStandaloneRun()) {
+          if (hasViolations) {
+            // @ts-expect-error - todo - fix type extension of expect from @storybook/test
+            expect(result).toHaveNoViolations();
+          }
+        }
+      }
+      /**
+       * @todo Later we don't want to catch errors here. Instead, we want to throw them and let
+       *   Storybook/portable stories handle them on a higher level.
+       */
+    } catch (e) {
+      reporting.addReport({
+        type: 'a11y',
+        version: 1,
+        result: {
+          error: e,
+        },
+        status: 'failed',
+      });
+
+      if (getIsVitestStandaloneRun()) {
+        throw e;
+      }
+    }
+  }
+};
+
+export const initialGlobals = {
+  a11y: {
+    manual: false,
+  },
+};
+
+// A11Y_TEST_TAG constant in ./constants.ts. Has to be statically analyzable.
+export const tags = ['a11ytest'];
diff --git a/code/addons/a11y/src/types.ts b/code/addons/a11y/src/types.ts
new file mode 100644
index 000000000000..9e116e5aab2b
--- /dev/null
+++ b/code/addons/a11y/src/types.ts
@@ -0,0 +1,3 @@
+import type { AxeResults } from 'axe-core';
+
+export type A11YReport = AxeResults | { error: Error };
diff --git a/code/addons/a11y/src/utils.ts b/code/addons/a11y/src/utils.ts
new file mode 100644
index 000000000000..f0612d5dfc73
--- /dev/null
+++ b/code/addons/a11y/src/utils.ts
@@ -0,0 +1,17 @@
+export function getIsVitestStandaloneRun() {
+  try {
+    // @ts-expect-error Suppress TypeScript warning about wrong setting. Doesn't matter, because we don't use tsc for bundling.
+    return import.meta.env.VITEST_STORYBOOK === 'false';
+  } catch (e) {
+    return false;
+  }
+}
+
+export function getIsVitestRunning() {
+  try {
+    // @ts-expect-error Suppress TypeScript warning about wrong setting. Doesn't matter, because we don't use tsc for bundling.
+    return import.meta.env.MODE === 'test';
+  } catch (e) {
+    return false;
+  }
+}
diff --git a/code/addons/actions/ADVANCED.md b/code/addons/actions/ADVANCED.md
index 7cca56342dee..d71320209288 100644
--- a/code/addons/actions/ADVANCED.md
+++ b/code/addons/actions/ADVANCED.md
@@ -1,6 +1,6 @@
 ## Advanced/Legacy Actions usage
 
-For basic usage, see the [documentation](https://storybook.js.org/docs/react/essentials/actions).
+For basic usage, see the [documentation](https://storybook.js.org/docs/essentials/actions).
 
 This document describes the pre-6.0 usage of the addon, and as such is no longer recommended (although it will be supported until at least 7.0).
 
diff --git a/code/addons/actions/README.md b/code/addons/actions/README.md
index 80d2bd5d746c..60cfb587eadf 100644
--- a/code/addons/actions/README.md
+++ b/code/addons/actions/README.md
@@ -2,19 +2,19 @@
 
 Storybook Addon Actions can be used to display data received by event handlers in [Storybook](https://storybook.js.org).
 
-[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
+[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
 
 ![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/actions/docs/screenshot.png)
 
 ## Installation
 
-Actions is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
+Actions is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
 
 ```sh
 npm i -D @storybook/addon-actions
 ```
 
-Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project):
+Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
 
 ```js
 export default {
@@ -24,4 +24,4 @@ export default {
 
 ## Usage
 
-The basic usage is documented in the [documentation](https://storybook.js.org/docs/react/essentials/actions). For legacy usage, see the [advanced README](./ADVANCED.md).
+The basic usage is documented in the [documentation](https://storybook.js.org/docs/essentials/actions). For legacy usage, see the [advanced README](./ADVANCED.md).
diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json
index c646b66260db..f5032604dcf3 100644
--- a/code/addons/actions/package.json
+++ b/code/addons/actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",
diff --git a/code/addons/actions/project.json b/code/addons/actions/project.json
index 3c4ef7dc79d6..67552f132064 100644
--- a/code/addons/actions/project.json
+++ b/code/addons/actions/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "actions",
+  "name": "addon-actions",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {
diff --git a/code/addons/backgrounds/README.md b/code/addons/backgrounds/README.md
index 481ba54bcd2f..44fc45fb825a 100644
--- a/code/addons/backgrounds/README.md
+++ b/code/addons/backgrounds/README.md
@@ -2,13 +2,13 @@
 
 Storybook Addon Backgrounds can be used to change background colors inside the preview in [Storybook](https://storybook.js.org).
 
-[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
+[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
 
 ![React Storybook Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/backgrounds/docs/addon-backgrounds.gif)
 
 ## Installation
 
-Backgrounds is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
+Backgrounds is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
 
 ```sh
 npm i -D @storybook/addon-backgrounds
@@ -16,7 +16,7 @@ npm i -D @storybook/addon-backgrounds
 
 ## Configuration
 
-Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project):
+Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
 
 ```js
 export default {
@@ -26,4 +26,4 @@ export default {
 
 ## Usage
 
-The usage is documented in the [documentation](https://storybook.js.org/docs/react/essentials/backgrounds).
+The usage is documented in the [documentation](https://storybook.js.org/docs/essentials/backgrounds).
diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json
index 51cb0ada1bc4..aecb2b2a990d 100644
--- a/code/addons/backgrounds/package.json
+++ b/code/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",
@@ -60,7 +60,7 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.3.2"
diff --git a/code/addons/backgrounds/project.json b/code/addons/backgrounds/project.json
index 0ad6e6300a52..b1de9e2ae100 100644
--- a/code/addons/backgrounds/project.json
+++ b/code/addons/backgrounds/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "backgrounds",
+  "name": "addon-backgrounds",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {
diff --git a/code/addons/controls/README.md b/code/addons/controls/README.md
index 192a112e07fe..e368a598e828 100644
--- a/code/addons/controls/README.md
+++ b/code/addons/controls/README.md
@@ -2,19 +2,19 @@
 
 [Storybook](https://storybook.js.org) Controls gives you a graphical UI to interact with a component's arguments dynamically, without needing to code. It creates an addon panel next to your component examples ("stories"), so you can edit them live.
 
-[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
+[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
 
 ![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/controls/docs/media/addon-controls-hero.gif)
 
 ## Installation
 
-Controls is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
+Controls is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
 
 ```sh
 npm i -D @storybook/addon-controls
 ```
 
-Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project):
+Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
 
 ```js
 export default {
@@ -24,7 +24,7 @@ export default {
 
 ## Usage
 
-The usage is documented in the [documentation](https://storybook.js.org/docs/react/essentials/controls).
+The usage is documented in the [documentation](https://storybook.js.org/docs/essentials/controls).
 
 ## FAQs
 
@@ -92,7 +92,7 @@ export const Reflow = () => {
 };
 ```
 
-And again, as above, this can be rewritten using [fully custom args](https://storybook.js.org/docs/react/essentials/controls#fully-custom-args):
+And again, as above, this can be rewritten using [fully custom args](https://storybook.js.org/docs/essentials/controls#fully-custom-args):
 
 ```jsx
 export const Reflow = ({ count, label, ...args }) => (
@@ -123,7 +123,7 @@ Reflow.argTypes = {
 
 There are a few known cases where controls can't be auto-generated:
 
-- You're using a framework for which automatic generation [isn't supported](https://storybook.js.org/docs/react/api/frameworks-feature-support)
+- You're using a framework for which automatic generation [isn't supported](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
 - You're trying to generate controls for a component defined in an external library
 
 With a little manual work you can still use controls in such cases. Consider the following example:
@@ -147,7 +147,7 @@ Basic.args = {
 };
 ```
 
-The `argTypes` annotation (which can also be applied to individual stories if needed), gives Storybook the hints it needs to generate controls in these unsupported cases. See [control annotations](https://storybook.js.org/docs/react/essentials/controls#annotation) for a full list of control types.
+The `argTypes` annotation (which can also be applied to individual stories if needed), gives Storybook the hints it needs to generate controls in these unsupported cases. See [control annotations](https://storybook.js.org/docs/essentials/controls#annotation) for a full list of control types.
 
 It's also possible that your Storybook is misconfigured. If you think this might be the case, please search through Storybook's [Github issues](https://github.com/storybookjs/storybook/issues), and file a new issue if you don't find one that matches your use case.
 
@@ -172,7 +172,7 @@ CustomControls.argTypes = {
 };
 ```
 
-Like [story parameters](https://storybook.js.org/docs/react/writing-stories/parameters), `args` and `argTypes` annotations are hierarchically merged, so story-level annotations overwrite component-level annotations.
+Like [story parameters](https://storybook.js.org/docs/writing-stories/parameters), `args` and `argTypes` annotations are hierarchically merged, so story-level annotations overwrite component-level annotations.
 
 ### How do controls work with MDX?
 
diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json
index 3dabde260726..adf5675c056a 100644
--- a/code/addons/controls/package.json
+++ b/code/addons/controls/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",
@@ -52,12 +52,11 @@
   "dependencies": {
     "@storybook/global": "^5.0.0",
     "dequal": "^2.0.2",
-    "lodash": "^4.17.21",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
     "@storybook/blocks": "workspace:*",
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
diff --git a/code/addons/controls/project.json b/code/addons/controls/project.json
index e143e289fe2f..e8c9dfeeca76 100644
--- a/code/addons/controls/project.json
+++ b/code/addons/controls/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "controls",
+  "name": "addon-controls",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {
diff --git a/code/addons/docs/README.md b/code/addons/docs/README.md
index 216893fb7070..9bd82c63de9c 100644
--- a/code/addons/docs/README.md
+++ b/code/addons/docs/README.md
@@ -76,7 +76,7 @@ For more information on `MDX`, see the [`MDX` reference](https://github.com/stor
 
 Storybook Docs supports all view layers that Storybook supports except for React Native (currently). There are some framework-specific features as well, such as props tables and inline story rendering. The following page captures the current state of support:
 
-[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
+[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
 
 **Note:** `#` = WIP support
 
@@ -139,11 +139,11 @@ export default {
 
 `csfPluginOptions` is an object for configuring `@storybook/csf-plugin`. When set to `null` it tells docs not to run the `csf-plugin` at all, which can be used as an optimization, or if you're already using `csf-plugin` in your `main.js`.
 
-> With the release of version 7.0, it is no longer possible to import `.md` files directly into Storybook using the `transcludeMarkdown` [option](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#importing-plain-markdown-files-with-transcludemarkdown-has-changed). Instead, we recommend using the [`Markdown`](https://storybook.js.org/docs/react/api/doc-block-markdown) Doc Block for importing Markdown files into your Storybook documentation.
+> With the release of version 7.0, it is no longer possible to import `.md` files directly into Storybook using the `transcludeMarkdown` [option](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#importing-plain-markdown-files-with-transcludemarkdown-has-changed). Instead, we recommend using the [`Markdown`](https://storybook.js.org/docs/api/doc-blocks/doc-block-markdown) Doc Block for importing Markdown files into your Storybook documentation.
 
 ## TypeScript configuration
 
-As of SB6 [TypeScript is zero-config](https://storybook.js.org/docs/react/configure/typescript) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/props-tables.md).
+As of SB6 [TypeScript is zero-config](https://storybook.js.org/docs/configure/integration/typescript) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/props-tables.md).
 
 ## More resources
 
diff --git a/code/addons/docs/angular/index.js b/code/addons/docs/angular/index.js
index 120597b47b00..fc08456784d8 100644
--- a/code/addons/docs/angular/index.js
+++ b/code/addons/docs/angular/index.js
@@ -1,7 +1,6 @@
 /* eslint-disable no-underscore-dangle */
-import { global } from '@storybook/global';
 
 export const setCompodocJson = (compodocJson) => {
   // @ts-expect-error (Converted from ts-ignore)
-  global.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
+  globalThis.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
 };
diff --git a/code/addons/docs/docs/docspage.md b/code/addons/docs/docs/docspage.md
index 26f75811de5b..3fd4aef3c11c 100644
--- a/code/addons/docs/docs/docspage.md
+++ b/code/addons/docs/docs/docspage.md
@@ -34,7 +34,7 @@ However, `DocsPage` brings the following improvements:
 
 Storybook uses `component` to extract the component's description and props, and will rely on it further in future releases. We encourage you to add it to existing stories and use it in all new stories.
 
-Here's how to set the component in [Component Story Format (CSF)](https://storybook.js.org/docs/react/api/csf):
+Here's how to set the component in [Component Story Format (CSF)](https://storybook.js.org/docs/api/csf):
 
 ```js
 import { Badge } from './Badge';
diff --git a/code/addons/docs/docs/mdx.md b/code/addons/docs/docs/mdx.md
index 3f251fd9a9e5..735be0164b8f 100644
--- a/code/addons/docs/docs/mdx.md
+++ b/code/addons/docs/docs/mdx.md
@@ -149,7 +149,7 @@ You can also use the rest of the MDX features in conjunction with embedding. Tha
 
 ## Decorators and parameters
 
-To add [decorators](https://storybook.js.org/docs/react/writing-stories/decorators) and [parameters](https://storybook.js.org/docs/react/writing-stories/parameters) in MDX:
+To add [decorators](https://storybook.js.org/docs/writing-stories/decorators) and [parameters](https://storybook.js.org/docs/writing-stories/parameters) in MDX:
 
 ```md
 <Meta
diff --git a/code/addons/docs/docs/multiframework.md b/code/addons/docs/docs/multiframework.md
index c68201aabdc3..36f2be0c396e 100644
--- a/code/addons/docs/docs/multiframework.md
+++ b/code/addons/docs/docs/multiframework.md
@@ -106,7 +106,7 @@ The input is the story function and the story context (id, parameters, args, etc
 
 ## Dynamic source rendering
 
-With the release of Storybook 6.0, we've improved how stories are rendered in the [`Source` doc block](https://storybook.js.org/docs/react/api/doc-block-source). One of such improvements is the `dynamic` source type, which renders a snippet based on the output the story function.
+With the release of Storybook 6.0, we've improved how stories are rendered in the [`Source` doc block](https://storybook.js.org/docs/api/doc-blocks/doc-block-source). One of such improvements is the `dynamic` source type, which renders a snippet based on the output the story function.
 
 This dynamic rendering is framework-specific, meaning it needs a custom implementation for each framework.
 
diff --git a/code/addons/docs/docs/props-tables.md b/code/addons/docs/docs/props-tables.md
index 7a44a6c653ae..5aeba6cbcd9b 100644
--- a/code/addons/docs/docs/props-tables.md
+++ b/code/addons/docs/docs/props-tables.md
@@ -59,7 +59,7 @@ Starting in SB 6.0, the `ArgsTable` block has built-in `Controls` (formerly know
 
 <br/>
 
-These controls are implemented to appear automatically in the props table when your story accepts [Storybook Args](https://storybook.js.org/docs/react/api/csf#args-story-inputs) as its input. This is done slightly differently depending on whether you're using `DocsPage` or `MDX`.
+These controls are implemented to appear automatically in the props table when your story accepts [Storybook Args](https://storybook.js.org/docs/api/csf#args-story-inputs) as its input. This is done slightly differently depending on whether you're using `DocsPage` or `MDX`.
 
 **DocsPage.** In [DocsPage](./docspage.md), simply write your story to consume args and the auto-generated props table will display controls in the right-most column:
 
@@ -82,7 +82,7 @@ export const WithControls = (args) => <MyComponent {...args} />;
 <ArgsTable story="Controls" />
 ```
 
-For a very detailed walkthrough of how to write stories that use controls, read the [documentation](https://storybook.js.org/docs/react/essentials/controls).
+For a very detailed walkthrough of how to write stories that use controls, read the [documentation](https://storybook.js.org/docs/essentials/controls).
 
 ## Customization
 
@@ -187,20 +187,20 @@ This would render a row with a modified description, a type display with a dropd
 > - `type: 'number'` is shorthand for `type: { name: 'number' }`
 > - `control: 'radio'` is shorthand for `control: { type: 'radio' }`
 
-Controls customization has an entire section in the [documentation](https://storybook.js.org/docs/react/essentials/controls#configuration).
+Controls customization has an entire section in the [documentation](https://storybook.js.org/docs/essentials/controls#configuration).
 
 Here are the possible customizations for the rest of the prop table:
 
-| Field                        | Description                                                                                          |
-| ---------------------------- | ---------------------------------------------------------------------------------------------------- |
-| `name`                       | The name of the property                                                                             |
-| `type.required`              | Whether or not the property is required                                                              |
-| `description`                | A markdown description for the property                                                              |
-| `table.type.summary`         | A short version of the type                                                                          |
-| `table.type.detail`          | A longer version of the type (if it's a complex type)                                                |
-| `table.defaultValue.summary` | A short version of the default value                                                                 |
-| `table.defaultValue.detail`  | A longer version of the default value (if it's a complex value)                                      |
-| `control`                    | See [`addon-controls` README](https://storybook.js.org/docs/react/essentials/controls#configuration) |
+| Field                        | Description                                                                                    |
+| ---------------------------- | ---------------------------------------------------------------------------------------------- |
+| `name`                       | The name of the property                                                                       |
+| `type.required`              | Whether or not the property is required                                                        |
+| `description`                | A markdown description for the property                                                        |
+| `table.type.summary`         | A short version of the type                                                                    |
+| `table.type.detail`          | A longer version of the type (if it's a complex type)                                          |
+| `table.defaultValue.summary` | A short version of the default value                                                           |
+| `table.defaultValue.detail`  | A longer version of the default value (if it's a complex value)                                |
+| `control`                    | See [`addon-controls` README](https://storybook.js.org/docs/essentials/controls#configuration) |
 
 ## Reporting a bug
 
diff --git a/code/addons/docs/docs/recipes.md b/code/addons/docs/docs/recipes.md
index e760a61e08f4..d27c4fc851d9 100644
--- a/code/addons/docs/docs/recipes.md
+++ b/code/addons/docs/docs/recipes.md
@@ -282,7 +282,7 @@ These two methods are complementary. The former is useful for story-specific, an
 
 What happens if you want to add some wrapper for your MDX page, or add some other kind of React context?
 
-When you're writing stories you can do this by adding a [decorator](https://storybook.js.org/docs/react/writing-stories/decorators), but when you're adding arbitrary JSX to your MDX documentation outside of a `<Story>` block, decorators no longer apply, and you need to use the `docs.container` parameter.
+When you're writing stories you can do this by adding a [decorator](https://storybook.js.org/docs/writing-stories/decorators), but when you're adding arbitrary JSX to your MDX documentation outside of a `<Story>` block, decorators no longer apply, and you need to use the `docs.container` parameter.
 
 The closest Docs equivalent of a decorator is the `container`, a wrapper element that is rendered around the page that is being rendered. Here's an example of adding a solid red border around the page. It uses Storybook's default page container (that sets up various contexts and other magic) and then inserts its own logic between that container and the contents of the page:
 
diff --git a/code/addons/docs/docs/theming.md b/code/addons/docs/docs/theming.md
index 6c4c8ac13082..f68f55c67c9e 100644
--- a/code/addons/docs/docs/theming.md
+++ b/code/addons/docs/docs/theming.md
@@ -9,7 +9,7 @@
 
 ## Storybook theming
 
-Storybook theming is the **recommended way** to theme your docs. Docs uses the same theme system as [Storybook UI](https://storybook.js.org/docs/react/configure/theming), but is themed independently from the main UI.
+Storybook theming is the **recommended way** to theme your docs. Docs uses the same theme system as [Storybook UI](https://storybook.js.org/docs/configure/user-interface/theming), but is themed independently from the main UI.
 
 Supposing you have a Storybook theme defined for the main UI in `.storybook/manager.js`:
 
diff --git a/code/addons/docs/ember/index.js b/code/addons/docs/ember/index.js
index eab68763ab45..8c795c20d219 100644
--- a/code/addons/docs/ember/index.js
+++ b/code/addons/docs/ember/index.js
@@ -1,6 +1,5 @@
 /* eslint-disable no-underscore-dangle */
-import { global } from '@storybook/global';
 
 export const setJSONDoc = (jsondoc) => {
-  global.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
+  globalThis.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
 };
diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
index 7e38a4d00383..0b416f5bf770 100644
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",
@@ -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",
@@ -100,20 +105,19 @@
     "@mdx-js/react": "^3.0.0",
     "@storybook/blocks": "workspace:*",
     "@storybook/csf-plugin": "workspace:*",
-    "@storybook/global": "^5.0.0",
     "@storybook/react-dom-shim": "workspace:*",
-    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "rehype-external-links": "^3.0.0",
-    "rehype-slug": "^6.0.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
     "@mdx-js/mdx": "^3.0.0",
     "@rollup/pluginutils": "^5.0.2",
+    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "rehype-external-links": "^3.0.0",
+    "rehype-slug": "^6.0.0",
     "typescript": "^5.3.2",
     "vite": "^4.0.4"
   },
@@ -130,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/project.json b/code/addons/docs/project.json
index 04ab0c7d4701..03194c3a0503 100644
--- a/code/addons/docs/project.json
+++ b/code/addons/docs/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "docs",
+  "name": "addon-docs",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {
diff --git a/code/addons/docs/src/manager.tsx b/code/addons/docs/src/manager.tsx
new file mode 100644
index 000000000000..0b84cd6e36f8
--- /dev/null
+++ b/code/addons/docs/src/manager.tsx
@@ -0,0 +1,57 @@
+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,
+    /**
+     * 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<{
+        source: string;
+        format: SyntaxHighlighterFormatTypes;
+      }>(ADDON_ID, {
+        source: '',
+        format: 'html',
+      });
+
+      useChannel({
+        [SNIPPET_RENDERED]: ({ source, format }) => {
+          setSourceCode({ source, format });
+        },
+      });
+
+      return (
+        <AddonPanel active={!!active}>
+          <Source code={codeSnippet.source} format={codeSnippet.format} dark />
+        </AddonPanel>
+      );
+    },
+  });
+});
diff --git a/code/addons/docs/src/plugins/mdx-plugin.ts b/code/addons/docs/src/plugins/mdx-plugin.ts
index 40d8e88c3f3a..36fe3b691e97 100644
--- a/code/addons/docs/src/plugins/mdx-plugin.ts
+++ b/code/addons/docs/src/plugins/mdx-plugin.ts
@@ -3,8 +3,6 @@ import { dirname, join } from 'node:path';
 import type { Options } from 'storybook/internal/types';
 
 import { createFilter } from '@rollup/pluginutils';
-import rehypeExternalLinks from 'rehype-external-links';
-import rehypeSlug from 'rehype-slug';
 import type { Plugin } from 'vite';
 
 import type { CompileOptions } from '../compiler';
@@ -24,6 +22,9 @@ export async function mdxPlugin(options: Options): Promise<Plugin> {
   const presetOptions = await presets.apply<Record<string, any>>('options', {});
   const mdxPluginOptions = presetOptions?.mdxPluginOptions as CompileOptions;
 
+  const rehypeSlug = (await import('rehype-slug')).default;
+  const rehypeExternalLinks = (await import('rehype-external-links')).default;
+
   return {
     name: 'storybook:mdx-plugin',
     enforce: 'pre',
diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts
index e418b5e2e8aa..9cff707e8472 100644
--- a/code/addons/docs/src/preset.ts
+++ b/code/addons/docs/src/preset.ts
@@ -5,9 +5,6 @@ import type { DocsOptions, Options, PresetProperty } from 'storybook/internal/ty
 
 import type { CsfPluginOptions } from '@storybook/csf-plugin';
 
-import rehypeExternalLinks from 'rehype-external-links';
-import rehypeSlug from 'rehype-slug';
-
 import type { CompileOptions } from './compiler';
 
 /**
@@ -42,6 +39,9 @@ async function webpack(
 
   const { csfPluginOptions = {}, mdxPluginOptions = {} } = options;
 
+  const rehypeSlug = (await import('rehype-slug')).default;
+  const rehypeExternalLinks = (await import('rehype-external-links')).default;
+
   const mdxLoaderOptions: CompileOptions = await options.presets.apply('mdxLoaderOptions', {
     ...mdxPluginOptions,
     mdxCompileOptions: {
@@ -175,6 +175,9 @@ export const viteFinal = async (config: any, options: Options) => {
   const { plugins = [] } = config;
   const { mdxPlugin } = await import('./plugins/mdx-plugin');
 
+  const rehypeSlug = (await import('rehype-slug')).default;
+  const rehypeExternalLinks = (await import('rehype-external-links')).default;
+
   // Use the resolvedReact preset to alias react and react-dom to either the users version or the version shipped with addon-docs
   const { react, reactDom, mdx } = await getResolvedReact(options);
 
diff --git a/code/addons/docs/src/preview.ts b/code/addons/docs/src/preview.ts
index 735de9f72234..713352b025ea 100644
--- a/code/addons/docs/src/preview.ts
+++ b/code/addons/docs/src/preview.ts
@@ -1,8 +1,6 @@
 import type { PreparedStory } from 'storybook/internal/types';
 
-import { global } from '@storybook/global';
-
-const excludeTags = Object.entries(global.TAGS_OPTIONS ?? {}).reduce(
+const excludeTags = Object.entries(globalThis.TAGS_OPTIONS ?? {}).reduce(
   (acc, entry) => {
     const [tag, option] = entry;
     if ((option as any).excludeFromDocsStories) {
diff --git a/code/addons/docs/template/stories/docs2/button.stories.ts b/code/addons/docs/template/stories/docs2/button.stories.ts
index fd516fe58721..dffc084c7c6b 100644
--- a/code/addons/docs/template/stories/docs2/button.stories.ts
+++ b/code/addons/docs/template/stories/docs2/button.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 export default {
   component: globalThis.Components.Button,
   tags: ['autodocs'],
diff --git a/code/addons/docs/template/stories/docs2/multiple-csf-files-a.stories.ts b/code/addons/docs/template/stories/docs2/multiple-csf-files-a.stories.ts
index c77284a296f3..67591f0acac4 100644
--- a/code/addons/docs/template/stories/docs2/multiple-csf-files-a.stories.ts
+++ b/code/addons/docs/template/stories/docs2/multiple-csf-files-a.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 export default {
   title: 'Multiple CSF Files Same Title',
   component: globalThis.Components.Html,
diff --git a/code/addons/docs/template/stories/docs2/multiple-csf-files-b.stories.ts b/code/addons/docs/template/stories/docs2/multiple-csf-files-b.stories.ts
index 955c04af9f9e..37f1cd76aa35 100644
--- a/code/addons/docs/template/stories/docs2/multiple-csf-files-b.stories.ts
+++ b/code/addons/docs/template/stories/docs2/multiple-csf-files-b.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 export default {
   title: 'Multiple CSF Files Same Title',
   component: globalThis.Components.Html,
diff --git a/code/addons/docs/template/stories/docspage/autoplay.stories.ts b/code/addons/docs/template/stories/docspage/autoplay.stories.ts
index 6ebdc43b3ad7..03d1388f2fb6 100644
--- a/code/addons/docs/template/stories/docspage/autoplay.stories.ts
+++ b/code/addons/docs/template/stories/docspage/autoplay.stories.ts
@@ -1,4 +1,3 @@
-import { global as globalThis } from '@storybook/global';
 import { expect, within } from '@storybook/test';
 
 export default {
diff --git a/code/addons/docs/template/stories/docspage/basic.stories.ts b/code/addons/docs/template/stories/docspage/basic.stories.ts
index 3dc35191d7b7..a9ea37650fc9 100644
--- a/code/addons/docs/template/stories/docspage/basic.stories.ts
+++ b/code/addons/docs/template/stories/docspage/basic.stories.ts
@@ -1,4 +1,3 @@
-import { global as globalThis } from '@storybook/global';
 import { fn } from '@storybook/test';
 
 export default {
diff --git a/code/addons/docs/template/stories/docspage/description.stories.ts b/code/addons/docs/template/stories/docspage/description.stories.ts
index e6a2eac1587f..3d70e317511f 100644
--- a/code/addons/docs/template/stories/docspage/description.stories.ts
+++ b/code/addons/docs/template/stories/docspage/description.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 export default {
   component: globalThis.Components.Button,
   subcomponents: {
diff --git a/code/addons/docs/template/stories/docspage/error.stories.ts b/code/addons/docs/template/stories/docspage/error.stories.ts
index eae587a16bde..4e7be89ad483 100644
--- a/code/addons/docs/template/stories/docspage/error.stories.ts
+++ b/code/addons/docs/template/stories/docspage/error.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 export default {
   component: globalThis.Components.Button,
   tags: ['autodocs', '!test', '!vitest'],
diff --git a/code/addons/docs/template/stories/docspage/extract-description.stories.ts b/code/addons/docs/template/stories/docspage/extract-description.stories.ts
index cb5986ac7dbe..48cd9f91cd7b 100644
--- a/code/addons/docs/template/stories/docspage/extract-description.stories.ts
+++ b/code/addons/docs/template/stories/docspage/extract-description.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 export default {
   component: globalThis.Components.Button,
   tags: ['autodocs'],
diff --git a/code/addons/docs/template/stories/docspage/iframe.stories.ts b/code/addons/docs/template/stories/docspage/iframe.stories.ts
index 03ee6b8df175..cdb2e55ab456 100644
--- a/code/addons/docs/template/stories/docspage/iframe.stories.ts
+++ b/code/addons/docs/template/stories/docspage/iframe.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 export default {
   component: globalThis.Components.Button,
   tags: ['autodocs'],
diff --git a/code/addons/docs/template/stories/docspage/overflow.stories.ts b/code/addons/docs/template/stories/docspage/overflow.stories.ts
index 71893031af5b..471bb6d50a6a 100644
--- a/code/addons/docs/template/stories/docspage/overflow.stories.ts
+++ b/code/addons/docs/template/stories/docspage/overflow.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 export default {
   component: globalThis.Components.Pre,
   tags: ['autodocs'],
diff --git a/code/addons/docs/template/stories/docspage/override.stories.ts b/code/addons/docs/template/stories/docspage/override.stories.ts
index 18d2d4e5e25c..26d012580e62 100644
--- a/code/addons/docs/template/stories/docspage/override.stories.ts
+++ b/code/addons/docs/template/stories/docspage/override.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 // FIXME: do this using basic React functions for multi-framework
 //        once sandbox linking is working
 //
diff --git a/code/addons/docs/template/stories/docspage/source.stories.ts b/code/addons/docs/template/stories/docspage/source.stories.ts
index faa8517dc54d..78100e5b4a5a 100644
--- a/code/addons/docs/template/stories/docspage/source.stories.ts
+++ b/code/addons/docs/template/stories/docspage/source.stories.ts
@@ -1,7 +1,5 @@
 import type { StoryContext } from 'storybook/internal/types';
 
-import { global as globalThis } from '@storybook/global';
-
 import { dedent } from 'ts-dedent';
 
 export default {
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..9958096cb815
--- /dev/null
+++ b/code/addons/docs/template/stories/sourcePanel/index.stories.tsx
@@ -0,0 +1,23 @@
+export default {
+  component: globalThis.Components.Button,
+  tags: ['autodocs'],
+  parameters: {
+    chromatic: { disable: true },
+    docs: {
+      codePanel: false,
+    },
+  },
+};
+
+export const One = { args: { label: 'One' } };
+
+export const Two = { args: { label: 'Two' } };
+
+export const WithSource = {
+  args: { label: 'Three' },
+  parameters: {
+    docs: {
+      codePanel: true,
+    },
+  },
+};
diff --git a/code/addons/docs/template/stories/toc/basic.stories.ts b/code/addons/docs/template/stories/toc/basic.stories.ts
index 2a81297d25be..4e531d0efe30 100644
--- a/code/addons/docs/template/stories/toc/basic.stories.ts
+++ b/code/addons/docs/template/stories/toc/basic.stories.ts
@@ -1,6 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-import { fn } from '@storybook/test';
-
 export default {
   component: globalThis.Components.Button,
   tags: ['autodocs'],
diff --git a/code/addons/docs/template/stories/toc/custom-selector.stories.ts b/code/addons/docs/template/stories/toc/custom-selector.stories.ts
index e031366aa829..09caac6a69d4 100644
--- a/code/addons/docs/template/stories/toc/custom-selector.stories.ts
+++ b/code/addons/docs/template/stories/toc/custom-selector.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 export default {
   component: globalThis.Components.Button,
   tags: ['autodocs'],
diff --git a/code/addons/docs/template/stories/toc/custom-title.stories.ts b/code/addons/docs/template/stories/toc/custom-title.stories.ts
index 69303e905cd0..cc20cdde5637 100644
--- a/code/addons/docs/template/stories/toc/custom-title.stories.ts
+++ b/code/addons/docs/template/stories/toc/custom-title.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 export default {
   component: globalThis.Components.Button,
   tags: ['autodocs'],
diff --git a/code/addons/docs/template/stories/toc/ignore-selector.stories.ts b/code/addons/docs/template/stories/toc/ignore-selector.stories.ts
index 61ae6d12f2a7..793ae6c5bbac 100644
--- a/code/addons/docs/template/stories/toc/ignore-selector.stories.ts
+++ b/code/addons/docs/template/stories/toc/ignore-selector.stories.ts
@@ -1,5 +1,3 @@
-import { global as globalThis } from '@storybook/global';
-
 export default {
   component: globalThis.Components.Button,
   tags: ['autodocs'],
diff --git a/code/addons/essentials/README.md b/code/addons/essentials/README.md
index bdc351de5b74..03c1be091efe 100644
--- a/code/addons/essentials/README.md
+++ b/code/addons/essentials/README.md
@@ -2,7 +2,7 @@
 
 Storybook Essentials is a curated collection of addons to bring out the best of Storybook.
 
-Each addon is documented and maintained by the core team and will be upgraded alongside Storybook as the platform evolves. We will also do our best to maintain [framework support](https://storybook.js.org/docs/react/api/frameworks-feature-support) for all of the officially supported frameworks.
+Each addon is documented and maintained by the core team and will be upgraded alongside Storybook as the platform evolves. We will also do our best to maintain [framework support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) for all of the officially supported frameworks.
 
 ## Contents
 
diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json
index 6a1611d0a48e..0d8baa2a6099 100644
--- a/code/addons/essentials/package.json
+++ b/code/addons/essentials/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",
@@ -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/project.json b/code/addons/essentials/project.json
index 74274d0bb5e7..f354a1840421 100644
--- a/code/addons/essentials/project.json
+++ b/code/addons/essentials/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "essentials",
+  "name": "addon-essentials",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {
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/addons/gfm/package.json b/code/addons/gfm/package.json
index 37a490a15e46..cd39a40b45b1 100644
--- a/code/addons/gfm/package.json
+++ b/code/addons/gfm/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",
diff --git a/code/addons/gfm/project.json b/code/addons/gfm/project.json
index bb5861ab0d11..fea7870c840b 100644
--- a/code/addons/gfm/project.json
+++ b/code/addons/gfm/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "gfm",
+  "name": "addon-gfm",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {
diff --git a/code/addons/highlight/README.md b/code/addons/highlight/README.md
index 6f27d1fda606..88ebb9c6ae23 100644
--- a/code/addons/highlight/README.md
+++ b/code/addons/highlight/README.md
@@ -8,7 +8,7 @@ Use it to call attention to particular parts of the story. Or use it to enhance
 
 ## Usage
 
-This addon requires Storybook 6.5 or later. Highlight is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run the following command:
+This addon requires Storybook 6.5 or later. Highlight is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run the following command:
 
 yarn:
 
diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json
index 88bab3c462b3..c096a643d8c7 100644
--- a/code/addons/highlight/package.json
+++ b/code/addons/highlight/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",
diff --git a/code/addons/highlight/project.json b/code/addons/highlight/project.json
index 85847caedb9b..66b5104c0618 100644
--- a/code/addons/highlight/project.json
+++ b/code/addons/highlight/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "highlight",
+  "name": "addon-highlight",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {
diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json
index 9deb3a01105f..e11acb7b7951 100644
--- a/code/addons/interactions/package.json
+++ b/code/addons/interactions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",
diff --git a/code/addons/interactions/project.json b/code/addons/interactions/project.json
index 2dbab1cc3233..d2fd1ee2dab5 100644
--- a/code/addons/interactions/project.json
+++ b/code/addons/interactions/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "interactions",
+  "name": "addon-interactions",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {
diff --git a/code/addons/interactions/src/components/Interaction.tsx b/code/addons/interactions/src/components/Interaction.tsx
index 610d0c1b032b..4ceef384d02a 100644
--- a/code/addons/interactions/src/components/Interaction.tsx
+++ b/code/addons/interactions/src/components/Interaction.tsx
@@ -37,7 +37,7 @@ const RowContainer = styled('div', {
           ? transparentize(0.93, theme.color.negative)
           : theme.background.warning,
     }),
-    paddingLeft: call.ancestors.length * 20,
+    paddingLeft: (call.ancestors?.length ?? 0) * 20,
   }),
   ({ theme, call, pausedAt }) =>
     pausedAt === call.id && {
@@ -164,7 +164,7 @@ export const Interaction = ({
   pausedAt?: Call['id'];
 }) => {
   const [isHovered, setIsHovered] = React.useState(false);
-  const isInteractive = !controlStates.goto || !call.interceptable || !!call.ancestors.length;
+  const isInteractive = !controlStates.goto || !call.interceptable || !!call.ancestors?.length;
 
   if (isHidden) {
     return null;
diff --git a/code/addons/interactions/src/components/MethodCall.tsx b/code/addons/interactions/src/components/MethodCall.tsx
index fbe5ee038afb..c272f7863065 100644
--- a/code/addons/interactions/src/components/MethodCall.tsx
+++ b/code/addons/interactions/src/components/MethodCall.tsx
@@ -429,7 +429,7 @@ export const MethodCall = ({
     return <StepNode label={call.args[0]} />;
   }
 
-  const path = call.path.flatMap((elem, index) => {
+  const path = call.path?.flatMap((elem, index) => {
     // eslint-disable-next-line no-underscore-dangle
     const callId = (elem as CallRef).__callId__;
     return [
@@ -443,7 +443,7 @@ export const MethodCall = ({
     ];
   });
 
-  const args = call.args.flatMap((arg, index, array) => {
+  const args = call.args?.flatMap((arg, index, array) => {
     const node = <Node key={`node${index}`} value={arg} callsById={callsById} />;
     return index < array.length - 1
       ? [node, <span key={`comma${index}`}>,&nbsp;</span>, <wbr key={`wbr${index}`} />]
diff --git a/code/addons/interactions/src/preset.ts b/code/addons/interactions/src/preset.ts
index b58832d5e36e..2e3dae624042 100644
--- a/code/addons/interactions/src/preset.ts
+++ b/code/addons/interactions/src/preset.ts
@@ -18,3 +18,6 @@ export const checkActionsLoaded = (configDir: string) => {
     getConfig: (configFile) => serverRequire(configFile),
   });
 };
+
+// This annotation is read by addon-test, so it can throw an error if both addons are used
+export const ADDON_INTERACTIONS_IN_USE = true;
diff --git a/code/addons/interactions/src/utils.ts b/code/addons/interactions/src/utils.ts
index d80d9f4cdbee..cfdf6724f49d 100644
--- a/code/addons/interactions/src/utils.ts
+++ b/code/addons/interactions/src/utils.ts
@@ -30,6 +30,7 @@ export function createAnsiToHtmlFilter(theme: StorybookTheme) {
   return new Filter({
     fg: theme.color.defaultText,
     bg: theme.background.content,
+    escapeXML: true,
   });
 }
 
diff --git a/code/addons/interactions/template/stories/basics.stories.ts b/code/addons/interactions/template/stories/basics.stories.ts
index 2e07b7c0e624..2db5f0e016f3 100644
--- a/code/addons/interactions/template/stories/basics.stories.ts
+++ b/code/addons/interactions/template/stories/basics.stories.ts
@@ -115,10 +115,17 @@ const UserEventSetup = {
         { keys: '[TouchA>]', target: canvas.getByRole('textbox') },
         { keys: '[/TouchA]' },
       ]);
-      await user.tab();
-      await user.keyboard('{enter}');
       const submitButton = await canvas.findByRole('button');
-      await expect(submitButton).toHaveFocus();
+
+      if (navigator.userAgent.toLowerCase().includes('firefox')) {
+        // user event has a few issues on firefox, therefore we do it differently
+        await fireEvent.click(submitButton);
+      } else {
+        await user.tab();
+        await user.keyboard('{enter}');
+        await expect(submitButton).toHaveFocus();
+      }
+
       await expect(args.onSuccess).toHaveBeenCalled();
     });
   },
diff --git a/code/addons/jest/README.md b/code/addons/jest/README.md
index 73b37e6dc21c..16c85d8fe260 100644
--- a/code/addons/jest/README.md
+++ b/code/addons/jest/README.md
@@ -2,7 +2,7 @@
 
 Storybook addon for inspecting Jest unit test results.
 
-[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
+[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
 
 [![Storybook Jest Addon Demo](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/jest/docs/storybook-addon-jest.gif)](http://storybooks-official.netlify.com/?selectedKind=Addons%7Cjest&selectedStory=withTests&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Ftests%2Fpanel)
 
@@ -20,7 +20,7 @@ Or if you're using yarn as a package manager:
 
 ## Configuration
 
-Register the addon in your [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project):
+Register the addon in your [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
 
 ```js
 export default {
@@ -84,7 +84,7 @@ Assuming that you have already created a test file for your component (e.g., `My
 
 ### Story-level
 
-In your story file, add a [decorator](https://storybook.js.org/docs/react/writing-stories/decorators) to your story's default export to display the results:
+In your story file, add a [decorator](https://storybook.js.org/docs/writing-stories/decorators) to your story's default export to display the results:
 
 ```js
 // MyComponent.stories.js|jsx
@@ -99,7 +99,7 @@ export default {
 };
 ```
 
-You can also add multiple tests results within your story by including the `jest` [parameter](https://storybook.js.org/docs/react/writing-stories/parameters), for example:
+You can also add multiple tests results within your story by including the `jest` [parameter](https://storybook.js.org/docs/writing-stories/parameters), for example:
 
 ```js
 // MyComponent.stories.js|jsx
@@ -130,7 +130,7 @@ Default.parameters = {
 ### Global level
 
 To avoid importing the results of the tests in each story, you can update
-your [`.storybook/preview.js`](https://storybook.js.org/docs/react/configure/#configure-story-rendering) and include a decorator allowing you to display the results only for the stories that have the `jest` parameter defined:
+your [`.storybook/preview.js`](https://storybook.js.org/docs/configure#configure-story-rendering) and include a decorator allowing you to display the results only for the stories that have the `jest` parameter defined:
 
 ```js
 // .storybook/preview.js
diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json
index 8fb9fc0b47d7..49eda0998378 100644
--- a/code/addons/jest/package.json
+++ b/code/addons/jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",
@@ -58,7 +58,7 @@
     "upath": "^2.0.1"
   },
   "devDependencies": {
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-resize-detector": "^7.1.2",
diff --git a/code/addons/jest/project.json b/code/addons/jest/project.json
index e7852e6415fc..226ea5597330 100644
--- a/code/addons/jest/project.json
+++ b/code/addons/jest/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "jest",
+  "name": "addon-jest",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {
diff --git a/code/addons/links/README.md b/code/addons/links/README.md
index cc50832328fa..51066f17e69c 100644
--- a/code/addons/links/README.md
+++ b/code/addons/links/README.md
@@ -2,7 +2,7 @@
 
 The Storybook Links addon can be used to create links that navigate between stories in [Storybook](https://storybook.js.org).
 
-[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
+[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
 
 ## Getting Started
 
diff --git a/code/addons/links/package.json b/code/addons/links/package.json
index ca95baea88ac..553f715bce4e 100644
--- a/code/addons/links/package.json
+++ b/code/addons/links/package.json
@@ -1,10 +1,9 @@
 {
   "name": "@storybook/addon-links",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
-    "addon",
-    "storybook",
+    "storybook-addons",
     "organize"
   ],
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/links",
@@ -66,7 +65,7 @@
     "prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "^0.1.11",
+    "@storybook/csf": "0.1.12",
     "@storybook/global": "^5.0.0",
     "ts-dedent": "^2.0.0"
   },
diff --git a/code/addons/links/project.json b/code/addons/links/project.json
index 60e9238ad5ad..7f246ffb677b 100644
--- a/code/addons/links/project.json
+++ b/code/addons/links/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "links",
+  "name": "addon-links",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {
diff --git a/code/addons/measure/README.md b/code/addons/measure/README.md
index 8e280f150124..985e4a72342d 100644
--- a/code/addons/measure/README.md
+++ b/code/addons/measure/README.md
@@ -12,7 +12,7 @@ Storybook addon for inspecting layouts and visualizing the box model.
 
 ## Usage
 
-This addon requires Storybook 6.3 or later. Measure is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
+This addon requires Storybook 6.3 or later. Measure is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
 
 ```sh
 npm i -D @storybook/addon-measure
diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json
index b09da705f4e1..9833652a6fad 100644
--- a/code/addons/measure/package.json
+++ b/code/addons/measure/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",
@@ -71,7 +71,7 @@
     "tiny-invariant": "^1.3.1"
   },
   "devDependencies": {
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.3.2"
diff --git a/code/addons/measure/project.json b/code/addons/measure/project.json
index deaa4529c04d..60e8867d2e88 100644
--- a/code/addons/measure/project.json
+++ b/code/addons/measure/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "measure",
+  "name": "addon-measure",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {
diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json
index c33ab5d84d22..43723a24d6e5 100644
--- a/code/addons/onboarding/package.json
+++ b/code/addons/onboarding/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-onboarding",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
   "keywords": [
     "storybook-addons",
@@ -44,12 +44,10 @@
     "check": "jiti ../../../scripts/prepare/check.ts",
     "prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
   },
-  "dependencies": {
-    "react-confetti": "^6.1.0"
-  },
   "devDependencies": {
+    "@neoconfetti/react": "^1.0.0",
     "@radix-ui/react-dialog": "^1.0.5",
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "@storybook/react": "workspace:*",
     "framer-motion": "^11.0.3",
     "react": "^18.2.0",
diff --git a/code/addons/onboarding/project.json b/code/addons/onboarding/project.json
index f2f83ffd6d64..75697db7494a 100644
--- a/code/addons/onboarding/project.json
+++ b/code/addons/onboarding/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "onboarding",
+  "name": "addon-onboarding",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {
diff --git a/code/addons/onboarding/src/Onboarding.tsx b/code/addons/onboarding/src/Onboarding.tsx
index b861d918204a..54e264f67254 100644
--- a/code/addons/onboarding/src/Onboarding.tsx
+++ b/code/addons/onboarding/src/Onboarding.tsx
@@ -268,17 +268,7 @@ export default function Onboarding({ api }: { api: API }) {
 
   return (
     <ThemeProvider theme={theme}>
-      {showConfetti && (
-        <Confetti
-          numberOfPieces={800}
-          recycle={false}
-          tweenDuration={20000}
-          onConfettiComplete={(confetti) => {
-            confetti?.reset();
-            setShowConfetti(false);
-          }}
-        />
-      )}
+      {showConfetti && <Confetti />}
       {step === '1:Intro' ? (
         <SplashScreen onDismiss={() => setStep('2:Controls')} />
       ) : (
diff --git a/code/addons/onboarding/src/components/Confetti/Confetti.stories.tsx b/code/addons/onboarding/src/components/Confetti/Confetti.stories.tsx
index b55fdf783b34..3540aadc2a85 100644
--- a/code/addons/onboarding/src/components/Confetti/Confetti.stories.tsx
+++ b/code/addons/onboarding/src/components/Confetti/Confetti.stories.tsx
@@ -8,11 +8,19 @@ const meta: Meta<typeof Confetti> = {
   component: Confetti,
   parameters: {
     chromatic: { disableSnapshot: true },
+    layout: 'fullscreen',
   },
   decorators: [
     (StoryFn) => (
-      <div style={{ height: '100vh', width: '100vw' }}>
-        <button>I am clickable</button>
+      <div
+        style={{
+          height: '100vh',
+          width: '100vw',
+          alignContent: 'center',
+          textAlign: 'center',
+        }}
+      >
+        <span>Falling confetti! 🎉</span>
         <StoryFn />
       </div>
     ),
@@ -23,41 +31,4 @@ export default meta;
 
 type Story = StoryObj<typeof Confetti>;
 
-export const Default: Story = {
-  args: {
-    recycle: true,
-    numberOfPieces: 200,
-    top: undefined,
-    left: undefined,
-    width: undefined,
-    height: undefined,
-    friction: 0.99,
-    wind: 0,
-    gravity: 0.1,
-    initialVelocityX: 4,
-    initialVelocityY: 10,
-    tweenDuration: 5000,
-  },
-};
-
-export const OneTimeConfetti: Story = {
-  args: {
-    ...Default.args,
-    numberOfPieces: 800,
-    recycle: false,
-    tweenDuration: 20000,
-    onConfettiComplete: (confetti) => {
-      confetti?.reset();
-    },
-  },
-};
-
-export const Positioned: Story = {
-  args: {
-    ...Default.args,
-    top: 100,
-    left: 300,
-    width: 300,
-    height: 250,
-  },
-};
+export const Default: Story = {};
diff --git a/code/addons/onboarding/src/components/Confetti/Confetti.tsx b/code/addons/onboarding/src/components/Confetti/Confetti.tsx
index b9b816d3e051..cebc40454909 100644
--- a/code/addons/onboarding/src/components/Confetti/Confetti.tsx
+++ b/code/addons/onboarding/src/components/Confetti/Confetti.tsx
@@ -1,131 +1,34 @@
-import React, { useEffect } from 'react';
-import { useState } from 'react';
-import { createPortal } from 'react-dom';
+import React, { type ComponentProps } from 'react';
 
 import { styled } from 'storybook/internal/theming';
 
-import ReactConfetti from 'react-confetti';
+import { Confetti as ReactConfetti } from '@neoconfetti/react';
 
-interface ConfettiProps extends Omit<React.ComponentProps<typeof ReactConfetti>, 'drawShape'> {
-  top?: number;
-  left?: number;
-  width?: number;
-  height?: number;
-  numberOfPieces?: number;
-  recycle?: boolean;
-  colors?: string[];
-}
+const Wrapper = styled.div({
+  zIndex: 9999,
+  position: 'fixed',
+  top: 0,
+  left: '50%',
+  width: '50%',
+  height: '100%',
+});
 
-const Wrapper = styled.div<{
-  width: number;
-  height: number;
-  top: number;
-  left: number;
-}>(({ width, height, left, top }) => ({
-  width: `${width}px`,
-  height: `${height}px`,
-  left: `${left}px`,
-  top: `${top}px`,
-  position: 'relative',
-  overflow: 'hidden',
-}));
-
-export function Confetti({
-  top = 0,
-  left = 0,
-  width = window.innerWidth,
-  height = window.innerHeight,
+export const Confetti = React.memo(function Confetti({
+  timeToFade = 5000,
   colors = ['#CA90FF', '#FC521F', '#66BF3C', '#FF4785', '#FFAE00', '#1EA7FD'],
   ...confettiProps
-}: ConfettiProps): React.ReactPortal {
-  const [confettiContainer] = useState(() => {
-    const container = document.createElement('div');
-    container.setAttribute('id', 'confetti-container');
-    container.setAttribute(
-      'style',
-      'position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999;'
-    );
-
-    return container;
-  });
-
-  useEffect(() => {
-    document.body.appendChild(confettiContainer);
-
-    return () => {
-      document.body.removeChild(confettiContainer);
-    };
-  }, []);
-
-  return createPortal(
-    <Wrapper top={top} left={left} width={width} height={height}>
-      <ReactConfetti colors={colors} drawShape={draw} {...confettiProps} />
-    </Wrapper>,
-    confettiContainer
+}: ComponentProps<typeof ReactConfetti> & { timeToFade?: number }) {
+  return (
+    <Wrapper>
+      <ReactConfetti
+        colors={colors}
+        particleCount={200}
+        duration={5000}
+        stageHeight={window.innerHeight}
+        stageWidth={window.innerWidth}
+        destroyAfterDone
+        {...confettiProps}
+      />
+    </Wrapper>
   );
-}
-
-enum ParticleShape {
-  Circle = 1,
-  Square = 2,
-  TShape = 3,
-  LShape = 4,
-  Triangle = 5,
-  QuarterCircle = 6,
-}
-
-function getRandomInt(min: number, max: number) {
-  return Math.floor(Math.random() * (max - min)) + min;
-}
-
-function draw(this: any, context: CanvasRenderingContext2D) {
-  this.shape = this.shape || getRandomInt(1, 6);
-
-  switch (this.shape) {
-    case ParticleShape.Square: {
-      const cornerRadius = 2;
-      const width = this.w / 2;
-      const height = this.h / 2;
-
-      context.moveTo(-width + cornerRadius, -height);
-      context.lineTo(width - cornerRadius, -height);
-      context.arcTo(width, -height, width, -height + cornerRadius, cornerRadius);
-      context.lineTo(width, height - cornerRadius);
-      context.arcTo(width, height, width - cornerRadius, height, cornerRadius);
-      context.lineTo(-width + cornerRadius, height);
-      context.arcTo(-width, height, -width, height - cornerRadius, cornerRadius);
-      context.lineTo(-width, -height + cornerRadius);
-      context.arcTo(-width, -height, -width + cornerRadius, -height, cornerRadius);
-
-      break;
-    }
-    case ParticleShape.TShape: {
-      context.rect(-4, -4, 8, 16);
-      context.rect(-12, -4, 24, 8);
-      break;
-    }
-    case ParticleShape.LShape: {
-      context.rect(-4, -4, 8, 16);
-      context.rect(-4, -4, 24, 8);
-      break;
-    }
-    case ParticleShape.Circle: {
-      context.arc(0, 0, this.radius, 0, 2 * Math.PI);
-      break;
-    }
-    case ParticleShape.Triangle: {
-      context.moveTo(16, 4);
-      context.lineTo(4, 24);
-      context.lineTo(24, 24);
-      break;
-    }
-    case ParticleShape.QuarterCircle: {
-      context.arc(4, -4, 4, -Math.PI / 2, 0);
-      context.lineTo(4, 0);
-      break;
-    }
-  }
-
-  context.closePath();
-  context.fill();
-}
+});
diff --git a/code/addons/onboarding/src/features/GuidedTour/GuidedTour.tsx b/code/addons/onboarding/src/features/GuidedTour/GuidedTour.tsx
index 56bbb75e7d50..8ba6930efb5e 100644
--- a/code/addons/onboarding/src/features/GuidedTour/GuidedTour.tsx
+++ b/code/addons/onboarding/src/features/GuidedTour/GuidedTour.tsx
@@ -23,7 +23,7 @@ export function GuidedTour({
   const theme = useTheme();
 
   useEffect(() => {
-    let timeout: NodeJS.Timeout;
+    let timeout: ReturnType<typeof setTimeout>;
     setStepIndex((current) => {
       const index = steps.findIndex(({ key }) => key === step);
 
diff --git a/code/addons/outline/README.md b/code/addons/outline/README.md
index e73da501a3f6..6d7dd53b6ef2 100644
--- a/code/addons/outline/README.md
+++ b/code/addons/outline/README.md
@@ -6,13 +6,13 @@ Storybook Addon Outline can be used for visually debugging CSS layout and alignm
 
 ## Usage
 
-Requires Storybook 6.1 or later. Outline is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
+Requires Storybook 6.1 or later. Outline is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
 
 ```sh
 npm i -D @storybook/addon-outline
 ```
 
-Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project):
+Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
 
 ```js
 export default {
diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json
index 918c00c7945f..949927f567ee 100644
--- a/code/addons/outline/package.json
+++ b/code/addons/outline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",
@@ -61,7 +61,7 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.3.2"
diff --git a/code/addons/outline/project.json b/code/addons/outline/project.json
index 5183adf1235e..ed8081003447 100644
--- a/code/addons/outline/project.json
+++ b/code/addons/outline/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "outline",
+  "name": "addon-outline",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {
diff --git a/code/addons/storysource/README.md b/code/addons/storysource/README.md
index e460cc6ac058..2427d89eb324 100644
--- a/code/addons/storysource/README.md
+++ b/code/addons/storysource/README.md
@@ -2,7 +2,7 @@
 
 This addon is used to show stories source in the addon panel.
 
-[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
+[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
 
 ![Storysource Demo](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/storysource/docs/demo.gif)
 
@@ -56,7 +56,7 @@ To customize the `source-loader`, pass `loaderOptions`. Valid configurations are
 
 ## Theming
 
-Storysource will automatically use the light or dark syntax theme based on your storybook theme. See [Theming Storybook](https://storybook.js.org/docs/react/configure/theming) for more information.
+Storysource will automatically use the light or dark syntax theme based on your storybook theme. See [Theming Storybook](https://storybook.js.org/docs/configure/user-interface/theming) for more information.
 
 ![Storysource Light/Dark Themes](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/storysource/docs/theming-light-dark.png)
 
diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json
index e79924cda4db..80bf2c7bba1a 100644
--- a/code/addons/storysource/package.json
+++ b/code/addons/storysource/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",
diff --git a/code/addons/storysource/project.json b/code/addons/storysource/project.json
index 9ebd0d3c0829..21fe2fc0731b 100644
--- a/code/addons/storysource/project.json
+++ b/code/addons/storysource/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "storysource",
+  "name": "addon-storysource",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {
diff --git a/code/addons/test/manager.js b/code/addons/test/manager.js
new file mode 100644
index 000000000000..280488a50c10
--- /dev/null
+++ b/code/addons/test/manager.js
@@ -0,0 +1 @@
+require('./dist/manager');
diff --git a/code/addons/test/manager.mjs b/code/addons/test/manager.mjs
new file mode 100644
index 000000000000..8a2eae4ffce1
--- /dev/null
+++ b/code/addons/test/manager.mjs
@@ -0,0 +1 @@
+import './dist/manager';
diff --git a/code/addons/test/package.json b/code/addons/test/package.json
index 09f9235271f4..22add74762d1 100644
--- a/code/addons/test/package.json
+++ b/code/addons/test/package.json
@@ -1,12 +1,13 @@
 {
   "name": "@storybook/experimental-addon-test",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Integrate Vitest with Storybook",
   "keywords": [
     "storybook-addons",
     "addon-test",
     "vitest",
-    "testing"
+    "testing",
+    "test"
   ],
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/test",
   "bugs": {
@@ -22,39 +23,48 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
-  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
     },
     "./vitest-plugin": {
       "types": "./dist/vitest-plugin/index.d.ts",
-      "import": "./dist/vitest-plugin/index.js",
-      "require": "./dist/vitest-plugin/index.cjs"
+      "import": "./dist/vitest-plugin/index.mjs",
+      "require": "./dist/vitest-plugin/index.js"
     },
     "./internal/global-setup": {
       "types": "./dist/vitest-plugin/global-setup.d.ts",
-      "import": "./dist/vitest-plugin/global-setup.js",
-      "require": "./dist/vitest-plugin/global-setup.cjs"
+      "import": "./dist/vitest-plugin/global-setup.mjs",
+      "require": "./dist/vitest-plugin/global-setup.js"
     },
     "./internal/setup-file": {
       "types": "./dist/vitest-plugin/setup-file.d.ts",
-      "import": "./dist/vitest-plugin/setup-file.js"
+      "import": "./dist/vitest-plugin/setup-file.mjs"
     },
     "./internal/test-utils": {
       "types": "./dist/vitest-plugin/test-utils.d.ts",
-      "import": "./dist/vitest-plugin/test-utils.js",
-      "require": "./dist/vitest-plugin/test-utils.cjs"
+      "import": "./dist/vitest-plugin/test-utils.mjs",
+      "require": "./dist/vitest-plugin/test-utils.js"
+    },
+    "./internal/coverage-reporter": {
+      "types": "./dist/node/coverage-reporter.d.ts",
+      "import": "./dist/node/coverage-reporter.mjs",
+      "require": "./dist/node/coverage-reporter.js"
+    },
+    "./preview": {
+      "types": "./dist/preview.d.ts",
+      "import": "./dist/preview.mjs",
+      "require": "./dist/preview.js"
     },
     "./manager": "./dist/manager.js",
-    "./preset": "./dist/preset.cjs",
-    "./postinstall": "./dist/postinstall.cjs",
+    "./preset": "./dist/preset.js",
+    "./postinstall": "./dist/postinstall.js",
     "./package.json": "./package.json"
   },
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "files": [
     "dist/**/*",
@@ -70,22 +80,59 @@
     "prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "^0.1.11"
+    "@storybook/csf": "0.1.12",
+    "@storybook/global": "^5.0.0",
+    "@storybook/icons": "^1.2.12",
+    "@storybook/instrumenter": "workspace:*",
+    "@storybook/test": "workspace:*",
+    "polished": "^4.2.2",
+    "prompts": "^2.4.0",
+    "ts-dedent": "^2.2.0"
   },
   "devDependencies": {
+    "@devtools-ds/object-inspector": "^1.1.2",
+    "@types/istanbul-lib-report": "^3.0.3",
+    "@types/node": "^22.0.0",
     "@types/semver": "^7",
-    "@vitest/browser": "^2.0.0",
+    "@vitest/browser": "^2.1.3",
+    "@vitest/runner": "^2.1.3",
+    "ansi-to-html": "^0.7.2",
     "boxen": "^8.0.1",
+    "es-toolkit": "^1.22.0",
+    "execa": "^8.0.1",
     "find-up": "^7.0.0",
+    "formik": "^2.2.9",
+    "istanbul-lib-report": "^3.0.1",
+    "pathe": "^1.1.2",
+    "picocolors": "^1.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "semver": "^7.6.3",
-    "tinyrainbow": "^1.2.0",
+    "sirv": "^2.0.4",
+    "slash": "^5.0.0",
+    "strip-ansi": "^7.1.0",
+    "tinyglobby": "^0.2.10",
+    "tree-kill": "^1.2.2",
     "ts-dedent": "^2.2.0",
-    "vitest": "^2.0.0"
+    "typescript": "^5.3.2",
+    "vitest": "^2.1.3"
   },
   "peerDependencies": {
-    "@vitest/browser": "^2.0.0",
+    "@vitest/browser": "^2.1.1",
+    "@vitest/runner": "^2.1.1",
     "storybook": "workspace:^",
-    "vitest": "^2.0.0"
+    "vitest": "^2.1.1"
+  },
+  "peerDependenciesMeta": {
+    "@vitest/browser": {
+      "optional": true
+    },
+    "@vitest/runner": {
+      "optional": true
+    },
+    "vitest": {
+      "optional": true
+    }
   },
   "publishConfig": {
     "access": "public"
@@ -99,11 +146,23 @@
     "managerEntries": [
       "./src/manager.tsx"
     ],
+    "previewEntries": [
+      "./src/preview.ts"
+    ],
     "nodeEntries": [
       "./src/preset.ts",
       "./src/vitest-plugin/index.ts",
       "./src/vitest-plugin/global-setup.ts",
-      "./src/postinstall.ts"
+      "./src/postinstall.ts",
+      "./src/node/vitest.ts",
+      "./src/node/coverage-reporter.ts"
     ]
+  },
+  "storybook": {
+    "displayName": "Test",
+    "unsupportedFrameworks": [
+      "react-native"
+    ],
+    "icon": "https://user-images.githubusercontent.com/263385/101991666-479cc600-3c7c-11eb-837b-be4e5ffa1bb8.png"
   }
 }
diff --git a/code/addons/test/postinstall.cjs b/code/addons/test/postinstall.cjs
deleted file mode 100644
index 29374d2a9382..000000000000
--- a/code/addons/test/postinstall.cjs
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./dist/postinstall.cjs');
diff --git a/code/addons/test/postinstall.js b/code/addons/test/postinstall.js
new file mode 100644
index 000000000000..e543456ba157
--- /dev/null
+++ b/code/addons/test/postinstall.js
@@ -0,0 +1 @@
+module.exports = require('./dist/postinstall');
diff --git a/code/addons/test/postinstall.mjs b/code/addons/test/postinstall.mjs
new file mode 100644
index 000000000000..d73f1904173d
--- /dev/null
+++ b/code/addons/test/postinstall.mjs
@@ -0,0 +1 @@
+export * from './dist/postinstall.mjs';
diff --git a/code/addons/test/preset.cjs b/code/addons/test/preset.cjs
deleted file mode 100644
index 4c4e36fbb3bb..000000000000
--- a/code/addons/test/preset.cjs
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = {
-  ...require('./dist/preset.cjs'),
-};
diff --git a/code/addons/test/preset.js b/code/addons/test/preset.js
new file mode 100644
index 000000000000..a83f95279e7f
--- /dev/null
+++ b/code/addons/test/preset.js
@@ -0,0 +1 @@
+module.exports = require('./dist/preset');
diff --git a/code/addons/test/preset.mjs b/code/addons/test/preset.mjs
new file mode 100644
index 000000000000..510233d53efa
--- /dev/null
+++ b/code/addons/test/preset.mjs
@@ -0,0 +1 @@
+export * from './dist/preset.mjs';
diff --git a/code/addons/test/preview.js b/code/addons/test/preview.js
new file mode 100644
index 000000000000..49ad602f79f4
--- /dev/null
+++ b/code/addons/test/preview.js
@@ -0,0 +1 @@
+export * from './dist/preview';
diff --git a/code/addons/test/project.json b/code/addons/test/project.json
index 96314d1efc94..c23ed17fc57b 100644
--- a/code/addons/test/project.json
+++ b/code/addons/test/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "addon-test",
+  "name": "experimental-addon-test",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {
diff --git a/code/addons/test/src/components/ContextMenuItem.tsx b/code/addons/test/src/components/ContextMenuItem.tsx
new file mode 100644
index 000000000000..229a396b5388
--- /dev/null
+++ b/code/addons/test/src/components/ContextMenuItem.tsx
@@ -0,0 +1,76 @@
+import React, {
+  type FC,
+  type SyntheticEvent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+
+import { Button, ListItem } from 'storybook/internal/components';
+import type { TestProviderConfig } from 'storybook/internal/core-events';
+import { useStorybookApi } from 'storybook/internal/manager-api';
+import { useTheme } from 'storybook/internal/theming';
+import { type API_HashEntry, type Addon_TestProviderState } from 'storybook/internal/types';
+
+import { PlayHollowIcon, StopAltHollowIcon } from '@storybook/icons';
+
+import { type Config, type Details, TEST_PROVIDER_ID } from '../constants';
+import { Description } from './Description';
+import { Title } from './Title';
+
+export const ContextMenuItem: FC<{
+  context: API_HashEntry;
+  state: TestProviderConfig & Addon_TestProviderState<Details, Config>;
+}> = ({ context, state }) => {
+  const api = useStorybookApi();
+  const [isDisabled, setDisabled] = useState(false);
+
+  const id = useRef(context.id);
+  id.current = context.id;
+
+  const Icon = state.running ? StopAltHollowIcon : PlayHollowIcon;
+
+  useEffect(() => {
+    setDisabled(false);
+  }, [state.running]);
+
+  const onClick = useCallback(
+    (event: SyntheticEvent) => {
+      setDisabled(true);
+      event.stopPropagation();
+      if (state.running) {
+        api.cancelTestProvider(TEST_PROVIDER_ID);
+      } else {
+        api.runTestProvider(TEST_PROVIDER_ID, { entryId: id.current });
+      }
+    },
+    [api, state.running]
+  );
+
+  const theme = useTheme();
+
+  return (
+    <div
+      onClick={(event) => {
+        // stopPropagation to prevent the parent from closing the context menu, which is the default behavior onClick
+        event.stopPropagation();
+      }}
+    >
+      <ListItem
+        title={<Title state={state} />}
+        center={<Description state={state} />}
+        right={
+          <Button
+            onClick={onClick}
+            variant="ghost"
+            padding="small"
+            disabled={state.crashed || isDisabled}
+          >
+            <Icon fill={theme.textMutedColor} />
+          </Button>
+        }
+      />
+    </div>
+  );
+};
diff --git a/code/addons/test/src/components/Description.tsx b/code/addons/test/src/components/Description.tsx
new file mode 100644
index 000000000000..58a80dbfdccc
--- /dev/null
+++ b/code/addons/test/src/components/Description.tsx
@@ -0,0 +1,73 @@
+import React, { type ComponentProps, useEffect } from 'react';
+
+import { Link as LinkComponent } from 'storybook/internal/components';
+import { type TestProviderConfig, type TestProviderState } from 'storybook/internal/core-events';
+import { styled } from 'storybook/internal/theming';
+
+import { GlobalErrorContext } from './GlobalErrorModal';
+import { RelativeTime } from './RelativeTime';
+
+export const Wrapper = styled.div(({ theme }) => ({
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  fontSize: theme.typography.size.s1,
+  color: theme.textMutedColor,
+}));
+
+const PositiveText = styled.span(({ theme }) => ({
+  color: theme.color.positiveText,
+}));
+
+interface DescriptionProps extends ComponentProps<typeof Wrapper> {
+  state: TestProviderConfig & TestProviderState;
+}
+
+export function Description({ state, ...props }: DescriptionProps) {
+  const isMounted = React.useRef(false);
+  const [isUpdated, setUpdated] = React.useState(false);
+  const { setModalOpen } = React.useContext(GlobalErrorContext);
+
+  useEffect(() => {
+    if (isMounted.current) {
+      setUpdated(true);
+      const timeout = setTimeout(setUpdated, 2000, false);
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
+    isMounted.current = true;
+  }, [state.config]);
+
+  const errorMessage = state.error?.message;
+
+  let description: string | React.ReactNode = 'Not run';
+  if (isUpdated) {
+    description = <PositiveText>Settings updated</PositiveText>;
+  } else if (state.running) {
+    description = state.progress
+      ? `Testing... ${state.progress.numPassedTests}/${state.progress.numTotalTests}`
+      : 'Starting...';
+  } else if (state.failed && !errorMessage) {
+    description = 'Failed';
+  } else if (state.crashed || (state.failed && errorMessage)) {
+    description = (
+      <>
+        <LinkComponent isButton onClick={() => setModalOpen(true)}>
+          {state.error?.name || 'View full error'}
+        </LinkComponent>
+      </>
+    );
+  } else if (state.progress?.finishedAt) {
+    description = (
+      <>
+        Ran {state.progress.numTotalTests} {state.progress.numTotalTests === 1 ? 'test' : 'tests'}{' '}
+        <RelativeTime timestamp={state.progress.finishedAt} />
+      </>
+    );
+  } else if (state.watching) {
+    description = 'Watching for file changes';
+  }
+
+  return <Wrapper {...props}>{description}</Wrapper>;
+}
diff --git a/code/addons/test/src/components/EmptyState.tsx b/code/addons/test/src/components/EmptyState.tsx
new file mode 100644
index 000000000000..0768a9864946
--- /dev/null
+++ b/code/addons/test/src/components/EmptyState.tsx
@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from 'react';
+
+import { EmptyTabContent, Link } from 'storybook/internal/components';
+import { useStorybookApi } from 'storybook/internal/manager-api';
+import { styled } from 'storybook/internal/theming';
+
+import { DocumentIcon, VideoIcon } from '@storybook/icons';
+
+import { DOCUMENTATION_LINK, TUTORIAL_VIDEO_LINK } from '../constants';
+
+const Links = styled.div(({ theme }) => ({
+  display: 'flex',
+  fontSize: theme.typography.size.s2 - 1,
+  gap: 25,
+}));
+
+const Divider = styled.div(({ theme }) => ({
+  width: 1,
+  height: 16,
+  backgroundColor: theme.appBorderColor,
+}));
+
+export const Empty = () => {
+  const [isLoading, setIsLoading] = useState(true);
+  const api = useStorybookApi();
+  const docsUrl = api.getDocsUrl({
+    subpath: DOCUMENTATION_LINK,
+    versioned: true,
+    renderer: true,
+  });
+
+  // We are adding a small delay to avoid flickering when the story is loading.
+  // It takes a bit of time for the controls to appear, so we don't want
+  // to show the empty state for a split second.
+  useEffect(() => {
+    const load = setTimeout(() => {
+      setIsLoading(false);
+    }, 100);
+
+    return () => clearTimeout(load);
+  }, []);
+
+  if (isLoading) {
+    return null;
+  }
+
+  return (
+    <EmptyTabContent
+      title="Interaction testing"
+      description={
+        <>
+          Interaction tests allow you to verify the functional aspects of UIs. Write a play function
+          for your story and you&apos;ll see it run here.
+        </>
+      }
+      footer={
+        <Links>
+          <Link href={TUTORIAL_VIDEO_LINK} target="_blank" withArrow>
+            <VideoIcon /> Watch 8m video
+          </Link>
+          <Divider />
+          <Link href={docsUrl} target="_blank" withArrow>
+            <DocumentIcon /> Read docs
+          </Link>
+        </Links>
+      }
+    />
+  );
+};
diff --git a/code/addons/test/src/components/GlobalErrorModal.stories.tsx b/code/addons/test/src/components/GlobalErrorModal.stories.tsx
new file mode 100644
index 000000000000..773ff178f17a
--- /dev/null
+++ b/code/addons/test/src/components/GlobalErrorModal.stories.tsx
@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+
+import { ManagerContext } from 'storybook/internal/manager-api';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, within } from '@storybook/test';
+
+import dedent from 'ts-dedent';
+
+import { GlobalErrorContext, GlobalErrorModal } from './GlobalErrorModal';
+
+type Story = StoryObj<typeof meta>;
+
+const managerContext: any = {
+  state: {},
+  api: {
+    getDocsUrl: fn(({ subpath }) => `https://storybook.js.org/docs/${subpath}`).mockName(
+      'api::getDocsUrl'
+    ),
+  },
+};
+
+const meta = {
+  component: GlobalErrorModal,
+  decorators: [
+    (storyFn) => (
+      <ManagerContext.Provider value={managerContext}>
+        <div
+          style={{
+            width: '100%',
+            minWidth: '1200px',
+            height: '800px',
+            background:
+              'repeating-linear-gradient(45deg, #000000, #ffffff 50px, #ffffff 50px, #ffffff 80px)',
+          }}
+        >
+          {storyFn()}
+        </div>
+      </ManagerContext.Provider>
+    ),
+  ],
+  args: {
+    onRerun: fn(),
+  },
+} satisfies Meta<typeof GlobalErrorModal>;
+
+export default meta;
+
+export const Default: Story = {
+  render: (props) => {
+    const [isModalOpen, setModalOpen] = useState(false);
+    const error = dedent`
+      ReferenceError: FAIL is not defined
+        at Constraint.execute (the-best-file.js:525:2)
+        at Constraint.recalculate (the-best-file.js:424:21)
+        at Planner.addPropagate (the-best-file.js:701:6)
+        at Constraint.satisfy (the-best-file.js:184:15)
+        at Planner.incrementalAdd (the-best-file.js:591:21)
+        at Constraint.addConstraint (the-best-file.js:162:10)
+        at Constraint.BinaryConstraint (the-best-file.js:346:7)
+        at Constraint.EqualityConstraint (the-best-file.js:515:38)
+        at chainTest (the-best-file.js:807:6)
+        at deltaBlue (the-best-file.js:879:2)`;
+
+    return (
+      <GlobalErrorContext.Provider value={{ isModalOpen, setModalOpen, error }}>
+        <GlobalErrorModal {...props} />
+        <button onClick={() => setModalOpen(true)}>Open modal</button>
+      </GlobalErrorContext.Provider>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement.parentElement!);
+    const button = canvas.getByText('Open modal');
+    await userEvent.click(button);
+    await expect(canvas.findByText('Storybook Tests error details')).resolves.toBeInTheDocument();
+  },
+};
diff --git a/code/addons/test/src/components/GlobalErrorModal.tsx b/code/addons/test/src/components/GlobalErrorModal.tsx
new file mode 100644
index 000000000000..f1a8c541802b
--- /dev/null
+++ b/code/addons/test/src/components/GlobalErrorModal.tsx
@@ -0,0 +1,100 @@
+import React, { useContext } from 'react';
+
+import { Button, IconButton, Modal } from 'storybook/internal/components';
+import { useStorybookApi } from 'storybook/internal/manager-api';
+import { styled } from 'storybook/internal/theming';
+
+import { CloseIcon, SyncIcon } from '@storybook/icons';
+
+import { DOCUMENTATION_FATAL_ERROR_LINK } from '../constants';
+
+const ModalBar = styled.div({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '6px 6px 6px 20px',
+});
+
+const ModalActionBar = styled.div({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+const ModalTitle = styled.div(({ theme: { typography } }) => ({
+  fontSize: typography.size.s2,
+  fontWeight: typography.weight.bold,
+}));
+
+const ModalStackTrace = styled.pre(({ theme }) => ({
+  whiteSpace: 'pre-wrap',
+  overflow: 'auto',
+  maxHeight: '60vh',
+  margin: 0,
+  padding: `20px`,
+  fontFamily: theme.typography.fonts.mono,
+  fontSize: '12px',
+  borderTop: `1px solid ${theme.appBorderColor}`,
+  borderRadius: 0,
+}));
+
+const TroubleshootLink = styled.a(({ theme }) => ({
+  color: theme.color.defaultText,
+}));
+
+export const GlobalErrorContext = React.createContext<{
+  isModalOpen: boolean;
+  setModalOpen: (isOpen: boolean) => void;
+  error?: string;
+}>({
+  isModalOpen: false,
+  setModalOpen: () => {},
+  error: undefined,
+});
+
+interface GlobalErrorModalProps {
+  onRerun: () => void;
+}
+
+export function GlobalErrorModal({ onRerun }: GlobalErrorModalProps) {
+  const api = useStorybookApi();
+  const { error, isModalOpen, setModalOpen } = useContext(GlobalErrorContext);
+  const handleClose = () => setModalOpen(false);
+
+  const troubleshootURL = api.getDocsUrl({
+    subpath: DOCUMENTATION_FATAL_ERROR_LINK,
+    versioned: true,
+    renderer: true,
+  });
+
+  return (
+    <Modal onEscapeKeyDown={handleClose} onInteractOutside={handleClose} open={isModalOpen}>
+      <ModalBar>
+        <ModalTitle>Storybook Tests error details</ModalTitle>
+        <ModalActionBar>
+          <Button onClick={onRerun} variant="ghost">
+            <SyncIcon />
+            Rerun
+          </Button>
+          <Button variant="ghost" asChild>
+            <a target="_blank" href={troubleshootURL} rel="noreferrer">
+              Troubleshoot
+            </a>
+          </Button>
+          <IconButton onClick={handleClose}>
+            <CloseIcon />
+          </IconButton>
+        </ModalActionBar>
+      </ModalBar>
+      <ModalStackTrace>
+        {error}
+        <br />
+        <br />
+        Troubleshoot:{' '}
+        <TroubleshootLink target="_blank" href={troubleshootURL}>
+          {troubleshootURL}
+        </TroubleshootLink>
+      </ModalStackTrace>
+    </Modal>
+  );
+}
diff --git a/code/addons/test/src/components/Interaction.stories.tsx b/code/addons/test/src/components/Interaction.stories.tsx
new file mode 100644
index 000000000000..784c5251bf34
--- /dev/null
+++ b/code/addons/test/src/components/Interaction.stories.tsx
@@ -0,0 +1,63 @@
+import { CallStates } from '@storybook/instrumenter';
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, within } from '@storybook/test';
+
+import { getCalls } from '../mocks';
+import { Interaction } from './Interaction';
+import SubnavStories from './Subnav.stories';
+
+type Story = StoryObj<typeof Interaction>;
+
+export default {
+  title: 'Interaction',
+  component: Interaction,
+  args: {
+    callsById: new Map(getCalls(CallStates.DONE).map((call) => [call.id, call])),
+    controls: SubnavStories.args.controls,
+    controlStates: SubnavStories.args.controlStates,
+  },
+} as Meta<typeof Interaction>;
+
+export const Active: Story = {
+  args: {
+    call: getCalls(CallStates.ACTIVE).slice(-1)[0],
+  },
+};
+
+export const Waiting: Story = {
+  args: {
+    call: getCalls(CallStates.WAITING).slice(-1)[0],
+  },
+};
+
+export const Failed: Story = {
+  args: {
+    call: getCalls(CallStates.ERROR).slice(-1)[0],
+  },
+};
+
+export const Done: Story = {
+  args: {
+    call: getCalls(CallStates.DONE).slice(-1)[0],
+  },
+};
+
+export const WithParent: Story = {
+  args: {
+    call: { ...getCalls(CallStates.DONE).slice(-1)[0], ancestors: ['parent-id'] },
+  },
+};
+
+export const Disabled: Story = {
+  args: { ...Done.args, controlStates: { ...SubnavStories.args.controlStates, goto: false } },
+};
+
+export const Hovered: Story = {
+  ...Done,
+  globals: { sb_theme: 'light' },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.hover(canvas.getByRole('button'));
+    await expect(canvas.getByTestId('icon-active')).toBeInTheDocument();
+  },
+};
diff --git a/code/addons/test/src/components/Interaction.tsx b/code/addons/test/src/components/Interaction.tsx
new file mode 100644
index 000000000000..75797c65c5a3
--- /dev/null
+++ b/code/addons/test/src/components/Interaction.tsx
@@ -0,0 +1,211 @@
+import * as React from 'react';
+
+import { IconButton, TooltipNote, WithTooltip } from 'storybook/internal/components';
+import { styled, typography } from 'storybook/internal/theming';
+
+import { ListUnorderedIcon } from '@storybook/icons';
+import { type Call, CallStates, type ControlStates } from '@storybook/instrumenter';
+
+import { transparentize } from 'polished';
+
+import { isChaiError, isJestError, useAnsiToHtmlFilter } from '../utils';
+import type { Controls } from './InteractionsPanel';
+import { MatcherResult } from './MatcherResult';
+import { MethodCall } from './MethodCall';
+import { StatusIcon } from './StatusIcon';
+
+const MethodCallWrapper = styled.div(() => ({
+  fontFamily: typography.fonts.mono,
+  fontSize: typography.size.s1,
+  overflowWrap: 'break-word',
+  inlineSize: 'calc( 100% - 40px )',
+}));
+
+const RowContainer = styled('div', {
+  shouldForwardProp: (prop) => !['call', 'pausedAt'].includes(prop.toString()),
+})<{ call: Call; pausedAt: Call['id'] | undefined }>(
+  ({ theme, call }) => ({
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    borderBottom: `1px solid ${theme.appBorderColor}`,
+    fontFamily: typography.fonts.base,
+    fontSize: 13,
+    ...(call.status === CallStates.ERROR && {
+      backgroundColor:
+        theme.base === 'dark'
+          ? transparentize(0.93, theme.color.negative)
+          : theme.background.warning,
+    }),
+    paddingLeft: (call.ancestors?.length ?? 0) * 20,
+  }),
+  ({ theme, call, pausedAt }) =>
+    pausedAt === call.id && {
+      '&::before': {
+        content: '""',
+        position: 'absolute',
+        top: -5,
+        zIndex: 1,
+        borderTop: '4.5px solid transparent',
+        borderLeft: `7px solid ${theme.color.warning}`,
+        borderBottom: '4.5px solid transparent',
+      },
+      '&::after': {
+        content: '""',
+        position: 'absolute',
+        top: -1,
+        zIndex: 1,
+        width: '100%',
+        borderTop: `1.5px solid ${theme.color.warning}`,
+      },
+    }
+);
+
+const RowHeader = styled.div<{ isInteractive: boolean }>(({ theme, isInteractive }) => ({
+  display: 'flex',
+  '&:hover': isInteractive ? {} : { background: theme.background.hoverable },
+}));
+
+const RowLabel = styled('button', {
+  shouldForwardProp: (prop) => !['call'].includes(prop.toString()),
+})<React.ButtonHTMLAttributes<HTMLButtonElement> & { call: Call }>(({ theme, disabled, call }) => ({
+  flex: 1,
+  display: 'grid',
+  background: 'none',
+  border: 0,
+  gridTemplateColumns: '15px 1fr',
+  alignItems: 'center',
+  minHeight: 40,
+  margin: 0,
+  padding: '8px 15px',
+  textAlign: 'start',
+  cursor: disabled || call.status === CallStates.ERROR ? 'default' : 'pointer',
+  '&:focus-visible': {
+    outline: 0,
+    boxShadow: `inset 3px 0 0 0 ${
+      call.status === CallStates.ERROR ? theme.color.warning : theme.color.secondary
+    }`,
+    background: call.status === CallStates.ERROR ? 'transparent' : theme.background.hoverable,
+  },
+  '& > div': {
+    opacity: call.status === CallStates.WAITING ? 0.5 : 1,
+  },
+}));
+
+const RowActions = styled.div({
+  padding: 6,
+});
+
+export const StyledIconButton = styled(IconButton as any)(({ theme }) => ({
+  color: theme.textMutedColor,
+  margin: '0 3px',
+}));
+
+const Note = styled(TooltipNote)(({ theme }) => ({
+  fontFamily: theme.typography.fonts.base,
+}));
+
+const RowMessage = styled('div')(({ theme }) => ({
+  padding: '8px 10px 8px 36px',
+  fontSize: typography.size.s1,
+  color: theme.color.defaultText,
+  pre: {
+    margin: 0,
+    padding: 0,
+  },
+}));
+
+export const Exception = ({ exception }: { exception: Call['exception'] }) => {
+  const filter = useAnsiToHtmlFilter();
+  if (!exception) {
+    return null;
+  }
+  if (isJestError(exception)) {
+    return <MatcherResult {...exception} />;
+  }
+  if (isChaiError(exception)) {
+    return (
+      <RowMessage>
+        <MatcherResult
+          message={`${exception.message}${exception.diff ? `\n\n${exception.diff}` : ''}`}
+          style={{ padding: 0 }}
+        />
+        <p>See the full stack trace in the browser console.</p>
+      </RowMessage>
+    );
+  }
+
+  const paragraphs = exception.message.split('\n\n');
+  const more = paragraphs.length > 1;
+  return (
+    <RowMessage>
+      <pre dangerouslySetInnerHTML={{ __html: filter.toHtml(paragraphs[0]) }}></pre>
+      {more && <p>See the full stack trace in the browser console.</p>}
+    </RowMessage>
+  );
+};
+
+export const Interaction = ({
+  call,
+  callsById,
+  controls,
+  controlStates,
+  childCallIds,
+  isHidden,
+  isCollapsed,
+  toggleCollapsed,
+  pausedAt,
+}: {
+  call: Call;
+  callsById: Map<Call['id'], Call>;
+  controls: Controls;
+  controlStates: ControlStates;
+  childCallIds?: Call['id'][];
+  isHidden: boolean;
+  isCollapsed: boolean;
+  toggleCollapsed: () => void;
+  pausedAt?: Call['id'];
+}) => {
+  const [isHovered, setIsHovered] = React.useState(false);
+  const isInteractive = !controlStates.goto || !call.interceptable || !!call.ancestors?.length;
+
+  if (isHidden) {
+    return null;
+  }
+
+  return (
+    <RowContainer call={call} pausedAt={pausedAt}>
+      <RowHeader isInteractive={isInteractive}>
+        <RowLabel
+          aria-label="Interaction step"
+          call={call}
+          onClick={() => controls.goto(call.id)}
+          disabled={isInteractive}
+          onMouseEnter={() => controlStates.goto && setIsHovered(true)}
+          onMouseLeave={() => controlStates.goto && setIsHovered(false)}
+        >
+          <StatusIcon status={isHovered ? CallStates.ACTIVE : call.status} />
+          <MethodCallWrapper style={{ marginLeft: 6, marginBottom: 1 }}>
+            <MethodCall call={call} callsById={callsById} />
+          </MethodCallWrapper>
+        </RowLabel>
+        <RowActions>
+          {(childCallIds?.length ?? 0) > 0 && (
+            <WithTooltip
+              hasChrome={false}
+              tooltip={<Note note={`${isCollapsed ? 'Show' : 'Hide'} interactions`} />}
+            >
+              <StyledIconButton onClick={toggleCollapsed}>
+                <ListUnorderedIcon />
+              </StyledIconButton>
+            </WithTooltip>
+          )}
+        </RowActions>
+      </RowHeader>
+
+      {call.status === CallStates.ERROR && call.exception?.callId === call.id && (
+        <Exception exception={call.exception} />
+      )}
+    </RowContainer>
+  );
+};
diff --git a/code/addons/test/src/components/InteractionsPanel.stories.tsx b/code/addons/test/src/components/InteractionsPanel.stories.tsx
new file mode 100644
index 000000000000..f8cabbe24d53
--- /dev/null
+++ b/code/addons/test/src/components/InteractionsPanel.stories.tsx
@@ -0,0 +1,158 @@
+import React from 'react';
+
+import { ManagerContext } from 'storybook/internal/manager-api';
+import { styled } from 'storybook/internal/theming';
+
+import { CallStates } from '@storybook/instrumenter';
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
+
+import { isChromatic } from '../../../../.storybook/isChromatic';
+import { getCalls, getInteractions } from '../mocks';
+import { InteractionsPanel } from './InteractionsPanel';
+import SubnavStories from './Subnav.stories';
+
+const StyledWrapper = styled.div(({ theme }) => ({
+  backgroundColor: theme.background.content,
+  color: theme.color.defaultText,
+  display: 'block',
+  height: '100%',
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  bottom: 0,
+  overflow: 'auto',
+}));
+
+const interactions = getInteractions(CallStates.DONE);
+const managerContext: any = {
+  state: {},
+  api: {
+    getDocsUrl: fn().mockName('api::getDocsUrl'),
+    emit: fn().mockName('api::emit'),
+  },
+};
+
+const meta = {
+  title: 'InteractionsPanel',
+  component: InteractionsPanel,
+  decorators: [
+    (Story: any) => (
+      <ManagerContext.Provider value={managerContext}>
+        <StyledWrapper id="panel-tab-content">
+          <Story />
+        </StyledWrapper>
+      </ManagerContext.Provider>
+    ),
+  ],
+  parameters: { layout: 'fullscreen' },
+  args: {
+    calls: new Map(getCalls(CallStates.DONE).map((call) => [call.id, call])),
+    controls: SubnavStories.args.controls,
+    controlStates: SubnavStories.args.controlStates,
+    interactions,
+    fileName: 'addon-interactions.stories.tsx',
+    hasException: false,
+    isPlaying: false,
+    onScrollToEnd: () => {},
+    endRef: null,
+    // prop for the AddonPanel used as wrapper of Panel
+    active: true,
+  },
+} as Meta<typeof InteractionsPanel>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Passing: Story = {
+  args: {
+    browserTestStatus: CallStates.DONE,
+    interactions: getInteractions(CallStates.DONE),
+  },
+  play: async ({ args, canvasElement }) => {
+    if (isChromatic()) {
+      return;
+    }
+    const canvas = within(canvasElement);
+
+    await waitFor(async () => {
+      await userEvent.click(canvas.getByLabelText('Go to start'));
+      await expect(args.controls.start).toHaveBeenCalled();
+    });
+
+    await waitFor(async () => {
+      await userEvent.click(canvas.getByLabelText('Go back'));
+      await expect(args.controls.back).toHaveBeenCalled();
+    });
+
+    await waitFor(async () => {
+      await userEvent.click(canvas.getByLabelText('Go forward'));
+      await expect(args.controls.next).not.toHaveBeenCalled();
+    });
+
+    await waitFor(async () => {
+      await userEvent.click(canvas.getByLabelText('Go to end'));
+      await expect(args.controls.end).not.toHaveBeenCalled();
+    });
+
+    await waitFor(async () => {
+      await userEvent.click(canvas.getByLabelText('Rerun'));
+      await expect(args.controls.rerun).toHaveBeenCalled();
+    });
+  },
+};
+
+export const Paused: Story = {
+  args: {
+    browserTestStatus: CallStates.ACTIVE,
+    isPlaying: true,
+    interactions: getInteractions(CallStates.WAITING),
+    controlStates: {
+      start: false,
+      back: false,
+      goto: true,
+      next: true,
+      end: true,
+    },
+    pausedAt: interactions[interactions.length - 1].id,
+  },
+};
+
+export const Playing: Story = {
+  args: {
+    browserTestStatus: CallStates.ACTIVE,
+    isPlaying: true,
+    interactions: getInteractions(CallStates.ACTIVE),
+  },
+};
+
+export const Failed: Story = {
+  args: {
+    browserTestStatus: CallStates.ERROR,
+    hasException: true,
+    interactions: getInteractions(CallStates.ERROR),
+  },
+};
+
+export const CaughtException: Story = {
+  args: {
+    browserTestStatus: CallStates.ERROR,
+    hasException: true,
+    interactions: [],
+    caughtException: new TypeError("Cannot read properties of undefined (reading 'args')"),
+  },
+};
+
+export const DiscrepancyResult: Story = {
+  args: {
+    ...Failed.args,
+    hasResultMismatch: true,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    interactions: [],
+  },
+};
diff --git a/code/addons/test/src/components/InteractionsPanel.tsx b/code/addons/test/src/components/InteractionsPanel.tsx
new file mode 100644
index 000000000000..896350b926c7
--- /dev/null
+++ b/code/addons/test/src/components/InteractionsPanel.tsx
@@ -0,0 +1,183 @@
+import * as React from 'react';
+
+import { styled } from 'storybook/internal/theming';
+import type { StoryId } from 'storybook/internal/types';
+
+import type { CallStates } from '@storybook/instrumenter';
+import { type Call, type ControlStates } from '@storybook/instrumenter';
+
+import { transparentize } from 'polished';
+
+import { isTestAssertionError, useAnsiToHtmlFilter } from '../utils';
+import { Empty } from './EmptyState';
+import { Interaction } from './Interaction';
+import { Subnav } from './Subnav';
+import { TestDiscrepancyMessage } from './TestDiscrepancyMessage';
+
+export interface Controls {
+  start: (args: any) => void;
+  back: (args: any) => void;
+  goto: (args: any) => void;
+  next: (args: any) => void;
+  end: (args: any) => void;
+  rerun: (args: any) => void;
+}
+
+interface InteractionsPanelProps {
+  controls: Controls;
+  controlStates: ControlStates;
+  interactions: (Call & {
+    status?: CallStates;
+    childCallIds: Call['id'][];
+    isHidden: boolean;
+    isCollapsed: boolean;
+    toggleCollapsed: () => void;
+  })[];
+  fileName?: string;
+  hasException?: boolean;
+  caughtException?: Error;
+  unhandledErrors?: SerializedError[];
+  isPlaying?: boolean;
+  pausedAt?: Call['id'];
+  calls: Map<string, any>;
+  endRef?: React.Ref<HTMLDivElement>;
+  onScrollToEnd?: () => void;
+  hasResultMismatch?: boolean;
+  browserTestStatus?: CallStates;
+}
+
+const Container = styled.div(({ theme }) => ({
+  height: '100%',
+  background: theme.background.content,
+}));
+
+const CaughtException = styled.div(({ theme }) => ({
+  borderBottom: `1px solid ${theme.appBorderColor}`,
+  backgroundColor:
+    theme.base === 'dark' ? transparentize(0.93, theme.color.negative) : theme.background.warning,
+  padding: 15,
+  fontSize: theme.typography.size.s2 - 1,
+  lineHeight: '19px',
+}));
+const CaughtExceptionCode = styled.code(({ theme }) => ({
+  margin: '0 1px',
+  padding: 3,
+  fontSize: theme.typography.size.s1 - 1,
+  lineHeight: 1,
+  verticalAlign: 'top',
+  background: 'rgba(0, 0, 0, 0.05)',
+  border: `1px solid ${theme.appBorderColor}`,
+  borderRadius: 3,
+}));
+const CaughtExceptionTitle = styled.div({
+  paddingBottom: 4,
+  fontWeight: 'bold',
+});
+const CaughtExceptionDescription = styled.p({
+  margin: 0,
+  padding: '0 0 20px',
+});
+
+const CaughtExceptionStack = styled.pre(({ theme }) => ({
+  margin: 0,
+  padding: 0,
+  '&:not(:last-child)': {
+    paddingBottom: 16,
+  },
+  fontSize: theme.typography.size.s1 - 1,
+}));
+
+export const InteractionsPanel: React.FC<InteractionsPanelProps> = React.memo(
+  function InteractionsPanel({
+    calls,
+    controls,
+    controlStates,
+    interactions,
+    fileName,
+    hasException,
+    caughtException,
+    unhandledErrors,
+    isPlaying,
+    pausedAt,
+    onScrollToEnd,
+    endRef,
+    hasResultMismatch,
+    browserTestStatus,
+  }) {
+    const filter = useAnsiToHtmlFilter();
+
+    return (
+      <Container>
+        {hasResultMismatch && <TestDiscrepancyMessage browserTestStatus={browserTestStatus} />}
+        {(interactions.length > 0 || hasException) && (
+          <Subnav
+            controls={controls}
+            controlStates={controlStates}
+            status={browserTestStatus}
+            storyFileName={fileName}
+            onScrollToEnd={onScrollToEnd}
+          />
+        )}
+        <div aria-label="Interactions list">
+          {interactions.map((call) => (
+            <Interaction
+              key={call.id}
+              call={call}
+              callsById={calls}
+              controls={controls}
+              controlStates={controlStates}
+              childCallIds={call.childCallIds}
+              isHidden={call.isHidden}
+              isCollapsed={call.isCollapsed}
+              toggleCollapsed={call.toggleCollapsed}
+              pausedAt={pausedAt}
+            />
+          ))}
+        </div>
+        {caughtException && !isTestAssertionError(caughtException) && (
+          <CaughtException>
+            <CaughtExceptionTitle>
+              Caught exception in <CaughtExceptionCode>play</CaughtExceptionCode> function
+            </CaughtExceptionTitle>
+            <CaughtExceptionStack
+              data-chromatic="ignore"
+              dangerouslySetInnerHTML={{
+                __html: filter.toHtml(printSerializedError(caughtException)),
+              }}
+            ></CaughtExceptionStack>
+          </CaughtException>
+        )}
+        {unhandledErrors && (
+          <CaughtException>
+            <CaughtExceptionTitle>Unhandled Errors</CaughtExceptionTitle>
+            <CaughtExceptionDescription>
+              Found {unhandledErrors.length} unhandled error{unhandledErrors.length > 1 ? 's' : ''}{' '}
+              while running the play function. This might cause false positive assertions. Resolve
+              unhandled errors or ignore unhandled errors with setting the
+              <CaughtExceptionCode>test.dangerouslyIgnoreUnhandledErrors</CaughtExceptionCode>{' '}
+              parameter to <CaughtExceptionCode>true</CaughtExceptionCode>.
+            </CaughtExceptionDescription>
+
+            {unhandledErrors.map((error, i) => (
+              <CaughtExceptionStack key={i} data-chromatic="ignore">
+                {printSerializedError(error)}
+              </CaughtExceptionStack>
+            ))}
+          </CaughtException>
+        )}
+        <div ref={endRef} />
+        {!isPlaying && !caughtException && interactions.length === 0 && <Empty />}
+      </Container>
+    );
+  }
+);
+
+interface SerializedError {
+  name: string;
+  stack?: string;
+  message: string;
+}
+
+function printSerializedError(error: SerializedError) {
+  return error.stack || `${error.name}: ${error.message}`;
+}
diff --git a/code/addons/test/src/components/List.tsx b/code/addons/test/src/components/List.tsx
new file mode 100644
index 000000000000..dece58b465ea
--- /dev/null
+++ b/code/addons/test/src/components/List.tsx
@@ -0,0 +1,93 @@
+import React, { Fragment, useState } from 'react';
+
+import { convert, styled, themes } from 'storybook/internal/theming';
+
+import { ChevronSmallDownIcon } from '@storybook/icons';
+
+const ListWrapper = styled.ul({
+  listStyle: 'none',
+  fontSize: 14,
+  padding: 0,
+  margin: 0,
+});
+
+const Wrapper = styled.div({
+  display: 'flex',
+  width: '100%',
+  borderBottom: `1px solid ${convert(themes.light).appBorderColor}`,
+  '&:hover': {
+    background: convert(themes.light).background.hoverable,
+  },
+});
+
+const Icon = styled(ChevronSmallDownIcon)({
+  color: convert(themes.light).textMutedColor,
+  marginRight: 10,
+  transition: 'transform 0.1s ease-in-out',
+  alignSelf: 'center',
+  display: 'inline-flex',
+});
+
+const HeaderBar = styled.div({
+  padding: convert(themes.light).layoutMargin,
+  paddingLeft: convert(themes.light).layoutMargin - 3,
+  background: 'none',
+  color: 'inherit',
+  textAlign: 'left',
+  cursor: 'pointer',
+  borderLeft: '3px solid transparent',
+  width: '100%',
+
+  '&:focus': {
+    outline: '0 none',
+    borderLeft: `3px solid ${convert(themes.light).color.secondary}`,
+  },
+});
+
+const Description = styled.div({
+  padding: convert(themes.light).layoutMargin,
+  marginBottom: convert(themes.light).layoutMargin,
+  fontStyle: 'italic',
+});
+
+type Item = {
+  title: string;
+  description: string;
+};
+
+interface ListItemProps {
+  item: Item;
+}
+
+export const ListItem: React.FC<ListItemProps> = ({ item }) => {
+  const [open, onToggle] = useState(false);
+
+  return (
+    <Fragment>
+      <Wrapper>
+        <HeaderBar onClick={() => onToggle(!open)} role="button">
+          <Icon
+            color={convert(themes.light).appBorderColor}
+            style={{
+              transform: `rotate(${open ? 0 : -90}deg)`,
+            }}
+          />
+          {item.title}
+        </HeaderBar>
+      </Wrapper>
+      {open ? <Description>{item.description}</Description> : null}
+    </Fragment>
+  );
+};
+
+interface ListProps {
+  items: Item[];
+}
+
+export const List: React.FC<ListProps> = ({ items }) => (
+  <ListWrapper>
+    {items.map((item) => (
+      <ListItem key={item.title + item.description} item={item} />
+    ))}
+  </ListWrapper>
+);
diff --git a/code/addons/test/src/components/MatcherResult.stories.tsx b/code/addons/test/src/components/MatcherResult.stories.tsx
new file mode 100644
index 000000000000..516aaed5cd63
--- /dev/null
+++ b/code/addons/test/src/components/MatcherResult.stories.tsx
@@ -0,0 +1,113 @@
+import React from 'react';
+
+import { styled } from 'storybook/internal/theming';
+
+import { dedent } from 'ts-dedent';
+
+import { MatcherResult } from './MatcherResult';
+
+const StyledWrapper = styled.div(({ theme }) => ({
+  backgroundColor: theme.background.content,
+  padding: '12px 0',
+  boxShadow: `0 0 0 1px ${theme.appBorderColor}`,
+  color: theme.color.defaultText,
+  fontSize: 13,
+}));
+
+export default {
+  title: 'MatcherResult',
+  component: MatcherResult,
+  decorators: [
+    (Story: any) => (
+      <StyledWrapper>
+        <Story />
+      </StyledWrapper>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Expected = {
+  args: {
+    message: dedent`
+      expected last "spy" call to have been called with [ { …(2) } ]
+      
+      - Expected: 
+      Array [
+        Object {
+          "email": "michael@chromatic.com",
+          "password": "testpasswordthatwontfail",
+        },
+      ]
+      
+      + Received: 
+      undefined
+    `,
+  },
+};
+
+export const ExpectedReceived = {
+  args: {
+    message: dedent`
+      expected last "spy" call to have been called with []
+      
+      - Expected
+      + Received
+      
+      - Array []
+      + Array [
+      +   Object {
+      +     "email": "michael@chromatic.com",
+      +     "password": "testpasswordthatwontfail",
+      +   },
+      + ]
+    `,
+  },
+};
+
+export const ExpectedNumberOfCalls = {
+  args: {
+    message: dedent`
+      expected "spy" to not be called at all, but actually been called 1 times
+      
+      Received: 
+      
+        1st spy call:
+      
+          Array [
+            Object {
+              "email": "michael@chromatic.com",
+              "password": "testpasswordthatwontfail",
+            },
+          ]
+      
+      
+      Number of calls: 1
+    `,
+  },
+};
+
+export const Diff = {
+  args: {
+    message: dedent`
+      expected "spy" to be called with arguments: [ { …(2) } ]
+      
+      Received: 
+      
+        1st spy call:
+      
+        Array [
+          Object {
+      -     "email": "michael@chromaui.com",
+      +     "email": "michael@chromatic.com",
+            "password": "testpasswordthatwontfail",
+          },
+        ]
+      
+      
+      Number of calls: 1
+    `,
+  },
+};
diff --git a/code/addons/test/src/components/MatcherResult.tsx b/code/addons/test/src/components/MatcherResult.tsx
new file mode 100644
index 000000000000..fa01b73548ec
--- /dev/null
+++ b/code/addons/test/src/components/MatcherResult.tsx
@@ -0,0 +1,146 @@
+import React from 'react';
+
+import { styled, typography } from 'storybook/internal/theming';
+
+import { useAnsiToHtmlFilter } from '../utils';
+import { Node } from './MethodCall';
+
+const getParams = (line: string, fromIndex = 0): string => {
+  for (let i = fromIndex, depth = 1; i < line.length; i += 1) {
+    if (line[i] === '(') {
+      depth += 1;
+    } else if (line[i] === ')') {
+      depth -= 1;
+    }
+
+    if (depth === 0) {
+      return line.slice(fromIndex, i);
+    }
+  }
+  return '';
+};
+
+const parseValue = (value: string): any => {
+  try {
+    return value === 'undefined' ? undefined : JSON.parse(value);
+  } catch (e) {
+    return value;
+  }
+};
+
+const StyledExpected = styled.span(({ theme }) => ({
+  color: theme.base === 'light' ? theme.color.positiveText : theme.color.positive,
+}));
+
+const StyledReceived = styled.span(({ theme }) => ({
+  color: theme.base === 'light' ? theme.color.negativeText : theme.color.negative,
+}));
+
+export const Received = ({ value, parsed }: { value: any; parsed?: boolean }) =>
+  parsed ? (
+    <Node showObjectInspector value={value} style={{ color: '#D43900' }} />
+  ) : (
+    <StyledReceived>{value}</StyledReceived>
+  );
+
+export const Expected = ({ value, parsed }: { value: any; parsed?: boolean }) => {
+  if (parsed) {
+    if (typeof value === 'string' && value.startsWith('called with')) {
+      return <>{value}</>;
+    }
+    return <Node showObjectInspector value={value} style={{ color: '#16B242' }} />;
+  }
+  return <StyledExpected>{value}</StyledExpected>;
+};
+
+export const MatcherResult = ({
+  message,
+  style = {},
+}: {
+  message: string;
+  style?: React.CSSProperties;
+}) => {
+  const filter = useAnsiToHtmlFilter();
+  const lines = message.split('\n');
+  return (
+    <pre
+      style={{
+        margin: 0,
+        padding: '8px 10px 8px 36px',
+        fontSize: typography.size.s1,
+        ...style,
+      }}
+    >
+      {lines.flatMap((line: string, index: number) => {
+        if (line.startsWith('expect(')) {
+          const received = getParams(line, 7);
+          const remainderIndex = received ? 7 + received.length : 0;
+          const matcher = received && line.slice(remainderIndex).match(/\.(to|last|nth)[A-Z]\w+\(/);
+          if (matcher) {
+            const expectedIndex = remainderIndex + (matcher.index ?? 0) + matcher[0].length;
+            const expected = getParams(line, expectedIndex);
+            if (expected) {
+              return [
+                'expect(',
+                <Received key={`received_${received}`} value={received} />,
+                line.slice(remainderIndex, expectedIndex),
+                <Expected key={`expected_${expected}`} value={expected} />,
+                line.slice(expectedIndex + expected.length),
+                <br key={`br${index}`} />,
+              ];
+            }
+          }
+        }
+
+        if (line.match(/^\s*- /)) {
+          return [<Expected key={line + index} value={line} />, <br key={`br${index}`} />];
+        }
+        if (line.match(/^\s*\+ /) || line.match(/^Received: $/)) {
+          return [<Received key={line + index} value={line} />, <br key={`br${index}`} />];
+        }
+
+        const [, assertionLabel, assertionValue] = line.match(/^(Expected|Received): (.*)$/) || [];
+        if (assertionLabel && assertionValue) {
+          return assertionLabel === 'Expected'
+            ? [
+                'Expected: ',
+                <Expected key={line + index} value={parseValue(assertionValue)} parsed />,
+                <br key={`br${index}`} />,
+              ]
+            : [
+                'Received: ',
+                <Received key={line + index} value={parseValue(assertionValue)} parsed />,
+                <br key={`br${index}`} />,
+              ];
+        }
+
+        const [, prefix, numberOfCalls] =
+          line.match(/(Expected number|Received number|Number) of calls: (\d+)$/i) || [];
+        if (prefix && numberOfCalls) {
+          return [
+            `${prefix} of calls: `,
+            <Node key={line + index} value={Number(numberOfCalls)} />,
+            <br key={`br${index}`} />,
+          ];
+        }
+
+        const [, receivedValue] = line.match(/^Received has value: (.+)$/) || [];
+        if (receivedValue) {
+          return [
+            'Received has value: ',
+            <Node key={line + index} value={parseValue(receivedValue)} />,
+            <br key={`br${index}`} />,
+          ];
+        }
+
+        return [
+          <span
+            key={line + index}
+            dangerouslySetInnerHTML={{ __html: filter.toHtml(line) }}
+          ></span>,
+          <br key={`br${index}`} />,
+        ];
+      })}
+    </pre>
+  );
+};
diff --git a/code/addons/test/src/components/MethodCall.stories.tsx b/code/addons/test/src/components/MethodCall.stories.tsx
new file mode 100644
index 000000000000..1ab027dd5dec
--- /dev/null
+++ b/code/addons/test/src/components/MethodCall.stories.tsx
@@ -0,0 +1,219 @@
+import React from 'react';
+
+import { styled, typography } from 'storybook/internal/theming';
+
+import type { Call } from '@storybook/instrumenter';
+
+import { MethodCall, Node } from './MethodCall';
+
+const StyledWrapper = styled.div(({ theme }) => ({
+  backgroundColor: theme.background.content,
+  padding: '20px',
+  boxShadow: `0 0 0 1px ${theme.appBorderColor}`,
+  color: theme.color.defaultText,
+  fontFamily: typography.fonts.mono,
+  fontSize: typography.size.s1,
+}));
+
+export default {
+  title: 'MethodCall',
+  component: MethodCall,
+  decorators: [
+    (Story: any) => (
+      <StyledWrapper>
+        <Story />
+      </StyledWrapper>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Args = () => (
+  <div style={{ display: 'inline-flex', flexDirection: 'column', gap: 10 }}>
+    <Node value={null} />
+    <Node value={undefined} />
+    <Node value="Hello world" />
+    <Node value="https://github.com/storybookjs/storybook/blob/next/README.md" />
+    <Node value="012345678901234567890123456789012345678901234567890123456789" />
+    {}
+    <Node value={true} />
+    <Node value={false} />
+    <Node value={12345} />
+    <Node value={['foo', 1, { hello: 'world' }]} />
+    <Node value={[...Array(23)].map((_, i) => i)} />
+    <Node value={{ hello: 'world' }} />
+    <Node value={{ hello: 'world', arr: [1, 2, 3], more: true }} />
+    <Node value={{ hello: 'world', arr: [1, 2, 3], more: true }} showObjectInspector />
+    <Node
+      value={{
+        hello: 'world',
+        arr: [1, 2, 3],
+        more: true,
+        regex: /regex/,
+        class: class DummyClass {},
+        fn: () => 123,
+        asyncFn: async () => 'hello',
+      }}
+      showObjectInspector
+    />
+    <Node value={{ __class__: { name: 'FooBar' } }} />
+    <Node value={{ __function__: { name: 'goFaster' } }} />
+    <Node value={{ __function__: { name: '' } }} />
+    <Node value={{ __element__: { localName: 'hr' } }} />
+    <Node value={{ __element__: { localName: 'foo', prefix: 'x' } }} />
+    <Node value={{ __element__: { localName: 'div', id: 'foo' } }} />
+    <Node value={{ __element__: { localName: 'span', classNames: ['foo', 'bar'] } }} />
+    <Node value={{ __element__: { localName: 'button', innerText: 'Click me' } }} />
+    <Node
+      value={{ __date__: { value: new Date(Date.UTC(2012, 11, 20, 0, 0, 0)).toISOString() } }}
+    />
+    <Node value={{ __date__: { value: new Date(1600000000000).toISOString() } }} />
+    <Node value={{ __date__: { value: new Date(1600000000123).toISOString() } }} />
+    <Node value={{ __error__: { name: 'EvalError', message: '' } }} />
+    <Node value={{ __error__: { name: 'SyntaxError', message: "Can't do that" } }} />
+    <Node
+      value={{
+        __error__: { name: 'TypeError', message: "Cannot read property 'foo' of undefined" },
+      }}
+    />
+    <Node
+      value={{
+        __error__: { name: 'ReferenceError', message: 'Invalid left-hand side in assignment' },
+      }}
+    />
+    <Node
+      value={{
+        __error__: {
+          name: 'Error',
+          message:
+            "XMLHttpRequest cannot load https://example.com. No 'Access-Control-Allow-Origin' header is present on the requested resource.",
+        },
+      }}
+    />
+    <Node value={{ __regexp__: { flags: 'i', source: 'hello' } }} />
+    <Node value={{ __regexp__: { flags: '', source: 'src(.*)\\.js$' } }} />
+    <Node value={{ __symbol__: { description: '' } }} />
+    <Node value={{ __symbol__: { description: 'Hello world' } }} />
+  </div>
+);
+
+const calls: Call[] = [
+  {
+    cursor: 0,
+    id: '1',
+    ancestors: [],
+    path: ['screen'],
+    method: 'getByText',
+    storyId: 'kind--story',
+    args: ['Click'],
+    interceptable: false,
+    retain: false,
+  },
+  {
+    cursor: 1,
+    id: '2',
+    ancestors: [],
+    path: ['userEvent'],
+    method: 'click',
+    storyId: 'kind--story',
+    args: [{ __callId__: '1' }],
+    interceptable: true,
+    retain: false,
+  },
+  {
+    cursor: 2,
+    id: '3',
+    ancestors: [],
+    path: [],
+    method: 'expect',
+    storyId: 'kind--story',
+    args: [true],
+    interceptable: true,
+    retain: false,
+  },
+  {
+    cursor: 3,
+    id: '4',
+    ancestors: [],
+    path: [{ __callId__: '3' }, 'not'],
+    method: 'toBe',
+    storyId: 'kind--story',
+    args: [false],
+    interceptable: true,
+    retain: false,
+  },
+  {
+    cursor: 4,
+    id: '5',
+    ancestors: [],
+    path: ['jest'],
+    method: 'fn',
+    storyId: 'kind--story',
+    args: [{ __function__: { name: 'actionHandler' } }],
+    interceptable: false,
+    retain: false,
+  },
+  {
+    cursor: 5,
+    id: '6',
+    ancestors: [],
+    path: [],
+    method: 'expect',
+    storyId: 'kind--story',
+    args: [{ __callId__: '5' }],
+    interceptable: false,
+    retain: false,
+  },
+  {
+    cursor: 6,
+    id: '7',
+    ancestors: [],
+    path: ['expect'],
+    method: 'stringMatching',
+    storyId: 'kind--story',
+    args: [{ __regexp__: { flags: 'i', source: 'hello' } }],
+    interceptable: false,
+    retain: false,
+  },
+  {
+    cursor: 7,
+    id: '8',
+    ancestors: [],
+    path: [{ __callId__: '6' }, 'not'],
+    method: 'toHaveBeenCalledWith',
+    storyId: 'kind--story',
+    args: [
+      { __callId__: '7' },
+      [
+        { __error__: { name: 'Error', message: "Cannot read property 'foo' of undefined" } },
+        { __symbol__: { description: 'Hello world' } },
+      ],
+    ],
+    interceptable: false,
+    retain: false,
+  },
+  {
+    cursor: 8,
+    id: '9',
+    ancestors: [],
+    path: [],
+    method: 'step',
+    storyId: 'kind--story',
+    args: ['Custom step label', { __function__: { name: '' } }],
+    interceptable: true,
+    retain: false,
+  },
+];
+
+const callsById = calls.reduce((acc, call) => {
+  acc.set(call.id, call);
+  return acc;
+}, new Map<Call['id'], Call>());
+
+export const Step = () => <MethodCall call={callsById.get('9')} callsById={callsById} />;
+export const Simple = () => <MethodCall call={callsById.get('1')} callsById={callsById} />;
+export const Nested = () => <MethodCall call={callsById.get('2')} callsById={callsById} />;
+export const Chained = () => <MethodCall call={callsById.get('4')} callsById={callsById} />;
+export const Complex = () => <MethodCall call={callsById.get('8')} callsById={callsById} />;
diff --git a/code/addons/test/src/components/MethodCall.tsx b/code/addons/test/src/components/MethodCall.tsx
new file mode 100644
index 000000000000..34d1e6bb6f58
--- /dev/null
+++ b/code/addons/test/src/components/MethodCall.tsx
@@ -0,0 +1,465 @@
+import type { ReactElement } from 'react';
+import React, { Fragment } from 'react';
+
+import { useTheme } from 'storybook/internal/theming';
+
+import type { Call, CallRef, ElementRef } from '@storybook/instrumenter';
+
+import { ObjectInspector } from '@devtools-ds/object-inspector';
+
+const colorsLight = {
+  base: '#444',
+  nullish: '#7D99AA',
+  string: '#16B242',
+  number: '#5D40D0',
+  boolean: '#f41840',
+  objectkey: '#698394',
+  instance: '#A15C20',
+  function: '#EA7509',
+  muted: '#7D99AA',
+  tag: {
+    name: '#6F2CAC',
+    suffix: '#1F99E5',
+  },
+  date: '#459D9C',
+  error: {
+    name: '#D43900',
+    message: '#444',
+  },
+  regex: {
+    source: '#A15C20',
+    flags: '#EA7509',
+  },
+  meta: '#EA7509',
+  method: '#0271B6',
+};
+
+const colorsDark = {
+  base: '#eee',
+  nullish: '#aaa',
+  string: '#5FE584',
+  number: '#6ba5ff',
+  boolean: '#ff4191',
+  objectkey: '#accfe6',
+  instance: '#E3B551',
+  function: '#E3B551',
+  muted: '#aaa',
+  tag: {
+    name: '#f57bff',
+    suffix: '#8EB5FF',
+  },
+  date: '#70D4D3',
+  error: {
+    name: '#f40',
+    message: '#eee',
+  },
+  regex: {
+    source: '#FAD483',
+    flags: '#E3B551',
+  },
+  meta: '#FAD483',
+  method: '#5EC1FF',
+};
+
+const useThemeColors = () => {
+  const { base } = useTheme();
+  return base === 'dark' ? colorsDark : colorsLight;
+};
+
+const special = /[^A-Z0-9]/i;
+const trimEnd = /[\s.,…]+$/gm;
+const ellipsize = (string: string, maxlength: number): string => {
+  if (string.length <= maxlength) {
+    return string;
+  }
+  for (let i = maxlength - 1; i >= 0; i -= 1) {
+    if (special.test(string[i]) && i > 10) {
+      return `${string.slice(0, i).replace(trimEnd, '')}…`;
+    }
+  }
+  return `${string.slice(0, maxlength).replace(trimEnd, '')}…`;
+};
+
+const stringify = (value: any) => {
+  try {
+    return JSON.stringify(value, null, 1);
+  } catch (e) {
+    return String(value);
+  }
+};
+
+const interleave = (nodes: ReactElement[], separator: ReactElement) =>
+  nodes.flatMap((node, index) =>
+    index === nodes.length - 1
+      ? [node]
+      : [node, React.cloneElement(separator, { key: `sep${index}` })]
+  );
+
+export const Node = ({
+  value,
+  nested,
+  showObjectInspector,
+  callsById,
+  ...props
+}: {
+  value: any;
+  nested?: boolean;
+  /** Shows an object inspector instead of just printing the object. Only available for Objects */
+  showObjectInspector?: boolean;
+  callsById?: Map<Call['id'], Call>;
+  [props: string]: any;
+}) => {
+  switch (true) {
+    case value === null:
+      return <NullNode {...props} />;
+    case value === undefined:
+      return <UndefinedNode {...props} />;
+    case Array.isArray(value):
+      return <ArrayNode {...props} value={value} callsById={callsById} />;
+    case typeof value === 'string':
+      return <StringNode {...props} value={value} />;
+    case typeof value === 'number':
+      return <NumberNode {...props} value={value} />;
+    case typeof value === 'boolean':
+      return <BooleanNode {...props} value={value} />;
+
+    /* eslint-disable no-underscore-dangle */
+    case Object.prototype.hasOwnProperty.call(value, '__date__'):
+      return <DateNode {...props} {...value.__date__} />;
+    case Object.prototype.hasOwnProperty.call(value, '__error__'):
+      return <ErrorNode {...props} {...value.__error__} />;
+    case Object.prototype.hasOwnProperty.call(value, '__regexp__'):
+      return <RegExpNode {...props} {...value.__regexp__} />;
+    case Object.prototype.hasOwnProperty.call(value, '__function__'):
+      return <FunctionNode {...props} {...value.__function__} />;
+    case Object.prototype.hasOwnProperty.call(value, '__symbol__'):
+      return <SymbolNode {...props} {...value.__symbol__} />;
+    case Object.prototype.hasOwnProperty.call(value, '__element__'):
+      return <ElementNode {...props} {...value.__element__} />;
+    case Object.prototype.hasOwnProperty.call(value, '__class__'):
+      return <ClassNode {...props} {...value.__class__} />;
+    case Object.prototype.hasOwnProperty.call(value, '__callId__'):
+      return <MethodCall call={callsById?.get(value.__callId__)} callsById={callsById} />;
+    /* eslint-enable no-underscore-dangle */
+
+    case Object.prototype.toString.call(value) === '[object Object]':
+      return (
+        <ObjectNode
+          value={value}
+          showInspector={showObjectInspector}
+          callsById={callsById}
+          {...props}
+        />
+      );
+    default:
+      return <OtherNode value={value} {...props} />;
+  }
+};
+
+export const NullNode = (props: object) => {
+  const colors = useThemeColors();
+  return (
+    <span style={{ color: colors.nullish }} {...props}>
+      null
+    </span>
+  );
+};
+
+export const UndefinedNode = (props: object) => {
+  const colors = useThemeColors();
+  return (
+    <span style={{ color: colors.nullish }} {...props}>
+      undefined
+    </span>
+  );
+};
+
+export const StringNode = ({ value, ...props }: { value: string }) => {
+  const colors = useThemeColors();
+  return (
+    <span style={{ color: colors.string }} {...props}>
+      {JSON.stringify(ellipsize(value, 50))}
+    </span>
+  );
+};
+
+export const NumberNode = ({ value, ...props }: { value: number }) => {
+  const colors = useThemeColors();
+  return (
+    <span style={{ color: colors.number }} {...props}>
+      {value}
+    </span>
+  );
+};
+
+export const BooleanNode = ({ value, ...props }: { value: boolean }) => {
+  const colors = useThemeColors();
+  return (
+    <span style={{ color: colors.boolean }} {...props}>
+      {String(value)}
+    </span>
+  );
+};
+
+export const ArrayNode = ({
+  value,
+  nested = false,
+  callsById,
+}: {
+  value: any[];
+  nested?: boolean;
+  callsById?: Map<Call['id'], Call>;
+}) => {
+  const colors = useThemeColors();
+  if (nested) {
+    return <span style={{ color: colors.base }}>[…]</span>;
+  }
+  const nodes = value
+    .slice(0, 3)
+    .map((v, index) => (
+      <Node key={`${index}--${JSON.stringify(v)}`} value={v} nested callsById={callsById} />
+    ));
+  const nodelist = interleave(nodes, <span>, </span>);
+  if (value.length <= 3) {
+    return <span style={{ color: colors.base }}>[{nodelist}]</span>;
+  }
+  return (
+    <span style={{ color: colors.base }}>
+      ({value.length}) [{nodelist}, …]
+    </span>
+  );
+};
+
+export const ObjectNode = ({
+  showInspector,
+  value,
+  callsById,
+  nested = false,
+}: {
+  showInspector?: boolean;
+  value: object;
+  nested?: boolean;
+  callsById?: Map<Call['id'], Call>;
+}) => {
+  const isDarkMode = useTheme().base === 'dark';
+  const colors = useThemeColors();
+
+  if (showInspector) {
+    return (
+      <>
+        <ObjectInspector
+          id="interactions-object-inspector"
+          data={value}
+          includePrototypes={false}
+          colorScheme={isDarkMode ? 'dark' : 'light'}
+        />
+      </>
+    );
+  }
+
+  if (nested) {
+    return <span style={{ color: colors.base }}>{'{…}'}</span>;
+  }
+  const nodelist = interleave(
+    Object.entries(value)
+      .slice(0, 2)
+      .map(([k, v]) => (
+        <Fragment key={k}>
+          <span style={{ color: colors.objectkey }}>{k}: </span>
+          <Node value={v} callsById={callsById} nested />
+        </Fragment>
+      )),
+    <span>, </span>
+  );
+  if (Object.keys(value).length <= 2) {
+    return (
+      <span style={{ color: colors.base }}>
+        {'{ '}
+        {nodelist}
+        {' }'}
+      </span>
+    );
+  }
+  return (
+    <span style={{ color: colors.base }}>
+      ({Object.keys(value).length}) {'{ '}
+      {nodelist}
+      {', … }'}
+    </span>
+  );
+};
+
+export const ClassNode = ({ name }: { name: string }) => {
+  const colors = useThemeColors();
+  return <span style={{ color: colors.instance }}>{name}</span>;
+};
+
+export const FunctionNode = ({ name }: { name: string }) => {
+  const colors = useThemeColors();
+  return name ? (
+    <span style={{ color: colors.function }}>{name}</span>
+  ) : (
+    <span style={{ color: colors.nullish, fontStyle: 'italic' }}>anonymous</span>
+  );
+};
+
+export const ElementNode = ({
+  prefix,
+  localName,
+  id,
+  classNames = [],
+  innerText,
+}: ElementRef['__element__']) => {
+  const name = prefix ? `${prefix}:${localName}` : localName;
+  const colors = useThemeColors();
+  return (
+    <span style={{ wordBreak: 'keep-all' }}>
+      <span key={`${name}_lt`} style={{ color: colors.muted }}>
+        &lt;
+      </span>
+      <span key={`${name}_tag`} style={{ color: colors.tag.name }}>
+        {name}
+      </span>
+      <span key={`${name}_suffix`} style={{ color: colors.tag.suffix }}>
+        {id ? `#${id}` : classNames.reduce((acc, className) => `${acc}.${className}`, '')}
+      </span>
+      <span key={`${name}_gt`} style={{ color: colors.muted }}>
+        &gt;
+      </span>
+      {!id && classNames.length === 0 && innerText && (
+        <>
+          <span key={`${name}_text`}>{innerText}</span>
+          <span key={`${name}_close_lt`} style={{ color: colors.muted }}>
+            &lt;
+          </span>
+          <span key={`${name}_close_tag`} style={{ color: colors.tag.name }}>
+            /{name}
+          </span>
+          <span key={`${name}_close_gt`} style={{ color: colors.muted }}>
+            &gt;
+          </span>
+        </>
+      )}
+    </span>
+  );
+};
+
+export const DateNode = ({ value }: { value: string }) => {
+  const [date, time, ms] = value.split(/[T.Z]/);
+  const colors = useThemeColors();
+  return (
+    <span style={{ whiteSpace: 'nowrap', color: colors.date }}>
+      {date}
+      <span style={{ opacity: 0.7 }}>T</span>
+      {time === '00:00:00' ? <span style={{ opacity: 0.7 }}>{time}</span> : time}
+      {ms === '000' ? <span style={{ opacity: 0.7 }}>.{ms}</span> : `.${ms}`}
+      <span style={{ opacity: 0.7 }}>Z</span>
+    </span>
+  );
+};
+
+export const ErrorNode = ({ name, message }: { name: string; message: string }) => {
+  const colors = useThemeColors();
+  return (
+    <span style={{ color: colors.error.name }}>
+      {name}
+      {message && ': '}
+      {message && (
+        <span style={{ color: colors.error.message }} title={message.length > 50 ? message : ''}>
+          {ellipsize(message, 50)}
+        </span>
+      )}
+    </span>
+  );
+};
+
+export const RegExpNode = ({ flags, source }: { flags: string; source: string }) => {
+  const colors = useThemeColors();
+  return (
+    <span style={{ whiteSpace: 'nowrap', color: colors.regex.flags }}>
+      /<span style={{ color: colors.regex.source }}>{source}</span>/{flags}
+    </span>
+  );
+};
+
+export const SymbolNode = ({ description }: { description: string }) => {
+  const colors = useThemeColors();
+  return (
+    <span style={{ whiteSpace: 'nowrap', color: colors.instance }}>
+      Symbol(
+      {description && <span style={{ color: colors.meta }}>"{description}"</span>})
+    </span>
+  );
+};
+
+export const OtherNode = ({ value }: { value: any }) => {
+  const colors = useThemeColors();
+  return <span style={{ color: colors.meta }}>{stringify(value)}</span>;
+};
+
+export const StepNode = ({ label }: { label: string }) => {
+  const colors = useThemeColors();
+  const { typography } = useTheme();
+  return (
+    <span
+      style={{
+        color: colors.base,
+        fontFamily: typography.fonts.base,
+        fontSize: typography.size.s2 - 1,
+      }}
+    >
+      {label}
+    </span>
+  );
+};
+
+export const MethodCall = ({
+  call,
+  callsById,
+}: {
+  call?: Call;
+  callsById?: Map<Call['id'], Call>;
+}) => {
+  // Call might be undefined during initial render, can be safely ignored.
+  if (!call) {
+    return null;
+  }
+
+  if (call.method === 'step' && call.path?.length === 0) {
+    return <StepNode label={call.args[0]} />;
+  }
+
+  const path = call.path?.flatMap((elem, index) => {
+    // eslint-disable-next-line no-underscore-dangle
+    const callId = (elem as CallRef).__callId__;
+    return [
+      callId ? (
+        <MethodCall key={`elem${index}`} call={callsById?.get(callId)} callsById={callsById} />
+      ) : (
+        <span key={`elem${index}`}>{elem as any}</span>
+      ),
+      <wbr key={`wbr${index}`} />,
+      <span key={`dot${index}`}>.</span>,
+    ];
+  });
+
+  const args = call.args?.flatMap((arg, index, array) => {
+    const node = <Node key={`node${index}`} value={arg} callsById={callsById} />;
+    return index < array.length - 1
+      ? [node, <span key={`comma${index}`}>,&nbsp;</span>, <wbr key={`wbr${index}`} />]
+      : [node];
+  });
+
+  const colors = useThemeColors();
+  return (
+    <>
+      <span style={{ color: colors.base }}>{path}</span>
+      <span style={{ color: colors.method }}>{call.method}</span>
+      <span style={{ color: colors.base }}>
+        (<wbr />
+        {args}
+        <wbr />)
+      </span>
+    </>
+  );
+};
diff --git a/code/addons/test/src/components/Panel.test.ts b/code/addons/test/src/components/Panel.test.ts
new file mode 100644
index 000000000000..1d25d154dadc
--- /dev/null
+++ b/code/addons/test/src/components/Panel.test.ts
@@ -0,0 +1,292 @@
+// @vitest-environment happy-dom
+import { describe, expect, it } from 'vitest';
+
+import { type Call, CallStates, type LogItem } from '@storybook/instrumenter';
+
+import { getInteractions } from './Panel';
+
+describe('Panel', () => {
+  describe('getInteractions', () => {
+    const log: LogItem[] = [
+      {
+        callId: 'story--id [4] findByText',
+        status: CallStates.DONE,
+        ancestors: [],
+      },
+      {
+        callId: 'story--id [5] click',
+        status: CallStates.DONE,
+        ancestors: [],
+      },
+      {
+        callId: 'story--id [6] waitFor',
+        status: CallStates.DONE,
+        ancestors: [],
+      },
+      {
+        callId: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
+        status: CallStates.DONE,
+        ancestors: ['story--id [6] waitFor'],
+      },
+    ];
+    const calls = new Map<Call['id'], Call>(
+      [
+        {
+          id: 'story--id [0] action',
+          storyId: 'story--id',
+          ancestors: [],
+          cursor: 0,
+          path: [],
+          method: 'action',
+          args: [{ __function__: { name: 'onSubmit' } }],
+          interceptable: false,
+          retain: true,
+        },
+        {
+          id: 'story--id [1] action',
+          storyId: 'story--id',
+          ancestors: [],
+          cursor: 1,
+          path: [],
+          method: 'action',
+          args: [{ __function__: { name: 'onTransactionStart' } }],
+          interceptable: false,
+          retain: true,
+        },
+        {
+          id: 'story--id [2] action',
+          storyId: 'story--id',
+          ancestors: [],
+          cursor: 2,
+          path: [],
+          method: 'action',
+          args: [{ __function__: { name: 'onTransactionEnd' } }],
+          interceptable: false,
+          retain: true,
+        },
+        {
+          id: 'story--id [3] within',
+          storyId: 'story--id',
+          ancestors: [],
+          cursor: 3,
+          path: [],
+          method: 'within',
+          args: [{ __element__: { localName: 'div', id: 'root', innerText: 'Click' } }],
+          interceptable: false,
+          retain: false,
+        },
+        {
+          id: 'story--id [4] findByText',
+          storyId: 'story--id',
+          ancestors: [],
+          cursor: 4,
+          path: [{ __callId__: 'story--id [3] within' }],
+          method: 'findByText',
+          args: ['Click'],
+          interceptable: true,
+          retain: false,
+        },
+        {
+          id: 'story--id [5] click',
+          storyId: 'story--id',
+          ancestors: [],
+          cursor: 5,
+          path: ['userEvent'],
+          method: 'click',
+          args: [{ __element__: { localName: 'button', innerText: 'Click' } }],
+          interceptable: true,
+          retain: false,
+        },
+        {
+          id: 'story--id [6] waitFor [0] expect',
+          storyId: 'story--id',
+          ancestors: ['story--id [6] waitFor'],
+          cursor: 0,
+          path: [],
+          method: 'expect',
+          args: [{ __callId__: 'story--id [0] action', retain: true }],
+          interceptable: true,
+          retain: false,
+        },
+        {
+          id: 'story--id [6] waitFor [1] stringMatching',
+          storyId: 'story--id',
+          ancestors: ['story--id [6] waitFor'],
+          cursor: 1,
+          path: ['expect'],
+          method: 'stringMatching',
+          args: [{ __regexp__: { flags: 'gi', source: '([A-Z])\\w+' } }],
+          interceptable: false,
+          retain: false,
+        },
+        {
+          id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
+          storyId: 'story--id',
+          ancestors: ['story--id [6] waitFor'],
+          cursor: 2,
+          path: [{ __callId__: 'story--id [6] waitFor [0] expect' }],
+          method: 'toHaveBeenCalledWith',
+          args: [{ __callId__: 'story--id [6] waitFor [1] stringMatching', retain: false }],
+          interceptable: true,
+          retain: false,
+        },
+        {
+          id: 'story--id [6] waitFor',
+          storyId: 'story--id',
+          ancestors: [],
+          cursor: 6,
+          path: [],
+          method: 'waitFor',
+          args: [{ __function__: { name: '' } }],
+          interceptable: true,
+          retain: false,
+        },
+      ].map((v) => [v.id, v])
+    );
+    const collapsed = new Set<Call['id']>();
+    const setCollapsed = () => {};
+
+    it('returns list of interactions', () => {
+      expect(getInteractions({ log, calls, collapsed, setCollapsed })).toEqual([
+        {
+          ...calls.get('story--id [4] findByText'),
+          status: CallStates.DONE,
+          childCallIds: undefined,
+          isHidden: false,
+          isCollapsed: false,
+          toggleCollapsed: expect.any(Function),
+        },
+        {
+          ...calls.get('story--id [5] click'),
+          status: CallStates.DONE,
+          childCallIds: undefined,
+          isHidden: false,
+          isCollapsed: false,
+          toggleCollapsed: expect.any(Function),
+        },
+        {
+          ...calls.get('story--id [6] waitFor'),
+          status: CallStates.DONE,
+          childCallIds: ['story--id [6] waitFor [2] toHaveBeenCalledWith'],
+          isHidden: false,
+          isCollapsed: false,
+          toggleCollapsed: expect.any(Function),
+        },
+        {
+          ...calls.get('story--id [6] waitFor [2] toHaveBeenCalledWith'),
+          status: CallStates.DONE,
+          childCallIds: undefined,
+          isHidden: false,
+          isCollapsed: false,
+          toggleCollapsed: expect.any(Function),
+        },
+      ]);
+    });
+
+    it('hides calls for which the parent is collapsed', () => {
+      const withCollapsed = new Set<Call['id']>(['story--id [6] waitFor']);
+
+      expect(getInteractions({ log, calls, collapsed: withCollapsed, setCollapsed })).toEqual([
+        expect.objectContaining({
+          ...calls.get('story--id [4] findByText'),
+          childCallIds: undefined,
+          isCollapsed: false,
+          isHidden: false,
+        }),
+        expect.objectContaining({
+          ...calls.get('story--id [5] click'),
+          childCallIds: undefined,
+          isCollapsed: false,
+          isHidden: false,
+        }),
+        expect.objectContaining({
+          ...calls.get('story--id [6] waitFor'),
+          childCallIds: ['story--id [6] waitFor [2] toHaveBeenCalledWith'],
+          isCollapsed: true,
+          isHidden: false,
+        }),
+        expect.objectContaining({
+          ...calls.get('story--id [6] waitFor [2] toHaveBeenCalledWith'),
+          childCallIds: undefined,
+          isCollapsed: false,
+          isHidden: true,
+        }),
+      ]);
+    });
+
+    it('uses status from log', () => {
+      const withError = log.slice(0, 3).concat({ ...log[3], status: CallStates.ERROR });
+
+      expect(getInteractions({ log: withError, calls, collapsed, setCollapsed })).toEqual([
+        expect.objectContaining({
+          id: 'story--id [4] findByText',
+          status: CallStates.DONE,
+        }),
+        expect.objectContaining({
+          id: 'story--id [5] click',
+          status: CallStates.DONE,
+        }),
+        expect.objectContaining({
+          id: 'story--id [6] waitFor',
+          status: CallStates.DONE,
+        }),
+        expect.objectContaining({
+          id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
+          status: CallStates.ERROR,
+        }),
+      ]);
+    });
+
+    it('keeps status active for errored child calls while parent is active', () => {
+      const withActiveError = log.slice(0, 2).concat([
+        { ...log[2], status: CallStates.ACTIVE },
+        { ...log[3], status: CallStates.ERROR },
+      ]);
+
+      expect(getInteractions({ log: withActiveError, calls, collapsed, setCollapsed })).toEqual([
+        expect.objectContaining({
+          id: 'story--id [4] findByText',
+          status: CallStates.DONE,
+        }),
+        expect.objectContaining({
+          id: 'story--id [5] click',
+          status: CallStates.DONE,
+        }),
+        expect.objectContaining({
+          id: 'story--id [6] waitFor',
+          status: CallStates.ACTIVE,
+        }),
+        expect.objectContaining({
+          id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
+          status: CallStates.ACTIVE, // not ERROR
+        }),
+      ]);
+    });
+
+    it('does not override child status other than error for active parent', () => {
+      const withActiveWaiting = log.slice(0, 2).concat([
+        { ...log[2], status: CallStates.ACTIVE },
+        { ...log[3], status: CallStates.WAITING },
+      ]);
+
+      expect(getInteractions({ log: withActiveWaiting, calls, collapsed, setCollapsed })).toEqual([
+        expect.objectContaining({
+          id: 'story--id [4] findByText',
+          status: CallStates.DONE,
+        }),
+        expect.objectContaining({
+          id: 'story--id [5] click',
+          status: CallStates.DONE,
+        }),
+        expect.objectContaining({
+          id: 'story--id [6] waitFor',
+          status: CallStates.ACTIVE,
+        }),
+        expect.objectContaining({
+          id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
+          status: CallStates.WAITING,
+        }),
+      ]);
+    });
+  });
+});
diff --git a/code/addons/test/src/components/Panel.tsx b/code/addons/test/src/components/Panel.tsx
new file mode 100644
index 000000000000..d6ea74843151
--- /dev/null
+++ b/code/addons/test/src/components/Panel.tsx
@@ -0,0 +1,320 @@
+import type { Dispatch, SetStateAction } from 'react';
+import React, { Fragment, memo, useEffect, useMemo, useRef, useState } from 'react';
+
+import {
+  FORCE_REMOUNT,
+  PLAY_FUNCTION_THREW_EXCEPTION,
+  STORY_RENDER_PHASE_CHANGED,
+  STORY_THREW_EXCEPTION,
+  UNHANDLED_ERRORS_WHILE_PLAYING,
+} from 'storybook/internal/core-events';
+import {
+  useAddonState,
+  useChannel,
+  useParameter,
+  useStorybookState,
+} from 'storybook/internal/manager-api';
+
+import { global } from '@storybook/global';
+import { type Call, CallStates, EVENTS, type LogItem } from '@storybook/instrumenter';
+import type { API_StatusValue } from '@storybook/types';
+
+import { ADDON_ID, STORYBOOK_ADDON_TEST_CHANNEL, TEST_PROVIDER_ID } from '../constants';
+import { InteractionsPanel } from './InteractionsPanel';
+
+const INITIAL_CONTROL_STATES = {
+  start: false,
+  back: false,
+  goto: false,
+  next: false,
+  end: false,
+};
+
+const statusMap: Record<CallStates, API_StatusValue> = {
+  [CallStates.DONE]: 'success',
+  [CallStates.ERROR]: 'error',
+  [CallStates.ACTIVE]: 'pending',
+  [CallStates.WAITING]: 'pending',
+};
+
+export const getInteractions = ({
+  log,
+  calls,
+  collapsed,
+  setCollapsed,
+}: {
+  log: LogItem[];
+  calls: Map<Call['id'], Call>;
+  collapsed: Set<Call['id']>;
+  setCollapsed: Dispatch<SetStateAction<Set<string>>>;
+}) => {
+  const callsById = new Map<Call['id'], Call>();
+  const childCallMap = new Map<Call['id'], Call['id'][]>();
+
+  return log
+    .map(({ callId, ancestors, status }) => {
+      let isHidden = false;
+      ancestors.forEach((ancestor) => {
+        if (collapsed.has(ancestor)) {
+          isHidden = true;
+        }
+        childCallMap.set(ancestor, (childCallMap.get(ancestor) || []).concat(callId));
+      });
+      return { ...calls.get(callId)!, status, isHidden };
+    })
+    .map((call) => {
+      const status =
+        call.status === CallStates.ERROR &&
+        call.ancestors &&
+        callsById.get(call.ancestors.slice(-1)[0])?.status === CallStates.ACTIVE
+          ? CallStates.ACTIVE
+          : call.status;
+      callsById.set(call.id, { ...call, status });
+      return {
+        ...call,
+        status,
+        childCallIds: childCallMap.get(call.id),
+        isCollapsed: collapsed.has(call.id),
+        toggleCollapsed: () =>
+          setCollapsed((ids) => {
+            if (ids.has(call.id)) {
+              ids.delete(call.id);
+            } else {
+              ids.add(call.id);
+            }
+            return new Set(ids);
+          }),
+      };
+    });
+};
+
+export const Panel = memo<{ storyId: string }>(function PanelMemoized({ storyId }) {
+  const { status: storyStatuses } = useStorybookState();
+
+  // shared state
+  const [addonState, set] = useAddonState(ADDON_ID, {
+    controlStates: INITIAL_CONTROL_STATES,
+    isErrored: false,
+    pausedAt: undefined,
+    interactions: [],
+    isPlaying: false,
+    hasException: false,
+    caughtException: undefined,
+    interactionsCount: 0,
+    unhandledErrors: undefined,
+  });
+
+  // local state
+  const [scrollTarget, setScrollTarget] = useState<HTMLElement | undefined>(undefined);
+  const [collapsed, setCollapsed] = useState<Set<Call['id']>>(new Set());
+  const [hasResultMismatch, setResultMismatch] = useState(false);
+
+  const {
+    controlStates = INITIAL_CONTROL_STATES,
+    isErrored = false,
+    pausedAt = undefined,
+    interactions = [],
+    isPlaying = false,
+    caughtException = undefined,
+    unhandledErrors = undefined,
+  } = addonState;
+
+  // Log and calls are tracked in a ref so we don't needlessly rerender.
+  const log = useRef<LogItem[]>([]);
+  const calls = useRef<Map<Call['id'], Omit<Call, 'status'>>>(new Map());
+  const setCall = ({ status, ...call }: Call) => calls.current.set(call.id, call);
+
+  const endRef = useRef<HTMLDivElement>();
+  useEffect(() => {
+    let observer: IntersectionObserver;
+    if (global.IntersectionObserver) {
+      observer = new global.IntersectionObserver(
+        ([end]: any) => setScrollTarget(end.isIntersecting ? undefined : end.target),
+        { root: global.document.querySelector('#panel-tab-content') }
+      );
+
+      if (endRef.current) {
+        observer.observe(endRef.current);
+      }
+    }
+    return () => observer?.disconnect();
+  }, []);
+
+  const emit = useChannel(
+    {
+      [EVENTS.CALL]: setCall,
+      [EVENTS.SYNC]: (payload) => {
+        // @ts-expect-error TODO
+        set((s) => {
+          const list = getInteractions({
+            log: payload.logItems,
+            calls: calls.current,
+            collapsed,
+            setCollapsed,
+          });
+          return {
+            ...s,
+            controlStates: payload.controlStates,
+            pausedAt: payload.pausedAt,
+            interactions: list,
+            interactionsCount: list.filter(({ method }) => method !== 'step').length,
+          };
+        });
+
+        log.current = payload.logItems;
+      },
+      [STORY_RENDER_PHASE_CHANGED]: (event) => {
+        if (event.newPhase === 'preparing') {
+          set({
+            controlStates: INITIAL_CONTROL_STATES,
+            isErrored: false,
+            pausedAt: undefined,
+            interactions: [],
+            isPlaying: false,
+            hasException: false,
+            caughtException: undefined,
+            interactionsCount: 0,
+            unhandledErrors: undefined,
+          });
+          return;
+        }
+        set((s) => {
+          const newState: typeof s = {
+            ...s,
+            isPlaying: event.newPhase === 'playing',
+            pausedAt: undefined,
+            ...(event.newPhase === 'rendering'
+              ? {
+                  isErrored: false,
+                  caughtException: undefined,
+                }
+              : {}),
+          };
+
+          return newState;
+        });
+      },
+      [STORY_THREW_EXCEPTION]: () => {
+        set((s) => ({ ...s, isErrored: true, hasException: true }));
+      },
+      [PLAY_FUNCTION_THREW_EXCEPTION]: (e) => {
+        set((s) => ({ ...s, caughtException: e, hasException: true }));
+      },
+      [UNHANDLED_ERRORS_WHILE_PLAYING]: (e) => {
+        set((s) => ({ ...s, unhandledErrors: e, hasException: true }));
+      },
+    },
+    [collapsed]
+  );
+
+  useEffect(() => {
+    // @ts-expect-error TODO
+    set((s) => {
+      const list = getInteractions({
+        log: log.current,
+        calls: calls.current,
+        collapsed,
+        setCollapsed,
+      });
+      return {
+        ...s,
+        interactions: list,
+        interactionsCount: list.filter(({ method }) => method !== 'step').length,
+      };
+    });
+  }, [set, collapsed]);
+
+  const controls = useMemo(
+    () => ({
+      start: () => emit(EVENTS.START, { storyId }),
+      back: () => emit(EVENTS.BACK, { storyId }),
+      goto: (callId: string) => emit(EVENTS.GOTO, { storyId, callId }),
+      next: () => emit(EVENTS.NEXT, { storyId }),
+      end: () => emit(EVENTS.END, { storyId }),
+      rerun: () => {
+        emit(FORCE_REMOUNT, { storyId });
+      },
+    }),
+    [emit, storyId]
+  );
+
+  const storyFilePath = useParameter('fileName', '');
+  const [fileName] = storyFilePath.toString().split('/').slice(-1);
+  const scrollToTarget = () => scrollTarget?.scrollIntoView({ behavior: 'smooth', block: 'end' });
+
+  const hasException =
+    !!caughtException ||
+    !!unhandledErrors ||
+    // @ts-expect-error TODO
+    interactions.some((v) => v.status === CallStates.ERROR);
+
+  const storyStatus = storyStatuses[storyId]?.[TEST_PROVIDER_ID];
+  const storyTestStatus = storyStatus?.status;
+
+  const browserTestStatus = useMemo<CallStates | undefined>(() => {
+    if (!isPlaying && (interactions.length > 0 || hasException)) {
+      return hasException ? CallStates.ERROR : CallStates.DONE;
+    }
+    return isPlaying ? CallStates.ACTIVE : undefined;
+  }, [isPlaying, interactions, hasException]);
+
+  const { testRunId } = storyStatus?.data || {};
+
+  useEffect(() => {
+    const isMismatch =
+      browserTestStatus &&
+      storyTestStatus &&
+      storyTestStatus !== 'pending' &&
+      storyTestStatus !== statusMap[browserTestStatus];
+
+    if (isMismatch) {
+      const timeout = setTimeout(
+        () =>
+          setResultMismatch((currentValue) => {
+            if (!currentValue) {
+              emit(STORYBOOK_ADDON_TEST_CHANNEL, {
+                type: 'test-discrepancy',
+                payload: {
+                  browserStatus: browserTestStatus === CallStates.DONE ? 'PASS' : 'FAIL',
+                  cliStatus: browserTestStatus === CallStates.DONE ? 'FAIL' : 'PASS',
+                  storyId,
+                  testRunId,
+                },
+              });
+            }
+            return true;
+          }),
+        2000
+      );
+      return () => clearTimeout(timeout);
+    } else {
+      setResultMismatch(false);
+    }
+  }, [emit, browserTestStatus, storyTestStatus, storyId, testRunId]);
+
+  if (isErrored) {
+    return <Fragment key="component-tests" />;
+  }
+
+  return (
+    <Fragment key="component-tests">
+      <InteractionsPanel
+        hasResultMismatch={hasResultMismatch}
+        browserTestStatus={browserTestStatus}
+        calls={calls.current}
+        controls={controls}
+        controlStates={controlStates}
+        interactions={interactions}
+        fileName={fileName}
+        hasException={hasException}
+        caughtException={caughtException}
+        unhandledErrors={unhandledErrors}
+        isPlaying={isPlaying}
+        pausedAt={pausedAt}
+        // @ts-expect-error TODO
+        endRef={endRef}
+        onScrollToEnd={scrollTarget && scrollToTarget}
+      />
+    </Fragment>
+  );
+});
diff --git a/code/addons/test/src/components/PanelTitle.tsx b/code/addons/test/src/components/PanelTitle.tsx
new file mode 100644
index 000000000000..4ef1ddedd302
--- /dev/null
+++ b/code/addons/test/src/components/PanelTitle.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { Badge, Spaced } from 'storybook/internal/components';
+import { useAddonState } from 'storybook/internal/manager-api';
+
+import { ADDON_ID } from '../constants';
+
+export function PanelTitle() {
+  const [addonState = {}] = useAddonState(ADDON_ID);
+  const { hasException, interactionsCount } = addonState as any;
+
+  return (
+    <div>
+      <Spaced col={1}>
+        <span style={{ display: 'inline-block', verticalAlign: 'middle' }}>Component tests</span>
+        {interactionsCount && !hasException ? (
+          <Badge status="neutral">{interactionsCount}</Badge>
+        ) : null}
+        {hasException ? <Badge status="negative">{interactionsCount}</Badge> : null}
+      </Spaced>
+    </div>
+  );
+}
diff --git a/code/addons/test/src/components/RelativeTime.stories.tsx b/code/addons/test/src/components/RelativeTime.stories.tsx
new file mode 100644
index 000000000000..4d3c6af0f6d8
--- /dev/null
+++ b/code/addons/test/src/components/RelativeTime.stories.tsx
@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { RelativeTime } from './RelativeTime';
+
+const meta = {
+  component: RelativeTime,
+} satisfies Meta<typeof RelativeTime>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const JustNow: Story = {
+  args: {
+    timestamp: Date.now() - 1000 * 10,
+  },
+};
+
+export const AMinuteAgo: Story = {
+  args: {
+    timestamp: Date.now() - 1000 * 60,
+  },
+};
+
+export const MinutesAgo: Story = {
+  args: {
+    timestamp: Date.now() - 1000 * 60 * 2,
+  },
+};
+
+export const HoursAgo: Story = {
+  args: {
+    timestamp: Date.now() - 1000 * 60 * 60 * 3,
+  },
+};
+
+export const Yesterday: Story = {
+  args: {
+    timestamp: Date.now() - 1000 * 60 * 60 * 24,
+  },
+};
+
+export const DaysAgo: Story = {
+  args: {
+    timestamp: Date.now() - 1000 * 60 * 60 * 24 * 3,
+  },
+};
diff --git a/code/addons/test/src/components/RelativeTime.tsx b/code/addons/test/src/components/RelativeTime.tsx
new file mode 100644
index 000000000000..4d4cf3c48693
--- /dev/null
+++ b/code/addons/test/src/components/RelativeTime.tsx
@@ -0,0 +1,35 @@
+import { useEffect, useState } from 'react';
+
+export const RelativeTime = ({ timestamp }: { timestamp?: number }) => {
+  const [timeAgo, setTimeAgo] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (timestamp) {
+      setTimeAgo(Date.now() - timestamp);
+      const interval = setInterval(() => setTimeAgo(Date.now() - timestamp), 10000);
+      return () => clearInterval(interval);
+    }
+  }, [timestamp]);
+
+  if (timeAgo === null) {
+    return null;
+  }
+
+  const seconds = Math.round(timeAgo / 1000);
+  if (seconds < 60) {
+    return `just now`;
+  }
+
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) {
+    return minutes === 1 ? `a minute ago` : `${minutes} minutes ago`;
+  }
+
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) {
+    return hours === 1 ? `an hour ago` : `${hours} hours ago`;
+  }
+
+  const days = Math.floor(hours / 24);
+  return days === 1 ? `yesterday` : `${days} days ago`;
+};
diff --git a/code/addons/test/src/components/StatusBadge.stories.tsx b/code/addons/test/src/components/StatusBadge.stories.tsx
new file mode 100644
index 000000000000..afac03be0a11
--- /dev/null
+++ b/code/addons/test/src/components/StatusBadge.stories.tsx
@@ -0,0 +1,25 @@
+import { CallStates } from '@storybook/instrumenter';
+
+import { StatusBadge } from './StatusBadge';
+
+export default {
+  title: 'StatusBadge',
+  component: StatusBadge,
+  parameters: { layout: 'padded' },
+};
+
+export const Pass = {
+  args: { status: CallStates.DONE },
+};
+
+export const Active = {
+  args: { status: CallStates.ACTIVE },
+};
+
+export const Waiting = {
+  args: { status: CallStates.WAITING },
+};
+
+export const Fail = {
+  args: { status: CallStates.ERROR },
+};
diff --git a/code/addons/test/src/components/StatusBadge.tsx b/code/addons/test/src/components/StatusBadge.tsx
new file mode 100644
index 000000000000..a906b501a939
--- /dev/null
+++ b/code/addons/test/src/components/StatusBadge.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { styled, typography } from 'storybook/internal/theming';
+
+import { type Call, CallStates } from '@storybook/instrumenter';
+
+export interface StatusBadgeProps {
+  status: Call['status'];
+}
+
+const StyledBadge = styled.div<StatusBadgeProps>(({ theme, status }) => {
+  const backgroundColor = {
+    [CallStates.DONE]: theme.color.positive,
+    [CallStates.ERROR]: theme.color.negative,
+    [CallStates.ACTIVE]: theme.color.warning,
+    [CallStates.WAITING]: theme.color.warning,
+  }[status!];
+  return {
+    padding: '4px 6px 4px 8px;',
+    borderRadius: '4px',
+    backgroundColor,
+    color: 'white',
+    fontFamily: typography.fonts.base,
+    textTransform: 'uppercase',
+    fontSize: typography.size.s1,
+    letterSpacing: 3,
+    fontWeight: typography.weight.bold,
+    width: 65,
+    textAlign: 'center',
+  };
+});
+
+export const StatusBadge: React.FC<StatusBadgeProps> = ({ status }) => {
+  const badgeText = {
+    [CallStates.DONE]: 'Pass',
+    [CallStates.ERROR]: 'Fail',
+    [CallStates.ACTIVE]: 'Runs',
+    [CallStates.WAITING]: 'Runs',
+  }[status!];
+  return (
+    <StyledBadge aria-label="Status of the test run" status={status}>
+      {badgeText}
+    </StyledBadge>
+  );
+};
diff --git a/code/addons/test/src/components/StatusIcon.stories.tsx b/code/addons/test/src/components/StatusIcon.stories.tsx
new file mode 100644
index 000000000000..7d465dc64001
--- /dev/null
+++ b/code/addons/test/src/components/StatusIcon.stories.tsx
@@ -0,0 +1,24 @@
+import { CallStates } from '@storybook/instrumenter';
+
+import { StatusIcon } from './StatusIcon';
+
+export default {
+  title: 'StatusIcon',
+  component: StatusIcon,
+};
+
+export const Pending = {
+  args: { status: CallStates.WAITING },
+};
+
+export const Active = {
+  args: { status: CallStates.ACTIVE },
+};
+
+export const Error = {
+  args: { status: CallStates.ERROR },
+};
+
+export const Done = {
+  args: { status: CallStates.DONE },
+};
diff --git a/code/addons/test/src/components/StatusIcon.tsx b/code/addons/test/src/components/StatusIcon.tsx
new file mode 100644
index 000000000000..1e9ec4c9aa99
--- /dev/null
+++ b/code/addons/test/src/components/StatusIcon.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { styled, useTheme } from 'storybook/internal/theming';
+
+import { CheckIcon, CircleIcon, PlayIcon, StopAltIcon } from '@storybook/icons';
+import { type Call, CallStates } from '@storybook/instrumenter';
+
+import { transparentize } from 'polished';
+
+export interface StatusIconProps {
+  status: Call['status'];
+}
+
+const WarningContainer = styled.div({
+  width: 14,
+  height: 14,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const StatusIcon: React.FC<StatusIconProps> = ({ status }) => {
+  const theme = useTheme();
+
+  switch (status) {
+    case CallStates.DONE: {
+      return <CheckIcon color={theme.color.positive} data-testid="icon-done" />;
+    }
+    case CallStates.ERROR: {
+      return <StopAltIcon color={theme.color.negative} data-testid="icon-error" />;
+    }
+    case CallStates.ACTIVE: {
+      return <PlayIcon color={theme.color.secondary} data-testid="icon-active" />;
+    }
+    case CallStates.WAITING: {
+      return (
+        <WarningContainer data-testid="icon-waiting">
+          <CircleIcon color={transparentize(0.5, '#CCCCCC')} size={6} />
+        </WarningContainer>
+      );
+    }
+    default: {
+      return null;
+    }
+  }
+};
diff --git a/code/addons/test/src/components/Subnav.stories.tsx b/code/addons/test/src/components/Subnav.stories.tsx
new file mode 100644
index 000000000000..e19f86fc9847
--- /dev/null
+++ b/code/addons/test/src/components/Subnav.stories.tsx
@@ -0,0 +1,91 @@
+import { CallStates } from '@storybook/instrumenter';
+
+import { action } from '@storybook/addon-actions';
+
+import { parameters } from '../preview';
+import { Subnav } from './Subnav';
+
+export default {
+  title: 'Subnav',
+  component: Subnav,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    controls: {
+      start: action('start'),
+      back: action('back'),
+      goto: action('goto'),
+      next: action('next'),
+      end: action('end'),
+      rerun: action('rerun'),
+    },
+    controlStates: {
+      start: true,
+      back: true,
+      goto: true,
+      next: false,
+      end: false,
+    },
+    storyFileName: 'Subnav.stories.tsx',
+    hasNext: true,
+    hasPrevious: true,
+  },
+};
+
+export const Pass = {
+  args: {
+    status: CallStates.DONE,
+  },
+};
+
+export const Fail = {
+  args: {
+    status: CallStates.ERROR,
+  },
+};
+
+export const Runs = {
+  args: {
+    status: CallStates.WAITING,
+  },
+};
+
+export const AtStart = {
+  args: {
+    status: CallStates.WAITING,
+    controlStates: {
+      start: false,
+      back: false,
+      goto: true,
+      next: true,
+      end: true,
+    },
+  },
+};
+
+export const Midway = {
+  args: {
+    status: CallStates.WAITING,
+    controlStates: {
+      start: true,
+      back: true,
+      goto: true,
+      next: true,
+      end: true,
+    },
+  },
+};
+
+export const Locked = {
+  args: {
+    status: CallStates.ACTIVE,
+    controlStates: {
+      start: false,
+      back: false,
+      goto: false,
+      next: false,
+      end: false,
+    },
+  },
+};
diff --git a/code/addons/test/src/components/Subnav.tsx b/code/addons/test/src/components/Subnav.tsx
new file mode 100644
index 000000000000..88fcbd5c4522
--- /dev/null
+++ b/code/addons/test/src/components/Subnav.tsx
@@ -0,0 +1,193 @@
+import type { ComponentProps } from 'react';
+import React from 'react';
+
+import {
+  Bar,
+  Button,
+  IconButton,
+  P,
+  Separator,
+  TooltipNote,
+  WithTooltip,
+} from 'storybook/internal/components';
+import { styled } from 'storybook/internal/theming';
+
+import {
+  FastForwardIcon,
+  PlayBackIcon,
+  PlayNextIcon,
+  RewindIcon,
+  SyncIcon,
+} from '@storybook/icons';
+import type { Call, ControlStates } from '@storybook/instrumenter';
+import { CallStates } from '@storybook/instrumenter';
+
+import type { Controls } from './InteractionsPanel';
+import { StatusBadge } from './StatusBadge';
+
+const SubnavWrapper = styled.div(({ theme }) => ({
+  background: theme.background.app,
+  borderBottom: `1px solid ${theme.appBorderColor}`,
+  position: 'sticky',
+  top: 0,
+  zIndex: 1,
+}));
+
+const StyledSubnav = styled.nav(({ theme }) => ({
+  height: 40,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  paddingLeft: 15,
+}));
+
+interface SubnavProps {
+  controls: Controls;
+  controlStates: ControlStates;
+  status: Call['status'];
+  storyFileName?: string;
+  onScrollToEnd?: () => void;
+}
+
+const StyledButton = styled(Button)(({ theme }) => ({
+  borderRadius: 4,
+  padding: 6,
+  color: theme.textMutedColor,
+  '&:not(:disabled)': {
+    '&:hover,&:focus-visible': {
+      color: theme.color.secondary,
+    },
+  },
+}));
+
+const Note = styled(TooltipNote)(({ theme }) => ({
+  fontFamily: theme.typography.fonts.base,
+}));
+
+const StyledIconButton = styled(IconButton)(({ theme }) => ({
+  color: theme.textMutedColor,
+  margin: '0 3px',
+}));
+
+const StyledSeparator = styled(Separator)({
+  marginTop: 0,
+});
+
+const StyledLocation = styled(P)(({ theme }) => ({
+  color: theme.textMutedColor,
+  justifyContent: 'flex-end',
+  textAlign: 'right',
+  whiteSpace: 'nowrap',
+  marginTop: 'auto',
+  marginBottom: 1,
+  paddingRight: 15,
+  fontSize: 13,
+}));
+
+const Group = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+const RewindButton = styled(StyledIconButton)({
+  marginLeft: 9,
+});
+
+const JumpToEndButton = styled(StyledButton)({
+  marginLeft: 9,
+  marginRight: 9,
+  marginBottom: 1,
+  lineHeight: '12px',
+});
+
+interface AnimatedButtonProps {
+  animating?: boolean;
+}
+
+const RerunButton = styled(StyledIconButton)<
+  AnimatedButtonProps & ComponentProps<typeof StyledIconButton>
+>(({ theme, animating, disabled }) => ({
+  opacity: disabled ? 0.5 : 1,
+  svg: {
+    animation: animating ? `${theme.animation.rotate360} 200ms ease-out` : undefined,
+  },
+}));
+
+export const Subnav: React.FC<SubnavProps> = ({
+  controls,
+  controlStates,
+  status,
+  storyFileName,
+  onScrollToEnd,
+}) => {
+  const buttonText = status === CallStates.ERROR ? 'Scroll to error' : 'Scroll to end';
+
+  return (
+    <SubnavWrapper>
+      <Bar>
+        <StyledSubnav>
+          <Group>
+            <StatusBadge status={status} />
+
+            <JumpToEndButton onClick={onScrollToEnd} disabled={!onScrollToEnd}>
+              {buttonText}
+            </JumpToEndButton>
+
+            <StyledSeparator />
+
+            <WithTooltip trigger="hover" hasChrome={false} tooltip={<Note note="Go to start" />}>
+              <RewindButton
+                aria-label="Go to start"
+                onClick={controls.start}
+                disabled={!controlStates.start}
+              >
+                <RewindIcon />
+              </RewindButton>
+            </WithTooltip>
+
+            <WithTooltip trigger="hover" hasChrome={false} tooltip={<Note note="Go back" />}>
+              <StyledIconButton
+                aria-label="Go back"
+                onClick={controls.back}
+                disabled={!controlStates.back}
+              >
+                <PlayBackIcon />
+              </StyledIconButton>
+            </WithTooltip>
+
+            <WithTooltip trigger="hover" hasChrome={false} tooltip={<Note note="Go forward" />}>
+              <StyledIconButton
+                aria-label="Go forward"
+                onClick={controls.next}
+                disabled={!controlStates.next}
+              >
+                <PlayNextIcon />
+              </StyledIconButton>
+            </WithTooltip>
+
+            <WithTooltip trigger="hover" hasChrome={false} tooltip={<Note note="Go to end" />}>
+              <StyledIconButton
+                aria-label="Go to end"
+                onClick={controls.end}
+                disabled={!controlStates.end}
+              >
+                <FastForwardIcon />
+              </StyledIconButton>
+            </WithTooltip>
+
+            <WithTooltip trigger="hover" hasChrome={false} tooltip={<Note note="Rerun" />}>
+              <RerunButton aria-label="Rerun" onClick={controls.rerun}>
+                <SyncIcon />
+              </RerunButton>
+            </WithTooltip>
+          </Group>
+          {storyFileName && (
+            <Group>
+              <StyledLocation>{storyFileName}</StyledLocation>
+            </Group>
+          )}
+        </StyledSubnav>
+      </Bar>
+    </SubnavWrapper>
+  );
+};
diff --git a/code/addons/test/src/components/TestDiscrepancyMessage.stories.tsx b/code/addons/test/src/components/TestDiscrepancyMessage.stories.tsx
new file mode 100644
index 000000000000..81553cdc5a32
--- /dev/null
+++ b/code/addons/test/src/components/TestDiscrepancyMessage.stories.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { ManagerContext } from 'storybook/internal/manager-api';
+
+import { CallStates } from '@storybook/instrumenter';
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { TestDiscrepancyMessage } from './TestDiscrepancyMessage';
+
+type Story = StoryObj<typeof TestDiscrepancyMessage>;
+const managerContext: any = {
+  state: {},
+  api: {
+    getDocsUrl: fn().mockName('api::getDocsUrl'),
+    emit: fn().mockName('api::emit'),
+  },
+};
+
+export default {
+  title: 'TestDiscrepancyMessage',
+  component: TestDiscrepancyMessage,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    (storyFn) => (
+      <ManagerContext.Provider value={managerContext}>{storyFn()}</ManagerContext.Provider>
+    ),
+  ],
+} as Meta<typeof TestDiscrepancyMessage>;
+
+export const BrowserPassedCliFailed: Story = {
+  args: {
+    browserTestStatus: CallStates.DONE,
+  },
+};
+
+export const CliFailedBrowserPassed: Story = {
+  args: {
+    browserTestStatus: CallStates.ERROR,
+  },
+};
diff --git a/code/addons/test/src/components/TestDiscrepancyMessage.tsx b/code/addons/test/src/components/TestDiscrepancyMessage.tsx
new file mode 100644
index 000000000000..2ff2e97c9f77
--- /dev/null
+++ b/code/addons/test/src/components/TestDiscrepancyMessage.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { Link } from 'storybook/internal/components';
+import { useStorybookApi } from 'storybook/internal/manager-api';
+import { styled } from 'storybook/internal/theming';
+
+import { CallStates } from '@storybook/instrumenter';
+
+import { DOCUMENTATION_DISCREPANCY_LINK } from '../constants';
+
+const Wrapper = styled.div(({ theme: { color, typography, background } }) => ({
+  textAlign: 'start',
+  padding: '11px 15px',
+  fontSize: `${typography.size.s2}px`,
+  fontWeight: typography.weight.regular,
+  lineHeight: '1rem',
+  background: background.app,
+  borderBottom: `1px solid ${color.border}`,
+  color: color.defaultText,
+  backgroundClip: 'padding-box',
+  position: 'relative',
+  code: {
+    fontSize: `${typography.size.s1 - 1}px`,
+    color: 'inherit',
+    margin: '0 0.2em',
+    padding: '0 0.2em',
+    background: 'rgba(255, 255, 255, 0.8)',
+    borderRadius: '2px',
+    boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)',
+  },
+}));
+
+interface TestDiscrepancyMessageProps {
+  browserTestStatus?: CallStates;
+}
+
+export const TestDiscrepancyMessage = ({ browserTestStatus }: TestDiscrepancyMessageProps) => {
+  const api = useStorybookApi();
+  const docsUrl = api.getDocsUrl({
+    subpath: DOCUMENTATION_DISCREPANCY_LINK,
+    versioned: true,
+    renderer: true,
+  });
+  const [passed, failed] =
+    browserTestStatus === CallStates.ERROR
+      ? ['the CLI', 'this browser']
+      : ['this browser', 'the CLI'];
+
+  return (
+    <Wrapper>
+      This component test passed in {passed}, but the tests failed in {failed}.{' '}
+      <Link href={docsUrl} target="_blank" withArrow>
+        Learn what could cause this
+      </Link>
+    </Wrapper>
+  );
+};
diff --git a/code/addons/test/src/components/TestProviderRender.stories.tsx b/code/addons/test/src/components/TestProviderRender.stories.tsx
new file mode 100644
index 000000000000..5111c1507a49
--- /dev/null
+++ b/code/addons/test/src/components/TestProviderRender.stories.tsx
@@ -0,0 +1,260 @@
+import React from 'react';
+
+import type { TestProviderConfig, TestProviderState } from 'storybook/internal/core-events';
+import { ManagerContext } from 'storybook/internal/manager-api';
+import { styled } from 'storybook/internal/theming';
+import { Addon_TypesEnum } from 'storybook/internal/types';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn, within } from '@storybook/test';
+
+import type { Config, Details } from '../constants';
+import { TestProviderRender } from './TestProviderRender';
+
+type Story = StoryObj<typeof TestProviderRender>;
+const managerContext: any = {
+  state: {
+    testProviders: {
+      'test-provider-id': {
+        id: 'test-provider-id',
+        name: 'Test Provider',
+        type: Addon_TypesEnum.experimental_TEST_PROVIDER,
+      },
+    },
+  },
+  api: {
+    getDocsUrl: fn(({ subpath }) => `https://storybook.js.org/docs/${subpath}`).mockName(
+      'api::getDocsUrl'
+    ),
+    emit: fn().mockName('api::emit'),
+    updateTestProviderState: fn().mockName('api::updateTestProviderState'),
+  },
+};
+
+const config: TestProviderConfig = {
+  id: 'test-provider-id',
+  name: 'Test Provider',
+  type: Addon_TypesEnum.experimental_TEST_PROVIDER,
+  runnable: true,
+  watchable: true,
+};
+
+const baseState: TestProviderState<Details, Config> = {
+  cancellable: true,
+  cancelling: false,
+  crashed: false,
+  error: undefined,
+  failed: false,
+  running: false,
+  watching: false,
+  config: {
+    a11y: false,
+    coverage: false,
+  },
+  details: {
+    config: {
+      a11y: false,
+      coverage: false,
+    },
+    testResults: [
+      {
+        endTime: 0,
+        startTime: 0,
+        status: 'passed',
+        message: 'All tests passed',
+        results: [
+          {
+            storyId: 'story-id',
+            status: 'passed',
+            duration: 100,
+            testRunId: 'test-run-id',
+            reports: [],
+          },
+        ],
+      },
+    ],
+  },
+};
+
+const Content = styled.div({
+  padding: '12px 6px',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '12px',
+});
+
+export default {
+  title: 'TestProviderRender',
+  component: TestProviderRender,
+  args: {
+    state: {
+      ...config,
+      ...baseState,
+    },
+    api: managerContext.api,
+  },
+  decorators: [
+    (StoryFn) => (
+      <Content>
+        <StoryFn />
+      </Content>
+    ),
+    (StoryFn) => (
+      <ManagerContext.Provider value={managerContext}>
+        <StoryFn />
+      </ManagerContext.Provider>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta<typeof TestProviderRender>;
+
+export const Default: Story = {
+  args: {
+    state: {
+      ...config,
+      ...baseState,
+    },
+  },
+};
+
+export const Running: Story = {
+  args: {
+    state: {
+      ...config,
+      ...baseState,
+      running: true,
+    },
+  },
+};
+
+export const Watching: Story = {
+  args: {
+    state: {
+      ...config,
+      ...baseState,
+      watching: true,
+    },
+  },
+};
+
+export const WithCoverageNegative: Story = {
+  args: {
+    state: {
+      ...config,
+      ...baseState,
+      details: {
+        config: {
+          a11y: false,
+          coverage: true,
+        },
+        testResults: [],
+        coverageSummary: {
+          percentage: 20,
+          status: 'negative',
+        },
+      },
+      config: {
+        a11y: false,
+        coverage: true,
+      },
+    },
+  },
+};
+
+export const WithCoverageWarning: Story = {
+  args: {
+    state: {
+      ...config,
+      ...baseState,
+      details: {
+        testResults: [],
+        config: {
+          a11y: false,
+          coverage: true,
+        },
+        coverageSummary: {
+          percentage: 50,
+          status: 'warning',
+        },
+      },
+      config: {
+        a11y: false,
+        coverage: true,
+      },
+    },
+  },
+};
+
+export const WithCoveragePositive: Story = {
+  args: {
+    state: {
+      ...config,
+      ...baseState,
+      details: {
+        testResults: [],
+        config: {
+          a11y: false,
+          coverage: true,
+        },
+        coverageSummary: {
+          percentage: 80,
+          status: 'positive',
+        },
+      },
+      config: {
+        a11y: false,
+        coverage: true,
+      },
+    },
+  },
+};
+
+export const Editing: Story = {
+  args: {
+    state: {
+      ...config,
+      ...baseState,
+      config: {
+        a11y: false,
+        coverage: false,
+      },
+      details: {
+        testResults: [],
+        config: {
+          a11y: false,
+          coverage: false,
+        },
+      },
+    },
+  },
+
+  play: async ({ canvasElement }) => {
+    const screen = within(canvasElement);
+
+    screen.getByLabelText(/Open settings/).click();
+  },
+};
+
+export const EditingAndWatching: Story = {
+  args: {
+    state: {
+      ...config,
+      ...baseState,
+      watching: true,
+      config: {
+        a11y: true,
+        coverage: true, // should be automatically disabled in the UI
+      },
+      details: {
+        testResults: [],
+        config: {
+          a11y: true,
+          coverage: true, // should be automatically disabled in the UI
+        },
+      },
+    },
+  },
+  play: Editing.play,
+};
diff --git a/code/addons/test/src/components/TestProviderRender.tsx b/code/addons/test/src/components/TestProviderRender.tsx
new file mode 100644
index 000000000000..4b1f4c35bc4d
--- /dev/null
+++ b/code/addons/test/src/components/TestProviderRender.tsx
@@ -0,0 +1,407 @@
+import React, { type ComponentProps, type FC, useCallback, useMemo, useRef, useState } from 'react';
+
+import { Button, ListItem, ProgressSpinner } from 'storybook/internal/components';
+import {
+  TESTING_MODULE_CONFIG_CHANGE,
+  type TestProviderConfig,
+  type TestProviderState,
+} from 'storybook/internal/core-events';
+import { addons } from 'storybook/internal/manager-api';
+import type { API } from 'storybook/internal/manager-api';
+import { styled, useTheme } from 'storybook/internal/theming';
+
+import {
+  AccessibilityIcon,
+  EditIcon,
+  EyeIcon,
+  PlayHollowIcon,
+  PointerHandIcon,
+  ShieldIcon,
+  StopAltIcon,
+} from '@storybook/icons';
+
+import { isEqual } from 'es-toolkit';
+import { debounce } from 'es-toolkit/compat';
+
+import {
+  ADDON_ID as A11Y_ADDON_ID,
+  PANEL_ID as A11y_ADDON_PANEL_ID,
+} from '../../../a11y/src/constants';
+import { type Config, type Details, PANEL_ID } from '../constants';
+import { type TestStatus } from '../node/reporter';
+import { Description } from './Description';
+import { TestStatusIcon } from './TestStatusIcon';
+import { Title } from './Title';
+
+const Container = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+const Heading = styled.div({
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '8px 2px',
+  gap: 12,
+});
+
+const Info = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  marginLeft: 6,
+  minWidth: 0,
+});
+
+const Actions = styled.div({
+  display: 'flex',
+  gap: 2,
+});
+
+const Extras = styled.div({
+  marginBottom: 2,
+});
+
+const Checkbox = styled.input({
+  margin: 0,
+  '&:enabled': {
+    cursor: 'pointer',
+  },
+});
+
+const Progress = styled(ProgressSpinner)({
+  margin: 2,
+});
+
+const StopIcon = styled(StopAltIcon)({
+  width: 10,
+});
+
+const ItemTitle = styled.span<{ enabled?: boolean }>(
+  ({ enabled, theme }) =>
+    !enabled && {
+      color: theme.textMutedColor,
+      '&:after': {
+        content: '" (disabled)"',
+      },
+    }
+);
+
+const statusOrder: TestStatus[] = ['failed', 'warning', 'pending', 'passed', 'skipped'];
+const statusMap: Record<TestStatus, ComponentProps<typeof TestStatusIcon>['status']> = {
+  failed: 'negative',
+  warning: 'warning',
+  passed: 'positive',
+  skipped: 'unknown',
+  pending: 'unknown',
+};
+
+export const TestProviderRender: FC<
+  {
+    api: API;
+    state: TestProviderConfig & TestProviderState<Details, Config>;
+    entryId?: string;
+  } & ComponentProps<typeof Container>
+> = ({ state, api, entryId, ...props }) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const theme = useTheme();
+  const coverageSummary = state.details?.coverageSummary;
+
+  const isA11yAddon = addons.experimental_getRegisteredAddons().includes(A11Y_ADDON_ID);
+
+  const [config, updateConfig] = useConfig(
+    api,
+    state.id,
+    state.config || { a11y: false, coverage: false }
+  );
+
+  const isStoryEntry = entryId?.includes('--') ?? false;
+
+  const a11yResults = useMemo(() => {
+    if (!isA11yAddon) {
+      return [];
+    }
+
+    return state.details?.testResults?.flatMap((result) =>
+      result.results
+        .filter(Boolean)
+        .filter((r) => !entryId || r.storyId === entryId || r.storyId?.startsWith(`${entryId}-`))
+        .map((r) => r.reports.find((report) => report.type === 'a11y'))
+    );
+  }, [isA11yAddon, state.details?.testResults, entryId]);
+
+  const a11yStatus = useMemo<'positive' | 'warning' | 'negative' | 'unknown'>(() => {
+    if (state.running) {
+      return 'unknown';
+    }
+
+    if (!isA11yAddon || config.a11y === false) {
+      return 'unknown';
+    }
+
+    const definedA11yResults = a11yResults?.filter(Boolean) ?? [];
+
+    if (!definedA11yResults || definedA11yResults.length === 0) {
+      return 'unknown';
+    }
+
+    const failed = definedA11yResults.some((result) => result?.status === 'failed');
+    const warning = definedA11yResults.some((result) => result?.status === 'warning');
+
+    if (failed) {
+      return 'negative';
+    } else if (warning) {
+      return 'warning';
+    }
+
+    return 'positive';
+  }, [state.running, isA11yAddon, config.a11y, a11yResults]);
+
+  const a11yNotPassedAmount = state.config?.a11y
+    ? a11yResults?.filter((result) => result?.status === 'failed' || result?.status === 'warning')
+        .length
+    : undefined;
+
+  const a11ySkippedAmount =
+    state.running || !state?.details.config?.a11y || !state.config?.a11y
+      ? null
+      : a11yResults?.filter((result) => !result).length;
+
+  const a11ySkippedLabel = a11ySkippedAmount
+    ? a11ySkippedAmount === 1 && isStoryEntry
+      ? '(skipped)'
+      : `(${a11ySkippedAmount} skipped)`
+    : '';
+
+  const storyId = isStoryEntry ? entryId : undefined;
+
+  const results = (state.details?.testResults || [])
+    .flatMap((test) => {
+      if (!entryId) {
+        return test.results;
+      }
+      return test.results.filter((result) =>
+        storyId ? result.storyId === storyId : result.storyId?.startsWith(`${entryId}-`)
+      );
+    })
+    .sort((a, b) => statusOrder.indexOf(a.status) - statusOrder.indexOf(b.status));
+
+  const status = state.running
+    ? 'unknown'
+    : state.failed
+      ? 'failed'
+      : (results[0]?.status ?? 'unknown');
+
+  const openPanel = (id: string, panelId: string) => {
+    api.selectStory(id);
+    api.setSelectedPanel(panelId);
+    api.togglePanel(true);
+  };
+
+  return (
+    <Container {...props}>
+      <Heading>
+        <Info>
+          <Title id="testing-module-title" state={state} />
+          <Description id="testing-module-description" state={state} />
+        </Info>
+
+        <Actions>
+          <Button
+            aria-label={`${isEditing ? 'Close' : 'Open'} settings for ${state.name}`}
+            variant="ghost"
+            padding="small"
+            active={isEditing}
+            disabled={state.running && !isEditing}
+            onClick={() => setIsEditing(!isEditing)}
+          >
+            <EditIcon />
+          </Button>
+          {state.watchable && !entryId && (
+            <Button
+              aria-label={`${state.watching ? 'Disable' : 'Enable'} watch mode for ${state.name}`}
+              variant="ghost"
+              padding="small"
+              active={state.watching}
+              onClick={() => api.setTestProviderWatchMode(state.id, !state.watching)}
+              disabled={state.running || isEditing}
+            >
+              <EyeIcon />
+            </Button>
+          )}
+          {state.runnable && (
+            <>
+              {state.running && state.cancellable ? (
+                <Button
+                  aria-label={`Stop ${state.name}`}
+                  variant="ghost"
+                  padding="none"
+                  onClick={() => api.cancelTestProvider(state.id)}
+                  disabled={state.cancelling}
+                >
+                  <Progress percentage={state.progress?.percentageCompleted}>
+                    <StopIcon />
+                  </Progress>
+                </Button>
+              ) : (
+                <Button
+                  aria-label={`Start ${state.name}`}
+                  variant="ghost"
+                  padding="small"
+                  onClick={() => api.runTestProvider(state.id, { entryId })}
+                  disabled={state.running || isEditing}
+                >
+                  <PlayHollowIcon />
+                </Button>
+              )}
+            </>
+          )}
+        </Actions>
+      </Heading>
+
+      {isEditing ? (
+        <Extras>
+          <ListItem
+            as="label"
+            title="Component tests"
+            icon={<PointerHandIcon color={theme.textMutedColor} />}
+            right={<Checkbox type="checkbox" checked disabled />}
+          />
+          <ListItem
+            as="label"
+            title={<ItemTitle enabled={config.coverage}>Coverage</ItemTitle>}
+            icon={<ShieldIcon color={theme.textMutedColor} />}
+            right={
+              <Checkbox
+                type="checkbox"
+                checked={state.watching ? false : config.coverage}
+                disabled={state.watching}
+                onChange={() => updateConfig({ coverage: !config.coverage })}
+              />
+            }
+          />
+          {isA11yAddon && (
+            <ListItem
+              as="label"
+              title={<ItemTitle enabled={config.a11y}>Accessibility</ItemTitle>}
+              icon={<AccessibilityIcon color={theme.textMutedColor} />}
+              right={
+                <Checkbox
+                  type="checkbox"
+                  checked={config.a11y}
+                  onChange={() => updateConfig({ a11y: !config.a11y })}
+                />
+              }
+            />
+          )}
+        </Extras>
+      ) : (
+        <Extras>
+          <ListItem
+            title="Component tests"
+            onClick={
+              (status === 'failed' || status === 'warning') && results.length
+                ? () => {
+                    const firstNotPassed = results.find(
+                      (r) => r.status === 'failed' || r.status === 'warning'
+                    );
+                    if (firstNotPassed) {
+                      openPanel(firstNotPassed.storyId, PANEL_ID);
+                    }
+                  }
+                : undefined
+            }
+            icon={
+              state.crashed ? (
+                <TestStatusIcon status="critical" aria-label="status: crashed" />
+              ) : status === 'unknown' ? (
+                <TestStatusIcon status="unknown" aria-label="status: unknown" />
+              ) : (
+                <TestStatusIcon status={statusMap[status]} aria-label={`status: ${status}`} />
+              )
+            }
+          />
+          {coverageSummary ? (
+            <ListItem
+              title={<ItemTitle enabled={config.coverage}>Coverage</ItemTitle>}
+              href={'/coverage/index.html'}
+              // @ts-expect-error ListItem doesn't include all anchor attributes in types, but it is an achor element
+              target="_blank"
+              aria-label="Open coverage report"
+              icon={
+                <TestStatusIcon
+                  percentage={coverageSummary.percentage}
+                  status={coverageSummary.status}
+                  aria-label={`status: ${coverageSummary.status}`}
+                />
+              }
+              right={
+                coverageSummary.percentage ? (
+                  <span aria-label={`${coverageSummary.percentage} percent coverage`}>
+                    {coverageSummary.percentage} %
+                  </span>
+                ) : null
+              }
+            />
+          ) : (
+            <ListItem
+              title={<ItemTitle enabled={config.coverage}>Coverage</ItemTitle>}
+              icon={<TestStatusIcon status="unknown" aria-label={`status: unknown`} />}
+            />
+          )}
+          {isA11yAddon && (
+            <ListItem
+              title={<ItemTitle enabled={config.a11y}>Accessibility {a11ySkippedLabel}</ItemTitle>}
+              onClick={
+                (a11yStatus === 'negative' || a11yStatus === 'warning') && a11yResults.length
+                  ? () => {
+                      const firstNotPassed = results.find((r) =>
+                        r.reports
+                          .filter((report) => report.type === 'a11y')
+                          .find(
+                            (report) => report.status === 'failed' || report.status === 'warning'
+                          )
+                      );
+                      if (firstNotPassed) {
+                        openPanel(firstNotPassed.storyId, A11y_ADDON_PANEL_ID);
+                      }
+                    }
+                  : undefined
+              }
+              icon={<TestStatusIcon status={a11yStatus} aria-label={`status: ${a11yStatus}`} />}
+              right={isStoryEntry ? null : a11yNotPassedAmount || null}
+            />
+          )}
+        </Extras>
+      )}
+    </Container>
+  );
+};
+
+function useConfig(api: API, providerId: string, initialConfig: Config) {
+  const [currentConfig, setConfig] = useState<Config>(initialConfig);
+  const lastConfig = useRef(initialConfig);
+
+  const saveConfig = useCallback(
+    debounce((config: Config) => {
+      if (!isEqual(config, lastConfig.current)) {
+        api.updateTestProviderState(providerId, { config });
+        api.emit(TESTING_MODULE_CONFIG_CHANGE, { providerId, config });
+        lastConfig.current = config;
+      }
+    }, 500),
+    [api, providerId]
+  );
+
+  const updateConfig = useCallback(
+    (update: Partial<Config>) => {
+      setConfig((value) => {
+        const updated = { ...value, ...update };
+        saveConfig(updated);
+        return updated;
+      });
+    },
+    [saveConfig]
+  );
+
+  return [currentConfig, updateConfig] as const;
+}
diff --git a/code/addons/test/src/components/TestStatusIcon.stories.tsx b/code/addons/test/src/components/TestStatusIcon.stories.tsx
new file mode 100644
index 000000000000..3a38df50a801
--- /dev/null
+++ b/code/addons/test/src/components/TestStatusIcon.stories.tsx
@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { TestStatusIcon } from './TestStatusIcon';
+
+const meta = {
+  component: TestStatusIcon,
+} satisfies Meta<typeof TestStatusIcon>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Unknown: Story = {
+  args: {
+    status: 'unknown',
+  },
+};
+
+export const Positive: Story = {
+  args: {
+    status: 'positive',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    status: 'warning',
+  },
+};
+
+export const Negative: Story = {
+  args: {
+    status: 'negative',
+  },
+};
+
+export const Critical: Story = {
+  args: {
+    status: 'critical',
+  },
+};
+
+export const UnknownPercentage: Story = {
+  args: {
+    status: 'unknown',
+    percentage: 50,
+  },
+};
+
+export const PositivePercentage: Story = {
+  args: {
+    status: 'positive',
+    percentage: 60,
+  },
+};
+
+export const WarningPercentage: Story = {
+  args: {
+    status: 'warning',
+    percentage: 40,
+  },
+};
+
+export const NegativePercentage: Story = {
+  args: {
+    status: 'negative',
+    percentage: 30,
+  },
+};
diff --git a/code/addons/test/src/components/TestStatusIcon.tsx b/code/addons/test/src/components/TestStatusIcon.tsx
new file mode 100644
index 000000000000..7b201ce768c5
--- /dev/null
+++ b/code/addons/test/src/components/TestStatusIcon.tsx
@@ -0,0 +1,41 @@
+import { styled } from 'storybook/internal/theming';
+
+export const TestStatusIcon = styled.div<{
+  status: 'positive' | 'warning' | 'negative' | 'critical' | 'unknown';
+  percentage?: number;
+}>(
+  ({ percentage }) => ({
+    width: percentage ? 12 : 6,
+    height: percentage ? 12 : 6,
+    margin: percentage ? 1 : 4,
+    background: percentage
+      ? `conic-gradient(var(--status-color) ${percentage}%, var(--status-background) ${percentage + 1}%)`
+      : 'var(--status-color)',
+    borderRadius: '50%',
+  }),
+  ({ status, theme }) =>
+    status === 'positive' && {
+      '--status-color': theme.color.positive,
+      '--status-background': `${theme.color.positive}66`,
+    },
+  ({ status, theme }) =>
+    status === 'warning' && {
+      '--status-color': theme.color.gold,
+      '--status-background': `${theme.color.gold}66`,
+    },
+  ({ status, theme }) =>
+    status === 'negative' && {
+      '--status-color': theme.color.negative,
+      '--status-background': `${theme.color.negative}66`,
+    },
+  ({ status, theme }) =>
+    status === 'critical' && {
+      '--status-color': theme.color.defaultText,
+      '--status-background': `${theme.color.defaultText}66`,
+    },
+  ({ status, theme }) =>
+    status === 'unknown' && {
+      '--status-color': theme.color.mediumdark,
+      '--status-background': `${theme.color.mediumdark}66`,
+    }
+);
diff --git a/code/addons/test/src/components/Title.tsx b/code/addons/test/src/components/Title.tsx
new file mode 100644
index 000000000000..fecb454cffd8
--- /dev/null
+++ b/code/addons/test/src/components/Title.tsx
@@ -0,0 +1,21 @@
+import React, { type ComponentProps } from 'react';
+
+import { type TestProviderConfig, type TestProviderState } from 'storybook/internal/core-events';
+import { styled } from 'storybook/internal/theming';
+
+const Wrapper = styled.div<{ crashed?: boolean }>(({ crashed, theme }) => ({
+  fontSize: theme.typography.size.s1,
+  fontWeight: crashed ? 'bold' : 'normal',
+  color: crashed ? theme.color.negativeText : theme.color.defaultText,
+}));
+
+export const Title = ({
+  state,
+  ...props
+}: { state: TestProviderConfig & TestProviderState } & ComponentProps<typeof Wrapper>) => {
+  return (
+    <Wrapper crashed={state.crashed} {...props}>
+      {state.crashed || state.failed ? 'Local tests failed' : 'Run local tests'}
+    </Wrapper>
+  );
+};
diff --git a/code/addons/test/src/constants.ts b/code/addons/test/src/constants.ts
index d0a3762620c9..58463326dcd7 100644
--- a/code/addons/test/src/constants.ts
+++ b/code/addons/test/src/constants.ts
@@ -1 +1,34 @@
-export const ADDON_ID = 'storybook/vitest';
+import type { TestResult } from './node/reporter';
+
+export const ADDON_ID = 'storybook/test';
+export const TEST_PROVIDER_ID = `${ADDON_ID}/test-provider`;
+export const PANEL_ID = `${ADDON_ID}/panel`;
+export const STORYBOOK_ADDON_TEST_CHANNEL = 'STORYBOOK_ADDON_TEST_CHANNEL';
+
+export const TUTORIAL_VIDEO_LINK = 'https://youtu.be/Waht9qq7AoA';
+export const DOCUMENTATION_LINK = 'writing-tests/test-addon';
+export const DOCUMENTATION_DISCREPANCY_LINK = `${DOCUMENTATION_LINK}#what-happens-when-there-are-different-test-results-in-multiple-environments`;
+export const DOCUMENTATION_FATAL_ERROR_LINK = `${DOCUMENTATION_LINK}#what-happens-if-vitest-itself-has-an-error`;
+
+export const COVERAGE_DIRECTORY = 'coverage';
+
+export const SUPPORTED_FRAMEWORKS = [
+  '@storybook/nextjs',
+  '@storybook/experimental-nextjs-vite',
+  '@storybook/sveltekit',
+];
+
+export const SUPPORTED_RENDERERS = ['@storybook/react', '@storybook/svelte', '@storybook/vue3'];
+export interface Config {
+  coverage: boolean;
+  a11y: boolean;
+}
+
+export type Details = {
+  testResults: TestResult[];
+  config: Config;
+  coverageSummary?: {
+    status: 'positive' | 'warning' | 'negative' | 'unknown';
+    percentage: number;
+  };
+};
diff --git a/code/addons/test/src/logger.ts b/code/addons/test/src/logger.ts
new file mode 100644
index 000000000000..388723539236
--- /dev/null
+++ b/code/addons/test/src/logger.ts
@@ -0,0 +1,7 @@
+import picocolors from 'picocolors';
+
+import { ADDON_ID } from './constants';
+
+export const log = (message: any) => {
+  console.log(`${picocolors.magenta(ADDON_ID)}: ${message.toString().trim()}`);
+};
diff --git a/code/addons/test/src/manager.tsx b/code/addons/test/src/manager.tsx
index 8d706325046a..7264e5fe49cc 100644
--- a/code/addons/test/src/manager.tsx
+++ b/code/addons/test/src/manager.tsx
@@ -1,5 +1,172 @@
-import { type API, addons } from 'storybook/internal/manager-api';
+import React, { useState } from 'react';
 
-import { ADDON_ID } from './constants';
+import { AddonPanel } from 'storybook/internal/components';
+import type { Combo } from 'storybook/internal/manager-api';
+import { Consumer, addons, types } from 'storybook/internal/manager-api';
+import {
+  type API_StatusObject,
+  type API_StatusValue,
+  type Addon_TestProviderType,
+  Addon_TypesEnum,
+} from 'storybook/internal/types';
 
-addons.register(ADDON_ID, () => {});
+import { GlobalErrorContext, GlobalErrorModal } from './components/GlobalErrorModal';
+import { Panel } from './components/Panel';
+import { PanelTitle } from './components/PanelTitle';
+import { TestProviderRender } from './components/TestProviderRender';
+import { ADDON_ID, type Config, type Details, PANEL_ID, TEST_PROVIDER_ID } from './constants';
+import type { TestStatus } from './node/reporter';
+
+const statusMap: Record<TestStatus, API_StatusValue> = {
+  failed: 'error',
+  passed: 'success',
+  pending: 'pending',
+  warning: 'warn',
+  skipped: 'unknown',
+};
+
+addons.register(ADDON_ID, (api) => {
+  const storybookBuilder = (globalThis as any).STORYBOOK_BUILDER || '';
+  if (storybookBuilder.includes('vite')) {
+    const openTestsPanel = () => {
+      api.setSelectedPanel(PANEL_ID);
+      api.togglePanel(true);
+    };
+
+    addons.add(TEST_PROVIDER_ID, {
+      type: Addon_TypesEnum.experimental_TEST_PROVIDER,
+      runnable: true,
+      watchable: true,
+      name: 'Component tests',
+      // @ts-expect-error: TODO: Fix types
+      render: (state) => {
+        const [isModalOpen, setModalOpen] = useState(false);
+        return (
+          <GlobalErrorContext.Provider
+            value={{ error: state.error?.message, isModalOpen, setModalOpen }}
+          >
+            <TestProviderRender api={api} state={state} />
+            <GlobalErrorModal
+              onRerun={() => {
+                setModalOpen(false);
+                api.runTestProvider(TEST_PROVIDER_ID);
+              }}
+            />
+          </GlobalErrorContext.Provider>
+        );
+      },
+
+      // @ts-expect-error: TODO: Fix types
+      sidebarContextMenu: ({ context, state }) => {
+        if (context.type === 'docs') {
+          return null;
+        }
+        if (context.type === 'story' && !context.tags.includes('test')) {
+          return null;
+        }
+        return (
+          <TestProviderRender
+            api={api}
+            state={state}
+            entryId={context.id}
+            style={{ minWidth: 240 }}
+          />
+        );
+      },
+
+      // @ts-expect-error: TODO: Fix types
+      stateUpdater: (state, update) => {
+        const updated = {
+          ...state,
+          ...update,
+          details: { ...state.details, ...update.details },
+        };
+
+        if ((!state.running && update.running) || (!state.watching && update.watching)) {
+          // Clear coverage data when starting test run or enabling watch mode
+          delete updated.details.coverageSummary;
+        }
+
+        if (update.details?.testResults) {
+          (async () => {
+            await api.experimental_updateStatus(
+              TEST_PROVIDER_ID,
+              Object.fromEntries(
+                // @ts-expect-error: TODO: Fix types
+                update.details.testResults.flatMap((testResult) =>
+                  testResult.results
+                    .filter(({ storyId }) => storyId)
+                    .map(({ storyId, status, testRunId, ...rest }) => [
+                      storyId,
+                      {
+                        title: 'Component tests',
+                        status: statusMap[status],
+                        description:
+                          'failureMessages' in rest && rest.failureMessages
+                            ? rest.failureMessages.join('\n')
+                            : '',
+                        data: { testRunId },
+                        onClick: openTestsPanel,
+                        sidebarContextMenu: false,
+                      } satisfies API_StatusObject,
+                    ])
+                )
+              )
+            );
+
+            await api.experimental_updateStatus(
+              'storybook/addon-a11y/test-provider',
+              Object.fromEntries(
+                // @ts-expect-error: TODO: Fix types
+                update.details.testResults.flatMap((testResult) =>
+                  testResult.results
+                    .filter(({ storyId }) => storyId)
+                    .map(({ storyId, testRunId, reports }) => {
+                      const a11yReport = reports.find((r: any) => r.type === 'a11y');
+                      return [
+                        storyId,
+                        a11yReport
+                          ? ({
+                              title: 'Accessibility tests',
+                              description: '',
+                              status: statusMap[a11yReport.status],
+                              data: { testRunId },
+                              onClick: () => {
+                                api.setSelectedPanel('storybook/a11y/panel');
+                                api.togglePanel(true);
+                              },
+                              sidebarContextMenu: false,
+                            } satisfies API_StatusObject)
+                          : null,
+                      ];
+                    })
+                )
+              )
+            );
+          })();
+        }
+
+        return updated;
+      },
+    } satisfies Omit<Addon_TestProviderType<Details, Config>, 'id'>);
+  }
+
+  const filter = ({ state }: Combo) => {
+    return {
+      storyId: state.storyId,
+    };
+  };
+
+  addons.add(PANEL_ID, {
+    type: types.PANEL,
+    title: () => <PanelTitle />,
+    match: ({ viewMode }) => viewMode === 'story',
+    render: ({ active }) => {
+      return (
+        <AddonPanel active={!!active}>
+          <Consumer filter={filter}>{({ storyId }) => <Panel storyId={storyId} />}</Consumer>
+        </AddonPanel>
+      );
+    },
+  });
+});
diff --git a/code/addons/test/src/mocks/index.ts b/code/addons/test/src/mocks/index.ts
new file mode 100644
index 000000000000..02760bce429d
--- /dev/null
+++ b/code/addons/test/src/mocks/index.ts
@@ -0,0 +1,148 @@
+import { type Call, CallStates } from '@storybook/instrumenter';
+
+export const getCalls = (finalStatus: CallStates) => {
+  const calls: Call[] = [
+    {
+      id: 'story--id [3] step',
+      storyId: 'story--id',
+      cursor: 1,
+      ancestors: [],
+      path: [],
+      method: 'step',
+      args: ['Click button', { __function__: { name: '' } }],
+      interceptable: true,
+      retain: false,
+      status: CallStates.DONE,
+    },
+    {
+      id: 'story--id [3] step [1] within',
+      storyId: 'story--id',
+      cursor: 3,
+      ancestors: ['story--id [3] step'],
+      path: [],
+      method: 'within',
+      args: [{ __element__: { localName: 'div', id: 'root' } }],
+      interceptable: false,
+      retain: false,
+      status: CallStates.DONE,
+    },
+    {
+      id: 'story--id [3] step [2] findByText',
+      storyId: 'story--id',
+      cursor: 4,
+      ancestors: ['story--id [3] step'],
+      path: [{ __callId__: 'story--id [3] step [1] within' }],
+      method: 'findByText',
+      args: ['Click'],
+      interceptable: true,
+      retain: false,
+      status: CallStates.DONE,
+    },
+    {
+      id: 'story--id [3] step [3] click',
+      storyId: 'story--id',
+      cursor: 5,
+      ancestors: ['story--id [3] step'],
+      path: ['userEvent'],
+      method: 'click',
+      args: [{ __element__: { localName: 'button', innerText: 'Click' } }],
+      interceptable: true,
+      retain: false,
+      status: CallStates.DONE,
+    },
+    {
+      id: 'story--id [6] waitFor',
+      storyId: 'story--id',
+      cursor: 6,
+      ancestors: [],
+      path: [],
+      method: 'waitFor',
+      args: [{ __function__: { name: '' } }],
+      interceptable: true,
+      retain: false,
+      status: CallStates.DONE,
+    },
+    {
+      id: 'story--id [6] waitFor [0] expect',
+      storyId: 'story--id',
+      cursor: 1,
+      ancestors: ['story--id [6] waitFor'],
+      path: [],
+      method: 'expect',
+      args: [{ __function__: { name: 'handleSubmit' } }],
+      interceptable: false,
+      retain: false,
+      status: CallStates.DONE,
+    },
+    {
+      id: 'story--id [6] waitFor [1] stringMatching',
+      storyId: 'story--id',
+      cursor: 2,
+      ancestors: ['story--id [6] waitFor'],
+      path: ['expect'],
+      method: 'stringMatching',
+      args: [{ __regexp__: { flags: 'gi', source: '([A-Z])w+' } }],
+      interceptable: false,
+      retain: false,
+      status: CallStates.DONE,
+    },
+    {
+      id: 'story--id [6] waitFor [2] toHaveBeenCalledWith',
+      storyId: 'story--id',
+      cursor: 3,
+      ancestors: ['story--id [6] waitFor'],
+      path: [{ __callId__: 'story--id [6] waitFor [0] expect' }],
+      method: 'toHaveBeenCalledWith',
+      args: [{ __callId__: 'story--id [6] waitFor [1] stringMatching', retain: false }],
+      interceptable: true,
+      retain: false,
+      status: CallStates.DONE,
+    },
+    {
+      id: 'story--id [7] expect',
+      storyId: 'story--id',
+      cursor: 7,
+      ancestors: [],
+      path: [],
+      method: 'expect',
+      args: [{ __function__: { name: 'handleReset' } }],
+      interceptable: false,
+      retain: false,
+      status: CallStates.DONE,
+    },
+    {
+      id: 'story--id [8] toHaveBeenCalled',
+      storyId: 'story--id',
+      cursor: 8,
+      ancestors: [],
+      path: [{ __callId__: 'story--id [7] expect' }, 'not'],
+      method: 'toHaveBeenCalled',
+      args: [],
+      interceptable: true,
+      retain: false,
+      status: finalStatus,
+    },
+  ];
+
+  if (finalStatus === CallStates.ERROR) {
+    calls[calls.length - 1].exception = {
+      name: 'Error',
+      stack: '',
+      message: 'Oops!',
+      callId: calls[calls.length - 1].id,
+    };
+  }
+
+  return calls;
+};
+
+export const getInteractions = (finalStatus: CallStates) =>
+  getCalls(finalStatus)
+    .filter((call) => call.interceptable)
+    .map((call) => ({
+      ...call,
+      childCallIds: [],
+      isCollapsed: false,
+      isHidden: false,
+      toggleCollapsed: () => {},
+    }));
diff --git a/code/addons/test/src/node/boot-test-runner.test.ts b/code/addons/test/src/node/boot-test-runner.test.ts
new file mode 100644
index 000000000000..f5d9fde5bf28
--- /dev/null
+++ b/code/addons/test/src/node/boot-test-runner.test.ts
@@ -0,0 +1,129 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { Channel, type ChannelTransport } from '@storybook/core/channels';
+
+import {
+  TESTING_MODULE_CANCEL_TEST_RUN_REQUEST,
+  TESTING_MODULE_PROGRESS_REPORT,
+  TESTING_MODULE_RUN_REQUEST,
+  TESTING_MODULE_WATCH_MODE_REQUEST,
+} from '@storybook/core/core-events';
+
+// eslint-disable-next-line depend/ban-dependencies
+import { execaNode } from 'execa';
+
+import { log } from '../logger';
+import { killTestRunner, runTestRunner } from './boot-test-runner';
+
+let stdout: (chunk: any) => void;
+let stderr: (chunk: any) => void;
+let message: (event: any) => void;
+
+const child = vi.hoisted(() => ({
+  stdout: {
+    on: vi.fn((event, callback) => {
+      stdout = callback;
+    }),
+  },
+  stderr: {
+    on: vi.fn((event, callback) => {
+      stderr = callback;
+    }),
+  },
+  on: vi.fn((event, callback) => {
+    message = callback;
+  }),
+  send: vi.fn(),
+  kill: vi.fn(),
+}));
+
+vi.mock('execa', () => ({
+  execaNode: vi.fn().mockReturnValue(child),
+}));
+
+vi.mock('../logger', () => ({
+  log: vi.fn(),
+}));
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  killTestRunner();
+});
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+const transport = { setHandler: vi.fn(), send: vi.fn() } satisfies ChannelTransport;
+const mockChannel = new Channel({ transport });
+
+describe('bootTestRunner', () => {
+  it('should execute vitest.js', async () => {
+    runTestRunner(mockChannel);
+    expect(execaNode).toHaveBeenCalledWith(expect.stringMatching(/vitest\.mjs$/));
+  });
+
+  it('should log stdout and stderr', async () => {
+    runTestRunner(mockChannel);
+    stdout('foo');
+    stderr('bar');
+    expect(log).toHaveBeenCalledWith('foo');
+    expect(log).toHaveBeenCalledWith('bar');
+  });
+
+  it('should wait for vitest to be ready', async () => {
+    let ready;
+    const promise = runTestRunner(mockChannel).then(() => {
+      ready = true;
+    });
+    expect(ready).toBeUndefined();
+    message({ type: 'ready' });
+    await expect(promise).resolves.toBeUndefined();
+    expect(ready).toBe(true);
+  });
+
+  it('should abort if vitest doesn’t become ready in time', async () => {
+    const promise = runTestRunner(mockChannel);
+    vi.advanceTimersByTime(30001);
+    await expect(promise).rejects.toThrow();
+  });
+
+  it('should forward channel events', async () => {
+    runTestRunner(mockChannel);
+    message({ type: 'ready' });
+
+    message({ type: TESTING_MODULE_PROGRESS_REPORT, args: ['foo'] });
+    expect(mockChannel.last(TESTING_MODULE_PROGRESS_REPORT)).toEqual(['foo']);
+
+    mockChannel.emit(TESTING_MODULE_RUN_REQUEST, 'foo');
+    expect(child.send).toHaveBeenCalledWith({
+      args: ['foo'],
+      from: 'server',
+      type: TESTING_MODULE_RUN_REQUEST,
+    });
+
+    mockChannel.emit(TESTING_MODULE_WATCH_MODE_REQUEST, 'baz');
+    expect(child.send).toHaveBeenCalledWith({
+      args: ['baz'],
+      from: 'server',
+      type: TESTING_MODULE_WATCH_MODE_REQUEST,
+    });
+
+    mockChannel.emit(TESTING_MODULE_CANCEL_TEST_RUN_REQUEST, 'qux');
+    expect(child.send).toHaveBeenCalledWith({
+      args: ['qux'],
+      from: 'server',
+      type: TESTING_MODULE_CANCEL_TEST_RUN_REQUEST,
+    });
+  });
+
+  it('should resend init event', async () => {
+    runTestRunner(mockChannel, 'init', ['foo']);
+    message({ type: 'ready' });
+    expect(child.send).toHaveBeenCalledWith({
+      args: ['foo'],
+      from: 'server',
+      type: 'init',
+    });
+  });
+});
diff --git a/code/addons/test/src/node/boot-test-runner.ts b/code/addons/test/src/node/boot-test-runner.ts
new file mode 100644
index 000000000000..f1fe3ddc94f3
--- /dev/null
+++ b/code/addons/test/src/node/boot-test-runner.ts
@@ -0,0 +1,155 @@
+import { type ChildProcess } from 'node:child_process';
+
+import type { Channel } from 'storybook/internal/channels';
+import {
+  TESTING_MODULE_CANCEL_TEST_RUN_REQUEST,
+  TESTING_MODULE_CONFIG_CHANGE,
+  TESTING_MODULE_CRASH_REPORT,
+  TESTING_MODULE_RUN_REQUEST,
+  TESTING_MODULE_WATCH_MODE_REQUEST,
+  type TestingModuleCrashReportPayload,
+} from 'storybook/internal/core-events';
+
+// eslint-disable-next-line depend/ban-dependencies
+import { execaNode } from 'execa';
+import { join } from 'pathe';
+
+import { TEST_PROVIDER_ID } from '../constants';
+import { log } from '../logger';
+
+const MAX_START_TIME = 30000;
+
+// This path is a bit confusing, but essentially `boot-test-runner` gets bundled into the preset bundle
+// which is at the root. Then, from the root, we want to load `node/vitest.mjs`
+const vitestModulePath = join(__dirname, 'node', 'vitest.mjs');
+
+// Events that were triggered before Vitest was ready are queued up and resent once it's ready
+const eventQueue: { type: string; args?: any[] }[] = [];
+
+let child: null | ChildProcess;
+let ready = false;
+
+const bootTestRunner = async (channel: Channel) => {
+  let stderr: string[] = [];
+
+  function reportFatalError(e: any) {
+    channel.emit(TESTING_MODULE_CRASH_REPORT, {
+      providerId: TEST_PROVIDER_ID,
+      error: {
+        message: String(e),
+      },
+    } as TestingModuleCrashReportPayload);
+  }
+
+  const forwardRun = (...args: any[]) =>
+    child?.send({ args, from: 'server', type: TESTING_MODULE_RUN_REQUEST });
+  const forwardWatchMode = (...args: any[]) =>
+    child?.send({ args, from: 'server', type: TESTING_MODULE_WATCH_MODE_REQUEST });
+  const forwardCancel = (...args: any[]) =>
+    child?.send({ args, from: 'server', type: TESTING_MODULE_CANCEL_TEST_RUN_REQUEST });
+  const forwardConfigChange = (...args: any[]) =>
+    child?.send({ args, from: 'server', type: TESTING_MODULE_CONFIG_CHANGE });
+
+  const killChild = () => {
+    channel.off(TESTING_MODULE_RUN_REQUEST, forwardRun);
+    channel.off(TESTING_MODULE_WATCH_MODE_REQUEST, forwardWatchMode);
+    channel.off(TESTING_MODULE_CANCEL_TEST_RUN_REQUEST, forwardCancel);
+    channel.off(TESTING_MODULE_CONFIG_CHANGE, forwardConfigChange);
+    child?.kill();
+    child = null;
+  };
+
+  const exit = (code = 0) => {
+    killChild();
+    eventQueue.length = 0;
+    process.exit(code);
+  };
+
+  process.on('exit', exit);
+  process.on('SIGINT', () => exit(0));
+  process.on('SIGTERM', () => exit(0));
+
+  const startChildProcess = () =>
+    new Promise<void>((resolve, reject) => {
+      child = execaNode(vitestModulePath);
+      stderr = [];
+
+      child.stdout?.on('data', log);
+      child.stderr?.on('data', (data) => {
+        // Ignore deprecation warnings which appear in yellow ANSI color
+        if (!data.toString().match(/^\u001B\[33m/)) {
+          log(data);
+          stderr.push(data.toString());
+        }
+      });
+
+      child.on('message', (result: any) => {
+        if (result.type === 'ready') {
+          // Resend events that triggered (during) the boot sequence, now that Vitest is ready
+          while (eventQueue.length) {
+            const { type, args } = eventQueue.shift()!;
+            child?.send({ type, args, from: 'server' });
+          }
+
+          // Forward all events from the channel to the child process
+          channel.on(TESTING_MODULE_RUN_REQUEST, forwardRun);
+          channel.on(TESTING_MODULE_WATCH_MODE_REQUEST, forwardWatchMode);
+          channel.on(TESTING_MODULE_CANCEL_TEST_RUN_REQUEST, forwardCancel);
+          channel.on(TESTING_MODULE_CONFIG_CHANGE, forwardConfigChange);
+
+          resolve();
+        } else if (result.type === 'error') {
+          killChild();
+          log(result.message);
+          log(result.error);
+          // eslint-disable-next-line local-rules/no-uncategorized-errors
+          const error = new Error(`${result.message}\n${result.error}`);
+          // Reject if the child process reports an error before it's ready
+          if (!ready) {
+            reject(error);
+          } else {
+            reportFatalError(error);
+          }
+        } else {
+          channel.emit(result.type, ...result.args);
+        }
+      });
+    });
+
+  const timeout = new Promise((_, reject) =>
+    setTimeout(
+      reject,
+      MAX_START_TIME,
+      // eslint-disable-next-line local-rules/no-uncategorized-errors
+      new Error(
+        `Aborting test runner process because it took longer than ${MAX_START_TIME / 1000} seconds to start.`
+      )
+    )
+  );
+
+  await Promise.race([startChildProcess(), timeout]).catch((e) => {
+    reportFatalError(e);
+    eventQueue.length = 0;
+    throw e;
+  });
+};
+
+export const runTestRunner = async (channel: Channel, initEvent?: string, initArgs?: any[]) => {
+  if (!ready && initEvent) {
+    eventQueue.push({ type: initEvent, args: initArgs });
+  }
+  if (!child) {
+    ready = false;
+    await bootTestRunner(channel);
+    ready = true;
+  }
+};
+
+export const killTestRunner = () => {
+  if (child) {
+    child.kill();
+    child = null;
+  }
+  ready = false;
+  eventQueue.length = 0;
+};
diff --git a/code/addons/test/src/node/coverage-reporter.ts b/code/addons/test/src/node/coverage-reporter.ts
new file mode 100644
index 000000000000..cc1dd548000f
--- /dev/null
+++ b/code/addons/test/src/node/coverage-reporter.ts
@@ -0,0 +1,53 @@
+import type { ResolvedCoverageOptions } from 'vitest/node';
+
+import type { ReportNode, Visitor } from 'istanbul-lib-report';
+import { ReportBase } from 'istanbul-lib-report';
+
+import { type Details, TEST_PROVIDER_ID } from '../constants';
+import type { TestManager } from './test-manager';
+
+export type StorybookCoverageReporterOptions = {
+  testManager: TestManager;
+  coverageOptions: ResolvedCoverageOptions<'v8'> | undefined;
+};
+
+export default class StorybookCoverageReporter extends ReportBase implements Partial<Visitor> {
+  #testManager: StorybookCoverageReporterOptions['testManager'];
+
+  #coverageOptions: StorybookCoverageReporterOptions['coverageOptions'];
+
+  constructor(opts: StorybookCoverageReporterOptions) {
+    super();
+    this.#testManager = opts.testManager;
+    this.#coverageOptions = opts.coverageOptions;
+  }
+
+  onSummary(node: ReportNode) {
+    if (!node.isRoot()) {
+      return;
+    }
+    const coverageSummary = node.getCoverageSummary(false);
+
+    const percentage = Math.round(coverageSummary.data.statements.pct);
+
+    // Fallback to Vitest's default watermarks https://vitest.dev/config/#coverage-watermarks
+    const [lowWatermark = 50, highWatermark = 80] =
+      this.#coverageOptions?.watermarks?.statements ?? [];
+
+    const coverageDetails: Details['coverageSummary'] = {
+      percentage,
+      status:
+        percentage < lowWatermark
+          ? 'negative'
+          : percentage < highWatermark
+            ? 'warning'
+            : 'positive',
+    };
+    this.#testManager.sendProgressReport({
+      providerId: TEST_PROVIDER_ID,
+      details: {
+        coverageSummary: coverageDetails,
+      },
+    });
+  }
+}
diff --git a/code/addons/test/src/node/reporter.ts b/code/addons/test/src/node/reporter.ts
new file mode 100644
index 000000000000..1f71e1bf9670
--- /dev/null
+++ b/code/addons/test/src/node/reporter.ts
@@ -0,0 +1,269 @@
+import type { TaskState } from 'vitest';
+import type { Vitest } from 'vitest/node';
+import { type Reporter } from 'vitest/reporters';
+
+import type {
+  TestingModuleProgressReportPayload,
+  TestingModuleProgressReportProgress,
+} from 'storybook/internal/core-events';
+import type { Report } from 'storybook/internal/preview-api';
+
+import type { API_StatusUpdate } from '@storybook/types';
+
+import type { Suite } from '@vitest/runner';
+import { throttle } from 'es-toolkit';
+
+import { TEST_PROVIDER_ID } from '../constants';
+import type { TestManager } from './test-manager';
+
+export type TestStatus = 'passed' | 'failed' | 'warning' | 'pending' | 'skipped';
+
+export type TestResultResult =
+  | {
+      status: Extract<TestStatus, 'passed' | 'pending'>;
+      storyId: string;
+      testRunId: string;
+      duration: number;
+      reports: Report[];
+    }
+  | {
+      status: Extract<TestStatus, 'failed' | 'warning'>;
+      storyId: string;
+      duration: number;
+      testRunId: string;
+      failureMessages: string[];
+      reports: Report[];
+    };
+
+export type TestResult = {
+  results: TestResultResult[];
+  startTime: number;
+  endTime: number;
+  status: Extract<TestStatus, 'passed' | 'failed' | 'warning'>;
+  message?: string;
+};
+
+const statusMap: Record<TaskState, TestStatus> = {
+  fail: 'failed',
+  only: 'pending',
+  pass: 'passed',
+  run: 'pending',
+  skip: 'skipped',
+  todo: 'skipped',
+};
+
+export class StorybookReporter implements Reporter {
+  testStatusData: API_StatusUpdate = {};
+
+  start = 0;
+
+  ctx!: Vitest;
+
+  sendReport: (payload: TestingModuleProgressReportPayload) => void;
+
+  constructor(public testManager: TestManager) {
+    this.sendReport = throttle((payload) => this.testManager.sendProgressReport(payload), 1000);
+  }
+
+  onInit(ctx: Vitest) {
+    this.ctx = ctx;
+    this.start = Date.now();
+  }
+
+  async getProgressReport(finishedAt?: number) {
+    // TODO
+    // We can theoretically avoid the `@vitest/runner` dependency by copying over the necessary
+    // functions from the `@vitest/runner` package. It is not complex and does not have
+    // any significant dependencies.
+    const { getTests } = await import('@vitest/runner/utils');
+
+    const files = this.ctx.state.getFiles();
+    const fileTests = getTests(files).filter((t) => t.mode === 'run' || t.mode === 'only');
+
+    // The total number of tests reported by Vitest is dynamic and can change during the run, so we
+    // use `storyCountForCurrentRun` instead, based on the list of stories provided in the run request.
+    const numTotalTests = finishedAt
+      ? fileTests.length
+      : Math.max(fileTests.length, this.testManager.vitestManager.storyCountForCurrentRun);
+
+    const numFailedTests = fileTests.filter((t) => t.result?.state === 'fail').length;
+    const numPassedTests = fileTests.filter((t) => t.result?.state === 'pass').length;
+    const numPendingTests = fileTests.filter((t) => t.result?.state === 'run').length;
+
+    const testResults: TestResult[] = files.map((file) => {
+      const tests = getTests([file]);
+      let startTime = tests.reduce(
+        (prev, next) => Math.min(prev, next.result?.startTime ?? Number.POSITIVE_INFINITY),
+        Number.POSITIVE_INFINITY
+      );
+      if (startTime === Number.POSITIVE_INFINITY) {
+        startTime = this.start;
+      }
+
+      const endTime = tests.reduce(
+        (prev, next) =>
+          Math.max(prev, (next.result?.startTime ?? 0) + (next.result?.duration ?? 0)),
+        startTime
+      );
+
+      const results = tests.flatMap<TestResultResult>((t) => {
+        const ancestorTitles: string[] = [];
+        let iter: Suite | undefined = t.suite;
+        while (iter) {
+          ancestorTitles.push(iter.name);
+          iter = iter.suite;
+        }
+        ancestorTitles.reverse();
+
+        const status = statusMap[t.result?.state || t.mode] || 'skipped';
+        const storyId = (t.meta as any).storyId as string;
+        const reports =
+          ((t.meta as any).reports as Report[])?.map((report) => ({
+            status: report.status,
+            type: report.type,
+          })) ?? [];
+        const duration = t.result?.duration || 0;
+        const testRunId = this.start.toString();
+
+        switch (status) {
+          case 'passed':
+          case 'pending':
+            return [{ status, storyId, duration, testRunId, reports } as TestResultResult];
+          case 'failed':
+            const failureMessages = t.result?.errors?.map((e) => e.stack || e.message) || [];
+            return [
+              {
+                status,
+                storyId,
+                duration,
+                failureMessages,
+                testRunId,
+                reports,
+              } as TestResultResult,
+            ];
+          default:
+            return [];
+        }
+      });
+
+      const hasFailedTests = tests.some((t) => t.result?.state === 'fail');
+      return {
+        results,
+        startTime,
+        endTime,
+        status: file.result?.state === 'fail' || hasFailedTests ? 'failed' : 'passed',
+        message: file.result?.errors?.[0]?.stack || file.result?.errors?.[0]?.message,
+      };
+    });
+
+    return {
+      cancellable: !finishedAt,
+      progress: {
+        numFailedTests,
+        numPassedTests,
+        numPendingTests,
+        numTotalTests,
+        startedAt: this.start,
+        finishedAt,
+        percentageCompleted: finishedAt
+          ? 100
+          : numTotalTests
+            ? ((numPassedTests + numFailedTests) / numTotalTests) * 100
+            : 0,
+      } as TestingModuleProgressReportProgress,
+      details: {
+        testResults,
+        config: this.testManager.config,
+      },
+    };
+  }
+
+  async onTaskUpdate() {
+    try {
+      this.sendReport({
+        providerId: TEST_PROVIDER_ID,
+        status: 'pending',
+        ...(await this.getProgressReport()),
+      });
+    } catch (e) {
+      this.sendReport({
+        providerId: TEST_PROVIDER_ID,
+        status: 'failed',
+        error:
+          e instanceof Error
+            ? { name: 'Failed to gather test results', message: e.message, stack: e.stack }
+            : { name: 'Failed to gather test results', message: String(e) },
+      });
+    }
+  }
+
+  // TODO
+  // Clearing the whole internal state of Vitest might be too aggressive
+  // Essentially, we want to reset the calculated total number of tests and the
+  // test results when a new test run starts, so that the getProgressReport
+  // method can calculate the correct values
+  async clearVitestState() {
+    this.ctx.state.filesMap.clear();
+    this.ctx.state.pathsSet.clear();
+    this.ctx.state.idMap.clear();
+    this.ctx.state.errorsSet.clear();
+    this.ctx.state.processTimeoutCauses.clear();
+  }
+
+  async onFinished() {
+    const unhandledErrors = this.ctx.state.getUnhandledErrors();
+
+    const isCancelled = this.ctx.isCancelling;
+    const report = await this.getProgressReport(Date.now());
+
+    const testSuiteFailures = report.details.testResults.filter(
+      (t) => t.status === 'failed' && t.results.length === 0
+    );
+
+    const reducedTestSuiteFailures = new Set<string | undefined>();
+
+    testSuiteFailures.forEach((t) => {
+      reducedTestSuiteFailures.add(t.message);
+    });
+
+    if (isCancelled) {
+      this.sendReport({
+        providerId: TEST_PROVIDER_ID,
+        status: 'cancelled',
+        ...report,
+      });
+    } else if (reducedTestSuiteFailures.size > 0 || unhandledErrors.length > 0) {
+      const error =
+        reducedTestSuiteFailures.size > 0
+          ? {
+              name: `${reducedTestSuiteFailures.size} component ${reducedTestSuiteFailures.size === 1 ? 'test' : 'tests'} failed`,
+              message: Array.from(reducedTestSuiteFailures).reduce(
+                (acc, curr) => `${acc}\n${curr}`,
+                ''
+              )!,
+            }
+          : {
+              name: `${unhandledErrors.length} unhandled error${unhandledErrors?.length > 1 ? 's' : ''}`,
+              message: unhandledErrors
+                .map((e, index) => `[${index}]: ${(e as any).stack || (e as any).message}`)
+                .join('\n----------\n'),
+            };
+
+      this.sendReport({
+        providerId: TEST_PROVIDER_ID,
+        status: 'failed',
+        details: report.details,
+        progress: report.progress,
+        error,
+      });
+    } else {
+      this.sendReport({
+        providerId: TEST_PROVIDER_ID,
+        status: 'success',
+        ...report,
+      });
+    }
+
+    this.clearVitestState();
+  }
+}
diff --git a/code/addons/test/src/node/test-manager.test.ts b/code/addons/test/src/node/test-manager.test.ts
new file mode 100644
index 000000000000..985f74c97595
--- /dev/null
+++ b/code/addons/test/src/node/test-manager.test.ts
@@ -0,0 +1,203 @@
+import { describe, expect, it, vi } from 'vitest';
+import { createVitest as actualCreateVitest } from 'vitest/node';
+
+import { Channel, type ChannelTransport } from '@storybook/core/channels';
+import type { StoryIndex } from '@storybook/types';
+
+import path from 'pathe';
+
+import { TEST_PROVIDER_ID } from '../constants';
+import { TestManager } from './test-manager';
+
+const setTestNamePattern = vi.hoisted(() => vi.fn());
+const vitest = vi.hoisted(() => ({
+  projects: [{}],
+  init: vi.fn(),
+  close: vi.fn(),
+  onCancel: vi.fn(),
+  runFiles: vi.fn(),
+  cancelCurrentRun: vi.fn(),
+  globTestSpecs: vi.fn(),
+  getModuleProjects: vi.fn(() => []),
+  configOverride: {
+    actualTestNamePattern: undefined,
+    get testNamePattern() {
+      return this.actualTestNamePattern!;
+    },
+    set testNamePattern(value: string) {
+      setTestNamePattern(value);
+      // @ts-expect-error Ignore for testing
+      this.actualTestNamePattern = value;
+    },
+  },
+}));
+
+vi.mock('vitest/node', () => ({
+  createVitest: vi.fn(() => Promise.resolve(vitest)),
+}));
+const createVitest = vi.mocked(actualCreateVitest);
+
+const transport = { setHandler: vi.fn(), send: vi.fn() } satisfies ChannelTransport;
+const mockChannel = new Channel({ transport });
+
+const tests = [
+  {
+    project: { config: { env: { __STORYBOOK_URL__: 'http://localhost:6006' } } },
+    moduleId: path.join(process.cwd(), 'path/to/file'),
+  },
+  {
+    project: { config: { env: { __STORYBOOK_URL__: 'http://localhost:6006' } } },
+    moduleId: path.join(process.cwd(), 'path/to/another/file'),
+  },
+];
+
+global.fetch = vi.fn().mockResolvedValue({
+  json: () =>
+    new Promise((resolve) =>
+      resolve({
+        v: 5,
+        entries: {
+          'story--one': {
+            type: 'story',
+            id: 'story--one',
+            name: 'One',
+            title: 'story/one',
+            importPath: 'path/to/file',
+            tags: ['test'],
+          },
+          'another--one': {
+            type: 'story',
+            id: 'another--one',
+            name: 'One',
+            title: 'another/one',
+            importPath: 'path/to/another/file',
+            tags: ['test'],
+          },
+        },
+      } as StoryIndex)
+    ),
+});
+
+const options: ConstructorParameters<typeof TestManager>[1] = {
+  onError: (message, error) => {
+    throw error;
+  },
+  onReady: vi.fn(),
+};
+
+describe('TestManager', () => {
+  it('should create a vitest instance', async () => {
+    new TestManager(mockChannel, options);
+    await new Promise((r) => setTimeout(r, 1000));
+    expect(createVitest).toHaveBeenCalled();
+  });
+
+  it('should call onReady callback', async () => {
+    new TestManager(mockChannel, options);
+    await new Promise((r) => setTimeout(r, 1000));
+    expect(options.onReady).toHaveBeenCalled();
+  });
+
+  it('TestManager.start should start vitest and resolve when ready', async () => {
+    const testManager = await TestManager.start(mockChannel, options);
+    expect(testManager).toBeInstanceOf(TestManager);
+    expect(createVitest).toHaveBeenCalled();
+  });
+
+  it('should handle watch mode request', async () => {
+    const testManager = await TestManager.start(mockChannel, options);
+    expect(testManager.config.watchMode).toBe(false);
+    expect(createVitest).toHaveBeenCalledTimes(1);
+
+    await testManager.handleWatchModeRequest({ providerId: TEST_PROVIDER_ID, watchMode: true });
+    expect(testManager.config.watchMode).toBe(true);
+    expect(createVitest).toHaveBeenCalledTimes(1); // shouldn't restart vitest
+  });
+
+  it('should handle run request', async () => {
+    vitest.globTestSpecs.mockImplementation(() => tests);
+    const testManager = await TestManager.start(mockChannel, options);
+    expect(createVitest).toHaveBeenCalledTimes(1);
+
+    await testManager.handleRunRequest({
+      providerId: TEST_PROVIDER_ID,
+      indexUrl: 'http://localhost:6006/index.json',
+    });
+    expect(createVitest).toHaveBeenCalledTimes(1);
+    expect(vitest.runFiles).toHaveBeenCalledWith(tests, true);
+  });
+
+  it('should filter tests', async () => {
+    vitest.globTestSpecs.mockImplementation(() => tests);
+    const testManager = await TestManager.start(mockChannel, options);
+
+    await testManager.handleRunRequest({
+      providerId: TEST_PROVIDER_ID,
+      indexUrl: 'http://localhost:6006/index.json',
+      storyIds: [],
+    });
+    expect(vitest.runFiles).toHaveBeenCalledWith([], true);
+    expect(vitest.configOverride.testNamePattern).toBeUndefined();
+
+    await testManager.handleRunRequest({
+      providerId: TEST_PROVIDER_ID,
+      indexUrl: 'http://localhost:6006/index.json',
+      storyIds: ['story--one'],
+    });
+    expect(setTestNamePattern).toHaveBeenCalledWith(/^One$/);
+    expect(vitest.runFiles).toHaveBeenCalledWith(tests.slice(0, 1), true);
+  });
+
+  it('should handle coverage toggling', async () => {
+    const testManager = await TestManager.start(mockChannel, options);
+    expect(testManager.config.coverage).toBe(false);
+    expect(createVitest).toHaveBeenCalledTimes(1);
+    createVitest.mockClear();
+
+    await testManager.handleConfigChange({
+      providerId: TEST_PROVIDER_ID,
+      config: { coverage: true, a11y: false },
+    });
+    expect(testManager.config.coverage).toBe(true);
+    expect(createVitest).toHaveBeenCalledTimes(1);
+    createVitest.mockClear();
+
+    await testManager.handleConfigChange({
+      providerId: TEST_PROVIDER_ID,
+      config: { coverage: false, a11y: false },
+    });
+    expect(testManager.config.coverage).toBe(false);
+    expect(createVitest).toHaveBeenCalledTimes(1);
+  });
+
+  it('should temporarily disable coverage on focused tests', async () => {
+    vitest.globTestSpecs.mockImplementation(() => tests);
+    const testManager = await TestManager.start(mockChannel, options);
+    expect(testManager.config.coverage).toBe(false);
+    expect(createVitest).toHaveBeenCalledTimes(1);
+
+    await testManager.handleConfigChange({
+      providerId: TEST_PROVIDER_ID,
+      config: { coverage: true, a11y: false },
+    });
+    expect(testManager.config.coverage).toBe(true);
+    expect(createVitest).toHaveBeenCalledTimes(2);
+
+    await testManager.handleRunRequest({
+      providerId: TEST_PROVIDER_ID,
+      indexUrl: 'http://localhost:6006/index.json',
+      storyIds: ['button--primary', 'button--secondary'],
+    });
+    // expect vitest to be restarted twice, without and with coverage
+    expect(createVitest).toHaveBeenCalledTimes(4);
+    expect(vitest.runFiles).toHaveBeenCalledWith([], true);
+
+    await testManager.handleRunRequest({
+      providerId: TEST_PROVIDER_ID,
+      indexUrl: 'http://localhost:6006/index.json',
+    });
+    // don't expect vitest to be restarted, as we're running all tests
+    expect(createVitest).toHaveBeenCalledTimes(4);
+    expect(vitest.runFiles).toHaveBeenCalledWith(tests, true);
+  });
+});
diff --git a/code/addons/test/src/node/test-manager.ts b/code/addons/test/src/node/test-manager.ts
new file mode 100644
index 000000000000..1a19e587eeea
--- /dev/null
+++ b/code/addons/test/src/node/test-manager.ts
@@ -0,0 +1,166 @@
+import type { Channel } from 'storybook/internal/channels';
+import {
+  TESTING_MODULE_CANCEL_TEST_RUN_REQUEST,
+  TESTING_MODULE_CONFIG_CHANGE,
+  TESTING_MODULE_PROGRESS_REPORT,
+  TESTING_MODULE_RUN_REQUEST,
+  TESTING_MODULE_WATCH_MODE_REQUEST,
+  type TestingModuleCancelTestRunRequestPayload,
+  type TestingModuleConfigChangePayload,
+  type TestingModuleProgressReportPayload,
+  type TestingModuleRunRequestPayload,
+  type TestingModuleWatchModeRequestPayload,
+} from 'storybook/internal/core-events';
+
+import { type Config, TEST_PROVIDER_ID } from '../constants';
+import { VitestManager } from './vitest-manager';
+
+export class TestManager {
+  vitestManager: VitestManager;
+
+  config = {
+    watchMode: false,
+    coverage: false,
+    a11y: false,
+  };
+
+  constructor(
+    private channel: Channel,
+    private options: {
+      onError?: (message: string, error: Error) => void;
+      onReady?: () => void;
+    } = {}
+  ) {
+    this.vitestManager = new VitestManager(this);
+
+    this.channel.on(TESTING_MODULE_RUN_REQUEST, this.handleRunRequest.bind(this));
+    this.channel.on(TESTING_MODULE_CONFIG_CHANGE, this.handleConfigChange.bind(this));
+    this.channel.on(TESTING_MODULE_WATCH_MODE_REQUEST, this.handleWatchModeRequest.bind(this));
+    this.channel.on(TESTING_MODULE_CANCEL_TEST_RUN_REQUEST, this.handleCancelRequest.bind(this));
+
+    this.vitestManager.startVitest().then(() => options.onReady?.());
+  }
+
+  async handleConfigChange(payload: TestingModuleConfigChangePayload<Config>) {
+    if (payload.providerId !== TEST_PROVIDER_ID) {
+      return;
+    }
+
+    const previousConfig = this.config;
+
+    this.config = {
+      ...this.config,
+      ...payload.config,
+    } satisfies Config;
+
+    process.env.VITEST_STORYBOOK_CONFIG = JSON.stringify(payload.config);
+
+    if (previousConfig.coverage !== payload.config.coverage) {
+      try {
+        await this.vitestManager.restartVitest({
+          coverage: this.config.coverage,
+        });
+      } catch (e) {
+        this.reportFatalError('Failed to change coverage configuration', e);
+      }
+    }
+  }
+
+  async handleWatchModeRequest(payload: TestingModuleWatchModeRequestPayload<Config>) {
+    if (payload.providerId !== TEST_PROVIDER_ID) {
+      return;
+    }
+    this.config.watchMode = payload.watchMode;
+
+    if (payload.config) {
+      this.handleConfigChange({
+        providerId: payload.providerId,
+        config: payload.config,
+      });
+    }
+
+    if (this.config.coverage) {
+      try {
+        if (payload.watchMode) {
+          // if watch mode is toggled on and coverage is already enabled, restart vitest without coverage to automatically disable it
+          await this.vitestManager.restartVitest({ coverage: false });
+        } else {
+          // if watch mode is toggled off and coverage is already enabled, restart vitest with coverage to automatically re-enable it
+          await this.vitestManager.restartVitest({ coverage: this.config.coverage });
+        }
+      } catch (e) {
+        this.reportFatalError('Failed to change watch mode while coverage was enabled', e);
+      }
+    }
+  }
+
+  async handleRunRequest(payload: TestingModuleRunRequestPayload<Config>) {
+    try {
+      if (payload.providerId !== TEST_PROVIDER_ID) {
+        return;
+      }
+
+      if (payload.config) {
+        this.handleConfigChange({
+          providerId: payload.providerId,
+          config: payload.config,
+        });
+      }
+
+      /*
+        If we're only running a subset of stories, we have to temporarily disable coverage,
+        as a coverage report for a subset of stories is not useful.
+      */
+      const temporarilyDisableCoverage =
+        this.config.coverage && !this.config.watchMode && (payload.storyIds ?? []).length > 0;
+      if (temporarilyDisableCoverage) {
+        await this.vitestManager.restartVitest({
+          coverage: false,
+        });
+      } else {
+        await this.vitestManager.vitestRestartPromise;
+      }
+
+      await this.vitestManager.runTests(payload);
+
+      if (temporarilyDisableCoverage) {
+        // Re-enable coverage if it was temporarily disabled because of a subset of stories was run
+        await this.vitestManager.restartVitest({ coverage: this.config.coverage });
+      }
+    } catch (e) {
+      this.reportFatalError('Failed to run tests', e);
+    }
+  }
+
+  async handleCancelRequest(payload: TestingModuleCancelTestRunRequestPayload) {
+    try {
+      if (payload.providerId !== TEST_PROVIDER_ID) {
+        return;
+      }
+
+      await this.vitestManager.cancelCurrentRun();
+    } catch (e) {
+      this.reportFatalError('Failed to cancel tests', e);
+    }
+  }
+
+  async sendProgressReport(payload: TestingModuleProgressReportPayload) {
+    this.channel.emit(TESTING_MODULE_PROGRESS_REPORT, payload);
+  }
+
+  async reportFatalError(message: string, error: Error | any) {
+    this.options.onError?.(message, error);
+  }
+
+  static async start(channel: Channel, options: typeof TestManager.prototype.options = {}) {
+    return new Promise<TestManager>((resolve) => {
+      const testManager = new TestManager(channel, {
+        ...options,
+        onReady: () => {
+          resolve(testManager);
+          options.onReady?.();
+        },
+      });
+    });
+  }
+}
diff --git a/code/addons/test/src/node/vitest-manager.ts b/code/addons/test/src/node/vitest-manager.ts
new file mode 100644
index 000000000000..4145acf18a3f
--- /dev/null
+++ b/code/addons/test/src/node/vitest-manager.ts
@@ -0,0 +1,361 @@
+import { existsSync } from 'node:fs';
+
+import type {
+  CoverageOptions,
+  ResolvedCoverageOptions,
+  TestProject,
+  TestSpecification,
+  Vitest,
+  WorkspaceProject,
+} from 'vitest/node';
+
+import { resolvePathInStorybookCache } from 'storybook/internal/common';
+import type { TestingModuleRunRequestPayload } from 'storybook/internal/core-events';
+
+import type { DocsIndexEntry, StoryIndex, StoryIndexEntry } from '@storybook/types';
+
+import path, { dirname, join, normalize } from 'pathe';
+import slash from 'slash';
+
+import { COVERAGE_DIRECTORY, type Config } from '../constants';
+import { log } from '../logger';
+import type { StorybookCoverageReporterOptions } from './coverage-reporter';
+import { StorybookReporter } from './reporter';
+import type { TestManager } from './test-manager';
+
+type TagsFilter = {
+  include: string[];
+  exclude: string[];
+  skip: string[];
+};
+
+const packageDir = dirname(require.resolve('@storybook/experimental-addon-test/package.json'));
+
+// We have to tell Vitest that it runs as part of Storybook
+process.env.VITEST_STORYBOOK = 'true';
+
+export class VitestManager {
+  vitest: Vitest | null = null;
+
+  vitestStartupCounter = 0;
+
+  vitestRestartPromise: Promise<void> | null = null;
+
+  storyCountForCurrentRun: number = 0;
+
+  constructor(private testManager: TestManager) {}
+
+  async startVitest({ coverage = false } = {}) {
+    const { createVitest } = await import('vitest/node');
+
+    const storybookCoverageReporter: [string, StorybookCoverageReporterOptions] = [
+      join(packageDir, 'dist/node/coverage-reporter.js'),
+      {
+        testManager: this.testManager,
+        coverageOptions: this.vitest?.config?.coverage as ResolvedCoverageOptions<'v8'> | undefined,
+      },
+    ];
+    const coverageOptions = (
+      coverage
+        ? {
+            enabled: true,
+            clean: false,
+            cleanOnRerun: false,
+            reportOnFailure: true,
+            reporter: [['html', {}], storybookCoverageReporter],
+            reportsDirectory: resolvePathInStorybookCache(COVERAGE_DIRECTORY),
+          }
+        : { enabled: false }
+    ) as CoverageOptions;
+
+    this.vitest = await createVitest('test', {
+      watch: true,
+      passWithNoTests: false,
+      // TODO:
+      // Do we want to enable Vite's default reporter?
+      // The output in the terminal might be too spamy and it might be better to
+      // find a way to just show errors and warnings for example
+      // Otherwise it might be hard for the user to discover Storybook related logs
+      reporters: ['default', new StorybookReporter(this.testManager)],
+      coverage: coverageOptions,
+    });
+
+    if (this.vitest) {
+      this.vitest.onCancel(() => {
+        // TODO: handle cancellation
+      });
+    }
+
+    try {
+      await this.vitest.init();
+    } catch (e: any) {
+      let message = 'Failed to initialize Vitest';
+      const isV8 = e.message?.includes('@vitest/coverage-v8');
+      const isIstanbul = e.message?.includes('@vitest/coverage-istanbul');
+
+      if (
+        (e.message?.includes('Failed to load url') && (isIstanbul || isV8)) ||
+        // Vitest will sometimes not throw the correct missing-package-detection error, so we have to check for this as well
+        (e instanceof TypeError &&
+          e?.message === "Cannot read properties of undefined (reading 'name')")
+      ) {
+        const coveragePackage = isIstanbul ? 'coverage-istanbul' : 'coverage-v8';
+        message += `\n\nPlease install the @vitest/${coveragePackage} package to collect coverage\n`;
+      }
+      this.testManager.reportFatalError(message, e);
+      return;
+    }
+
+    await this.setupWatchers();
+  }
+
+  async restartVitest({ coverage }: { coverage: boolean }) {
+    await this.vitestRestartPromise;
+    this.vitestRestartPromise = new Promise(async (resolve, reject) => {
+      try {
+        await this.vitest?.runningPromise;
+        await this.closeVitest();
+        await this.startVitest({ coverage });
+        resolve();
+      } catch (e) {
+        reject(e);
+      } finally {
+        this.vitestRestartPromise = null;
+      }
+    });
+    return this.vitestRestartPromise;
+  }
+
+  private updateLastChanged(filepath: string) {
+    const projects = this.vitest!.getModuleProjects(filepath);
+    projects.forEach(({ server, browser }) => {
+      if (server) {
+        const serverMods = server.moduleGraph.getModulesByFile(filepath);
+        serverMods?.forEach((mod) => server.moduleGraph.invalidateModule(mod));
+      }
+      if (browser) {
+        const browserMods = browser.vite.moduleGraph.getModulesByFile(filepath);
+        browserMods?.forEach((mod) => browser.vite.moduleGraph.invalidateModule(mod));
+      }
+    });
+  }
+
+  private async fetchStories(indexUrl: string, requestStoryIds?: string[]) {
+    try {
+      const index = (await Promise.race([
+        fetch(indexUrl).then((res) => res.json()),
+        new Promise((_, reject) => setTimeout(reject, 3000, new Error('Request took too long'))),
+      ])) as StoryIndex;
+      const storyIds = requestStoryIds || Object.keys(index.entries);
+      return storyIds.map((id) => index.entries[id]).filter((story) => story.type === 'story');
+    } catch (e: any) {
+      log('Failed to fetch story index: ' + e.message);
+      return [];
+    }
+  }
+
+  private filterStories(
+    story: StoryIndexEntry | DocsIndexEntry,
+    moduleId: string,
+    tagsFilter: TagsFilter
+  ) {
+    const absoluteImportPath = path.join(process.cwd(), story.importPath);
+    if (absoluteImportPath !== moduleId) {
+      return false;
+    }
+    if (tagsFilter.include.length && !tagsFilter.include.some((tag) => story.tags?.includes(tag))) {
+      return false;
+    }
+    if (tagsFilter.exclude.some((tag) => story.tags?.includes(tag))) {
+      return false;
+    }
+    // Skipped tests are intentionally included here
+    return true;
+  }
+
+  async runTests(requestPayload: TestingModuleRunRequestPayload<Config>) {
+    if (!this.vitest) {
+      await this.startVitest();
+    } else {
+      await this.vitestRestartPromise;
+    }
+
+    this.resetTestNamePattern();
+
+    const stories = await this.fetchStories(requestPayload.indexUrl, requestPayload.storyIds);
+    const vitestTestSpecs = await this.getStorybookTestSpecs();
+    const isSingleStoryRun = requestPayload.storyIds?.length === 1;
+
+    const { filteredTestFiles, totalTestCount } = vitestTestSpecs.reduce(
+      (acc, spec) => {
+        /* eslint-disable no-underscore-dangle */
+        const { env = {} } = spec.project.config;
+        const include = env.__VITEST_INCLUDE_TAGS__?.split(',').filter(Boolean) ?? ['test'];
+        const exclude = env.__VITEST_EXCLUDE_TAGS__?.split(',').filter(Boolean) ?? [];
+        const skip = env.__VITEST_SKIP_TAGS__?.split(',').filter(Boolean) ?? [];
+        /* eslint-enable no-underscore-dangle */
+
+        const matches = stories.filter((story) =>
+          this.filterStories(story, spec.moduleId, { include, exclude, skip })
+        );
+        if (matches.length) {
+          if (!this.testManager.config.watchMode) {
+            // Clear the file cache if watch mode is not enabled
+            this.updateLastChanged(spec.moduleId);
+          }
+          acc.filteredTestFiles.push(spec);
+          acc.totalTestCount += matches.filter(
+            // Don't count skipped stories, because StorybookReporter doesn't include them either
+            (story) => !skip.some((tag) => story.tags?.includes(tag))
+          ).length;
+        }
+        return acc;
+      },
+      { filteredTestFiles: [] as TestSpecification[], totalTestCount: 0 }
+    );
+
+    await this.cancelCurrentRun();
+    this.storyCountForCurrentRun = totalTestCount;
+
+    if (isSingleStoryRun) {
+      const storyName = stories[0].name;
+      this.vitest!.configOverride.testNamePattern = new RegExp(
+        `^${storyName.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}$`
+      );
+    }
+
+    await this.vitest!.runFiles(filteredTestFiles, true);
+    this.resetTestNamePattern();
+  }
+
+  async cancelCurrentRun() {
+    await this.vitest?.cancelCurrentRun('keyboard-input');
+    await this.vitest?.runningPromise;
+  }
+
+  async closeVitest() {
+    await this.vitest?.close();
+  }
+
+  async getStorybookTestSpecs() {
+    const globTestSpecs = (await this.vitest?.globTestSpecs()) ?? [];
+    return (
+      globTestSpecs.filter((workspaceSpec) => this.isStorybookProject(workspaceSpec.project)) ?? []
+    );
+  }
+
+  private async getTestDependencies(spec: TestSpecification, deps = new Set<string>()) {
+    const addImports = async (project: WorkspaceProject, filepath: string) => {
+      if (deps.has(filepath)) {
+        return;
+      }
+      deps.add(filepath);
+
+      const mod = project.server.moduleGraph.getModuleById(filepath);
+      const transformed =
+        mod?.ssrTransformResult || (await project.vitenode.transformRequest(filepath));
+      if (!transformed) {
+        return;
+      }
+      const dependencies = [...(transformed.deps || []), ...(transformed.dynamicDeps || [])];
+      await Promise.all(
+        dependencies.map(async (dep) => {
+          const idPath = await project.server.pluginContainer.resolveId(dep, filepath, {
+            ssr: true,
+          });
+          const fsPath = idPath && !idPath.external && idPath.id.split('?')[0];
+          if (
+            fsPath &&
+            !fsPath.includes('node_modules') &&
+            !deps.has(fsPath) &&
+            existsSync(fsPath)
+          ) {
+            await addImports(project, fsPath);
+          }
+        })
+      );
+    };
+
+    await addImports(spec.project.workspaceProject, spec.moduleId);
+    deps.delete(spec.moduleId);
+
+    return deps;
+  }
+
+  async runAffectedTests(trigger: string) {
+    if (!this.vitest) {
+      return;
+    }
+    this.resetTestNamePattern();
+
+    const globTestFiles = await this.vitest.globTestSpecs();
+    const testGraphs = await Promise.all(
+      globTestFiles
+        .filter((workspace) => this.isStorybookProject(workspace.project))
+        .map(async (spec) => {
+          const deps = await this.getTestDependencies(spec);
+          return [spec, deps] as const;
+        })
+    );
+    const triggerAffectedTests: TestSpecification[] = [];
+
+    for (const [workspaceSpec, deps] of testGraphs) {
+      if (trigger && (trigger === workspaceSpec.moduleId || deps.has(trigger))) {
+        triggerAffectedTests.push(workspaceSpec);
+      }
+    }
+
+    if (triggerAffectedTests.length) {
+      await this.vitest.cancelCurrentRun('keyboard-input');
+      await this.vitest.runningPromise;
+      await this.vitest.runFiles(triggerAffectedTests, false);
+    }
+  }
+
+  async runAffectedTestsAfterChange(file: string) {
+    const id = slash(file);
+    this.vitest?.logger.clearHighlightCache(id);
+    this.updateLastChanged(id);
+
+    // when watch mode is disabled, don't trigger any tests (below)
+    // but still invalidate the cache for the changed file, which is handled above
+    if (!this.testManager.config.watchMode) {
+      return;
+    }
+
+    this.storyCountForCurrentRun = 0;
+    await this.runAffectedTests(file);
+  }
+
+  async registerVitestConfigListener() {
+    this.vitest?.server?.watcher.on('change', async (file) => {
+      file = normalize(file);
+      const isConfig = file === this.vitest?.server.config.configFile;
+      if (isConfig) {
+        log('Restarting Vitest due to config change');
+        await this.closeVitest();
+        await this.startVitest();
+      }
+    });
+  }
+
+  async setupWatchers() {
+    this.resetTestNamePattern();
+    this.vitest?.server?.watcher.removeAllListeners('change');
+    this.vitest?.server?.watcher.removeAllListeners('add');
+    this.vitest?.server?.watcher.on('change', this.runAffectedTestsAfterChange.bind(this));
+    this.vitest?.server?.watcher.on('add', this.runAffectedTestsAfterChange.bind(this));
+    this.registerVitestConfigListener();
+  }
+
+  resetTestNamePattern() {
+    if (this.vitest) {
+      this.vitest.configOverride.testNamePattern = undefined;
+    }
+  }
+
+  isStorybookProject(project: TestProject | WorkspaceProject) {
+    // eslint-disable-next-line no-underscore-dangle
+    return !!project.config.env?.__STORYBOOK_URL__;
+  }
+}
diff --git a/code/addons/test/src/node/vitest.ts b/code/addons/test/src/node/vitest.ts
new file mode 100644
index 000000000000..5ba46113b7a9
--- /dev/null
+++ b/code/addons/test/src/node/vitest.ts
@@ -0,0 +1,49 @@
+import process from 'node:process';
+
+import { Channel } from 'storybook/internal/channels';
+
+import { TestManager } from './test-manager';
+
+process.env.TEST = 'true';
+process.env.VITEST = 'true';
+process.env.NODE_ENV ??= 'test';
+
+const channel: Channel = new Channel({
+  async: true,
+  transport: {
+    send: (event) => {
+      process.send?.(event);
+    },
+    setHandler: (handler) => {
+      process.on('message', handler);
+    },
+  },
+});
+
+new TestManager(channel, {
+  onError: (message, error) => {
+    process.send?.({ type: 'error', message, error: error.stack ?? error });
+  },
+  onReady: () => {
+    process.send?.({ type: 'ready' });
+  },
+});
+
+const exit = (code = 0) => {
+  channel?.removeAllListeners();
+  process.exit(code);
+};
+
+process.on('exit', exit);
+process.on('SIGINT', () => exit(0));
+process.on('SIGTERM', () => exit(0));
+
+process.on('uncaughtException', (err) => {
+  process.send?.({ type: 'error', message: 'Uncaught exception', error: err.stack });
+  exit(1);
+});
+
+process.on('unhandledRejection', (reason) => {
+  process.send?.({ type: 'error', message: 'Unhandled rejection', error: String(reason) });
+  exit(1);
+});
diff --git a/code/addons/test/src/postinstall.ts b/code/addons/test/src/postinstall.ts
index 695cbf90225f..ac91f8aff5c7 100644
--- a/code/addons/test/src/postinstall.ts
+++ b/code/addons/test/src/postinstall.ts
@@ -1,36 +1,48 @@
 import { existsSync } from 'node:fs';
 import * as fs from 'node:fs/promises';
 import { writeFile } from 'node:fs/promises';
-import { dirname, join, relative } from 'node:path';
-import * as path from 'node:path';
 
+import { traverse } from 'storybook/internal/babel';
 import {
   JsPackageManagerFactory,
   extractProperFrameworkName,
   loadAllPresets,
   loadMainConfig,
+  serverResolve,
   validateFrameworkName,
+  versions,
 } from 'storybook/internal/common';
+import { readConfig, writeConfig } from 'storybook/internal/csf-tools';
 import { colors, logger } from 'storybook/internal/node-logger';
 
+// eslint-disable-next-line depend/ban-dependencies
+import { $ } from 'execa';
 import { findUp } from 'find-up';
+import { dirname, extname, join, relative, resolve } from 'pathe';
+import picocolors from 'picocolors';
+import prompts from 'prompts';
 import { coerce, satisfies } from 'semver';
-import c from 'tinyrainbow';
 import { dedent } from 'ts-dedent';
 
 import { type PostinstallOptions } from '../../../lib/cli-storybook/src/add';
+import { SUPPORTED_FRAMEWORKS, SUPPORTED_RENDERERS } from './constants';
 import { printError, printInfo, printSuccess, step } from './postinstall-logger';
+import { getAddonNames } from './utils';
 
 const ADDON_NAME = '@storybook/experimental-addon-test' as const;
 const EXTENSIONS = ['.js', '.jsx', '.ts', '.tsx', '.cts', '.mts', '.cjs', '.mjs'] as const;
 
-const findFile = async (basename: string) => findUp(EXTENSIONS.map((ext) => basename + ext));
+const addonInteractionsName = '@storybook/addon-interactions';
+const addonA11yName = '@storybook/addon-a11y';
+
+const findFile = async (basename: string, extraExtensions: string[] = []) =>
+  findUp([...EXTENSIONS, ...extraExtensions].map((ext) => basename + ext));
 
 export default async function postInstall(options: PostinstallOptions) {
   printSuccess(
     '👋 Howdy!',
     dedent`
-      I'm the installation helper for ${colors.pink.bold(ADDON_NAME)}
+      I'm the installation helper for ${colors.pink(ADDON_NAME)}
 
       Hold on for a moment while I look at your project and get it set up...
     `
@@ -40,7 +52,7 @@ export default async function postInstall(options: PostinstallOptions) {
     force: options.packageManager,
   });
 
-  const info = await getFrameworkInfo(options);
+  const info = await getStorybookInfo(options);
   const allDeps = await packageManager.getAllDependencies();
   // only install these dependencies if they are not already installed
   const dependencies = ['vitest', '@vitest/browser', 'playwright'].filter((p) => !allDeps[p]);
@@ -50,23 +62,68 @@ export default async function postInstall(options: PostinstallOptions) {
   // if Vitest is installed, we use the same version to keep consistency across Vitest packages
   const vitestVersionToInstall = vitestVersionSpecifier ?? 'latest';
 
-  const annotationsImport = [
-    '@storybook/nextjs',
-    '@storybook/experimental-nextjs-vite',
-    '@storybook/sveltekit',
-  ].includes(info.frameworkPackageName)
-    ? info.frameworkPackageName
-    : info.rendererPackageName &&
-        ['@storybook/react', '@storybook/svelte', '@storybook/vue3'].includes(
-          info.rendererPackageName
-        )
+  const mainJsPath = serverResolve(resolve(options.configDir, 'main')) as string;
+  const config = await readConfig(mainJsPath);
+
+  const hasCustomWebpackConfig = !!config.getFieldNode(['webpackFinal']);
+
+  if (info.frameworkPackageName === '@storybook/nextjs' && !hasCustomWebpackConfig) {
+    const out = options.yes
+      ? {
+          migrateToExperimentalNextjsVite: true,
+        }
+      : await prompts({
+          type: 'confirm',
+          name: 'migrateToExperimentalNextjsVite',
+          message: dedent`
+            The addon requires the use of @storybook/experimental-nextjs-vite to work with Next.js.
+            https://storybook.js.org/docs/writing-tests/test-addon#install-and-set-up
+
+            Do you want to migrate?
+          `,
+          initial: true,
+        });
+
+    if (out.migrateToExperimentalNextjsVite) {
+      await packageManager.addDependencies({ installAsDevDependencies: true }, [
+        `@storybook/experimental-nextjs-vite@${versions['@storybook/experimental-nextjs-vite']}`,
+      ]);
+
+      await packageManager.removeDependencies({}, ['@storybook/nextjs']);
+
+      // eslint-disable-next-line no-underscore-dangle
+      traverse(config._ast, {
+        StringLiteral(path) {
+          if (path.node.value === '@storybook/nextjs') {
+            path.node.value = '@storybook/experimental-nextjs-vite';
+          }
+        },
+      });
+
+      await writeConfig(config, mainJsPath);
+
+      info.frameworkPackageName = '@storybook/experimental-nextjs-vite';
+      info.builderPackageName = '@storybook/builder-vite';
+    }
+  }
+
+  const annotationsImport = SUPPORTED_FRAMEWORKS.includes(info.frameworkPackageName)
+    ? info.frameworkPackageName === '@storybook/nextjs'
+      ? '@storybook/experimental-nextjs-vite'
+      : info.frameworkPackageName
+    : info.rendererPackageName && SUPPORTED_RENDERERS.includes(info.rendererPackageName)
       ? info.rendererPackageName
       : null;
+
   const isRendererSupported = !!annotationsImport;
 
   const prerequisiteCheck = async () => {
     const reasons = [];
 
+    if (hasCustomWebpackConfig) {
+      reasons.push('• The addon can not be used with a custom Webpack configuration.');
+    }
+
     if (
       info.frameworkPackageName !== '@storybook/nextjs' &&
       info.builderPackageName !== '@storybook/builder-vite'
@@ -78,14 +135,14 @@ export default async function postInstall(options: PostinstallOptions) {
 
     if (!isRendererSupported) {
       reasons.push(dedent`
-        • The addon cannot yet be used with ${colors.pink.bold(info.frameworkPackageName)}
+        • The addon cannot yet be used with ${picocolors.bold(colors.pink(info.frameworkPackageName))}
       `);
     }
 
-    if (coercedVitestVersion && !satisfies(coercedVitestVersion, '>=2.0.0')) {
-      reasons.push(`
-        • The addon requires Vitest 2.0.0 or later. You are currently using ${vitestVersionSpecifier}.
-          Please update your ${colors.pink.bold('vitest')} dependency and try again.
+    if (coercedVitestVersion && !satisfies(coercedVitestVersion, '>=2.1.0')) {
+      reasons.push(dedent`
+        • The addon requires Vitest 2.1.0 or later. You are currently using ${picocolors.bold(vitestVersionSpecifier)}.
+          Please update all of your Vitest dependencies and try again.
       `);
     }
 
@@ -93,7 +150,7 @@ export default async function postInstall(options: PostinstallOptions) {
       const nextVersion = await packageManager.getInstalledVersion('next');
       if (!nextVersion) {
         reasons.push(dedent`
-          • You are using ${colors.pink.bold('@storybook/nextjs')} without having ${colors.pink.bold('next')} installed.
+          • You are using ${picocolors.bold(colors.pink('@storybook/nextjs'))} without having ${picocolors.bold(colors.pink('next'))} installed.
             Please install "next" or use a different Storybook framework integration and try again.
         `);
       }
@@ -105,7 +162,7 @@ export default async function postInstall(options: PostinstallOptions) {
       );
       reasons.push(
         dedent`
-          To roll back the installation, remove ${colors.pink.bold(ADDON_NAME)} from the "addons" array
+          You can fix these issues and rerun the command to reinstall. If you wish to roll back the installation, remove ${picocolors.bold(colors.pink(ADDON_NAME))} from the "addons" array
           in your main Storybook config file and remove the dependency from your package.json file.
         `
       );
@@ -114,14 +171,14 @@ export default async function postInstall(options: PostinstallOptions) {
         reasons.push(
           dedent`
             Please check the documentation for more information about its requirements and installation:
-            ${c.cyan`https://storybook.js.org/docs/writing-tests/vitest-plugin`}
+            ${picocolors.cyan(`https://storybook.js.org/docs/writing-tests/test-addon`)}
           `
         );
       } else {
         reasons.push(
           dedent`
             Fear not, however, you can follow the manual installation process instead at:
-            ${c.cyan`https://storybook.js.org/docs/writing-tests/vitest-plugin#manual`}
+            ${picocolors.cyan(`https://storybook.js.org/docs/writing-tests/test-addon#manual-setup`)}
           `
         );
       }
@@ -140,6 +197,36 @@ export default async function postInstall(options: PostinstallOptions) {
     return;
   }
 
+  if (info.hasAddonInteractions) {
+    let shouldUninstall = options.yes;
+    if (!options.yes) {
+      printInfo(
+        '⚠️ Attention',
+        dedent`
+          We have detected that you're using ${addonInteractionsName}.
+          The Storybook test addon is a replacement for the interactions addon, so you must uninstall and unregister it in order to use the test addon correctly. This can be done automatically.
+
+          More info: ${picocolors.cyan('https://storybook.js.org/docs/writing-tests/test-addon')}
+        `
+      );
+
+      const response = await prompts({
+        type: 'confirm',
+        name: 'shouldUninstall',
+        message: `Would you like me to remove and unregister ${addonInteractionsName}? Press N to abort the entire installation.`,
+        initial: true,
+      });
+
+      shouldUninstall = response.shouldUninstall;
+    }
+
+    if (shouldUninstall) {
+      await $({
+        stdio: 'inherit',
+      })`storybook remove ${addonInteractionsName} --package-manager ${options.packageManager} --config-dir ${options.configDir}`;
+    }
+  }
+
   const vitestInfo = getVitestPluginInfo(info.frameworkPackageName);
 
   if (info.frameworkPackageName === '@storybook/nextjs') {
@@ -148,9 +235,9 @@ export default async function postInstall(options: PostinstallOptions) {
       dedent`
         It looks like you're using Next.js.
 
-        Adding ${colors.pink.bold(`@storybook/experimental-nextjs-vite/vite-plugin`)} so you can use it with Vitest.
+        Adding ${picocolors.bold(colors.pink(`@storybook/experimental-nextjs-vite/vite-plugin`))} so you can use it with Vitest.
 
-        More info about the plugin at: ${c.cyan`https://github.com/storybookjs/vite-plugin-storybook-nextjs`}
+        More info about the plugin at ${picocolors.cyan(`https://github.com/storybookjs/vite-plugin-storybook-nextjs`)}
       `
     );
     try {
@@ -163,6 +250,21 @@ export default async function postInstall(options: PostinstallOptions) {
     }
   }
 
+  const v8Version = await packageManager.getInstalledVersion('@vitest/coverage-v8');
+  const istanbulVersion = await packageManager.getInstalledVersion('@vitest/coverage-istanbul');
+  if (!v8Version && !istanbulVersion) {
+    printInfo(
+      '🙈 Let me cover this for you',
+      dedent`
+        You don't seem to have a coverage reporter installed. Vitest needs either V8 or Istanbul to generate coverage reports.
+
+        Adding ${picocolors.bold(colors.pink(`@vitest/coverage-v8`))} to enable coverage reporting.
+        Read more about Vitest coverage providers at ${picocolors.cyan(`https://vitest.dev/guide/coverage.html#coverage-providers`)}
+      `
+    );
+    dependencies.push(`@vitest/coverage-v8`); // Version specifier is added below
+  }
+
   const versionedDependencies = dependencies.map((p) => {
     if (p.includes('vitest')) {
       return `${p}@${vitestVersionToInstall ?? 'latest'}`;
@@ -188,7 +290,10 @@ export default async function postInstall(options: PostinstallOptions) {
     args: ['playwright', 'install', 'chromium', '--with-deps'],
   });
 
-  const vitestSetupFile = path.resolve(options.configDir, 'vitest.setup.ts');
+  const fileExtension =
+    allDeps['typescript'] || (await findFile('tsconfig', ['.json'])) ? 'ts' : 'js';
+
+  const vitestSetupFile = resolve(options.configDir, `vitest.setup.${fileExtension}`);
   if (existsSync(vitestSetupFile)) {
     printError(
       '🚨 Oh no!',
@@ -197,7 +302,7 @@ export default async function postInstall(options: PostinstallOptions) {
         ${colors.gray(vitestSetupFile)}
 
         Please refer to the documentation to complete the setup manually:
-        ${c.cyan`https://storybook.js.org/docs/writing-tests/vitest-plugin#manual`}
+        ${picocolors.cyan(`https://storybook.js.org/docs/writing-tests/test-addon#manual-setup`)}
       `
     );
     logger.line(1);
@@ -208,20 +313,37 @@ export default async function postInstall(options: PostinstallOptions) {
   logger.plain(`${step} Creating a Vitest setup file for Storybook:`);
   logger.plain(colors.gray(`  ${vitestSetupFile}`));
 
-  const previewExists = EXTENSIONS.map((ext) =>
-    path.resolve(options.configDir, `preview${ext}`)
-  ).some((config) => existsSync(config));
+  const previewExists = EXTENSIONS.map((ext) => resolve(options.configDir, `preview${ext}`)).some(
+    existsSync
+  );
+
+  const a11yAddon = info.addons.find((addon) => addon.includes(addonA11yName));
+
+  const imports = [
+    `import { beforeAll } from 'vitest';`,
+    `import { setProjectAnnotations } from '${annotationsImport}';`,
+  ];
+
+  const projectAnnotations = [];
+
+  if (a11yAddon) {
+    imports.push(`import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';`);
+    projectAnnotations.push('a11yAddonAnnotations');
+  }
+
+  if (previewExists) {
+    imports.push(`import * as projectAnnotations from './preview';`);
+    projectAnnotations.push('projectAnnotations');
+  }
 
   await writeFile(
     vitestSetupFile,
     dedent`
-      import { beforeAll } from 'vitest';
-      import { setProjectAnnotations } from '${annotationsImport}';
-      ${previewExists ? `import * as projectAnnotations from './preview';` : ''}
+      ${imports.join('\n')}
 
       // This is an important step to apply the right configuration when testing your stories.
       // More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
-      const project = setProjectAnnotations(${previewExists ? '[projectAnnotations]' : '[]'});
+      const project = setProjectAnnotations([${projectAnnotations.join(', ')}]);
 
       beforeAll(project.beforeAll);
     `
@@ -236,11 +358,11 @@ export default async function postInstall(options: PostinstallOptions) {
         Found an existing Vitest workspace file:
         ${colors.gray(vitestWorkspaceFile)}
 
-        I was able to configure most of the addon but could not safely extend 
+        I was able to configure most of the addon but could not safely extend
         your existing workspace file automatically, you must do it yourself. This was the last step.
 
         Please refer to the documentation to complete the setup manually:
-        ${c.cyan`https://storybook.js.org/docs/writing-tests/vitest-plugin#manual`}
+        ${picocolors.cyan(`https://storybook.js.org/docs/writing-tests/test-addon#manual-setup`)}
       `
     );
     logger.line(1);
@@ -256,13 +378,13 @@ export default async function postInstall(options: PostinstallOptions) {
         '🚨 Oh no!',
         dedent`
           You seem to have an existing test configuration in your Vite config file:
-          ${colors.gray(vitestWorkspaceFile)}
+          ${colors.gray(vitestWorkspaceFile || '')}
 
-          I was able to configure most of the addon but could not safely extend 
+          I was able to configure most of the addon but could not safely extend
           your existing workspace file automatically, you must do it yourself. This was the last step.
 
           Please refer to the documentation to complete the setup manually:
-          ${c.cyan`https://storybook.js.org/docs/writing-tests/vitest-plugin#manual`}
+          ${picocolors.cyan(`https://storybook.js.org/docs/writing-tests/test-addon#manual-setup`)}
         `
       );
       logger.line(1);
@@ -275,8 +397,8 @@ export default async function postInstall(options: PostinstallOptions) {
 
   if (rootConfig) {
     // If there's an existing config, we create a workspace file so we can run Storybook tests alongside.
-    const extname = path.extname(rootConfig);
-    const browserWorkspaceFile = path.resolve(dirname(rootConfig), `vitest.workspace${extname}`);
+    const extension = extname(rootConfig);
+    const browserWorkspaceFile = resolve(dirname(rootConfig), `vitest.workspace${extension}`);
 
     logger.line(1);
     logger.plain(`${step} Creating a Vitest project workspace file:`);
@@ -288,14 +410,15 @@ export default async function postInstall(options: PostinstallOptions) {
         import { defineWorkspace } from 'vitest/config';
         import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';${vitestInfo.frameworkPluginImport}
 
-        // More info at: https://storybook.js.org/docs/writing-tests/vitest-plugin
+        // More info at: https://storybook.js.org/docs/writing-tests/test-addon
         export default defineWorkspace([
           '${relative(dirname(browserWorkspaceFile), rootConfig)}',
           {
             extends: '${viteConfigFile ? relative(dirname(browserWorkspaceFile), viteConfigFile) : ''}',
             plugins: [
-              // See options at: https://storybook.js.org/docs/writing-tests/vitest-plugin#storybooktest
-              storybookTest(),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall}
+              // The plugin will run tests for the stories defined in your Storybook config
+              // See options at: https://storybook.js.org/docs/writing-tests/test-addon#storybooktest
+              storybookTest({ configDir: '${options.configDir}' }),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall}
             ],
             test: {
               name: 'storybook',
@@ -305,8 +428,6 @@ export default async function postInstall(options: PostinstallOptions) {
                 name: 'chromium',
                 provider: 'playwright',
               },
-              // Make sure to adjust this pattern to match your stories files.
-              include: ['**/*.stories.?(m)[jt]s?(x)'],
               setupFiles: ['./.storybook/vitest.setup.ts'],
             },
           },
@@ -315,7 +436,9 @@ export default async function postInstall(options: PostinstallOptions) {
     );
   } else {
     // If there's no existing Vitest/Vite config, we create a new Vitest config file.
-    const newVitestConfigFile = path.resolve('vitest.config.ts');
+    const newVitestConfigFile = resolve(`vitest.config.${fileExtension}`);
+    // to be set in vitest config
+    const vitestSetupFilePath = relative(dirname(newVitestConfigFile), vitestSetupFile);
 
     logger.line(1);
     logger.plain(`${step} Creating a Vitest project config file:`);
@@ -327,11 +450,12 @@ export default async function postInstall(options: PostinstallOptions) {
         import { defineConfig } from 'vitest/config';
         import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';${vitestInfo.frameworkPluginImport}
 
-        // More info at: https://storybook.js.org/docs/writing-tests/vitest-plugin
+        // More info at: https://storybook.js.org/docs/writing-tests/test-addon
         export default defineConfig({
           plugins: [
-            // See options at: https://storybook.js.org/docs/writing-tests/vitest-plugin#storybooktest
-            storybookTest(),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall}
+            // The plugin will run tests for the stories defined in your Storybook config
+            // See options at: https://storybook.js.org/docs/writing-tests/test-addon#storybooktest
+            storybookTest({ configDir: '${options.configDir}' }),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall}
           ],
           test: {
             name: 'storybook',
@@ -341,9 +465,7 @@ export default async function postInstall(options: PostinstallOptions) {
               name: 'chromium',
               provider: 'playwright',
             },
-            // Make sure to adjust this pattern to match your stories files.
-            include: ['**/*.stories.?(m)[jt]s?(x)'],
-            setupFiles: ['./.storybook/vitest.setup.ts'],
+            setupFiles: ['${vitestSetupFilePath}'],
           },
         });
       `
@@ -362,7 +484,7 @@ export default async function postInstall(options: PostinstallOptions) {
       • When using the Vitest extension in your editor, all of your stories will be shown as tests!
 
       Check the documentation for more information about its features and options at:
-      ${c.cyan`https://storybook.js.org/docs/writing-tests/vitest-plugin`}
+      ${picocolors.cyan(`https://storybook.js.org/docs/writing-tests/test-addon`)}
     `
   );
   logger.line(1);
@@ -373,7 +495,7 @@ const getVitestPluginInfo = (framework: string) => {
   let frameworkPluginCall = '';
   let frameworkPluginDocs = '';
 
-  if (framework === '@storybook/nextjs') {
+  if (framework === '@storybook/nextjs' || framework === '@storybook/experimental-nextjs-vite') {
     frameworkPluginImport =
       "import { storybookNextJsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin';";
     frameworkPluginDocs =
@@ -393,7 +515,13 @@ const getVitestPluginInfo = (framework: string) => {
     frameworkPluginCall = 'storybookVuePlugin()';
   }
 
-  // spaces for file identation
+  if (framework === '@storybook/react-native-web-vite') {
+    frameworkPluginImport =
+      "import { storybookReactNativeWeb } from '@storybook/react-native-web-vite/vite-plugin';";
+    frameworkPluginCall = 'storybookReactNativeWeb()';
+  }
+
+  // spaces for file indentation
   frameworkPluginImport = `\n${frameworkPluginImport}`;
   frameworkPluginDocs = frameworkPluginDocs ? `\n    ${frameworkPluginDocs}` : '';
   frameworkPluginCall = frameworkPluginCall ? `\n    ${frameworkPluginCall},` : '';
@@ -401,7 +529,7 @@ const getVitestPluginInfo = (framework: string) => {
   return { frameworkPluginImport, frameworkPluginCall, frameworkPluginDocs };
 };
 
-async function getFrameworkInfo({ configDir, packageManager: pkgMgr }: PostinstallOptions) {
+async function getStorybookInfo({ configDir, packageManager: pkgMgr }: PostinstallOptions) {
   const packageManager = JsPackageManagerFactory.getPackageManager({ force: pkgMgr });
   const packageJson = await packageManager.retrievePackageJson();
 
@@ -422,6 +550,8 @@ async function getFrameworkInfo({ configDir, packageManager: pkgMgr }: Postinsta
     isCritical: true,
   });
 
+  const hasAddonInteractions = !!(await presets.apply('ADDON_INTERACTIONS_IN_USE', false));
+
   const core = await presets.apply('core', {});
 
   const { builder, renderer } = core;
@@ -431,14 +561,17 @@ async function getFrameworkInfo({ configDir, packageManager: pkgMgr }: Postinsta
   }
 
   const builderPackageJson = await fs.readFile(
-    `${typeof builder === 'string' ? builder : builder.name}/package.json`,
+    require.resolve(join(typeof builder === 'string' ? builder : builder.name, 'package.json')),
     'utf8'
   );
   const builderPackageName = JSON.parse(builderPackageJson).name;
 
   let rendererPackageName: string | undefined;
   if (renderer) {
-    const rendererPackageJson = await fs.readFile(`${renderer}/package.json`, 'utf8');
+    const rendererPackageJson = await fs.readFile(
+      require.resolve(join(renderer, 'package.json')),
+      'utf8'
+    );
     rendererPackageName = JSON.parse(rendererPackageJson).name;
   }
 
@@ -446,5 +579,7 @@ async function getFrameworkInfo({ configDir, packageManager: pkgMgr }: Postinsta
     frameworkPackageName,
     builderPackageName,
     rendererPackageName,
+    hasAddonInteractions,
+    addons: getAddonNames(config),
   };
 }
diff --git a/code/addons/test/src/preset.ts b/code/addons/test/src/preset.ts
index 8b4bc31a9013..30b0e9da7b3d 100644
--- a/code/addons/test/src/preset.ts
+++ b/code/addons/test/src/preset.ts
@@ -1,7 +1,154 @@
+import { readFileSync } from 'node:fs';
+import { mkdir } from 'node:fs/promises';
+
 import type { Channel } from 'storybook/internal/channels';
-import type { Options } from 'storybook/internal/types';
+import {
+  checkAddonOrder,
+  getFrameworkName,
+  resolvePathInStorybookCache,
+  serverRequire,
+} from 'storybook/internal/common';
+import {
+  TESTING_MODULE_CONFIG_CHANGE,
+  TESTING_MODULE_RUN_REQUEST,
+  TESTING_MODULE_WATCH_MODE_REQUEST,
+} from 'storybook/internal/core-events';
+import { oneWayHash, telemetry } from 'storybook/internal/telemetry';
+import type { Options, PresetProperty, PresetPropertyFn, StoryId } from 'storybook/internal/types';
+
+import { isAbsolute, join } from 'pathe';
+import picocolors from 'picocolors';
+import { dedent } from 'ts-dedent';
+
+import { COVERAGE_DIRECTORY, STORYBOOK_ADDON_TEST_CHANNEL, TEST_PROVIDER_ID } from './constants';
+import { log } from './logger';
+import { runTestRunner } from './node/boot-test-runner';
+
+export const checkActionsLoaded = (configDir: string) => {
+  checkAddonOrder({
+    before: {
+      name: '@storybook/addon-actions',
+      inEssentials: true,
+    },
+    after: {
+      name: '@storybook/experimental-addon-test',
+      inEssentials: false,
+    },
+    configFile: isAbsolute(configDir)
+      ? join(configDir, 'main')
+      : join(process.cwd(), configDir, 'main'),
+    getConfig: (configFile) => serverRequire(configFile),
+  });
+};
+type Event = {
+  type: 'test-discrepancy';
+  payload: {
+    storyId: StoryId;
+    browserStatus: 'PASS' | 'FAIL';
+    cliStatus: 'FAIL' | 'PASS';
+    message: string;
+  };
+};
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const experimental_serverChannel = async (channel: Channel, options: Options) => {
+  const core = await options.presets.apply('core');
+  const builderName = typeof core?.builder === 'string' ? core.builder : core?.builder?.name;
+  const framework = await getFrameworkName(options);
+
+  // Only boot the test runner if the builder is vite, else just provide interactions functionality
+  if (!builderName?.includes('vite')) {
+    if (framework.includes('nextjs')) {
+      log(dedent`
+        You're using ${framework}, which is a Webpack-based builder. In order to use Storybook Test, with your project, you need to use '@storybook/experimental-nextjs-vite', a high performance Vite-based equivalent.
+
+        Information on how to upgrade here: ${picocolors.yellow('https://storybook.js.org/docs/get-started/frameworks/nextjs#with-vite')}\n
+      `);
+    }
+    return channel;
+  }
+
+  const execute =
+    (eventName: string) =>
+    (...args: any[]) => {
+      if (args[0]?.providerId === TEST_PROVIDER_ID) {
+        runTestRunner(channel, eventName, args);
+      }
+    };
+
+  channel.on(TESTING_MODULE_RUN_REQUEST, execute(TESTING_MODULE_RUN_REQUEST));
+  channel.on(TESTING_MODULE_WATCH_MODE_REQUEST, (payload) => {
+    if (payload.watchMode) {
+      execute(TESTING_MODULE_WATCH_MODE_REQUEST)(payload);
+    }
+  });
+  channel.on(TESTING_MODULE_CONFIG_CHANGE, execute(TESTING_MODULE_CONFIG_CHANGE));
+
+  if (!core.disableTelemetry) {
+    const packageJsonPath = require.resolve('@storybook/experimental-addon-test/package.json');
+
+    const { version: addonVersion } = JSON.parse(
+      readFileSync(packageJsonPath, { encoding: 'utf-8' })
+    );
+
+    channel.on(STORYBOOK_ADDON_TEST_CHANNEL, (event: Event) => {
+      // @ts-expect-error This telemetry is not a core one, so we don't have official types for it (similar to onboarding addon)
+      telemetry('addon-test', {
+        ...event,
+        payload: {
+          ...event.payload,
+          storyId: oneWayHash(event.payload.storyId),
+        },
+        addonVersion,
+      });
+    });
+  }
+
   return channel;
 };
+
+export const previewAnnotations: PresetProperty<'previewAnnotations'> = async (
+  entry = [],
+  options
+) => {
+  checkActionsLoaded(options.configDir);
+  return entry;
+};
+
+export const managerEntries: PresetProperty<'managerEntries'> = async (entry = [], options) => {
+  // Throw an error when addon-interactions is used.
+  // This is done by reading an annotation defined in addon-interactions, which although not ideal,
+  // is a way to handle addon conflict without having to worry about the order of which they are registered
+  const annotation = await options.presets.apply('ADDON_INTERACTIONS_IN_USE', false);
+  if (annotation) {
+    // eslint-disable-next-line local-rules/no-uncategorized-errors
+    const error = new Error(
+      dedent`
+        You have both "@storybook/addon-interactions" and "@storybook/experimental-addon-test" listed as addons in your Storybook config. This is not allowed, as @storybook/experimental-addon-test is a replacement for @storybook/addon-interactions.
+
+        Please remove "@storybook/addon-interactions" from the addons array in your main Storybook config at ${options.configDir} and remove the dependency from your package.json file.
+      `
+    );
+    error.name = 'AddonConflictError';
+    throw error;
+  }
+
+  // for whatever reason seems like the return type of managerEntries is not correct (it expects never instead of string[])
+  return entry as never;
+};
+
+export const staticDirs: PresetPropertyFn<'staticDirs'> = async (values = [], options) => {
+  if (options.configType === 'PRODUCTION') {
+    return values;
+  }
+
+  const coverageDirectory = resolvePathInStorybookCache(COVERAGE_DIRECTORY);
+  await mkdir(coverageDirectory, { recursive: true });
+  return [
+    {
+      from: coverageDirectory,
+      to: '/coverage',
+    },
+    ...values,
+  ];
+};
diff --git a/code/addons/test/src/preview.ts b/code/addons/test/src/preview.ts
new file mode 100644
index 000000000000..345b64ad2296
--- /dev/null
+++ b/code/addons/test/src/preview.ts
@@ -0,0 +1,22 @@
+import type { PlayFunction, StepLabel, StoryContext } from 'storybook/internal/types';
+
+import { instrument } from '@storybook/instrumenter';
+// This makes sure that storybook test loaders are always loaded when addon-interactions is used
+// For 9.0 we want to merge storybook/test and addon-interactions into one addon.
+import '@storybook/test';
+
+export const { step: runStep } = instrument(
+  {
+    // It seems like the label is unused, but the instrumenter has access to it
+    // The context will be bounded later in StoryRender, so that the user can write just:
+    // await step("label", (context) => {
+    //   // labeled step
+    // });
+    step: async (label: StepLabel, play: PlayFunction, context: StoryContext) => play(context),
+  },
+  { intercept: true }
+);
+
+export const parameters = {
+  throwPlayFunctionExceptions: false,
+};
diff --git a/code/addons/test/src/theme.ts b/code/addons/test/src/theme.ts
new file mode 100644
index 000000000000..8e6a63c5ed6d
--- /dev/null
+++ b/code/addons/test/src/theme.ts
@@ -0,0 +1,20 @@
+/** Interaction Testing Theme PLACEHOLDER until SB is updated <3 */
+interface Colors {
+  pure?: {
+    gray?: any;
+  };
+}
+
+export const colors: Colors = {
+  pure: {
+    gray: {
+      500: '#CCCCCC',
+    },
+  },
+};
+
+export const theme = {
+  colors,
+};
+
+export default theme;
diff --git a/code/addons/test/src/utils.ts b/code/addons/test/src/utils.ts
new file mode 100644
index 000000000000..053f4eec4ffe
--- /dev/null
+++ b/code/addons/test/src/utils.ts
@@ -0,0 +1,58 @@
+import { type StorybookTheme, useTheme } from 'storybook/internal/theming';
+import type { StorybookConfig } from 'storybook/internal/types';
+
+import Filter from 'ansi-to-html';
+import stripAnsi from 'strip-ansi';
+
+export function isTestAssertionError(error: unknown) {
+  return isChaiError(error) || isJestError(error);
+}
+
+export function isChaiError(error: unknown) {
+  return (
+    error &&
+    typeof error === 'object' &&
+    'name' in error &&
+    typeof error.name === 'string' &&
+    error.name === 'AssertionError'
+  );
+}
+
+export function isJestError(error: unknown) {
+  return (
+    error &&
+    typeof error === 'object' &&
+    'message' in error &&
+    typeof error.message === 'string' &&
+    stripAnsi(error.message).startsWith('expect(')
+  );
+}
+
+export function createAnsiToHtmlFilter(theme: StorybookTheme) {
+  return new Filter({
+    escapeXML: true,
+    fg: theme.color.defaultText,
+    bg: theme.background.content,
+  });
+}
+
+export function useAnsiToHtmlFilter() {
+  const theme = useTheme();
+  return createAnsiToHtmlFilter(theme);
+}
+
+export function getAddonNames(mainConfig: StorybookConfig): string[] {
+  const addons = mainConfig.addons || [];
+  const addonList = addons.map((addon) => {
+    let name = '';
+    if (typeof addon === 'string') {
+      name = addon;
+    } else if (typeof addon === 'object') {
+      name = addon.name;
+    }
+
+    return name;
+  });
+
+  return addonList.filter((item): item is NonNullable<typeof item> => item != null);
+}
diff --git a/code/addons/test/src/vitest-plugin/global-setup.ts b/code/addons/test/src/vitest-plugin/global-setup.ts
index ac3a5f5a8fcd..8526c48e245e 100644
--- a/code/addons/test/src/vitest-plugin/global-setup.ts
+++ b/code/addons/test/src/vitest-plugin/global-setup.ts
@@ -5,8 +5,22 @@ import type { GlobalSetupContext } from 'vitest/node';
 
 import { logger } from 'storybook/internal/node-logger';
 
+import treeKill from 'tree-kill';
+
 let storybookProcess: ChildProcess | null = null;
 
+const getIsVitestStandaloneRun = () => {
+  try {
+    // @ts-expect-error Suppress TypeScript warning about wrong setting. Doesn't matter, because we don't use tsc for bundling.
+    return (import.meta.env || process?.env).STORYBOOK !== 'true';
+  } catch (e) {
+    return false;
+  }
+};
+
+const isVitestStandaloneRun = getIsVitestStandaloneRun();
+
+// TODO: Not run when executed via Storybook
 const checkStorybookRunning = async (storybookUrl: string): Promise<boolean> => {
   try {
     const response = await fetch(`${storybookUrl}/iframe.html`, { method: 'HEAD' });
@@ -47,23 +61,28 @@ const startStorybookIfNotRunning = async () => {
   }
 };
 
-const killProcess = (process: ChildProcess) => {
-  return new Promise((resolve, reject) => {
-    process.on('close', resolve);
-    process.on('error', reject);
-    process.kill();
-  });
-};
-
 export const setup = async ({ config }: GlobalSetupContext) => {
-  if (config.watch) {
+  if (config.watch && isVitestStandaloneRun) {
     await startStorybookIfNotRunning();
   }
 };
 
 export const teardown = async () => {
-  if (storybookProcess) {
-    logger.verbose('Stopping Storybook process');
-    await killProcess(storybookProcess);
+  if (!storybookProcess) {
+    return;
   }
+  logger.verbose('Stopping Storybook process');
+  await new Promise<void>((resolve, reject) => {
+    // Storybook starts multiple child processes, so we need to kill the whole tree
+    if (storybookProcess?.pid) {
+      treeKill(storybookProcess.pid, 'SIGTERM', (error) => {
+        if (error) {
+          logger.error('Failed to stop Storybook process:');
+          reject(error);
+          return;
+        }
+        resolve();
+      });
+    }
+  });
 };
diff --git a/code/addons/test/src/vitest-plugin/index.ts b/code/addons/test/src/vitest-plugin/index.ts
index e71b54cefe81..180075f9f891 100644
--- a/code/addons/test/src/vitest-plugin/index.ts
+++ b/code/addons/test/src/vitest-plugin/index.ts
@@ -1,22 +1,37 @@
 /* eslint-disable no-underscore-dangle */
-import { join, resolve } from 'node:path';
+import { dirname } from 'node:path';
 
 import type { Plugin } from 'vitest/config';
+import { mergeConfig } from 'vitest/config';
+import type { ViteUserConfig } from 'vitest/config';
 
 import {
   getInterpretedFile,
-  loadAllPresets,
+  normalizeStories,
   validateConfigurationFiles,
 } from 'storybook/internal/common';
+import {
+  StoryIndexGenerator,
+  experimental_loadStorybook,
+  mapStaticDir,
+} from 'storybook/internal/core-server';
 import { readConfig, vitestTransform } from 'storybook/internal/csf-tools';
 import { MainFileMissingError } from 'storybook/internal/server-errors';
-import type { StoriesEntry } from 'storybook/internal/types';
+import type { Presets } from 'storybook/internal/types';
+
+import { join, resolve } from 'pathe';
+import picocolors from 'picocolors';
+import sirv from 'sirv';
+import { convertPathToPattern } from 'tinyglobby';
+import { dedent } from 'ts-dedent';
 
 import type { InternalOptions, UserOptions } from './types';
 
+const WORKING_DIR = process.cwd();
+
 const defaultOptions: UserOptions = {
   storybookScript: undefined,
-  configDir: undefined,
+  configDir: resolve(join(WORKING_DIR, '.storybook')),
   storybookUrl: 'http://localhost:6006',
 };
 
@@ -30,10 +45,34 @@ const extractTagsFromPreview = async (configDir: string) => {
   return previewConfig.getFieldValue(['tags']) ?? [];
 };
 
-export const storybookTest = (options?: UserOptions): Plugin => {
+const getStoryGlobsAndFiles = async (
+  presets: Presets,
+  directories: { configDir: string; workingDir: string }
+) => {
+  const stories = await presets.apply('stories', []);
+  const docs = await presets.apply('docs', {});
+  const indexers = await presets.apply('experimental_indexers', []);
+  const generator = new StoryIndexGenerator(normalizeStories(stories, directories), {
+    ...directories,
+    indexers,
+    docs,
+  });
+  await generator.initialize();
+  return {
+    storiesGlobs: stories,
+    storiesFiles: generator.storyFileNames(),
+  };
+};
+
+const packageDir = dirname(require.resolve('@storybook/experimental-addon-test/package.json'));
+
+export const storybookTest = async (options?: UserOptions): Promise<Plugin> => {
   const finalOptions = {
     ...defaultOptions,
     ...options,
+    configDir: options?.configDir
+      ? resolve(WORKING_DIR, options.configDir)
+      : defaultOptions.configDir,
     tags: {
       include: options?.tags?.include ?? ['test'],
       exclude: options?.tags?.exclude ?? [],
@@ -45,90 +84,226 @@ export const storybookTest = (options?: UserOptions): Plugin => {
     finalOptions.debug = true;
   }
 
-  const storybookUrl = finalOptions.storybookUrl || defaultOptions.storybookUrl;
-
   // To be accessed by the global setup file
-  process.env.__STORYBOOK_URL__ = storybookUrl;
+  process.env.__STORYBOOK_URL__ = finalOptions.storybookUrl;
   process.env.__STORYBOOK_SCRIPT__ = finalOptions.storybookScript;
 
-  let stories: StoriesEntry[];
+  const directories = {
+    configDir: finalOptions.configDir,
+    workingDir: WORKING_DIR,
+  };
 
-  if (!finalOptions.configDir) {
-    finalOptions.configDir = resolve(join(process.cwd(), '.storybook'));
-  } else {
-    finalOptions.configDir = resolve(process.cwd(), finalOptions.configDir);
-  }
+  const { presets } = await experimental_loadStorybook({
+    configDir: finalOptions.configDir,
+    packageJson: {},
+  });
 
-  let previewLevelTags: string[];
+  const [
+    { storiesGlobs, storiesFiles },
+    framework,
+    storybookEnv,
+    viteConfigFromStorybook,
+    staticDirs,
+    previewLevelTags,
+  ] = await Promise.all([
+    getStoryGlobsAndFiles(presets, directories),
+    presets.apply('framework', undefined),
+    presets.apply('env', {}),
+    presets.apply('viteFinal', {}),
+    presets.apply('staticDirs', []),
+    extractTagsFromPreview(finalOptions.configDir),
+  ]);
 
   return {
     name: 'vite-plugin-storybook-test',
     enforce: 'pre',
-    async buildStart() {
-      // evaluate main.js and preview.js so we can extract
-      // stories for autotitle support and tags for tags filtering support
-      const configDir = finalOptions.configDir;
+    async transformIndexHtml(html) {
+      const [headHtmlSnippet, bodyHtmlSnippet] = await Promise.all([
+        presets.apply('previewHead'),
+        presets.apply('previewBody'),
+      ]);
+
+      return html
+        .replace('</head>', `${headHtmlSnippet ?? ''}</head>`)
+        .replace('<body>', `<body>${bodyHtmlSnippet ?? ''}`);
+    },
+    async config(inputConfig_ONLY_MUTATE_WHEN_STRICTLY_NEEDED_OR_YOU_WILL_BE_FIRED) {
+      // ! We're not mutating the input config, instead we're returning a new partial config
+      // ! see https://vite.dev/guide/api-plugin.html#config
       try {
-        await validateConfigurationFiles(configDir);
+        await validateConfigurationFiles(finalOptions.configDir);
       } catch (err) {
         throw new MainFileMissingError({
-          location: configDir,
+          location: finalOptions.configDir,
           source: 'vitest',
         });
       }
 
-      const presets = await loadAllPresets({
-        configDir,
-        corePresets: [],
-        overridePresets: [],
-        packageJson: {},
-      });
+      const frameworkName = typeof framework === 'string' ? framework : framework.name;
 
-      stories = await presets.apply('stories', []);
-      previewLevelTags = await extractTagsFromPreview(configDir);
-    },
-    async config(config) {
       // If we end up needing to know if we are running in browser mode later
       // const isRunningInBrowserMode = config.plugins.find((plugin: Plugin) =>
       //   plugin.name?.startsWith('vitest:browser')
       // )
-      config.test ??= {};
 
-      config.test.env ??= {};
-      config.test.env = {
-        ...config.test.env,
-        // To be accessed by the setup file
-        __STORYBOOK_URL__: storybookUrl,
+      // We signal the test runner that we are not running it via Storybook
+      // We are overriding the environment variable to 'true' if vitest runs via @storybook/addon-test's backend
+      const vitestStorybook = process.env.VITEST_STORYBOOK ?? 'false';
+
+      const baseConfig: Omit<ViteUserConfig, 'plugins'> = {
+        test: {
+          setupFiles: [
+            join(packageDir, 'dist/vitest-plugin/setup-file.mjs'),
+            // if the existing setupFiles is a string, we have to include it otherwise we're overwriting it
+            typeof inputConfig_ONLY_MUTATE_WHEN_STRICTLY_NEEDED_OR_YOU_WILL_BE_FIRED.test
+              ?.setupFiles === 'string' &&
+              inputConfig_ONLY_MUTATE_WHEN_STRICTLY_NEEDED_OR_YOU_WILL_BE_FIRED.test?.setupFiles,
+          ].filter(Boolean) as string[],
+
+          ...(finalOptions.storybookScript
+            ? {
+                globalSetup: [join(packageDir, 'dist/vitest-plugin/global-setup.mjs')],
+              }
+            : {}),
+
+          env: {
+            ...storybookEnv,
+            // To be accessed by the setup file
+            __STORYBOOK_URL__: finalOptions.storybookUrl,
+
+            VITEST_STORYBOOK: vitestStorybook,
+            __VITEST_INCLUDE_TAGS__: finalOptions.tags.include.join(','),
+            __VITEST_EXCLUDE_TAGS__: finalOptions.tags.exclude.join(','),
+            __VITEST_SKIP_TAGS__: finalOptions.tags.skip.join(','),
+          },
+
+          include: storiesFiles
+            .filter((path) => !path.endsWith('.mdx'))
+            .map((path) => convertPathToPattern(path)),
+
+          // if the existing deps.inline is true, we keep it as-is, because it will inline everything
+          ...(inputConfig_ONLY_MUTATE_WHEN_STRICTLY_NEEDED_OR_YOU_WILL_BE_FIRED.test?.server?.deps
+            ?.inline !== true
+            ? {
+                server: {
+                  deps: {
+                    inline: ['@storybook/experimental-addon-test'],
+                  },
+                },
+              }
+            : {}),
+
+          // @ts-expect-error: TODO
+          browser: {
+            ...inputConfig_ONLY_MUTATE_WHEN_STRICTLY_NEEDED_OR_YOU_WILL_BE_FIRED.test?.browser,
+            commands: {
+              getInitialGlobals: () => {
+                const envConfig = JSON.parse(process.env.VITEST_STORYBOOK_CONFIG ?? '{}');
+
+                const isA11yEnabled = process.env.VITEST_STORYBOOK
+                  ? (envConfig.a11y ?? false)
+                  : true;
+
+                return {
+                  a11y: {
+                    manual: !isA11yEnabled,
+                  },
+                };
+              },
+            },
+            // if there is a test.browser config AND test.browser.screenshotFailures is not explicitly set, we set it to false
+            ...(inputConfig_ONLY_MUTATE_WHEN_STRICTLY_NEEDED_OR_YOU_WILL_BE_FIRED.test?.browser &&
+            inputConfig_ONLY_MUTATE_WHEN_STRICTLY_NEEDED_OR_YOU_WILL_BE_FIRED.test.browser
+              .screenshotFailures === undefined
+              ? {
+                  screenshotFailures: false,
+                }
+              : {}),
+          },
+        },
+
+        envPrefix: Array.from(
+          new Set([
+            ...(inputConfig_ONLY_MUTATE_WHEN_STRICTLY_NEEDED_OR_YOU_WILL_BE_FIRED.envPrefix || []),
+            'STORYBOOK_',
+            'VITE_',
+          ])
+        ),
+
+        resolve: {
+          conditions: [
+            'storybook',
+            'stories',
+            'test',
+            // copying straight from https://github.com/vitejs/vite/blob/main/packages/vite/src/node/constants.ts#L60
+            // to avoid having to maintain Vite as a dependency just for this
+            'module',
+            'browser',
+            'development|production',
+          ],
+        },
+
+        optimizeDeps: {
+          include: [
+            '@storybook/experimental-addon-test/**',
+            ...(frameworkName?.includes('react') || frameworkName?.includes('nextjs')
+              ? ['react-dom/test-utils']
+              : []),
+          ],
+        },
+
+        define: {
+          ...(frameworkName?.includes('vue3')
+            ? { __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false' }
+            : {}),
+        },
       };
 
-      if (config.test.browser) {
-        config.test.browser.screenshotFailures ??= false;
-      }
+      // Merge config from storybook with the plugin config
+      const config: Omit<ViteUserConfig, 'plugins'> = mergeConfig(
+        baseConfig,
+        viteConfigFromStorybook
+      );
 
-      config.resolve ??= {};
-      config.resolve.conditions ??= [];
-      config.resolve.conditions.push('storybook', 'stories', 'test');
+      // alert the user of problems
+      if (
+        (inputConfig_ONLY_MUTATE_WHEN_STRICTLY_NEEDED_OR_YOU_WILL_BE_FIRED.test?.include?.length ??
+          0) > 0
+      ) {
+        // remove the user's existing include, because we're replacing it with our own heuristic based on main.ts#stories
+        // @ts-expect-error: Ignore
+        inputConfig_ONLY_MUTATE_WHEN_STRICTLY_NEEDED_OR_YOU_WILL_BE_FIRED.test.include = [];
+        console.log(
+          picocolors.yellow(dedent`
+            Warning: Starting in Storybook 8.5.0-alpha.18, the "test.include" option in Vitest is discouraged in favor of just using the "stories" field in your Storybook configuration.
 
-      config.test.setupFiles ??= [];
-      if (typeof config.test.setupFiles === 'string') {
-        config.test.setupFiles = [config.test.setupFiles];
+            The values you passed to "test.include" will be ignored, please remove them from your Vitest configuration where the Storybook plugin is applied.
+            
+            More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#indexing-behavior-of-storybookexperimental-addon-test-is-changed
+          `)
+        );
       }
-      config.test.setupFiles.push('@storybook/experimental-addon-test/internal/setup-file');
 
-      // when a Storybook script is provided, we spawn Storybook for the user when in watch mode
-      if (finalOptions.storybookScript) {
-        config.test.globalSetup = config.test.globalSetup ?? [];
-        if (typeof config.test.globalSetup === 'string') {
-          config.test.globalSetup = [config.test.globalSetup];
+      // return the new config, it will be deep-merged by vite
+      return config;
+    },
+    async configureServer(server) {
+      if (staticDirs) {
+        for (const staticDir of staticDirs) {
+          try {
+            const { staticPath, targetEndpoint } = mapStaticDir(staticDir, directories.configDir);
+            server.middlewares.use(
+              targetEndpoint,
+              sirv(staticPath, {
+                dev: true,
+                etag: true,
+                extensions: [],
+              })
+            );
+          } catch (e) {
+            console.warn(e);
+          }
         }
-        config.test.globalSetup.push('@storybook/experimental-addon-test/internal/global-setup');
-      }
-
-      config.test.server ??= {};
-      config.test.server.deps ??= {};
-      config.test.server.deps.inline ??= [];
-      if (Array.isArray(config.test.server.deps.inline)) {
-        config.test.server.deps.inline.push('@storybook/experimental-addon-test');
       }
     },
     async transform(code, id) {
@@ -136,13 +311,13 @@ export const storybookTest = (options?: UserOptions): Plugin => {
         return code;
       }
 
-      if (id.match(/(story|stories)\.[cm]?[jt]sx?$/)) {
+      if (storiesFiles.includes(id)) {
         return vitestTransform({
           code,
           fileName: id,
           configDir: finalOptions.configDir,
           tagsFilter: finalOptions.tags,
-          stories,
+          stories: storiesGlobs,
           previewLevelTags,
         });
       }
diff --git a/code/addons/test/src/vitest-plugin/setup-file.test.ts b/code/addons/test/src/vitest-plugin/setup-file.test.ts
index 35720515074e..76e8bd32e56f 100644
--- a/code/addons/test/src/vitest-plugin/setup-file.test.ts
+++ b/code/addons/test/src/vitest-plugin/setup-file.test.ts
@@ -27,7 +27,7 @@ describe('modifyErrorMessage', () => {
 
     expect(task.result?.errors?.[0].message).toMatchInlineSnapshot(`
       "
-      Click to debug the error directly in Storybook: http://localhost:6006/?path=/story/my-story&addonPanel=storybook/interactions/panel
+      Click to debug the error directly in Storybook: http://localhost:6006/?path=/story/my-story&addonPanel=storybook/test/panel
 
       Original error message"
     `);
diff --git a/code/addons/test/src/vitest-plugin/setup-file.ts b/code/addons/test/src/vitest-plugin/setup-file.ts
index ad3db3807121..b48867d19287 100644
--- a/code/addons/test/src/vitest-plugin/setup-file.ts
+++ b/code/addons/test/src/vitest-plugin/setup-file.ts
@@ -30,7 +30,7 @@ export const modifyErrorMessage = ({ task }: { task: Task }) => {
   ) {
     const currentError = task.result.errors[0];
     const storybookUrl = import.meta.env.__STORYBOOK_URL__;
-    const storyUrl = `${storybookUrl}/?path=/story/${meta.storyId}&addonPanel=storybook/interactions/panel`;
+    const storyUrl = `${storybookUrl}/?path=/story/${meta.storyId}&addonPanel=storybook/test/panel`;
     currentError.message = `\n\x1B[34mClick to debug the error directly in Storybook: ${storyUrl}\x1B[39m\n\n${currentError.message}`;
   }
 };
diff --git a/code/addons/test/src/vitest-plugin/test-utils.ts b/code/addons/test/src/vitest-plugin/test-utils.ts
index 632ace561619..a00ff6d7f6fc 100644
--- a/code/addons/test/src/vitest-plugin/test-utils.ts
+++ b/code/addons/test/src/vitest-plugin/test-utils.ts
@@ -3,29 +3,49 @@
 /* eslint-disable no-underscore-dangle */
 import { type RunnerTask, type TaskContext, type TaskMeta, type TestContext } from 'vitest';
 
-import { composeStory } from 'storybook/internal/preview-api';
+import { type Report, composeStory } from 'storybook/internal/preview-api';
 import type { ComponentAnnotations, ComposedStoryFn } from 'storybook/internal/types';
 
+import { server } from '@vitest/browser/context';
+
 import { setViewport } from './viewports';
 
+declare module '@vitest/browser/context' {
+  interface BrowserCommands {
+    getInitialGlobals: () => Promise<Record<string, any>>;
+  }
+}
+
+const { getInitialGlobals } = server.commands;
+
 export const testStory = (
   exportName: string,
   story: ComposedStoryFn,
   meta: ComponentAnnotations,
   skipTags: string[]
 ) => {
-  const composedStory = composeStory(story, meta, undefined, undefined, exportName);
   return async (context: TestContext & TaskContext & { story: ComposedStoryFn }) => {
+    const composedStory = composeStory(
+      story,
+      meta,
+      { initialGlobals: (await getInitialGlobals?.()) ?? {} },
+      undefined,
+      exportName
+    );
     if (composedStory === undefined || skipTags?.some((tag) => composedStory.tags.includes(tag))) {
       context.skip();
     }
 
     context.story = composedStory;
 
-    const _task = context.task as RunnerTask & { meta: TaskMeta & { storyId: string } };
+    const _task = context.task as RunnerTask & {
+      meta: TaskMeta & { storyId: string; reports: Report[] };
+    };
     _task.meta.storyId = composedStory.id;
 
-    await setViewport(composedStory.parameters.viewport);
+    await setViewport(composedStory.parameters, composedStory.globals);
     await composedStory.run();
+
+    _task.meta.reports = composedStory.reporting.reports;
   };
 };
diff --git a/code/addons/test/src/vitest-plugin/viewports.test.ts b/code/addons/test/src/vitest-plugin/viewports.test.ts
index a175077cf649..ba39f0dc1140 100644
--- a/code/addons/test/src/vitest-plugin/viewports.test.ts
+++ b/code/addons/test/src/vitest-plugin/viewports.test.ts
@@ -5,7 +5,12 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 import { page } from '@vitest/browser/context';
 
-import { DEFAULT_VIEWPORT_DIMENSIONS, type ViewportsParam, setViewport } from './viewports';
+import {
+  DEFAULT_VIEWPORT_DIMENSIONS,
+  type ViewportsGlobal,
+  type ViewportsParam,
+  setViewport,
+} from './viewports';
 
 vi.mock('@vitest/browser/context', () => ({
   page: {
@@ -30,121 +35,286 @@ describe('setViewport', () => {
     expect(page.viewport).not.toHaveBeenCalled();
   });
 
-  it('should fall back to DEFAULT_VIEWPORT_DIMENSIONS if defaultViewport does not exist', async () => {
-    const viewportsParam: any = {
-      defaultViewport: 'nonExistentViewport',
-    };
+  describe('globals API', () => {
+    it('should fall back to DEFAULT_VIEWPORT_DIMENSIONS if selected viewport does not exist', async () => {
+      const viewportsGlobal: ViewportsGlobal = {
+        value: 'nonExistentViewport',
+      };
 
-    await setViewport(viewportsParam);
-    expect(page.viewport).toHaveBeenCalledWith(
-      DEFAULT_VIEWPORT_DIMENSIONS.width,
-      DEFAULT_VIEWPORT_DIMENSIONS.height
-    );
-  });
+      await setViewport({}, { viewport: viewportsGlobal });
+      expect(page.viewport).toHaveBeenCalledWith(
+        DEFAULT_VIEWPORT_DIMENSIONS.width,
+        DEFAULT_VIEWPORT_DIMENSIONS.height
+      );
+    });
 
-  it('should set the dimensions of viewport from INITIAL_VIEWPORTS', async () => {
-    const viewportsParam: any = {
-      viewports: INITIAL_VIEWPORTS,
-      // supported by default in addon viewports
-      defaultViewport: 'ipad',
-    };
+    it('should fall back to DEFAULT_VIEWPORT_DIMENSIONS if viewport is disabled, even if a viewport is set', async () => {
+      const viewportsParam: ViewportsParam = {
+        options: INITIAL_VIEWPORTS,
+        disable: true,
+      };
+      const viewportsGlobal: ViewportsGlobal = {
+        value: 'ipad',
+      };
 
-    await setViewport(viewportsParam);
-    expect(page.viewport).toHaveBeenCalledWith(768, 1024);
-  });
+      await setViewport({ viewport: viewportsParam }, { viewport: viewportsGlobal });
+      expect(page.viewport).toHaveBeenCalledWith(
+        DEFAULT_VIEWPORT_DIMENSIONS.width,
+        DEFAULT_VIEWPORT_DIMENSIONS.height
+      );
+    });
+
+    it('should set the dimensions of viewport from INITIAL_VIEWPORTS', async () => {
+      const viewportsParam: ViewportsParam = {
+        options: INITIAL_VIEWPORTS,
+      };
+      const viewportsGlobal: ViewportsGlobal = {
+        // supported by default in addon viewports
+        value: 'ipad',
+      };
 
-  it('should set custom defined viewport dimensions', async () => {
-    const viewportsParam: ViewportsParam = {
-      defaultViewport: 'customViewport',
-      viewports: {
-        customViewport: {
-          name: 'Custom Viewport',
-          type: 'mobile',
-          styles: {
-            width: '800px',
-            height: '600px',
+      await setViewport({ viewport: viewportsParam }, { viewport: viewportsGlobal });
+      expect(page.viewport).toHaveBeenCalledWith(768, 1024);
+    });
+
+    it('should set custom defined viewport dimensions', async () => {
+      const viewportsParam: ViewportsParam = {
+        options: {
+          customViewport: {
+            name: 'Custom Viewport',
+            type: 'mobile',
+            styles: {
+              width: '800px',
+              height: '600px',
+            },
           },
         },
-      },
-    };
+      };
+      const viewportsGlobal: ViewportsGlobal = {
+        value: 'customViewport',
+      };
 
-    await setViewport(viewportsParam);
-    expect(page.viewport).toHaveBeenCalledWith(800, 600);
-  });
+      await setViewport({ viewport: viewportsParam }, { viewport: viewportsGlobal });
+      expect(page.viewport).toHaveBeenCalledWith(800, 600);
+    });
 
-  it('should correctly handle percentage-based dimensions', async () => {
-    const viewportsParam: ViewportsParam = {
-      defaultViewport: 'percentageViewport',
-      viewports: {
-        percentageViewport: {
-          name: 'Percentage Viewport',
-          type: 'desktop',
-          styles: {
-            width: '50%',
-            height: '50%',
+    it('should correctly handle percentage-based dimensions', async () => {
+      const viewportsParam: ViewportsParam = {
+        options: {
+          percentageViewport: {
+            name: 'Percentage Viewport',
+            type: 'desktop',
+            styles: {
+              width: '50%',
+              height: '50%',
+            },
           },
         },
-      },
-    };
+      };
+      const viewportsGlobal: ViewportsGlobal = {
+        value: 'percentageViewport',
+      };
 
-    await setViewport(viewportsParam);
-    expect(page.viewport).toHaveBeenCalledWith(600, 450); // 50% of 1920 and 1080
-  });
+      await setViewport({ viewport: viewportsParam }, { viewport: viewportsGlobal });
+      expect(page.viewport).toHaveBeenCalledWith(600, 450); // 50% of 1920 and 1080
+    });
 
-  it('should correctly handle vw and vh based dimensions', async () => {
-    const viewportsParam: ViewportsParam = {
-      defaultViewport: 'viewportUnits',
-      viewports: {
-        viewportUnits: {
-          name: 'VW/VH Viewport',
-          type: 'desktop',
-          styles: {
-            width: '50vw',
-            height: '50vh',
+    it('should correctly handle vw and vh based dimensions', async () => {
+      const viewportsParam: ViewportsParam = {
+        options: {
+          viewportUnits: {
+            name: 'VW/VH Viewport',
+            type: 'desktop',
+            styles: {
+              width: '50vw',
+              height: '50vh',
+            },
           },
         },
-      },
-    };
+      };
+      const viewportsGlobal: ViewportsGlobal = {
+        value: 'viewportUnits',
+      };
 
-    await setViewport(viewportsParam);
-    expect(page.viewport).toHaveBeenCalledWith(600, 450); // 50% of 1920 and 1080
-  });
+      await setViewport({ viewport: viewportsParam }, { viewport: viewportsGlobal });
+      expect(page.viewport).toHaveBeenCalledWith(600, 450); // 50% of 1920 and 1080
+    });
+
+    it('should correctly handle em based dimensions', async () => {
+      const viewportsParam: ViewportsParam = {
+        options: {
+          viewportUnits: {
+            name: 'em/rem Viewport',
+            type: 'mobile',
+            styles: {
+              width: '20em',
+              height: '40rem',
+            },
+          },
+        },
+      };
+      const viewportsGlobal: ViewportsGlobal = {
+        value: 'viewportUnits',
+      };
+
+      await setViewport({ viewport: viewportsParam }, { viewport: viewportsGlobal });
+      expect(page.viewport).toHaveBeenCalledWith(320, 640); // dimensions * 16
+    });
 
-  it('should correctly handle em based dimensions', async () => {
-    const viewportsParam: ViewportsParam = {
-      defaultViewport: 'viewportUnits',
-      viewports: {
-        viewportUnits: {
-          name: 'em/rem Viewport',
-          type: 'mobile',
-          styles: {
-            width: '20em',
-            height: '40rem',
+    it('should throw an error for unsupported dimension values', async () => {
+      const viewportsParam: ViewportsParam = {
+        options: {
+          invalidViewport: {
+            name: 'Invalid Viewport',
+            type: 'desktop',
+            styles: {
+              width: 'calc(100vw - 20px)',
+              height: '10pc',
+            },
           },
         },
-      },
-    };
+      };
+      const viewportsGlobal: ViewportsGlobal = {
+        value: 'invalidViewport',
+      };
 
-    await setViewport(viewportsParam);
-    expect(page.viewport).toHaveBeenCalledWith(320, 640); // dimensions * 16
+      await expect(setViewport({ viewport: viewportsParam }, { viewport: viewportsGlobal })).rejects
+        .toThrowErrorMatchingInlineSnapshot(`
+      [SB_ADDON_VITEST_0001 (UnsupportedViewportDimensionError): Encountered an unsupported value "calc(100vw - 20px)" when setting the viewport width dimension.
+
+      The Storybook plugin only supports values in the following units:
+      - px, vh, vw, em, rem and %.
+
+      You can either change the viewport for this story to use one of the supported units or skip the test by adding '!test' to the story's tags per https://storybook.js.org/docs/writing-stories/tags]
+    `);
+      expect(page.viewport).not.toHaveBeenCalled();
+    });
   });
 
-  it('should throw an error for unsupported dimension values', async () => {
-    const viewportsParam: ViewportsParam = {
-      defaultViewport: 'invalidViewport',
-      viewports: {
-        invalidViewport: {
-          name: 'Invalid Viewport',
-          type: 'desktop',
-          styles: {
-            width: 'calc(100vw - 20px)',
-            height: '10pc',
+  describe('parameters API (legacy)', () => {
+    it('should no op outside when not in Vitest browser mode', async () => {
+      globalThis.__vitest_browser__ = false;
+
+      await setViewport();
+      expect(page.viewport).not.toHaveBeenCalled();
+    });
+
+    it('should fall back to DEFAULT_VIEWPORT_DIMENSIONS if defaultViewport does not exist', async () => {
+      const viewportsParam: any = {
+        defaultViewport: 'nonExistentViewport',
+      };
+
+      await setViewport({ viewport: viewportsParam });
+      expect(page.viewport).toHaveBeenCalledWith(
+        DEFAULT_VIEWPORT_DIMENSIONS.width,
+        DEFAULT_VIEWPORT_DIMENSIONS.height
+      );
+    });
+
+    it('should set the dimensions of viewport from INITIAL_VIEWPORTS', async () => {
+      const viewportsParam: any = {
+        viewports: INITIAL_VIEWPORTS,
+        // supported by default in addon viewports
+        defaultViewport: 'ipad',
+      };
+
+      await setViewport({ viewport: viewportsParam });
+      expect(page.viewport).toHaveBeenCalledWith(768, 1024);
+    });
+
+    it('should set custom defined viewport dimensions', async () => {
+      const viewportsParam: ViewportsParam = {
+        defaultViewport: 'customViewport',
+        viewports: {
+          customViewport: {
+            name: 'Custom Viewport',
+            type: 'mobile',
+            styles: {
+              width: '800px',
+              height: '600px',
+            },
+          },
+        },
+      };
+
+      await setViewport({ viewport: viewportsParam });
+      expect(page.viewport).toHaveBeenCalledWith(800, 600);
+    });
+
+    it('should correctly handle percentage-based dimensions', async () => {
+      const viewportsParam: ViewportsParam = {
+        defaultViewport: 'percentageViewport',
+        viewports: {
+          percentageViewport: {
+            name: 'Percentage Viewport',
+            type: 'desktop',
+            styles: {
+              width: '50%',
+              height: '50%',
+            },
+          },
+        },
+      };
+
+      await setViewport({ viewport: viewportsParam });
+      expect(page.viewport).toHaveBeenCalledWith(600, 450); // 50% of 1920 and 1080
+    });
+
+    it('should correctly handle vw and vh based dimensions', async () => {
+      const viewportsParam: ViewportsParam = {
+        defaultViewport: 'viewportUnits',
+        viewports: {
+          viewportUnits: {
+            name: 'VW/VH Viewport',
+            type: 'desktop',
+            styles: {
+              width: '50vw',
+              height: '50vh',
+            },
+          },
+        },
+      };
+
+      await setViewport({ viewport: viewportsParam });
+      expect(page.viewport).toHaveBeenCalledWith(600, 450); // 50% of 1920 and 1080
+    });
+
+    it('should correctly handle em based dimensions', async () => {
+      const viewportsParam: ViewportsParam = {
+        defaultViewport: 'viewportUnits',
+        viewports: {
+          viewportUnits: {
+            name: 'em/rem Viewport',
+            type: 'mobile',
+            styles: {
+              width: '20em',
+              height: '40rem',
+            },
           },
         },
-      },
-    };
+      };
 
-    await expect(setViewport(viewportsParam)).rejects.toThrowErrorMatchingInlineSnapshot(`
+      await setViewport({ viewport: viewportsParam });
+      expect(page.viewport).toHaveBeenCalledWith(320, 640); // dimensions * 16
+    });
+
+    it('should throw an error for unsupported dimension values', async () => {
+      const viewportsParam: ViewportsParam = {
+        defaultViewport: 'invalidViewport',
+        viewports: {
+          invalidViewport: {
+            name: 'Invalid Viewport',
+            type: 'desktop',
+            styles: {
+              width: 'calc(100vw - 20px)',
+              height: '10pc',
+            },
+          },
+        },
+      };
+
+      await expect(setViewport({ viewport: viewportsParam })).rejects
+        .toThrowErrorMatchingInlineSnapshot(`
       [SB_ADDON_VITEST_0001 (UnsupportedViewportDimensionError): Encountered an unsupported value "calc(100vw - 20px)" when setting the viewport width dimension.
 
       The Storybook plugin only supports values in the following units:
@@ -152,6 +322,7 @@ describe('setViewport', () => {
 
       You can either change the viewport for this story to use one of the supported units or skip the test by adding '!test' to the story's tags per https://storybook.js.org/docs/writing-stories/tags]
     `);
-    expect(page.viewport).not.toHaveBeenCalled();
+      expect(page.viewport).not.toHaveBeenCalled();
+    });
   });
 });
diff --git a/code/addons/test/src/vitest-plugin/viewports.ts b/code/addons/test/src/vitest-plugin/viewports.ts
index c779eb3a6633..905ee44fc937 100644
--- a/code/addons/test/src/vitest-plugin/viewports.ts
+++ b/code/addons/test/src/vitest-plugin/viewports.ts
@@ -1,7 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 import { UnsupportedViewportDimensionError } from 'storybook/internal/preview-errors';
 
-import { page } from '@vitest/browser/context';
+import type { Globals, Parameters } from '@storybook/csf';
 
 import { MINIMAL_VIEWPORTS } from '../../../viewport/src/defaults';
 import type { ViewportMap, ViewportStyles } from '../../../viewport/src/types';
@@ -12,8 +12,16 @@ declare global {
 }
 
 export interface ViewportsParam {
-  defaultViewport: string;
-  viewports: ViewportMap;
+  defaultViewport?: string;
+  viewports?: ViewportMap;
+  options?: ViewportMap;
+  disable?: boolean;
+  disabled?: boolean;
+}
+
+export interface ViewportsGlobal {
+  value?: string;
+  disable?: boolean;
 }
 
 export const DEFAULT_VIEWPORT_DIMENSIONS = {
@@ -47,8 +55,22 @@ const parseDimension = (value: string, dimension: 'width' | 'height') => {
   }
 };
 
-export const setViewport = async (viewportsParam: ViewportsParam = {} as ViewportsParam) => {
-  const defaultViewport = viewportsParam.defaultViewport;
+export const setViewport = async (parameters: Parameters = {}, globals: Globals = {}) => {
+  let defaultViewport;
+  const viewportsParam: ViewportsParam = parameters.viewport ?? {};
+  const viewportsGlobal: ViewportsGlobal = globals.viewport ?? {};
+  const isDisabled = viewportsParam.disable || viewportsParam.disabled;
+
+  // Support new setting from globals, else use the one from parameters
+  if (viewportsGlobal.value && !isDisabled) {
+    defaultViewport = viewportsGlobal.value;
+  } else if (!isDisabled) {
+    defaultViewport = viewportsParam.defaultViewport;
+  }
+
+  const { page } = await import('@vitest/browser/context').catch(() => ({
+    page: null,
+  }));
 
   if (!page || !globalThis.__vitest_browser__) {
     return;
@@ -57,12 +79,13 @@ export const setViewport = async (viewportsParam: ViewportsParam = {} as Viewpor
   const viewports = {
     ...MINIMAL_VIEWPORTS,
     ...viewportsParam.viewports,
+    ...viewportsParam.options,
   };
 
   let viewportWidth = DEFAULT_VIEWPORT_DIMENSIONS.width;
   let viewportHeight = DEFAULT_VIEWPORT_DIMENSIONS.height;
 
-  if (defaultViewport in viewports) {
+  if (defaultViewport && defaultViewport in viewports) {
     const styles = viewports[defaultViewport].styles as ViewportStyles;
     if (styles?.width && styles?.height) {
       const { width, height } = styles;
diff --git a/code/addons/test/template/stories/basics.stories.ts b/code/addons/test/template/stories/basics.stories.ts
new file mode 100644
index 000000000000..2db5f0e016f3
--- /dev/null
+++ b/code/addons/test/template/stories/basics.stories.ts
@@ -0,0 +1,134 @@
+import { global as globalThis } from '@storybook/global';
+import {
+  expect,
+  fireEvent,
+  fn,
+  userEvent,
+  waitFor,
+  waitForElementToBeRemoved,
+  within,
+} from '@storybook/test';
+
+export default {
+  component: globalThis.Components.Form,
+  args: {
+    onSuccess: fn(),
+  },
+  globals: {
+    sb_theme: 'light',
+  },
+};
+
+export const Validation = {
+  play: async (context) => {
+    const { args, canvasElement, step } = context;
+    const canvas = within(canvasElement);
+
+    await step('Submit', async () => fireEvent.click(canvas.getByRole('button')));
+
+    await expect(args.onSuccess).not.toHaveBeenCalled();
+  },
+};
+
+export const Type = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByTestId('value'), 'foobar');
+  },
+};
+
+export const Step = {
+  play: async ({ step }) => {
+    await step('Enter value', Type.play);
+  },
+};
+
+export const TypeAndClear = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByTestId('value'), 'initial value');
+    await userEvent.clear(canvas.getByTestId('value'));
+    await userEvent.type(canvas.getByTestId('value'), 'final value');
+  },
+};
+
+export const Callback = {
+  play: async ({ args, canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step('Enter value', Type.play);
+
+    await step('Submit', async () => {
+      await fireEvent.click(canvas.getByRole('button'));
+    });
+
+    await expect(args.onSuccess).toHaveBeenCalled();
+  },
+};
+
+// NOTE: of course you can use `findByText()` to implicitly waitFor, but we want
+// an explicit test here
+export const SyncWaitFor = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step('Submit form', Callback.play);
+    await waitFor(() => canvas.getByText('Completed!!'));
+  },
+};
+
+export const AsyncWaitFor = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step('Submit form', Callback.play);
+    await waitFor(async () => canvas.getByText('Completed!!'));
+  },
+};
+
+export const WaitForElementToBeRemoved = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await step('SyncWaitFor play fn', SyncWaitFor.play);
+    await waitForElementToBeRemoved(() => canvas.queryByText('Completed!!'), {
+      timeout: 2000,
+    });
+  },
+};
+
+export const WithLoaders = {
+  loaders: [async () => new Promise((resolve) => setTimeout(resolve, 2000))],
+  play: async ({ step }) => {
+    await step('Submit form', Callback.play);
+  },
+};
+
+const UserEventSetup = {
+  play: async (context) => {
+    const { args, canvasElement, step } = context;
+    const user = userEvent.setup();
+    const canvas = within(canvasElement);
+    await step('Select and type on input using user-event v14 setup', async () => {
+      const input = canvas.getByRole('textbox');
+      await user.click(input);
+      await user.type(input, 'Typing ...');
+    });
+    await step('Tab and press enter on submit button', async () => {
+      await user.pointer([
+        { keys: '[TouchA>]', target: canvas.getByRole('textbox') },
+        { keys: '[/TouchA]' },
+      ]);
+      const submitButton = await canvas.findByRole('button');
+
+      if (navigator.userAgent.toLowerCase().includes('firefox')) {
+        // user event has a few issues on firefox, therefore we do it differently
+        await fireEvent.click(submitButton);
+      } else {
+        await user.tab();
+        await user.keyboard('{enter}');
+        await expect(submitButton).toHaveFocus();
+      }
+
+      await expect(args.onSuccess).toHaveBeenCalled();
+    });
+  },
+};
+
+export { UserEventSetup };
diff --git a/code/addons/test/template/stories/unhandled-errors.stories.ts b/code/addons/test/template/stories/unhandled-errors.stories.ts
new file mode 100644
index 000000000000..b9be0df743e0
--- /dev/null
+++ b/code/addons/test/template/stories/unhandled-errors.stories.ts
@@ -0,0 +1,26 @@
+import { global as globalThis } from '@storybook/global';
+import { userEvent, within } from '@storybook/test';
+
+export default {
+  component: globalThis.Components.Button,
+  args: {
+    label: 'Button',
+    // onClick: fn(), <-- this is intentionally missing to trigger an unhandled error
+  },
+  argTypes: {
+    onClick: { type: 'function' },
+  },
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    chromatic: { disable: true },
+  },
+  tags: ['!test', '!vitest'],
+};
+
+export const Default = {
+  play: async (context) => {
+    const { args, canvasElement } = context;
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button'));
+  },
+};
diff --git a/code/addons/test/tsconfig.json b/code/addons/test/tsconfig.json
index e4e3d59266c4..e8a15eafa0bd 100644
--- a/code/addons/test/tsconfig.json
+++ b/code/addons/test/tsconfig.json
@@ -4,7 +4,8 @@
     "rootDir": "../../../",
     "module": "Preserve",
     "moduleResolution": "Bundler",
-    "types": ["vitest"]
+    "types": ["vitest"],
+    "strict": true
   },
   "include": ["src/**/*", "./typings.d.ts"]
 }
diff --git a/code/addons/test/typings.d.ts b/code/addons/test/typings.d.ts
index ec1d9d7d3808..d5de3255b176 100644
--- a/code/addons/test/typings.d.ts
+++ b/code/addons/test/typings.d.ts
@@ -5,3 +5,5 @@ interface ImportMetaEnv {
 interface ImportMeta {
   readonly env: ImportMetaEnv;
 }
+
+declare var STORYBOOK_BUILDER: string | undefined;
diff --git a/code/addons/themes/README.md b/code/addons/themes/README.md
index 0c71eb3ce159..1f58f259485c 100644
--- a/code/addons/themes/README.md
+++ b/code/addons/themes/README.md
@@ -12,7 +12,7 @@ Requires Storybook 7.0 or later. If you need to add it to your Storybook, you ca
 npm i -D @storybook/addon-themes
 ```
 
-Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project):
+Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
 
 ```js
 export default {
@@ -36,7 +36,7 @@ Don't see your favorite tool listed? Don't worry! That doesn't mean this addon i
 
 ### ❗️ Overriding theme
 
-If you want to override your theme for a particular component or story, you can use the `themes.themeOverride` parameter.
+If you want to override your theme for a particular component or story, you can use the `globals.theme` parameter.
 
 ```js
 import React from 'react';
diff --git a/code/addons/themes/docs/api.md b/code/addons/themes/docs/api.md
index a45818ab724e..d9c2d2285fc1 100644
--- a/code/addons/themes/docs/api.md
+++ b/code/addons/themes/docs/api.md
@@ -109,6 +109,9 @@ export const myCustomDecorator =
 
 ### `useThemeParameters`
 
+(⛔️ **Deprecated**)
+_Do not use this hook anymore. Access the theme directly via the context instead e.g. `context.parameters.themes`_
+
 Returns the theme parameters for this addon.
 
 ```js
@@ -152,14 +155,14 @@ Let's use Vuetify as an example. Vuetify uses it's own global state to know whic
 import { DecoratorHelpers } from '@storybook/addon-themes';
 import { useTheme } from 'vuetify';
 
-const { initializeThemeState, pluckThemeFromContext, useThemeParameters } = DecoratorHelpers;
+const { initializeThemeState, pluckThemeFromContext } = DecoratorHelpers;
 
 export const withVuetifyTheme = ({ themes, defaultTheme }) => {
   initializeThemeState(Object.keys(themes), defaultTheme);
 
   return (story, context) => {
     const selectedTheme = pluckThemeFromContext(context);
-    const { themeOverride } = useThemeParameters();
+    const { themeOverride } = context.parameters.themes ?? {};
 
     const selected = themeOverride || selectedTheme || defaultTheme;
 
diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json
index 87c826276318..acfd4e156a91 100644
--- a/code/addons/themes/package.json
+++ b/code/addons/themes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Switch between multiple themes for you components in Storybook",
   "keywords": [
     "css",
@@ -59,7 +59,7 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
diff --git a/code/addons/themes/postinstall.js b/code/addons/themes/postinstall.js
index 87175ac9cbc1..93f2e6159179 100644
--- a/code/addons/themes/postinstall.js
+++ b/code/addons/themes/postinstall.js
@@ -5,6 +5,7 @@ const PACKAGE_MANAGER_TO_COMMAND = {
   pnpm: ['pnpm', 'dlx'],
   yarn1: ['npx'],
   yarn2: ['yarn', 'dlx'],
+  bun: ['bunx'],
 };
 
 const selectPackageManagerCommand = (packageManager) => PACKAGE_MANAGER_TO_COMMAND[packageManager];
diff --git a/code/addons/themes/project.json b/code/addons/themes/project.json
index ea17cd02b7b9..48d062a5ffe8 100644
--- a/code/addons/themes/project.json
+++ b/code/addons/themes/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "themes",
+  "name": "addon-themes",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "targets": {
     "build": {}
diff --git a/code/addons/themes/src/decorators/class-name.decorator.tsx b/code/addons/themes/src/decorators/class-name.decorator.tsx
index 4bc56202f038..42b403a5b382 100644
--- a/code/addons/themes/src/decorators/class-name.decorator.tsx
+++ b/code/addons/themes/src/decorators/class-name.decorator.tsx
@@ -1,7 +1,8 @@
 import { useEffect } from 'storybook/internal/preview-api';
 import type { DecoratorFunction, Renderer } from 'storybook/internal/types';
 
-import { initializeThemeState, pluckThemeFromContext, useThemeParameters } from './helpers';
+import { PARAM_KEY } from '../constants';
+import { initializeThemeState, pluckThemeFromContext } from './helpers';
 
 export interface ClassNameStrategyConfiguration {
   themes: Record<string, string>;
@@ -22,7 +23,7 @@ export const withThemeByClassName = <TRenderer extends Renderer = Renderer>({
   initializeThemeState(Object.keys(themes), defaultTheme);
 
   return (storyFn, context) => {
-    const { themeOverride } = useThemeParameters();
+    const { themeOverride } = context.parameters[PARAM_KEY] ?? {};
     const selected = pluckThemeFromContext(context);
 
     useEffect(() => {
diff --git a/code/addons/themes/src/decorators/data-attribute.decorator.tsx b/code/addons/themes/src/decorators/data-attribute.decorator.tsx
index 6d4b1cfe26f9..55e4f258bfd2 100644
--- a/code/addons/themes/src/decorators/data-attribute.decorator.tsx
+++ b/code/addons/themes/src/decorators/data-attribute.decorator.tsx
@@ -1,7 +1,8 @@
 import { useEffect } from 'storybook/internal/preview-api';
 import type { DecoratorFunction, Renderer } from 'storybook/internal/types';
 
-import { initializeThemeState, pluckThemeFromContext, useThemeParameters } from './helpers';
+import { PARAM_KEY } from '../constants';
+import { initializeThemeState, pluckThemeFromContext } from './helpers';
 
 export interface DataAttributeStrategyConfiguration {
   themes: Record<string, string>;
@@ -22,7 +23,7 @@ export const withThemeByDataAttribute = <TRenderer extends Renderer = any>({
 }: DataAttributeStrategyConfiguration): DecoratorFunction<TRenderer> => {
   initializeThemeState(Object.keys(themes), defaultTheme);
   return (storyFn, context) => {
-    const { themeOverride } = useThemeParameters();
+    const { themeOverride } = context.parameters[PARAM_KEY] ?? {};
     const selected = pluckThemeFromContext(context);
 
     useEffect(() => {
diff --git a/code/addons/themes/src/decorators/helpers.ts b/code/addons/themes/src/decorators/helpers.ts
index 237b0943568c..97c70dd1f0a4 100644
--- a/code/addons/themes/src/decorators/helpers.ts
+++ b/code/addons/themes/src/decorators/helpers.ts
@@ -1,6 +1,9 @@
+import { deprecate } from 'storybook/internal/client-logger';
 import { addons, useParameter } from 'storybook/internal/preview-api';
 import type { StoryContext } from 'storybook/internal/types';
 
+import dedent from 'ts-dedent';
+
 import type { ThemeParameters } from '../constants';
 import { DEFAULT_THEME_PARAMETERS, GLOBAL_KEY, PARAM_KEY, THEMING_EVENTS } from '../constants';
 
@@ -12,8 +15,18 @@ export function pluckThemeFromContext({ globals }: StoryContext): string {
   return globals[GLOBAL_KEY] || '';
 }
 
-export function useThemeParameters(): ThemeParameters {
-  return useParameter<ThemeParameters>(PARAM_KEY, DEFAULT_THEME_PARAMETERS) as ThemeParameters;
+export function useThemeParameters(context?: StoryContext): ThemeParameters {
+  deprecate(
+    dedent`The useThemeParameters function is deprecated. Please access parameters via the context directly instead e.g.
+    - const { themeOverride } = context.parameters.themes ?? {};
+    `
+  );
+
+  if (!context) {
+    return useParameter<ThemeParameters>(PARAM_KEY, DEFAULT_THEME_PARAMETERS) as ThemeParameters;
+  }
+
+  return context.parameters[PARAM_KEY] ?? DEFAULT_THEME_PARAMETERS;
 }
 
 export function initializeThemeState(themeNames: string[], defaultTheme: string) {
diff --git a/code/addons/themes/src/decorators/provider.decorator.tsx b/code/addons/themes/src/decorators/provider.decorator.tsx
index 8985a9773fad..41964e7afcfc 100644
--- a/code/addons/themes/src/decorators/provider.decorator.tsx
+++ b/code/addons/themes/src/decorators/provider.decorator.tsx
@@ -4,7 +4,8 @@ import React from 'react';
 import { useMemo } from 'storybook/internal/preview-api';
 import type { DecoratorFunction, Renderer } from 'storybook/internal/types';
 
-import { initializeThemeState, pluckThemeFromContext, useThemeParameters } from './helpers';
+import { PARAM_KEY } from '../constants';
+import { initializeThemeState, pluckThemeFromContext } from './helpers';
 
 type Theme = Record<string, any>;
 type ThemeMap = Record<string, Theme>;
@@ -32,7 +33,8 @@ export const withThemeFromJSXProvider = <TRenderer extends Renderer = any>({
 
   // eslint-disable-next-line react/display-name
   return (storyFn, context) => {
-    const { themeOverride } = useThemeParameters();
+    // eslint-disable-next-line react/destructuring-assignment
+    const { themeOverride } = context.parameters[PARAM_KEY] ?? {};
     const selected = pluckThemeFromContext(context);
 
     const theme = useMemo(() => {
diff --git a/code/addons/toolbars/README.md b/code/addons/toolbars/README.md
index dcb9b9c4deef..dd70fb3ee7c5 100644
--- a/code/addons/toolbars/README.md
+++ b/code/addons/toolbars/README.md
@@ -6,19 +6,19 @@ The Toolbars addon controls global story rendering options from [Storybook's](ht
 - set your components' internationalization (i18n) locale
 - configure just about anything in Storybook that makes use of a global variable
 
-[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
+[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
 
 ![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/toolbars/docs/hero.gif)
 
 ## Installation
 
-Toolbars is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
+Toolbars is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
 
 ```sh
 npm i -D @storybook/addon-toolbars
 ```
 
-Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project):
+Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
 
 ```js
 export default {
@@ -28,7 +28,7 @@ export default {
 
 ## Usage
 
-The usage is documented in the [documentation](https://storybook.js.org/docs/react/essentials/toolbars-and-globals).
+The usage is documented in the [documentation](https://storybook.js.org/docs/essentials/toolbars-and-globals).
 
 ## FAQs
 
@@ -40,6 +40,6 @@ The primary difference between the two packages is that `addon-toolbars` makes u
 
 - **Standardization**. Args are built into Storybook in 6.x. Since `addon-toolbars` is based on args, you don't need to learn any addon-specific APIs to use it.
 
-- **Ergonomics**. Global args are easy to consume [in stories](https://storybook.js.org/docs/react/essentials/toolbars-and-globals#consuming-globals-from-within-a-story), in [Storybook Docs](https://github.com/storybookjs/storybook/tree/next/code/addons/docs), or even in other addons.
+- **Ergonomics**. Global args are easy to consume [in stories](https://storybook.js.org/docs/essentials/toolbars-and-globals#consuming-globals-from-within-a-story), in [Storybook Docs](https://github.com/storybookjs/storybook/tree/next/code/addons/docs), or even in other addons.
 
 * **Framework compatibility**. Args are completely framework-independent, so `addon-toolbars` is compatible with React, Vue 3, Angular, etc. out of the box with no framework logic needed in the addon.
diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json
index 87d838129b7b..2799a7a8d7d7 100644
--- a/code/addons/toolbars/package.json
+++ b/code/addons/toolbars/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Create your own toolbar items that control story rendering",
   "keywords": [
     "addon",
diff --git a/code/addons/toolbars/project.json b/code/addons/toolbars/project.json
index aa7476d22fd8..382c8c0ed590 100644
--- a/code/addons/toolbars/project.json
+++ b/code/addons/toolbars/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "toolbars",
+  "name": "addon-toolbars",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {
diff --git a/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx b/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx
index 829829de4b25..37ae26d1aebf 100644
--- a/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx
+++ b/code/addons/toolbars/src/components/ToolbarMenuListItem.tsx
@@ -21,7 +21,9 @@ export const ToolbarMenuListItem = ({
   disabled,
   currentValue,
 }: ToolbarMenuListItemProps) => {
-  const Icon = icon && <Icons style={{ opacity: 1 }} icon={icon} />;
+  const Icon = icon && (
+    <Icons style={{ opacity: 1 }} icon={icon} __suppressDeprecationWarning={true} />
+  );
 
   const Item: TooltipLinkListLink = {
     id: value ?? '_reset',
diff --git a/code/addons/viewport/README.md b/code/addons/viewport/README.md
index 7975688745fd..4393724c431c 100644
--- a/code/addons/viewport/README.md
+++ b/code/addons/viewport/README.md
@@ -2,19 +2,19 @@
 
 Storybook Viewport Addon allows your stories to be displayed in different sizes and layouts in [Storybook](https://storybook.js.org). This helps build responsive components inside of Storybook.
 
-[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
+[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
 
 ![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/viewport/docs/viewport.png)
 
 ## Installation
 
-Viewport is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
+Viewport is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
 
 ```sh
 npm i -D @storybook/addon-viewport
 ```
 
-Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project):
+Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
 
 ```js
 export default {
@@ -26,4 +26,4 @@ You should now be able to see the viewport addon icon in the toolbar at the top
 
 ## Usage
 
-The usage is documented in the [documentation](https://storybook.js.org/docs/react/essentials/viewport).
+The usage is documented in the [documentation](https://storybook.js.org/docs/essentials/viewport).
diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json
index d1c6c85fe942..a41b266ffaf0 100644
--- a/code/addons/viewport/package.json
+++ b/code/addons/viewport/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",
@@ -55,7 +55,7 @@
   },
   "devDependencies": {
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.3.2"
diff --git a/code/addons/viewport/project.json b/code/addons/viewport/project.json
index 94fc39e648d0..3d5b204b276a 100644
--- a/code/addons/viewport/project.json
+++ b/code/addons/viewport/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "viewport",
+  "name": "addon-viewport",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {
diff --git a/code/addons/viewport/src/components/Tool.tsx b/code/addons/viewport/src/components/Tool.tsx
index 52b8713c7919..cf3170a8c48a 100644
--- a/code/addons/viewport/src/components/Tool.tsx
+++ b/code/addons/viewport/src/components/Tool.tsx
@@ -139,7 +139,7 @@ const Pure = React.memo(function PureTool(props: PureProps) {
                   onHide();
                 },
               })),
-            ]}
+            ].flat()}
           />
         )}
         closeOnOutsideClick
diff --git a/code/builders/builder-vite/input/iframe.html b/code/builders/builder-vite/input/iframe.html
index 23c280c02242..8980a034168d 100644
--- a/code/builders/builder-vite/input/iframe.html
+++ b/code/builders/builder-vite/input/iframe.html
@@ -64,7 +64,6 @@
     <!-- [BODY HTML SNIPPET HERE] -->
     <div id="storybook-root"></div>
     <div id="storybook-docs"></div>
-    <script type="module" src="./sb-preview/runtime.js"></script>
     <script type="module" src="/virtual:/@storybook/builder-vite/vite-app.js"></script>
   </body>
 </html>
diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json
index 94fde0bf8cfb..5fd9910d7fab 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "A plugin to run and build Storybooks with Vite",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
   "bugs": {
@@ -44,39 +44,26 @@
   },
   "dependencies": {
     "@storybook/csf-plugin": "workspace:*",
-    "@types/find-cache-dir": "^3.2.1",
     "browser-assert": "^1.2.1",
-    "es-module-lexer": "^1.5.0",
-    "express": "^4.19.2",
-    "find-cache-dir": "^3.0.0",
-    "magic-string": "^0.30.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "@types/express": "^4.17.21",
+    "@types/find-cache-dir": "^3.2.1",
     "@types/node": "^22.0.0",
+    "es-module-lexer": "^1.5.0",
+    "find-cache-dir": "^3.0.0",
     "glob": "^10.0.0",
+    "knitwork": "^1.1.0",
+    "magic-string": "^0.30.0",
+    "pathe": "^1.1.2",
+    "polka": "^1.0.0-next.28",
+    "sirv": "^2.0.4",
     "slash": "^5.0.0",
-    "typescript": "^5.3.2",
     "vite": "^4.0.4"
   },
   "peerDependencies": {
-    "@preact/preset-vite": "*",
     "storybook": "workspace:^",
-    "typescript": ">= 4.3.x",
-    "vite": "^4.0.0 || ^5.0.0",
-    "vite-plugin-glimmerx": "*"
-  },
-  "peerDependenciesMeta": {
-    "@preact/preset-vite": {
-      "optional": true
-    },
-    "typescript": {
-      "optional": true
-    },
-    "vite-plugin-glimmerx": {
-      "optional": true
-    }
+    "vite": "^4.0.0 || ^5.0.0 || ^6.0.0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/code/builders/builder-vite/src/build.ts b/code/builders/builder-vite/src/build.ts
index 581ce74a7569..9782081c0465 100644
--- a/code/builders/builder-vite/src/build.ts
+++ b/code/builders/builder-vite/src/build.ts
@@ -24,11 +24,7 @@ export async function build(options: Options) {
       outDir: options.outputDir,
       emptyOutDir: false, // do not clean before running Vite build - Storybook has already added assets in there!
       rollupOptions: {
-        external: [
-          // Do not try to bundle the Storybook runtime, it is copied into the output dir after the build.
-          './sb-preview/runtime.js',
-          /\.\/sb-common-assets\/.*\.woff2/,
-        ],
+        external: [/\.\/sb-common-assets\/.*\.woff2/],
       },
       ...(options.test
         ? {
@@ -39,9 +35,22 @@ export async function build(options: Options) {
           }
         : {}),
     },
-  }).build;
+  } as InlineConfig).build;
 
-  const finalConfig = await presets.apply('viteFinal', config, options);
+  const finalConfig = (await presets.apply('viteFinal', config, options)) as InlineConfig;
+
+  if (options.features?.developmentModeForBuild) {
+    finalConfig.plugins?.push({
+      name: 'storybook:define-env',
+      config: () => {
+        return {
+          define: {
+            'process.env.NODE_ENV': JSON.stringify('development'),
+          },
+        };
+      },
+    });
+  }
 
   const turbosnapPluginName = 'rollup-plugin-turbosnap';
   const hasTurbosnapPlugin =
diff --git a/code/builders/builder-vite/src/codegen-importfn-script.test.ts b/code/builders/builder-vite/src/codegen-importfn-script.test.ts
new file mode 100644
index 000000000000..4d3ce5bcb79a
--- /dev/null
+++ b/code/builders/builder-vite/src/codegen-importfn-script.test.ts
@@ -0,0 +1,56 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { toImportFn } from './codegen-importfn-script';
+
+describe('toImportFn', () => {
+  it('should correctly map story paths to import functions for absolute paths on Linux', async () => {
+    const root = '/absolute/path';
+    const stories = ['/absolute/path/to/story1.js', '/absolute/path/to/story2.js'];
+
+    const result = await toImportFn(root, stories);
+
+    expect(result).toMatchInlineSnapshot(`
+      "const importers = {
+        "./to/story1.js": () => import("/absolute/path/to/story1.js"),
+        "./to/story2.js": () => import("/absolute/path/to/story2.js")
+      };
+
+      export async function importFn(path) {
+        return await importers[path]();
+      }"
+    `);
+  });
+
+  it('should correctly map story paths to import functions for absolute paths on Windows', async () => {
+    const root = 'C:\\absolute\\path';
+    const stories = ['C:\\absolute\\path\\to\\story1.js', 'C:\\absolute\\path\\to\\story2.js'];
+
+    const result = await toImportFn(root, stories);
+
+    expect(result).toMatchInlineSnapshot(`
+      "const importers = {
+        "./to/story1.js": () => import("C:/absolute/path/to/story1.js"),
+        "./to/story2.js": () => import("C:/absolute/path/to/story2.js")
+      };
+
+      export async function importFn(path) {
+        return await importers[path]();
+      }"
+    `);
+  });
+
+  it('should handle an empty array of stories', async () => {
+    const root = '/absolute/path';
+    const stories: string[] = [];
+
+    const result = await toImportFn(root, stories);
+
+    expect(result).toMatchInlineSnapshot(`
+      "const importers = {};
+
+      export async function importFn(path) {
+        return await importers[path]();
+      }"
+    `);
+  });
+});
diff --git a/code/builders/builder-vite/src/codegen-importfn-script.ts b/code/builders/builder-vite/src/codegen-importfn-script.ts
index 0853b0549628..4b118ad9cc51 100644
--- a/code/builders/builder-vite/src/codegen-importfn-script.ts
+++ b/code/builders/builder-vite/src/codegen-importfn-script.ts
@@ -1,7 +1,9 @@
-import { relative } from 'node:path';
-
 import type { Options } from 'storybook/internal/types';
 
+import { genDynamicImport, genImport, genObjectFromRawEntries } from 'knitwork';
+import { normalize, relative } from 'pathe';
+import { dedent } from 'ts-dedent';
+
 import { listStories } from './list-stories';
 
 /**
@@ -21,34 +23,33 @@ function toImportPath(relativePath: string) {
 /**
  * This function takes an array of stories and creates a mapping between the stories' relative paths
  * to the working directory and their dynamic imports. The import is done in an asynchronous
- * function to delay loading. It then creates a function, `importFn(path)`, which resolves a path to
- * an import function and this is called by Storybook to fetch a story dynamically when needed.
+ * function to delay loading and to allow Vite to split the code into smaller chunks. It then
+ * creates a function, `importFn(path)`, which resolves a path to an import function and this is
+ * called by Storybook to fetch a story dynamically when needed.
  *
  * @param stories An array of absolute story paths.
  */
-async function toImportFn(stories: string[]) {
-  const { normalizePath } = await import('vite');
+export async function toImportFn(root: string, stories: string[]) {
   const objectEntries = stories.map((file) => {
-    const relativePath = normalizePath(relative(process.cwd(), file));
+    const relativePath = relative(root, file);
 
-    return `  '${toImportPath(relativePath)}': async () => import('/@fs/${file}')`;
+    return [toImportPath(relativePath), genDynamicImport(normalize(file))] as [string, string];
   });
 
-  return `
-    const importers = {
-      ${objectEntries.join(',\n')}
-    };
+  return dedent`
+    const importers = ${genObjectFromRawEntries(objectEntries)};
 
     export async function importFn(path) {
-        return importers[path]();
+      return await importers[path]();
     }
   `;
 }
 
-export async function generateImportFnScriptCode(options: Options) {
+export async function generateImportFnScriptCode(options: Options): Promise<string> {
   // First we need to get an array of stories and their absolute paths.
   const stories = await listStories(options);
 
   // We can then call toImportFn to create a function that can be used to load each story dynamically.
-  return (await toImportFn(stories)).trim();
+  // eslint-disable-next-line @typescript-eslint/return-await
+  return await toImportFn(options.projectRoot || process.cwd(), stories);
 }
diff --git a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
index 7ad50afec12f..dffb3144d67a 100644
--- a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
+++ b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts
@@ -27,7 +27,7 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
       .map(
         (previewAnnotation, index) =>
           // Prefer the updated module from an HMR update, otherwise import the original module
-          `hmrPreviewAnnotationModules.at(${index}) ?? import('${previewAnnotation}')`
+          `hmrPreviewAnnotationModules[${index}] ?? import('${previewAnnotation}')`
       )
       .join(',\n')}])
     return composeConfigs(configs);
@@ -67,10 +67,15 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
    * @todo Inline variable and remove `noinspection`
    */
   const code = `
-  import { composeConfigs, PreviewWeb, ClientApi } from 'storybook/internal/preview-api';
+  import { setup } from 'storybook/internal/preview/runtime';
   import '${SB_VIRTUAL_FILES.VIRTUAL_ADDON_SETUP_FILE}';
+
+  setup();
+ 
+  import { composeConfigs, PreviewWeb, ClientApi } from 'storybook/internal/preview-api';
   import { importFn } from '${SB_VIRTUAL_FILES.VIRTUAL_STORIES_FILE}';
   
+  
     ${getPreviewAnnotationsFunction}
 
     window.__STORYBOOK_PREVIEW__ = window.__STORYBOOK_PREVIEW__ || new PreviewWeb(importFn, getProjectAnnotations);
diff --git a/code/builders/builder-vite/src/index.ts b/code/builders/builder-vite/src/index.ts
index 0962e1676e4e..7051cc116363 100644
--- a/code/builders/builder-vite/src/index.ts
+++ b/code/builders/builder-vite/src/index.ts
@@ -1,13 +1,9 @@
 // noinspection JSUnusedGlobalSymbols
-import { cp, readFile } from 'node:fs/promises';
-import { join, parse } from 'node:path';
+import { readFile } from 'node:fs/promises';
 
 import { NoStatsForViteDevError } from 'storybook/internal/server-errors';
-import type { Options } from 'storybook/internal/types';
+import type { Middleware, Options } from 'storybook/internal/types';
 
-import type { RequestHandler } from 'express';
-import express from 'express';
-import { corePath } from 'storybook/core-path';
 import type { ViteDevServer } from 'vite';
 
 import { build as viteBuild } from './build';
@@ -20,16 +16,18 @@ export { hasVitePlugins } from './utils/has-vite-plugins';
 
 export * from './types';
 
-function iframeMiddleware(options: Options, server: ViteDevServer): RequestHandler {
+function iframeMiddleware(options: Options, server: ViteDevServer): Middleware {
   return async (req, res, next) => {
-    if (!req.url.match(/^\/iframe\.html($|\?)/)) {
+    if (!req.url || !req.url.match(/^\/iframe\.html($|\?)/)) {
       next();
       return;
     }
+    // the base isn't used for anything, but it's required by the URL constructor
+    const url = new URL(req.url, 'http://localhost:6006');
 
     // We need to handle `html-proxy` params for style tag HMR https://github.com/storybookjs/builder-vite/issues/266#issuecomment-1055677865
     // e.g. /iframe.html?html-proxy&index=0.css
-    if (req.query['html-proxy'] !== undefined) {
+    if (url.searchParams.has('html-proxy')) {
       next();
       return;
     }
@@ -40,7 +38,9 @@ function iframeMiddleware(options: Options, server: ViteDevServer): RequestHandl
     const generated = await transformIframeHtml(indexHtml, options);
     const transformed = await server.transformIndexHtml('/iframe.html', generated);
     res.setHeader('Content-Type', 'text/html');
-    res.status(200).send(transformed);
+    res.statusCode = 200;
+    res.write(transformed);
+    res.end();
   };
 }
 
@@ -58,11 +58,6 @@ export const start: ViteBuilder['start'] = async ({
 }) => {
   server = await createViteServer(options as Options, devServer);
 
-  const previewResolvedDir = join(corePath, 'dist/preview');
-  const previewDirOrigin = previewResolvedDir;
-
-  router.use(`/sb-preview`, express.static(previewDirOrigin, { immutable: true, maxAge: '5m' }));
-
   router.use(iframeMiddleware(options as Options, server));
   router.use(server.middlewares);
 
@@ -78,24 +73,5 @@ export const start: ViteBuilder['start'] = async ({
 };
 
 export const build: ViteBuilder['build'] = async ({ options }) => {
-  const viteCompilation = viteBuild(options as Options);
-
-  const previewResolvedDir = join(corePath, 'dist/preview');
-  const previewDirOrigin = previewResolvedDir;
-  const previewDirTarget = join(options.outputDir || '', `sb-preview`);
-
-  const previewFiles = cp(previewDirOrigin, previewDirTarget, {
-    filter: (src) => {
-      const { ext } = parse(src);
-      if (ext) {
-        return ext === '.js';
-      }
-      return true;
-    },
-    recursive: true,
-  });
-
-  const [out] = await Promise.all([viteCompilation, previewFiles]);
-
-  return out;
+  return viteBuild(options as Options);
 };
diff --git a/code/builders/builder-vite/src/list-stories.ts b/code/builders/builder-vite/src/list-stories.ts
index 5eefb9b8fb74..d5b417f2553c 100644
--- a/code/builders/builder-vite/src/list-stories.ts
+++ b/code/builders/builder-vite/src/list-stories.ts
@@ -3,6 +3,7 @@ import { isAbsolute, join } from 'node:path';
 import { commonGlobOptions, normalizeStories } from 'storybook/internal/common';
 import type { Options } from 'storybook/internal/types';
 
+// eslint-disable-next-line depend/ban-dependencies
 import { glob } from 'glob';
 import slash from 'slash';
 
diff --git a/code/builders/builder-vite/src/optimizeDeps.ts b/code/builders/builder-vite/src/optimizeDeps.ts
index cbade7a268a6..74dd0090be42 100644
--- a/code/builders/builder-vite/src/optimizeDeps.ts
+++ b/code/builders/builder-vite/src/optimizeDeps.ts
@@ -13,16 +13,58 @@ const INCLUDE_CANDIDATES = [
   '@emotion/core',
   '@emotion/is-prop-valid',
   '@emotion/styled',
+  '@storybook/addon-a11y/preview',
+  '@storybook/addon-backgrounds/preview',
+  '@storybook/addon-designs/blocks',
+  '@storybook/addon-docs/preview',
+  '@storybook/addon-essentials/actions/preview',
+  '@storybook/addon-essentials/actions/preview',
+  '@storybook/addon-essentials/backgrounds/preview',
+  '@storybook/addon-essentials/docs/preview',
+  '@storybook/addon-essentials/highlight/preview',
+  '@storybook/addon-essentials/measure/preview',
+  '@storybook/addon-essentials/outline/preview',
+  '@storybook/addon-essentials/viewport/preview',
+  '@storybook/addon-highlight/preview',
+  '@storybook/addon-links/preview',
+  '@storybook/addon-measure/preview',
+  '@storybook/addon-outline/preview',
+  '@storybook/addon-themes',
+  '@storybook/addon-themes/preview',
+  '@storybook/addon-viewport',
+  '@storybook/addon-viewport/preview',
+  '@storybook/blocks',
+  '@storybook/components',
+  '@storybook/experimental-addon-test/preview',
+  '@storybook/experimental-nextjs-vite/dist/preview.mjs',
+  '@storybook/html',
+  '@storybook/html/dist/entry-preview-docs.mjs',
+  '@storybook/html/dist/entry-preview.mjs',
+  '@storybook/preact',
+  '@storybook/preact/dist/entry-preview-docs.mjs',
+  '@storybook/preact/dist/entry-preview.mjs',
   '@storybook/react > acorn-jsx',
   '@storybook/react',
+  '@storybook/react/dist/entry-preview-docs.mjs',
+  '@storybook/react/dist/entry-preview-rsc.mjs',
+  '@storybook/react/dist/entry-preview.mjs',
   '@storybook/svelte',
+  '@storybook/svelte/dist/entry-preview-docs.mjs',
+  '@storybook/svelte/dist/entry-preview.mjs',
+  '@storybook/theming',
   '@storybook/vue3',
+  '@storybook/vue3/dist/entry-preview-docs.mjs',
+  '@storybook/vue3/dist/entry-preview.mjs',
+  '@storybook/web-components',
+  '@storybook/web-components/dist/entry-preview-docs.mjs',
+  '@storybook/web-components/dist/entry-preview.mjs',
   'acorn-jsx',
   'acorn-walk',
   'acorn',
   'airbnb-js-shims',
   'ansi-to-html',
   'axe-core',
+  'chromatic/isChromatic',
   'color-convert',
   'deep-object-diff',
   'doctrine',
@@ -73,6 +115,8 @@ const INCLUDE_CANDIDATES = [
   'lodash/upperFirst.js',
   'lodash/upperFirst',
   'memoizerific',
+  'mockdate',
+  'msw-storybook-addon',
   'overlayscrollbars',
   'polished',
   'prettier/parser-babel',
@@ -100,8 +144,11 @@ const INCLUDE_CANDIDATES = [
   'refractor/lang/typescript.js',
   'refractor/lang/yaml.js',
   'regenerator-runtime/runtime.js',
+  'sb-original/default-loader',
+  'sb-original/image-context',
   'slash',
   'store2',
+  'storybook/internal/preview/runtime',
   'synchronous-promise',
   'telejson',
   'ts-dedent',
diff --git a/code/builders/builder-vite/src/plugins/code-generator-plugin.ts b/code/builders/builder-vite/src/plugins/code-generator-plugin.ts
index 77509b97cf93..79dba3844060 100644
--- a/code/builders/builder-vite/src/plugins/code-generator-plugin.ts
+++ b/code/builders/builder-vite/src/plugins/code-generator-plugin.ts
@@ -50,7 +50,7 @@ export function codeGeneratorPlugin(options: Options): Plugin {
     },
     config(config, { command }) {
       // If we are building the static distribution, add iframe.html as an entry.
-      // In development mode, it's not an entry - instead, we use an express middleware
+      // In development mode, it's not an entry - instead, we use a middleware
       // to serve iframe.html. The reason is that Vite's dev server (at the time of writing)
       // does not support virtual files as entry points.
       if (command === 'build') {
diff --git a/code/builders/builder-vite/src/vite-config.test.ts b/code/builders/builder-vite/src/vite-config.test.ts
index d88da0305397..973746cfbbe6 100644
--- a/code/builders/builder-vite/src/vite-config.test.ts
+++ b/code/builders/builder-vite/src/vite-config.test.ts
@@ -10,6 +10,7 @@ import { commonConfig } from './vite-config';
 vi.mock('vite', async (importOriginal) => ({
   ...(await importOriginal<typeof import('vite')>()),
   loadConfigFromFile: vi.fn(async () => ({})),
+  defaultClientConditions: undefined,
 }));
 const loadConfigFromFileMock = vi.mocked(loadConfigFromFile);
 
diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts
index e3eff12d038e..de8f12ed8822 100644
--- a/code/builders/builder-vite/src/vite-config.ts
+++ b/code/builders/builder-vite/src/vite-config.ts
@@ -47,27 +47,29 @@ export async function commonConfig(
   _type: PluginConfigType
 ): Promise<ViteInlineConfig> {
   const configEnv = _type === 'development' ? configEnvServe : configEnvBuild;
-  const { loadConfigFromFile, mergeConfig } = await import('vite');
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore this property only exists in Vite 6
+  const { loadConfigFromFile, mergeConfig, defaultClientConditions = [] } = await import('vite');
 
   const { viteConfigPath } = await getBuilderOptions<BuilderOptions>(options);
 
-  const projectRoot = resolve(options.configDir, '..');
+  options.projectRoot = options.projectRoot || resolve(options.configDir, '..');
 
   // I destructure away the `build` property from the user's config object
   // I do this because I can contain config that breaks storybook, such as we had in a lit project.
   // If the user needs to configure the `build` they need to do so in the viteFinal function in main.js.
   const { config: { build: buildProperty = undefined, ...userConfig } = {} } =
-    (await loadConfigFromFile(configEnv, viteConfigPath, projectRoot)) ?? {};
+    (await loadConfigFromFile(configEnv, viteConfigPath, options.projectRoot)) ?? {};
 
   const sbConfig: InlineConfig = {
     configFile: false,
     cacheDir: resolvePathInStorybookCache('sb-vite', options.cacheKey),
-    root: projectRoot,
+    root: options.projectRoot,
     // Allow storybook deployed as subfolder.  See https://github.com/storybookjs/builder-vite/issues/238
     base: './',
     plugins: await pluginConfig(options),
     resolve: {
-      conditions: ['storybook', 'stories', 'test'],
+      conditions: ['storybook', 'stories', 'test', ...defaultClientConditions],
       preserveSymlinks: isPreservingSymlinks(),
       alias: {
         assert: require.resolve('browser-assert'),
@@ -119,11 +121,5 @@ export async function pluginConfig(options: Options) {
     pluginWebpackStats({ workingDir: process.cwd() }),
   ] as PluginOption[];
 
-  // TODO: framework doesn't exist, should move into framework when/if built
-  if (frameworkName === '@storybook/glimmerx-vite') {
-    const plugin = require('vite-plugin-glimmerx/index.cjs');
-    plugins.push(plugin.default());
-  }
-
   return plugins;
 }
diff --git a/code/builders/builder-vite/src/vite-server.ts b/code/builders/builder-vite/src/vite-server.ts
index ff235aa93833..e61cd63636f0 100644
--- a/code/builders/builder-vite/src/vite-server.ts
+++ b/code/builders/builder-vite/src/vite-server.ts
@@ -14,8 +14,6 @@ export async function createViteServer(options: Options, devServer: Server) {
 
   const config = {
     ...commonCfg,
-    // Needed in Vite 5: https://github.com/storybookjs/storybook/issues/25256
-    assetsInclude: getAssetsInclude(commonCfg, ['/sb-preview/**']),
     // Set up dev server
     server: {
       middlewareMode: true,
diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json
index 2d4c5330bd01..3e5c45e92f98 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -41,7 +41,7 @@
       "node": "./dist/loaders/export-order-loader.js",
       "require": "./dist/loaders/export-order-loader.js"
     },
-    "./templates/virtualModuleModernEntry.js.handlebars": "./templates/virtualModuleModernEntry.js.handlebars",
+    "./templates/virtualModuleModernEntry.js": "./templates/virtualModuleModernEntry.js",
     "./templates/preview.ejs": "./templates/preview.ejs",
     "./templates/virtualModuleEntry.template.js": "./templates/virtualModuleEntry.template.js",
     "./templates/virtualModuleStory.template.js": "./templates/virtualModuleStory.template.js",
@@ -72,7 +72,6 @@
     "constants-browserify": "^1.0.0",
     "css-loader": "^6.7.1",
     "es-module-lexer": "^1.5.0",
-    "express": "^4.19.2",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "html-webpack-plugin": "^5.5.0",
     "magic-string": "^0.30.5",
@@ -95,6 +94,7 @@
     "@types/terser-webpack-plugin": "^5.2.0",
     "@types/webpack-hot-middleware": "^2.25.6",
     "pretty-hrtime": "^1.0.3",
+    "sirv": "^2.0.4",
     "slash": "^5.0.0",
     "typescript": "^5.3.2"
   },
diff --git a/code/builders/builder-webpack5/src/index.ts b/code/builders/builder-webpack5/src/index.ts
index ffc11812562b..71be9982973a 100644
--- a/code/builders/builder-webpack5/src/index.ts
+++ b/code/builders/builder-webpack5/src/index.ts
@@ -12,17 +12,19 @@ import type { Builder, Options } from 'storybook/internal/types';
 
 import { checkWebpackVersion } from '@storybook/core-webpack';
 
-import express from 'express';
 import prettyTime from 'pretty-hrtime';
+import sirv from 'sirv';
 import { corePath } from 'storybook/core-path';
 import type { Configuration, Stats, StatsOptions } from 'webpack';
-import webpack, { ProgressPlugin } from 'webpack';
+import webpackDep, { DefinePlugin, ProgressPlugin } from 'webpack';
 import webpackDevMiddleware from 'webpack-dev-middleware';
 import webpackHotMiddleware from 'webpack-hot-middleware';
 
 export * from './types';
 export * from './preview/virtual-module-mapping';
 
+export const WebpackDefinePlugin = DefinePlugin;
+
 export const printDuration = (startTime: [number, number]) =>
   prettyTime(process.hrtime(startTime))
     .replace(' ms', ' milliseconds')
@@ -51,8 +53,8 @@ export const executor = {
   get: async (options: Options) => {
     const version = ((await options.presets.apply('webpackVersion')) || '5') as string;
     const webpackInstance =
-      (await options.presets.apply<{ default: typeof webpack }>('webpackInstance'))?.default ||
-      webpack;
+      (await options.presets.apply<{ default: typeof webpackDep }>('webpackInstance'))?.default ||
+      webpackDep;
     checkWebpackVersion({ version }, '5', 'builder-webpack5');
     return webpackInstance;
   },
@@ -137,7 +139,7 @@ const starter: StarterFunction = async function* starterGeneratorFn({
   }
 
   yield;
-  const modulesCount = (await options.cache?.get('modulesCount').catch(() => {})) || 1000;
+  const modulesCount = await options.cache?.get('modulesCount', 1000);
   let totalModules: number;
   let value = 0;
 
@@ -147,7 +149,7 @@ const starter: StarterFunction = async function* starterGeneratorFn({
       const progress = { value, message: message.charAt(0).toUpperCase() + message.slice(1) };
       if (message === 'building') {
         // arg3 undefined in webpack5
-        const counts = (arg3 && arg3.match(/(\d+)\/(\d+)/)) || [];
+        const counts = (arg3 && arg3.match(/entries (\d+)\/(\d+)/)) || [];
         const complete = parseInt(counts[1], 10);
         const total = parseInt(counts[2], 10);
         if (!Number.isNaN(complete) && !Number.isNaN(total)) {
@@ -180,10 +182,14 @@ const starter: StarterFunction = async function* starterGeneratorFn({
   compilation = webpackDevMiddleware(compiler, middlewareOptions);
 
   const previewResolvedDir = join(corePath, 'dist/preview');
-  const previewDirOrigin = previewResolvedDir;
-
-  router.use(`/sb-preview`, express.static(previewDirOrigin, { immutable: true, maxAge: '5m' }));
-
+  router.use(
+    '/sb-preview',
+    sirv(previewResolvedDir, {
+      maxAge: 300000,
+      dev: true,
+      immutable: true,
+    })
+  );
   router.use(compilation);
   router.use(webpackHotMiddleware(compiler, { log: false }));
 
@@ -289,10 +295,8 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
   });
 
   const previewResolvedDir = join(corePath, 'dist/preview');
-  const previewDirOrigin = previewResolvedDir;
   const previewDirTarget = join(options.outputDir || '', `sb-preview`);
-
-  const previewFiles = cp(previewDirOrigin, previewDirTarget, {
+  const previewFiles = cp(previewResolvedDir, previewDirTarget, {
     filter: (src) => {
       const { ext } = parse(src);
       if (ext) {
diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
index ea8b55d4973c..aa9e34c73afe 100644
--- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -72,7 +72,7 @@ export default async (
     docsOptions,
     entries,
     nonNormalizedStories,
-    modulesCount = 1000,
+    modulesCount,
     build,
     tagsOptions,
   ] = await Promise.all([
@@ -86,7 +86,7 @@ export default async (
     presets.apply('docs'),
     presets.apply<string[]>('entries', []),
     presets.apply('stories', []),
-    options.cache?.get('modulesCount').catch(() => {}),
+    options.cache?.get('modulesCount', 1000),
     options.presets.apply('build'),
     presets.apply('tags', {}),
   ]);
@@ -195,7 +195,9 @@ export default async (
       }),
       new DefinePlugin({
         ...stringifyProcessEnvs(envs),
-        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+        NODE_ENV: JSON.stringify(
+          features?.developmentModeForBuild && isProd ? 'development' : process.env.NODE_ENV
+        ),
       }),
       new ProvidePlugin({ process: require.resolve('process/browser.js') }),
       isProd ? null : new HotModuleReplacementPlugin(),
diff --git a/code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts b/code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts
index 2b78d926f12e..ec55e40c5291 100644
--- a/code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts
+++ b/code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts
@@ -2,7 +2,6 @@ import { join, resolve } from 'node:path';
 
 import {
   getBuilderOptions,
-  handlebars,
   loadPreviewOrConfigFile,
   normalizeStories,
   readTemplate,
@@ -51,18 +50,28 @@ export const getVirtualModules = async (options: Options) => {
   const needPipelinedImport = !!builderOptions.lazyCompilation && !isProd;
   virtualModules[storiesPath] = toImportFn(stories, { needPipelinedImport });
   const configEntryPath = resolve(join(workingDir, 'storybook-config-entry.js'));
-  virtualModules[configEntryPath] = handlebars(
+  virtualModules[configEntryPath] = (
     await readTemplate(
-      require.resolve(
-        '@storybook/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars'
-      )
-    ),
-    {
-      storiesFilename,
-      previewAnnotations,
-    }
+      require.resolve('@storybook/builder-webpack5/templates/virtualModuleModernEntry.js')
+    )
+  )
+    .replaceAll(`'{{storiesFilename}}'`, `'./${storiesFilename}'`)
+    .replaceAll(
+      `'{{previewAnnotations}}'`,
+      previewAnnotations
+        .filter(Boolean)
+        .map((entry) => `'${entry}'`)
+        .join(',')
+    )
+    .replaceAll(
+      `'{{previewAnnotations_requires}}'`,
+      previewAnnotations
+        .filter(Boolean)
+        .map((entry) => `require('${entry}')`)
+        .join(',')
+    )
     // We need to double escape `\` for webpack. We may have some in windows paths
-  ).replace(/\\/g, '\\\\');
+    .replace(/\\/g, '\\\\');
   entries.push(configEntryPath);
 
   return {
diff --git a/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js b/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js
new file mode 100644
index 000000000000..4ae082c43b2e
--- /dev/null
+++ b/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js
@@ -0,0 +1,33 @@
+import { createBrowserChannel } from 'storybook/internal/channels';
+import { PreviewWeb, addons, composeConfigs } from 'storybook/internal/preview-api';
+
+import { global } from '@storybook/global';
+
+import { importFn } from '{{storiesFilename}}';
+
+const getProjectAnnotations = () => composeConfigs(['{{previewAnnotations_requires}}']);
+
+const channel = createBrowserChannel({ page: 'preview' });
+addons.setChannel(channel);
+
+if (global.CONFIG_TYPE === 'DEVELOPMENT') {
+  window.__STORYBOOK_SERVER_CHANNEL__ = channel;
+}
+
+const preview = new PreviewWeb(importFn, getProjectAnnotations);
+
+window.__STORYBOOK_PREVIEW__ = preview;
+window.__STORYBOOK_STORY_STORE__ = preview.storyStore;
+window.__STORYBOOK_ADDONS_CHANNEL__ = channel;
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept('{{storiesFilename}}', () => {
+    // importFn has changed so we need to patch the new one in
+    preview.onStoriesChanged({ importFn });
+  });
+
+  import.meta.webpackHot.accept(['{{previewAnnotations}}'], () => {
+    // getProjectAnnotations has changed so we need to patch the new one in
+    preview.onGetProjectAnnotationsChanged({ getProjectAnnotations });
+  });
+}
diff --git a/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars b/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars
deleted file mode 100644
index 14fa7585ec3b..000000000000
--- a/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars
+++ /dev/null
@@ -1,34 +0,0 @@
-import { global } from '@storybook/global';
-
-import { ClientApi, PreviewWeb, addons, composeConfigs } from 'storybook/internal/preview-api';
-import { createBrowserChannel } from 'storybook/internal/channels';
-
-import { importFn } from './{{storiesFilename}}';
-
-const getProjectAnnotations = () =>
-composeConfigs([{{#each previewAnnotations}}require('{{this}}'),{{/each}}]);
-
-const channel = createBrowserChannel({ page: 'preview' });
-addons.setChannel(channel);
-
-if (global.CONFIG_TYPE === 'DEVELOPMENT'){
-window.__STORYBOOK_SERVER_CHANNEL__ = channel;
-}
-
-const preview = new PreviewWeb(importFn, getProjectAnnotations);
-
-window.__STORYBOOK_PREVIEW__ = preview;
-window.__STORYBOOK_STORY_STORE__ = preview.storyStore;
-window.__STORYBOOK_ADDONS_CHANNEL__ = channel;
-
-if (import.meta.webpackHot) {
-import.meta.webpackHot.accept('./{{storiesFilename}}', () => {
-// importFn has changed so we need to patch the new one in
-preview.onStoriesChanged({ importFn });
-});
-
-import.meta.webpackHot.accept([{{#each previewAnnotations}}'{{this}}',{{/each}}], () => {
-// getProjectAnnotations has changed so we need to patch the new one in
-preview.onGetProjectAnnotationsChanged({ getProjectAnnotations });
-});
-}
\ No newline at end of file
diff --git a/code/core/assets/server/addon.tsconfig.json b/code/core/assets/server/addon.tsconfig.json
index 9161d5ff8254..38452bcdfa20 100644
--- a/code/core/assets/server/addon.tsconfig.json
+++ b/code/core/assets/server/addon.tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "jsx": "react-jsx",
+    "jsx": "react",
     "jsxImportSource": "react"
   }
 }
diff --git a/code/core/assets/server/base-preview-body.html b/code/core/assets/server/base-preview-body.html
index b6314fd75900..adbe363c2b5a 100644
--- a/code/core/assets/server/base-preview-body.html
+++ b/code/core/assets/server/base-preview-body.html
@@ -93,7 +93,7 @@ <h1 id="error-message"></h1>
         <strong>Missing Context/Providers</strong>: You can use decorators to supply specific
         contexts or providers, which are sometimes necessary for components to render correctly. For
         detailed instructions on using decorators, please visit the
-        <a href="https://storybook.js.org/docs/react/writing-stories/decorators"
+        <a href="https://storybook.js.org/docs/writing-stories/decorators"
           >Decorators documentation</a
         >.
       </li>
diff --git a/code/core/package.json b/code/core/package.json
index 893e2c0234f2..8771b8f76c1e 100644
--- a/code/core/package.json
+++ b/code/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -37,6 +37,16 @@
       "import": "./dist/client-logger/index.js",
       "require": "./dist/client-logger/index.cjs"
     },
+    "./theming": {
+      "types": "./dist/theming/index.d.ts",
+      "import": "./dist/theming/index.js",
+      "require": "./dist/theming/index.cjs"
+    },
+    "./theming/create": {
+      "types": "./dist/theming/create.d.ts",
+      "import": "./dist/theming/create.js",
+      "require": "./dist/theming/create.cjs"
+    },
     "./core-server": {
       "types": "./dist/core-server/index.d.ts",
       "import": "./dist/core-server/index.js",
@@ -122,16 +132,6 @@
       "import": "./dist/components/index.js",
       "require": "./dist/components/index.cjs"
     },
-    "./theming": {
-      "types": "./dist/theming/index.d.ts",
-      "import": "./dist/theming/index.js",
-      "require": "./dist/theming/index.cjs"
-    },
-    "./theming/create": {
-      "types": "./dist/theming/create.d.ts",
-      "import": "./dist/theming/create.js",
-      "require": "./dist/theming/create.cjs"
-    },
     "./docs-tools": {
       "types": "./dist/docs-tools/index.d.ts",
       "import": "./dist/docs-tools/index.js",
@@ -167,6 +167,12 @@
       "import": "./dist/cli/bin/index.js",
       "require": "./dist/cli/bin/index.cjs"
     },
+    "./preview/runtime": {
+      "import": "./dist/preview/runtime.js"
+    },
+    "./manager/globals-runtime": {
+      "import": "./dist/manager/globals-runtime.js"
+    },
     "./package.json": "./package.json"
   },
   "main": "dist/index.cjs",
@@ -183,17 +189,14 @@
       "client-logger": [
         "./dist/client-logger/index.d.ts"
       ],
-      "core-server": [
-        "./dist/core-server/index.d.ts"
-      ],
-      "core-server/presets/common-preset": [
-        "./dist/core-server/presets/common-preset.d.ts"
+      "theming": [
+        "./dist/theming/index.d.ts"
       ],
-      "core-server/presets/common-manager": [
-        "./dist/core-server/presets/common-manager.d.ts"
+      "theming/create": [
+        "./dist/theming/create.d.ts"
       ],
-      "core-server/presets/common-override-preset": [
-        "./dist/core-server/presets/common-override-preset.d.ts"
+      "core-server": [
+        "./dist/core-server/index.d.ts"
       ],
       "core-events": [
         "./dist/core-events/index.d.ts"
@@ -237,12 +240,6 @@
       "components": [
         "./dist/components/index.d.ts"
       ],
-      "theming": [
-        "./dist/theming/index.d.ts"
-      ],
-      "theming/create": [
-        "./dist/theming/create.d.ts"
-      ],
       "docs-tools": [
         "./dist/docs-tools/index.d.ts"
       ],
@@ -277,13 +274,11 @@
     "prep": "jiti ./scripts/prep.ts"
   },
   "dependencies": {
-    "@storybook/csf": "^0.1.11",
-    "@types/express": "^4.17.21",
+    "@storybook/csf": "0.1.12",
     "better-opn": "^3.0.2",
     "browser-assert": "^1.2.1",
-    "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0",
+    "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0",
     "esbuild-register": "^3.5.0",
-    "express": "^4.19.2",
     "jsdoc-type-pratt-parser": "^4.0.0",
     "process": "^0.11.10",
     "recast": "^0.23.5",
@@ -307,30 +302,28 @@
     "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
     "@ndelangen/get-tarball": "^3.0.7",
+    "@polka/compression": "^1.0.0-next.28",
     "@popperjs/core": "^2.6.0",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-scroll-area": "1.2.0-rc.7",
     "@radix-ui/react-slot": "^1.0.2",
     "@storybook/docs-mdx": "4.0.0-next.1",
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.10",
+    "@storybook/icons": "^1.2.12",
     "@tanstack/react-virtual": "^3.3.0",
     "@testing-library/react": "^14.0.0",
-    "@types/compression": "^1.7.0",
     "@types/cross-spawn": "^6.0.2",
     "@types/detect-port": "^1.3.0",
     "@types/diff": "^5.0.9",
     "@types/ejs": "^3.1.1",
     "@types/find-cache-dir": "^5.0.0",
     "@types/js-yaml": "^4.0.5",
-    "@types/lodash": "^4.14.167",
     "@types/node": "^22.0.0",
     "@types/npmlog": "^7.0.0",
     "@types/picomatch": "^2.3.0",
     "@types/prettier": "^3.0.0",
     "@types/pretty-hrtime": "^1.0.0",
     "@types/prompts": "^2.0.9",
-    "@types/qs": "^6",
     "@types/react-syntax-highlighter": "11.0.5",
     "@types/react-transition-group": "^4",
     "@types/semver": "^7.5.8",
@@ -344,12 +337,9 @@
     "boxen": "^7.1.1",
     "browser-dtector": "^3.4.0",
     "camelcase": "^8.0.0",
-    "chai": "^4.4.1",
-    "chalk": "^5.3.0",
     "cli-table3": "^0.6.1",
     "commander": "^12.1.0",
     "comment-parser": "^1.4.1",
-    "compression": "^1.7.4",
     "copy-to-clipboard": "^3.3.1",
     "cross-spawn": "^7.0.3",
     "css": "^3.0.0",
@@ -361,13 +351,12 @@
     "diff": "^5.2.0",
     "downshift": "^9.0.4",
     "ejs": "^3.1.10",
+    "es-toolkit": "^1.22.0",
     "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0",
     "esbuild-plugin-alias": "^0.2.1",
     "execa": "^8.0.1",
-    "express": "^4.19.2",
     "fd-package-json": "^1.2.0",
     "fetch-retry": "^6.0.0",
-    "file-system-cache": "^2.4.4",
     "find-cache-dir": "^5.0.0",
     "find-up": "^7.0.0",
     "flush-promises": "^1.0.2",
@@ -375,24 +364,24 @@
     "get-npm-tarball-url": "^2.0.3",
     "glob": "^10.0.0",
     "globby": "^14.0.1",
-    "handlebars": "^4.7.7",
     "jiti": "^1.21.6",
     "js-yaml": "^4.1.0",
     "lazy-universal-dotenv": "^4.0.0",
     "leven": "^4.0.0",
-    "lodash": "^4.17.21",
     "markdown-to-jsx": "^7.4.5",
     "memfs": "^4.11.1",
     "memoizerific": "^1.11.3",
     "nanoid": "^4.0.2",
     "npmlog": "^7.0.0",
     "open": "^8.4.0",
+    "picocolors": "^1.1.0",
     "picomatch": "^2.3.0",
+    "picoquery": "^1.4.0",
     "polished": "^4.2.2",
+    "polka": "^1.0.0-next.28",
     "prettier": "^3.2.5",
     "pretty-hrtime": "^1.0.3",
     "prompts": "^2.4.0",
-    "qs": "^6.10.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
@@ -405,6 +394,7 @@
     "react-transition-group": "^4.4.5",
     "require-from-string": "^2.0.2",
     "resolve-from": "^5.0.0",
+    "sirv": "^2.0.4",
     "slash": "^5.0.0",
     "source-map": "^0.7.4",
     "store2": "^2.14.2",
@@ -420,6 +410,14 @@
     "use-resize-observer": "^9.1.0",
     "watchpack": "^2.2.0"
   },
+  "peerDependencies": {
+    "prettier": "^2 || ^3"
+  },
+  "peerDependenciesMeta": {
+    "prettier": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public"
   },
diff --git a/code/core/scripts/entries.ts b/code/core/scripts/entries.ts
index afe8acddd84d..bcd1d1b94572 100644
--- a/code/core/scripts/entries.ts
+++ b/code/core/scripts/entries.ts
@@ -9,6 +9,9 @@ export const getEntries = (cwd: string) => {
     define('src/node-logger/index.ts', ['node'], true),
     define('src/client-logger/index.ts', ['browser', 'node'], true),
 
+    define('src/theming/index.ts', ['browser', 'node'], true, ['react']),
+    define('src/theming/create.ts', ['browser', 'node'], true, ['react']),
+
     define('src/core-server/index.ts', ['node'], true),
     define('src/core-server/presets/common-preset.ts', ['node'], false),
     define('src/core-server/presets/common-manager.ts', ['browser'], false),
@@ -28,9 +31,13 @@ export const getEntries = (cwd: string) => {
     define('src/preview-api/index.ts', ['browser', 'node'], true),
     define('src/manager-api/index.ts', ['browser', 'node'], true, ['react']),
     define('src/router/index.ts', ['browser', 'node'], true, ['react']),
-    define('src/components/index.ts', ['browser', 'node'], true, ['react', 'react-dom']),
-    define('src/theming/index.ts', ['browser', 'node'], true, ['react']),
-    define('src/theming/create.ts', ['browser', 'node'], true, ['react']),
+    define(
+      'src/components/index.ts',
+      ['browser', 'node'],
+      true,
+      ['react', 'react-dom'],
+      ['prettier'] // the syntax highlighter uses prettier/standalone to format the code
+    ),
     define('src/docs-tools/index.ts', ['browser', 'node'], true),
 
     define('src/manager/globals-module-info.ts', ['node'], true),
diff --git a/code/core/scripts/helpers/generatePackageJsonFile.ts b/code/core/scripts/helpers/generatePackageJsonFile.ts
index 271f775cba23..c805fe6294a2 100644
--- a/code/core/scripts/helpers/generatePackageJsonFile.ts
+++ b/code/core/scripts/helpers/generatePackageJsonFile.ts
@@ -58,6 +58,10 @@ export async function generatePackageJsonFile(entries: ReturnType<typeof getEntr
     '*': {
       '*': ['./dist/index.d.ts'],
       ...entries.reduce<Record<string, string[]>>((acc, entry) => {
+        if (!entry.dts) {
+          return acc;
+        }
+
         let main = slash(relative(cwd, entry.file).replace('src', 'dist'));
         if (main === './dist/index.ts' || main === './dist/index.tsx') {
           main = '.';
diff --git a/code/core/scripts/helpers/generateTypesFiles.ts b/code/core/scripts/helpers/generateTypesFiles.ts
index a657c6fbd8a7..4c04a20d41c3 100644
--- a/code/core/scripts/helpers/generateTypesFiles.ts
+++ b/code/core/scripts/helpers/generateTypesFiles.ts
@@ -1,8 +1,9 @@
 import { join, relative } from 'node:path';
 
 import { spawn } from '../../../../scripts/prepare/tools';
-import { chalk, limit, process } from '../../../../scripts/prepare/tools';
+import { limit, picocolors, process } from '../../../../scripts/prepare/tools';
 import type { getEntries } from '../entries';
+import { modifyThemeTypes } from './modifyThemeTypes';
 
 export async function generateTypesFiles(
   entries: ReturnType<typeof getEntries>,
@@ -69,7 +70,12 @@ export async function generateTypesFiles(
             console.log(index, fileName);
             process.exit(dtsProcess.exitCode || 1);
           } else {
-            console.log('Generated types for', chalk.cyan(relative(cwd, dtsEntries[index])));
+            console.log('Generated types for', picocolors.cyan(relative(cwd, dtsEntries[index])));
+
+            if (dtsEntries[index].includes('src/theming/index')) {
+              console.log('Modifying theme types');
+              await modifyThemeTypes();
+            }
           }
         });
       })
diff --git a/code/core/scripts/helpers/modifyThemeTypes.ts b/code/core/scripts/helpers/modifyThemeTypes.ts
index 5b35ca6be329..85d78a2cb07b 100644
--- a/code/core/scripts/helpers/modifyThemeTypes.ts
+++ b/code/core/scripts/helpers/modifyThemeTypes.ts
@@ -14,7 +14,7 @@ export async function modifyThemeTypes() {
   const contents = await readFile(target, 'utf-8');
 
   const footer = contents.includes('// auto generated file')
-    ? `export { StorybookTheme as Theme } from '../src/index';`
+    ? `export { StorybookTheme as Theme } from '../../src/theming/index';`
     : dedent`
         interface Theme extends StorybookTheme {}
         export type { Theme };
diff --git a/code/core/scripts/helpers/sourcefiles.ts b/code/core/scripts/helpers/sourcefiles.ts
index 2f437961a91e..e7a5394cb9b7 100644
--- a/code/core/scripts/helpers/sourcefiles.ts
+++ b/code/core/scripts/helpers/sourcefiles.ts
@@ -2,6 +2,7 @@ import { readdir, writeFile } from 'node:fs/promises';
 import { join } from 'node:path';
 
 import { GlobalRegistrator } from '@happy-dom/global-registrator';
+import { isNotNil } from 'es-toolkit';
 
 import { dedent, esbuild, getWorkspace, prettier } from '../../../../scripts/prepare/tools';
 import { temporaryFile } from '../../src/common/utils/cli';
@@ -26,7 +27,7 @@ export const generateSourceFiles = async () => {
 async function generateVersionsFile(prettierConfig: prettier.Options | null): Promise<void> {
   const location = join(__dirname, '..', '..', 'src', 'common', 'versions.ts');
 
-  const workspace = await getWorkspace();
+  const workspace = (await getWorkspace()).filter(isNotNil);
 
   const versions = JSON.stringify(
     workspace
@@ -55,7 +56,7 @@ async function generateVersionsFile(prettierConfig: prettier.Options | null): Pr
 }
 
 async function generateFrameworksFile(prettierConfig: prettier.Options | null): Promise<void> {
-  const thirdPartyFrameworks = ['qwik', 'solid', 'react-rsbuild', 'vue3-rsbuild'];
+  const thirdPartyFrameworks = ['qwik', 'solid', 'nuxt', 'react-rsbuild', 'vue3-rsbuild'];
   const location = join(__dirname, '..', '..', 'src', 'types', 'modules', 'frameworks.ts');
   const frameworksDirectory = join(__dirname, '..', '..', '..', 'frameworks');
 
diff --git a/code/core/scripts/prep.ts b/code/core/scripts/prep.ts
index 20c979ebd9aa..895b8f049d32 100644
--- a/code/core/scripts/prep.ts
+++ b/code/core/scripts/prep.ts
@@ -3,14 +3,16 @@ import { existsSync, mkdirSync, watch } from 'node:fs';
 import { mkdir, rm, writeFile } from 'node:fs/promises';
 import { dirname, join } from 'node:path';
 
+import type { Metafile } from 'esbuild';
+
 import {
-  chalk,
   dedent,
   esbuild,
   globalExternals,
   measure,
   merge,
   nodeInternals,
+  picocolors,
   prettyTime,
   process,
 } from '../../../scripts/prepare/tools';
@@ -57,14 +59,13 @@ async function run() {
   console.log(isWatch ? 'Watching...' : 'Bundling...');
 
   const files = measure(generateSourceFiles);
-  const packageJson = measure(() => generatePackageJsonFile(entries));
+  const packageJson = measure(() => generatePackageJsonFile(entries.concat(bundles)));
   const dist = files.then(() => measure(generateDistFiles));
   const types = files.then(() =>
     measure(async () => {
       await generateTypesMapperFiles(entries);
       await modifyThemeTypes();
       await generateTypesFiles(entries, isOptimized, cwd);
-      await modifyThemeTypes();
     })
   );
 
@@ -75,12 +76,15 @@ async function run() {
     types,
   ]);
 
-  console.log('Files generated in', chalk.yellow(prettyTime(filesTime)));
-  console.log('Package.json generated in', chalk.yellow(prettyTime(packageJsonTime)));
-  console.log(isWatch ? 'Watcher started in' : 'Bundled in', chalk.yellow(prettyTime(distTime)));
+  console.log('Files generated in', picocolors.yellow(prettyTime(filesTime)));
+  console.log('Package.json generated in', picocolors.yellow(prettyTime(packageJsonTime)));
+  console.log(
+    isWatch ? 'Watcher started in' : 'Bundled in',
+    picocolors.yellow(prettyTime(distTime))
+  );
   console.log(
     isOptimized ? 'Generated types in' : 'Generated type mappers in',
-    chalk.yellow(prettyTime(typesTime))
+    picocolors.yellow(prettyTime(typesTime))
   );
 
   async function generateDistFiles() {
@@ -191,6 +195,14 @@ async function run() {
                 '@storybook/core': join(cwd, 'src'),
                 react: dirname(require.resolve('react/package.json')),
                 'react-dom': dirname(require.resolve('react-dom/package.json')),
+                'react-dom/client': join(
+                  dirname(require.resolve('react-dom/package.json')),
+                  'client'
+                ),
+              },
+              define: {
+                // This should set react in prod mode for the manager
+                'process.env.NODE_ENV': JSON.stringify('production'),
               },
               external: [],
             })
@@ -303,30 +315,61 @@ async function run() {
 
       // show a log message when a file is compiled
       watch(join(cwd, 'dist'), { recursive: true }, (event, filename) => {
-        console.log(`compiled ${chalk.cyan(filename)}`);
+        console.log(`compiled ${picocolors.cyan(filename)}`);
       });
     } else {
-      await Promise.all(
-        compile.map(async (context, index) => {
-          const out = await context.rebuild();
+      // repo root/bench/esbuild-metafiles/core
+      const metafilesDir = join(__dirname, '..', '..', 'bench', 'esbuild-metafiles', 'core');
+      if (existsSync(metafilesDir)) {
+        await rm(metafilesDir, { recursive: true });
+      }
+      await mkdir(metafilesDir, { recursive: true });
+
+      const outputs = await Promise.all(
+        compile.map(async (context) => {
+          const output = await context.rebuild();
           await context.dispose();
 
-          if (out.metafile) {
-            const { outputs } = out.metafile;
-            const keys = Object.keys(outputs);
-            const format = keys.every((key) => key.endsWith('.js')) ? 'esm' : 'cjs';
-            const outName =
-              keys.length === 1 ? dirname(keys[0]).replace('dist/', '') : `meta-${format}-${index}`;
-
-            if (!existsSync('report')) {
-              mkdirSync('report');
-            }
-            await writeFile(`report/${outName}.json`, JSON.stringify(out.metafile, null, 2));
-            await writeFile(
-              `report/${outName}.txt`,
-              await esbuild.analyzeMetafile(out.metafile, { color: false, verbose: false })
-            );
-          }
+          return output;
+        })
+      );
+
+      const metafileByModule: Record<string, Metafile> = {};
+
+      for (const currentOutput of outputs) {
+        if (!currentOutput.metafile) {
+          continue;
+        }
+
+        const keys = Object.keys(currentOutput.metafile.outputs);
+        const moduleName = keys.length === 1 ? dirname(keys[0]).replace('dist/', '') : 'core';
+
+        const existingMetafile = metafileByModule[moduleName];
+
+        if (existingMetafile) {
+          existingMetafile.inputs = {
+            ...existingMetafile.inputs,
+            ...currentOutput.metafile.inputs,
+          };
+          existingMetafile.outputs = {
+            ...existingMetafile.outputs,
+            ...currentOutput.metafile.outputs,
+          };
+        } else {
+          metafileByModule[moduleName] = currentOutput.metafile;
+        }
+      }
+
+      await Promise.all(
+        Object.entries(metafileByModule).map(async ([moduleName, metafile]) => {
+          await writeFile(
+            join(metafilesDir, `${moduleName}.json`),
+            JSON.stringify(metafile, null, 2)
+          );
+          await writeFile(
+            join(metafilesDir, `${moduleName}.txt`),
+            await esbuild.analyzeMetafile(metafile, { color: false, verbose: false })
+          );
         })
       );
     }
diff --git a/code/core/src/__mocks__/page.ts b/code/core/src/__mocks__/page.ts
new file mode 100644
index 000000000000..fb87bbd306b8
--- /dev/null
+++ b/code/core/src/__mocks__/page.ts
@@ -0,0 +1 @@
+// empty file only matched on path
diff --git a/code/core/src/__mocks__/path/to/Screens/index.jsx b/code/core/src/__mocks__/path/to/Screens/index.jsx
new file mode 100644
index 000000000000..fb87bbd306b8
--- /dev/null
+++ b/code/core/src/__mocks__/path/to/Screens/index.jsx
@@ -0,0 +1 @@
+// empty file only matched on path
diff --git a/code/core/src/builder-manager/index.ts b/code/core/src/builder-manager/index.ts
index b068caf206c7..faad0a288acf 100644
--- a/code/core/src/builder-manager/index.ts
+++ b/code/core/src/builder-manager/index.ts
@@ -9,7 +9,7 @@ import { logger } from '@storybook/core/node-logger';
 import { globalExternals } from '@fal-works/esbuild-plugin-global-externals';
 import { pnpPlugin } from '@yarnpkg/esbuild-plugin-pnp';
 import aliasPlugin from 'esbuild-plugin-alias';
-import express from 'express';
+import sirv from 'sirv';
 
 import type {
   BuilderBuildResult,
@@ -26,6 +26,7 @@ import { wrapManagerEntries } from './utils/managerEntries';
 import { safeResolve } from './utils/safeResolve';
 import { getTemplatePath, renderHTML } from './utils/template';
 
+const isRootPath = /^\/($|\?)/;
 let compilation: Compilation;
 let asyncIterator: ReturnType<StarterFunction> | ReturnType<BuilderFunction>;
 
@@ -165,8 +166,22 @@ const starter: StarterFunction = async function* starterGeneratorFn({
     'manager'
   );
 
-  router.use(`/sb-addons`, express.static(addonsDir, { immutable: true, maxAge: '5m' }));
-  router.use(`/sb-manager`, express.static(coreDirOrigin, { immutable: true, maxAge: '5m' }));
+  router.use(
+    '/sb-addons',
+    sirv(addonsDir, {
+      maxAge: 300000,
+      dev: true,
+      immutable: true,
+    })
+  );
+  router.use(
+    '/sb-manager',
+    sirv(coreDirOrigin, {
+      maxAge: 300000,
+      dev: true,
+      immutable: true,
+    })
+  );
 
   const { cssFiles, jsFiles } = await readOrderedFiles(addonsDir, compilation?.outputFiles);
 
@@ -193,15 +208,19 @@ const starter: StarterFunction = async function* starterGeneratorFn({
 
   yield;
 
-  router.use(`/`, ({ path }, res, next) => {
-    if (path === '/') {
-      res.status(200).send(html);
+  router.use('/', ({ url }, res, next) => {
+    if (url && isRootPath.test(url)) {
+      res.statusCode = 200;
+      res.write(html);
+      res.end();
     } else {
       next();
     }
   });
-  router.use(`/index.html`, ({ path }, res) => {
-    res.status(200).send(html);
+  router.use(`/index.html`, (req, res) => {
+    res.statusCode = 200;
+    res.write(html);
+    res.end();
   });
 
   return {
@@ -250,7 +269,6 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
   // TODO: this doesn't watch, we should change this to use the esbuild watch API: https://esbuild.github.io/api/#watch
   compilation = await instance({
     ...config,
-
     minify: true,
   });
 
diff --git a/code/core/src/builder-manager/utils/managerEntries.ts b/code/core/src/builder-manager/utils/managerEntries.ts
index 787116d05c0e..9609c94f40ab 100644
--- a/code/core/src/builder-manager/utils/managerEntries.ts
+++ b/code/core/src/builder-manager/utils/managerEntries.ts
@@ -60,7 +60,8 @@ export async function wrapManagerEntries(entrypoints: string[], uniqueId?: strin
         const directory = dirname(location);
         await mkdir(directory, { recursive: true });
       }
-      await writeFile(location, `import '${slash(entry)}';`);
+
+      await writeFile(location, `import '${slash(entry).replaceAll(/'/g, "\\'")}';`);
 
       return location;
     })
diff --git a/code/core/src/cli/bin/index.ts b/code/core/src/cli/bin/index.ts
index 20cc55c1d809..060879635d61 100644
--- a/code/core/src/cli/bin/index.ts
+++ b/code/core/src/cli/bin/index.ts
@@ -3,10 +3,10 @@ import { addToGlobalContext } from '@storybook/core/telemetry';
 
 import { logger } from '@storybook/core/node-logger';
 
-import chalk from 'chalk';
 import { program } from 'commander';
 import { findPackageSync } from 'fd-package-json';
 import leven from 'leven';
+import picocolors from 'picocolors';
 import invariant from 'tiny-invariant';
 
 import { build } from '../build';
@@ -70,7 +70,7 @@ command('dev')
   )
   .action(async (options) => {
     logger.setLevel(options.loglevel);
-    consoleLogger.log(chalk.bold(`${pkg.name} v${pkg.version}`) + chalk.reset('\n'));
+    consoleLogger.log(picocolors.bold(`${pkg.name} v${pkg.version}`) + picocolors.reset('\n'));
 
     // The key is the field created in `options` variable for
     // each command line argument. Value is the env variable.
@@ -110,7 +110,7 @@ command('build')
   .action(async (options) => {
     process.env.NODE_ENV = process.env.NODE_ENV || 'production';
     logger.setLevel(options.loglevel);
-    consoleLogger.log(chalk.bold(`${pkg.name} v${pkg.version}\n`));
+    consoleLogger.log(picocolors.bold(`${pkg.name} v${pkg.version}\n`));
 
     // The key is the field created in `options` variable for
     // each command line argument. Value is the env variable.
diff --git a/code/core/src/cli/detect.test.ts b/code/core/src/cli/detect.test.ts
index 95c1b126dca3..409cf92effa7 100644
--- a/code/core/src/cli/detect.test.ts
+++ b/code/core/src/cli/detect.test.ts
@@ -24,6 +24,7 @@ vi.mock('fs', () => ({
   readdirSync: vi.fn(),
   readlinkSync: vi.fn(),
   default: vi.fn(),
+  mkdirSync: vi.fn(),
 }));
 
 vi.mock('@storybook/core/node-logger');
@@ -42,6 +43,28 @@ const MOCK_FRAMEWORK_FILES: {
       },
     },
   },
+  {
+    name: ProjectType.NUXT,
+    files: {
+      'package.json': {
+        dependencies: {
+          nuxt: '^3.11.2',
+        },
+      },
+    },
+  },
+  {
+    name: ProjectType.NUXT,
+    files: {
+      'package.json': {
+        dependencies: {
+          // Nuxt projects may have Vue 3 as an explicit dependency
+          nuxt: '^3.11.2',
+          vue: '^3.0.0',
+        },
+      },
+    },
+  },
   {
     name: ProjectType.VUE3,
     files: {
@@ -434,16 +457,6 @@ describe('Detect', () => {
       expect(result).toBe(ProjectType.UNDETECTED);
     });
 
-    // TODO(blaine): Remove once Nuxt3 is supported
-    it(`UNSUPPORTED for Nuxt framework above version 3.0.0`, () => {
-      const result = detectFrameworkPreset({
-        dependencies: {
-          nuxt: '3.0.0',
-        },
-      });
-      expect(result).toBe(ProjectType.UNSUPPORTED);
-    });
-
     // TODO: The mocking in this test causes tests after it to fail
     it('REACT_SCRIPTS for custom react scripts config', () => {
       const forkedReactScriptsConfig = {
diff --git a/code/core/src/cli/detect.ts b/code/core/src/cli/detect.ts
index 09ef8cae02cf..a771f6476f8c 100644
--- a/code/core/src/cli/detect.ts
+++ b/code/core/src/cli/detect.ts
@@ -123,19 +123,27 @@ export async function detectBuilder(packageManager: JsPackageManager, projectTyp
   }
 
   // REWORK
-  if (webpackConfig || (dependencies.webpack && dependencies.vite !== undefined)) {
+  if (
+    webpackConfig ||
+    ((dependencies.webpack || dependencies['@nuxt/webpack-builder']) &&
+      dependencies.vite !== undefined)
+  ) {
     commandLog('Detected webpack project. Setting builder to webpack')();
     return CoreBuilder.Webpack5;
   }
 
   // Fallback to Vite or Webpack based on project type
   switch (projectType) {
+    case ProjectType.REACT_NATIVE_WEB:
+      return CoreBuilder.Vite;
     case ProjectType.REACT_SCRIPTS:
     case ProjectType.ANGULAR:
     case ProjectType.REACT_NATIVE: // technically react native doesn't use webpack, we just want to set something
     case ProjectType.NEXTJS:
     case ProjectType.EMBER:
       return CoreBuilder.Webpack5;
+    case ProjectType.NUXT:
+      return CoreBuilder.Vite;
     default:
       const { builder } = await prompts(
         {
@@ -205,6 +213,13 @@ export async function detectLanguage(packageManager: JsPackageManager) {
     } else if (semver.lt(typescriptVersion, '3.8.0')) {
       logger.warn('Detected TypeScript < 3.8, populating with JavaScript examples');
     }
+  } else {
+    // No direct dependency on TypeScript, but could be a transitive dependency
+    // This is eg the case for Nuxt projects, which support a recent version of TypeScript
+    // Check for tsconfig.json (https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)
+    if (existsSync('tsconfig.json')) {
+      language = SupportedLanguage.TYPESCRIPT_4_9;
+    }
   }
 
   return language;
diff --git a/code/core/src/cli/dev.ts b/code/core/src/cli/dev.ts
index 6d05f140fa38..26ff6250f3a8 100644
--- a/code/core/src/cli/dev.ts
+++ b/code/core/src/cli/dev.ts
@@ -44,14 +44,16 @@ export const dev = async (cliOptions: CLIOptions) => {
 
   const packageJson = await findPackage(__dirname);
   invariant(packageJson, 'Failed to find the closest package.json file.');
+  type Options = Parameters<typeof buildDevStandalone>[0];
+
   const options = {
     ...cliOptions,
     configDir: cliOptions.configDir || './.storybook',
     configType: 'DEVELOPMENT',
     ignorePreview: !!cliOptions.previewUrl && !cliOptions.forceBuildPreview,
-    cache,
+    cache: cache as any,
     packageJson,
-  } as Parameters<typeof buildDevStandalone>[0];
+  } as Options;
 
   await withTelemetry(
     'dev',
diff --git a/code/core/src/cli/dirs.ts b/code/core/src/cli/dirs.ts
index 11ca9cb67441..6e6867e38d57 100644
--- a/code/core/src/cli/dirs.ts
+++ b/code/core/src/cli/dirs.ts
@@ -40,7 +40,7 @@ export async function getRendererDir(
 ) {
   const externalFramework = externalFrameworks.find((framework) => framework.name === renderer);
   const frameworkPackageName =
-    externalFramework?.renderer || externalFramework?.packageName || `@storybook/${renderer}`;
+    externalFramework?.packageName || externalFramework?.renderer || `@storybook/${renderer}`;
 
   const packageJsonPath = join(frameworkPackageName, 'package.json');
 
diff --git a/code/core/src/cli/eslintPlugin.ts b/code/core/src/cli/eslintPlugin.ts
index fafb91b2652a..24903afc35cd 100644
--- a/code/core/src/cli/eslintPlugin.ts
+++ b/code/core/src/cli/eslintPlugin.ts
@@ -6,8 +6,8 @@ import { paddedLog } from '@storybook/core/common';
 
 import { readConfig, writeConfig } from '@storybook/core/csf-tools';
 
-import chalk from 'chalk';
 import detectIndent from 'detect-indent';
+import picocolors from 'picocolors';
 import prompts from 'prompts';
 import { dedent } from 'ts-dedent';
 
@@ -108,7 +108,7 @@ export const suggestESLintPlugin = async (): Promise<boolean> => {
     type: 'confirm',
     name: 'shouldInstall',
     message: dedent`
-        We have detected that you're using ESLint. Storybook provides a plugin that gives the best experience with Storybook and helps follow best practices: ${chalk.yellow(
+        We have detected that you're using ESLint. Storybook provides a plugin that gives the best experience with Storybook and helps follow best practices: ${picocolors.yellow(
           'https://github.com/storybookjs/eslint-plugin-storybook#readme'
         )}
 
diff --git a/code/core/src/cli/helpers.test.ts b/code/core/src/cli/helpers.test.ts
index 4615f0cfdd84..03e85ccc941d 100644
--- a/code/core/src/cli/helpers.test.ts
+++ b/code/core/src/cli/helpers.test.ts
@@ -75,6 +75,47 @@ describe('Helpers', () => {
     vi.clearAllMocks();
   });
 
+  describe('getVersionSafe', () => {
+    describe('installed', () => {
+      it.each([
+        ['3.0.0', '3.0.0'],
+        ['5.0.0-next.0', '5.0.0-next.0'],
+        [
+          '4.2.19::__archiveUrl=https%3A%2F%2Fregistry.npmjs.org%2Fsvelte%2F-%2Fsvelte-4.2.19.tgz',
+          '4.2.19',
+        ],
+      ])('svelte %s => %s', async (svelteVersion, expectedAddonSpecifier) => {
+        const packageManager = {
+          getInstalledVersion: async (pkg: string) =>
+            pkg === 'svelte' ? svelteVersion : undefined,
+          getAllDependencies: async () => ({ svelte: `^${svelteVersion}` }),
+        } as any as JsPackageManager;
+        await expect(helpers.getVersionSafe(packageManager, 'svelte')).resolves.toBe(
+          expectedAddonSpecifier
+        );
+      });
+    });
+
+    describe('uninstalled', () => {
+      it.each([
+        ['^3', '3.0.0'],
+        ['^5.0.0-next.0', '5.0.0-next.0'],
+        [
+          '4.2.19::__archiveUrl=https%3A%2F%2Fregistry.npmjs.org%2Fsvelte%2F-%2Fsvelte-4.2.19.tgz',
+          '4.2.19',
+        ],
+      ])('svelte %s => %s', async (svelteSpecifier, expectedAddonSpecifier) => {
+        const packageManager = {
+          getInstalledVersion: async (pkg: string) => undefined,
+          getAllDependencies: async () => ({ svelte: svelteSpecifier }),
+        } as any as JsPackageManager;
+        await expect(helpers.getVersionSafe(packageManager, 'svelte')).resolves.toBe(
+          expectedAddonSpecifier
+        );
+      });
+    });
+  });
+
   describe('copyTemplate', () => {
     it(`should copy template files when directory is present`, () => {
       const csfDirectory = /template-csf\/$/;
diff --git a/code/core/src/cli/helpers.ts b/code/core/src/cli/helpers.ts
index 5f567ebe5cbc..d5ebb9b65a2d 100644
--- a/code/core/src/cli/helpers.ts
+++ b/code/core/src/cli/helpers.ts
@@ -11,9 +11,9 @@ import {
 import { versions as storybookMonorepoPackages } from '@storybook/core/common';
 import type { SupportedFrameworks, SupportedRenderers } from '@storybook/core/types';
 
-import chalk from 'chalk';
 import { findUpSync } from 'find-up';
-import { coerce, satisfies } from 'semver';
+import picocolors from 'picocolors';
+import { coerce, major, satisfies } from 'semver';
 import stripJsonComments from 'strip-json-comments';
 import invariant from 'tiny-invariant';
 
@@ -34,7 +34,7 @@ export function readFileAsJson(jsonPath: string, allowComments?: boolean) {
   try {
     return JSON.parse(jsonContent);
   } catch (e) {
-    logger.error(chalk.red(`Invalid json in file: ${filePath}`));
+    logger.error(picocolors.red(`Invalid json in file: ${filePath}`));
     throw e;
   }
 }
@@ -153,10 +153,12 @@ export const frameworkToDefaultBuilder: Record<
   'html-vite': CoreBuilder.Vite,
   'html-webpack5': CoreBuilder.Webpack5,
   nextjs: CoreBuilder.Webpack5,
+  nuxt: CoreBuilder.Vite,
   'experimental-nextjs-vite': CoreBuilder.Vite,
   'preact-vite': CoreBuilder.Vite,
   'preact-webpack5': CoreBuilder.Webpack5,
   qwik: CoreBuilder.Vite,
+  'react-native-web-vite': CoreBuilder.Vite,
   'react-vite': CoreBuilder.Vite,
   'react-webpack5': CoreBuilder.Webpack5,
   'server-webpack5': CoreBuilder.Webpack5,
@@ -173,6 +175,33 @@ export const frameworkToDefaultBuilder: Record<
   'vue3-rsbuild': CommunityBuilder.Rsbuild,
 };
 
+/**
+ * Return the installed version of a package, or the coerced version specifier from package.json if
+ * it's a dependency but not installed (e.g. in a fresh project)
+ */
+export async function getVersionSafe(packageManager: JsPackageManager, packageName: string) {
+  try {
+    let version = await packageManager.getInstalledVersion(packageName);
+    if (!version) {
+      const deps = await packageManager.getAllDependencies();
+      const versionSpecifier = deps[packageName];
+      version = versionSpecifier ?? '';
+    }
+    const coerced = coerce(version, { includePrerelease: true });
+    return coerced?.toString();
+  } catch (err) {
+    // fall back to no version
+  }
+  return undefined;
+}
+
+export const cliStoriesTargetPath = async () => {
+  if (existsSync('./src')) {
+    return './src/stories';
+  }
+  return './stories';
+};
+
 export async function copyTemplateFiles({
   packageManager,
   renderer,
@@ -180,13 +209,26 @@ export async function copyTemplateFiles({
   destination,
   commonAssetsDir,
 }: CopyTemplateFilesOptions) {
-  const languageFolderMapping: Record<SupportedLanguage | 'typescript', string> = {
+  let languageFolderMapping: Record<SupportedLanguage | 'typescript', string> = {
     // keeping this for backwards compatibility in case community packages are using it
     typescript: 'ts',
     [SupportedLanguage.JAVASCRIPT]: 'js',
     [SupportedLanguage.TYPESCRIPT_3_8]: 'ts-3-8',
     [SupportedLanguage.TYPESCRIPT_4_9]: 'ts-4-9',
   };
+  // FIXME: remove after 9.0
+  if (renderer === 'svelte') {
+    const svelteVersion = await getVersionSafe(packageManager, 'svelte');
+    if (svelteVersion && major(svelteVersion) >= 5) {
+      languageFolderMapping = {
+        // keeping this for backwards compatibility in case community packages are using it
+        typescript: 'ts',
+        [SupportedLanguage.JAVASCRIPT]: 'svelte-5-js',
+        [SupportedLanguage.TYPESCRIPT_3_8]: 'svelte-5-ts-3-8',
+        [SupportedLanguage.TYPESCRIPT_4_9]: 'svelte-5-ts-4-9',
+      };
+    }
+  }
   const templatePath = async () => {
     const baseDir = await getRendererDir(packageManager, renderer);
     const assetsDir = join(baseDir, 'template', 'cli');
@@ -219,14 +261,7 @@ export async function copyTemplateFiles({
     throw new Error(`Unsupported renderer: ${renderer} (${baseDir})`);
   };
 
-  const targetPath = async () => {
-    if (existsSync('./src')) {
-      return './src/stories';
-    }
-    return './stories';
-  };
-
-  const destinationPath = destination ?? (await targetPath());
+  const destinationPath = destination ?? (await cliStoriesTargetPath());
   if (commonAssetsDir) {
     await cp(commonAssetsDir, destinationPath, {
       recursive: true,
diff --git a/code/core/src/cli/project_types.ts b/code/core/src/cli/project_types.ts
index 5d7d4a4d3ead..d9ca64e25345 100644
--- a/code/core/src/cli/project_types.ts
+++ b/code/core/src/cli/project_types.ts
@@ -1,5 +1,5 @@
 import type {
-  SupportedRenderers as CoreSupportedFrameworks,
+  SupportedRenderers as CoreSupportedRenderers,
   SupportedFrameworks,
 } from '@storybook/core/types';
 
@@ -24,10 +24,16 @@ export type ExternalFramework = {
 export const externalFrameworks: ExternalFramework[] = [
   { name: 'qwik', packageName: 'storybook-framework-qwik' },
   { name: 'solid', frameworks: ['storybook-solidjs-vite'], renderer: 'storybook-solidjs' },
+  {
+    name: 'nuxt',
+    packageName: '@storybook-vue/nuxt',
+    frameworks: ['@storybook-vue/nuxt'],
+    renderer: '@storybook/vue3',
+  },
 ];
 
-/** @deprecated Please use `SupportedFrameworks` from `@storybook/types` instead */
-export type SupportedRenderers = CoreSupportedFrameworks;
+/** @deprecated Please use `SupportedRenderers` from `@storybook/types` instead */
+export type SupportedRenderers = CoreSupportedRenderers;
 
 export const SUPPORTED_RENDERERS: SupportedRenderers[] = [
   'react',
@@ -47,10 +53,12 @@ export enum ProjectType {
   REACT = 'REACT',
   REACT_SCRIPTS = 'REACT_SCRIPTS',
   REACT_NATIVE = 'REACT_NATIVE',
+  REACT_NATIVE_WEB = 'REACT_NATIVE_WEB',
   REACT_PROJECT = 'REACT_PROJECT',
   WEBPACK_REACT = 'WEBPACK_REACT',
   NEXTJS = 'NEXTJS',
   VUE3 = 'VUE3',
+  NUXT = 'NUXT',
   ANGULAR = 'ANGULAR',
   EMBER = 'EMBER',
   WEB_COMPONENTS = 'WEB_COMPONENTS',
@@ -120,6 +128,13 @@ export type TemplateConfiguration = {
  * specific.
  */
 export const supportedTemplates: TemplateConfiguration[] = [
+  {
+    preset: ProjectType.NUXT,
+    dependencies: ['nuxt'],
+    matcherFunction: ({ dependencies }) => {
+      return dependencies?.every(Boolean) ?? true;
+    },
+  },
   {
     preset: ProjectType.VUE3,
     dependencies: {
@@ -241,10 +256,7 @@ export const supportedTemplates: TemplateConfiguration[] = [
 // users an "Unsupported framework" message
 export const unsupportedTemplate: TemplateConfiguration = {
   preset: ProjectType.UNSUPPORTED,
-  dependencies: {
-    // TODO(blaine): Remove when we support Nuxt 3
-    nuxt: (versionRange) => eqMajor(versionRange, 3),
-  },
+  dependencies: {},
   matcherFunction: ({ dependencies }) => {
     return dependencies?.some(Boolean) ?? false;
   },
diff --git a/code/core/src/common/index.ts b/code/core/src/common/index.ts
index 0e7e92bd6a71..6166e285ab05 100644
--- a/code/core/src/common/index.ts
+++ b/code/core/src/common/index.ts
@@ -18,7 +18,6 @@ export * from './utils/get-storybook-info';
 export * from './utils/get-storybook-refs';
 export * from './utils/glob-to-regexp';
 export * from './utils/HandledError';
-export * from './utils/handlebars';
 export * from './utils/interpolate';
 export * from './utils/interpret-files';
 export * from './utils/interpret-require';
diff --git a/code/core/src/common/js-package-manager/BUNProxy.ts b/code/core/src/common/js-package-manager/BUNProxy.ts
new file mode 100644
index 000000000000..01ede64cfa5a
--- /dev/null
+++ b/code/core/src/common/js-package-manager/BUNProxy.ts
@@ -0,0 +1,332 @@
+import { existsSync, readFileSync } from 'node:fs';
+import { platform } from 'node:os';
+import { join } from 'node:path';
+
+import { logger } from '@storybook/core/node-logger';
+import { FindPackageVersionsError } from '@storybook/core/server-errors';
+
+import { findUp } from 'find-up';
+import sort from 'semver/functions/sort.js';
+import { dedent } from 'ts-dedent';
+
+import { createLogStream } from '../utils/cli';
+import { JsPackageManager } from './JsPackageManager';
+import type { PackageJson } from './PackageJson';
+import type { InstallationMetadata, PackageMetadata } from './types';
+
+type NpmDependency = {
+  version: string;
+  resolved?: string;
+  overridden?: boolean;
+  dependencies?: NpmDependencies;
+};
+
+type NpmDependencies = {
+  [key: string]: NpmDependency;
+};
+
+export type NpmListOutput = {
+  dependencies: NpmDependencies;
+};
+
+const NPM_ERROR_REGEX = /npm ERR! code (\w+)/;
+const NPM_ERROR_CODES = {
+  E401: 'Authentication failed or is required.',
+  E403: 'Access to the resource is forbidden.',
+  E404: 'Requested resource not found.',
+  EACCES: 'Permission issue.',
+  EAI_FAIL: 'DNS lookup failed.',
+  EBADENGINE: 'Engine compatibility check failed.',
+  EBADPLATFORM: 'Platform not supported.',
+  ECONNREFUSED: 'Connection refused.',
+  ECONNRESET: 'Connection reset.',
+  EEXIST: 'File or directory already exists.',
+  EINVALIDTYPE: 'Invalid type encountered.',
+  EISGIT: 'Git operation failed or conflicts with an existing file.',
+  EJSONPARSE: 'Error parsing JSON data.',
+  EMISSINGARG: 'Required argument missing.',
+  ENEEDAUTH: 'Authentication needed.',
+  ENOAUDIT: 'No audit available.',
+  ENOENT: 'File or directory does not exist.',
+  ENOGIT: 'Git not found or failed to run.',
+  ENOLOCK: 'Lockfile missing.',
+  ENOSPC: 'Insufficient disk space.',
+  ENOTFOUND: 'Resource not found.',
+  EOTP: 'One-time password required.',
+  EPERM: 'Permission error.',
+  EPUBLISHCONFLICT: 'Conflict during package publishing.',
+  ERESOLVE: 'Dependency resolution error.',
+  EROFS: 'File system is read-only.',
+  ERR_SOCKET_TIMEOUT: 'Socket timed out.',
+  ETARGET: 'Package target not found.',
+  ETIMEDOUT: 'Operation timed out.',
+  ETOOMANYARGS: 'Too many arguments provided.',
+  EUNKNOWNTYPE: 'Unknown type encountered.',
+};
+
+export class BUNProxy extends JsPackageManager {
+  readonly type = 'bun';
+
+  installArgs: string[] | undefined;
+
+  async initPackageJson() {
+    await this.executeCommand({ command: 'bun', args: ['init'] });
+  }
+
+  getRunStorybookCommand(): string {
+    return 'bun run storybook';
+  }
+
+  getRunCommand(command: string): string {
+    return `bun run ${command}`;
+  }
+
+  getRemoteRunCommand(): string {
+    return 'bunx';
+  }
+
+  public async getPackageJSON(
+    packageName: string,
+    basePath = this.cwd
+  ): Promise<PackageJson | null> {
+    const packageJsonPath = await findUp(
+      (dir) => {
+        const possiblePath = join(dir, 'node_modules', packageName, 'package.json');
+        return existsSync(possiblePath) ? possiblePath : undefined;
+      },
+      { cwd: basePath }
+    );
+
+    if (!packageJsonPath) {
+      return null;
+    }
+
+    const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
+    return packageJson;
+  }
+
+  getInstallArgs(): string[] {
+    if (!this.installArgs) {
+      this.installArgs = [];
+    }
+    return this.installArgs;
+  }
+
+  public runPackageCommandSync(
+    command: string,
+    args: string[],
+    cwd?: string,
+    stdio?: 'pipe' | 'inherit'
+  ): string {
+    return this.executeCommandSync({
+      command: 'bun',
+      args: ['run', command, ...args],
+      cwd,
+      stdio,
+    });
+  }
+
+  public async runPackageCommand(command: string, args: string[], cwd?: string): Promise<string> {
+    return this.executeCommand({
+      command: 'bun',
+      args: ['run', command, ...args],
+      cwd,
+    });
+  }
+
+  public async findInstallations(pattern: string[], { depth = 99 }: { depth?: number } = {}) {
+    const exec = async ({ packageDepth }: { packageDepth: number }) => {
+      const pipeToNull = platform() === 'win32' ? '2>NUL' : '2>/dev/null';
+      return this.executeCommand({
+        command: 'npm',
+        args: ['ls', '--json', `--depth=${packageDepth}`, pipeToNull],
+        env: {
+          FORCE_COLOR: 'false',
+        },
+      });
+    };
+
+    try {
+      const commandResult = await exec({ packageDepth: depth });
+      const parsedOutput = JSON.parse(commandResult);
+
+      return this.mapDependencies(parsedOutput, pattern);
+    } catch (e) {
+      // when --depth is higher than 0, npm can return a non-zero exit code
+      // in case the user's project has peer dependency issues. So we try again with no depth
+      try {
+        const commandResult = await exec({ packageDepth: 0 });
+        const parsedOutput = JSON.parse(commandResult);
+
+        return this.mapDependencies(parsedOutput, pattern);
+      } catch (err) {
+        logger.warn(`An issue occurred while trying to find dependencies metadata using npm.`);
+        return undefined;
+      }
+    }
+  }
+
+  protected getResolutions(packageJson: PackageJson, versions: Record<string, string>) {
+    return {
+      overrides: {
+        ...packageJson.overrides,
+        ...versions,
+      },
+    };
+  }
+
+  protected async runInstall() {
+    await this.executeCommand({
+      command: 'bun',
+      args: ['install', ...this.getInstallArgs()],
+      stdio: 'inherit',
+    });
+  }
+
+  public async getRegistryURL() {
+    const res = await this.executeCommand({
+      command: 'npm',
+      // "npm config" commands are not allowed in workspaces per default
+      // https://github.com/npm/cli/issues/6099#issuecomment-1847584792
+      args: ['config', 'get', 'registry', '-ws=false', '-iwr'],
+    });
+    const url = res.trim();
+    return url === 'undefined' ? undefined : url;
+  }
+
+  protected async runAddDeps(dependencies: string[], installAsDevDependencies: boolean) {
+    const { logStream, readLogFile, moveLogFile, removeLogFile } = await createLogStream();
+    let args = [...dependencies];
+
+    if (installAsDevDependencies) {
+      args = ['-D', ...args];
+    }
+
+    try {
+      await this.executeCommand({
+        command: 'bun',
+        args: ['add', ...args, ...this.getInstallArgs()],
+        stdio: process.env.CI ? 'inherit' : ['ignore', logStream, logStream],
+      });
+    } catch (err) {
+      const stdout = await readLogFile();
+
+      const errorMessage = this.parseErrorFromLogs(stdout);
+
+      await moveLogFile();
+
+      throw new Error(
+        dedent`${errorMessage}
+        
+        Please check the logfile generated at ./storybook.log for troubleshooting and try again.`
+      );
+    }
+
+    await removeLogFile();
+  }
+
+  protected async runRemoveDeps(dependencies: string[]) {
+    const args = [...dependencies];
+
+    await this.executeCommand({
+      command: 'bun',
+      args: ['remove', ...args, ...this.getInstallArgs()],
+      stdio: 'inherit',
+    });
+  }
+
+  protected async runGetVersions<T extends boolean>(
+    packageName: string,
+    fetchAllVersions: T
+  ): Promise<T extends true ? string[] : string> {
+    const args = [fetchAllVersions ? 'versions' : 'version', '--json'];
+    try {
+      const commandResult = await this.executeCommand({
+        command: 'npm',
+        args: ['info', packageName, ...args],
+      });
+
+      const parsedOutput = JSON.parse(commandResult);
+
+      if (parsedOutput.error?.summary) {
+        // this will be handled in the catch block below
+        throw parsedOutput.error.summary;
+      }
+
+      return parsedOutput;
+    } catch (error) {
+      throw new FindPackageVersionsError({
+        error,
+        packageManager: 'NPM',
+        packageName,
+      });
+    }
+  }
+
+  /**
+   * @param input The output of `npm ls --json`
+   * @param pattern A list of package names to filter the result. * can be used as a placeholder
+   */
+  protected mapDependencies(input: NpmListOutput, pattern: string[]): InstallationMetadata {
+    const acc: Record<string, PackageMetadata[]> = {};
+    const existingVersions: Record<string, string[]> = {};
+    const duplicatedDependencies: Record<string, string[]> = {};
+
+    const recurse = ([name, packageInfo]: [string, NpmDependency]): void => {
+      // transform pattern into regex where `*` is replaced with `.*`
+      if (!name || !pattern.some((p) => new RegExp(`^${p.replace(/\*/g, '.*')}$`).test(name))) {
+        return;
+      }
+
+      const value = {
+        version: packageInfo.version,
+        location: '',
+      };
+
+      if (!existingVersions[name]?.includes(value.version)) {
+        if (acc[name]) {
+          acc[name].push(value);
+        } else {
+          acc[name] = [value];
+        }
+        existingVersions[name] = sort([...(existingVersions[name] || []), value.version]);
+
+        if (existingVersions[name].length > 1) {
+          duplicatedDependencies[name] = existingVersions[name];
+        }
+      }
+
+      if (packageInfo.dependencies) {
+        Object.entries(packageInfo.dependencies).forEach(recurse);
+      }
+    };
+
+    Object.entries(input.dependencies).forEach(recurse);
+
+    return {
+      dependencies: acc,
+      duplicatedDependencies,
+      infoCommand: 'npm ls --depth=1',
+      dedupeCommand: 'npm dedupe',
+    };
+  }
+
+  public parseErrorFromLogs(logs: string): string {
+    let finalMessage = 'NPM error';
+    const match = logs.match(NPM_ERROR_REGEX);
+
+    if (match) {
+      const errorCode = match[1] as keyof typeof NPM_ERROR_CODES;
+      if (errorCode) {
+        finalMessage = `${finalMessage} ${errorCode}`;
+      }
+
+      const errorMessage = NPM_ERROR_CODES[errorCode];
+      if (errorMessage) {
+        finalMessage = `${finalMessage} - ${errorMessage}`;
+      }
+    }
+
+    return finalMessage.trim();
+  }
+}
diff --git a/code/core/src/common/js-package-manager/JsPackageManager.ts b/code/core/src/common/js-package-manager/JsPackageManager.ts
index 1d1f2ef5367c..76a809911021 100644
--- a/code/core/src/common/js-package-manager/JsPackageManager.ts
+++ b/code/core/src/common/js-package-manager/JsPackageManager.ts
@@ -2,9 +2,9 @@ import { existsSync, readFileSync } from 'node:fs';
 import { readFile, writeFile } from 'node:fs/promises';
 import { dirname, resolve } from 'node:path';
 
-import chalk from 'chalk';
-import type { CommonOptions } from 'execa';
-import { execaCommand, execaCommandSync } from 'execa';
+// eslint-disable-next-line depend/ban-dependencies
+import { type CommonOptions, execaCommand, execaCommandSync } from 'execa';
+import picocolors from 'picocolors';
 import { gt, satisfies } from 'semver';
 import invariant from 'tiny-invariant';
 import { dedent } from 'ts-dedent';
@@ -16,7 +16,7 @@ import type { InstallationMetadata } from './types';
 
 const logger = console;
 
-export type PackageManagerName = 'npm' | 'yarn1' | 'yarn2' | 'pnpm';
+export type PackageManagerName = 'npm' | 'yarn1' | 'yarn2' | 'pnpm' | 'bun';
 
 type StorybookPackage = keyof typeof storybookPackagesVersions;
 
@@ -50,6 +50,8 @@ export abstract class JsPackageManager {
 
   public abstract getRunCommand(command: string): string;
 
+  public abstract getRemoteRunCommand(): string;
+
   public readonly cwd?: string;
 
   public abstract getPackageJSON(
@@ -60,7 +62,7 @@ export abstract class JsPackageManager {
   /** Get the INSTALLED version of a package from the package.json file */
   async getPackageVersion(packageName: string, basePath = this.cwd): Promise<string | null> {
     const packageJSON = await this.getPackageJSON(packageName, basePath);
-    return packageJSON ? packageJSON.version ?? null : null;
+    return packageJSON ? (packageJSON.version ?? null) : null;
   }
 
   constructor(options?: JsPackageManagerOptions) {
@@ -384,11 +386,11 @@ export abstract class JsPackageManager {
       latest = await this.latestVersion(packageName, constraint);
     } catch (e) {
       if (current) {
-        logger.warn(`\n     ${chalk.yellow(String(e))}`);
+        logger.warn(`\n     ${picocolors.yellow(String(e))}`);
         return current;
       }
 
-      logger.error(`\n     ${chalk.red(String(e))}`);
+      logger.error(`\n     ${picocolors.red(String(e))}`);
       throw new HandledError(e);
     }
 
diff --git a/code/core/src/common/js-package-manager/JsPackageManagerFactory.test.ts b/code/core/src/common/js-package-manager/JsPackageManagerFactory.test.ts
index 9f703d7c5ba3..888f18a598a4 100644
--- a/code/core/src/common/js-package-manager/JsPackageManagerFactory.test.ts
+++ b/code/core/src/common/js-package-manager/JsPackageManagerFactory.test.ts
@@ -5,6 +5,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { sync as spawnSync } from 'cross-spawn';
 import { findUpSync } from 'find-up';
 
+import { BUNProxy } from './BUNProxy';
 import { JsPackageManagerFactory } from './JsPackageManagerFactory';
 import { NPMProxy } from './NPMProxy';
 import { PNPMProxy } from './PNPMProxy';
@@ -354,6 +355,91 @@ describe('CLASS: JsPackageManagerFactory', () => {
       });
     });
 
+    describe('Yarn 2 proxy', () => {
+      it('FORCE: it should return a Yarn2 proxy when `force` option is `yarn2`', () => {
+        expect(JsPackageManagerFactory.getPackageManager({ force: 'yarn2' })).toBeInstanceOf(
+          Yarn2Proxy
+        );
+      });
+
+      it('USER AGENT: it should infer yarn2 from the user agent', () => {
+        process.env.npm_config_user_agent = 'yarn/2.2.10';
+        expect(JsPackageManagerFactory.getPackageManager()).toBeInstanceOf(Yarn2Proxy);
+      });
+
+      it('ONLY YARN 2: when Yarn command is ok, Yarn version is >=2, NPM is ko, PNPM is ko', () => {
+        spawnSyncMock.mockImplementation((command) => {
+          // Yarn is ok
+          if (command === 'yarn') {
+            return {
+              status: 0,
+              output: '2.0.0-rc.33',
+            };
+          }
+          // NPM is ko
+          if (command === 'npm') {
+            return {
+              status: 1,
+            };
+          }
+          // PNPM is ko
+          if (command === 'pnpm') {
+            return {
+              status: 1,
+            };
+          }
+          // Unknown package manager is ko
+          return {
+            status: 1,
+          } as any;
+        });
+
+        expect(JsPackageManagerFactory.getPackageManager()).toBeInstanceOf(Yarn2Proxy);
+      });
+
+      it('when Yarn command is ok, Yarn version is >=2, NPM and PNPM are ok, there is a `yarn.lock` file', () => {
+        spawnSyncMock.mockImplementation((command) => {
+          // Yarn is ok
+          if (command === 'yarn') {
+            return {
+              status: 0,
+              output: '2.0.0-rc.33',
+            };
+          }
+          // NPM is ok
+          if (command === 'npm') {
+            return {
+              status: 0,
+              output: '6.5.12',
+            };
+          }
+          // PNPM is ok
+          if (command === 'pnpm') {
+            return {
+              status: 0,
+              output: '7.9.5',
+            };
+          }
+
+          if (command === 'bun') {
+            return {
+              status: 0,
+              output: '1.0.0',
+            };
+          }
+          // Unknown package manager is ko
+          return {
+            status: 1,
+          } as any;
+        });
+
+        // There is a yarn.lock
+        findUpSyncMock.mockImplementation(() => '/Users/johndoe/Documents/bun.lockb');
+
+        expect(JsPackageManagerFactory.getPackageManager()).toBeInstanceOf(BUNProxy);
+      });
+    });
+
     it('throws an error if Yarn, NPM, and PNPM are not found', () => {
       spawnSyncMock.mockReturnValue({ status: 1 } as any);
       expect(() => JsPackageManagerFactory.getPackageManager()).toThrow();
diff --git a/code/core/src/common/js-package-manager/JsPackageManagerFactory.ts b/code/core/src/common/js-package-manager/JsPackageManagerFactory.ts
index 4b3c6184e59f..3f31adbb1c90 100644
--- a/code/core/src/common/js-package-manager/JsPackageManagerFactory.ts
+++ b/code/core/src/common/js-package-manager/JsPackageManagerFactory.ts
@@ -3,6 +3,7 @@ import { basename, parse, relative } from 'node:path';
 import { sync as spawnSync } from 'cross-spawn';
 import { findUpSync } from 'find-up';
 
+import { BUNProxy } from './BUNProxy';
 import type { JsPackageManager, PackageManagerName } from './JsPackageManager';
 import { NPMProxy } from './NPMProxy';
 import { PNPMProxy } from './PNPMProxy';
@@ -12,12 +13,14 @@ import { Yarn2Proxy } from './Yarn2Proxy';
 const NPM_LOCKFILE = 'package-lock.json';
 const PNPM_LOCKFILE = 'pnpm-lock.yaml';
 const YARN_LOCKFILE = 'yarn.lock';
+const BUN_LOCKFILE = 'bun.lockb';
 
 type PackageManagerProxy =
   | typeof NPMProxy
   | typeof PNPMProxy
   | typeof Yarn1Proxy
-  | typeof Yarn2Proxy;
+  | typeof Yarn2Proxy
+  | typeof BUNProxy;
 
 export class JsPackageManagerFactory {
   public static getPackageManager(
@@ -33,6 +36,7 @@ export class JsPackageManagerFactory {
       findUpSync(YARN_LOCKFILE, { cwd }),
       findUpSync(PNPM_LOCKFILE, { cwd }),
       findUpSync(NPM_LOCKFILE, { cwd }),
+      findUpSync(BUN_LOCKFILE, { cwd }),
     ]
       .filter(Boolean)
       .sort((a, b) => {
@@ -59,6 +63,7 @@ export class JsPackageManagerFactory {
 
     const hasNPMCommand = hasNPM(cwd);
     const hasPNPMCommand = hasPNPM(cwd);
+    const hasBunCommand = hasBun(cwd);
     const yarnVersion = getYarnVersion(cwd);
 
     if (yarnVersion && (closestLockfile === YARN_LOCKFILE || (!hasNPMCommand && !hasPNPMCommand))) {
@@ -73,6 +78,10 @@ export class JsPackageManagerFactory {
       return new NPMProxy({ cwd });
     }
 
+    if (hasBunCommand && closestLockfile === BUN_LOCKFILE) {
+      return new BUNProxy({ cwd });
+    }
+
     // Option 3: If the user is running a command via npx/pnpx/yarn create/etc, we infer the package manager from the command
     const inferredPackageManager = this.inferPackageManagerFromUserAgent();
     if (inferredPackageManager && inferredPackageManager in this.PROXY_MAP) {
@@ -94,6 +103,7 @@ export class JsPackageManagerFactory {
     pnpm: PNPMProxy,
     yarn1: Yarn1Proxy,
     yarn2: Yarn2Proxy,
+    bun: BUNProxy,
   };
 
   /**
@@ -129,18 +139,35 @@ function hasNPM(cwd?: string) {
     cwd,
     shell: true,
     env: {
+      ...process.env,
       COREPACK_ENABLE_STRICT: '0',
+      COREPACK_ENABLE_AUTO_PIN: '0',
     },
   });
   return npmVersionCommand.status === 0;
 }
 
+function hasBun(cwd?: string) {
+  const pnpmVersionCommand = spawnSync('bun', ['--version'], {
+    cwd,
+    shell: true,
+    env: {
+      ...process.env,
+      COREPACK_ENABLE_STRICT: '0',
+      COREPACK_ENABLE_AUTO_PIN: '0',
+    },
+  });
+  return pnpmVersionCommand.status === 0;
+}
+
 function hasPNPM(cwd?: string) {
   const pnpmVersionCommand = spawnSync('pnpm', ['--version'], {
     cwd,
     shell: true,
     env: {
+      ...process.env,
       COREPACK_ENABLE_STRICT: '0',
+      COREPACK_ENABLE_AUTO_PIN: '0',
     },
   });
   return pnpmVersionCommand.status === 0;
@@ -151,7 +178,9 @@ function getYarnVersion(cwd?: string): 1 | 2 | undefined {
     cwd,
     shell: true,
     env: {
+      ...process.env,
       COREPACK_ENABLE_STRICT: '0',
+      COREPACK_ENABLE_AUTO_PIN: '0',
     },
   });
 
diff --git a/code/core/src/common/js-package-manager/NPMProxy.test.ts b/code/core/src/common/js-package-manager/NPMProxy.test.ts
index 4a783017d917..11f34a986bf1 100644
--- a/code/core/src/common/js-package-manager/NPMProxy.test.ts
+++ b/code/core/src/common/js-package-manager/NPMProxy.test.ts
@@ -428,7 +428,7 @@ describe('NPM Proxy', () => {
 
   describe('parseErrors', () => {
     it('should parse npm errors', () => {
-      const NPM_RESOLVE_ERROR_SAMPLE = `
+      const NPM_LEGACY_RESOLVE_ERROR_SAMPLE = `
         npm ERR!
         npm ERR! code ERESOLVE
         npm ERR! ERESOLVE unable to resolve dependency tree
@@ -439,6 +439,17 @@ describe('NPM Proxy', () => {
         npm ERR!   react@"30" from the root project
         `;
 
+      const NPM_RESOLVE_ERROR_SAMPLE = `
+        npm error
+        npm error code ERESOLVE
+        npm error ERESOLVE unable to resolve dependency tree
+        npm error 
+        npm error While resolving: before-storybook@1.0.0
+        npm error Found: react@undefined
+        npm error node_modules/react
+        npm error   react@"30" from the root project
+        `;
+
       const NPM_TIMEOUT_ERROR_SAMPLE = `
           npm notice 
           npm notice New major version of npm available! 8.5.0 -> 9.6.7
@@ -451,6 +462,9 @@ describe('NPM Proxy', () => {
           npm ERR! network This is a problem related to network connectivity.
       `;
 
+      expect(npmProxy.parseErrorFromLogs(NPM_LEGACY_RESOLVE_ERROR_SAMPLE)).toEqual(
+        'NPM error ERESOLVE - Dependency resolution error.'
+      );
       expect(npmProxy.parseErrorFromLogs(NPM_RESOLVE_ERROR_SAMPLE)).toEqual(
         'NPM error ERESOLVE - Dependency resolution error.'
       );
diff --git a/code/core/src/common/js-package-manager/NPMProxy.ts b/code/core/src/common/js-package-manager/NPMProxy.ts
index 2c534dfc0427..5acc1a4dd18c 100644
--- a/code/core/src/common/js-package-manager/NPMProxy.ts
+++ b/code/core/src/common/js-package-manager/NPMProxy.ts
@@ -28,8 +28,8 @@ type NpmDependencies = {
 export type NpmListOutput = {
   dependencies: NpmDependencies;
 };
+const NPM_ERROR_REGEX = /npm (ERR!|error) (code|errno) (\w+)/i;
 
-const NPM_ERROR_REGEX = /npm ERR! code (\w+)/;
 const NPM_ERROR_CODES = {
   E401: 'Authentication failed or is required.',
   E403: 'Access to the resource is forbidden.',
@@ -81,8 +81,8 @@ export class NPMProxy extends JsPackageManager {
     return `npm run ${command}`;
   }
 
-  async getNpmVersion(): Promise<string> {
-    return this.executeCommand({ command: 'npm', args: ['--version'] });
+  getRemoteRunCommand(): string {
+    return 'npx';
   }
 
   public async getPackageJSON(
@@ -316,7 +316,7 @@ export class NPMProxy extends JsPackageManager {
     const match = logs.match(NPM_ERROR_REGEX);
 
     if (match) {
-      const errorCode = match[1] as keyof typeof NPM_ERROR_CODES;
+      const errorCode = match[3] as keyof typeof NPM_ERROR_CODES;
       if (errorCode) {
         finalMessage = `${finalMessage} ${errorCode}`;
       }
diff --git a/code/core/src/common/js-package-manager/PNPMProxy.ts b/code/core/src/common/js-package-manager/PNPMProxy.ts
index 3f4073c6f35e..4149682c490b 100644
--- a/code/core/src/common/js-package-manager/PNPMProxy.ts
+++ b/code/core/src/common/js-package-manager/PNPMProxy.ts
@@ -59,6 +59,10 @@ export class PNPMProxy extends JsPackageManager {
     return `pnpm run ${command}`;
   }
 
+  getRemoteRunCommand(): string {
+    return 'pnpm dlx';
+  }
+
   async getPnpmVersion(): Promise<string> {
     return this.executeCommand({
       command: 'pnpm',
diff --git a/code/core/src/common/js-package-manager/Yarn1Proxy.ts b/code/core/src/common/js-package-manager/Yarn1Proxy.ts
index 3bbe338c0767..72860a209a9a 100644
--- a/code/core/src/common/js-package-manager/Yarn1Proxy.ts
+++ b/code/core/src/common/js-package-manager/Yarn1Proxy.ts
@@ -53,6 +53,10 @@ export class Yarn1Proxy extends JsPackageManager {
     return `yarn ${command}`;
   }
 
+  getRemoteRunCommand(): string {
+    return 'npx';
+  }
+
   public runPackageCommandSync(
     command: string,
     args: string[],
diff --git a/code/core/src/common/js-package-manager/Yarn2Proxy.ts b/code/core/src/common/js-package-manager/Yarn2Proxy.ts
index 711d34240292..75b5b5878ba6 100644
--- a/code/core/src/common/js-package-manager/Yarn2Proxy.ts
+++ b/code/core/src/common/js-package-manager/Yarn2Proxy.ts
@@ -96,6 +96,10 @@ export class Yarn2Proxy extends JsPackageManager {
     return `yarn ${command}`;
   }
 
+  getRemoteRunCommand(): string {
+    return 'yarn dlx';
+  }
+
   public runPackageCommandSync(
     command: string,
     args: string[],
diff --git a/code/core/src/common/presets.ts b/code/core/src/common/presets.ts
index c578b0502889..b85b35d62b77 100644
--- a/code/core/src/common/presets.ts
+++ b/code/core/src/common/presets.ts
@@ -198,7 +198,7 @@ const map =
       resolved = resolveAddonName(configDir, name, options);
     } catch (err) {
       logger.error(
-        `Addon value should end in /manager or /preview or /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/\n${item}`
+        `Addon value should end in /manager or /preview or /register OR it should be a valid preset https://storybook.js.org/docs/addons/writing-presets/\n${item}`
       );
       return undefined;
     }
diff --git a/code/core/src/common/utils/file-cache.ts b/code/core/src/common/utils/file-cache.ts
index de65cc988383..d3ee7dd4ecac 100644
--- a/code/core/src/common/utils/file-cache.ts
+++ b/code/core/src/common/utils/file-cache.ts
@@ -1,11 +1,160 @@
-import * as fsc from 'file-system-cache';
+/** This file is a modified copy from https://git.nfp.is/TheThing/fs-cache-fast */
+import { createHash, randomBytes } from 'node:crypto';
+import { mkdirSync, readFileSync, readdirSync, rmSync, writeFileSync } from 'node:fs';
+import { readFile, readdir, rm, writeFile } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
 
-// @ts-expect-error (needed due to it's use of `exports.default`)
-const Cache = (fsc.default.default || fsc.default) as typeof fsc.default;
+interface FileSystemCacheOptions {
+  ns?: string;
+  prefix?: string;
+  hash_alg?: string;
+  basePath?: string;
+  ttl?: number;
+}
+
+interface CacheItem {
+  key: string;
+  content?: any;
+  value?: any;
+}
+
+interface CacheSetOptions {
+  ttl?: number;
+  encoding?: BufferEncoding;
+}
+
+export class FileSystemCache {
+  private prefix: string;
+
+  private hash_alg: string;
+
+  private cache_dir: string;
+
+  private ttl: number;
+
+  constructor(options: FileSystemCacheOptions = {}) {
+    this.prefix = (options.ns || options.prefix || '') + '-';
+    this.hash_alg = options.hash_alg || 'md5';
+    this.cache_dir =
+      options.basePath || join(tmpdir(), randomBytes(15).toString('base64').replace(/\//g, '-'));
+    this.ttl = options.ttl || 0;
+    createHash(this.hash_alg); // Verifies hash algorithm is available
+    mkdirSync(this.cache_dir, { recursive: true });
+  }
+
+  private generateHash(name: string): string {
+    return join(this.cache_dir, this.prefix + createHash(this.hash_alg).update(name).digest('hex'));
+  }
+
+  private isExpired(parsed: { ttl?: number }, now: number): boolean {
+    return parsed.ttl != null && now > parsed.ttl;
+  }
+
+  private parseCacheData<T>(data: string, fallback: T | null): T | null {
+    const parsed = JSON.parse(data);
+    return this.isExpired(parsed, Date.now()) ? fallback : (parsed.content as T);
+  }
 
-export type Options = Parameters<typeof Cache>['0'];
-export type FileSystemCache = ReturnType<typeof Cache>;
+  private parseSetData<T>(key: string, data: T, opts: CacheSetOptions = {}): string {
+    const ttl = opts.ttl ?? this.ttl;
+    return JSON.stringify({ key, content: data, ...(ttl && { ttl: Date.now() + ttl * 1000 }) });
+  }
+
+  public async get<T = any>(name: string, fallback?: T): Promise<T> {
+    try {
+      const data = await readFile(this.generateHash(name), 'utf8');
+      return this.parseCacheData(data, fallback) as T;
+    } catch {
+      return fallback as T;
+    }
+  }
+
+  public getSync<T>(name: string, fallback?: T): T {
+    try {
+      const data = readFileSync(this.generateHash(name), 'utf8');
+      return this.parseCacheData(data, fallback) as T;
+    } catch {
+      return fallback as T;
+    }
+  }
+
+  public async set<T>(
+    name: string,
+    data: T,
+    orgOpts: CacheSetOptions | number = {}
+  ): Promise<void> {
+    const opts: CacheSetOptions = typeof orgOpts === 'number' ? { ttl: orgOpts } : orgOpts;
+    mkdirSync(this.cache_dir, { recursive: true });
+    await writeFile(this.generateHash(name), this.parseSetData(name, data, opts), {
+      encoding: opts.encoding || 'utf8',
+    });
+  }
+
+  public setSync<T>(name: string, data: T, orgOpts: CacheSetOptions | number = {}): void {
+    const opts: CacheSetOptions = typeof orgOpts === 'number' ? { ttl: orgOpts } : orgOpts;
+    mkdirSync(this.cache_dir, { recursive: true });
+    writeFileSync(this.generateHash(name), this.parseSetData(name, data, opts), {
+      encoding: opts.encoding || 'utf8',
+    });
+  }
+
+  public async setMany(items: CacheItem[], options?: CacheSetOptions): Promise<void> {
+    await Promise.all(items.map((item) => this.set(item.key, item.content ?? item.value, options)));
+  }
+
+  public setManySync(items: CacheItem[], options?: CacheSetOptions): void {
+    items.forEach((item) => this.setSync(item.key, item.content ?? item.value, options));
+  }
+
+  public async remove(name: string): Promise<void> {
+    await rm(this.generateHash(name), { force: true });
+  }
+
+  public removeSync(name: string): void {
+    rmSync(this.generateHash(name), { force: true });
+  }
+
+  public async clear(): Promise<void> {
+    const files = await readdir(this.cache_dir);
+    await Promise.all(
+      files
+        .filter((f) => f.startsWith(this.prefix))
+        .map((f) => rm(join(this.cache_dir, f), { force: true }))
+    );
+  }
+
+  public clearSync(): void {
+    readdirSync(this.cache_dir)
+      .filter((f) => f.startsWith(this.prefix))
+      .forEach((f) => rmSync(join(this.cache_dir, f), { force: true }));
+  }
+
+  public async getAll(): Promise<CacheItem[]> {
+    const now = Date.now();
+    const files = await readdir(this.cache_dir);
+    const items = await Promise.all(
+      files
+        .filter((f) => f.startsWith(this.prefix))
+        .map((f) => readFile(join(this.cache_dir, f), 'utf8'))
+    );
+    return items
+      .map((data) => JSON.parse(data))
+      .filter((entry) => entry.content && !this.isExpired(entry, now));
+  }
+
+  public async load(): Promise<{ files: CacheItem[] }> {
+    const res = await this.getAll();
+    return {
+      files: res.map((entry) => ({
+        path: this.generateHash(entry.key),
+        value: entry.content,
+        key: entry.key,
+      })),
+    };
+  }
+}
 
-export function createFileSystemCache(options: Options): FileSystemCache {
-  return Cache(options);
+export function createFileSystemCache(options: FileSystemCacheOptions): FileSystemCache {
+  return new FileSystemCache(options);
 }
diff --git a/code/core/src/common/utils/framework-to-renderer.ts b/code/core/src/common/utils/framework-to-renderer.ts
index 1dd1fa0b811e..72cb4c1e2484 100644
--- a/code/core/src/common/utils/framework-to-renderer.ts
+++ b/code/core/src/common/utils/framework-to-renderer.ts
@@ -24,6 +24,7 @@ export const frameworkToRenderer: Record<
   sveltekit: 'svelte',
   'vue3-vite': 'vue3',
   'vue3-webpack5': 'vue3',
+  nuxt: 'vue3',
   'web-components-vite': 'web-components',
   'web-components-webpack5': 'web-components',
   'react-rsbuild': 'react',
@@ -32,6 +33,7 @@ export const frameworkToRenderer: Record<
   html: 'html',
   preact: 'preact',
   'react-native': 'react-native',
+  'react-native-web-vite': 'react',
   react: 'react',
   server: 'server',
   svelte: 'svelte',
diff --git a/code/core/src/common/utils/get-storybook-info.ts b/code/core/src/common/utils/get-storybook-info.ts
index a7e887a87d63..ce6d5670f7f1 100644
--- a/code/core/src/common/utils/get-storybook-info.ts
+++ b/code/core/src/common/utils/get-storybook-info.ts
@@ -41,6 +41,8 @@ export const frameworkPackages: Record<string, SupportedFrameworks> = {
   '@storybook/svelte-webpack5': 'svelte-webpack5',
   '@storybook/sveltekit': 'sveltekit',
   '@storybook/vue3-vite': 'vue3-vite',
+  '@storybook/experimental-nextjs-vite': 'experimental-nextjs-vite',
+  '@storybook/react-native-web-vite': 'react-native-web-vite',
   '@storybook/vue3-webpack5': 'vue3-webpack5',
   '@storybook/web-components-vite': 'web-components-vite',
   '@storybook/web-components-webpack5': 'web-components-webpack5',
diff --git a/code/core/src/common/utils/handlebars.ts b/code/core/src/common/utils/handlebars.ts
deleted file mode 100644
index 56a79a03e963..000000000000
--- a/code/core/src/common/utils/handlebars.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import Handlebars from 'handlebars';
-
-export function handlebars(source: string, data: any) {
-  const template = Handlebars.compile(source);
-
-  return template(data);
-}
diff --git a/code/core/src/common/utils/log-config.ts b/code/core/src/common/utils/log-config.ts
index 5d50f0285298..aab43e9b29ec 100644
--- a/code/core/src/common/utils/log-config.ts
+++ b/code/core/src/common/utils/log-config.ts
@@ -1,6 +1,6 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 
 export function logConfig(caption: unknown, config: unknown) {
-  console.log(chalk.cyan(caption));
+  console.log(picocolors.cyan(String(caption)));
   console.dir(config, { depth: null });
 }
diff --git a/code/core/src/common/utils/log.ts b/code/core/src/common/utils/log.ts
index 43119e616b24..3f7e8d51cb72 100644
--- a/code/core/src/common/utils/log.ts
+++ b/code/core/src/common/utils/log.ts
@@ -1,15 +1,15 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 
 const logger = console;
 
 export const commandLog = (message: string) => {
-  process.stdout.write(chalk.cyan(' • ') + message);
+  process.stdout.write(picocolors.cyan(' • ') + message);
 
   // Need `void` to be able to use this function in a then of a Promise<void>
   return (errorMessage?: string | void, errorInfo?: string) => {
     if (errorMessage) {
-      process.stdout.write(`. ${chalk.red('✖')}\n`);
-      logger.error(`\n     ${chalk.red(errorMessage)}`);
+      process.stdout.write(`. ${picocolors.red('✖')}\n`);
+      logger.error(`\n     ${picocolors.red(errorMessage)}`);
 
       if (!errorInfo) {
         return;
@@ -17,13 +17,13 @@ export const commandLog = (message: string) => {
 
       const newErrorInfo = errorInfo
         .split('\n')
-        .map((line) => `     ${chalk.dim(line)}`)
+        .map((line) => `     ${picocolors.dim(line)}`)
         .join('\n');
       logger.error(`${newErrorInfo}\n`);
       return;
     }
 
-    process.stdout.write(`. ${chalk.green('✓')}\n`);
+    process.stdout.write(`. ${picocolors.green('✓')}\n`);
   };
 };
 
@@ -56,7 +56,7 @@ export function codeLog(codeLines: string[], leftPadAmount?: number) {
     .map((line) => {
       const rightPadAmount = maxLength - line.length;
       let newLine = line + getChars(' ', rightPadAmount);
-      newLine = getChars(' ', leftPadAmount || 2) + chalk.inverse(` ${newLine} `);
+      newLine = getChars(' ', leftPadAmount || 2) + picocolors.inverse(` ${newLine} `);
       return newLine;
     })
     .join('\n');
diff --git a/code/core/src/common/utils/notify-telemetry.ts b/code/core/src/common/utils/notify-telemetry.ts
index bb39028dedeb..4857fba0631b 100644
--- a/code/core/src/common/utils/notify-telemetry.ts
+++ b/code/core/src/common/utils/notify-telemetry.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 
 import { cache } from './cache';
 
@@ -19,14 +19,14 @@ export const notifyTelemetry = async () => {
   cache.set(TELEMETRY_KEY_NOTIFY_DATE, Date.now().toString());
 
   logger.log(
-    `${chalk.magenta.bold(
-      'Attention'
+    `${picocolors.magenta(
+      picocolors.bold('Attention')
     )}: Storybook now collects completely anonymous telemetry regarding usage.`
   );
   logger.log(`This information is used to shape Storybook's roadmap and prioritize features.`);
   logger.log(
     `You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:`
   );
-  logger.log(chalk.cyan('https://storybook.js.org/telemetry'));
+  logger.log(picocolors.cyan('https://storybook.js.org/telemetry'));
   logger.log();
 };
diff --git a/code/core/src/common/utils/remove.ts b/code/core/src/common/utils/remove.ts
index 033e193d5336..24879cf36169 100644
--- a/code/core/src/common/utils/remove.ts
+++ b/code/core/src/common/utils/remove.ts
@@ -19,13 +19,13 @@ const logger = console;
  */
 export async function removeAddon(
   addon: string,
-  options: { packageManager?: PackageManagerName } = {}
+  options: { packageManager?: PackageManagerName; cwd?: string; configDir?: string } = {}
 ) {
   const { packageManager: pkgMgr } = options;
 
-  const packageManager = JsPackageManagerFactory.getPackageManager({ force: pkgMgr });
+  const packageManager = JsPackageManagerFactory.getPackageManager({ force: pkgMgr }, options.cwd);
   const packageJson = await packageManager.retrievePackageJson();
-  const { mainConfig, configDir } = getStorybookInfo(packageJson);
+  const { mainConfig, configDir, ...rest } = getStorybookInfo(packageJson, options.configDir);
 
   if (typeof configDir === 'undefined') {
     throw new Error(dedent`
diff --git a/code/core/src/common/utils/validate-configuration-files.ts b/code/core/src/common/utils/validate-configuration-files.ts
index 3e35a6f2bafb..ccd0dba864ea 100644
--- a/code/core/src/common/utils/validate-configuration-files.ts
+++ b/code/core/src/common/utils/validate-configuration-files.ts
@@ -3,6 +3,7 @@ import { resolve } from 'node:path';
 import { once } from '@storybook/core/node-logger';
 import { MainFileMissingError } from '@storybook/core/server-errors';
 
+// eslint-disable-next-line depend/ban-dependencies
 import { glob } from 'glob';
 import slash from 'slash';
 import { dedent } from 'ts-dedent';
diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts
index 11ac53790fcd..1b87cbdf7440 100644
--- a/code/core/src/common/versions.ts
+++ b/code/core/src/common/versions.ts
@@ -1,87 +1,88 @@
 // auto generated file, do not edit
 export default {
-  '@storybook/addon-a11y': '8.4.0-alpha.0',
-  '@storybook/addon-actions': '8.4.0-alpha.0',
-  '@storybook/addon-backgrounds': '8.4.0-alpha.0',
-  '@storybook/addon-controls': '8.4.0-alpha.0',
-  '@storybook/addon-docs': '8.4.0-alpha.0',
-  '@storybook/addon-essentials': '8.4.0-alpha.0',
-  '@storybook/addon-mdx-gfm': '8.4.0-alpha.0',
-  '@storybook/addon-highlight': '8.4.0-alpha.0',
-  '@storybook/addon-interactions': '8.4.0-alpha.0',
-  '@storybook/addon-jest': '8.4.0-alpha.0',
-  '@storybook/addon-links': '8.4.0-alpha.0',
-  '@storybook/addon-measure': '8.4.0-alpha.0',
-  '@storybook/addon-onboarding': '8.4.0-alpha.0',
-  '@storybook/addon-outline': '8.4.0-alpha.0',
-  '@storybook/addon-storysource': '8.4.0-alpha.0',
-  '@storybook/experimental-addon-test': '8.4.0-alpha.0',
-  '@storybook/addon-themes': '8.4.0-alpha.0',
-  '@storybook/addon-toolbars': '8.4.0-alpha.0',
-  '@storybook/addon-viewport': '8.4.0-alpha.0',
-  '@storybook/builder-vite': '8.4.0-alpha.0',
-  '@storybook/builder-webpack5': '8.4.0-alpha.0',
-  '@storybook/core': '8.4.0-alpha.0',
-  '@storybook/builder-manager': '8.4.0-alpha.0',
-  '@storybook/channels': '8.4.0-alpha.0',
-  '@storybook/client-logger': '8.4.0-alpha.0',
-  '@storybook/components': '8.4.0-alpha.0',
-  '@storybook/core-common': '8.4.0-alpha.0',
-  '@storybook/core-events': '8.4.0-alpha.0',
-  '@storybook/core-server': '8.4.0-alpha.0',
-  '@storybook/csf-tools': '8.4.0-alpha.0',
-  '@storybook/docs-tools': '8.4.0-alpha.0',
-  '@storybook/manager': '8.4.0-alpha.0',
-  '@storybook/manager-api': '8.4.0-alpha.0',
-  '@storybook/node-logger': '8.4.0-alpha.0',
-  '@storybook/preview': '8.4.0-alpha.0',
-  '@storybook/preview-api': '8.4.0-alpha.0',
-  '@storybook/router': '8.4.0-alpha.0',
-  '@storybook/telemetry': '8.4.0-alpha.0',
-  '@storybook/theming': '8.4.0-alpha.0',
-  '@storybook/types': '8.4.0-alpha.0',
-  '@storybook/angular': '8.4.0-alpha.0',
-  '@storybook/ember': '8.4.0-alpha.0',
-  '@storybook/experimental-nextjs-vite': '8.4.0-alpha.0',
-  '@storybook/html-vite': '8.4.0-alpha.0',
-  '@storybook/html-webpack5': '8.4.0-alpha.0',
-  '@storybook/nextjs': '8.4.0-alpha.0',
-  '@storybook/preact-vite': '8.4.0-alpha.0',
-  '@storybook/preact-webpack5': '8.4.0-alpha.0',
-  '@storybook/react-vite': '8.4.0-alpha.0',
-  '@storybook/react-webpack5': '8.4.0-alpha.0',
-  '@storybook/server-webpack5': '8.4.0-alpha.0',
-  '@storybook/svelte-vite': '8.4.0-alpha.0',
-  '@storybook/svelte-webpack5': '8.4.0-alpha.0',
-  '@storybook/sveltekit': '8.4.0-alpha.0',
-  '@storybook/vue3-vite': '8.4.0-alpha.0',
-  '@storybook/vue3-webpack5': '8.4.0-alpha.0',
-  '@storybook/web-components-vite': '8.4.0-alpha.0',
-  '@storybook/web-components-webpack5': '8.4.0-alpha.0',
-  '@storybook/blocks': '8.4.0-alpha.0',
-  storybook: '8.4.0-alpha.0',
-  sb: '8.4.0-alpha.0',
-  '@storybook/cli': '8.4.0-alpha.0',
-  '@storybook/codemod': '8.4.0-alpha.0',
-  '@storybook/core-webpack': '8.4.0-alpha.0',
-  'create-storybook': '8.4.0-alpha.0',
-  '@storybook/csf-plugin': '8.4.0-alpha.0',
-  '@storybook/instrumenter': '8.4.0-alpha.0',
-  '@storybook/react-dom-shim': '8.4.0-alpha.0',
-  '@storybook/source-loader': '8.4.0-alpha.0',
-  '@storybook/test': '8.4.0-alpha.0',
-  '@storybook/preset-create-react-app': '8.4.0-alpha.0',
-  '@storybook/preset-html-webpack': '8.4.0-alpha.0',
-  '@storybook/preset-preact-webpack': '8.4.0-alpha.0',
-  '@storybook/preset-react-webpack': '8.4.0-alpha.0',
-  '@storybook/preset-server-webpack': '8.4.0-alpha.0',
-  '@storybook/preset-svelte-webpack': '8.4.0-alpha.0',
-  '@storybook/preset-vue3-webpack': '8.4.0-alpha.0',
-  '@storybook/html': '8.4.0-alpha.0',
-  '@storybook/preact': '8.4.0-alpha.0',
-  '@storybook/react': '8.4.0-alpha.0',
-  '@storybook/server': '8.4.0-alpha.0',
-  '@storybook/svelte': '8.4.0-alpha.0',
-  '@storybook/vue3': '8.4.0-alpha.0',
-  '@storybook/web-components': '8.4.0-alpha.0',
+  '@storybook/addon-a11y': '8.5.0-beta.5',
+  '@storybook/addon-actions': '8.5.0-beta.5',
+  '@storybook/addon-backgrounds': '8.5.0-beta.5',
+  '@storybook/addon-controls': '8.5.0-beta.5',
+  '@storybook/addon-docs': '8.5.0-beta.5',
+  '@storybook/addon-essentials': '8.5.0-beta.5',
+  '@storybook/addon-mdx-gfm': '8.5.0-beta.5',
+  '@storybook/addon-highlight': '8.5.0-beta.5',
+  '@storybook/addon-interactions': '8.5.0-beta.5',
+  '@storybook/addon-jest': '8.5.0-beta.5',
+  '@storybook/addon-links': '8.5.0-beta.5',
+  '@storybook/addon-measure': '8.5.0-beta.5',
+  '@storybook/addon-onboarding': '8.5.0-beta.5',
+  '@storybook/addon-outline': '8.5.0-beta.5',
+  '@storybook/addon-storysource': '8.5.0-beta.5',
+  '@storybook/experimental-addon-test': '8.5.0-beta.5',
+  '@storybook/addon-themes': '8.5.0-beta.5',
+  '@storybook/addon-toolbars': '8.5.0-beta.5',
+  '@storybook/addon-viewport': '8.5.0-beta.5',
+  '@storybook/builder-vite': '8.5.0-beta.5',
+  '@storybook/builder-webpack5': '8.5.0-beta.5',
+  '@storybook/core': '8.5.0-beta.5',
+  '@storybook/builder-manager': '8.5.0-beta.5',
+  '@storybook/channels': '8.5.0-beta.5',
+  '@storybook/client-logger': '8.5.0-beta.5',
+  '@storybook/components': '8.5.0-beta.5',
+  '@storybook/core-common': '8.5.0-beta.5',
+  '@storybook/core-events': '8.5.0-beta.5',
+  '@storybook/core-server': '8.5.0-beta.5',
+  '@storybook/csf-tools': '8.5.0-beta.5',
+  '@storybook/docs-tools': '8.5.0-beta.5',
+  '@storybook/manager': '8.5.0-beta.5',
+  '@storybook/manager-api': '8.5.0-beta.5',
+  '@storybook/node-logger': '8.5.0-beta.5',
+  '@storybook/preview': '8.5.0-beta.5',
+  '@storybook/preview-api': '8.5.0-beta.5',
+  '@storybook/router': '8.5.0-beta.5',
+  '@storybook/telemetry': '8.5.0-beta.5',
+  '@storybook/theming': '8.5.0-beta.5',
+  '@storybook/types': '8.5.0-beta.5',
+  '@storybook/angular': '8.5.0-beta.5',
+  '@storybook/ember': '8.5.0-beta.5',
+  '@storybook/experimental-nextjs-vite': '8.5.0-beta.5',
+  '@storybook/html-vite': '8.5.0-beta.5',
+  '@storybook/html-webpack5': '8.5.0-beta.5',
+  '@storybook/nextjs': '8.5.0-beta.5',
+  '@storybook/preact-vite': '8.5.0-beta.5',
+  '@storybook/preact-webpack5': '8.5.0-beta.5',
+  '@storybook/react-native-web-vite': '8.5.0-beta.5',
+  '@storybook/react-vite': '8.5.0-beta.5',
+  '@storybook/react-webpack5': '8.5.0-beta.5',
+  '@storybook/server-webpack5': '8.5.0-beta.5',
+  '@storybook/svelte-vite': '8.5.0-beta.5',
+  '@storybook/svelte-webpack5': '8.5.0-beta.5',
+  '@storybook/sveltekit': '8.5.0-beta.5',
+  '@storybook/vue3-vite': '8.5.0-beta.5',
+  '@storybook/vue3-webpack5': '8.5.0-beta.5',
+  '@storybook/web-components-vite': '8.5.0-beta.5',
+  '@storybook/web-components-webpack5': '8.5.0-beta.5',
+  '@storybook/blocks': '8.5.0-beta.5',
+  storybook: '8.5.0-beta.5',
+  sb: '8.5.0-beta.5',
+  '@storybook/cli': '8.5.0-beta.5',
+  '@storybook/codemod': '8.5.0-beta.5',
+  '@storybook/core-webpack': '8.5.0-beta.5',
+  'create-storybook': '8.5.0-beta.5',
+  '@storybook/csf-plugin': '8.5.0-beta.5',
+  '@storybook/instrumenter': '8.5.0-beta.5',
+  '@storybook/react-dom-shim': '8.5.0-beta.5',
+  '@storybook/source-loader': '8.5.0-beta.5',
+  '@storybook/test': '8.5.0-beta.5',
+  '@storybook/preset-create-react-app': '8.5.0-beta.5',
+  '@storybook/preset-html-webpack': '8.5.0-beta.5',
+  '@storybook/preset-preact-webpack': '8.5.0-beta.5',
+  '@storybook/preset-react-webpack': '8.5.0-beta.5',
+  '@storybook/preset-server-webpack': '8.5.0-beta.5',
+  '@storybook/preset-svelte-webpack': '8.5.0-beta.5',
+  '@storybook/preset-vue3-webpack': '8.5.0-beta.5',
+  '@storybook/html': '8.5.0-beta.5',
+  '@storybook/preact': '8.5.0-beta.5',
+  '@storybook/react': '8.5.0-beta.5',
+  '@storybook/server': '8.5.0-beta.5',
+  '@storybook/svelte': '8.5.0-beta.5',
+  '@storybook/vue3': '8.5.0-beta.5',
+  '@storybook/web-components': '8.5.0-beta.5',
 };
diff --git a/code/core/src/components/components/Button/Button.tsx b/code/core/src/components/components/Button/Button.tsx
index 7c0c8db3da44..a1804ebac153 100644
--- a/code/core/src/components/components/Button/Button.tsx
+++ b/code/core/src/components/components/Button/Button.tsx
@@ -11,7 +11,7 @@ import { darken, lighten, rgba, transparentize } from 'polished';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   asChild?: boolean;
   size?: 'small' | 'medium';
-  padding?: 'small' | 'medium';
+  padding?: 'small' | 'medium' | 'none';
   variant?: 'outline' | 'solid' | 'ghost';
   onClick?: (event: SyntheticEvent) => void;
   disabled?: boolean;
@@ -159,18 +159,18 @@ const StyledButton = styled('button', {
   justifyContent: 'center',
   overflow: 'hidden',
   padding: (() => {
+    if (padding === 'none') {
+      return 0;
+    }
     if (padding === 'small' && size === 'small') {
       return '0 7px';
     }
-
     if (padding === 'small' && size === 'medium') {
       return '0 9px';
     }
-
     if (size === 'small') {
       return '0 10px';
     }
-
     if (size === 'medium') {
       return '0 12px';
     }
diff --git a/code/core/src/components/components/Loader/Loader.tsx b/code/core/src/components/components/Loader/Loader.tsx
index 26d01ad3f05d..dace42a9b351 100644
--- a/code/core/src/components/components/Loader/Loader.tsx
+++ b/code/core/src/components/components/Loader/Loader.tsx
@@ -63,7 +63,7 @@ const ProgressBar = styled.div(({ theme }) => ({
 const ProgressMessage = styled.div(({ theme }) => ({
   minHeight: '2em',
   fontSize: `${theme.typography.size.s1}px`,
-  color: theme.barTextColor,
+  color: theme.textMutedColor,
 }));
 
 const ErrorIcon = styled(LightningOffIcon)(({ theme }) => ({
diff --git a/code/core/src/components/components/Modal/Modal.stories.tsx b/code/core/src/components/components/Modal/Modal.stories.tsx
index 0793d24c8db5..998e033d312e 100644
--- a/code/core/src/components/components/Modal/Modal.stories.tsx
+++ b/code/core/src/components/components/Modal/Modal.stories.tsx
@@ -10,7 +10,21 @@ type Story = StoryObj<typeof meta>;
 
 const meta = {
   component: Modal,
-  decorators: [(storyFn) => <div style={{ width: '1200px', height: '800px' }}>{storyFn()}</div>],
+  decorators: [
+    (storyFn) => (
+      <div
+        style={{
+          width: '100%',
+          minWidth: '1200px',
+          height: '800px',
+          background:
+            'repeating-linear-gradient(45deg, #000000, #ffffff 50px, #ffffff 50px, #ffffff 80px)',
+        }}
+      >
+        {storyFn()}
+      </div>
+    ),
+  ],
 } satisfies Meta<typeof Modal>;
 
 export default meta;
diff --git a/code/core/src/components/components/Modal/Modal.styled.tsx b/code/core/src/components/components/Modal/Modal.styled.tsx
index ca56fb05627e..37bb8be84404 100644
--- a/code/core/src/components/components/Modal/Modal.styled.tsx
+++ b/code/core/src/components/components/Modal/Modal.styled.tsx
@@ -30,7 +30,7 @@ const zoomIn = keyframes({
 });
 
 export const Overlay = styled.div({
-  backgroundColor: 'rgba(27, 28, 29, 0.2)',
+  backdropFilter: 'blur(24px)',
   position: 'fixed',
   inset: 0,
   width: '100%',
@@ -43,7 +43,7 @@ export const Container = styled.div<{ width?: number; height?: number }>(
   ({ theme, width, height }) => ({
     backgroundColor: theme.background.bar,
     borderRadius: 6,
-    boxShadow: `rgba(255, 255, 255, 0.05) 0 0 0 1px inset, rgba(14, 18, 22, 0.35) 0px 10px 38px -10px`,
+    boxShadow: '0px 4px 67px 0px #00000040',
     position: 'fixed',
     top: '50%',
     left: '50%',
diff --git a/code/core/src/components/components/ProgressSpinner/ProgressSpinner.stories.tsx b/code/core/src/components/components/ProgressSpinner/ProgressSpinner.stories.tsx
new file mode 100644
index 000000000000..b0f03752bede
--- /dev/null
+++ b/code/core/src/components/components/ProgressSpinner/ProgressSpinner.stories.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+
+import { StopAltIcon } from '@storybook/icons';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ProgressSpinner } from './ProgressSpinner';
+
+const meta = {
+  component: ProgressSpinner,
+} satisfies Meta<typeof ProgressSpinner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Forty: Story = {
+  args: {
+    percentage: 40,
+  },
+};
+
+export const Seventy: Story = {
+  args: {
+    percentage: 70,
+  },
+};
+
+export const Zero: Story = {
+  args: {
+    percentage: 0,
+  },
+};
+
+export const Small: Story = {
+  args: {
+    percentage: 40,
+    size: 16,
+  },
+};
+
+export const Thick: Story = {
+  args: {
+    percentage: 40,
+    width: 3,
+  },
+};
+
+export const Paused: Story = {
+  args: {
+    percentage: 40,
+    running: false,
+  },
+};
+
+export const Colored: Story = {
+  args: Forty.args,
+  decorators: [
+    (Story) => (
+      <div style={{ color: 'hotpink' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const WithContent: Story = {
+  ...Colored,
+  args: {
+    ...Colored.args,
+    children: <StopAltIcon size={10} />,
+  },
+};
diff --git a/code/core/src/components/components/ProgressSpinner/ProgressSpinner.tsx b/code/core/src/components/components/ProgressSpinner/ProgressSpinner.tsx
new file mode 100644
index 000000000000..02f81ab6d344
--- /dev/null
+++ b/code/core/src/components/components/ProgressSpinner/ProgressSpinner.tsx
@@ -0,0 +1,93 @@
+import React, { type ComponentProps } from 'react';
+
+import { keyframes, styled } from '@storybook/core/theming';
+
+const XMLNS = 'http://www.w3.org/2000/svg';
+
+const rotate = keyframes({
+  '0%': {
+    transform: 'rotate(0deg)',
+  },
+  '100%': {
+    transform: 'rotate(360deg)',
+  },
+});
+
+const Wrapper = styled.div<{ size: number }>(({ size }) => ({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  position: 'relative',
+  minWidth: size,
+  minHeight: size,
+}));
+
+const Circle = styled.svg<{ size: number; width: number; progress?: boolean; spinner?: boolean }>(
+  ({ size, width }) => ({
+    position: 'absolute',
+    width: `${size}px!important`,
+    height: `${size}px!important`,
+    transform: 'rotate(-90deg)',
+    circle: {
+      r: (size - Math.ceil(width)) / 2,
+      cx: size / 2,
+      cy: size / 2,
+      opacity: 0.15,
+      fill: 'transparent',
+      stroke: 'currentColor',
+      strokeWidth: width,
+      strokeLinecap: 'round',
+      strokeDasharray: Math.PI * (size - Math.ceil(width)),
+    },
+  }),
+  ({ progress }) =>
+    progress && {
+      circle: {
+        opacity: 0.75,
+      },
+    },
+  ({ spinner }) =>
+    spinner && {
+      animation: `${rotate} 1s linear infinite`,
+      circle: {
+        opacity: 0.25,
+      },
+    }
+);
+
+interface ProgressSpinnerProps extends Omit<ComponentProps<typeof Wrapper>, 'size'> {
+  percentage?: number;
+  running?: boolean;
+  size?: number;
+  width?: number;
+  children?: React.ReactNode;
+}
+
+export const ProgressSpinner = ({
+  percentage = undefined,
+  running = true,
+  size = 24,
+  width = 1.5,
+  children = null,
+  ...props
+}: ProgressSpinnerProps) =>
+  typeof percentage === 'number' ? (
+    <Wrapper size={size} {...props}>
+      {children}
+      <Circle size={size} width={width} xmlns={XMLNS}>
+        <circle />
+      </Circle>
+      {running && (
+        <Circle size={size} width={width} xmlns={XMLNS} spinner>
+          <circle strokeDashoffset={Math.PI * (size - Math.ceil(width)) * (1 - percentage / 100)} />
+        </Circle>
+      )}
+      <Circle size={size} width={width} xmlns={XMLNS} progress>
+        <circle strokeDashoffset={Math.PI * (size - Math.ceil(width)) * (1 - percentage / 100)} />
+      </Circle>
+    </Wrapper>
+  ) : (
+    <Wrapper size={size} {...props}>
+      {children}
+    </Wrapper>
+  );
diff --git a/code/core/src/components/components/ScrollArea/ScrollArea.tsx b/code/core/src/components/components/ScrollArea/ScrollArea.tsx
index aa1dff7b5c24..195f70d68b06 100644
--- a/code/core/src/components/components/ScrollArea/ScrollArea.tsx
+++ b/code/core/src/components/components/ScrollArea/ScrollArea.tsx
@@ -39,6 +39,7 @@ const ScrollAreaScrollbar = styled(ScrollAreaPrimitive.Scrollbar)<{
   background: 'transparent',
   transition: 'all 0.2s ease-out',
   borderRadius: 'var(--scrollbar-size)',
+  zIndex: 1,
 
   '&[data-orientation="vertical"]': {
     width: 'var(--scrollbar-size)',
diff --git a/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.stories.tsx b/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.stories.tsx
index cd1fbe7af16b..712b329ce2f0 100644
--- a/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.stories.tsx
+++ b/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.stories.tsx
@@ -187,10 +187,10 @@ export const Story = {
     const meta = {
       title: 'Example/Header',
       component: Header,
-      // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+      // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
       tags: ['autodocs'],
       parameters: {
-        // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
+        // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
         layout: 'fullscreen',
       },
     } satisfies Meta<typeof Header>;
diff --git a/code/core/src/components/components/tabs/tabs.stories.tsx b/code/core/src/components/components/tabs/tabs.stories.tsx
index 5e23fd7ecb7b..f70565a21029 100644
--- a/code/core/src/components/components/tabs/tabs.stories.tsx
+++ b/code/core/src/components/components/tabs/tabs.stories.tsx
@@ -180,11 +180,11 @@ const customViewports = {
 export const StatefulDynamicWithOpenTooltip = {
   parameters: {
     viewport: {
-      viewports: customViewports,
+      options: customViewports,
     },
     chromatic: { viewports: [380] },
   },
-  globals: { sb_theme: 'light', viewport: 'sized' },
+  globals: { sb_theme: 'light', viewport: { value: 'sized' } },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
diff --git a/code/core/src/components/components/tooltip/ListItem.tsx b/code/core/src/components/components/tooltip/ListItem.tsx
index 8d50a05273de..10e513cc1b6b 100644
--- a/code/core/src/components/components/tooltip/ListItem.tsx
+++ b/code/core/src/components/components/tooltip/ListItem.tsx
@@ -40,7 +40,7 @@ const Title = styled(({ active, loading, disabled, ...rest }: TitleProps) => <sp
   ({ disabled, theme }) =>
     disabled
       ? {
-          color: transparentize(0.7, theme.color.defaultText),
+          color: theme.textMutedColor,
         }
       : {}
 );
@@ -123,6 +123,7 @@ const Item = styled.div<ItemProps>(
   ({ theme }) => ({
     width: '100%',
     border: 'none',
+    borderRadius: theme.appBorderRadius,
     background: 'none',
     fontSize: theme.typography.size.s1,
     transition: 'all 150ms ease-out',
@@ -149,6 +150,15 @@ const Item = styled.div<ItemProps>(
         opacity: 1,
       },
     },
+  ({ theme, as }) =>
+    as === 'label' && {
+      '&:has(input:not(:disabled))': {
+        cursor: 'pointer',
+        '&:hover': {
+          background: theme.background.hoverable,
+        },
+      },
+    },
   ({ disabled }) => disabled && { cursor: 'not-allowed' }
 );
 
diff --git a/code/core/src/components/components/tooltip/Tooltip.tsx b/code/core/src/components/components/tooltip/Tooltip.tsx
index 77a6d4fc9c25..ef053f1baf5b 100644
--- a/code/core/src/components/components/tooltip/Tooltip.tsx
+++ b/code/core/src/components/components/tooltip/Tooltip.tsx
@@ -109,7 +109,7 @@ const Wrapper = styled.div<WrapperProps>(
             drop-shadow(0px 5px 5px rgba(0,0,0,0.05))
             drop-shadow(0 1px 3px rgba(0,0,0,0.1))
           `,
-          borderRadius: theme.appBorderRadius,
+          borderRadius: theme.appBorderRadius + 2,
           fontSize: theme.typography.size.s1,
         }
       : {}
diff --git a/code/core/src/components/components/tooltip/TooltipLinkList.stories.tsx b/code/core/src/components/components/tooltip/TooltipLinkList.stories.tsx
index 28952285756d..07e5ed7fc8d3 100644
--- a/code/core/src/components/components/tooltip/TooltipLinkList.stories.tsx
+++ b/code/core/src/components/components/tooltip/TooltipLinkList.stories.tsx
@@ -191,3 +191,45 @@ export const WithCustomIcon = {
     ],
   },
 } satisfies Story;
+
+export const WithGroups = {
+  args: {
+    links: [
+      [
+        {
+          id: '1',
+          title: 'Link 1',
+          center: 'This is an addition description',
+          href: 'http://google.com',
+          onClick: onLinkClick,
+        },
+      ],
+      [
+        {
+          id: '1',
+          title: 'Link 1',
+          center: 'This is an addition description',
+          icon: <LinkIcon />,
+          href: 'http://google.com',
+          onClick: onLinkClick,
+        },
+        {
+          id: '2',
+          title: 'Link 2',
+          center: 'This is an addition description',
+          href: 'http://google.com',
+          onClick: onLinkClick,
+        },
+      ],
+      [
+        {
+          id: '2',
+          title: 'Link 2',
+          center: 'This is an addition description',
+          href: 'http://google.com',
+          onClick: onLinkClick,
+        },
+      ],
+    ],
+  },
+} satisfies Story;
diff --git a/code/core/src/components/components/tooltip/TooltipLinkList.tsx b/code/core/src/components/components/tooltip/TooltipLinkList.tsx
index f1467babec3a..91e86eae71af 100644
--- a/code/core/src/components/components/tooltip/TooltipLinkList.tsx
+++ b/code/core/src/components/components/tooltip/TooltipLinkList.tsx
@@ -1,5 +1,5 @@
-import type { ComponentProps, SyntheticEvent } from 'react';
-import React, { useCallback } from 'react';
+import type { ComponentProps, ReactNode, SyntheticEvent } from 'react';
+import React, { Fragment, useCallback } from 'react';
 
 import { styled } from '@storybook/core/theming';
 
@@ -11,14 +11,22 @@ const List = styled.div(
     minWidth: 180,
     overflow: 'hidden',
     overflowY: 'auto',
-    maxHeight: 15.5 * 32, // 11.5 items
+    maxHeight: 15.5 * 32 + 8, // 15.5 items at 32px each + 8px padding
   },
   ({ theme }) => ({
-    borderRadius: theme.appBorderRadius,
-  })
+    borderRadius: theme.appBorderRadius + 2,
+  }),
+  ({ theme }) => (theme.base === 'dark' ? { background: theme.background.content } : {})
 );
 
-export interface Link extends Omit<ListItemProps, 'onClick'> {
+const Group = styled.div(({ theme }) => ({
+  padding: 4,
+  '& + &': {
+    borderTop: `1px solid ${theme.appBorderColor}`,
+  },
+}));
+
+export interface NormalLink extends Omit<ListItemProps, 'onClick'> {
   id: string;
   onClick?: (
     event: SyntheticEvent,
@@ -26,7 +34,18 @@ export interface Link extends Omit<ListItemProps, 'onClick'> {
   ) => void;
 }
 
-interface ItemProps extends Link {
+export type Link = CustomLink | NormalLink;
+
+/**
+ * This is a custom link that can be used in the `TooltipLinkList` component. It allows for custom
+ * content to be rendered in the list; it does not have to be a link.
+ */
+interface CustomLink {
+  id: string;
+  content: ReactNode;
+}
+
+interface ItemProps extends NormalLink {
   isIndented?: boolean;
 }
 
@@ -42,17 +61,31 @@ const Item = ({ id, onClick, ...rest }: ItemProps) => {
 };
 
 export interface TooltipLinkListProps extends ComponentProps<typeof List> {
-  links: Link[];
+  links: Link[] | Link[][];
   LinkWrapper?: LinkWrapperType;
 }
 
 export const TooltipLinkList = ({ links, LinkWrapper, ...props }: TooltipLinkListProps) => {
-  const isIndented = links.some((link) => link.icon);
+  const groups = Array.isArray(links[0]) ? (links as Link[][]) : [links as Link[]];
+  const isIndented = groups.some((group) => group.some((link) => 'icon' in link && link.icon));
   return (
     <List {...props}>
-      {links.map((link) => (
-        <Item key={link.id} isIndented={isIndented} LinkWrapper={LinkWrapper} {...link} />
-      ))}
+      {groups
+        .filter((group) => group.length)
+        .map((group, index) => {
+          return (
+            <Group key={group.map((link) => link.id).join(`~${index}~`)}>
+              {group.map((link) => {
+                if ('content' in link) {
+                  return <Fragment key={link.id}>{link.content}</Fragment>;
+                }
+                return (
+                  <Item key={link.id} isIndented={isIndented} LinkWrapper={LinkWrapper} {...link} />
+                );
+              })}
+            </Group>
+          );
+        })}
     </List>
   );
 };
diff --git a/code/core/src/components/components/tooltip/WithTooltip.tsx b/code/core/src/components/components/tooltip/WithTooltip.tsx
index ace6ac6ea275..c6bddae93795 100644
--- a/code/core/src/components/components/tooltip/WithTooltip.tsx
+++ b/code/core/src/components/components/tooltip/WithTooltip.tsx
@@ -121,7 +121,7 @@ const WithTooltipPure = ({
     }
   );
 
-  const tooltipComponent = (
+  const tooltipComponent = isVisible ? (
     <Tooltip
       placement={state?.placement}
       ref={setTooltipRef}
@@ -133,7 +133,7 @@ const WithTooltipPure = ({
       {/* @ts-expect-error (non strict) */}
       {typeof tooltip === 'function' ? tooltip({ onHide: () => onVisibleChange(false) }) : tooltip}
     </Tooltip>
-  );
+  ) : null;
 
   return (
     <>
diff --git a/code/core/src/components/index.ts b/code/core/src/components/index.ts
index eaf6fef4f609..5222b7bd6380 100644
--- a/code/core/src/components/index.ts
+++ b/code/core/src/components/index.ts
@@ -81,6 +81,7 @@ export { StorybookIcon } from './brand/StorybookIcon';
 
 // Loader
 export { Loader } from './components/Loader/Loader';
+export { ProgressSpinner } from './components/ProgressSpinner/ProgressSpinner';
 
 // Utils
 export { getStoryHref } from './components/utils/getStoryHref';
diff --git a/code/core/src/core-events/data/phases.ts b/code/core/src/core-events/data/phases.ts
new file mode 100644
index 000000000000..d52524d5426b
--- /dev/null
+++ b/code/core/src/core-events/data/phases.ts
@@ -0,0 +1,7 @@
+import type { Report } from '../../preview-api';
+
+export interface StoryFinishedPayload {
+  storyId: string;
+  status: 'error' | 'success';
+  reporters: Report[];
+}
diff --git a/code/core/src/core-events/data/testing-module.ts b/code/core/src/core-events/data/testing-module.ts
new file mode 100644
index 000000000000..ad843450723b
--- /dev/null
+++ b/code/core/src/core-events/data/testing-module.ts
@@ -0,0 +1,93 @@
+import type { Addon_TestProviderState, Addon_TestProviderType } from '@storybook/core/types';
+
+type DateNow = number;
+
+export type TestProviderId = Addon_TestProviderType['id'];
+export type TestProviderConfig = Addon_TestProviderType;
+export type TestProviderState<
+  Details extends { [key: string]: any } = NonNullable<unknown>,
+  Config extends { [key: string]: any } = NonNullable<unknown>,
+> = Addon_TestProviderState<Details, Config>;
+
+export type TestProviders = Record<TestProviderId, TestProviderConfig & TestProviderState>;
+
+export type TestingModuleRunRequestPayload<
+  Config extends { [key: string]: any } = NonNullable<unknown>,
+> = {
+  providerId: TestProviderId;
+  // TODO: Avoid needing to do a fetch request server-side to retrieve the index
+  indexUrl: string; // e.g. http://localhost:6006/index.json
+  storyIds?: string[]; // ['button--primary', 'button--secondary']
+  config?: Config;
+};
+
+export type TestingModuleProgressReportPayload =
+  | {
+      providerId: TestProviderId;
+      status: 'success' | 'pending' | 'cancelled';
+      cancellable?: boolean;
+      progress?: TestingModuleProgressReportProgress;
+      details?: { [key: string]: any };
+    }
+  | {
+      providerId: TestProviderId;
+      status: 'failed';
+      progress?: TestingModuleProgressReportProgress;
+      details?: { [key: string]: any };
+      error: {
+        name: string;
+        message: string;
+        stack?: string;
+      };
+    }
+  | {
+      providerId: TestProviderId;
+      details: { [key: string]: any };
+    };
+
+export type TestingModuleCrashReportPayload = {
+  providerId: TestProviderId;
+  error: {
+    message: string;
+  };
+};
+
+export type TestingModuleProgressReportProgress = {
+  startedAt: DateNow;
+  finishedAt?: DateNow;
+  numTotalTests?: number;
+  numPassedTests?: number;
+  numFailedTests?: number;
+  numPendingTests?: number;
+  percentageCompleted?: number;
+};
+
+export type Status = 'success' | 'failed' | 'pending';
+
+export type TestingModuleCancelTestRunRequestPayload = {
+  providerId: TestProviderId;
+};
+
+export type TestingModuleCancelTestRunResponsePayload =
+  | {
+      status: 'success';
+    }
+  | {
+      status: 'failed';
+      message: string;
+    };
+
+export type TestingModuleWatchModeRequestPayload<
+  Config extends { [key: string]: any } = NonNullable<unknown>,
+> = {
+  providerId: TestProviderId;
+  watchMode: boolean;
+  config?: Config;
+};
+
+export type TestingModuleConfigChangePayload<
+  Config extends { [key: string]: any } = NonNullable<unknown>,
+> = {
+  providerId: TestProviderId;
+  config: Config;
+};
diff --git a/code/core/src/core-events/index.ts b/code/core/src/core-events/index.ts
index 90eed7b0d5b6..4a0371c6c44e 100644
--- a/code/core/src/core-events/index.ts
+++ b/code/core/src/core-events/index.ts
@@ -32,6 +32,7 @@ enum events {
   STORY_CHANGED = 'storyChanged',
   STORY_UNCHANGED = 'storyUnchanged',
   STORY_RENDERED = 'storyRendered',
+  STORY_FINISHED = 'storyFinished',
   STORY_MISSING = 'storyMissing',
   STORY_ERRORED = 'storyErrored',
   STORY_THREW_EXCEPTION = 'storyThrewException',
@@ -84,6 +85,16 @@ enum events {
   ARGTYPES_INFO_RESPONSE = 'argtypesInfoResponse',
   CREATE_NEW_STORYFILE_REQUEST = 'createNewStoryfileRequest',
   CREATE_NEW_STORYFILE_RESPONSE = 'createNewStoryfileResponse',
+
+  TESTING_MODULE_CRASH_REPORT = 'testingModuleCrashReport',
+  TESTING_MODULE_PROGRESS_REPORT = 'testingModuleProgressReport',
+  TESTING_MODULE_RUN_REQUEST = 'testingModuleRunRequest',
+  /** @deprecated Use TESTING_MODULE_RUN_REQUEST instead */
+  TESTING_MODULE_RUN_ALL_REQUEST = 'testingModuleRunAllRequest',
+  TESTING_MODULE_CANCEL_TEST_RUN_REQUEST = 'testingModuleCancelTestRunRequest',
+  TESTING_MODULE_CANCEL_TEST_RUN_RESPONSE = 'testingModuleCancelTestRunResponse',
+  TESTING_MODULE_WATCH_MODE_REQUEST = 'testingModuleWatchModeRequest',
+  TESTING_MODULE_CONFIG_CHANGE = 'testingModuleConfigChange',
 }
 
 // Enables: `import Events from ...`
@@ -132,6 +143,7 @@ export const {
   STORY_PREPARED,
   STORY_RENDER_PHASE_CHANGED,
   STORY_RENDERED,
+  STORY_FINISHED,
   STORY_SPECIFIED,
   STORY_THREW_EXCEPTION,
   STORY_UNCHANGED,
@@ -147,6 +159,14 @@ export const {
   SAVE_STORY_RESPONSE,
   ARGTYPES_INFO_REQUEST,
   ARGTYPES_INFO_RESPONSE,
+  TESTING_MODULE_CRASH_REPORT,
+  TESTING_MODULE_PROGRESS_REPORT,
+  TESTING_MODULE_RUN_REQUEST,
+  TESTING_MODULE_RUN_ALL_REQUEST,
+  TESTING_MODULE_CANCEL_TEST_RUN_REQUEST,
+  TESTING_MODULE_CANCEL_TEST_RUN_RESPONSE,
+  TESTING_MODULE_WATCH_MODE_REQUEST,
+  TESTING_MODULE_CONFIG_CHANGE,
 } = events;
 
 export * from './data/create-new-story';
@@ -155,3 +175,5 @@ export * from './data/argtypes-info';
 export * from './data/request-response';
 export * from './data/save-story';
 export * from './data/whats-new';
+export * from './data/testing-module';
+export * from './data/phases';
diff --git a/code/core/src/core-server/__for-testing__/main.ts b/code/core/src/core-server/__for-testing__/main.ts
index d930ed1504a0..586e91025120 100644
--- a/code/core/src/core-server/__for-testing__/main.ts
+++ b/code/core/src/core-server/__for-testing__/main.ts
@@ -20,7 +20,6 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-storysource',
-    '@storybook/addon-links',
     '@storybook/addon-jest',
     '@storybook/addon-a11y',
   ],
diff --git a/code/core/src/core-server/build-static.ts b/code/core/src/core-server/build-static.ts
index 45ba7c7bc6d3..ab0d979acaf5 100644
--- a/code/core/src/core-server/build-static.ts
+++ b/code/core/src/core-server/build-static.ts
@@ -16,7 +16,7 @@ import { global } from '@storybook/global';
 
 import { logger } from '@storybook/core/node-logger';
 
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 
 import { StoryIndexGenerator } from './utils/StoryIndexGenerator';
 import { buildOrThrow } from './utils/build-or-throw';
@@ -41,26 +41,14 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption
   options.outputDir = resolve(options.outputDir);
   options.configDir = resolve(options.configDir);
 
-  logger.info(`=> Cleaning outputDir: ${chalk.cyan(relative(process.cwd(), options.outputDir))}`);
+  logger.info(
+    `=> Cleaning outputDir: ${picocolors.cyan(relative(process.cwd(), options.outputDir))}`
+  );
   if (options.outputDir === '/') {
     throw new Error("Won't remove directory '/'. Check your outputDir!");
   }
-
-  try {
-    const outputDirFiles = await readdir(options.outputDir);
-    for (const file of outputDirFiles) {
-      await rm(file, { recursive: true, force: true });
-    }
-  } catch {
-    await mkdir(options.outputDir, { recursive: true });
-  }
-
-  if (!existsSync(options.outputDir)) {
-    await mkdir(options.outputDir, { recursive: true });
-  } else if ((await readdir(options.outputDir)).length > 0) {
-    await rm(options.outputDir, { recursive: true, force: true });
-    await mkdir(options.outputDir, { recursive: true });
-  }
+  await rm(options.outputDir, { recursive: true, force: true }).catch(() => {});
+  await mkdir(options.outputDir, { recursive: true });
 
   const config = await loadMainConfig(options);
   const { framework } = config;
diff --git a/code/core/src/core-server/dev-server.ts b/code/core/src/core-server/dev-server.ts
index cdf1027d1872..325d33366514 100644
--- a/code/core/src/core-server/dev-server.ts
+++ b/code/core/src/core-server/dev-server.ts
@@ -4,8 +4,8 @@ import type { Options } from '@storybook/core/types';
 import { logger } from '@storybook/core/node-logger';
 import { MissingBuilderError } from '@storybook/core/server-errors';
 
-import compression from 'compression';
-import express from 'express';
+import compression from '@polka/compression';
+import polka from 'polka';
 import invariant from 'tiny-invariant';
 
 import type { StoryIndexGenerator } from './utils/StoryIndexGenerator';
@@ -17,19 +17,13 @@ import { getAccessControlMiddleware } from './utils/getAccessControlMiddleware';
 import { getStoryIndexGenerator } from './utils/getStoryIndexGenerator';
 import { getMiddleware } from './utils/middleware';
 import { openInBrowser } from './utils/open-in-browser';
-import { router } from './utils/router';
 import { getServerAddresses } from './utils/server-address';
 import { getServer } from './utils/server-init';
 import { useStatics } from './utils/server-statics';
 
 export async function storybookDevServer(options: Options) {
-  const app = express();
-
-  const [server, features, core] = await Promise.all([
-    getServer(app, options),
-    options.presets.apply('features'),
-    options.presets.apply('core'),
-  ]);
+  const [server, core] = await Promise.all([getServer(options), options.presets.apply('core')]);
+  const app = polka({ server });
 
   const serverChannel = await options.presets.apply(
     'experimental_serverChannel',
@@ -39,7 +33,7 @@ export async function storybookDevServer(options: Options) {
   let indexError: Error | undefined;
   // try get index generator, if failed, send telemetry without storyCount, then rethrow the error
   const initializedStoryIndexGenerator: Promise<StoryIndexGenerator | undefined> =
-    getStoryIndexGenerator(features ?? {}, options, serverChannel).catch((err) => {
+    getStoryIndexGenerator(app, options, serverChannel).catch((err) => {
       indexError = err;
       return undefined;
     });
@@ -53,20 +47,13 @@ export async function storybookDevServer(options: Options) {
   app.use(getAccessControlMiddleware(core?.crossOriginIsolated ?? false));
   app.use(getCachingMiddleware());
 
-  getMiddleware(options.configDir)(router);
-
-  app.use(router);
+  getMiddleware(options.configDir)(app);
 
   const { port, host, initialPath } = options;
   invariant(port, 'expected options to have a port');
   const proto = options.https ? 'https' : 'http';
   const { address, networkAddress } = getServerAddresses(port, host, proto, initialPath);
 
-  const listening = new Promise<void>((resolve, reject) => {
-    // @ts-expect-error (Following line doesn't match TypeScript signature at all 🤔)
-    server.listen({ port, host }, (error: Error) => (error ? reject(error) : resolve()));
-  });
-
   if (!core?.builder) {
     throw new MissingBuilderError();
   }
@@ -76,7 +63,7 @@ export async function storybookDevServer(options: Options) {
   const [previewBuilder, managerBuilder] = await Promise.all([
     getPreviewBuilder(builderName, options.configDir),
     getManagerBuilder(),
-    useStatics(router, options),
+    useStatics(app, options),
   ]);
 
   if (options.debugWebpack) {
@@ -86,7 +73,7 @@ export async function storybookDevServer(options: Options) {
   const managerResult = await managerBuilder.start({
     startTime: process.hrtime(),
     options,
-    router,
+    router: app,
     server,
     channel: serverChannel,
   });
@@ -101,7 +88,7 @@ export async function storybookDevServer(options: Options) {
       .start({
         startTime: process.hrtime(),
         options,
-        router,
+        router: app,
         server,
         channel: serverChannel,
       })
@@ -123,12 +110,17 @@ export async function storybookDevServer(options: Options) {
 
   // this is a preview route, the builder has to be started before we can serve it
   // this handler keeps request to that route pending until the builder is ready to serve it, preventing a 404
-  router.get('/iframe.html', (req, res, next) => {
+  app.use('/iframe.html', (req, res, next) => {
     // We need to catch here or node will treat any errors thrown by `previewStarted` as
     // unhandled and exit (even though they are very much handled below)
     previewStarted.catch(() => {}).then(() => next());
   });
 
+  const listening = new Promise<void>((resolve, reject) => {
+    server.once('error', reject);
+    app.listen({ port, host }, resolve);
+  });
+
   await Promise.all([initializedStoryIndexGenerator, listening]).then(async ([indexGenerator]) => {
     if (indexGenerator && !options.ci && !options.smokeTest && options.open) {
       openInBrowser(host ? networkAddress : address);
@@ -143,7 +135,7 @@ export async function storybookDevServer(options: Options) {
   const previewResult = await previewStarted;
 
   // Now the preview has successfully started, we can count this as a 'dev' event.
-  doTelemetry(core, initializedStoryIndexGenerator, options);
+  doTelemetry(app, core, initializedStoryIndexGenerator, options);
 
   return { previewResult, managerResult, address, networkAddress };
 }
diff --git a/code/core/src/core-server/index.ts b/code/core/src/core-server/index.ts
index 4906ddd9b1f5..5a74e0056c17 100644
--- a/code/core/src/core-server/index.ts
+++ b/code/core/src/core-server/index.ts
@@ -6,3 +6,7 @@ export * from './build-static';
 export * from './build-dev';
 export * from './withTelemetry';
 export { default as build } from './standalone';
+export { mapStaticDir } from './utils/server-statics';
+export { StoryIndexGenerator } from './utils/StoryIndexGenerator';
+
+export { loadStorybook as experimental_loadStorybook } from './load';
diff --git a/code/core/src/core-server/load.ts b/code/core/src/core-server/load.ts
new file mode 100644
index 000000000000..cb03ceb5ca7a
--- /dev/null
+++ b/code/core/src/core-server/load.ts
@@ -0,0 +1,83 @@
+import { join, relative, resolve } from 'node:path';
+
+import {
+  getProjectRoot,
+  loadAllPresets,
+  loadMainConfig,
+  resolveAddonName,
+  validateFrameworkName,
+} from '@storybook/core/common';
+import { oneWayHash } from '@storybook/core/telemetry';
+import type { BuilderOptions, CLIOptions, LoadOptions, Options } from '@storybook/core/types';
+import { global } from '@storybook/global';
+
+export async function loadStorybook(
+  options: CLIOptions &
+    LoadOptions &
+    BuilderOptions & {
+      storybookVersion?: string;
+      previewConfigPath?: string;
+    }
+): Promise<Options> {
+  const configDir = resolve(options.configDir);
+
+  const rootDir = getProjectRoot();
+  const cacheKey = oneWayHash(relative(rootDir, configDir));
+
+  options.configType = 'DEVELOPMENT';
+  options.configDir = configDir;
+  options.cacheKey = cacheKey;
+
+  const config = await loadMainConfig(options);
+  const { framework } = config;
+  const corePresets = [];
+
+  let frameworkName = typeof framework === 'string' ? framework : framework?.name;
+  if (!options.ignorePreview) {
+    validateFrameworkName(frameworkName);
+  }
+  if (frameworkName) {
+    corePresets.push(join(frameworkName, 'preset'));
+  }
+
+  frameworkName = frameworkName || 'custom';
+
+  // Load first pass: We need to determine the builder
+  // We need to do this because builders might introduce 'overridePresets' which we need to take into account
+  // We hope to remove this in SB8
+
+  let presets = await loadAllPresets({
+    corePresets,
+    overridePresets: [
+      require.resolve('@storybook/core/core-server/presets/common-override-preset'),
+    ],
+    ...options,
+    isCritical: true,
+  });
+
+  const { renderer } = await presets.apply('core', {});
+  const resolvedRenderer = renderer && resolveAddonName(options.configDir, renderer, options);
+
+  // Load second pass: all presets are applied in order
+
+  presets = await loadAllPresets({
+    corePresets: [
+      require.resolve('@storybook/core/core-server/presets/common-preset'),
+      ...(resolvedRenderer ? [resolvedRenderer] : []),
+      ...corePresets,
+    ],
+    overridePresets: [
+      require.resolve('@storybook/core/core-server/presets/common-override-preset'),
+    ],
+    ...options,
+  });
+
+  const features = await presets.apply('features');
+  global.FEATURES = features;
+
+  return {
+    ...options,
+    presets,
+    features,
+  } as Options;
+}
diff --git a/code/core/src/core-server/presets/common-manager.ts b/code/core/src/core-server/presets/common-manager.ts
index 07b11bbaa501..0bdf7cde0031 100644
--- a/code/core/src/core-server/presets/common-manager.ts
+++ b/code/core/src/core-server/presets/common-manager.ts
@@ -2,12 +2,13 @@ import { global } from '@storybook/global';
 
 import { addons } from '@storybook/core/manager-api';
 
+const TAG_FILTERS = 'tag-filters';
 const STATIC_FILTER = 'static-filter';
 
-addons.register(STATIC_FILTER, (api) => {
+addons.register(TAG_FILTERS, (api) => {
   // FIXME: this ensures the filter is applied after the first render
   //        to avoid a strange race condition in Webkit only.
-  const excludeTags = Object.entries(global.TAGS_OPTIONS ?? {}).reduce(
+  const staticExcludeTags = Object.entries(global.TAGS_OPTIONS ?? {}).reduce(
     (acc, entry) => {
       const [tag, option] = entry;
       if ((option as any).excludeFromSidebar) {
@@ -23,7 +24,7 @@ addons.register(STATIC_FILTER, (api) => {
     return (
       // we can filter out the primary story, but we still want to show autodocs
       (tags.includes('dev') || item.type === 'docs') &&
-      tags.filter((tag) => excludeTags[tag]).length === 0
+      tags.filter((tag) => staticExcludeTags[tag]).length === 0
     );
   });
 });
diff --git a/code/core/src/core-server/presets/common-preset.ts b/code/core/src/core-server/presets/common-preset.ts
index 10f8be05614f..34b852cbb7bc 100644
--- a/code/core/src/core-server/presets/common-preset.ts
+++ b/code/core/src/core-server/presets/common-preset.ts
@@ -25,6 +25,15 @@ import { logger } from '@storybook/core/node-logger';
 
 import { dedent } from 'ts-dedent';
 
+import {
+  TESTING_MODULE_CRASH_REPORT,
+  TESTING_MODULE_PROGRESS_REPORT,
+  TESTING_MODULE_WATCH_MODE_REQUEST,
+  type TestingModuleCrashReportPayload,
+  type TestingModuleProgressReportPayload,
+  type TestingModuleWatchModeRequestPayload,
+} from '../../core-events';
+import { cleanPaths, sanitizeError } from '../../telemetry/sanitize';
 import { initCreateNewStoryChannel } from '../server-channel/create-new-story-channel';
 import { initFileSearchChannel } from '../server-channel/file-search-channel';
 import { defaultStaticDirs } from '../utils/constants';
@@ -58,39 +67,37 @@ export const favicon = async (
     ? staticDirsValue.map((dir) => (typeof dir === 'string' ? dir : `${dir.from}:${dir.to}`))
     : [];
 
-  if (statics && statics.length > 0) {
-    const lists = await Promise.all(
-      statics.map(async (dir) => {
-        const results = [];
-        const normalizedDir =
-          staticDirsValue && !isAbsolute(dir)
-            ? getDirectoryFromWorkingDir({
-                configDir: options.configDir,
-                workingDir: process.cwd(),
-                directory: dir,
-              })
-            : dir;
-
-        const { staticPath, targetEndpoint } = await parseStaticDir(normalizedDir);
-
-        if (targetEndpoint === '/') {
-          const url = 'favicon.svg';
-          const path = join(staticPath, url);
-          if (existsSync(path)) {
-            results.push(path);
-          }
+  if (statics.length > 0) {
+    const lists = statics.map((dir) => {
+      const results = [];
+      const normalizedDir =
+        staticDirsValue && !isAbsolute(dir)
+          ? getDirectoryFromWorkingDir({
+              configDir: options.configDir,
+              workingDir: process.cwd(),
+              directory: dir,
+            })
+          : dir;
+
+      const { staticPath, targetEndpoint } = parseStaticDir(normalizedDir);
+
+      if (targetEndpoint === '/') {
+        const url = 'favicon.svg';
+        const path = join(staticPath, url);
+        if (existsSync(path)) {
+          results.push(path);
         }
-        if (targetEndpoint === '/') {
-          const url = 'favicon.ico';
-          const path = join(staticPath, url);
-          if (existsSync(path)) {
-            results.push(path);
-          }
+      }
+      if (targetEndpoint === '/') {
+        const url = 'favicon.ico';
+        const path = join(staticPath, url);
+        if (existsSync(path)) {
+          results.push(path);
         }
+      }
 
-        return results;
-      })
-    );
+      return results;
+    });
     const flatlist = lists.reduce((l1, l2) => l1.concat(l2), []);
 
     if (flatlist.length > 1) {
@@ -280,6 +287,57 @@ export const experimental_serverChannel = async (
   initFileSearchChannel(channel, options, coreOptions);
   initCreateNewStoryChannel(channel, options, coreOptions);
 
+  if (!options.disableTelemetry) {
+    channel.on(
+      TESTING_MODULE_WATCH_MODE_REQUEST,
+      async (request: TestingModuleWatchModeRequestPayload) => {
+        await telemetry('testing-module-watch-mode', {
+          provider: request.providerId,
+          watchMode: request.watchMode,
+        });
+      }
+    );
+
+    channel.on(
+      TESTING_MODULE_PROGRESS_REPORT,
+      async (payload: TestingModuleProgressReportPayload) => {
+        const status = 'status' in payload ? payload.status : undefined;
+        const progress = 'progress' in payload ? payload.progress : undefined;
+        const error = 'error' in payload ? payload.error : undefined;
+
+        if ((status === 'success' || status === 'cancelled') && progress?.finishedAt) {
+          await telemetry('testing-module-completed-report', {
+            provider: payload.providerId,
+            duration: progress?.finishedAt - progress?.startedAt,
+            numTotalTests: progress?.numTotalTests,
+            numFailedTests: progress?.numFailedTests,
+            numPassedTests: progress?.numPassedTests,
+            status,
+          });
+        }
+
+        if (status === 'failed') {
+          await telemetry('testing-module-completed-report', {
+            provider: payload.providerId,
+            status: 'failed',
+            ...(options.enableCrashReports && {
+              error: error && sanitizeError(error),
+            }),
+          });
+        }
+      }
+    );
+
+    channel.on(TESTING_MODULE_CRASH_REPORT, async (payload: TestingModuleCrashReportPayload) => {
+      await telemetry('testing-module-crash-report', {
+        provider: payload.providerId,
+        ...(options.enableCrashReports && {
+          error: cleanPaths(payload.error.message),
+        }),
+      });
+    });
+  }
+
   return channel;
 };
 
diff --git a/code/core/src/core-server/utils/StoryIndexGenerator.ts b/code/core/src/core-server/utils/StoryIndexGenerator.ts
index fb2a0f4b887c..164613d7e4c2 100644
--- a/code/core/src/core-server/utils/StoryIndexGenerator.ts
+++ b/code/core/src/core-server/utils/StoryIndexGenerator.ts
@@ -23,8 +23,8 @@ import { getStorySortParameter, loadConfig } from '@storybook/core/csf-tools';
 import { logger, once } from '@storybook/core/node-logger';
 import { sortStoriesV7, userOrAutoTitleFromSpecifier } from '@storybook/core/preview-api';
 
-import chalk from 'chalk';
 import { findUp } from 'find-up';
+import picocolors from 'picocolors';
 import slash from 'slash';
 import invariant from 'tiny-invariant';
 import { dedent } from 'ts-dedent';
@@ -130,6 +130,7 @@ export class StoryIndexGenerator {
         const fullGlob = slash(join(specifier.directory, specifier.files));
 
         // Dynamically import globby because it is a pure ESM module
+        // eslint-disable-next-line depend/ban-dependencies
         const { globby } = await import('globby');
 
         const files = await globby(fullGlob, {
@@ -140,7 +141,7 @@ export class StoryIndexGenerator {
 
         if (files.length === 0) {
           once.warn(
-            `No story files found for the specified pattern: ${chalk.blue(
+            `No story files found for the specified pattern: ${picocolors.blue(
               join(specifier.directory, specifier.files)
             )}`
           );
@@ -527,7 +528,7 @@ export class StoryIndexGenerator {
     } catch (err) {
       if (err && (err as { source: any }).source?.match(/mdast-util-mdx-jsx/g)) {
         logger.warn(
-          `💡 This seems to be an MDX2 syntax error. Please refer to the MDX section in the following resource for assistance on how to fix this: ${chalk.yellow(
+          `💡 This seems to be an MDX2 syntax error. Please refer to the MDX section in the following resource for assistance on how to fix this: ${picocolors.yellow(
             'https://storybook.js.org/migration-guides/7.0'
           )}`
         );
diff --git a/code/core/src/core-server/utils/__tests__/remove-mdx-stories.test.ts b/code/core/src/core-server/utils/__tests__/remove-mdx-stories.test.ts
index f1342ad48a9a..7aa3621c2893 100644
--- a/code/core/src/core-server/utils/__tests__/remove-mdx-stories.test.ts
+++ b/code/core/src/core-server/utils/__tests__/remove-mdx-stories.test.ts
@@ -5,6 +5,7 @@ import { describe, expect, it, vi } from 'vitest';
 import { normalizeStoriesEntry } from '@storybook/core/common';
 import { type StoriesEntry } from '@storybook/core/types';
 
+// eslint-disable-next-line depend/ban-dependencies
 import { glob as globOriginal } from 'glob';
 import slash from 'slash';
 
@@ -55,7 +56,7 @@ Your main configuration somehow does not contain a 'stories' field, or it resolv
 
 Please check your main configuration file and make sure it exports a 'stories' field that is not an empty array.
 
-More info: https://storybook.js.org/docs/react/faq#can-i-have-a-storybook-with-no-local-stories
+More info: https://storybook.js.org/docs/faq#can-i-have-a-storybook-with-no-local-stories
 ]
 `);
   });
diff --git a/code/core/src/core-server/utils/__tests__/server-statics.test.ts b/code/core/src/core-server/utils/__tests__/server-statics.test.ts
index 0dfaea67f5df..145f855ff136 100644
--- a/code/core/src/core-server/utils/__tests__/server-statics.test.ts
+++ b/code/core/src/core-server/utils/__tests__/server-statics.test.ts
@@ -15,14 +15,14 @@ describe('parseStaticDir', () => {
   });
 
   it('returns the static dir/path and default target', async () => {
-    await expect(parseStaticDir('public')).resolves.toEqual({
+    expect(parseStaticDir('public')).toEqual({
       staticDir: './public',
       staticPath: resolve('public'),
       targetDir: './',
       targetEndpoint: '/',
     });
 
-    await expect(parseStaticDir('foo/bar')).resolves.toEqual({
+    expect(parseStaticDir('foo/bar')).toEqual({
       staticDir: './foo/bar',
       staticPath: resolve('foo/bar'),
       targetDir: './',
@@ -31,14 +31,14 @@ describe('parseStaticDir', () => {
   });
 
   it('returns the static dir/path and custom target', async () => {
-    await expect(parseStaticDir('public:/custom-endpoint')).resolves.toEqual({
+    expect(parseStaticDir('public:/custom-endpoint')).toEqual({
       staticDir: './public',
       staticPath: resolve('public'),
       targetDir: './custom-endpoint',
       targetEndpoint: '/custom-endpoint',
     });
 
-    await expect(parseStaticDir('foo/bar:/custom-endpoint')).resolves.toEqual({
+    expect(parseStaticDir('foo/bar:/custom-endpoint')).toEqual({
       staticDir: './foo/bar',
       staticPath: resolve('foo/bar'),
       targetDir: './custom-endpoint',
@@ -47,21 +47,21 @@ describe('parseStaticDir', () => {
   });
 
   it('pins relative endpoint at root', async () => {
-    const normal = await parseStaticDir('public:relative-endpoint');
+    const normal = parseStaticDir('public:relative-endpoint');
     expect(normal.targetEndpoint).toBe('/relative-endpoint');
 
-    const windows = await parseStaticDir('C:\\public:relative-endpoint');
+    const windows = parseStaticDir('C:\\public:relative-endpoint');
     expect(windows.targetEndpoint).toBe('/relative-endpoint');
   });
 
   it('checks that the path exists', async () => {
     existsSyncMock.mockReturnValueOnce(false);
-    await expect(parseStaticDir('nonexistent')).rejects.toThrow(resolve('nonexistent'));
+    expect(() => parseStaticDir('nonexistent')).toThrow(resolve('nonexistent'));
   });
 
   skipWindows(() => {
     it('supports absolute file paths - posix', async () => {
-      await expect(parseStaticDir('/foo/bar')).resolves.toEqual({
+      expect(parseStaticDir('/foo/bar')).toEqual({
         staticDir: '/foo/bar',
         staticPath: '/foo/bar',
         targetDir: './',
@@ -70,7 +70,7 @@ describe('parseStaticDir', () => {
     });
 
     it('supports absolute file paths with custom endpoint - posix', async () => {
-      await expect(parseStaticDir('/foo/bar:/custom-endpoint')).resolves.toEqual({
+      expect(parseStaticDir('/foo/bar:/custom-endpoint')).toEqual({
         staticDir: '/foo/bar',
         staticPath: '/foo/bar',
         targetDir: './custom-endpoint',
@@ -81,7 +81,7 @@ describe('parseStaticDir', () => {
 
   onlyWindows(() => {
     it('supports absolute file paths - windows', async () => {
-      await expect(parseStaticDir('C:\\foo\\bar')).resolves.toEqual({
+      expect(parseStaticDir('C:\\foo\\bar')).toEqual({
         staticDir: resolve('C:\\foo\\bar'),
         staticPath: resolve('C:\\foo\\bar'),
         targetDir: './',
@@ -90,14 +90,14 @@ describe('parseStaticDir', () => {
     });
 
     it('supports absolute file paths with custom endpoint - windows', async () => {
-      await expect(parseStaticDir('C:\\foo\\bar:/custom-endpoint')).resolves.toEqual({
+      expect(parseStaticDir('C:\\foo\\bar:/custom-endpoint')).toEqual({
         staticDir: expect.any(String), // can't test this properly on unix
         staticPath: resolve('C:\\foo\\bar'),
         targetDir: './custom-endpoint',
         targetEndpoint: '/custom-endpoint',
       });
 
-      await expect(parseStaticDir('C:\\foo\\bar:\\custom-endpoint')).resolves.toEqual({
+      expect(parseStaticDir('C:\\foo\\bar:\\custom-endpoint')).toEqual({
         staticDir: expect.any(String), // can't test this properly on unix
         staticPath: resolve('C:\\foo\\bar'),
         targetDir: './custom-endpoint',
diff --git a/code/core/src/core-server/utils/copy-all-static-files.ts b/code/core/src/core-server/utils/copy-all-static-files.ts
index 66a0194cfd94..2518fa82338c 100644
--- a/code/core/src/core-server/utils/copy-all-static-files.ts
+++ b/code/core/src/core-server/utils/copy-all-static-files.ts
@@ -5,7 +5,7 @@ import { getDirectoryFromWorkingDir } from '@storybook/core/common';
 
 import { logger } from '@storybook/core/node-logger';
 
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 
 import { parseStaticDir } from './server-statics';
 
@@ -14,13 +14,13 @@ export async function copyAllStaticFiles(staticDirs: any[] | undefined, outputDi
     await Promise.all(
       staticDirs.map(async (dir) => {
         try {
-          const { staticDir, staticPath, targetDir } = await parseStaticDir(dir);
+          const { staticDir, staticPath, targetDir } = parseStaticDir(dir);
           const targetPath = join(outputDir, targetDir);
 
           // we copy prebuild static files from node_modules/@storybook/manager & preview
           if (!staticDir.includes('node_modules')) {
-            const from = chalk.cyan(print(staticDir));
-            const to = chalk.cyan(print(targetDir));
+            const from = picocolors.cyan(print(staticDir));
+            const to = picocolors.cyan(print(targetDir));
             logger.info(`=> Copying static files: ${from} => ${to}`);
           }
 
@@ -54,7 +54,7 @@ export async function copyAllStaticFilesRelativeToMain(
     await acc;
 
     const staticDirAndTarget = typeof dir === 'string' ? dir : `${dir.from}:${dir.to}`;
-    const { staticPath: from, targetEndpoint: to } = await parseStaticDir(
+    const { staticPath: from, targetEndpoint: to } = parseStaticDir(
       getDirectoryFromWorkingDir({
         configDir,
         workingDir,
@@ -66,7 +66,7 @@ export async function copyAllStaticFilesRelativeToMain(
     const skipPaths = ['index.html', 'iframe.html'].map((f) => join(targetPath, f));
     if (!from.includes('node_modules')) {
       logger.info(
-        `=> Copying static files: ${chalk.cyan(print(from))} at ${chalk.cyan(print(targetPath))}`
+        `=> Copying static files: ${picocolors.cyan(print(from))} at ${picocolors.cyan(print(targetPath))}`
       );
     }
     await cp(from, targetPath, {
diff --git a/code/core/src/core-server/utils/doTelemetry.ts b/code/core/src/core-server/utils/doTelemetry.ts
index 534d409765e0..0e9b48b8c8f5 100644
--- a/code/core/src/core-server/utils/doTelemetry.ts
+++ b/code/core/src/core-server/utils/doTelemetry.ts
@@ -1,16 +1,17 @@
 import { getPrecedingUpgrade, telemetry } from '@storybook/core/telemetry';
 import type { CoreConfig, Options } from '@storybook/core/types';
 
+import type Polka from 'polka';
 import invariant from 'tiny-invariant';
 
 import { sendTelemetryError } from '../withTelemetry';
 import type { StoryIndexGenerator } from './StoryIndexGenerator';
 import { useStorybookMetadata } from './metadata';
-import { router } from './router';
 import { summarizeIndex } from './summarizeIndex';
 import { versionStatus } from './versionStatus';
 
 export async function doTelemetry(
+  app: Polka.Polka,
   core: CoreConfig,
   initializedStoryIndexGenerator: Promise<StoryIndexGenerator | undefined>,
   options: Options
@@ -52,6 +53,6 @@ export async function doTelemetry(
   }
 
   if (!core?.disableProjectJson) {
-    useStorybookMetadata(router, options.configDir);
+    useStorybookMetadata(app, options.configDir);
   }
 }
diff --git a/code/core/src/core-server/utils/get-caching-middleware.ts b/code/core/src/core-server/utils/get-caching-middleware.ts
index d01cb3e5e922..88cc96c2ae70 100644
--- a/code/core/src/core-server/utils/get-caching-middleware.ts
+++ b/code/core/src/core-server/utils/get-caching-middleware.ts
@@ -1,8 +1,8 @@
-import type { RequestHandler } from 'express';
+import type { Middleware } from '../../types';
 
-export function getCachingMiddleware(): RequestHandler {
+export function getCachingMiddleware(): Middleware {
   return (req, res, next) => {
-    res.header('Cache-Control', 'no-store');
+    res.setHeader('Cache-Control', 'no-store');
     next();
   };
 }
diff --git a/code/core/src/core-server/utils/get-component-variable-name.ts b/code/core/src/core-server/utils/get-component-variable-name.ts
index bc29ff9e51d6..34f72352afc7 100644
--- a/code/core/src/core-server/utils/get-component-variable-name.ts
+++ b/code/core/src/core-server/utils/get-component-variable-name.ts
@@ -6,6 +6,7 @@
  */
 export const getComponentVariableName = async (name: string) => {
   const camelCase = await import('camelcase');
+
   const camelCased = camelCase.default(name.replace(/^[^a-zA-Z_$]*/, ''), { pascalCase: true });
   const sanitized = camelCased.replace(/[^a-zA-Z_$]+/, '');
   return sanitized;
diff --git a/code/core/src/core-server/utils/getAccessControlMiddleware.ts b/code/core/src/core-server/utils/getAccessControlMiddleware.ts
index 9eb8851e6a5c..0b5c3428b842 100644
--- a/code/core/src/core-server/utils/getAccessControlMiddleware.ts
+++ b/code/core/src/core-server/utils/getAccessControlMiddleware.ts
@@ -1,16 +1,16 @@
-import type { RequestHandler } from 'express';
+import type { Middleware } from '../../types';
 
-export function getAccessControlMiddleware(crossOriginIsolated: boolean): RequestHandler {
+export function getAccessControlMiddleware(crossOriginIsolated: boolean): Middleware {
   return (req, res, next) => {
-    res.header('Access-Control-Allow-Origin', '*');
-    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
     // These headers are required to enable SharedArrayBuffer
     // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
     if (crossOriginIsolated) {
       // These headers are required to enable SharedArrayBuffer
       // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer
-      res.header('Cross-Origin-Opener-Policy', 'same-origin');
-      res.header('Cross-Origin-Embedder-Policy', 'require-corp');
+      res.setHeader('Cross-Origin-Opener-Policy', 'same-origin');
+      res.setHeader('Cross-Origin-Embedder-Policy', 'require-corp');
     }
     next();
   };
diff --git a/code/core/src/core-server/utils/getStoryIndexGenerator.ts b/code/core/src/core-server/utils/getStoryIndexGenerator.ts
index 6e5e4960b132..d91373d825cf 100644
--- a/code/core/src/core-server/utils/getStoryIndexGenerator.ts
+++ b/code/core/src/core-server/utils/getStoryIndexGenerator.ts
@@ -1,15 +1,14 @@
 import { normalizeStories } from '@storybook/core/common';
 import type { DocsOptions, Options } from '@storybook/core/types';
 
+import type Polka from 'polka';
+
 import { StoryIndexGenerator } from './StoryIndexGenerator';
 import type { ServerChannel } from './get-server-channel';
-import { router } from './router';
 import { useStoriesJson } from './stories-json';
 
 export async function getStoryIndexGenerator(
-  features: {
-    argTypeTargetsV7?: boolean;
-  },
+  app: Polka.Polka,
   options: Options,
   serverChannel: ServerChannel
 ): Promise<StoryIndexGenerator | undefined> {
@@ -34,7 +33,7 @@ export async function getStoryIndexGenerator(
   const initializedStoryIndexGenerator = generator.initialize().then(() => generator);
 
   useStoriesJson({
-    router,
+    app,
     initializedStoryIndexGenerator,
     normalizedStories,
     serverChannel,
diff --git a/code/core/src/core-server/utils/metadata.ts b/code/core/src/core-server/utils/metadata.ts
index a617b3e1f52c..a9a2ebb337ba 100644
--- a/code/core/src/core-server/utils/metadata.ts
+++ b/code/core/src/core-server/utils/metadata.ts
@@ -2,7 +2,7 @@ import { writeFile } from 'node:fs/promises';
 
 import { getStorybookMetadata } from '@storybook/core/telemetry';
 
-import type { Request, Response, Router } from 'express';
+import type Polka from 'polka';
 
 export async function extractStorybookMetadata(outputFile: string, configDir: string) {
   const storybookMetadata = await getStorybookMetadata(configDir);
@@ -10,10 +10,11 @@ export async function extractStorybookMetadata(outputFile: string, configDir: st
   await writeFile(outputFile, JSON.stringify(storybookMetadata));
 }
 
-export function useStorybookMetadata(router: Router, configDir?: string) {
-  router.use('/project.json', async (req: Request, res: Response) => {
+export function useStorybookMetadata(app: Polka.Polka, configDir?: string) {
+  app.use('/project.json', async (req, res) => {
     const storybookMetadata = await getStorybookMetadata(configDir);
-    res.header('Content-Type', 'application/json');
-    res.send(JSON.stringify(storybookMetadata));
+    res.setHeader('Content-Type', 'application/json');
+    res.write(JSON.stringify(storybookMetadata));
+    res.end();
   });
 }
diff --git a/code/core/src/core-server/utils/output-startup-information.ts b/code/core/src/core-server/utils/output-startup-information.ts
index cfe60bef6cc9..411e3e80be46 100644
--- a/code/core/src/core-server/utils/output-startup-information.ts
+++ b/code/core/src/core-server/utils/output-startup-information.ts
@@ -3,8 +3,8 @@ import type { VersionCheck } from '@storybook/core/types';
 import { colors } from '@storybook/core/node-logger';
 
 import boxen from 'boxen';
-import chalk from 'chalk';
 import Table from 'cli-table3';
+import picocolors from 'picocolors';
 import prettyTime from 'pretty-hrtime';
 import { dedent } from 'ts-dedent';
 
@@ -50,13 +50,13 @@ export function outputStartupInformation(options: {
   });
 
   serveMessage.push(
-    ['Local:', chalk.cyan(address)],
-    ['On your network:', chalk.cyan(networkAddress)]
+    ['Local:', picocolors.cyan(address)],
+    ['On your network:', picocolors.cyan(networkAddress)]
   );
 
   const timeStatement = [
-    managerTotalTime && `${chalk.underline(prettyTime(managerTotalTime))} for manager`,
-    previewTotalTime && `${chalk.underline(prettyTime(previewTotalTime))} for preview`,
+    managerTotalTime && `${picocolors.underline(prettyTime(managerTotalTime))} for manager`,
+    previewTotalTime && `${picocolors.underline(prettyTime(previewTotalTime))} for preview`,
   ]
     .filter(Boolean)
     .join(' and ');
@@ -64,8 +64,10 @@ export function outputStartupInformation(options: {
   console.log(
     boxen(
       dedent`
-          ${colors.green(`Storybook ${chalk.bold(version)} for ${chalk.bold(name)} started`)}
-          ${chalk.gray(timeStatement)}
+          ${colors.green(
+            `Storybook ${picocolors.bold(version)} for ${picocolors.bold(name)} started`
+          )}
+          ${picocolors.gray(timeStatement)}
 
           ${serveMessage.toString()}${updateMessage ? `\n\n${updateMessage}` : ''}
         `,
diff --git a/code/core/src/core-server/utils/output-stats.ts b/code/core/src/core-server/utils/output-stats.ts
index 1d5047862247..24c736147f1e 100644
--- a/code/core/src/core-server/utils/output-stats.ts
+++ b/code/core/src/core-server/utils/output-stats.ts
@@ -6,16 +6,16 @@ import type { Stats } from '@storybook/core/types';
 import { logger } from '@storybook/core/node-logger';
 
 import { stringifyStream } from '@discoveryjs/json-ext';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 
 export async function outputStats(directory: string, previewStats?: any, managerStats?: any) {
   if (previewStats) {
     const filePath = await writeStats(directory, 'preview', previewStats as Stats);
-    logger.info(`=> preview stats written to ${chalk.cyan(filePath)}`);
+    logger.info(`=> preview stats written to ${picocolors.cyan(filePath)}`);
   }
   if (managerStats) {
     const filePath = await writeStats(directory, 'manager', managerStats as Stats);
-    logger.info(`=> manager stats written to ${chalk.cyan(filePath)}`);
+    logger.info(`=> manager stats written to ${picocolors.cyan(filePath)}`);
   }
 }
 
diff --git a/code/core/src/core-server/utils/remove-mdx-entries.ts b/code/core/src/core-server/utils/remove-mdx-entries.ts
index f71488712a49..da431155016a 100644
--- a/code/core/src/core-server/utils/remove-mdx-entries.ts
+++ b/code/core/src/core-server/utils/remove-mdx-entries.ts
@@ -3,6 +3,7 @@ import { isAbsolute, join, relative } from 'node:path';
 import { commonGlobOptions, normalizeStories } from '@storybook/core/common';
 import type { Options, StoriesEntry } from '@storybook/core/types';
 
+// eslint-disable-next-line depend/ban-dependencies
 import { glob } from 'glob';
 import slash from 'slash';
 
diff --git a/code/core/src/core-server/utils/router.ts b/code/core/src/core-server/utils/router.ts
deleted file mode 100644
index 894388991b5f..000000000000
--- a/code/core/src/core-server/utils/router.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Router } from 'express';
-
-// @ts-expect-error (Converted from ts-ignore)
-
-export const router: Router = new Router();
diff --git a/code/core/src/core-server/utils/search-files.ts b/code/core/src/core-server/utils/search-files.ts
index b0e743895aa9..723f74341b34 100644
--- a/code/core/src/core-server/utils/search-files.ts
+++ b/code/core/src/core-server/utils/search-files.ts
@@ -31,6 +31,7 @@ export async function searchFiles({
   fileExtensions?: string[];
 }): Promise<SearchResult> {
   // Dynamically import globby because it is a pure ESM module
+  // eslint-disable-next-line depend/ban-dependencies
   const { globby, isDynamicPattern } = await import('globby');
 
   const hasSearchSpecialGlobChars = isDynamicPattern(searchQuery, { cwd });
diff --git a/code/core/src/core-server/utils/server-init.ts b/code/core/src/core-server/utils/server-init.ts
index 60710cb19cfb..d06c3421e7bc 100644
--- a/code/core/src/core-server/utils/server-init.ts
+++ b/code/core/src/core-server/utils/server-init.ts
@@ -2,21 +2,17 @@ import { readFile } from 'node:fs/promises';
 
 import { logger } from '@storybook/core/node-logger';
 
-import type { Express } from 'express';
 import http from 'http';
 import https from 'https';
 
-export async function getServer(
-  app: Express,
-  options: {
-    https?: boolean;
-    sslCert?: string;
-    sslKey?: string;
-    sslCa?: string[];
-  }
-) {
+export async function getServer(options: {
+  https?: boolean;
+  sslCert?: string;
+  sslKey?: string;
+  sslCa?: string[];
+}) {
   if (!options.https) {
-    return http.createServer(app);
+    return http.createServer();
   }
 
   if (!options.sslCert) {
@@ -35,5 +31,5 @@ export async function getServer(
     key: await readFile(options.sslKey, { encoding: 'utf8' }),
   };
 
-  return https.createServer(sslOptions, app);
+  return https.createServer(sslOptions);
 }
diff --git a/code/core/src/core-server/utils/server-statics.ts b/code/core/src/core-server/utils/server-statics.ts
index edd1a4f45fb2..470d14ceb153 100644
--- a/code/core/src/core-server/utils/server-statics.ts
+++ b/code/core/src/core-server/utils/server-statics.ts
@@ -2,58 +2,56 @@ import { existsSync } from 'node:fs';
 import { basename, isAbsolute, posix, resolve, sep, win32 } from 'node:path';
 
 import { getDirectoryFromWorkingDir } from '@storybook/core/common';
-import type { Options } from '@storybook/core/types';
+import type { Options, StorybookConfigRaw } from '@storybook/core/types';
 
 import { logger } from '@storybook/core/node-logger';
 
-import chalk from 'chalk';
-import type { Router } from 'express';
-import express from 'express';
+import picocolors from 'picocolors';
+import type Polka from 'polka';
+import sirv from 'sirv';
 import { dedent } from 'ts-dedent';
 
-export async function useStatics(router: Router, options: Options) {
+export async function useStatics(app: Polka.Polka, options: Options): Promise<void> {
   const staticDirs = (await options.presets.apply('staticDirs')) ?? [];
   const faviconPath = await options.presets.apply<string>('favicon');
 
-  const statics = [
-    ...staticDirs.map((dir) => (typeof dir === 'string' ? dir : `${dir.from}:${dir.to}`)),
-  ];
+  staticDirs.map((dir) => {
+    try {
+      const { staticDir, staticPath, targetEndpoint } = mapStaticDir(dir, options.configDir);
 
-  if (statics && statics.length > 0) {
-    await Promise.all(
-      statics.map(async (dir) => {
-        try {
-          const normalizedDir =
-            staticDirs && !isAbsolute(dir)
-              ? getDirectoryFromWorkingDir({
-                  configDir: options.configDir,
-                  workingDir: process.cwd(),
-                  directory: dir,
-                })
-              : dir;
-          const { staticDir, staticPath, targetEndpoint } = await parseStaticDir(normalizedDir);
+      // Don't log for the internal static dir
+      if (!targetEndpoint.startsWith('/sb-')) {
+        logger.info(
+          `=> Serving static files from ${picocolors.cyan(staticDir)} at ${picocolors.cyan(targetEndpoint)}`
+        );
+      }
 
-          // Don't log for the internal static dir
-          if (!targetEndpoint.startsWith('/sb-')) {
-            logger.info(
-              `=> Serving static files from ${chalk.cyan(staticDir)} at ${chalk.cyan(targetEndpoint)}`
-            );
-          }
+      app.use(
+        targetEndpoint,
+        sirv(staticPath, {
+          dev: true,
+          etag: true,
+          extensions: [],
+        })
+      );
+    } catch (e) {
+      if (e instanceof Error) {
+        logger.warn(e.message);
+      }
+    }
+  });
 
-          router.use(targetEndpoint, express.static(staticPath, { index: false }));
-        } catch (e) {
-          if (e instanceof Error) {
-            logger.warn(e.message);
-          }
-        }
-      })
-    );
-  }
-
-  router.get(`/${basename(faviconPath)}`, (req, res) => res.sendFile(faviconPath));
+  app.get(
+    `/${basename(faviconPath)}`,
+    sirv(faviconPath, {
+      dev: true,
+      etag: true,
+      extensions: [],
+    })
+  );
 }
 
-export const parseStaticDir = async (arg: string) => {
+export const parseStaticDir = (arg: string) => {
   // Split on last index of ':', for Windows compatibility (e.g. 'C:\some\dir:\foo')
   const lastColonIndex = arg.lastIndexOf(':');
   const isWindowsAbsolute = win32.isAbsolute(arg);
@@ -72,7 +70,7 @@ export const parseStaticDir = async (arg: string) => {
   if (!existsSync(staticPath)) {
     throw new Error(
       dedent`
-        Failed to load static files, no such directory: ${chalk.cyan(staticPath)}
+        Failed to load static files, no such directory: ${picocolors.cyan(staticPath)}
         Make sure this directory exists.
       `
     );
@@ -80,3 +78,15 @@ export const parseStaticDir = async (arg: string) => {
 
   return { staticDir, staticPath, targetDir, targetEndpoint };
 };
+
+export const mapStaticDir = (
+  staticDir: NonNullable<StorybookConfigRaw['staticDirs']>[number],
+  configDir: string
+) => {
+  const specifier = typeof staticDir === 'string' ? staticDir : `${staticDir.from}:${staticDir.to}`;
+  const normalizedDir = isAbsolute(specifier)
+    ? specifier
+    : getDirectoryFromWorkingDir({ configDir, workingDir: process.cwd(), directory: specifier });
+
+  return parseStaticDir(normalizedDir);
+};
diff --git a/code/core/src/core-server/utils/stories-json.test.ts b/code/core/src/core-server/utils/stories-json.test.ts
index e9f5e73a7378..4868c149b724 100644
--- a/code/core/src/core-server/utils/stories-json.test.ts
+++ b/code/core/src/core-server/utils/stories-json.test.ts
@@ -6,8 +6,8 @@ import { normalizeStoriesEntry } from '@storybook/core/common';
 
 import { STORY_INDEX_INVALIDATED } from '@storybook/core/core-events';
 
-import type { Request, Response, Router } from 'express';
-import debounce from 'lodash/debounce.js';
+import { debounce } from 'es-toolkit/compat';
+import type Polka from 'polka';
 import Watchpack from 'watchpack';
 
 import { csfIndexer } from '../presets/common-preset';
@@ -17,7 +17,7 @@ import type { ServerChannel } from './get-server-channel';
 import { DEBOUNCE, useStoriesJson } from './stories-json';
 
 vi.mock('watchpack');
-vi.mock('lodash/debounce');
+vi.mock('es-toolkit/compat');
 vi.mock('@storybook/core/node-logger');
 
 const workingDir = join(__dirname, '__mockdata__');
@@ -58,30 +58,30 @@ const getInitializedStoryIndexGenerator = async (
 
 describe('useStoriesJson', () => {
   const use = vi.fn();
-  const router: Router = { use } as any;
-  const send = vi.fn();
+  const app: Polka.Polka = { use } as any;
+  const end = vi.fn();
   const write = vi.fn();
-  const response: Response = {
+  const response: Polka.Response = {
     header: vi.fn(),
-    send,
+    send: vi.fn(),
     status: vi.fn(),
     setHeader: vi.fn(),
     flushHeaders: vi.fn(),
     write,
     flush: vi.fn(),
-    end: vi.fn(),
+    end,
     on: vi.fn(),
   } as any;
 
   beforeEach(async () => {
     use.mockClear();
-    send.mockClear();
+    end.mockClear();
     write.mockClear();
     vi.mocked(debounce).mockImplementation((cb) => cb as any);
     Watchpack.mockClear();
   });
 
-  const request: Request = {
+  const request: Polka.Request = {
     headers: { accept: 'application/json' },
   } as any;
 
@@ -90,7 +90,7 @@ describe('useStoriesJson', () => {
       const mockServerChannel = { emit: vi.fn() } as any as ServerChannel;
       console.time('useStoriesJson');
       useStoriesJson({
-        router,
+        app,
         serverChannel: mockServerChannel,
         workingDir,
         normalizedStories,
@@ -105,8 +105,8 @@ describe('useStoriesJson', () => {
       await route(request, response);
       console.timeEnd('route');
 
-      expect(send).toHaveBeenCalledTimes(1);
-      expect(JSON.parse(send.mock.calls[0][0])).toMatchInlineSnapshot(`
+      expect(end).toHaveBeenCalledTimes(1);
+      expect(JSON.parse(end.mock.calls[0][0])).toMatchInlineSnapshot(`
         {
           "entries": {
             "a--metaof": {
@@ -368,7 +368,7 @@ describe('useStoriesJson', () => {
       const mockServerChannel = { emit: vi.fn() } as any as ServerChannel;
 
       useStoriesJson({
-        router,
+        app,
         serverChannel: mockServerChannel,
         workingDir,
         normalizedStories,
@@ -379,14 +379,14 @@ describe('useStoriesJson', () => {
       const route = use.mock.calls[0][1];
 
       const firstPromise = route(request, response);
-      const secondResponse = { ...response, send: vi.fn(), status: vi.fn() };
+      const secondResponse = { ...response, end: vi.fn(), status: vi.fn() };
       const secondPromise = route(request, secondResponse);
 
       await Promise.all([firstPromise, secondPromise]);
 
-      expect(send).toHaveBeenCalledTimes(1);
-      expect(response.status).not.toEqual(500);
-      expect(secondResponse.send).toHaveBeenCalledTimes(1);
+      expect(end).toHaveBeenCalledTimes(1);
+      expect(response.statusCode).not.toEqual(500);
+      expect(secondResponse.end).toHaveBeenCalledTimes(1);
       expect(secondResponse.status).not.toEqual(500);
     });
   });
@@ -394,13 +394,13 @@ describe('useStoriesJson', () => {
   describe('SSE endpoint', () => {
     beforeEach(() => {
       use.mockClear();
-      send.mockClear();
+      end.mockClear();
     });
 
     it('sends invalidate events', async () => {
       const mockServerChannel = { emit: vi.fn() } as any as ServerChannel;
       useStoriesJson({
-        router,
+        app,
         serverChannel: mockServerChannel,
         workingDir,
         normalizedStories,
@@ -434,7 +434,7 @@ describe('useStoriesJson', () => {
     it('only sends one invalidation when multiple event listeners are listening', async () => {
       const mockServerChannel = { emit: vi.fn() } as any as ServerChannel;
       useStoriesJson({
-        router,
+        app,
         serverChannel: mockServerChannel,
         workingDir,
         normalizedStories,
@@ -471,13 +471,12 @@ describe('useStoriesJson', () => {
 
     it('debounces invalidation events', async () => {
       vi.mocked(debounce).mockImplementation(
-        // @ts-expect-error it doesn't think default exists
-        (await vi.importActual<typeof import('lodash/debounce.js')>('lodash/debounce.js')).default
+        (await vi.importActual<typeof import('es-toolkit/compat')>('es-toolkit/compat')).debounce
       );
 
       const mockServerChannel = { emit: vi.fn() } as any as ServerChannel;
       useStoriesJson({
-        router,
+        app,
         serverChannel: mockServerChannel,
         workingDir,
         normalizedStories,
diff --git a/code/core/src/core-server/utils/stories-json.ts b/code/core/src/core-server/utils/stories-json.ts
index d34ba9d72186..a33e12eb0393 100644
--- a/code/core/src/core-server/utils/stories-json.ts
+++ b/code/core/src/core-server/utils/stories-json.ts
@@ -5,8 +5,8 @@ import type { NormalizedStoriesSpecifier, StoryIndex } from '@storybook/core/typ
 
 import { STORY_INDEX_INVALIDATED } from '@storybook/core/core-events';
 
-import type { Request, Response, Router } from 'express';
-import debounce from 'lodash/debounce.js';
+import { debounce } from 'es-toolkit/compat';
+import type Polka from 'polka';
 
 import type { StoryIndexGenerator } from './StoryIndexGenerator';
 import type { ServerChannel } from './get-server-channel';
@@ -26,14 +26,14 @@ export async function extractStoriesJson(
 }
 
 export function useStoriesJson({
-  router,
+  app,
   initializedStoryIndexGenerator,
   workingDir = process.cwd(),
   configDir,
   serverChannel,
   normalizedStories,
 }: {
-  router: Router;
+  app: Polka.Polka;
   initializedStoryIndexGenerator: Promise<StoryIndexGenerator>;
   serverChannel: ServerChannel;
   workingDir?: string;
@@ -58,15 +58,15 @@ export function useStoriesJson({
     });
   }
 
-  router.use('/index.json', async (req: Request, res: Response) => {
+  app.use('/index.json', async (req, res) => {
     try {
       const generator = await initializedStoryIndexGenerator;
       const index = await generator.getIndex();
-      res.header('Content-Type', 'application/json');
-      res.send(JSON.stringify(index));
+      res.setHeader('Content-Type', 'application/json');
+      res.end(JSON.stringify(index));
     } catch (err) {
-      res.status(500);
-      res.send(err instanceof Error ? err.toString() : String(err));
+      res.statusCode = 500;
+      res.end(err instanceof Error ? err.toString() : String(err));
     }
   });
 }
diff --git a/code/core/src/core-server/utils/update-check.ts b/code/core/src/core-server/utils/update-check.ts
index 4d1fe03c685c..efdd6ba95510 100644
--- a/code/core/src/core-server/utils/update-check.ts
+++ b/code/core/src/core-server/utils/update-check.ts
@@ -3,7 +3,7 @@ import type { VersionCheck } from '@storybook/core/types';
 
 import { colors } from '@storybook/core/node-logger';
 
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import semver from 'semver';
 import { dedent } from 'ts-dedent';
 
@@ -44,13 +44,13 @@ export function createUpdateMessage(updateInfo: VersionCheck, version: string):
       updateInfo.success && semver.lt(version, updateInfo.data.latest.version)
         ? dedent`
           ${colors.orange(
-            `A new version (${chalk.bold(updateInfo.data.latest.version)}) is available!`
+            `A new version (${picocolors.bold(updateInfo.data.latest.version)}) is available!`
           )}
 
-          ${chalk.gray('Upgrade now:')} ${colors.green(upgradeCommand)}
+          ${picocolors.gray('Upgrade now:')} ${colors.green(upgradeCommand)}
 
-          ${chalk.gray('Read full changelog:')} ${chalk.gray.underline(
-            'https://github.com/storybookjs/storybook/blob/main/CHANGELOG.md'
+          ${picocolors.gray('Read full changelog:')} ${picocolors.gray(
+            picocolors.underline('https://github.com/storybookjs/storybook/blob/main/CHANGELOG.md')
           )}
         `
         : '';
diff --git a/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts b/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts
index d8fa4dcc521c..ea28dbfc9c00 100644
--- a/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts
+++ b/code/core/src/core-server/utils/warnWhenUsingArgTypesRegex.ts
@@ -5,7 +5,7 @@ import type { StorybookConfig } from '@storybook/core/types';
 
 import { babelParse } from '@storybook/core/csf-tools';
 
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 
 export async function warnWhenUsingArgTypesRegex(
@@ -34,17 +34,17 @@ export async function warnWhenUsingArgTypesRegex(
       Identifier: (path) => {
         if (path.node.name === 'argTypesRegex') {
           const message = dedent`
-            ${chalk.bold('Attention')}: We've detected that you're using ${chalk.cyan(
+            ${picocolors.bold('Attention')}: We've detected that you're using ${picocolors.cyan(
               'actions.argTypesRegex'
             )} together with the visual test addon:
             
             ${path.buildCodeFrameError(previewConfigPath).message}
             
-            We recommend removing the ${chalk.cyan(
+            We recommend removing the ${picocolors.cyan(
               'argTypesRegex'
-            )} and assigning explicit action with the ${chalk.cyan(
+            )} and assigning explicit action with the ${picocolors.cyan(
               'fn'
-            )} function from ${chalk.cyan('@storybook/test')} instead:
+            )} function from ${picocolors.cyan('@storybook/test')} instead:
             https://storybook.js.org/docs/essentials/actions#via-storybooktest-fn-spy-function
             
             The build used by the addon for snapshot testing doesn't take the regex into account, which can cause hard to debug problems when a snapshot depends on the presence of action props.
diff --git a/code/core/src/core-server/utils/watch-story-specifiers.ts b/code/core/src/core-server/utils/watch-story-specifiers.ts
index b320520dc9a4..6fa8d3e83a6f 100644
--- a/code/core/src/core-server/utils/watch-story-specifiers.ts
+++ b/code/core/src/core-server/utils/watch-story-specifiers.ts
@@ -97,6 +97,7 @@ export function watchStorySpecifiers(
             );
 
             // Dynamically import globby because it is a pure ESM module
+            // eslint-disable-next-line depend/ban-dependencies
             const { globby } = await import('globby');
 
             // glob only supports forward slashes
diff --git a/code/core/src/core-server/utils/whats-new.ts b/code/core/src/core-server/utils/whats-new.ts
index cb523f78318e..71c71984cb12 100644
--- a/code/core/src/core-server/utils/whats-new.ts
+++ b/code/core/src/core-server/utils/whats-new.ts
@@ -1,7 +1,8 @@
+/* eslint-disable no-underscore-dangle */
 import { writeFile } from 'node:fs/promises';
 
 import type { Channel } from '@storybook/core/channels';
-import { findConfigFile } from '@storybook/core/common';
+import { findConfigFile, loadMainConfig } from '@storybook/core/common';
 import { telemetry } from '@storybook/core/telemetry';
 import type { CoreConfig, Options } from '@storybook/core/types';
 
@@ -58,15 +59,9 @@ export function initializeWhatsNew(
         throw response;
       })) as WhatsNewResponse;
 
-      const configFileName = findConfigFile('main', options.configDir);
-      if (!configFileName) {
-        throw new Error(`unable to find storybook main file in ${options.configDir}`);
-      }
-      const main = await readConfig(configFileName);
-      const disableWhatsNewNotifications = main.getFieldValue([
-        'core',
-        'disableWhatsNewNotifications',
-      ]);
+      const main = await loadMainConfig({ configDir: options.configDir, noCache: true });
+      const disableWhatsNewNotifications =
+        (main.core as CoreConfig)?.disableWhatsNewNotifications === true;
 
       const cache: WhatsNewCache = (await options.cache.get(WHATS_NEW_CACHE)) ?? {};
       const data = {
@@ -91,8 +86,14 @@ export function initializeWhatsNew(
       const isTelemetryEnabled = coreOptions.disableTelemetry !== true;
       try {
         const mainPath = findConfigFile('main', options.configDir);
-        invariant(mainPath, `unable to find storybook main file in ${options.configDir}`);
+        invariant(mainPath, `unable to find Storybook main file in ${options.configDir}`);
         const main = await readConfig(mainPath);
+        if (!main._exportsObject) {
+          // eslint-disable-next-line local-rules/no-uncategorized-errors
+          throw new Error(
+            `Unable to parse Storybook main file while trying to read 'core' property`
+          );
+        }
         main.setFieldValue(['core', 'disableWhatsNewNotifications'], disableWhatsNewNotifications);
         await writeFile(mainPath, printConfig(main).code);
         if (isTelemetryEnabled) {
diff --git a/code/core/src/csf-tools/ConfigFile.test.ts b/code/core/src/csf-tools/ConfigFile.test.ts
index fe841c49f488..e3409d5eb681 100644
--- a/code/core/src/csf-tools/ConfigFile.test.ts
+++ b/code/core/src/csf-tools/ConfigFile.test.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-underscore-dangle */
 import { describe, expect, it } from 'vitest';
 
 import { babelPrint } from '@storybook/core/babel';
@@ -1080,7 +1081,6 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.setImport('path', 'path');
 
-      // eslint-disable-next-line no-underscore-dangle
       const parsed = babelPrint(config._ast);
 
       expect(parsed).toMatchInlineSnapshot(`
@@ -1099,7 +1099,6 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.setImport('path', 'path');
 
-      // eslint-disable-next-line no-underscore-dangle
       const parsed = babelPrint(config._ast);
 
       expect(parsed).toMatchInlineSnapshot(`
@@ -1118,7 +1117,6 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.setImport(['dirname'], 'path');
 
-      // eslint-disable-next-line no-underscore-dangle
       const parsed = babelPrint(config._ast);
 
       expect(parsed).toMatchInlineSnapshot(`
@@ -1139,7 +1137,6 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.setImport(['dirname'], 'path');
 
-      // eslint-disable-next-line no-underscore-dangle
       const parsed = babelPrint(config._ast);
 
       expect(parsed).toMatchInlineSnapshot(`
@@ -1161,7 +1158,6 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.setRequireImport('path', 'path');
 
-      // eslint-disable-next-line no-underscore-dangle
       const parsed = babelPrint(config._ast);
 
       expect(parsed).toMatchInlineSnapshot(`
@@ -1181,7 +1177,6 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.setRequireImport('path', 'path');
 
-      // eslint-disable-next-line no-underscore-dangle
       const parsed = babelPrint(config._ast);
 
       expect(parsed).toMatchInlineSnapshot(`
@@ -1200,7 +1195,6 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.setRequireImport(['dirname'], 'path');
 
-      // eslint-disable-next-line no-underscore-dangle
       const parsed = babelPrint(config._ast);
 
       expect(parsed).toMatchInlineSnapshot(`
@@ -1224,7 +1218,6 @@ describe('ConfigFile', () => {
       const config = loadConfig(source).parse();
       config.setRequireImport(['dirname', 'basename'], 'path');
 
-      // eslint-disable-next-line no-underscore-dangle
       const parsed = babelPrint(config._ast);
 
       expect(parsed).toMatchInlineSnapshot(`
@@ -1308,4 +1301,31 @@ describe('ConfigFile', () => {
       );
     });
   });
+
+  describe('parse', () => {
+    it("export { X } with X is import { X } from 'another-file'", () => {
+      const source = dedent`
+          import type { StorybookConfig } from '@storybook/react-webpack5';
+          import { path } from 'path';
+
+          export { path };
+
+          const config: StorybookConfig = {
+            addons: [
+              'foo',
+              { name: 'bar', options: {} },
+            ],
+            "otherField": [
+              "foo",
+              { "name": 'bar', options: {} },
+            ],
+          }
+          export default config;
+        `;
+      const config = loadConfig(source).parse();
+
+      expect(config._exportDecls['path']).toBe(undefined);
+      expect(config._exports['path']).toBe(undefined);
+    });
+  });
 });
diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts
index 5cb0d28234eb..dc9f973d5ad6 100644
--- a/code/core/src/csf-tools/ConfigFile.ts
+++ b/code/core/src/csf-tools/ConfigFile.ts
@@ -102,6 +102,7 @@ const _findVarDeclarator = (
 ): t.VariableDeclarator | null | undefined => {
   let declarator: t.VariableDeclarator | null | undefined = null;
   let declarations: t.VariableDeclarator[] | null = null;
+
   program.body.find((node: t.Node) => {
     if (t.isVariableDeclaration(node)) {
       declarations = node.declarations;
@@ -248,9 +249,13 @@ export class ConfigFile {
               ) {
                 const { name: localName } = spec.local;
                 const { name: exportName } = spec.exported;
+
                 const decl = _findVarDeclarator(localName, parent as t.Program) as any;
-                self._exports[exportName] = decl.init;
-                self._exportDecls[exportName] = decl;
+                // decl can be empty in case X from `import { X } from ....` because it is not handled in _findVarDeclarator
+                if (decl) {
+                  self._exports[exportName] = decl.init;
+                  self._exportDecls[exportName] = decl;
+                }
               }
             });
           } else {
diff --git a/code/core/src/csf-tools/CsfFile.test.ts b/code/core/src/csf-tools/CsfFile.test.ts
index 18d441e666b8..d7194edcdf2e 100644
--- a/code/core/src/csf-tools/CsfFile.test.ts
+++ b/code/core/src/csf-tools/CsfFile.test.ts
@@ -81,6 +81,7 @@ describe('CsfFile', () => {
         stories:
           - id: foo-bar--a
             name: A
+            localName: A
             parameters:
               __id: foo-bar--a
             __stats:
@@ -94,6 +95,7 @@ describe('CsfFile', () => {
               moduleMock: false
           - id: foo-bar--b
             name: B
+            localName: B
             parameters:
               __id: foo-bar--b
             __stats:
@@ -790,6 +792,7 @@ describe('CsfFile', () => {
         stories:
           - id: foo-bar--a
             name: A
+            localName: default
             __stats:
               play: false
               render: false
@@ -801,6 +804,7 @@ describe('CsfFile', () => {
               moduleMock: false
           - id: foo-bar--b
             name: B
+            localName: B
             __stats:
               play: false
               render: false
@@ -878,6 +882,7 @@ describe('CsfFile', () => {
         stories:
           - id: foo-bar--a
             name: A
+            localName: A
             parameters:
               __id: foo-bar--a
             __stats:
diff --git a/code/core/src/csf-tools/CsfFile.ts b/code/core/src/csf-tools/CsfFile.ts
index d9859da5cecb..b953395c9abc 100644
--- a/code/core/src/csf-tools/CsfFile.ts
+++ b/code/core/src/csf-tools/CsfFile.ts
@@ -174,7 +174,7 @@ export class NoMetaError extends Error {
     super(dedent`
       CSF: ${message} ${formatLocation(ast, fileName)}
 
-      More info: https://storybook.js.org/docs/react/writing-stories#default-export
+      More info: https://storybook.js.org/docs/writing-stories#default-export
     `);
     this.name = this.constructor.name;
   }
@@ -190,6 +190,7 @@ export interface StaticMeta
 
 export interface StaticStory extends Pick<StoryAnnotations, 'name' | 'parameters' | 'tags'> {
   id: string;
+  localName?: string;
   __stats: IndexInputStats;
 }
 
@@ -488,6 +489,7 @@ export class CsfFile {
             node.specifiers.forEach((specifier) => {
               if (t.isExportSpecifier(specifier) && t.isIdentifier(specifier.exported)) {
                 const { name: exportName } = specifier.exported;
+                const { name: localName } = specifier.local;
                 const decl = t.isProgram(parent)
                   ? findVarInitialization(specifier.local.name, parent)
                   : specifier.local;
@@ -515,6 +517,7 @@ export class CsfFile {
                   self._stories[exportName] = {
                     id: 'FIXME',
                     name: exportName,
+                    localName,
                     parameters: {},
                     __stats: {},
                   };
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
index 84d9ac273718..5b030ac19c73 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.test.ts
@@ -296,6 +296,40 @@ describe('transformer', () => {
       `);
     });
 
+    it('should add test statement to const declared renamed exported stories', async () => {
+      const code = `
+        export default {};
+        const Primary = {
+          args: {
+            label: 'Primary Button',
+          },
+        };
+
+        export { Primary as PrimaryStory };
+      `;
+
+      const result = await transform({ code });
+
+      expect(result.code).toMatchInlineSnapshot(`
+        import { test as _test, expect as _expect } from "vitest";
+        import { testStory as _testStory } from "@storybook/experimental-addon-test/internal/test-utils";
+        const _meta = {
+          title: "automatic/calculated/title"
+        };
+        export default _meta;
+        const Primary = {
+          args: {
+            label: 'Primary Button'
+          }
+        };
+        export { Primary as PrimaryStory };
+        const _isRunningFromThisFile = import.meta.url.includes(globalThis.__vitest_worker__.filepath ?? _expect.getState().testPath);
+        if (_isRunningFromThisFile) {
+          _test("PrimaryStory", _testStory("PrimaryStory", Primary, _meta, []));
+        }
+      `);
+    });
+
     it('should add tests for multiple stories', async () => {
       const code = `
         export default {};
diff --git a/code/core/src/csf-tools/vitest-plugin/transformer.ts b/code/core/src/csf-tools/vitest-plugin/transformer.ts
index 778ea752f1d0..c318faa1d29e 100644
--- a/code/core/src/csf-tools/vitest-plugin/transformer.ts
+++ b/code/core/src/csf-tools/vitest-plugin/transformer.ts
@@ -19,11 +19,14 @@ type TagsFilter = {
 };
 
 const isValidTest = (storyTags: string[], tagsFilter: TagsFilter) => {
-  const isIncluded =
-    tagsFilter?.include.length === 0 || tagsFilter?.include.some((tag) => storyTags.includes(tag));
-  const isNotExcluded = tagsFilter?.exclude.every((tag) => !storyTags.includes(tag));
-
-  return isIncluded && isNotExcluded;
+  if (tagsFilter.include.length && !tagsFilter.include.some((tag) => storyTags?.includes(tag))) {
+    return false;
+  }
+  if (tagsFilter.exclude.some((tag) => storyTags?.includes(tag))) {
+    return false;
+  }
+  // Skipped tests are intentionally included here
+  return true;
 };
 /**
  * TODO: the functionality in this file can be moved back to the vitest plugin itself It can use
@@ -201,10 +204,12 @@ export async function vitestTransform({
     ast.program.body.push(isRunningFromThisFileDeclaration);
 
     const getTestStatementForStory = ({
+      localName,
       exportName,
       testTitle,
       node,
     }: {
+      localName: string;
       exportName: string;
       testTitle: string;
       node: t.Node;
@@ -215,7 +220,7 @@ export async function vitestTransform({
           t.stringLiteral(testTitle),
           t.callExpression(testStoryId, [
             t.stringLiteral(exportName),
-            t.identifier(exportName),
+            t.identifier(localName),
             t.identifier(metaExportName),
             skipTagsId,
           ]),
@@ -241,9 +246,10 @@ export async function vitestTransform({
           return;
         }
 
+        const localName = parsed._stories[exportName].localName ?? exportName;
         // use the story's name as the test title for vitest, and fallback to exportName
         const testTitle = parsed._stories[exportName].name ?? exportName;
-        return getTestStatementForStory({ testTitle, exportName, node });
+        return getTestStatementForStory({ testTitle, localName, exportName, node });
       })
       .filter((st) => !!st) as t.ExpressionStatement[];
 
diff --git a/code/core/src/docs-tools/argTypes/convert/convert.test.ts b/code/core/src/docs-tools/argTypes/convert/convert.test.ts
index 25d1b04f01aa..11ca35291953 100644
--- a/code/core/src/docs-tools/argTypes/convert/convert.test.ts
+++ b/code/core/src/docs-tools/argTypes/convert/convert.test.ts
@@ -4,7 +4,7 @@ import { describe, expect, it } from 'vitest';
 
 import { transformSync } from '@storybook/core/babel';
 
-import mapValues from 'lodash/mapValues.js';
+import { mapValues } from 'es-toolkit';
 import requireFromString from 'require-from-string';
 
 import { normalizeNewlines } from '../utils';
diff --git a/code/core/src/docs-tools/argTypes/convert/proptypes/convert.ts b/code/core/src/docs-tools/argTypes/convert/proptypes/convert.ts
index 710ddfa449d5..c3426ecfd3e2 100644
--- a/code/core/src/docs-tools/argTypes/convert/proptypes/convert.ts
+++ b/code/core/src/docs-tools/argTypes/convert/proptypes/convert.ts
@@ -1,6 +1,6 @@
 import type { SBType } from '@storybook/core/types';
 
-import mapValues from 'lodash/mapValues.js';
+import { mapValues } from 'es-toolkit';
 
 import { parseLiteral } from '../utils';
 import type { PTType } from './types';
diff --git a/code/core/src/manager-api/lib/addons.ts b/code/core/src/manager-api/lib/addons.ts
index c937c0508a2b..e893dfa7b984 100644
--- a/code/core/src/manager-api/lib/addons.ts
+++ b/code/core/src/manager-api/lib/addons.ts
@@ -8,6 +8,7 @@ import type {
   Addon_PageType,
   Addon_SidebarBottomType,
   Addon_SidebarTopType,
+  Addon_TestProviderType,
   Addon_Type,
   Addon_Types,
   Addon_TypesMapping,
@@ -70,7 +71,8 @@ export class AddonStore {
       | Addon_Types
       | Addon_TypesEnum.experimental_PAGE
       | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
-      | Addon_TypesEnum.experimental_SIDEBAR_TOP,
+      | Addon_TypesEnum.experimental_SIDEBAR_TOP
+      | Addon_TypesEnum.experimental_TEST_PROVIDER,
   >(type: T): Addon_Collection<Addon_TypesMapping[T]> | any {
     if (!this.elements[type]) {
       this.elements[type] = {};
@@ -91,6 +93,7 @@ export class AddonStore {
       | Addon_BaseType
       | Omit<Addon_SidebarTopType, 'id'>
       | Omit<Addon_SidebarBottomType, 'id'>
+      | Omit<Addon_TestProviderType, 'id'>
       | Omit<Addon_PageType, 'id'>
       | Omit<Addon_WrapperType, 'id'>
   ): void {
@@ -129,6 +132,10 @@ export class AddonStore {
   loadAddons = (api: any) => {
     Object.values(this.loaders).forEach((value: any) => value(api));
   };
+
+  experimental_getRegisteredAddons() {
+    return Object.keys(this.loaders);
+  }
 }
 
 // Enforce addons store to be a singleton
diff --git a/code/core/src/manager-api/lib/intersect.ts b/code/core/src/manager-api/lib/intersect.ts
new file mode 100644
index 000000000000..5918f7c8babf
--- /dev/null
+++ b/code/core/src/manager-api/lib/intersect.ts
@@ -0,0 +1,14 @@
+export default <T>(a: T[], b: T[]): T[] => {
+  // no point in intersecting if one of the input is ill-defined
+  if (!Array.isArray(a) || !Array.isArray(b) || !a.length || !b.length) {
+    return [];
+  }
+
+  return a.reduce((acc: T[], aValue) => {
+    if (b.includes(aValue)) {
+      acc.push(aValue);
+    }
+
+    return acc;
+  }, []);
+};
diff --git a/code/core/src/manager-api/lib/merge.ts b/code/core/src/manager-api/lib/merge.ts
index ec4c474942b0..f00195c304b2 100644
--- a/code/core/src/manager-api/lib/merge.ts
+++ b/code/core/src/manager-api/lib/merge.ts
@@ -1,10 +1,13 @@
 import { logger } from '@storybook/core/client-logger';
 
-import isEqual from 'lodash/isEqual.js';
-import mergeWith from 'lodash/mergeWith.js';
+import { isEqual, mergeWith, omitBy, pick } from 'es-toolkit';
 
-export default <TObj = any>(a: TObj, b: Partial<TObj>) =>
-  mergeWith({}, a, b, (objValue: TObj, srcValue: Partial<TObj>) => {
+export default <TObj = any>(a: TObj, ...b: Partial<TObj>[]): TObj => {
+  // start with empty object
+  let target = {};
+
+  // merge object a unto target
+  target = mergeWith({}, a, (objValue: TObj, srcValue: Partial<TObj>) => {
     if (Array.isArray(srcValue) && Array.isArray(objValue)) {
       srcValue.forEach((s) => {
         const existing = objValue.find((o) => o === s || isEqual(o, s));
@@ -19,5 +22,52 @@ export default <TObj = any>(a: TObj, b: Partial<TObj>) =>
       logger.log(['the types mismatch, picking', objValue]);
       return objValue;
     }
-    return undefined;
   });
+
+  for (const obj of b) {
+    // merge object b unto target
+    target = mergeWith(target, obj, (objValue: TObj, srcValue: Partial<TObj>) => {
+      if (Array.isArray(srcValue) && Array.isArray(objValue)) {
+        srcValue.forEach((s) => {
+          const existing = objValue.find((o) => o === s || isEqual(o, s));
+          if (!existing) {
+            objValue.push(s);
+          }
+        });
+
+        return objValue;
+      }
+      if (Array.isArray(objValue)) {
+        logger.log(['the types mismatch, picking', objValue]);
+        return objValue;
+      }
+    });
+  }
+
+  return target as TObj;
+};
+
+export const noArrayMerge = <TObj = any>(a: TObj, ...b: Partial<TObj>[]): TObj => {
+  // start with empty object
+  let target = {};
+
+  // merge object a unto target
+  target = mergeWith({}, a, (objValue: TObj, srcValue: Partial<TObj>) => {
+    // Treat arrays as scalars:
+    if (Array.isArray(srcValue)) {
+      return srcValue;
+    }
+  });
+
+  for (const obj of b) {
+    // merge object b unto target
+    target = mergeWith(target, obj, (objValue: TObj, srcValue: Partial<TObj>) => {
+      // Treat arrays as scalars:
+      if (Array.isArray(srcValue)) {
+        return srcValue;
+      }
+    });
+  }
+
+  return target as TObj;
+};
diff --git a/code/core/src/manager-api/lib/store-setup.ts b/code/core/src/manager-api/lib/store-setup.ts
index 291898bede0a..9928ae09c8fc 100644
--- a/code/core/src/manager-api/lib/store-setup.ts
+++ b/code/core/src/manager-api/lib/store-setup.ts
@@ -4,8 +4,13 @@ import { parse, stringify } from 'telejson';
 // setting up the store, overriding set and get to use telejson
 export default (_: any) => {
   _.fn('set', function (key: string, data: object) {
-    // @ts-expect-error('this' implicitly has type 'any')
-    return _.set(this._area, this._in(key), stringify(data, { maxDepth: 50 }));
+    return _.set(
+      // @ts-expect-error('this' implicitly has type 'any')
+      this._area,
+      // @ts-expect-error('this' implicitly has type 'any')
+      this._in(key),
+      stringify(data, { maxDepth: 50, allowFunction: false })
+    );
   });
   _.fn('get', function (key: string, alt: string) {
     // @ts-expect-error('this' implicitly has type 'any')
diff --git a/code/core/src/manager-api/lib/stories.test.ts b/code/core/src/manager-api/lib/stories.test.ts
index 76aaadd7f99d..3f0cbe63b5be 100644
--- a/code/core/src/manager-api/lib/stories.test.ts
+++ b/code/core/src/manager-api/lib/stories.test.ts
@@ -2,8 +2,10 @@ import { describe, expect, it } from 'vitest';
 
 import type { API_PreparedStoryIndex, StoryIndexV2, StoryIndexV3 } from '@storybook/core/types';
 
+import type { State } from '../root';
 import { mockEntries } from '../tests/mockStoriesEntries';
 import {
+  transformStoryIndexToStoriesHash,
   transformStoryIndexV2toV3,
   transformStoryIndexV3toV4,
   transformStoryIndexV4toV5,
@@ -216,3 +218,60 @@ describe('transformStoryIndexV4toV5', () => {
     `);
   });
 });
+
+describe('transformStoryIndexToStoriesHash', () => {
+  it('does not apply filters to failing stories', () => {
+    // Arrange - set up an index with two stories, one of which has a failing status
+    const indexV5: API_PreparedStoryIndex = {
+      v: 5,
+      entries: {
+        '1': {
+          id: '1',
+          type: 'story',
+          title: 'Story 1',
+          name: 'Story 1',
+          importPath: './path/to/story-1.ts',
+          parameters: {},
+          tags: [],
+        },
+        '2': {
+          id: '2',
+          type: 'story',
+          title: 'Story 2',
+          name: 'Story 2',
+          importPath: './path/to/story-2.ts',
+          parameters: {},
+          tags: [],
+        },
+      },
+    };
+
+    const filters: State['filters'] = {
+      someFilter: () => false,
+    };
+
+    const status: State['status'] = {
+      '1': { someStatus: { status: 'error', title: 'broken', description: 'very bad' } },
+      '2': { someStatus: { status: 'success', title: 'perfect', description: 'nice' } },
+    };
+
+    const options = {
+      provider: {
+        getConfig: () => ({ sidebar: {} }),
+      } as any,
+      docsOptions: { docsMode: false },
+      filters,
+      status,
+    };
+
+    // Act - transform the index to hashes
+    const result = transformStoryIndexToStoriesHash(indexV5, options);
+
+    // Assert - the failing story is still present in the result, even though the filters remove all stories
+    expect(Object.keys(result)).toHaveLength(2);
+    expect(result['story-1']).toBeTruthy();
+    expect(result['1']).toBeTruthy();
+    expect(result['story-2']).toBeUndefined();
+    expect(result['2']).toBeUndefined();
+  });
+});
diff --git a/code/core/src/manager-api/lib/stories.ts b/code/core/src/manager-api/lib/stories.ts
index a4ff209c3249..b38d30000531 100644
--- a/code/core/src/manager-api/lib/stories.ts
+++ b/code/core/src/manager-api/lib/stories.ts
@@ -1,4 +1,5 @@
 import type {
+  API_BaseEntry,
   API_ComponentEntry,
   API_DocsEntry,
   API_GroupEntry,
@@ -16,15 +17,16 @@ import type {
   StoryId,
   StoryIndexV2,
   StoryIndexV3,
+  Tag,
 } from '@storybook/core/types';
 import { sanitize } from '@storybook/csf';
 
-import countBy from 'lodash/countBy.js';
-import mapValues from 'lodash/mapValues.js';
+import { countBy, mapValues } from 'es-toolkit';
 import memoize from 'memoizerific';
 import { dedent } from 'ts-dedent';
 
 import { type API, type State, combineParameters } from '../root';
+import intersect from './intersect';
 import merge from './merge';
 
 const TITLE_PATH_SEPARATOR = /\s*\/\s*/;
@@ -41,7 +43,7 @@ export const denormalizeStoryParameters = ({
       kindParameters[storyData.kind],
       storyData.parameters as unknown as Parameters
     ),
-  }));
+  })) as SetStoriesStoryData;
 };
 
 export const transformSetStoriesStoryDataToStoriesHash = (
@@ -112,7 +114,7 @@ export const transformStoryIndexV2toV3 = (index: StoryIndexV2): StoryIndexV3 =>
 };
 
 export const transformStoryIndexV3toV4 = (index: StoryIndexV3): API_PreparedStoryIndex => {
-  const countByTitle = countBy(Object.values(index.stories), 'title');
+  const countByTitle = countBy(Object.values(index.stories), (item) => item.title);
   return {
     v: 4,
     entries: Object.values(index.stories).reduce(
@@ -190,11 +192,17 @@ export const transformStoryIndexToStoriesHash = (
   const entryValues = Object.values(index.entries).filter((entry: any) => {
     let result = true;
 
+    // All stories with a failing status should always show up, regardless of the applied filters
+    const storyStatus = status[entry.id];
+    if (Object.values(storyStatus ?? {}).some(({ status: s }) => s === 'error')) {
+      return result;
+    }
+
     Object.values(filters).forEach((filter: any) => {
       if (result === false) {
         return;
       }
-      result = filter({ ...entry, status: status[entry.id] });
+      result = filter({ ...entry, status: storyStatus });
     });
 
     return result;
@@ -248,6 +256,7 @@ export const transformStoryIndexToStoriesHash = (
           type: 'root',
           id,
           name: names[idx],
+          tags: [],
           depth: idx,
           renderLabel,
           startCollapsed: collapsedRoots.includes(id),
@@ -267,6 +276,7 @@ export const transformStoryIndexToStoriesHash = (
           type: 'component',
           id,
           name: names[idx],
+          tags: [],
           parent: paths[idx - 1],
           depth: idx,
           renderLabel,
@@ -279,6 +289,7 @@ export const transformStoryIndexToStoriesHash = (
           type: 'group',
           id,
           name: names[idx],
+          tags: [],
           parent: paths[idx - 1],
           depth: idx,
           renderLabel,
@@ -292,6 +303,7 @@ export const transformStoryIndexToStoriesHash = (
     // Finally add an entry for the docs/story itself
     acc[item.id] = {
       type: 'story',
+      tags: [],
       ...item,
       depth: paths.length,
       parent: paths[paths.length - 1],
@@ -310,9 +322,18 @@ export const transformStoryIndexToStoriesHash = (
     }
 
     acc[item.id] = item;
-    // Ensure we add the children depth-first *before* inserting any other entries
+    // Ensure we add the children depth-first *before* inserting any other entries,
+    // and compute tags from the children put in the accumulator afterwards, once
+    // they're all known and we can compute a sound intersection.
     if (item.type === 'root' || item.type === 'group' || item.type === 'component') {
       item.children.forEach((childId: any) => addItem(acc, storiesHashOutOfOrder[childId]));
+
+      item.tags = item.children.reduce((currentTags: Tag[] | null, childId: any): Tag[] => {
+        const child = acc[childId];
+
+        // On the first child, we have nothing to intersect against so we use it as a source of data.
+        return currentTags === null ? child.tags : intersect(currentTags, child.tags);
+      }, null);
     }
     return acc;
   }
@@ -327,6 +348,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/addons.ts b/code/core/src/manager-api/modules/addons.ts
index c620792e4fee..16a35fcfc9ad 100644
--- a/code/core/src/manager-api/modules/addons.ts
+++ b/code/core/src/manager-api/modules/addons.ts
@@ -30,6 +30,7 @@ export interface SubAPI {
       | Addon_Types
       | Addon_TypesEnum.experimental_PAGE
       | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
+      | Addon_TypesEnum.experimental_TEST_PROVIDER
       | Addon_TypesEnum.experimental_SIDEBAR_TOP = Addon_Types,
   >(
     type: T
diff --git a/code/core/src/manager-api/modules/experimental_testmodule.ts b/code/core/src/manager-api/modules/experimental_testmodule.ts
new file mode 100644
index 000000000000..4058333a3b10
--- /dev/null
+++ b/code/core/src/manager-api/modules/experimental_testmodule.ts
@@ -0,0 +1,170 @@
+import { Addon_TypesEnum, type StoryId } from '@storybook/core/types';
+
+import {
+  TESTING_MODULE_CANCEL_TEST_RUN_REQUEST,
+  TESTING_MODULE_RUN_ALL_REQUEST,
+  TESTING_MODULE_RUN_REQUEST,
+  TESTING_MODULE_WATCH_MODE_REQUEST,
+  type TestProviderId,
+  type TestProviderState,
+  type TestProviders,
+  type TestingModuleRunRequestPayload,
+  type TestingModuleWatchModeRequestPayload,
+} from '@storybook/core/core-events';
+
+import invariant from 'tiny-invariant';
+
+import type { ModuleFn } from '../lib/types';
+
+export type SubState = {
+  testProviders: TestProviders;
+};
+
+const initialTestProviderState: TestProviderState = {
+  details: {} as { [key: string]: any },
+  cancellable: false,
+  cancelling: false,
+  running: false,
+  watching: false,
+  failed: false,
+  crashed: false,
+};
+
+interface RunOptions {
+  entryId?: StoryId;
+}
+
+export type SubAPI = {
+  getTestProviderState(id: string): TestProviderState | undefined;
+  updateTestProviderState(id: TestProviderId, update: Partial<TestProviderState>): void;
+  clearTestProviderState(id: TestProviderId): void;
+  runTestProvider(id: TestProviderId, options?: RunOptions): () => void;
+  setTestProviderWatchMode(id: TestProviderId, watchMode: boolean): void;
+  cancelTestProvider(id: TestProviderId): void;
+};
+
+export const init: ModuleFn<SubAPI, SubState> = ({ store, fullAPI }) => {
+  const state: SubState = {
+    testProviders: store.getState().testProviders || {},
+  };
+
+  const api: SubAPI = {
+    getTestProviderState(id) {
+      const { testProviders } = store.getState();
+      return testProviders?.[id];
+    },
+    updateTestProviderState(id, update) {
+      return store.setState(
+        ({ testProviders }) => {
+          const currentState = testProviders[id];
+          const updatedState = currentState.stateUpdater?.(currentState, update) ?? {
+            ...currentState,
+            ...update,
+            details: { ...currentState.details, ...update.details },
+          };
+          return { testProviders: { ...testProviders, [id]: updatedState } };
+        },
+        { persistence: 'session' }
+      );
+    },
+    clearTestProviderState(id) {
+      const update = {
+        cancelling: false,
+        running: false,
+        failed: false,
+        crashed: false,
+        progress: undefined,
+      };
+      return store.setState(
+        ({ testProviders }) => {
+          return { testProviders: { ...testProviders, [id]: { ...testProviders[id], ...update } } };
+        },
+        { persistence: 'session' }
+      );
+    },
+    runTestProvider(id, options) {
+      const index = store.getState().index;
+      invariant(index, 'The index is currently unavailable');
+
+      api.updateTestProviderState(id, {
+        running: true,
+        failed: false,
+        crashed: false,
+        progress: undefined,
+      });
+
+      const provider = store.getState().testProviders[id];
+
+      const indexUrl = new URL('index.json', window.location.href).toString();
+
+      if (!options?.entryId) {
+        const payload: TestingModuleRunRequestPayload = {
+          providerId: id,
+          indexUrl,
+          config: provider.config,
+        };
+
+        fullAPI.emit(TESTING_MODULE_RUN_REQUEST, payload);
+
+        // For backwards compatibility:
+        fullAPI.emit(TESTING_MODULE_RUN_ALL_REQUEST, { providerId: id });
+
+        return () => api.cancelTestProvider(id);
+      }
+
+      const entry = index[options.entryId];
+      invariant(entry, `No entry found in the index for id '${options.entryId}'`);
+
+      const findStories = (entryId: StoryId, results: StoryId[] = []): StoryId[] => {
+        const node = index[entryId];
+        if (node.type === 'story') {
+          results.push(node.id);
+        } else if ('children' in node) {
+          node.children.forEach((childId) => findStories(childId, results));
+        }
+        return results;
+      };
+
+      const payload: TestingModuleRunRequestPayload = {
+        providerId: id,
+        indexUrl,
+        storyIds: findStories(options.entryId),
+        config: provider.config,
+      };
+      fullAPI.emit(TESTING_MODULE_RUN_REQUEST, payload);
+      return () => api.cancelTestProvider(id);
+    },
+    setTestProviderWatchMode(id, watchMode) {
+      api.updateTestProviderState(id, { watching: watchMode });
+      const config = store.getState().testProviders[id].config;
+      fullAPI.emit(TESTING_MODULE_WATCH_MODE_REQUEST, {
+        providerId: id,
+        watchMode,
+        config,
+      } as TestingModuleWatchModeRequestPayload);
+    },
+    cancelTestProvider(id) {
+      api.updateTestProviderState(id, { cancelling: true });
+      fullAPI.emit(TESTING_MODULE_CANCEL_TEST_RUN_REQUEST, { providerId: id });
+    },
+  };
+
+  const initModule = async () => {
+    const initialState: TestProviders = Object.fromEntries(
+      Object.entries(fullAPI.getElements(Addon_TypesEnum.experimental_TEST_PROVIDER)).map(
+        ([id, config]) => [
+          id,
+          {
+            ...config,
+            ...initialTestProviderState,
+            ...(state?.testProviders?.[id] || {}),
+            running: false,
+          } as TestProviders[0],
+        ]
+      )
+    );
+
+    store.setState({ testProviders: initialState }, { persistence: 'session' });
+  };
+  return { init: initModule, state, api };
+};
diff --git a/code/core/src/manager-api/modules/layout.ts b/code/core/src/manager-api/modules/layout.ts
index 642f78fc5813..6687c36b1137 100644
--- a/code/core/src/manager-api/modules/layout.ts
+++ b/code/core/src/manager-api/modules/layout.ts
@@ -5,8 +5,7 @@ import { global } from '@storybook/global';
 
 import { SET_CONFIG } from '@storybook/core/core-events';
 
-import { dequal as deepEqual } from 'dequal';
-import pick from 'lodash/pick.js';
+import { isEqual as deepEqual, pick, toMerged } from 'es-toolkit';
 
 import merge from '../lib/merge';
 import type { ModuleFn } from '../lib/types';
@@ -101,7 +100,7 @@ export const defaultLayoutState: SubState = {
     panelPosition: 'bottom',
     showTabs: true,
   },
-  selectedPanel: undefined,
+  selectedPanel: 'chromaui/addon-visual-tests/panel',
   theme: create(),
 };
 
@@ -319,14 +318,13 @@ export const init: ModuleFn<SubAPI, SubState> = ({ store, provider, singleStory
       return {
         ...defaultLayoutState,
         layout: {
-          ...defaultLayoutState.layout,
-          ...pick(options, Object.keys(defaultLayoutState.layout)),
+          ...toMerged(
+            defaultLayoutState.layout,
+            pick(options, Object.keys(defaultLayoutState.layout))
+          ),
           ...(singleStory && { navSize: 0 }),
         },
-        ui: {
-          ...defaultLayoutState.ui,
-          ...pick(options, Object.keys(defaultLayoutState.ui)),
-        },
+        ui: toMerged(defaultLayoutState.ui, pick(options, Object.keys(defaultLayoutState.ui))),
         selectedPanel: selectedPanel || defaultLayoutState.selectedPanel,
         theme: theme || defaultLayoutState.theme,
       };
@@ -351,7 +349,7 @@ export const init: ModuleFn<SubAPI, SubState> = ({ store, provider, singleStory
 
       const updatedLayout = {
         ...layout,
-        ...options.layout,
+        ...(options.layout || {}),
         ...pick(options, Object.keys(layout)),
         ...(singleStory && { navSize: 0 }),
       };
@@ -359,7 +357,7 @@ export const init: ModuleFn<SubAPI, SubState> = ({ store, provider, singleStory
       const updatedUi = {
         ...ui,
         ...options.ui,
-        ...pick(options, Object.keys(ui)),
+        ...toMerged(options.ui || {}, pick(options, Object.keys(ui))),
       };
 
       const updatedTheme = {
@@ -388,7 +386,7 @@ export const init: ModuleFn<SubAPI, SubState> = ({ store, provider, singleStory
     },
   };
 
-  const persisted = pick(store.getState(), 'layout', 'selectedPanel');
+  const persisted = pick(store.getState(), ['layout', 'selectedPanel']);
 
   provider.channel?.on(SET_CONFIG, () => {
     api.setOptions(merge(api.getInitialOptions(), persisted));
diff --git a/code/core/src/manager-api/modules/notifications.ts b/code/core/src/manager-api/modules/notifications.ts
index cda1025001ae..c1410cfbeb78 100644
--- a/code/core/src/manager-api/modules/notifications.ts
+++ b/code/core/src/manager-api/modules/notifications.ts
@@ -1,6 +1,6 @@
 import type { API_Notification } from '@storybook/core/types';
 
-import partition from 'lodash/partition.js';
+import { partition } from 'es-toolkit';
 
 import type { ModuleFn } from '../lib/types';
 
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 e92e7a90ce55..fa295bc20567 100644
--- a/code/core/src/manager-api/modules/stories.ts
+++ b/code/core/src/manager-api/modules/stories.ts
@@ -7,6 +7,7 @@ import type {
   API_LeafEntry,
   API_LoadedRefData,
   API_PreparedStoryIndex,
+  API_StatusObject,
   API_StatusState,
   API_StatusUpdate,
   API_StoryEntry,
@@ -268,6 +269,12 @@ export interface SubAPI {
    * @returns {Promise<void>} A promise that resolves when the preview has been set as initialized.
    */
   setPreviewInitialized: (ref?: ComposedRef) => Promise<void>;
+  /**
+   * Returns the current status of the stories.
+   *
+   * @returns {API_StatusState} The current status of the stories.
+   */
+  getCurrentStoryStatus: () => Record<string, API_StatusObject>;
   /**
    * Updates the status of a collection of stories.
    *
@@ -561,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 (
@@ -604,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) => {
@@ -630,6 +668,11 @@ export const init: ModuleFn<SubAPI, SubState> = ({
       }
     },
 
+    getCurrentStoryStatus: () => {
+      const { status, storyId } = store.getState();
+      return status[storyId as StoryId];
+    },
+
     /* EXPERIMENTAL APIs */
     experimental_updateStatus: async (id, input) => {
       const { status, internal_index: index } = store.getState();
diff --git a/code/core/src/manager-api/modules/url.ts b/code/core/src/manager-api/modules/url.ts
index 40971e9dea42..1b08ba7358d4 100644
--- a/code/core/src/manager-api/modules/url.ts
+++ b/code/core/src/manager-api/modules/url.ts
@@ -159,9 +159,10 @@ export interface SubAPI {
    * Set the query parameters for the current URL & navigates.
    *
    * @param {QueryParams} input - An object containing the query parameters to set.
+   * @param {NavigateOptions} options - Options for the navigation.
    * @returns {void}
    */
-  applyQueryParams: (input: QueryParams) => void;
+  applyQueryParams: (input: QueryParams, options?: NavigateOptions) => void;
 }
 
 export const init: ModuleFn<SubAPI, SubState> = (moduleArgs) => {
@@ -206,10 +207,10 @@ export const init: ModuleFn<SubAPI, SubState> = (moduleArgs) => {
         provider.channel?.emit(UPDATE_QUERY_PARAMS, update);
       }
     },
-    applyQueryParams(input) {
+    applyQueryParams(input, options) {
       const { path, queryParams } = api.getUrlState();
 
-      navigateTo(path, { ...queryParams, ...input } as any);
+      navigateTo(path, { ...queryParams, ...input } as any, options);
       api.setQueryParams(input);
     },
     navigateUrl(url, options) {
diff --git a/code/core/src/manager-api/modules/versions.ts b/code/core/src/manager-api/modules/versions.ts
index 734ba0442838..df0712e8c638 100644
--- a/code/core/src/manager-api/modules/versions.ts
+++ b/code/core/src/manager-api/modules/versions.ts
@@ -104,8 +104,10 @@ export const init: ModuleFn = ({ store }) => {
         }
       }
 
-      if (subpath) {
-        url += `${subpath}/`;
+      const [cleanedSubpath, hash] = subpath?.split('#') || [];
+
+      if (cleanedSubpath) {
+        url += `${cleanedSubpath}/`;
       }
 
       if (renderer && typeof global.STORYBOOK_RENDERER !== 'undefined') {
@@ -116,6 +118,10 @@ export const init: ModuleFn = ({ store }) => {
         }
       }
 
+      if (hash) {
+        url += `#${hash}`;
+      }
+
       return url;
     },
     versionUpdateAvailable: () => {
diff --git a/code/core/src/manager-api/root.tsx b/code/core/src/manager-api/root.tsx
index bf992f1907a8..0889a560c8a0 100644
--- a/code/core/src/manager-api/root.tsx
+++ b/code/core/src/manager-api/root.tsx
@@ -41,14 +41,16 @@ import {
   STORY_CHANGED,
 } from '@storybook/core/core-events';
 
-import mergeWith from 'lodash/mergeWith.js';
+import { isEqual } from 'es-toolkit';
 
 import { createContext } from './context';
 import getInitialState from './initial-state';
 import { types } from './lib/addons';
+import { noArrayMerge } from './lib/merge';
 import type { ModuleFn } from './lib/types';
 import * as addons from './modules/addons';
 import * as channel from './modules/channel';
+import * as testProviders from './modules/experimental_testmodule';
 import * as globals from './modules/globals';
 import * as layout from './modules/layout';
 import * as notifications from './modules/notifications';
@@ -78,6 +80,7 @@ export type State = layout.SubState &
   stories.SubState &
   refs.SubState &
   notifications.SubState &
+  testProviders.SubState &
   version.SubState &
   url.SubState &
   shortcuts.SubState &
@@ -97,6 +100,7 @@ export type API = addons.SubAPI &
   globals.SubAPI &
   layout.SubAPI &
   notifications.SubAPI &
+  testProviders.SubAPI &
   shortcuts.SubAPI &
   settings.SubAPI &
   version.SubAPI &
@@ -129,14 +133,7 @@ export type ManagerProviderProps = RouterData &
 
 // This is duplicated from @storybook/preview-api for the reasons mentioned in lib-addons/types.js
 export const combineParameters = (...parameterSets: Parameters[]) =>
-  mergeWith({}, ...parameterSets, (objValue: any, srcValue: any) => {
-    // Treat arrays as scalars:
-    if (Array.isArray(srcValue)) {
-      return srcValue;
-    }
-
-    return undefined;
-  });
+  noArrayMerge({}, ...parameterSets);
 
 class ManagerProvider extends Component<ManagerProviderProps, State> {
   api: API = {} as API;
@@ -184,6 +181,7 @@ class ManagerProvider extends Component<ManagerProviderProps, State> {
       addons,
       layout,
       notifications,
+      testProviders,
       settings,
       shortcuts,
       stories,
@@ -221,16 +219,9 @@ class ManagerProvider extends Component<ManagerProviderProps, State> {
   }
 
   shouldComponentUpdate(nextProps: ManagerProviderProps, nextState: State): boolean {
-    const prevState = this.state;
     const prevProps = this.props;
-
-    if (prevState !== nextState) {
-      return true;
-    }
-    if (prevProps.path !== nextProps.path) {
-      return true;
-    }
-    return false;
+    const prevState = this.state;
+    return prevProps.path !== nextProps.path || !isEqual(prevState, nextState);
   }
 
   initModules = () => {
diff --git a/code/core/src/manager-api/tests/addons.test.js b/code/core/src/manager-api/tests/addons.test.js
index 4d64ecc95224..c4f5c46d41df 100644
--- a/code/core/src/manager-api/tests/addons.test.js
+++ b/code/core/src/manager-api/tests/addons.test.js
@@ -19,11 +19,21 @@ const PANELS = {
   },
 };
 
+const TEST_PROVIDERS = {
+  'storybook/test/test-provider': {
+    id: 'storybook/test/test-provider',
+    title: 'Component tests',
+  },
+};
+
 const provider = {
   getElements(type) {
     if (type === types.PANEL) {
       return PANELS;
     }
+    if (type === types.experimental_TEST_PROVIDER) {
+      return TEST_PROVIDERS;
+    }
     return null;
   },
 };
@@ -38,14 +48,13 @@ const store = {
 describe('Addons API', () => {
   describe('#getElements', () => {
     it('should return provider elements', () => {
-      // given
       const { api } = initAddons({ provider, store });
 
-      // when
       const panels = api.getElements(types.PANEL);
-
-      // then
       expect(panels).toBe(PANELS);
+
+      const testProviders = api.getElements(types.experimental_TEST_PROVIDER);
+      expect(testProviders).toBe(TEST_PROVIDERS);
     });
   });
 
diff --git a/code/core/src/manager-api/tests/intersect.test.ts b/code/core/src/manager-api/tests/intersect.test.ts
new file mode 100644
index 000000000000..e1e02362bc79
--- /dev/null
+++ b/code/core/src/manager-api/tests/intersect.test.ts
@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest';
+
+import intersect from '../lib/intersect';
+
+describe('Manager API utilities - intersect', () => {
+  it('returns identity when intersecting identity', () => {
+    const a = ['foo', 'bar'];
+    expect(intersect(a, a)).toEqual(a);
+  });
+
+  it('returns a when b is a superset of a', () => {
+    const a = ['foo', 'bar'];
+    const b = ['a', 'foo', 'b', 'bar', 'c', 'ter'];
+    expect(intersect(a, b)).toEqual(a);
+  });
+
+  it('returns b when a is a superset of b', () => {
+    const a = ['a', 'foo', 'b', 'bar', 'c', 'ter'];
+    const b = ['foo', 'bar'];
+    expect(intersect(a, b)).toEqual(b);
+  });
+
+  it('returns an intersection', () => {
+    const a = ['a', 'bar', 'b', 'c'];
+    const b = ['foo', 'bar', 'ter'];
+    expect(intersect(a, b)).toEqual(['bar']);
+  });
+
+  it('returns an empty set when there is no overlap', () => {
+    const a = ['a', 'b', 'c'];
+    const b = ['foo', 'bar', 'ter'];
+    expect(intersect(a, b)).toEqual([]);
+  });
+
+  it('returns an empty set if a is undefined', () => {
+    const b = ['foo', 'bar', 'ter'];
+    expect(intersect(undefined as unknown as [], b)).toEqual([]);
+  });
+
+  it('returns an empty set if b is undefined', () => {
+    const a = ['foo', 'bar', 'ter'];
+    expect(intersect(a, undefined as unknown as [])).toEqual([]);
+  });
+});
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 16b5c926c9c2..6f480061d9ec 100644
--- a/code/core/src/manager-api/tests/stories.test.ts
+++ b/code/core/src/manager-api/tests/stories.test.ts
@@ -162,6 +162,7 @@ describe('stories API', () => {
       expect(index!['design-system']).toMatchObject({
         type: 'root',
         name: 'Design System', // root name originates from `kind`, so it gets trimmed
+        tags: [],
       });
       expect(index!['design-system-some-component']).toMatchObject({
         type: 'component',
@@ -186,6 +187,7 @@ describe('stories API', () => {
             title: 'Root/First',
             name: 'Story 1',
             importPath: './path/to/root/first.ts',
+            tags: [],
           },
           ...mockEntries,
         },
@@ -207,6 +209,7 @@ describe('stories API', () => {
         type: 'root',
         id: 'root',
         children: ['root-first'],
+        tags: [],
       });
     });
     it('sets roots when showRoots = true', () => {
@@ -222,6 +225,7 @@ describe('stories API', () => {
             id: 'a-b--1',
             title: 'a/b',
             name: '1',
+            tags: [],
             importPath: './a/b.ts',
           },
         },
@@ -233,6 +237,7 @@ describe('stories API', () => {
         type: 'root',
         id: 'a',
         children: ['a-b'],
+        tags: [],
       });
       expect(index!['a-b']).toMatchObject({
         type: 'component',
@@ -281,6 +286,127 @@ describe('stories API', () => {
         name: '1',
       });
     });
+    it('intersects story/docs tags to compute tags for component entries', () => {
+      const moduleArgs = createMockModuleArgs({});
+      const { api } = initStories(moduleArgs as unknown as ModuleArgs);
+      const { store } = moduleArgs;
+      api.setIndex({
+        v: 5,
+        entries: {
+          'a--1': {
+            type: 'story',
+            id: 'a--1',
+            title: 'a',
+            name: '1',
+            tags: ['shared', 'one-specific'],
+            importPath: './a.ts',
+          },
+          'a--2': {
+            type: 'story',
+            id: 'a--2',
+            title: 'a',
+            name: '2',
+            tags: ['shared', 'two-specific'],
+            importPath: './a.ts',
+          },
+        },
+      });
+      const { index } = store.getState();
+      // We need exact key ordering, even if in theory JS doesn't guarantee it
+      expect(Object.keys(index!)).toEqual(['a', 'a--1', 'a--2']);
+      expect(index!.a).toMatchObject({
+        type: 'component',
+        id: 'a',
+        tags: ['shared'],
+        children: ['a--1', 'a--2'],
+      });
+      expect(index!['a--1']).toMatchObject({
+        type: 'story',
+        id: 'a--1',
+        parent: 'a',
+        title: 'a',
+        name: '1',
+        tags: ['shared', 'one-specific'],
+      });
+      expect(index!['a--2']).toMatchObject({
+        type: 'story',
+        id: 'a--2',
+        parent: 'a',
+        title: 'a',
+        name: '2',
+        tags: ['shared', 'two-specific'],
+      });
+    });
+
+    it('intersects story/docs tags to compute tags for root and group entries', () => {
+      const moduleArgs = createMockModuleArgs({});
+      const { api } = initStories(moduleArgs as unknown as ModuleArgs);
+      const { store } = moduleArgs;
+      api.setIndex({
+        v: 5,
+        entries: {
+          'a-sampleone': {
+            type: 'story',
+            id: 'a-sampleone',
+            title: 'A/SampleOne',
+            name: '1',
+            tags: ['shared', 'one-specific'],
+            importPath: './a.ts',
+          },
+          'a-sampletwo': {
+            type: 'story',
+            id: 'a-sampletwo',
+            title: 'A/SampleTwo',
+            name: '2',
+            tags: ['shared', 'two-specific'],
+            importPath: './a.ts',
+          },
+          'a-embedded-othertopic': {
+            type: 'docs',
+            id: 'a-embedded-othertopic',
+            title: 'A/Embedded/OtherTopic',
+            name: '3',
+            tags: ['shared', 'embedded-docs-specific', 'other'],
+            storiesImports: [],
+            importPath: './embedded/other.mdx',
+          },
+          'a-embedded-extras': {
+            type: 'docs',
+            id: 'a-embedded-extras',
+            title: 'A/Embedded/Extras',
+            name: '3',
+            tags: ['shared', 'embedded-docs-specific', 'extras'],
+            storiesImports: [],
+            importPath: './embedded/extras.mdx',
+          },
+        },
+      });
+      const { index } = store.getState();
+      // We need exact key ordering, even if in theory JS doesn't guarantee it
+      expect(Object.keys(index!)).toEqual([
+        'a',
+        'a-sampleone',
+        'a-sampletwo',
+        'a-embedded',
+        'a-embedded-othertopic',
+        'a-embedded-extras',
+      ]);
+      // Acts as the root, so that the next level is a group we're testing.
+      expect(index!.a).toMatchObject({
+        type: 'root',
+        id: 'a',
+        children: ['a-sampleone', 'a-sampletwo', 'a-embedded'],
+        tags: ['shared'],
+      });
+      // The object of this test.
+      expect(index!['a-embedded']).toMatchObject({
+        type: 'group',
+        id: 'a-embedded',
+        parent: 'a',
+        name: 'Embedded',
+        tags: ['shared', 'embedded-docs-specific'],
+      });
+    });
     // Stories can get out of order for a few reasons -- see reproductions on
     //   https://github.com/storybookjs/storybook/issues/5518
     it('does the right thing for out of order stories', async () => {
@@ -639,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' } } },
       });
     });
@@ -1413,6 +1544,7 @@ describe('stories API', () => {
         })
       );
     });
+
     it('updates state', async () => {
       const moduleArgs = createMockModuleArgs({});
       const { api } = initStories(moduleArgs as unknown as ModuleArgs);
@@ -1439,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": [
@@ -1453,6 +1585,7 @@ describe('stories API', () => {
             "name": "a",
             "parent": undefined,
             "renderLabel": undefined,
+            "tags": [],
             "type": "component",
           },
           "a--1": {
@@ -1463,6 +1596,7 @@ describe('stories API', () => {
             "parent": "a",
             "prepared": false,
             "renderLabel": undefined,
+            "tags": [],
             "title": "a",
             "type": "story",
           },
@@ -1474,6 +1608,7 @@ describe('stories API', () => {
             "parent": "a",
             "prepared": false,
             "renderLabel": undefined,
+            "tags": [],
             "title": "a",
             "type": "story",
           },
@@ -1495,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', {
@@ -1507,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": [
@@ -1518,6 +1653,7 @@ describe('stories API', () => {
             "name": "a",
             "parent": undefined,
             "renderLabel": undefined,
+            "tags": [],
             "type": "component",
           },
           "a--1": {
@@ -1528,6 +1664,7 @@ describe('stories API', () => {
             "parent": "a",
             "prepared": false,
             "renderLabel": undefined,
+            "tags": [],
             "title": "a",
             "type": "story",
           },
@@ -1545,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": [
@@ -1559,6 +1696,7 @@ describe('stories API', () => {
             "name": "a",
             "parent": undefined,
             "renderLabel": undefined,
+            "tags": [],
             "type": "component",
           },
           "a--1": {
@@ -1569,6 +1707,7 @@ describe('stories API', () => {
             "parent": "a",
             "prepared": false,
             "renderLabel": undefined,
+            "tags": [],
             "title": "a",
             "type": "story",
           },
@@ -1580,6 +1719,7 @@ describe('stories API', () => {
             "parent": "a",
             "prepared": false,
             "renderLabel": undefined,
+            "tags": [],
             "title": "a",
             "type": "story",
           },
diff --git a/code/core/src/manager-api/tests/url.test.js b/code/core/src/manager-api/tests/url.test.js
index a3612650530c..15e1c288863a 100644
--- a/code/core/src/manager-api/tests/url.test.js
+++ b/code/core/src/manager-api/tests/url.test.js
@@ -19,7 +19,7 @@ describe('initial state', () => {
   describe('config query parameters', () => {
     it('handles full parameter', () => {
       const navigate = vi.fn();
-      const location = { search: new URLSearchParams({ full: '1' }).toString() };
+      const location = { search: '?' + new URLSearchParams({ full: '1' }).toString() };
 
       const {
         state: { layout },
@@ -34,7 +34,7 @@ describe('initial state', () => {
 
     it('handles nav parameter', () => {
       const navigate = vi.fn();
-      const location = { search: new URLSearchParams({ nav: '0' }).toString() };
+      const location = { search: '?' + new URLSearchParams({ nav: '0' }).toString() };
 
       const {
         state: { layout },
@@ -45,7 +45,7 @@ describe('initial state', () => {
 
     it('handles shortcuts parameter', () => {
       const navigate = vi.fn();
-      const location = { search: new URLSearchParams({ shortcuts: '0' }).toString() };
+      const location = { search: '?' + new URLSearchParams({ shortcuts: '0' }).toString() };
 
       const {
         state: { ui },
@@ -56,7 +56,7 @@ describe('initial state', () => {
 
     it('handles panel parameter, bottom', () => {
       const navigate = vi.fn();
-      const location = { search: new URLSearchParams({ panel: 'bottom' }).toString() };
+      const location = { search: '?' + new URLSearchParams({ panel: 'bottom' }).toString() };
 
       const {
         state: { layout },
@@ -67,7 +67,7 @@ describe('initial state', () => {
 
     it('handles panel parameter, right', () => {
       const navigate = vi.fn();
-      const location = { search: new URLSearchParams({ panel: 'right' }).toString() };
+      const location = { search: '?' + new URLSearchParams({ panel: 'right' }).toString() };
 
       const {
         state: { layout },
@@ -78,7 +78,7 @@ describe('initial state', () => {
 
     it('handles panel parameter, 0', () => {
       const navigate = vi.fn();
-      const location = { search: new URLSearchParams({ panel: '0' }).toString() };
+      const location = { search: '?' + new URLSearchParams({ panel: '0' }).toString() };
 
       const {
         state: { layout },
diff --git a/code/core/src/manager-api/version.ts b/code/core/src/manager-api/version.ts
index 83c9913763e5..a769bd799920 100644
--- a/code/core/src/manager-api/version.ts
+++ b/code/core/src/manager-api/version.ts
@@ -1 +1 @@
-export const version = '8.4.0-alpha.0';
+export const version = '8.5.0-beta.5';
diff --git a/code/core/src/manager/components/layout/Layout.tsx b/code/core/src/manager/components/layout/Layout.tsx
index 50e29ba18da1..df9d5b86d9cb 100644
--- a/code/core/src/manager/components/layout/Layout.tsx
+++ b/code/core/src/manager/components/layout/Layout.tsx
@@ -146,7 +146,6 @@ export const Layout = ({ managerLayoutState, setManagerLayoutState, hasTab, ...s
       viewMode={managerLayoutState.viewMode}
       showPanel={showPanel}
     >
-      <Notifications />
       {showPages && <PagesContainer>{slots.slotPages}</PagesContainer>}
       <Match path={/(^\/story|docs|onboarding\/|^\/$)/} startsWith={false}>
         {({ match }) => <ContentContainer shown={!!match}>{slots.slotMain}</ContentContainer>}
@@ -170,7 +169,14 @@ export const Layout = ({ managerLayoutState, setManagerLayoutState, hasTab, ...s
         </>
       )}
       {isMobile && (
-        <MobileNavigation menu={slots.slotSidebar} panel={slots.slotPanel} showPanel={showPanel} />
+        <>
+          <Notifications />
+          <MobileNavigation
+            menu={slots.slotSidebar}
+            panel={slots.slotPanel}
+            showPanel={showPanel}
+          />
+        </>
       )}
     </LayoutContainer>
   );
diff --git a/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx b/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx
index e445d73dea23..37e18b66a1fe 100644
--- a/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx
+++ b/code/core/src/manager/components/mobile/navigation/MobileNavigation.stories.tsx
@@ -5,7 +5,7 @@ import { within } from '@storybook/test';
 
 import { ManagerContext } from '@storybook/core/manager-api';
 
-import { startCase } from 'lodash';
+import { startCase } from 'es-toolkit';
 
 import { LayoutProvider, useLayout } from '../../layout/LayoutProvider';
 import { MobileNavigation } from './MobileNavigation';
diff --git a/code/core/src/manager/components/mobile/navigation/MobileNavigation.tsx b/code/core/src/manager/components/mobile/navigation/MobileNavigation.tsx
index fdc7de9651db..ddef2c0f2de4 100644
--- a/code/core/src/manager/components/mobile/navigation/MobileNavigation.tsx
+++ b/code/core/src/manager/components/mobile/navigation/MobileNavigation.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { IconButton } from '@storybook/core/components';
 import { styled } from '@storybook/core/theming';
 import { BottomBarToggleIcon, MenuIcon } from '@storybook/icons';
+import type { API_IndexHash, API_Refs } from '@storybook/types';
 
 import { useStorybookApi, useStorybookState } from '@storybook/core/manager-api';
 
@@ -17,27 +18,46 @@ interface MobileNavigationProps {
   showPanel: boolean;
 }
 
+// Function to combine all indexes
+function combineIndexes(rootIndex: API_IndexHash | undefined, refs: API_Refs) {
+  // Create a copy of the root index to avoid mutation
+  const combinedIndex = { ...(rootIndex || {}) }; // Use an empty object as fallback
+
+  // Traverse refs and merge each nested index with the root index
+  Object.values(refs).forEach((ref) => {
+    if (ref.index) {
+      Object.assign(combinedIndex, ref.index);
+    }
+  });
+
+  return combinedIndex;
+}
+
 /**
  * Walks the tree from the current story to combine story+component+folder names into a single
  * string
  */
 const useFullStoryName = () => {
-  const { index } = useStorybookState();
+  const { index, refs } = useStorybookState();
   const api = useStorybookApi();
   const currentStory = api.getCurrentStoryData();
 
   if (!currentStory) {
     return '';
   }
-
+  const combinedIndex = combineIndexes(index, refs || {});
   let fullStoryName = currentStory.renderLabel?.(currentStory, api) || currentStory.name;
-  // @ts-expect-error (non strict)
-  let node = index[currentStory.id];
 
-  // @ts-expect-error (non strict)
-  while ('parent' in node && node.parent && index[node.parent] && fullStoryName.length < 24) {
-    // @ts-expect-error (non strict)
-    node = index[node.parent];
+  let node = combinedIndex[currentStory.id];
+
+  while (
+    node &&
+    'parent' in node &&
+    node.parent &&
+    combinedIndex[node.parent] &&
+    fullStoryName.length < 24
+  ) {
+    node = combinedIndex[node.parent];
     const parentName = node.renderLabel?.(node, api) || node.name;
     fullStoryName = `${parentName}/${fullStoryName}`;
   }
diff --git a/code/core/src/manager/components/notifications/NotificationItem.stories.tsx b/code/core/src/manager/components/notifications/NotificationItem.stories.tsx
index 1914a0fe7987..71622e8c93a0 100644
--- a/code/core/src/manager/components/notifications/NotificationItem.stories.tsx
+++ b/code/core/src/manager/components/notifications/NotificationItem.stories.tsx
@@ -23,7 +23,7 @@ const meta = {
       </LocationProvider>
     ),
     (Story) => (
-      <div style={{ width: '240px', margin: '1rem' }}>
+      <div style={{ width: '240px' }}>
         <Story />
       </div>
     ),
diff --git a/code/core/src/manager/components/notifications/NotificationItem.tsx b/code/core/src/manager/components/notifications/NotificationItem.tsx
index 75ae36129b76..159fa0da137f 100644
--- a/code/core/src/manager/components/notifications/NotificationItem.tsx
+++ b/code/core/src/manager/components/notifications/NotificationItem.tsx
@@ -11,6 +11,8 @@ import { type State } from '@storybook/core/manager-api';
 
 import { transparentize } from 'polished';
 
+import { MEDIA_DESKTOP_BREAKPOINT } from '../../constants';
+
 const slideIn = keyframes({
   '0%': {
     opacity: 0,
@@ -35,17 +37,21 @@ const Notification = styled.div<{ duration?: number }>(
   ({ theme }) => ({
     position: 'relative',
     display: 'flex',
-    padding: 15,
-    width: 280,
-    borderRadius: 4,
+    border: `1px solid ${theme.appBorderColor}`,
+    padding: '12px 6px 12px 12px',
+    borderRadius: theme.appBorderRadius + 1,
     alignItems: 'center',
 
     animation: `${slideIn} 500ms`,
     background: theme.base === 'light' ? 'hsla(203, 50%, 20%, .97)' : 'hsla(203, 30%, 95%, .97)',
-    boxShadow: `0 2px 5px 0 rgba(0,0,0,0.05), 0 5px 15px 0 rgba(0,0,0,0.1)`,
+    boxShadow: `0 2px 5px 0 rgba(0, 0, 0, 0.05), 0 5px 15px 0 rgba(0, 0, 0, 0.1)`,
     color: theme.color.inverseText,
     textDecoration: 'none',
     overflow: 'hidden',
+
+    [MEDIA_DESKTOP_BREAKPOINT]: {
+      boxShadow: `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0px -5px 20px 10px ${theme.background.app}`,
+    },
   }),
   ({ duration, theme }) =>
     duration && {
@@ -107,9 +113,8 @@ const NotificationTextWrapper = styled.div(({ theme }) => ({
 
 const Headline = styled.div<{ hasIcon: boolean }>(({ theme, hasIcon }) => ({
   height: '100%',
-  width: hasIcon ? 205 : 230,
   alignItems: 'center',
-  whiteSpace: 'nowrap',
+  whiteSpace: 'balance',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   fontSize: theme.typography.size.s1,
@@ -122,6 +127,7 @@ const SubHeadline = styled.div(({ theme }) => ({
   fontSize: theme.typography.size.s1 - 1,
   lineHeight: '14px',
   marginTop: 2,
+  whiteSpace: 'balance',
 }));
 
 const ItemContent: FC<Pick<State['notifications'][0], 'icon' | 'content'>> = ({
@@ -154,6 +160,7 @@ const ItemContent: FC<Pick<State['notifications'][0], 'icon' | 'content'>> = ({
 };
 
 const DismissButtonWrapper = styled(IconButton)(({ theme }) => ({
+  width: 28,
   alignSelf: 'center',
   marginTop: 0,
   color: theme.base === 'light' ? 'rgba(255,255,255,0.7)' : ' #999999',
@@ -181,9 +188,11 @@ export const NotificationItemSpacer = styled.div({
 const NotificationItem: FC<{
   notification: State['notifications'][0];
   onDismissNotification: (id: string) => void;
+  zIndex?: number;
 }> = ({
   notification: { content, duration, link, onClear, onClick, id, icon },
   onDismissNotification,
+  zIndex,
 }) => {
   const onTimeout = useCallback(() => {
     onDismissNotification(id);
@@ -191,7 +200,7 @@ const NotificationItem: FC<{
     if (onClear) {
       onClear({ dismissed: false, timeout: true });
     }
-  }, [onDismissNotification, onClear]);
+  }, [id, onDismissNotification, onClear]);
 
   const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
   useEffect(() => {
@@ -211,11 +220,11 @@ const NotificationItem: FC<{
     if (onClear) {
       onClear({ dismissed: true, timeout: false });
     }
-  }, [onDismissNotification, onClear]);
+  }, [id, onDismissNotification, onClear]);
 
   if (link) {
     return (
-      <NotificationLink to={link} duration={duration}>
+      <NotificationLink to={link} duration={duration} style={{ zIndex }}>
         <ItemContent icon={icon} content={content} />
         <DismissNotificationItem onDismiss={onDismiss} />
       </NotificationLink>
@@ -224,7 +233,11 @@ const NotificationItem: FC<{
 
   if (onClick) {
     return (
-      <NotificationButton duration={duration} onClick={() => onClick({ onDismiss })}>
+      <NotificationButton
+        duration={duration}
+        onClick={() => onClick({ onDismiss })}
+        style={{ zIndex }}
+      >
         <ItemContent icon={icon} content={content} />
         <DismissNotificationItem onDismiss={onDismiss} />
       </NotificationButton>
@@ -232,7 +245,7 @@ const NotificationItem: FC<{
   }
 
   return (
-    <Notification duration={duration}>
+    <Notification duration={duration} style={{ zIndex }}>
       <ItemContent icon={icon} content={content} />
       <DismissNotificationItem onDismiss={onDismiss} />
     </Notification>
diff --git a/code/core/src/manager/components/notifications/NotificationList.tsx b/code/core/src/manager/components/notifications/NotificationList.tsx
index a0c8fabd13c6..0e4789a28bf5 100644
--- a/code/core/src/manager/components/notifications/NotificationList.tsx
+++ b/code/core/src/manager/components/notifications/NotificationList.tsx
@@ -2,11 +2,10 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { styled } from '@storybook/core/theming';
-import type { CSSObject } from '@storybook/core/theming';
 
 import type { State } from '@storybook/core/manager-api';
 
-import { MEDIA_DESKTOP_BREAKPOINT } from '../../constants';
+import { useLayout } from '../layout/LayoutProvider';
 import NotificationItem from './NotificationItem';
 
 interface NotificationListProps {
@@ -18,35 +17,36 @@ export const NotificationList: FC<NotificationListProps> = ({
   notifications,
   clearNotification,
 }) => {
+  const { isMobile } = useLayout();
   return (
-    <List>
+    <List isMobile={isMobile}>
       {notifications &&
-        notifications.map((notification) => (
+        notifications.map((notification, index) => (
           <NotificationItem
             key={notification.id}
             onDismissNotification={(id: string) => clearNotification(id)}
             notification={notification}
+            zIndex={notifications.length - index}
           />
         ))}
     </List>
   );
 };
 
-const List = styled.div<{ placement?: CSSObject }>({
-  zIndex: 200,
-  position: 'fixed',
-  left: 20,
-  bottom: 60,
-
-  [MEDIA_DESKTOP_BREAKPOINT]: {
-    bottom: 20,
-  },
-
-  '> * + *': {
-    marginTop: 10,
-  },
-
-  '&:empty': {
-    display: 'none',
+const List = styled.div<{ isMobile?: boolean }>(
+  {
+    zIndex: 200,
+    '> * + *': {
+      marginTop: 12,
+    },
+    '&:empty': {
+      display: 'none',
+    },
   },
-});
+  ({ isMobile }) =>
+    isMobile && {
+      position: 'fixed',
+      bottom: 40,
+      margin: 20,
+    }
+);
diff --git a/code/core/src/manager/components/panel/Panel.tsx b/code/core/src/manager/components/panel/Panel.tsx
index 701cd94925e3..dc80c20949d2 100644
--- a/code/core/src/manager/components/panel/Panel.tsx
+++ b/code/core/src/manager/components/panel/Panel.tsx
@@ -60,7 +60,7 @@ export const AddonPanel = React.memo<{
     return (
       <Tabs
         absolute={absolute}
-        {...(selectedPanel ? { selected: selectedPanel } : {})}
+        {...(selectedPanel && panels[selectedPanel] ? { selected: selectedPanel } : {})}
         menuName="Addons"
         actions={actions}
         showToolsWhenEmpty
diff --git a/code/core/src/manager/components/preview/Preview.tsx b/code/core/src/manager/components/preview/Preview.tsx
index 8a459276f0e7..ed73a059951f 100644
--- a/code/core/src/manager/components/preview/Preview.tsx
+++ b/code/core/src/manager/components/preview/Preview.tsx
@@ -202,7 +202,7 @@ export function filterTabs(panels: Addon_BaseType[], parameters?: Record<string,
 
   if (previewTabs || parametersTabs) {
     // deep merge global and local settings
-    const tabs = merge(previewTabs, parametersTabs);
+    const tabs = merge(previewTabs || {}, parametersTabs || {});
     const arrTabs = Object.keys(tabs).map((key, index) => ({
       index,
       ...(typeof tabs[key] === 'string' ? { title: tabs[key] } : tabs[key]),
diff --git a/code/core/src/manager/components/preview/Toolbar.tsx b/code/core/src/manager/components/preview/Toolbar.tsx
index 4af83b42a6a9..8c19970421d7 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 });
@@ -155,7 +155,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 });
@@ -199,7 +199,10 @@ function toolbarItemHasBeenExcluded(item: Partial<Addon_BaseType>, entry: LeafEn
   const toolbarItemsFromStoryParameters = 'toolbar' in parameters ? parameters.toolbar : undefined;
   const { toolbar: toolbarItemsFromAddonsConfig } = addons.getConfig();
 
-  const toolbarItems = merge(toolbarItemsFromAddonsConfig, toolbarItemsFromStoryParameters);
+  const toolbarItems = merge(
+    toolbarItemsFromAddonsConfig || {},
+    toolbarItemsFromStoryParameters || {}
+  );
 
   // @ts-expect-error (non strict)
   return toolbarItems ? !!toolbarItems[item?.id]?.hidden : false;
diff --git a/code/core/src/manager/components/preview/utils/stringifyQueryParams.tsx b/code/core/src/manager/components/preview/utils/stringifyQueryParams.tsx
index 4175503808bb..dea058659eac 100644
--- a/code/core/src/manager/components/preview/utils/stringifyQueryParams.tsx
+++ b/code/core/src/manager/components/preview/utils/stringifyQueryParams.tsx
@@ -1,4 +1,10 @@
-import qs from 'qs';
+import { stringify } from 'picoquery';
 
-export const stringifyQueryParams = (queryParams: Record<string, string>) =>
-  qs.stringify(queryParams, { addQueryPrefix: true, encode: false }).replace(/^\?/, '&');
+export const stringifyQueryParams = (queryParams: Record<string, string>) => {
+  const result = stringify(queryParams);
+  if (result === '') {
+    return '';
+  }
+
+  return `&${result}`;
+};
diff --git a/code/core/src/manager/components/sidebar/Brand.tsx b/code/core/src/manager/components/sidebar/Brand.tsx
index 995b924948ec..f4ca666e0579 100644
--- a/code/core/src/manager/components/sidebar/Brand.tsx
+++ b/code/core/src/manager/components/sidebar/Brand.tsx
@@ -12,7 +12,7 @@ export const StorybookLogoStyled = styled(StorybookLogo)(({ theme }) => ({
 
 export const Img = styled.img({
   display: 'block',
-  maxWidth: '150px',
+  maxWidth: '150px !important',
   maxHeight: '100px',
 });
 
diff --git a/code/core/src/manager/components/sidebar/ContextMenu.tsx b/code/core/src/manager/components/sidebar/ContextMenu.tsx
new file mode 100644
index 000000000000..ac4aeb671d55
--- /dev/null
+++ b/code/core/src/manager/components/sidebar/ContextMenu.tsx
@@ -0,0 +1,139 @@
+import type { ComponentProps, FC, SyntheticEvent } from 'react';
+import React, { useMemo, useState } from 'react';
+
+import { TooltipLinkList, WithTooltip } from '@storybook/core/components';
+import { styled } from '@storybook/core/theming';
+import { type API_HashEntry, Addon_TypesEnum } from '@storybook/core/types';
+import { EllipsisIcon } from '@storybook/icons';
+
+import { type TestProviders } from '@storybook/core/core-events';
+import { useStorybookState } from '@storybook/core/manager-api';
+import type { API } from '@storybook/core/manager-api';
+
+import type { Link } from '../../../components/components/tooltip/TooltipLinkList';
+import { StatusButton } from './StatusButton';
+import type { ExcludesNull } from './Tree';
+
+const empty = {
+  onMouseEnter: () => {},
+  node: null,
+};
+
+const PositionedWithTooltip = styled(WithTooltip)({
+  position: 'absolute',
+  right: 0,
+});
+
+const FloatingStatusButton = styled(StatusButton)({
+  background: 'var(--tree-node-background-hover)',
+  boxShadow: '0 0 5px 5px var(--tree-node-background-hover)',
+});
+
+export const useContextMenu = (context: API_HashEntry, links: Link[], api: API) => {
+  const [hoverCount, setHoverCount] = useState(0);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handlers = useMemo(() => {
+    return {
+      onMouseEnter: () => {
+        setHoverCount((c) => c + 1);
+      },
+      onOpen: (event: SyntheticEvent) => {
+        event.stopPropagation();
+        setIsOpen(true);
+      },
+      onClose: () => {
+        setIsOpen(false);
+      },
+    };
+  }, []);
+
+  /**
+   * Calculate the providerLinks whenever the user mouses over the container. We use an incrementor,
+   * instead of a simple boolean to ensure that the links are recalculated
+   */
+  const providerLinks = useMemo(() => {
+    const testProviders = api.getElements(
+      Addon_TypesEnum.experimental_TEST_PROVIDER
+    ) as any as TestProviders;
+
+    if (hoverCount) {
+      return generateTestProviderLinks(testProviders, context);
+    }
+    return [];
+  }, [api, context, hoverCount]);
+
+  const isRendered = providerLinks.length > 0 || links.length > 0;
+
+  return useMemo(() => {
+    // Never show the SidebarContextMenu in production
+    if (globalThis.CONFIG_TYPE !== 'DEVELOPMENT') {
+      return empty;
+    }
+
+    return {
+      onMouseEnter: handlers.onMouseEnter,
+      node: isRendered ? (
+        <PositionedWithTooltip
+          data-displayed={isOpen ? 'on' : 'off'}
+          closeOnOutsideClick
+          placement="bottom-end"
+          data-testid="context-menu"
+          onVisibleChange={(visible) => {
+            if (!visible) {
+              handlers.onClose();
+            } else {
+              setIsOpen(true);
+            }
+          }}
+          tooltip={<LiveContextMenu context={context} links={links} />}
+        >
+          <FloatingStatusButton type="button" status={'pending'}>
+            <EllipsisIcon />
+          </FloatingStatusButton>
+        </PositionedWithTooltip>
+      ) : null,
+    };
+  }, [context, handlers, isOpen, isRendered, links]);
+};
+
+/**
+ * This component re-subscribes to storybook's core state, hence the Live prefix. It is used to
+ * render the context menu for the sidebar. it self is a tooltip link list that renders the links
+ * provided to it. In addition to the links, it also renders the test providers.
+ */
+const LiveContextMenu: FC<{ context: API_HashEntry } & ComponentProps<typeof TooltipLinkList>> = ({
+  context,
+  links,
+  ...rest
+}) => {
+  const { testProviders } = useStorybookState();
+  const providerLinks: Link[] = generateTestProviderLinks(testProviders, context);
+  const groups = Array.isArray(links[0]) ? (links as Link[][]) : [links as Link[]];
+  const all = groups.concat([providerLinks]);
+
+  return <TooltipLinkList {...rest} links={all} />;
+};
+
+export function generateTestProviderLinks(
+  testProviders: TestProviders,
+  context: API_HashEntry
+): Link[] {
+  return Object.entries(testProviders)
+    .map(([testProviderId, state]) => {
+      if (!state) {
+        return null;
+      }
+      const content = state.sidebarContextMenu?.({ context, state });
+
+      if (!content) {
+        return null;
+      }
+
+      return {
+        id: testProviderId,
+        content,
+      };
+    })
+    .filter(Boolean as any as ExcludesNull);
+}
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/Explorer.tsx b/code/core/src/manager/components/sidebar/Explorer.tsx
index 1c4a93825ebe..4423fafb9f4d 100644
--- a/code/core/src/manager/components/sidebar/Explorer.tsx
+++ b/code/core/src/manager/components/sidebar/Explorer.tsx
@@ -23,11 +23,9 @@ export const Explorer: FC<ExplorerProps> = React.memo(function Explorer({
 
   // Track highlighted nodes, keep it in sync with props and enable keyboard navigation
   const [highlighted, setHighlighted, highlightedRef] = useHighlighted({
-    // @ts-expect-error (non strict)
     containerRef,
     isLoading,
     isBrowsing,
-    dataset,
     selected,
   });
 
diff --git a/code/core/src/manager/components/sidebar/FileSearchList.stories.tsx b/code/core/src/manager/components/sidebar/FileSearchList.stories.tsx
index 2c5ec140ee86..7388bf3cb4ab 100644
--- a/code/core/src/manager/components/sidebar/FileSearchList.stories.tsx
+++ b/code/core/src/manager/components/sidebar/FileSearchList.stories.tsx
@@ -5,6 +5,7 @@ import { FileSearchList } from './FileSearchList';
 
 const meta = {
   component: FileSearchList,
+  title: 'Sidebar/FileSearchList',
   args: {
     onNewStory: fn(),
   },
diff --git a/code/core/src/manager/components/sidebar/FileSearchListSkeleton.stories.tsx b/code/core/src/manager/components/sidebar/FileSearchListSkeleton.stories.tsx
index eaeaca9c0f75..d8d38eeb6881 100644
--- a/code/core/src/manager/components/sidebar/FileSearchListSkeleton.stories.tsx
+++ b/code/core/src/manager/components/sidebar/FileSearchListSkeleton.stories.tsx
@@ -4,6 +4,7 @@ import { FileSearchListLoadingSkeleton } from './FileSearchListSkeleton';
 
 const meta = {
   component: FileSearchListLoadingSkeleton,
+  title: 'Sidebar/FileSearchListLoadingSkeleton',
 } satisfies Meta<typeof FileSearchListLoadingSkeleton>;
 
 export default meta;
diff --git a/code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx b/code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx
index a2a10005b887..c9e1790ef118 100644
--- a/code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx
+++ b/code/core/src/manager/components/sidebar/FileSearchModal.stories.tsx
@@ -8,6 +8,7 @@ import { FileSearchModal } from './FileSearchModal';
 
 const meta = {
   component: FileSearchModal,
+  title: 'Sidebar/FileSearchModal',
   args: {
     open: true,
     setError: fn(),
diff --git a/code/core/src/manager/components/sidebar/FileSearchModal.tsx b/code/core/src/manager/components/sidebar/FileSearchModal.tsx
index 469493744d43..043abffb5107 100644
--- a/code/core/src/manager/components/sidebar/FileSearchModal.tsx
+++ b/code/core/src/manager/components/sidebar/FileSearchModal.tsx
@@ -13,6 +13,7 @@ const MODAL_HEIGHT = 418;
 const ModalStyled = styled(Modal)(() => ({
   boxShadow: 'none',
   background: 'transparent',
+  overflow: 'visible',
 }));
 
 const ModalChild = styled.div<{ height?: number }>(({ theme, height }) => ({
diff --git a/code/core/src/manager/components/sidebar/FilterToggle.stories.ts b/code/core/src/manager/components/sidebar/FilterToggle.stories.ts
index 6710af80c37c..075b8c94dc9a 100644
--- a/code/core/src/manager/components/sidebar/FilterToggle.stories.ts
+++ b/code/core/src/manager/components/sidebar/FilterToggle.stories.ts
@@ -4,6 +4,7 @@ import { FilterToggle } from './FilterToggle';
 
 export default {
   component: FilterToggle,
+  title: 'Sidebar/FilterToggle',
   args: {
     active: false,
     onClick: fn(),
diff --git a/code/core/src/manager/components/sidebar/Heading.stories.tsx b/code/core/src/manager/components/sidebar/Heading.stories.tsx
index 678a6c8e2ae5..81436bfc0a1d 100644
--- a/code/core/src/manager/components/sidebar/Heading.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Heading.stories.tsx
@@ -24,9 +24,11 @@ export default {
 } as Meta<typeof Heading>;
 
 const menuItems = [
-  { title: 'Menu Item 1', onClick: action('onActivateMenuItem'), id: '1' },
-  { title: 'Menu Item 2', onClick: action('onActivateMenuItem'), id: '2' },
-  { title: 'Menu Item 3', onClick: action('onActivateMenuItem'), id: '3' },
+  [
+    { title: 'Menu Item 1', onClick: action('onActivateMenuItem'), id: '1' },
+    { title: 'Menu Item 2', onClick: action('onActivateMenuItem'), id: '2' },
+    { title: 'Menu Item 3', onClick: action('onActivateMenuItem'), id: '3' },
+  ],
 ];
 
 export const MenuHighlighted: Story = () => (
diff --git a/code/core/src/manager/components/sidebar/IconSymbols.stories.tsx b/code/core/src/manager/components/sidebar/IconSymbols.stories.tsx
index 76136230d3d8..143c08932d37 100644
--- a/code/core/src/manager/components/sidebar/IconSymbols.stories.tsx
+++ b/code/core/src/manager/components/sidebar/IconSymbols.stories.tsx
@@ -4,6 +4,7 @@ import { IconSymbols } from './IconSymbols';
 
 const meta = {
   component: IconSymbols,
+  title: 'Sidebar/IconSymbols',
 } satisfies Meta<typeof IconSymbols>;
 
 export default meta;
diff --git a/code/core/src/manager/components/sidebar/LegacyRender.tsx b/code/core/src/manager/components/sidebar/LegacyRender.tsx
new file mode 100644
index 000000000000..f8afa4317f7f
--- /dev/null
+++ b/code/core/src/manager/components/sidebar/LegacyRender.tsx
@@ -0,0 +1,110 @@
+import React from 'react';
+
+import { Button, ProgressSpinner } from '@storybook/core/components';
+import { styled } from '@storybook/core/theming';
+import { EyeIcon, PlayHollowIcon, StopAltIcon } from '@storybook/icons';
+
+import type { TestProviders } from '@storybook/core/core-events';
+import { useStorybookApi } from '@storybook/core/manager-api';
+
+const Container = styled.div({
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '8px 2px',
+});
+
+const Info = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  marginLeft: 6,
+});
+
+const Actions = styled.div({
+  display: 'flex',
+  gap: 6,
+});
+
+const TitleWrapper = styled.div<{ crashed?: boolean }>(({ crashed, theme }) => ({
+  fontSize: theme.typography.size.s1,
+  fontWeight: crashed ? 'bold' : 'normal',
+  color: crashed ? theme.color.negativeText : theme.color.defaultText,
+}));
+
+const DescriptionWrapper = styled.div(({ theme }) => ({
+  fontSize: theme.typography.size.s1,
+  color: theme.textMutedColor,
+}));
+
+const Progress = styled(ProgressSpinner)({
+  margin: 2,
+});
+
+const StopIcon = styled(StopAltIcon)({
+  width: 10,
+});
+
+export const LegacyRender = ({ ...state }: TestProviders[keyof TestProviders]) => {
+  const Description = state.description!;
+  const Title = state.title!;
+  const api = useStorybookApi();
+
+  return (
+    <Container>
+      <Info>
+        <TitleWrapper crashed={state.crashed} id="testing-module-title">
+          <Title {...state} />
+        </TitleWrapper>
+        <DescriptionWrapper id="testing-module-description">
+          <Description {...state} />
+        </DescriptionWrapper>
+      </Info>
+
+      <Actions>
+        {state.watchable && (
+          <Button
+            aria-label={`${state.watching ? 'Disable' : 'Enable'} watch mode for ${name}`}
+            variant="ghost"
+            padding="small"
+            active={state.watching}
+            onClick={() => api.setTestProviderWatchMode(state.id, !state.watching)}
+            disabled={state.crashed || state.running}
+          >
+            <EyeIcon />
+          </Button>
+        )}
+        {state.runnable && (
+          <>
+            {state.running && state.cancellable ? (
+              <Button
+                aria-label={`Stop ${name}`}
+                variant="ghost"
+                padding="none"
+                onClick={() => api.cancelTestProvider(state.id)}
+                disabled={state.cancelling}
+              >
+                <Progress
+                  percentage={
+                    state.progress?.percentageCompleted ??
+                    (state.details as any)?.buildProgressPercentage
+                  }
+                >
+                  <StopIcon />
+                </Progress>
+              </Button>
+            ) : (
+              <Button
+                aria-label={`Start ${state.name}`}
+                variant="ghost"
+                padding="small"
+                onClick={() => api.runTestProvider(state.id)}
+                disabled={state.crashed || state.running}
+              >
+                <PlayHollowIcon />
+              </Button>
+            )}
+          </>
+        )}
+      </Actions>
+    </Container>
+  );
+};
diff --git a/code/core/src/manager/components/sidebar/Menu.stories.tsx b/code/core/src/manager/components/sidebar/Menu.stories.tsx
index 663bd4caa3b4..d5bf90dc2a60 100644
--- a/code/core/src/manager/components/sidebar/Menu.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Menu.stories.tsx
@@ -1,4 +1,3 @@
-import type { ComponentProps } from 'react';
 import React from 'react';
 
 import { TooltipLinkList } from '@storybook/core/components';
@@ -11,11 +10,13 @@ import type { State } from '@storybook/core/manager-api';
 
 import { useMenu } from '../../container/Menu';
 import { LayoutProvider } from '../layout/LayoutProvider';
-import { SidebarMenu } from './Menu';
+import { type MenuList, SidebarMenu } from './Menu';
 
-const fakemenu: ComponentProps<typeof TooltipLinkList>['links'] = [
-  { title: 'has icon', icon: <LinkIcon />, id: 'icon' },
-  { title: 'has no icon', id: 'non' },
+const fakemenu: MenuList = [
+  [
+    { title: 'has icon', icon: <LinkIcon />, id: 'icon' },
+    { title: 'has no icon', id: 'non' },
+  ],
 ];
 
 const meta = {
diff --git a/code/core/src/manager/components/sidebar/Menu.tsx b/code/core/src/manager/components/sidebar/Menu.tsx
index d24656aa7079..aef385c2de1d 100644
--- a/code/core/src/manager/components/sidebar/Menu.tsx
+++ b/code/core/src/manager/components/sidebar/Menu.tsx
@@ -1,16 +1,17 @@
 import type { ComponentProps, FC } from 'react';
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 
-import type { Button, TooltipLinkListLink } from '@storybook/core/components';
+import type { Button } from '@storybook/core/components';
 import { IconButton, TooltipLinkList, WithTooltip } from '@storybook/core/components';
 import { styled } from '@storybook/core/theming';
 import { CloseIcon, CogIcon } from '@storybook/icons';
 
 import { transparentize } from 'polished';
 
+import type { useMenu } from '../../container/Menu';
 import { useLayout } from '../layout/LayoutProvider';
 
-export type MenuList = ComponentProps<typeof TooltipLinkList>['links'];
+export type MenuList = ReturnType<typeof useMenu>;
 
 export const SidebarIconButton: FC<ComponentProps<typeof Button> & { highlighted: boolean }> =
   styled(IconButton)<
@@ -54,24 +55,11 @@ const MenuButtonGroup = styled.div({
   gap: 4,
 });
 
-type ClickHandler = TooltipLinkListLink['onClick'];
-
 const SidebarMenuList: FC<{
   menu: MenuList;
-  onHide: () => void;
-}> = ({ menu, onHide }) => {
-  const links = useMemo(() => {
-    return menu.map(({ onClick, ...rest }) => ({
-      ...rest,
-      onClick: ((event, item) => {
-        if (onClick) {
-          onClick(event, item);
-        }
-        onHide();
-      }) as ClickHandler,
-    }));
-  }, [menu, onHide]);
-  return <TooltipLinkList links={links} />;
+  onClick: () => void;
+}> = ({ menu, onClick }) => {
+  return <TooltipLinkList links={menu} onClick={onClick} />;
 };
 
 export interface SidebarMenuProps {
@@ -113,7 +101,7 @@ export const SidebarMenu: FC<SidebarMenuProps> = ({ menu, isHighlighted, onClick
     <WithTooltip
       placement="top"
       closeOnOutsideClick
-      tooltip={({ onHide }) => <SidebarMenuList onHide={onHide} menu={menu} />}
+      tooltip={({ onHide }) => <SidebarMenuList onClick={onHide} menu={menu} />}
       onVisibleChange={setIsTooltipVisible}
     >
       <SidebarIconButton
diff --git a/code/core/src/manager/components/sidebar/RefIndicator.tsx b/code/core/src/manager/components/sidebar/RefIndicator.tsx
index 7c49c95105cd..2a2e54b37dfa 100644
--- a/code/core/src/manager/components/sidebar/RefIndicator.tsx
+++ b/code/core/src/manager/components/sidebar/RefIndicator.tsx
@@ -7,6 +7,7 @@ import { styled, useTheme } from '@storybook/core/theming';
 import { global } from '@storybook/global';
 import {
   AlertIcon,
+  CheckIcon,
   ChevronDownIcon,
   DocumentIcon,
   GlobeIcon,
@@ -20,12 +21,13 @@ import { useStorybookApi } from '@storybook/core/manager-api';
 
 import { transparentize } from 'polished';
 
+import type { NormalLink } from '../../../components/components/tooltip/TooltipLinkList';
 import type { getStateType } from '../../utils/tree';
 import type { RefType } from './types';
 
 const { document, window: globalWindow } = global;
 
-export type ClickHandler = TooltipLinkListLink['onClick'];
+export type ClickHandler = NormalLink['onClick'];
 export interface IndicatorIconProps {
   type: ReturnType<typeof getStateType>;
 }
@@ -216,7 +218,7 @@ export const RefIndicator = React.memo(
                 <TooltipLinkList
                   // @ts-expect-error (non strict)
                   links={Object.entries(ref.versions).map(([id, href]) => ({
-                    icon: href === ref.url ? 'check' : undefined,
+                    icon: href === ref.url ? <CheckIcon /> : undefined,
                     id,
                     title: id,
                     href,
@@ -306,10 +308,7 @@ const ReadDocsMessage: FC = () => {
   const theme = useTheme();
 
   return (
-    <Message
-      href="https://storybook.js.org/docs/react/sharing/storybook-composition"
-      target="_blank"
-    >
+    <Message href="https://storybook.js.org/docs/sharing/storybook-composition" target="_blank">
       <DocumentIcon color={theme.color.green} />
       <div>
         <MessageTitle>Read Composition docs</MessageTitle>
@@ -347,14 +346,12 @@ const LoadingMessage: FC<{ url: string }> = ({ url }) => {
   );
 };
 
+// TODO: This is a temporary fix as the documentation link is not available with the 8.0 release, since the features it referenced were removed. See https://storybook.js.org/docs/7/sharing/storybook-composition#improve-your-storybook-composition for context.
 const PerformanceDegradedMessage: FC = () => {
   const theme = useTheme();
 
   return (
-    <Message
-      href="https://storybook.js.org/docs/react/sharing/storybook-composition#improve-your-storybook-composition"
-      target="_blank"
-    >
+    <Message href="https://storybook.js.org/docs/sharing/storybook-composition" target="_blank">
       <LightningIcon color={theme.color.gold} />
       <div>
         <MessageTitle>Reduce lag</MessageTitle>
diff --git a/code/core/src/manager/components/sidebar/Refs.stories.tsx b/code/core/src/manager/components/sidebar/Refs.stories.tsx
index a26cad976dcb..3b6e37efce50 100644
--- a/code/core/src/manager/components/sidebar/Refs.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Refs.stories.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { fn } from '@storybook/test';
+
 import { ManagerContext } from '@storybook/core/manager-api';
 
 import { standardData as standardHeaderData } from './Heading.stories';
@@ -8,6 +10,15 @@ import { Ref } from './Refs';
 import { mockDataset } from './mockdata';
 import type { RefType } from './types';
 
+const managerContext = {
+  state: { docsOptions: {}, testProviders: {} },
+  api: {
+    on: fn().mockName('api::on'),
+    off: fn().mockName('api::off'),
+    getElements: fn(() => ({})),
+  },
+} as any;
+
 export default {
   component: Ref,
   title: 'Sidebar/Refs',
@@ -16,7 +27,7 @@ export default {
   globals: { sb_theme: 'side-by-side' },
   decorators: [
     (storyFn: any) => (
-      <ManagerContext.Provider value={{ state: { docsOptions: {} } } as any}>
+      <ManagerContext.Provider value={managerContext}>
         <IconSymbols />
         {storyFn()}
       </ManagerContext.Provider>
@@ -26,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 = (() => {
@@ -49,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: {
@@ -66,7 +77,7 @@ const refs: Record<string, RefType> = {
     type: 'unknown',
     previewInitialized: false,
     // @ts-expect-error (invalid input)
-    index,
+    filteredIndex,
   },
   startInjected_loading: {
     id: 'startInjected_loading',
@@ -75,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',
@@ -84,7 +95,7 @@ const refs: Record<string, RefType> = {
     type: 'auto-inject',
     previewInitialized: true,
     // @ts-expect-error (invalid input)
-    index,
+    filteredIndex,
   },
   versions: {
     id: 'versions',
@@ -92,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,
   },
@@ -102,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,
   },
@@ -127,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',
@@ -143,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/Search.stories.tsx b/code/core/src/manager/components/sidebar/Search.stories.tsx
index 5c70863735e0..1638f06b4dea 100644
--- a/code/core/src/manager/components/sidebar/Search.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Search.stories.tsx
@@ -47,11 +47,7 @@ const baseProps = {
 
 export const Simple: StoryFn = () => <Search {...baseProps}>{() => null}</Search>;
 
-export const SimpleWithCreateButton: StoryFn = () => (
-  <Search {...baseProps} showCreateStoryButton={true}>
-    {() => null}
-  </Search>
-);
+export const SimpleWithCreateButton: StoryFn = () => <Search {...baseProps}>{() => null}</Search>;
 
 export const FilledIn: StoryFn = () => (
   <Search {...baseProps} initialQuery="Search query">
diff --git a/code/core/src/manager/components/sidebar/Search.tsx b/code/core/src/manager/components/sidebar/Search.tsx
index d09863a28aab..16a7ba0f151e 100644
--- a/code/core/src/manager/components/sidebar/Search.tsx
+++ b/code/core/src/manager/components/sidebar/Search.tsx
@@ -1,9 +1,9 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { type ReactNode, useCallback, useRef, useState } from 'react';
 
-import { IconButton, TooltipNote, WithTooltip } from '@storybook/core/components';
+import { IconButton } from '@storybook/core/components';
 import { styled } from '@storybook/core/theming';
 import { global } from '@storybook/global';
-import { CloseIcon, PlusIcon, SearchIcon } from '@storybook/icons';
+import { CloseIcon, SearchIcon } from '@storybook/icons';
 
 import { shortcutToHumanString, useStorybookApi } from '@storybook/core/manager-api';
 
@@ -15,7 +15,6 @@ import Fuse from 'fuse.js';
 import { getGroupStatus, getHighestStatus } from '../../utils/status';
 import { scrollIntoView, searchItem } from '../../utils/tree';
 import { useLayout } from '../layout/LayoutProvider';
-import { CreateNewStoryFileModal } from './CreateNewStoryFileModal';
 import { DEFAULT_REF_ID } from './Sidebar';
 import type {
   CombinedDataset,
@@ -54,10 +53,6 @@ const SearchBar = styled.div({
   columnGap: 6,
 });
 
-const TooltipNoteWrapper = styled(TooltipNote)({
-  margin: 0,
-});
-
 const ScreenReaderLabel = styled.label({
   position: 'absolute',
   left: -10000,
@@ -67,49 +62,47 @@ const ScreenReaderLabel = styled.label({
   overflow: 'hidden',
 });
 
-const CreateNewStoryButton = styled(IconButton)(({ theme }) => ({
-  color: theme.color.mediumdark,
+const SearchField = styled.div(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  padding: 2,
+  flexGrow: 1,
+  height: 32,
+  width: '100%',
+  boxShadow: `${theme.button.border} 0 0 0 1px inset`,
+  borderRadius: theme.appBorderRadius + 2,
+
+  '&:has(input:focus), &:has(input:active)': {
+    boxShadow: `${theme.color.secondary} 0 0 0 1px inset`,
+    background: theme.background.app,
+  },
 }));
 
-const SearchIconWrapper = styled.div(({ theme }) => ({
-  position: 'absolute',
-  top: 0,
-  left: 8,
-  zIndex: 1,
-  pointerEvents: 'none',
+const IconWrapper = styled.div(({ theme, onClick }) => ({
+  cursor: onClick ? 'pointer' : 'default',
+  flex: '0 0 28px',
+  height: '100%',
+  pointerEvents: onClick ? 'auto' : 'none',
   color: theme.textMutedColor,
   display: 'flex',
   alignItems: 'center',
-  height: '100%',
+  justifyContent: 'center',
 }));
 
-const SearchField = styled.div({
-  display: 'flex',
-  flexDirection: 'column',
-  flexGrow: 1,
-  position: 'relative',
-});
-
 const Input = styled.input(({ theme }) => ({
   appearance: 'none',
   height: 28,
-  paddingLeft: 28,
-  paddingRight: 28,
+  width: '100%',
+  padding: 0,
   border: 0,
-  boxShadow: `${theme.button.border} 0 0 0 1px inset`,
   background: 'transparent',
-  borderRadius: 4,
   fontSize: `${theme.typography.size.s1 + 1}px`,
   fontFamily: 'inherit',
   transition: 'all 150ms',
   color: theme.color.defaultText,
-  width: '100%',
+  outline: 0,
 
-  '&:focus, &:active': {
-    outline: 0,
-    borderColor: theme.color.secondary,
-    background: theme.background.app,
-  },
   '&::placeholder': {
     color: theme.textMutedColor,
     opacity: 1,
@@ -133,11 +126,9 @@ const Input = styled.input(({ theme }) => ({
 }));
 
 const FocusKey = styled.code(({ theme }) => ({
-  position: 'absolute',
-  top: 6,
-  right: 9,
+  margin: 5,
+  marginTop: 6,
   height: 16,
-  zIndex: 1,
   lineHeight: '16px',
   textAlign: 'center',
   fontSize: '11px',
@@ -147,50 +138,43 @@ const FocusKey = styled.code(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   gap: 4,
+  flexShrink: 0,
 }));
 
 const FocusKeyCmd = styled.span({
   fontSize: '14px',
 });
 
-const ClearIcon = styled.div(({ theme }) => ({
-  position: 'absolute',
-  top: 0,
-  right: 8,
-  zIndex: 1,
-  color: theme.textMutedColor,
-  cursor: 'pointer',
+const Actions = styled.div({
   display: 'flex',
   alignItems: 'center',
-  height: '100%',
-}));
+  gap: 2,
+});
 
 const FocusContainer = styled.div({ outline: 0 });
 
-const isDevelopment = global.CONFIG_TYPE === 'DEVELOPMENT';
-const isRendererReact = global.STORYBOOK_RENDERER === 'react';
-
 export const Search = React.memo<{
   children: SearchChildrenFn;
   dataset: CombinedDataset;
   enableShortcuts?: boolean;
   getLastViewed: () => Selection[];
   initialQuery?: string;
-  showCreateStoryButton?: boolean;
+  searchBarContent?: ReactNode;
+  searchFieldContent?: ReactNode;
 }>(function Search({
   children,
   dataset,
   enableShortcuts = true,
   getLastViewed,
   initialQuery = '',
-  showCreateStoryButton = isDevelopment && isRendererReact,
+  searchBarContent,
+  searchFieldContent,
 }) {
   const api = useStorybookApi();
   const inputRef = useRef<HTMLInputElement>(null);
   const [inputPlaceholder, setPlaceholder] = useState('Find components');
   const [allComponents, showAllComponents] = useState(false);
   const searchShortcut = api ? shortcutToHumanString(api.getShortcutKeys().search) : '/';
-  const [isFileSearchModalOpen, setIsFileSearchModalOpen] = useState(false);
 
   const makeFuse = useCallback(() => {
     const list = dataset.entries.reduce<SearchItem[]>((acc, [refId, { index, status }]) => {
@@ -406,9 +390,9 @@ export const Search = React.memo<{
                 {...getRootProps({ refKey: '' }, { suppressRefError: true })}
                 className="search-field"
               >
-                <SearchIconWrapper>
+                <IconWrapper>
                   <SearchIcon />
-                </SearchIconWrapper>
+                </IconWrapper>
                 <Input {...inputProps} />
                 {!isMobile && enableShortcuts && !isOpen && (
                   <FocusKey>
@@ -421,34 +405,16 @@ export const Search = React.memo<{
                     )}
                   </FocusKey>
                 )}
-                {isOpen && (
-                  <ClearIcon onClick={() => clearSelection()}>
-                    <CloseIcon />
-                  </ClearIcon>
-                )}
+                <Actions>
+                  {isOpen && (
+                    <IconButton onClick={() => clearSelection()}>
+                      <CloseIcon />
+                    </IconButton>
+                  )}
+                  {searchFieldContent}
+                </Actions>
               </SearchField>
-              {showCreateStoryButton && (
-                <>
-                  <WithTooltip
-                    trigger="hover"
-                    hasChrome={false}
-                    tooltip={<TooltipNoteWrapper note="Create a new story" />}
-                  >
-                    <CreateNewStoryButton
-                      onClick={() => {
-                        setIsFileSearchModalOpen(true);
-                      }}
-                      variant="outline"
-                    >
-                      <PlusIcon />
-                    </CreateNewStoryButton>
-                  </WithTooltip>
-                  <CreateNewStoryFileModal
-                    open={isFileSearchModalOpen}
-                    onOpenChange={setIsFileSearchModalOpen}
-                  />
-                </>
-              )}
+              {searchBarContent}
             </SearchBar>
             <FocusContainer tabIndex={0} id="storybook-explorer-menu">
               {children({
diff --git a/code/core/src/manager/components/sidebar/SearchResults.tsx b/code/core/src/manager/components/sidebar/SearchResults.tsx
index 7573befe34a1..b7689b7d64d0 100644
--- a/code/core/src/manager/components/sidebar/SearchResults.tsx
+++ b/code/core/src/manager/components/sidebar/SearchResults.tsx
@@ -70,7 +70,7 @@ const NoResults = styled.div(({ theme }) => ({
   lineHeight: `18px`,
   color: theme.color.defaultText,
   small: {
-    color: theme.barTextColor,
+    color: theme.textMutedColor,
     fontSize: `${theme.typography.size.s1}px`,
   },
 }));
diff --git a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
index 972606b79598..0e2df01f6aed 100644
--- a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
@@ -33,6 +33,7 @@ const managerContext: any = {
       autodocs: 'tag',
       docsMode: false,
     },
+    testProviders: {},
   },
   api: {
     emit: fn().mockName('api::emit'),
@@ -41,8 +42,18 @@ const managerContext: any = {
     getShortcutKeys: fn(() => ({ search: ['control', 'shift', 's'] })).mockName(
       'api::getShortcutKeys'
     ),
+    getChannel: fn().mockName('api::getChannel'),
+    getElements: fn(() => ({})),
     selectStory: fn().mockName('api::selectStory'),
     experimental_setFilter: fn().mockName('api::experimental_setFilter'),
+    getDocsUrl: () => 'https://storybook.js.org/docs/',
+    getUrlState: () => ({
+      queryParams: {},
+      path: '',
+      viewMode: 'story',
+      url: 'http://localhost:6006/',
+    }),
+    applyQueryParams: fn().mockName('api::applyQueryParams'),
   },
 };
 
@@ -56,11 +67,26 @@ const meta = {
     menu,
     extra: [] as Addon_SidebarTopType[],
     index: index,
+    indexJson: {
+      entries: {
+        // force the tags filter menu to show in production
+        ['dummy--dummyId']: {
+          id: 'dummy--dummyId',
+          name: 'Dummy story',
+          title: 'dummy',
+          importPath: './dummy.stories.js',
+          type: 'story',
+          tags: ['A', 'B', 'C', 'dev'],
+        },
+      },
+      v: 6,
+    },
     storyId,
     refId: DEFAULT_REF_ID,
     refs: {},
     status: {},
     showCreateStoryButton: true,
+    isDevelopment: true,
   },
   decorators: [
     (storyFn) => (
@@ -85,7 +111,7 @@ const refs: Record<string, RefType> = {
     title: 'This is a ref',
     url: 'https://example.com',
     type: 'lazy',
-    index,
+    filteredIndex: index,
     previewInitialized: true,
   },
 };
@@ -97,7 +123,7 @@ const refsError = {
   optimized: {
     ...refs.optimized,
     // @ts-expect-error (non strict)
-    index: undefined as IndexHash,
+    filteredIndex: undefined as IndexHash,
     indexError,
   },
 };
@@ -106,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 e937012c43e6..dfec7fba7826 100644
--- a/code/core/src/manager/components/sidebar/Sidebar.tsx
+++ b/code/core/src/manager/components/sidebar/Sidebar.tsx
@@ -1,18 +1,29 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 
-import { ScrollArea, Spaced } from '@storybook/core/components';
+import {
+  IconButton,
+  ScrollArea,
+  Spaced,
+  TooltipNote,
+  WithTooltip,
+} from '@storybook/core/components';
 import { styled } from '@storybook/core/theming';
-import type { API_LoadedRefData, Addon_SidebarTopType } from '@storybook/core/types';
+import type { API_LoadedRefData, Addon_SidebarTopType, StoryIndex } from '@storybook/core/types';
+import { global } from '@storybook/global';
+import { PlusIcon } from '@storybook/icons';
 
-import type { State } from '@storybook/core/manager-api';
+import { type State, useStorybookApi } from '@storybook/core/manager-api';
 
 import { MEDIA_DESKTOP_BREAKPOINT } from '../../constants';
+import { useLayout } from '../layout/LayoutProvider';
+import { CreateNewStoryFileModal } from './CreateNewStoryFileModal';
 import { Explorer } from './Explorer';
 import type { HeadingProps } from './Heading';
 import { Heading } from './Heading';
 import { Search } from './Search';
 import { SearchResults } from './SearchResults';
 import { SidebarBottom } from './SidebarBottom';
+import { TagsFilter } from './TagsFilter';
 import type { CombinedDataset, Selection } from './types';
 import { useLastViewed } from './useLastViewed';
 
@@ -44,17 +55,15 @@ const Top = styled(Spaced)({
   flex: 1,
 });
 
-const Bottom = styled.div(({ theme }) => ({
-  borderTop: `1px solid ${theme.appBorderColor}`,
-  padding: theme.layoutMargin / 2,
-  display: 'flex',
-  flexWrap: 'wrap',
-  gap: theme.layoutMargin / 2,
-  backgroundColor: theme.barBg,
+const TooltipNoteWrapper = styled(TooltipNote)({
+  margin: 0,
+});
 
-  '&:empty': {
-    display: 'none',
-  },
+const CreateNewStoryButton = styled(IconButton)(({ theme }) => ({
+  color: theme.color.mediumdark,
+  width: 32,
+  height: 32,
+  borderRadius: theme.appBorderRadius + 2,
 }));
 
 const Swap = React.memo(function Swap({
@@ -84,6 +93,7 @@ const useCombination = (
     () => ({
       [DEFAULT_REF_ID]: {
         index,
+        filteredIndex: index,
         indexError,
         previewInitialized,
         status,
@@ -99,6 +109,8 @@ const useCombination = (
   return useMemo(() => ({ hash, entries: Object.entries(hash) }), [hash]);
 };
 
+const isRendererReact = global.STORYBOOK_RENDERER === 'react';
+
 export interface SidebarProps extends API_LoadedRefData {
   refs: State['refs'];
   status: State['status'];
@@ -110,13 +122,15 @@ export interface SidebarProps extends API_LoadedRefData {
   enableShortcuts?: boolean;
   onMenuClick?: HeadingProps['onMenuClick'];
   showCreateStoryButton?: boolean;
+  indexJson?: StoryIndex;
+  isDevelopment?: boolean;
 }
-
 export const Sidebar = React.memo(function Sidebar({
   // @ts-expect-error (non strict)
   storyId = null,
   refId = DEFAULT_REF_ID,
   index,
+  indexJson,
   indexError,
   status,
   previewInitialized,
@@ -124,15 +138,19 @@ export const Sidebar = React.memo(function Sidebar({
   extra,
   menuHighlighted = false,
   enableShortcuts = true,
+  isDevelopment = global.CONFIG_TYPE === 'DEVELOPMENT',
   refs = {},
   onMenuClick,
-  showCreateStoryButton,
+  showCreateStoryButton = isDevelopment && isRendererReact,
 }: SidebarProps) {
+  const [isFileSearchModalOpen, setIsFileSearchModalOpen] = useState(false);
   // @ts-expect-error (non strict)
   const selected: Selection = useMemo(() => storyId && { storyId, refId }, [storyId, refId]);
   const dataset = useCombination(index, indexError, previewInitialized, status, refs);
   const isLoading = !index && !indexError;
   const lastViewedProps = useLastViewed(selected);
+  const { isMobile } = useLayout();
+  const api = useStorybookApi();
 
   return (
     <Container className="container sidebar-container">
@@ -150,7 +168,35 @@ export const Sidebar = React.memo(function Sidebar({
           <Search
             dataset={dataset}
             enableShortcuts={enableShortcuts}
-            showCreateStoryButton={showCreateStoryButton}
+            searchBarContent={
+              showCreateStoryButton && (
+                <>
+                  <WithTooltip
+                    trigger="hover"
+                    hasChrome={false}
+                    tooltip={<TooltipNoteWrapper note="Create a new story" />}
+                  >
+                    <CreateNewStoryButton
+                      onClick={() => {
+                        setIsFileSearchModalOpen(true);
+                      }}
+                      variant="outline"
+                    >
+                      <PlusIcon />
+                    </CreateNewStoryButton>
+                  </WithTooltip>
+                  <CreateNewStoryFileModal
+                    open={isFileSearchModalOpen}
+                    onOpenChange={setIsFileSearchModalOpen}
+                  />
+                </>
+              )
+            }
+            searchFieldContent={
+              indexJson && (
+                <TagsFilter api={api} indexJson={indexJson} isDevelopment={isDevelopment} />
+              )
+            }
             {...lastViewedProps}
           >
             {({
@@ -184,12 +230,8 @@ export const Sidebar = React.memo(function Sidebar({
             )}
           </Search>
         </Top>
+        {isMobile || isLoading ? null : <SidebarBottom isDevelopment={isDevelopment} />}
       </ScrollArea>
-      {isLoading ? null : (
-        <Bottom className="sb-bar">
-          <SidebarBottom />
-        </Bottom>
-      )}
     </Container>
   );
 });
diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx
index 498750fd82e0..22cf6e68ef96 100644
--- a/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx
+++ b/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx
@@ -1,16 +1,104 @@
-import { fn } from '@storybook/test';
+import React, { type FC, Fragment, useEffect, useState } from 'react';
+
+import { Addon_TypesEnum } from '@storybook/core/types';
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, fn, waitFor, within } from '@storybook/test';
+
+import { type API, ManagerContext } from '@storybook/core/manager-api';
+import { userEvent } from '@storybook/testing-library';
 
 import { SidebarBottomBase } from './SidebarBottom';
 
+const DynamicHeightDemo: FC = () => {
+  const [height, setHeight] = useState(100);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setHeight((h) => (h === 100 ? 200 : 100));
+    }, 2000);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div
+      style={{
+        height,
+        transition: '1s height',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'hotpink',
+      }}
+    >
+      CUSTOM CONTENT WITH DYNAMIC HEIGHT
+    </div>
+  );
+};
+
+const managerContext: any = {
+  state: {
+    docsOptions: {
+      defaultName: 'Docs',
+      autodocs: 'tag',
+      docsMode: false,
+    },
+    testProviders: {
+      'component-tests': {
+        type: Addon_TypesEnum.experimental_TEST_PROVIDER,
+        id: 'component-tests',
+        title: () => 'Component tests',
+        description: () => 'Ran 2 seconds ago',
+        runnable: true,
+        watchable: true,
+      },
+      'visual-tests': {
+        type: Addon_TypesEnum.experimental_TEST_PROVIDER,
+        id: 'visual-tests',
+        title: () => 'Visual tests',
+        description: () => 'Not run',
+        runnable: true,
+      },
+    },
+  },
+  api: {
+    on: fn().mockName('api::on'),
+    off: fn().mockName('api::off'),
+    updateTestProviderState: fn(),
+  },
+};
+
 export default {
   component: SidebarBottomBase,
+  title: 'Sidebar/SidebarBottom',
   args: {
+    isDevelopment: true,
+
     api: {
-      experimental_setFilter: fn(),
+      on: fn(),
+      off: fn(),
+      clearNotification: fn(),
+      updateTestProviderState: fn(),
       emit: fn(),
-    },
+      experimental_setFilter: fn(),
+      getChannel: fn(),
+      getElements: fn(() => ({})),
+    } as any as API,
   },
-};
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    (storyFn) => (
+      <div style={{ position: 'relative', width: '100vw', height: '100vh' }}>
+        <div style={{ height: 300, background: 'orangered' }} />
+        {storyFn()}
+      </div>
+    ),
+    (storyFn) => (
+      <ManagerContext.Provider value={managerContext}>{storyFn()}</ManagerContext.Provider>
+    ),
+  ],
+} as Meta<typeof SidebarBottomBase>;
 
 export const Errors = {
   args: {
@@ -40,3 +128,47 @@ export const Both = {
     },
   },
 };
+
+export const DynamicHeight: StoryObj = {
+  decorators: [
+    (storyFn) => (
+      <ManagerContext.Provider
+        value={{
+          ...managerContext,
+          state: {
+            ...managerContext.state,
+            testProviders: {
+              custom: {
+                type: Addon_TypesEnum.experimental_TEST_PROVIDER,
+                id: 'custom',
+                render: () => <DynamicHeightDemo />,
+                runnable: true,
+              },
+            },
+          },
+        }}
+      >
+        {storyFn()}
+      </ManagerContext.Provider>
+    ),
+  ],
+  play: async ({ canvasElement }) => {
+    const screen = await within(canvasElement);
+
+    const toggleButton = await screen.getByLabelText(/Expand/);
+    await userEvent.click(toggleButton);
+
+    const content = await screen.findByText('CUSTOM CONTENT WITH DYNAMIC HEIGHT');
+    const collapse = await screen.getByTestId('collapse');
+
+    await expect(content).toBeVisible();
+
+    await userEvent.click(toggleButton);
+
+    await waitFor(() => expect(collapse.getBoundingClientRect()).toHaveProperty('height', 0));
+
+    await userEvent.click(toggleButton);
+
+    await waitFor(() => expect(collapse.getBoundingClientRect()).not.toHaveProperty('height', 0));
+  },
+};
diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.tsx
index 7b126968963f..38efdae4f682 100644
--- a/code/core/src/manager/components/sidebar/SidebarBottom.tsx
+++ b/code/core/src/manager/components/sidebar/SidebarBottom.tsx
@@ -1,8 +1,14 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { Fragment, useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 import { styled } from '@storybook/core/theming';
-import type { API_FilterFunction } from '@storybook/types';
+import { type API_FilterFunction } from '@storybook/core/types';
 
+import {
+  TESTING_MODULE_CRASH_REPORT,
+  TESTING_MODULE_PROGRESS_REPORT,
+  type TestingModuleCrashReportPayload,
+  type TestingModuleProgressReportPayload,
+} from '@storybook/core/core-events';
 import {
   type API,
   type State,
@@ -10,7 +16,13 @@ import {
   useStorybookState,
 } from '@storybook/core/manager-api';
 
-import { FilterToggle } from './FilterToggle';
+import { NotificationList } from '../notifications/NotificationList';
+import { TestingModule } from './TestingModule';
+
+// This ID is used dynamically add/remove space at the bottom to prevent overlapping the main sidebar content.
+const SIDEBAR_BOTTOM_SPACER_ID = 'sidebar-bottom-spacer';
+// This ID is used by some integrators to target the (fixed position) sidebar bottom element so it should remain stable.
+const SIDEBAR_BOTTOM_WRAPPER_ID = 'sidebar-bottom-wrapper';
 
 const filterNone: API_FilterFunction = () => true;
 const filterWarn: API_FilterFunction = ({ status = {} }) =>
@@ -20,34 +32,66 @@ const filterError: API_FilterFunction = ({ status = {} }) =>
 const filterBoth: API_FilterFunction = ({ status = {} }) =>
   Object.values(status).some((value) => value?.status === 'warn' || value?.status === 'error');
 
-const getFilter = (showWarnings = false, showErrors = false) => {
-  if (showWarnings && showErrors) {
+const getFilter = (warningsActive = false, errorsActive = false) => {
+  if (warningsActive && errorsActive) {
     return filterBoth;
   }
 
-  if (showWarnings) {
+  if (warningsActive) {
     return filterWarn;
   }
 
-  if (showErrors) {
+  if (errorsActive) {
     return filterError;
   }
   return filterNone;
 };
 
-const Wrapper = styled.div({
-  display: 'flex',
-  gap: 5,
+const Spacer = styled.div({
+  pointerEvents: 'none',
 });
 
+const Content = styled.div(({ theme }) => ({
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  right: 0,
+  padding: 12,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 12,
+  color: theme.color.defaultText,
+  fontSize: theme.typography.size.s1,
+
+  '&:empty': {
+    display: 'none',
+  },
+
+  // Integrators can use these to style their custom additions
+  '--sb-sidebar-bottom-card-background': theme.background.content,
+  '--sb-sidebar-bottom-card-border': `1px solid ${theme.appBorderColor}`,
+  '--sb-sidebar-bottom-card-border-radius': `${theme.appBorderRadius + 1}px`,
+  '--sb-sidebar-bottom-card-box-shadow': `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0px -5px 20px 10px ${theme.background.app}`,
+}));
+
 interface SidebarBottomProps {
   api: API;
+  notifications: State['notifications'];
   status: State['status'];
+  isDevelopment?: boolean;
 }
 
-export const SidebarBottomBase = ({ api, status = {} }: SidebarBottomProps) => {
-  const [showWarnings, setShowWarnings] = React.useState(false);
-  const [showErrors, setShowErrors] = React.useState(false);
+export const SidebarBottomBase = ({
+  api,
+  notifications = [],
+  status = {},
+  isDevelopment,
+}: SidebarBottomProps) => {
+  const spacerRef = useRef<HTMLDivElement | null>(null);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const [warningsActive, setWarningsActive] = useState(false);
+  const [errorsActive, setErrorsActive] = useState(false);
+  const { testProviders } = useStorybookState();
 
   const warnings = Object.values(status).filter((statusByAddonId) =>
     Object.values(statusByAddonId).some((value) => value?.status === 'warn')
@@ -58,46 +102,94 @@ export const SidebarBottomBase = ({ api, status = {} }: SidebarBottomProps) => {
   const hasWarnings = warnings.length > 0;
   const hasErrors = errors.length > 0;
 
-  const toggleWarnings = useCallback(() => setShowWarnings((shown) => !shown), []);
-  const toggleErrors = useCallback(() => setShowErrors((shown) => !shown), []);
+  useEffect(() => {
+    if (spacerRef.current && wrapperRef.current) {
+      const resizeObserver = new ResizeObserver(() => {
+        if (spacerRef.current && wrapperRef.current) {
+          spacerRef.current.style.height = `${wrapperRef.current.scrollHeight}px`;
+        }
+      });
+      resizeObserver.observe(wrapperRef.current);
+      return () => resizeObserver.disconnect();
+    }
+  }, []);
 
   useEffect(() => {
-    const filter = getFilter(hasWarnings && showWarnings, hasErrors && showErrors);
+    const filter = getFilter(hasWarnings && warningsActive, hasErrors && errorsActive);
     api.experimental_setFilter('sidebar-bottom-filter', filter);
-  }, [api, hasWarnings, hasErrors, showWarnings, showErrors]);
-
-  if (!hasWarnings && !hasErrors) {
+  }, [api, hasWarnings, hasErrors, warningsActive, errorsActive]);
+
+  // Register listeners before the first render
+  useLayoutEffect(() => {
+    const onCrashReport = ({ providerId, ...details }: TestingModuleCrashReportPayload) => {
+      api.updateTestProviderState(providerId, {
+        error: { name: 'Crashed!', message: details.error.message },
+        running: false,
+        crashed: true,
+        watching: false,
+      });
+    };
+
+    const onProgressReport = async ({
+      providerId,
+      ...result
+    }: TestingModuleProgressReportPayload) => {
+      const statusResult = 'status' in result ? result.status : undefined;
+      api.updateTestProviderState(
+        providerId,
+        statusResult === 'failed'
+          ? { ...result, running: false, failed: true }
+          : { ...result, running: statusResult === 'pending' }
+      );
+    };
+
+    api.on(TESTING_MODULE_CRASH_REPORT, onCrashReport);
+    api.on(TESTING_MODULE_PROGRESS_REPORT, onProgressReport);
+
+    return () => {
+      api.off(TESTING_MODULE_CRASH_REPORT, onCrashReport);
+      api.off(TESTING_MODULE_PROGRESS_REPORT, onProgressReport);
+    };
+  }, [api, testProviders]);
+
+  const testProvidersArray = Object.values(testProviders || {});
+  if (!hasWarnings && !hasErrors && !testProvidersArray.length && !notifications.length) {
     return null;
   }
 
   return (
-    <Wrapper id="sidebar-bottom-wrapper">
-      {hasErrors && (
-        <FilterToggle
-          id="errors-found-filter"
-          active={showErrors}
-          count={errors.length}
-          label="Error"
-          status="critical"
-          onClick={toggleErrors}
-        />
-      )}
-      {hasWarnings && (
-        <FilterToggle
-          id="warnings-found-filter"
-          active={showWarnings}
-          count={warnings.length}
-          label="Warning"
-          status="warning"
-          onClick={toggleWarnings}
-        />
-      )}
-    </Wrapper>
+    <Fragment>
+      <Spacer id={SIDEBAR_BOTTOM_SPACER_ID} ref={spacerRef}></Spacer>
+      <Content id={SIDEBAR_BOTTOM_WRAPPER_ID} ref={wrapperRef}>
+        <NotificationList notifications={notifications} clearNotification={api.clearNotification} />
+        {isDevelopment && (
+          <TestingModule
+            {...{
+              testProviders: testProvidersArray,
+              errorCount: errors.length,
+              errorsActive,
+              setErrorsActive,
+              warningCount: warnings.length,
+              warningsActive,
+              setWarningsActive,
+            }}
+          />
+        )}
+      </Content>
+    </Fragment>
   );
 };
 
-export const SidebarBottom = () => {
+export const SidebarBottom = ({ isDevelopment }: { isDevelopment?: boolean }) => {
   const api = useStorybookApi();
-  const { status } = useStorybookState();
-  return <SidebarBottomBase api={api} status={status} />;
+  const { notifications, status } = useStorybookState();
+
+  return (
+    <SidebarBottomBase
+      api={api}
+      notifications={notifications}
+      status={status}
+      isDevelopment={isDevelopment}
+    />
+  );
 };
diff --git a/code/core/src/manager/components/sidebar/StatusButton.tsx b/code/core/src/manager/components/sidebar/StatusButton.tsx
index 9d1b49998df7..8002cc87ba33 100644
--- a/code/core/src/manager/components/sidebar/StatusButton.tsx
+++ b/code/core/src/manager/components/sidebar/StatusButton.tsx
@@ -3,7 +3,7 @@ import { styled } from '@storybook/core/theming';
 import type { API_StatusValue } from '@storybook/types';
 
 import type { Theme } from '@emotion/react';
-import { transparentize } from 'polished';
+import { darken, lighten, transparentize } from 'polished';
 
 const withStatusColor = ({ theme, status }: { theme: Theme; status: API_StatusValue }) => {
   const defaultColor =
@@ -43,6 +43,19 @@ export const StatusButton = styled(IconButton)<{
 
     '&:hover': {
       color: theme.color.secondary,
+      background:
+        theme.base === 'dark'
+          ? darken(0.3, theme.color.secondary)
+          : lighten(0.4, theme.color.secondary),
+    },
+
+    '[data-selected="true"] &': {
+      background: theme.color.secondary,
+      boxShadow: `0 0 5px 5px ${theme.color.secondary}`,
+
+      '&:hover': {
+        background: lighten(0.1, theme.color.secondary),
+      },
     },
 
     '&:focus': {
diff --git a/code/core/src/manager/components/sidebar/StatusContext.tsx b/code/core/src/manager/components/sidebar/StatusContext.tsx
index d143a3db9be5..45d57611693c 100644
--- a/code/core/src/manager/components/sidebar/StatusContext.tsx
+++ b/code/core/src/manager/components/sidebar/StatusContext.tsx
@@ -2,7 +2,8 @@ import { createContext, useContext } from 'react';
 
 import type { API_StatusObject, API_StatusState, API_StatusValue, StoryId } from '@storybook/types';
 
-import type { StoriesHash } from '../../../manager-api';
+import type { StoriesHash } from '@storybook/core/manager-api';
+
 import type { Item } from '../../container/Sidebar';
 import { getDescendantIds } from '../../utils/tree';
 
diff --git a/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx b/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx
new file mode 100644
index 000000000000..89236acda68a
--- /dev/null
+++ b/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx
@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { findByRole, fn } from '@storybook/test';
+
+import { TagsFilter } from './TagsFilter';
+
+const meta = {
+  component: TagsFilter,
+  title: 'Sidebar/TagsFilter',
+  tags: ['haha'],
+  args: {
+    api: {
+      experimental_setFilter: fn(),
+      getDocsUrl: () => 'https://storybook.js.org/docs/',
+      getUrlState: () => ({
+        queryParams: {},
+        path: '',
+        viewMode: 'story',
+        url: 'http://localhost:6006/',
+      }),
+      applyQueryParams: fn().mockName('api::applyQueryParams'),
+    } as any,
+    isDevelopment: true,
+  },
+} satisfies Meta<typeof TagsFilter>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Closed: Story = {
+  args: {
+    indexJson: {
+      v: 6,
+      entries: {
+        'c1-s1': { tags: ['A', 'B', 'C', 'dev'] } as any,
+      },
+    },
+  },
+};
+
+export const ClosedWithSelection: Story = {
+  args: {
+    ...Closed.args,
+    initialSelectedTags: ['A', 'B'],
+  },
+};
+
+export const Open: Story = {
+  ...Closed,
+  play: async ({ canvasElement }) => {
+    const button = await findByRole(canvasElement, 'button');
+    await button.click();
+  },
+};
+
+export const OpenWithSelection: Story = {
+  ...ClosedWithSelection,
+  play: Open.play,
+};
+
+export const OpenEmpty: Story = {
+  args: {
+    indexJson: {
+      v: 6,
+      entries: {},
+    },
+  },
+  play: Open.play,
+};
+
+export const EmptyProduction: Story = {
+  args: {
+    ...OpenEmpty.args,
+    isDevelopment: false,
+  },
+};
diff --git a/code/core/src/manager/components/sidebar/TagsFilter.tsx b/code/core/src/manager/components/sidebar/TagsFilter.tsx
new file mode 100644
index 000000000000..02e71aa741e5
--- /dev/null
+++ b/code/core/src/manager/components/sidebar/TagsFilter.tsx
@@ -0,0 +1,130 @@
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { Badge, IconButton, WithTooltip } from '@storybook/core/components';
+import { styled } from '@storybook/core/theming';
+import { FilterIcon } from '@storybook/icons';
+import type { StoryIndex, Tag } from '@storybook/types';
+
+import type { API } from '@storybook/core/manager-api';
+
+import { TagsFilterPanel } from './TagsFilterPanel';
+
+const TAGS_FILTER = 'tags-filter';
+
+const BUILT_IN_TAGS_HIDE = new Set([
+  'dev',
+  'docs-only',
+  'test-only',
+  'autodocs',
+  'test',
+  'attached-mdx',
+  'unattached-mdx',
+]);
+
+const Wrapper = styled.div({
+  position: 'relative',
+});
+
+const TagSelected = styled(Badge)(({ theme }) => ({
+  position: 'absolute',
+  top: 7,
+  right: 7,
+  transform: 'translate(50%, -50%)',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: 3,
+  height: 6,
+  minWidth: 6,
+  lineHeight: 'px',
+  boxShadow: `${theme.barSelectedColor} 0 0 0 1px inset`,
+  fontSize: theme.typography.size.s1 - 1,
+  background: theme.color.secondary,
+  color: theme.color.lightest,
+}));
+
+export interface TagsFilterProps {
+  api: API;
+  indexJson: StoryIndex;
+  initialSelectedTags?: Tag[];
+  isDevelopment: boolean;
+}
+
+export const TagsFilter = ({
+  api,
+  indexJson,
+  initialSelectedTags = [],
+  isDevelopment,
+}: TagsFilterProps) => {
+  const [selectedTags, setSelectedTags] = useState(initialSelectedTags);
+  const [expanded, setExpanded] = useState(false);
+  const tagsActive = selectedTags.length > 0;
+
+  useEffect(() => {
+    api.experimental_setFilter(TAGS_FILTER, (item) => {
+      if (selectedTags.length === 0) {
+        return true;
+      }
+
+      return selectedTags.some((tag) => item.tags?.includes(tag));
+    });
+  }, [api, selectedTags]);
+
+  const allTags = Object.values(indexJson.entries).reduce((acc, entry) => {
+    entry.tags?.forEach((tag: Tag) => {
+      if (!BUILT_IN_TAGS_HIDE.has(tag)) {
+        acc.add(tag);
+      }
+    });
+    return acc;
+  }, new Set<Tag>());
+
+  const toggleTag = useCallback(
+    (tag: string) => {
+      if (selectedTags.includes(tag)) {
+        setSelectedTags(selectedTags.filter((t) => t !== tag));
+      } else {
+        setSelectedTags([...selectedTags, tag]);
+      }
+    },
+    [selectedTags, setSelectedTags]
+  );
+
+  const handleToggleExpand = useCallback(
+    (event: React.SyntheticEvent<Element, Event>): void => {
+      event.preventDefault();
+      setExpanded(!expanded);
+    },
+    [expanded, setExpanded]
+  );
+
+  // Hide the entire UI if there are no tags and it's a built Storybook
+  if (allTags.size === 0 && !isDevelopment) {
+    return null;
+  }
+
+  return (
+    <WithTooltip
+      placement="bottom"
+      trigger="click"
+      onVisibleChange={setExpanded}
+      tooltip={() => (
+        <TagsFilterPanel
+          api={api}
+          allTags={Array.from(allTags).toSorted()}
+          selectedTags={selectedTags}
+          toggleTag={toggleTag}
+          isDevelopment={isDevelopment}
+        />
+      )}
+      closeOnOutsideClick
+    >
+      <Wrapper>
+        <IconButton key="tags" title="Tag filters" active={tagsActive} onClick={handleToggleExpand}>
+          <FilterIcon />
+        </IconButton>
+        {selectedTags.length > 0 && <TagSelected />}
+      </Wrapper>
+    </WithTooltip>
+  );
+};
diff --git a/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx b/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx
new file mode 100644
index 000000000000..0602d0ed7a43
--- /dev/null
+++ b/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx
@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { TagsFilterPanel } from './TagsFilterPanel';
+
+const meta = {
+  component: TagsFilterPanel,
+  title: 'Sidebar/TagsFilterPanel',
+  args: {
+    toggleTag: fn(),
+    api: {
+      getDocsUrl: () => 'https://storybook.js.org/docs/',
+    } as any,
+    isDevelopment: true,
+  },
+  tags: ['hoho'],
+} satisfies Meta<typeof TagsFilterPanel>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Empty: Story = {
+  args: {
+    allTags: [],
+    selectedTags: [],
+  },
+};
+
+export const BuiltInTagsOnly: Story = {
+  args: {
+    allTags: ['play-fn'],
+    selectedTags: [],
+  },
+};
+
+export const BuiltInTagsOnlyProduction: Story = {
+  args: {
+    ...BuiltInTagsOnly.args,
+    isDevelopment: false,
+  },
+};
+
+export const Default: Story = {
+  args: {
+    allTags: ['tag1', 'tag2', 'tag3'],
+    selectedTags: ['tag1', 'tag3'],
+  },
+};
+
+export const BuiltInTags: Story = {
+  args: {
+    allTags: [...Default.args.allTags, 'play-fn'],
+    selectedTags: ['tag1', 'tag3'],
+  },
+};
+
+export const ExtraBuiltInTagsSelected: Story = {
+  args: {
+    ...BuiltInTags.args,
+    selectedTags: ['tag1', 'tag3', 'autodocs', 'play-fn'],
+  },
+};
diff --git a/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx b/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
new file mode 100644
index 000000000000..d9fc85c360d0
--- /dev/null
+++ b/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+
+import { TooltipLinkList } from '@storybook/core/components';
+import { styled, useTheme } from '@storybook/core/theming';
+import { ShareAltIcon } from '@storybook/icons';
+import type { Tag } from '@storybook/types';
+
+import type { API } from '@storybook/core/manager-api';
+
+import type { Link } from '../../../components/components/tooltip/TooltipLinkList';
+
+const BUILT_IN_TAGS_SHOW = new Set(['play-fn']);
+
+const Wrapper = styled.div({
+  minWidth: 180,
+  maxWidth: 220,
+});
+
+interface TagsFilterPanelProps {
+  api: API;
+  allTags: Tag[];
+  selectedTags: Tag[];
+  toggleTag: (tag: Tag) => void;
+  isDevelopment: boolean;
+}
+
+export const TagsFilterPanel = ({
+  api,
+  allTags,
+  selectedTags,
+  toggleTag,
+  isDevelopment,
+}: TagsFilterPanelProps) => {
+  const userTags = allTags.filter((tag) => !BUILT_IN_TAGS_SHOW.has(tag));
+  const docsUrl = api.getDocsUrl({ subpath: 'writing-stories/tags#filtering-by-custom-tags' });
+
+  const groups = [
+    allTags.map((tag) => {
+      const checked = selectedTags.includes(tag);
+      const id = `tag-${tag}`;
+      return {
+        id,
+        title: tag,
+        right: (
+          <input
+            type="checkbox"
+            id={id}
+            name={id}
+            value={tag}
+            checked={checked}
+            onChange={() => {
+              // The onClick handler higher up the tree will handle the toggle
+              // For controlled inputs, a onClick handler is needed, though
+              // Accessibility-wise this isn't optimal, but I guess that's a limitation
+              // of the current design of TooltipLinkList
+            }}
+          />
+        ),
+        onClick: () => toggleTag(tag),
+      };
+    }),
+  ] as Link[][];
+
+  if (allTags.length === 0) {
+    groups.push([
+      {
+        id: 'no-tags',
+        title: 'There are no tags. Use tags to organize and filter your Storybook.',
+        isIndented: false,
+      },
+    ]);
+  }
+
+  if (userTags.length === 0 && isDevelopment) {
+    groups.push([
+      {
+        id: 'tags-docs',
+        title: 'Learn how to add tags',
+        icon: <ShareAltIcon />,
+        href: docsUrl,
+      },
+    ]);
+  }
+
+  return (
+    <Wrapper>
+      <TooltipLinkList links={groups} />
+    </Wrapper>
+  );
+};
diff --git a/code/core/src/manager/components/sidebar/TestingModule.stories.tsx b/code/core/src/manager/components/sidebar/TestingModule.stories.tsx
new file mode 100644
index 000000000000..66fd53c488a0
--- /dev/null
+++ b/code/core/src/manager/components/sidebar/TestingModule.stories.tsx
@@ -0,0 +1,246 @@
+import React from 'react';
+
+import type { Listener } from '@storybook/core/channels';
+import { styled } from '@storybook/core/theming';
+import { Addon_TypesEnum } from '@storybook/core/types';
+import type { Meta, StoryObj } from '@storybook/react';
+import { fireEvent, fn } from '@storybook/test';
+
+import { TESTING_MODULE_CONFIG_CHANGE, type TestProviders } from '@storybook/core/core-events';
+import { ManagerContext, mockChannel } from '@storybook/core/manager-api';
+
+import { TestingModule } from './TestingModule';
+
+const TestProvider = styled.div({
+  padding: 8,
+  fontSize: 12,
+});
+
+const baseState = {
+  details: {},
+  cancellable: false,
+  cancelling: false,
+  running: false,
+  watching: false,
+  failed: false,
+  crashed: false,
+};
+
+const testProviders: TestProviders[keyof TestProviders][] = [
+  {
+    type: Addon_TypesEnum.experimental_TEST_PROVIDER,
+    id: 'component-tests',
+    name: 'Component tests',
+    title: () => 'Component tests',
+    description: () => 'Ran 2 seconds ago',
+    runnable: true,
+    watchable: true,
+    ...baseState,
+  },
+  {
+    type: Addon_TypesEnum.experimental_TEST_PROVIDER,
+    id: 'visual-tests',
+    name: 'Visual tests',
+    title: () => 'Visual tests',
+    description: () => 'Not run',
+    runnable: true,
+    ...baseState,
+  },
+  {
+    type: Addon_TypesEnum.experimental_TEST_PROVIDER,
+    id: 'linting',
+    name: 'Linting',
+    render: () => <TestProvider>Custom render function</TestProvider>,
+    ...baseState,
+    watching: true,
+  },
+];
+
+let triggerUpdate: () => void;
+const channel = mockChannel();
+const managerContext: any = {
+  api: {
+    on: (eventName: string, listener: Listener) => {
+      if (eventName === TESTING_MODULE_CONFIG_CHANGE) {
+        triggerUpdate = listener;
+      }
+      return channel.on(eventName, listener);
+    },
+    off: (eventName: string, listener: Listener) => channel.off(eventName, listener),
+    runTestProvider: fn().mockName('api::runTestProvider'),
+    cancelTestProvider: fn().mockName('api::cancelTestProvider'),
+    updateTestProviderState: fn().mockName('api::updateTestProviderState'),
+    setTestProviderWatchMode: fn().mockName('api::setTestProviderWatchMode'),
+  },
+};
+
+const meta = {
+  component: TestingModule,
+  title: 'Sidebar/TestingModule',
+  args: {
+    testProviders,
+    errorCount: 0,
+    errorsActive: false,
+    setErrorsActive: fn(),
+    warningCount: 0,
+    warningsActive: false,
+    setWarningsActive: fn(),
+  },
+  decorators: [
+    (storyFn) => (
+      <ManagerContext.Provider value={managerContext}>{storyFn()}</ManagerContext.Provider>
+    ),
+    (StoryFn) => (
+      <div style={{ maxWidth: 232 }}>
+        <StoryFn />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof TestingModule>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Expanded: Story = {
+  play: async ({ canvas }) => {
+    const button = await canvas.findByRole('button', { name: /Expand/ });
+    await fireEvent.click(button);
+    await new Promise((resolve) => setTimeout(resolve, 500));
+  },
+};
+
+export const Statuses: Story = {
+  args: {
+    errorCount: 14,
+    warningCount: 42,
+  },
+  play: Expanded.play,
+};
+
+export const ErrorsActive: Story = {
+  args: {
+    ...Statuses.args,
+    errorsActive: true,
+  },
+  play: Expanded.play,
+};
+
+export const WarningsActive: Story = {
+  args: {
+    ...Statuses.args,
+    warningsActive: true,
+  },
+  play: Expanded.play,
+};
+
+export const BothActive: Story = {
+  args: {
+    ...Statuses.args,
+    errorsActive: true,
+    warningsActive: true,
+  },
+  play: Expanded.play,
+};
+
+export const CollapsedStatuses: Story = {
+  args: Statuses.args,
+};
+
+export const Running: Story = {
+  args: {
+    testProviders: [{ ...testProviders[0], running: true }, ...testProviders.slice(1)],
+  },
+  play: Expanded.play,
+};
+
+export const RunningAll: Story = {
+  args: {
+    testProviders: testProviders.map((tp) => ({ ...tp, running: !!tp.runnable })),
+  },
+  play: Expanded.play,
+};
+
+export const CollapsedRunning: Story = {
+  args: RunningAll.args,
+};
+
+export const Cancellable: Story = {
+  args: {
+    testProviders: [
+      { ...testProviders[0], running: true, cancellable: true },
+      ...testProviders.slice(1),
+    ],
+  },
+  play: Expanded.play,
+};
+
+export const Cancelling: Story = {
+  args: {
+    testProviders: [
+      { ...testProviders[0], running: true, cancellable: true, cancelling: true },
+      ...testProviders.slice(1),
+    ],
+  },
+  play: Expanded.play,
+};
+
+export const Watching: Story = {
+  args: {
+    testProviders: [{ ...testProviders[0], watching: true }, ...testProviders.slice(1)],
+  },
+  play: Expanded.play,
+};
+
+export const Failing: Story = {
+  args: {
+    testProviders: [
+      { ...testProviders[0], failed: true, running: true },
+      ...testProviders.slice(1),
+    ],
+  },
+  play: Expanded.play,
+};
+
+export const Failed: Story = {
+  args: {
+    testProviders: [{ ...testProviders[0], failed: true }, ...testProviders.slice(1)],
+  },
+  play: Expanded.play,
+};
+
+export const Crashed: Story = {
+  args: {
+    testProviders: [
+      {
+        ...testProviders[0],
+        render: () => (
+          <TestProvider>
+            Component tests didn't complete
+            <br />
+            Problems!
+          </TestProvider>
+        ),
+        crashed: true,
+      },
+      ...testProviders.slice(1),
+    ],
+  },
+  play: Expanded.play,
+};
+
+export const Updated: Story = {
+  args: {},
+  play: async (context) => {
+    await Expanded.play!(context);
+    triggerUpdate?.();
+  },
+};
+
+export const NoTestProvider: Story = {
+  args: {
+    testProviders: [],
+  },
+};
diff --git a/code/core/src/manager/components/sidebar/TestingModule.tsx b/code/core/src/manager/components/sidebar/TestingModule.tsx
new file mode 100644
index 000000000000..b66512007c08
--- /dev/null
+++ b/code/core/src/manager/components/sidebar/TestingModule.tsx
@@ -0,0 +1,343 @@
+import React, { type SyntheticEvent, useCallback, useEffect, useRef, useState } from 'react';
+
+import { Button, TooltipNote } from '@storybook/core/components';
+import { WithTooltip } from '@storybook/core/components';
+import { keyframes, styled } from '@storybook/core/theming';
+import { ChevronSmallUpIcon, PlayAllHollowIcon } from '@storybook/icons';
+
+import { TESTING_MODULE_CONFIG_CHANGE, type TestProviders } from '@storybook/core/core-events';
+import { useStorybookApi } from '@storybook/core/manager-api';
+
+import { LegacyRender } from './LegacyRender';
+
+const DEFAULT_HEIGHT = 500;
+
+const spin = keyframes({
+  '0%': { transform: 'rotate(0deg)' },
+  '10%': { transform: 'rotate(10deg)' },
+  '40%': { transform: 'rotate(170deg)' },
+  '50%': { transform: 'rotate(180deg)' },
+  '60%': { transform: 'rotate(190deg)' },
+  '90%': { transform: 'rotate(350deg)' },
+  '100%': { transform: 'rotate(360deg)' },
+});
+
+const Outline = styled.div<{
+  crashed: boolean;
+  failed: boolean;
+  running: boolean;
+  updated: boolean;
+}>(({ crashed, failed, running, theme, updated }) => ({
+  position: 'relative',
+  lineHeight: '20px',
+  width: '100%',
+  padding: 1,
+  overflow: 'hidden',
+  backgroundColor: `var(--sb-sidebar-bottom-card-background, ${theme.background.content})`,
+  borderRadius:
+    `var(--sb-sidebar-bottom-card-border-radius, ${theme.appBorderRadius + 1}px)` as any,
+  boxShadow: `inset 0 0 0 1px ${crashed && !running ? theme.color.negative : updated ? theme.color.positive : theme.appBorderColor}, var(--sb-sidebar-bottom-card-box-shadow, 0 1px 2px 0 rgba(0, 0, 0, 0.05), 0px -5px 20px 10px ${theme.background.app})`,
+  transition: 'box-shadow 1s',
+
+  '&:after': {
+    content: '""',
+    display: running ? 'block' : 'none',
+    position: 'absolute',
+    left: '50%',
+    top: '50%',
+    marginLeft: 'calc(max(100vw, 100vh) * -0.5)',
+    marginTop: 'calc(max(100vw, 100vh) * -0.5)',
+    height: 'max(100vw, 100vh)',
+    width: 'max(100vw, 100vh)',
+    animation: `${spin} 3s linear infinite`,
+    background: failed
+      ? // Hardcoded colors to prevent themes from messing with them (orange+gold, secondary+seafoam)
+        `conic-gradient(transparent 90deg, #FC521F 150deg, #FFAE00 210deg, transparent 270deg)`
+      : `conic-gradient(transparent 90deg, #029CFD 150deg, #37D5D3 210deg, transparent 270deg)`,
+    opacity: 1,
+    willChange: 'auto',
+  },
+}));
+
+const Card = styled.div(({ theme }) => ({
+  position: 'relative',
+  zIndex: 1,
+  borderRadius: theme.appBorderRadius,
+  backgroundColor: theme.background.content,
+
+  '&:hover #testing-module-collapse-toggle': {
+    opacity: 1,
+  },
+}));
+
+const Collapsible = styled.div(({ theme }) => ({
+  overflow: 'hidden',
+
+  willChange: 'auto',
+  boxShadow: `inset 0 -1px 0 ${theme.appBorderColor}`,
+}));
+
+const Content = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+const Bar = styled.div<{ onClick?: (e: SyntheticEvent) => void }>(({ onClick }) => ({
+  display: 'flex',
+  width: '100%',
+  cursor: onClick ? 'pointer' : 'default',
+  userSelect: 'none',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  overflow: 'hidden',
+  padding: '6px',
+}));
+
+const Filters = styled.div({
+  display: 'flex',
+  flexBasis: '100%',
+  justifyContent: 'flex-end',
+  gap: 6,
+});
+
+const CollapseToggle = styled(Button)({
+  opacity: 0,
+  transition: 'opacity 250ms',
+  willChange: 'auto',
+  '&:focus, &:hover': {
+    opacity: 1,
+  },
+});
+
+const StatusButton = styled(Button)<{ status: 'negative' | 'warning' }>(
+  { minWidth: 28 },
+  ({ active, status, theme }) =>
+    !active &&
+    (theme.base === 'light'
+      ? {
+          background: {
+            negative: theme.background.negative,
+            warning: theme.background.warning,
+          }[status],
+          color: {
+            negative: theme.color.negativeText,
+            warning: theme.color.warningText,
+          }[status],
+        }
+      : {
+          background: {
+            negative: `${theme.color.negative}22`,
+            warning: `${theme.color.warning}22`,
+          }[status],
+          color: {
+            negative: theme.color.negative,
+            warning: theme.color.warning,
+          }[status],
+        })
+);
+
+const TestProvider = styled.div(({ theme }) => ({
+  padding: 4,
+
+  '&:not(:last-child)': {
+    boxShadow: `inset 0 -1px 0 ${theme.appBorderColor}`,
+  },
+}));
+
+interface TestingModuleProps {
+  testProviders: TestProviders[keyof TestProviders][];
+  errorCount: number;
+  errorsActive: boolean;
+  setErrorsActive: (active: boolean) => void;
+  warningCount: number;
+  warningsActive: boolean;
+  setWarningsActive: (active: boolean) => void;
+}
+
+export const TestingModule = ({
+  testProviders,
+  errorCount,
+  errorsActive,
+  setErrorsActive,
+  warningCount,
+  warningsActive,
+  setWarningsActive,
+}: TestingModuleProps) => {
+  const api = useStorybookApi();
+
+  const timeoutRef = useRef<null | ReturnType<typeof setTimeout>>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [maxHeight, setMaxHeight] = useState(DEFAULT_HEIGHT);
+  const [isUpdated, setUpdated] = useState(false);
+  const [isCollapsed, setCollapsed] = useState(true);
+  const [isChangingCollapse, setChangingCollapse] = useState(false);
+
+  useEffect(() => {
+    if (contentRef.current) {
+      setMaxHeight(contentRef.current?.getBoundingClientRect().height || DEFAULT_HEIGHT);
+
+      const resizeObserver = new ResizeObserver(() => {
+        requestAnimationFrame(() => {
+          if (contentRef.current && !isCollapsed) {
+            const height = contentRef.current?.getBoundingClientRect().height || DEFAULT_HEIGHT;
+
+            setMaxHeight(height);
+          }
+        });
+      });
+      resizeObserver.observe(contentRef.current);
+      return () => resizeObserver.disconnect();
+    }
+  }, [isCollapsed]);
+
+  useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout>;
+    const handler = () => {
+      setUpdated(true);
+      timeout = setTimeout(setUpdated, 1000, false);
+    };
+    api.on(TESTING_MODULE_CONFIG_CHANGE, handler);
+    return () => {
+      api.off(TESTING_MODULE_CONFIG_CHANGE, handler);
+      clearTimeout(timeout);
+    };
+  }, [api]);
+
+  const toggleCollapsed = useCallback((event: SyntheticEvent) => {
+    event.stopPropagation();
+    setChangingCollapse(true);
+    setCollapsed((s) => !s);
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      setChangingCollapse(false);
+    }, 250);
+  }, []);
+
+  const isRunning = testProviders.some((tp) => tp.running);
+  const isCrashed = testProviders.some((tp) => tp.crashed);
+  const isFailed = testProviders.some((tp) => tp.failed);
+  const hasTestProviders = testProviders.length > 0;
+
+  if (!hasTestProviders && (!errorCount || !warningCount)) {
+    return null;
+  }
+
+  return (
+    <Outline
+      id="storybook-testing-module"
+      running={isRunning}
+      crashed={isCrashed}
+      failed={isFailed || errorCount > 0}
+      updated={isUpdated}
+    >
+      <Card>
+        {hasTestProviders && (
+          <Collapsible
+            data-testid="collapse"
+            style={{
+              transition: isChangingCollapse ? 'max-height 250ms' : 'max-height 0ms',
+              display: hasTestProviders ? 'block' : 'none',
+              maxHeight: isCollapsed ? 0 : maxHeight,
+            }}
+          >
+            <Content ref={contentRef}>
+              {testProviders.map((state) => {
+                const { render: Render } = state;
+                return (
+                  <TestProvider key={state.id} data-module-id={state.id}>
+                    {Render ? <Render {...state} /> : <LegacyRender {...state} />}
+                  </TestProvider>
+                );
+              })}
+            </Content>
+          </Collapsible>
+        )}
+
+        <Bar {...(hasTestProviders ? { onClick: toggleCollapsed } : {})}>
+          {hasTestProviders && (
+            <Button
+              variant="ghost"
+              padding="small"
+              onClick={(e: SyntheticEvent) => {
+                e.stopPropagation();
+                testProviders
+                  .filter((state) => !state.running && state.runnable)
+                  .forEach(({ id }) => api.runTestProvider(id));
+              }}
+              disabled={isRunning}
+            >
+              <PlayAllHollowIcon />
+              {isRunning ? 'Running...' : 'Run tests'}
+            </Button>
+          )}
+          <Filters>
+            {hasTestProviders && (
+              <CollapseToggle
+                variant="ghost"
+                padding="small"
+                onClick={toggleCollapsed}
+                id="testing-module-collapse-toggle"
+                aria-label={isCollapsed ? 'Expand testing module' : 'Collapse testing module'}
+              >
+                <ChevronSmallUpIcon
+                  style={{
+                    transform: isCollapsed ? 'none' : 'rotate(180deg)',
+                    transition: 'transform 250ms',
+                    willChange: 'auto',
+                  }}
+                />
+              </CollapseToggle>
+            )}
+
+            {errorCount > 0 && (
+              <WithTooltip
+                hasChrome={false}
+                tooltip={<TooltipNote note="Toggle errors" />}
+                trigger="hover"
+              >
+                <StatusButton
+                  id="errors-found-filter"
+                  variant="ghost"
+                  padding={errorCount < 10 ? 'medium' : 'small'}
+                  status="negative"
+                  active={errorsActive}
+                  onClick={(e: SyntheticEvent) => {
+                    e.stopPropagation();
+                    setErrorsActive(!errorsActive);
+                  }}
+                  aria-label="Toggle errors"
+                >
+                  {errorCount < 100 ? errorCount : '99+'}
+                </StatusButton>
+              </WithTooltip>
+            )}
+            {warningCount > 0 && (
+              <WithTooltip
+                hasChrome={false}
+                tooltip={<TooltipNote note="Toggle warnings" />}
+                trigger="hover"
+              >
+                <StatusButton
+                  id="warnings-found-filter"
+                  variant="ghost"
+                  padding={warningCount < 10 ? 'medium' : 'small'}
+                  status="warning"
+                  active={warningsActive}
+                  onClick={(e: SyntheticEvent) => {
+                    e.stopPropagation();
+                    setWarningsActive(!warningsActive);
+                  }}
+                  aria-label="Toggle warnings"
+                >
+                  {warningCount < 100 ? warningCount : '99+'}
+                </StatusButton>
+              </WithTooltip>
+            )}
+          </Filters>
+        </Bar>
+      </Card>
+    </Outline>
+  );
+};
diff --git a/code/core/src/manager/components/sidebar/Tree.stories.tsx b/code/core/src/manager/components/sidebar/Tree.stories.tsx
index aed8dbd4648c..baadd2e60fec 100644
--- a/code/core/src/manager/components/sidebar/Tree.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Tree.stories.tsx
@@ -2,9 +2,9 @@
 import React, { useState } from 'react';
 
 import type { Meta, StoryObj } from '@storybook/react';
-import { expect, within } from '@storybook/test';
+import { expect, fn, userEvent, within } from '@storybook/test';
 
-import type { ComponentEntry, IndexHash } from '@storybook/core/manager-api';
+import { type ComponentEntry, type IndexHash, ManagerContext } from '@storybook/core/manager-api';
 
 import { action } from '@storybook/addon-actions';
 
@@ -12,6 +12,55 @@ import { DEFAULT_REF_ID } from './Sidebar';
 import { Tree } from './Tree';
 import { index } from './mockdata.large';
 
+const managerContext: any = {
+  state: {
+    docsOptions: {
+      defaultName: 'Docs',
+      autodocs: 'tag',
+      docsMode: false,
+    },
+    testProviders: {
+      'component-tests': {
+        type: 'experimental_TEST_PROVIDER',
+        id: 'component-tests',
+        render: () => 'Component tests',
+        sidebarContextMenu: () => <div>TEST_PROVIDER_CONTEXT_CONTENT</div>,
+        runnable: true,
+        watchable: true,
+      },
+      'visual-tests': {
+        type: 'experimental_TEST_PROVIDER',
+        id: 'visual-tests',
+        render: () => 'Visual tests',
+        sidebarContextMenu: () => null,
+        runnable: true,
+      },
+    },
+  },
+  api: {
+    on: fn().mockName('api::on'),
+    off: fn().mockName('api::off'),
+    emit: fn().mockName('api::emit'),
+    getElements: fn(() => ({
+      'component-tests': {
+        type: 'experimental_TEST_PROVIDER',
+        id: 'component-tests',
+        render: () => 'Component tests',
+        sidebarContextMenu: () => <div>TEST_PROVIDER_CONTEXT_CONTENT</div>,
+        runnable: true,
+        watchable: true,
+      },
+      'visual-tests': {
+        type: 'experimental_TEST_PROVIDER',
+        id: 'visual-tests',
+        render: () => 'Visual tests',
+        sidebarContextMenu: () => null,
+        runnable: true,
+      },
+    })),
+  },
+};
+
 const meta = {
   component: Tree,
   title: 'Sidebar/Tree',
@@ -35,6 +84,11 @@ const meta = {
     },
     chromatic: { viewports: [380] },
   },
+  decorators: [
+    (storyFn) => (
+      <ManagerContext.Provider value={managerContext}>{storyFn()}</ManagerContext.Provider>
+    ),
+  ],
 } as Meta<typeof Tree>;
 
 export default meta;
@@ -208,7 +262,21 @@ export const DocsOnlySingleStoryComponents = {
 export const SkipToCanvasLinkFocused: Story = {
   ...DocsOnlySingleStoryComponents,
   parameters: {
-    chromatic: { disable: true },
+    chromatic: { viewports: [1280] },
+    viewport: {
+      options: {
+        desktop: {
+          name: 'Desktop',
+          styles: {
+            width: '100%',
+            height: '100%',
+          },
+        },
+      },
+    },
+  },
+  globals: {
+    viewport: { value: 'desktop' },
   },
   play: async ({ canvasElement }) => {
     const screen = await within(canvasElement);
@@ -219,3 +287,41 @@ export const SkipToCanvasLinkFocused: Story = {
     await expect(link).toBeVisible();
   },
 };
+
+// SkipToCanvas Link only shows on desktop widths
+export const WithContextContent: Story = {
+  ...DocsOnlySingleStoryComponents,
+  parameters: {
+    chromatic: { viewports: [1280] },
+    viewport: {
+      options: {
+        desktop: {
+          name: 'Desktop',
+          styles: {
+            width: '100%',
+            height: '100%',
+          },
+        },
+      },
+    },
+  },
+  globals: {
+    viewport: { value: 'desktop' },
+  },
+  play: async ({ canvasElement }) => {
+    const screen = await within(canvasElement);
+
+    const link = await screen.findByText('TooltipBuildList');
+    await userEvent.hover(link);
+
+    const contextButton = await screen.findByTestId('context-menu');
+    await userEvent.click(contextButton);
+
+    const body = await within(document.body);
+
+    const tooltip = await body.findByTestId('tooltip');
+
+    await expect(tooltip).toBeVisible();
+    expect(tooltip).toHaveTextContent('TEST_PROVIDER_CONTEXT_CONTENT');
+  },
+};
diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx
index 4f542d3140a7..cbfc1e330be7 100644
--- a/code/core/src/manager/components/sidebar/Tree.tsx
+++ b/code/core/src/manager/components/sidebar/Tree.tsx
@@ -1,8 +1,9 @@
-import type { ComponentProps, MutableRefObject } from 'react';
+import type { ComponentProps, FC, MutableRefObject } from 'react';
 import React, { useCallback, useMemo, useRef } from 'react';
 
-import { Button, IconButton, TooltipLinkList, WithTooltip } from '@storybook/core/components';
+import { Button, IconButton, ListItem } from '@storybook/core/components';
 import { styled, useTheme } from '@storybook/core/theming';
+import { type API_HashEntry, type API_StatusValue, type StoryId } from '@storybook/core/types';
 import {
   CollapseIcon as CollapseIconSvg,
   ExpandAltIcon,
@@ -11,9 +12,9 @@ import {
   StatusWarnIcon,
   SyncIcon,
 } from '@storybook/icons';
-import type { API_StatusValue, StoryId } from '@storybook/types';
 
 import { PRELOAD_ENTRIES } from '@storybook/core/core-events';
+import { useStorybookApi } from '@storybook/core/manager-api';
 import type {
   API,
   ComponentEntry,
@@ -22,10 +23,11 @@ import type {
   StoriesHash,
   StoryEntry,
 } from '@storybook/core/manager-api';
-import { useStorybookApi } from '@storybook/core/manager-api';
 
-import { transparentize } from 'polished';
+import { darken, lighten } from 'polished';
 
+import type { Link } from '../../../components/components/tooltip/TooltipLinkList';
+import { MEDIA_DESKTOP_BREAKPOINT } from '../../constants';
 import { getGroupStatus, getHighestStatus, statusMapping } from '../../utils/status';
 import {
   createId,
@@ -35,6 +37,7 @@ import {
   isStoryHoistable,
 } from '../../utils/tree';
 import { useLayout } from '../layout/LayoutProvider';
+import { useContextMenu } from './ContextMenu';
 import { IconSymbols, UseSymbol } from './IconSymbols';
 import { StatusButton } from './StatusButton';
 import { StatusContext, useStatusSummary } from './StatusContext';
@@ -44,6 +47,8 @@ import type { Highlight, Item } from './types';
 import type { ExpandAction, ExpandedState } from './useExpanded';
 import { useExpanded } from './useExpanded';
 
+export type ExcludesNull = <T>(x: T | null) => x is T;
+
 const Container = styled.div<{ hasOrphans: boolean }>((props) => ({
   marginTop: props.hasOrphans ? 20 : 0,
   marginBottom: 20,
@@ -62,7 +67,7 @@ const CollapseButton = styled.button(({ theme }) => ({
 
   '&:hover, &:focus': {
     outline: 'none',
-    background: transparentize(0.93, theme.color.secondary),
+    background: 'var(--tree-node-background-hover)',
   },
 }));
 
@@ -70,24 +75,51 @@ export const LeafNodeStyleWrapper = styled.div(({ theme }) => ({
   position: 'relative',
   display: 'flex',
   justifyContent: 'space-between',
-  alignItems: 'center',
+  alignItems: 'flex-start',
   color: theme.color.defaultText,
   background: 'transparent',
   minHeight: 28,
   borderRadius: 4,
+  overflow: 'hidden',
+  '--tree-node-background-hover': theme.background.content,
+
+  [MEDIA_DESKTOP_BREAKPOINT]: {
+    '--tree-node-background-hover': theme.background.app,
+  },
 
   '&:hover, &:focus': {
-    background: transparentize(0.93, theme.color.secondary),
+    '--tree-node-background-hover':
+      theme.base === 'dark'
+        ? darken(0.35, theme.color.secondary)
+        : lighten(0.45, theme.color.secondary),
+    background: 'var(--tree-node-background-hover)',
     outline: 'none',
   },
 
+  '& [data-displayed="off"]': {
+    visibility: 'hidden',
+  },
+
+  '&:hover [data-displayed="off"]': {
+    visibility: 'visible',
+  },
+
+  '& [data-displayed="on"] + *': {
+    visibility: 'hidden',
+  },
+
+  '&:hover [data-displayed="off"] + *': {
+    visibility: 'hidden',
+  },
+
   '&[data-selected="true"]': {
     color: theme.color.lightest,
     background: theme.color.secondary,
     fontWeight: theme.typography.weight.bold,
 
     '&&:hover, &&:focus': {
-      background: theme.color.secondary,
+      '--tree-node-background-hover': theme.color.secondary,
+      background: 'var(--tree-node-background-hover)',
     },
     svg: { color: theme.color.lightest },
   },
@@ -133,8 +165,43 @@ interface NodeProps {
   status: State['status'][keyof State['status']];
   groupStatus: Record<StoryId, API_StatusValue>;
   api: API;
+  collapsedData: Record<string, API_HashEntry>;
 }
 
+const SuccessStatusIcon: FC<ComponentProps<typeof StatusPassIcon>> = (props) => {
+  const theme = useTheme();
+  return <StatusPassIcon {...props} color={theme.color.positive} />;
+};
+
+const ErrorStatusIcon: FC<ComponentProps<typeof StatusFailIcon>> = (props) => {
+  const theme = useTheme();
+  return <StatusFailIcon {...props} color={theme.color.negative} />;
+};
+
+const WarnStatusIcon: FC<ComponentProps<typeof StatusWarnIcon>> = (props) => {
+  const theme = useTheme();
+  return <StatusWarnIcon {...props} color={theme.color.warning} />;
+};
+
+const PendingStatusIcon: FC<ComponentProps<typeof SyncIcon>> = (props) => {
+  const theme = useTheme();
+  return <SyncIcon {...props} size={12} color={theme.color.defaultText} />;
+};
+
+const StatusIconMap = {
+  success: <SuccessStatusIcon />,
+  error: <ErrorStatusIcon />,
+  warn: <WarnStatusIcon />,
+  pending: <PendingStatusIcon />,
+  unknown: null,
+};
+
+export const ContextMenu = {
+  ListItem,
+};
+
+const statusOrder: API_StatusValue[] = ['success', 'error', 'warn', 'pending', 'unknown'];
+
 const Node = React.memo<NodeProps>(function Node({
   item,
   status,
@@ -152,22 +219,83 @@ const Node = React.memo<NodeProps>(function Node({
   api,
 }) {
   const { isDesktop, isMobile, setMobileMenuOpen } = useLayout();
-  const theme = useTheme();
   const { counts, statuses } = useStatusSummary(item);
 
   if (!isDisplayed) {
     return null;
   }
 
+  const statusLinks = useMemo<Link[]>(() => {
+    if (item.type === 'story' || item.type === 'docs') {
+      return Object.entries(status || {})
+        .filter(([, value]) => value.sidebarContextMenu !== false)
+        .sort((a, b) => statusOrder.indexOf(a[1].status) - statusOrder.indexOf(b[1].status))
+        .map(([addonId, value]) => ({
+          id: addonId,
+          title: value.title,
+          description: value.description,
+          'aria-label': `Test status for ${value.title}: ${value.status}`,
+          icon: StatusIconMap[value.status],
+          onClick: () => {
+            onSelectStoryId(item.id);
+            value.onClick?.();
+          },
+        }));
+    }
+
+    if (item.type === 'component' || item.type === 'group') {
+      const links: Link[] = [];
+      if (counts.error) {
+        links.push({
+          id: 'errors',
+          icon: StatusIconMap.error,
+          title: `${counts.error} ${counts.error === 1 ? 'story' : 'stories'} with errors`,
+          onClick: () => {
+            const [firstStoryId, [firstError]] = Object.entries(statuses.error)[0];
+            onSelectStoryId(firstStoryId);
+            firstError.onClick?.();
+          },
+        });
+      }
+      if (counts.warn) {
+        links.push({
+          id: 'warnings',
+          icon: StatusIconMap.warn,
+          title: `${counts.warn} ${counts.warn === 1 ? 'story' : 'stories'} with warnings`,
+          onClick: () => {
+            const [firstStoryId, [firstWarning]] = Object.entries(statuses.warn)[0];
+            onSelectStoryId(firstStoryId);
+            firstWarning.onClick?.();
+          },
+        });
+      }
+      return links;
+    }
+
+    return [];
+  }, [
+    counts.error,
+    counts.warn,
+    item.id,
+    item.type,
+    onSelectStoryId,
+    status,
+    statuses.error,
+    statuses.warn,
+  ]);
+
   const id = createId(item.id, refId);
+  const contextMenu =
+    refId === 'storybook_internal'
+      ? useContextMenu(item, statusLinks, api)
+      : { node: null, onMouseEnter: () => {} };
+
   if (item.type === 'story' || item.type === 'docs') {
     const LeafNode = item.type === 'docs' ? DocumentNode : StoryNode;
 
     const statusValue = getHighestStatus(Object.values(status || {}).map((s) => s.status));
     const [icon, textColor] = statusMapping[statusValue];
 
-    const statusOrder: API_StatusValue[] = ['success', 'error', 'warn', 'pending', 'unknown'];
-
     return (
       <LeafNodeStyleWrapper
         key={id}
@@ -178,6 +306,7 @@ const Node = React.memo<NodeProps>(function Node({
         data-parent-id={item.parent}
         data-nodetype={item.type === 'docs' ? 'document' : 'story'}
         data-highlightable={isDisplayed}
+        onMouseEnter={contextMenu.onMouseEnter}
       >
         <LeafNode
           // @ts-expect-error (non strict)
@@ -203,40 +332,17 @@ const Node = React.memo<NodeProps>(function Node({
             <a href="#storybook-preview-wrapper">Skip to canvas</a>
           </SkipToContentLink>
         )}
+        {contextMenu.node}
         {icon ? (
-          <WithTooltip
-            closeOnOutsideClick
-            onClick={(event) => event.stopPropagation()}
-            placement="bottom"
-            tooltip={() => (
-              <TooltipLinkList
-                links={Object.entries(status || {})
-                  .sort(
-                    (a, b) => statusOrder.indexOf(a[1].status) - statusOrder.indexOf(b[1].status)
-                  )
-                  .map(([addonId, value]) => ({
-                    id: addonId,
-                    title: value.title,
-                    description: value.description,
-                    icon: {
-                      success: <StatusPassIcon color={theme.color.positive} />,
-                      error: <StatusFailIcon color={theme.color.negative} />,
-                      warn: <StatusWarnIcon color={theme.color.warning} />,
-                      pending: <SyncIcon size={12} color={theme.color.defaultText} />,
-                      unknown: null,
-                    }[value.status],
-                    onClick: () => {
-                      onSelectStoryId(item.id);
-                      value.onClick?.();
-                    },
-                  }))}
-              />
-            )}
+          <StatusButton
+            aria-label={`Test status: ${statusValue}`}
+            role="status"
+            type="button"
+            status={statusValue}
+            selectedItem={isSelected}
           >
-            <StatusButton type="button" status={statusValue} selectedItem={isSelected}>
-              {icon}
-            </StatusButton>
-          </WithTooltip>
+            {icon}
+          </StatusButton>
         ) : null}
       </LeafNodeStyleWrapper>
     );
@@ -288,39 +394,6 @@ const Node = React.memo<NodeProps>(function Node({
     const color = itemStatus ? statusMapping[itemStatus][1] : null;
     const BranchNode = item.type === 'component' ? ComponentNode : GroupNode;
 
-    const createLinks: (onHide: () => void) => ComponentProps<typeof TooltipLinkList>['links'] = (
-      onHide
-    ) => {
-      const links = [];
-      if (counts.error) {
-        links.push({
-          id: 'errors',
-          icon: <StatusFailIcon color={theme.color.negative} />,
-          title: `${counts.error} ${counts.error === 1 ? 'story' : 'stories'} with errors`,
-          onClick: () => {
-            const [firstStoryId, [firstError]] = Object.entries(statuses.error)[0];
-            onSelectStoryId(firstStoryId);
-            firstError.onClick?.();
-            onHide();
-          },
-        });
-      }
-      if (counts.warn) {
-        links.push({
-          id: 'warnings',
-          icon: <StatusWarnIcon color={theme.color.gold} />,
-          title: `${counts.warn} ${counts.warn === 1 ? 'story' : 'stories'} with warnings`,
-          onClick: () => {
-            const [firstStoryId, [firstWarning]] = Object.entries(statuses.warn)[0];
-            onSelectStoryId(firstStoryId);
-            firstWarning.onClick?.();
-            onHide();
-          },
-        });
-      }
-      return links;
-    };
-
     return (
       <LeafNodeStyleWrapper
         key={id}
@@ -328,8 +401,9 @@ const Node = React.memo<NodeProps>(function Node({
         data-ref-id={refId}
         data-item-id={item.id}
         data-parent-id={item.parent}
-        data-nodetype={item.type === 'component' ? 'component' : 'group'}
+        data-nodetype={item.type}
         data-highlightable={isDisplayed}
+        onMouseEnter={contextMenu.onMouseEnter}
       >
         <BranchNode
           id={id}
@@ -360,19 +434,13 @@ const Node = React.memo<NodeProps>(function Node({
           {(item.renderLabel as (i: typeof item, api: API) => React.ReactNode)?.(item, api) ||
             item.name}
         </BranchNode>
+        {contextMenu.node}
         {['error', 'warn'].includes(itemStatus) && (
-          <WithTooltip
-            closeOnOutsideClick
-            onClick={(event) => event.stopPropagation()}
-            placement="bottom"
-            tooltip={({ onHide }) => <TooltipLinkList links={createLinks(onHide)} />}
-          >
-            <StatusButton type="button" status={itemStatus}>
-              <svg key="icon" viewBox="0 0 6 6" width="6" height="6" type="dot">
-                <UseSymbol type="dot" />
-              </svg>
-            </StatusButton>
-          </WithTooltip>
+          <StatusButton type="button" status={itemStatus}>
+            <svg key="icon" viewBox="0 0 6 6" width="6" height="6" type="dot">
+              <UseSymbol type="dot" />
+            </svg>
+          </StatusButton>
         )}
       </LeafNodeStyleWrapper>
     );
@@ -560,9 +628,11 @@ export const Tree = React.memo<{
         return (
           // @ts-expect-error (TODO)
           <Root
+            api={api}
             key={id}
             item={item}
             refId={refId}
+            collapsedData={collapsedData}
             isOrphan={false}
             isDisplayed
             isSelected={selectedStoryId === itemId}
@@ -577,9 +647,14 @@ export const Tree = React.memo<{
 
       const isDisplayed = !item.parent || ancestry[itemId].every((a: string) => expanded[a]);
 
+      if (isDisplayed === false) {
+        return null;
+      }
+
       return (
         <Node
           api={api}
+          collapsedData={collapsedData}
           key={id}
           item={item}
           // @ts-expect-error (non strict)
diff --git a/code/core/src/manager/components/sidebar/__tests__/Sidebar.test.tsx b/code/core/src/manager/components/sidebar/__tests__/Sidebar.test.tsx
index adc05cb07a55..0840be5fcd71 100644
--- a/code/core/src/manager/components/sidebar/__tests__/Sidebar.test.tsx
+++ b/code/core/src/manager/components/sidebar/__tests__/Sidebar.test.tsx
@@ -50,6 +50,7 @@ const generateStories = ({ title, refId }: { title: string; refId?: string }): A
       name: root,
       children: [componentId],
       startCollapsed: false,
+      tags: [],
     },
     {
       type: 'component',
@@ -59,6 +60,7 @@ const generateStories = ({ title, refId }: { title: string; refId?: string }): A
       name: componentName,
       children: [docsId],
       parent: rootId,
+      tags: [],
     },
     // @ts-expect-error the missing fields are deprecated and replaced by the type prop
     {
diff --git a/code/core/src/manager/components/sidebar/useExpanded.ts b/code/core/src/manager/components/sidebar/useExpanded.ts
index 5f9a479b3308..e216c2b2e0cc 100644
--- a/code/core/src/manager/components/sidebar/useExpanded.ts
+++ b/code/core/src/manager/components/sidebar/useExpanded.ts
@@ -7,7 +7,7 @@ import { STORIES_COLLAPSE_ALL, STORIES_EXPAND_ALL } from '@storybook/core/core-e
 import type { StoriesHash } from '@storybook/core/manager-api';
 import { useStorybookApi } from '@storybook/core/manager-api';
 
-import throttle from 'lodash/throttle.js';
+import { throttle } from 'es-toolkit';
 
 import { matchesKeyCode, matchesModifiers } from '../../keybinding';
 import { getAncestorIds, getDescendantIds, isAncestor, scrollIntoView } from '../../utils/tree';
diff --git a/code/core/src/manager/components/sidebar/useHighlighted.ts b/code/core/src/manager/components/sidebar/useHighlighted.ts
index 52184652737f..37701c7b1eec 100644
--- a/code/core/src/manager/components/sidebar/useHighlighted.ts
+++ b/code/core/src/manager/components/sidebar/useHighlighted.ts
@@ -1,4 +1,4 @@
-import type { Dispatch, MutableRefObject, SetStateAction } from 'react';
+import type { Dispatch, MutableRefObject, RefObject, SetStateAction } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { global } from '@storybook/global';
@@ -8,26 +8,43 @@ import { useStorybookApi } from '@storybook/core/manager-api';
 
 import { matchesKeyCode, matchesModifiers } from '../../keybinding';
 import { cycle, isAncestor, scrollIntoView } from '../../utils/tree';
-import type { CombinedDataset, Highlight, Selection } from './types';
+import type { Highlight, Selection } from './types';
 
 const { document, window: globalWindow } = global;
 
 export interface HighlightedProps {
-  containerRef: MutableRefObject<HTMLElement>;
+  containerRef: RefObject<HTMLElement | null>;
   isLoading: boolean;
   isBrowsing: boolean;
-  dataset: CombinedDataset;
   selected: Selection;
 }
 
 const fromSelection = (selection: Selection): Highlight =>
   selection ? { itemId: selection.storyId, refId: selection.refId } : null;
 
+const scrollToSelector = (
+  selector: string,
+  options: {
+    containerRef?: RefObject<Element | null>;
+    center?: boolean;
+    attempts?: number;
+    delay?: number;
+  } = {},
+  _attempt = 1
+) => {
+  const { containerRef, center = false, attempts = 3, delay = 500 } = options;
+  const element = (containerRef ? containerRef.current : document)?.querySelector(selector);
+  if (element) {
+    scrollIntoView(element, center);
+  } else if (_attempt <= attempts) {
+    setTimeout(scrollToSelector, delay, selector, options, _attempt + 1);
+  }
+};
+
 export const useHighlighted = ({
   containerRef,
   isLoading,
   isBrowsing,
-  dataset,
   selected,
 }: HighlightedProps): [
   Highlight,
@@ -67,16 +84,12 @@ export const useHighlighted = ({
     const highlight = fromSelection(selected);
     updateHighlighted(highlight);
     if (highlight) {
-      const { itemId, refId } = highlight;
-      setTimeout(() => {
-        scrollIntoView(
-          // @ts-expect-error (non strict)
-          containerRef.current?.querySelector(`[data-item-id="${itemId}"][data-ref-id="${refId}"]`),
-          true // make sure it's clearly visible by centering it
-        );
-      }, 0);
+      scrollToSelector(`[data-item-id="${highlight.itemId}"][data-ref-id="${highlight.refId}"]`, {
+        containerRef,
+        center: true,
+      });
     }
-  }, [dataset, highlightedRef, containerRef, selected]);
+  }, [containerRef, selected, updateHighlighted]);
 
   // Highlight nodes up/down the tree using arrow keys
   useEffect(() => {
@@ -115,7 +128,7 @@ export const useHighlighted = ({
         }
 
         const highlightable = Array.from(
-          containerRef.current.querySelectorAll('[data-highlightable=true]')
+          containerRef.current?.querySelectorAll('[data-highlightable=true]') || []
         );
         const currentIndex = highlightable.findIndex(
           (el) =>
diff --git a/code/core/src/manager/components/sidebar/useLastViewed.ts b/code/core/src/manager/components/sidebar/useLastViewed.ts
index da53f6645ba3..48aa8e10cf12 100644
--- a/code/core/src/manager/components/sidebar/useLastViewed.ts
+++ b/code/core/src/manager/components/sidebar/useLastViewed.ts
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 
-import debounce from 'lodash/debounce.js';
+import { debounce } from 'es-toolkit/compat';
 import store from 'store2';
 
 import type { Selection, StoryRef } from './types';
diff --git a/code/core/src/manager/components/upgrade/UpgradeBlock.tsx b/code/core/src/manager/components/upgrade/UpgradeBlock.tsx
index 207b9fcef6b1..f7371abc2e63 100644
--- a/code/core/src/manager/components/upgrade/UpgradeBlock.tsx
+++ b/code/core/src/manager/components/upgrade/UpgradeBlock.tsx
@@ -14,7 +14,7 @@ interface UpgradeBlockProps {
 
 export const UpgradeBlock: FC<UpgradeBlockProps> = ({ onNavigateToWhatsNew }) => {
   const api = useStorybookApi();
-  const [activeTab, setActiveTab] = useState<'npm' | 'pnpm'>('npm');
+  const [activeTab, setActiveTab] = useState<'npm' | 'yarn' | 'pnpm'>('npm');
 
   return (
     <Container>
@@ -24,12 +24,17 @@ export const UpgradeBlock: FC<UpgradeBlockProps> = ({ onNavigateToWhatsNew }) =>
         <ButtonTab active={activeTab === 'npm'} onClick={() => setActiveTab('npm')}>
           npm
         </ButtonTab>
+        <ButtonTab active={activeTab === 'yarn'} onClick={() => setActiveTab('yarn')}>
+          yarn
+        </ButtonTab>
         <ButtonTab active={activeTab === 'pnpm'} onClick={() => setActiveTab('pnpm')}>
           pnpm
         </ButtonTab>
       </Tabs>
       <Code>
-        {activeTab === 'npm' ? 'npx storybook@latest upgrade' : 'pnpm dlx storybook@latest upgrade'}
+        {activeTab === 'npm'
+          ? 'npx storybook@latest upgrade'
+          : `${activeTab} dlx storybook@latest upgrade`}
       </Code>
       {onNavigateToWhatsNew && (
         // eslint-disable-next-line jsx-a11y/anchor-is-valid
diff --git a/code/core/src/manager/container/Menu.tsx b/code/core/src/manager/container/Menu.tsx
index b2b92ef17ad1..fdf21a2ab9a1 100644
--- a/code/core/src/manager/container/Menu.tsx
+++ b/code/core/src/manager/container/Menu.tsx
@@ -9,6 +9,8 @@ import { STORIES_COLLAPSE_ALL } from '@storybook/core/core-events';
 import type { API, State } from '@storybook/core/manager-api';
 import { shortcutToHumanString } from '@storybook/core/manager-api';
 
+import type { Link } from '../../components/components/tooltip/TooltipLinkList';
+
 const focusableUIElements = {
   storySearchField: 'storybook-explorer-searchfield',
   storyListMenu: 'storybook-explorer-menu',
@@ -58,8 +60,7 @@ export const useMenu = (
   isPanelShown: boolean,
   isNavShown: boolean,
   enableShortcuts: boolean
-) => {
-  const theme = useTheme();
+): Link[][] => {
   const shortcutKeys = api.getShortcutKeys();
 
   const about = useMemo(
@@ -105,11 +106,8 @@ export const useMenu = (
       title: 'Keyboard shortcuts',
       onClick: () => api.changeSettingsTab('shortcuts'),
       right: enableShortcuts ? <Shortcut keys={shortcutKeys.shortcutsPage} /> : null,
-      style: {
-        borderBottom: `4px solid ${theme.appBorderColor}`,
-      },
     }),
-    [api, enableShortcuts, shortcutKeys.shortcutsPage, theme.appBorderColor]
+    [api, enableShortcuts, shortcutKeys.shortcutsPage]
   );
 
   const sidebarToggle = useMemo(
@@ -244,24 +242,29 @@ export const useMenu = (
   }, [api, enableShortcuts, shortcutKeys]);
 
   return useMemo(
-    () => [
-      about,
-      ...(state.whatsNewData?.status === 'SUCCESS' ? [whatsNew] : []),
-      documentation,
-      shortcuts,
-      sidebarToggle,
-      toolbarToogle,
-      addonsToggle,
-      addonsOrientationToggle,
-      fullscreenToggle,
-      searchToggle,
-      up,
-      down,
-      prev,
-      next,
-      collapse,
-      ...getAddonsShortcuts(),
-    ],
+    () =>
+      [
+        [
+          about,
+          ...(state.whatsNewData?.status === 'SUCCESS' ? [whatsNew] : []),
+          documentation,
+          shortcuts,
+        ],
+        [
+          sidebarToggle,
+          toolbarToogle,
+          addonsToggle,
+          addonsOrientationToggle,
+          fullscreenToggle,
+          searchToggle,
+          up,
+          down,
+          prev,
+          next,
+          collapse,
+        ],
+        getAddonsShortcuts(),
+      ] satisfies Link[][],
     [
       about,
       state,
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/manager/container/Sidebar.tsx b/code/core/src/manager/container/Sidebar.tsx
index bd405706068a..723d9989ac10 100755
--- a/code/core/src/manager/container/Sidebar.tsx
+++ b/code/core/src/manager/container/Sidebar.tsx
@@ -23,7 +23,11 @@ const Sidebar = React.memo(function Sideber({ onMenuClick }: SidebarProps) {
       storyId,
       refId,
       layout: { showToolbar },
-      index,
+      // FIXME: This is the actual `index.json` index where the `index` below
+      // is actually the stories hash. We should fix this up and make it consistent.
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      internal_index,
+      filteredIndex: index,
       status,
       indexError,
       previewInitialized,
@@ -50,6 +54,7 @@ const Sidebar = React.memo(function Sideber({ onMenuClick }: SidebarProps) {
     return {
       title: name,
       url,
+      indexJson: internal_index,
       index,
       indexError,
       status,
diff --git a/code/core/src/manager/globals/exports.ts b/code/core/src/manager/globals/exports.ts
index 2596f0f01602..e354ce120ffb 100644
--- a/code/core/src/manager/globals/exports.ts
+++ b/code/core/src/manager/globals/exports.ts
@@ -214,7 +214,9 @@ export default {
     'PhotoIcon',
     'PinAltIcon',
     'PinIcon',
+    'PlayAllHollowIcon',
     'PlayBackIcon',
+    'PlayHollowIcon',
     'PlayIcon',
     'PlayNextIcon',
     'PlusIcon',
@@ -235,6 +237,7 @@ export default {
     'RequestChangeIcon',
     'RewindIcon',
     'RulerIcon',
+    'SaveIcon',
     'SearchIcon',
     'ShareAltIcon',
     'ShareIcon',
@@ -252,6 +255,7 @@ export default {
     'StatusPassIcon',
     'StatusWarnIcon',
     'StickerIcon',
+    'StopAltHollowIcon',
     'StopAltIcon',
     'StopIcon',
     'StorybookIcon',
@@ -330,6 +334,7 @@ export default {
     'P',
     'Placeholder',
     'Pre',
+    'ProgressSpinner',
     'ResetWrapper',
     'ScrollArea',
     'Separator',
@@ -400,6 +405,7 @@ export default {
     'P',
     'Placeholder',
     'Pre',
+    'ProgressSpinner',
     'ResetWrapper',
     'ScrollArea',
     'Separator',
@@ -470,6 +476,7 @@ export default {
     'P',
     'Placeholder',
     'Pre',
+    'ProgressSpinner',
     'ResetWrapper',
     'ScrollArea',
     'Separator',
@@ -618,7 +625,6 @@ export default {
     'getMatch',
     'parsePath',
     'queryFromLocation',
-    'queryFromString',
     'stringifyQuery',
     'useNavigate',
   ],
@@ -635,7 +641,6 @@ export default {
     'getMatch',
     'parsePath',
     'queryFromLocation',
-    'queryFromString',
     'stringifyQuery',
     'useNavigate',
   ],
@@ -652,7 +657,6 @@ export default {
     'getMatch',
     'parsePath',
     'queryFromLocation',
-    'queryFromString',
     'stringifyQuery',
     'useNavigate',
   ],
@@ -797,6 +801,7 @@ export default {
     'STORY_ARGS_UPDATED',
     'STORY_CHANGED',
     'STORY_ERRORED',
+    'STORY_FINISHED',
     'STORY_INDEX_INVALIDATED',
     'STORY_MISSING',
     'STORY_PREPARED',
@@ -806,6 +811,14 @@ export default {
     'STORY_THREW_EXCEPTION',
     'STORY_UNCHANGED',
     'TELEMETRY_ERROR',
+    'TESTING_MODULE_CANCEL_TEST_RUN_REQUEST',
+    'TESTING_MODULE_CANCEL_TEST_RUN_RESPONSE',
+    'TESTING_MODULE_CONFIG_CHANGE',
+    'TESTING_MODULE_CRASH_REPORT',
+    'TESTING_MODULE_PROGRESS_REPORT',
+    'TESTING_MODULE_RUN_ALL_REQUEST',
+    'TESTING_MODULE_RUN_REQUEST',
+    'TESTING_MODULE_WATCH_MODE_REQUEST',
     'TOGGLE_WHATS_NEW_NOTIFICATIONS',
     'UNHANDLED_ERRORS_WHILE_PLAYING',
     'UPDATE_GLOBALS',
@@ -854,6 +867,7 @@ export default {
     'STORY_ARGS_UPDATED',
     'STORY_CHANGED',
     'STORY_ERRORED',
+    'STORY_FINISHED',
     'STORY_INDEX_INVALIDATED',
     'STORY_MISSING',
     'STORY_PREPARED',
@@ -863,6 +877,14 @@ export default {
     'STORY_THREW_EXCEPTION',
     'STORY_UNCHANGED',
     'TELEMETRY_ERROR',
+    'TESTING_MODULE_CANCEL_TEST_RUN_REQUEST',
+    'TESTING_MODULE_CANCEL_TEST_RUN_RESPONSE',
+    'TESTING_MODULE_CONFIG_CHANGE',
+    'TESTING_MODULE_CRASH_REPORT',
+    'TESTING_MODULE_PROGRESS_REPORT',
+    'TESTING_MODULE_RUN_ALL_REQUEST',
+    'TESTING_MODULE_RUN_REQUEST',
+    'TESTING_MODULE_WATCH_MODE_REQUEST',
     'TOGGLE_WHATS_NEW_NOTIFICATIONS',
     'UNHANDLED_ERRORS_WHILE_PLAYING',
     'UPDATE_GLOBALS',
@@ -911,6 +933,7 @@ export default {
     'STORY_ARGS_UPDATED',
     'STORY_CHANGED',
     'STORY_ERRORED',
+    'STORY_FINISHED',
     'STORY_INDEX_INVALIDATED',
     'STORY_MISSING',
     'STORY_PREPARED',
@@ -920,6 +943,14 @@ export default {
     'STORY_THREW_EXCEPTION',
     'STORY_UNCHANGED',
     'TELEMETRY_ERROR',
+    'TESTING_MODULE_CANCEL_TEST_RUN_REQUEST',
+    'TESTING_MODULE_CANCEL_TEST_RUN_RESPONSE',
+    'TESTING_MODULE_CONFIG_CHANGE',
+    'TESTING_MODULE_CRASH_REPORT',
+    'TESTING_MODULE_PROGRESS_REPORT',
+    'TESTING_MODULE_RUN_ALL_REQUEST',
+    'TESTING_MODULE_RUN_REQUEST',
+    'TESTING_MODULE_WATCH_MODE_REQUEST',
     'TOGGLE_WHATS_NEW_NOTIFICATIONS',
     'UNHANDLED_ERRORS_WHILE_PLAYING',
     'UPDATE_GLOBALS',
diff --git a/code/core/src/manager/settings/defaultShortcuts.tsx b/code/core/src/manager/settings/defaultShortcuts.tsx
index 525d85decb71..ed8ad0fd9135 100644
--- a/code/core/src/manager/settings/defaultShortcuts.tsx
+++ b/code/core/src/manager/settings/defaultShortcuts.tsx
@@ -1,4 +1,4 @@
-import type { State } from '../../manager-api/root';
+import type { State } from '@storybook/core/manager-api';
 
 export const defaultShortcuts: State['shortcuts'] = {
   fullScreen: ['F'],
diff --git a/code/core/src/manager/utils/tree.ts b/code/core/src/manager/utils/tree.ts
index 3002eb97a77f..dfe6dfb4cf24 100644
--- a/code/core/src/manager/utils/tree.ts
+++ b/code/core/src/manager/utils/tree.ts
@@ -85,10 +85,14 @@ export const scrollIntoView = (element: Element, center = false) => {
     return;
   }
   const { top, bottom } = element.getBoundingClientRect();
-  const isInView =
-    top >= 0 && bottom <= (globalWindow.innerHeight || document.documentElement.clientHeight);
-
-  if (!isInView) {
+  if (!top || !bottom) {
+    return;
+  }
+  const bottomOffset =
+    document?.querySelector('#sidebar-bottom-wrapper')?.getBoundingClientRect().top ||
+    globalWindow.innerHeight ||
+    document.documentElement.clientHeight;
+  if (bottom > bottomOffset) {
     element.scrollIntoView({ block: center ? 'center' : 'nearest' });
   }
 };
diff --git a/code/core/src/node-logger/index.ts b/code/core/src/node-logger/index.ts
index 1a8abc242d25..7235ceff3751 100644
--- a/code/core/src/node-logger/index.ts
+++ b/code/core/src/node-logger/index.ts
@@ -1,5 +1,4 @@
 /// <reference types="node" />
-import chalk from 'chalk';
 import npmLog from 'npmlog';
 import prettyTime from 'pretty-hrtime';
 
@@ -7,14 +6,34 @@ import prettyTime from 'pretty-hrtime';
 // there are issues with the build: https://github.com/storybookjs/storybook/issues/14621
 npmLog.stream = process.stdout;
 
+function hex(hexColor: string) {
+  // Ensure the hex color is 6 characters long and starts with '#'
+  if (!/^#?[0-9A-Fa-f]{6}$/.test(hexColor)) {
+    throw new Error('Invalid hex color. It must be a 6-character hex code.');
+  }
+
+  // Remove the leading '#' if it exists
+  if (hexColor.startsWith('#')) {
+    hexColor = hexColor.slice(1);
+  }
+
+  // Convert hex to RGB
+  const r = parseInt(hexColor.slice(0, 2), 16);
+  const g = parseInt(hexColor.slice(2, 4), 16);
+  const b = parseInt(hexColor.slice(4, 6), 16);
+
+  // Return the ANSI escape sequence for the given RGB color
+  return (text: string) => `\x1b[38;2;${r};${g};${b}m${text}\x1b[39m`;
+}
+
 export const colors = {
-  pink: chalk.hex('F1618C'),
-  purple: chalk.hex('B57EE5'),
-  orange: chalk.hex('F3AD38'),
-  green: chalk.hex('A2E05E'),
-  blue: chalk.hex('6DABF5'),
-  red: chalk.hex('F16161'),
-  gray: chalk.gray,
+  pink: hex('#F1618C'),
+  purple: hex('#B57EE5'),
+  orange: hex('#F3AD38'),
+  green: hex('#A2E05E'),
+  blue: hex('#6DABF5'),
+  red: hex('#F16161'),
+  gray: hex('#B8C2CC'),
 };
 
 export const logger = {
@@ -40,7 +59,7 @@ export const logger = {
 
       console.log(
         msg
-          .replace(message.toString(), chalk.red(message.toString()))
+          .replace(message.toString(), colors.red(message.toString()))
           .replaceAll(process.cwd(), '.')
       );
     }
diff --git a/code/core/src/preview-api/Errors.stories.tsx b/code/core/src/preview-api/Errors.stories.tsx
index 2782999de392..dc70f7af4fe2 100644
--- a/code/core/src/preview-api/Errors.stories.tsx
+++ b/code/core/src/preview-api/Errors.stories.tsx
@@ -46,6 +46,8 @@ export default {
   args: {
     id: 'sb-errordisplay',
   },
+  // This story cannot be properly tested in portable stories as it depends on an element that only exists in Storybook's preview HTML
+  tags: ['!vitest'],
 };
 
 export const MyError = {
diff --git a/code/core/src/preview-api/index.ts b/code/core/src/preview-api/index.ts
index 0a61c7333ab3..d067acad89cc 100644
--- a/code/core/src/preview-api/index.ts
+++ b/code/core/src/preview-api/index.ts
@@ -60,6 +60,6 @@ export { createPlaywrightTest } from './modules/store/csf/portable-stories';
 export type { PropDescriptor } from './store';
 
 /** STORIES API */
-export { StoryStore } from './store';
+export { StoryStore, type Report, ReporterAPI } from './store';
 export { Preview, PreviewWeb, PreviewWithSelection, UrlStore, WebView } from './preview-web';
 export type { SelectionStore, View } from './preview-web';
diff --git a/code/core/src/preview-api/modules/preview-web/Preview.tsx b/code/core/src/preview-api/modules/preview-web/Preview.tsx
index 049fccf90901..e929d6749337 100644
--- a/code/core/src/preview-api/modules/preview-web/Preview.tsx
+++ b/code/core/src/preview-api/modules/preview-web/Preview.tsx
@@ -386,11 +386,6 @@ export class Preview<TRenderer extends Renderer> {
       throw new CalledPreviewMethodBeforeInitializationError({ methodName: 'onResetArgs' });
     }
 
-    // NOTE: we have to be careful here and avoid await-ing when updating a rendered's args.
-    // That's because below in `renderStoryToElement` we have also bound to this event and will
-    // render the story in the same tick.
-    // However, we can do that safely as the current story is available in `this.storyRenders`
-
     // NOTE: we have to be careful here and avoid await-ing when updating a rendered's args.
     // That's because below in `renderStoryToElement` we have also bound to this event and will
     // render the story in the same tick.
diff --git a/code/core/src/preview-api/modules/preview-web/PreviewWeb.mockdata.ts b/code/core/src/preview-api/modules/preview-web/PreviewWeb.mockdata.ts
index 6505922c842e..2ed2352ae4e7 100644
--- a/code/core/src/preview-api/modules/preview-web/PreviewWeb.mockdata.ts
+++ b/code/core/src/preview-api/modules/preview-web/PreviewWeb.mockdata.ts
@@ -12,8 +12,8 @@ import type {
 import {
   DOCS_RENDERED,
   STORY_ERRORED,
+  STORY_FINISHED,
   STORY_MISSING,
-  STORY_RENDERED,
   STORY_RENDER_PHASE_CHANGED,
   STORY_THREW_EXCEPTION,
 } from '@storybook/core/core-events';
@@ -204,11 +204,11 @@ export const waitForEvents = (
 // the async parts, so we need to listen for the "done" events
 export const waitForRender = () =>
   waitForEvents([
-    STORY_RENDERED,
     DOCS_RENDERED,
-    STORY_THREW_EXCEPTION,
+    STORY_FINISHED,
     STORY_ERRORED,
     STORY_MISSING,
+    STORY_THREW_EXCEPTION,
   ]);
 
 export const waitForRenderPhase = (phase: RenderPhase) => {
diff --git a/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts b/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts
index 7994173c2d07..57e3b0357a44 100644
--- a/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts
+++ b/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts
@@ -31,7 +31,7 @@ import {
   UPDATE_STORY_ARGS,
 } from '@storybook/core/core-events';
 
-import merge from 'lodash/merge.js';
+import { merge, toMerged } from 'es-toolkit';
 
 import { addons } from '../addons';
 import type { StoryStore } from '../store';
@@ -308,7 +308,7 @@ describe('PreviewWeb', () => {
         expect(mockChannel.emit).toHaveBeenCalledWith(STORY_MISSING, 'component-one--missing');
 
         mockChannel.emit.mockClear();
-        const newComponentOneExports = merge({}, componentOneExports, {
+        const newComponentOneExports = toMerged(componentOneExports, {
           d: { args: { foo: 'd' }, play: vi.fn() },
         });
         const newImportFn = vi.fn(async (path) => {
@@ -362,7 +362,7 @@ describe('PreviewWeb', () => {
           });
           await waitForSetCurrentStory();
 
-          const newComponentOneExports = merge({}, componentOneExports, {
+          const newComponentOneExports = toMerged(componentOneExports, {
             d: { args: { foo: 'd' }, play: vi.fn() },
           });
           const newImportFn = vi.fn(async (path) => {
@@ -2927,7 +2927,7 @@ describe('PreviewWeb', () => {
     });
 
     describe('when the current story changes', () => {
-      const newComponentOneExports = merge({}, componentOneExports, {
+      const newComponentOneExports = toMerged(componentOneExports, {
         a: { args: { foo: 'edited' } },
       });
       const newImportFn = vi.fn(async (path) => {
@@ -3282,7 +3282,7 @@ describe('PreviewWeb', () => {
       afterEach(() => {
         vi.useRealTimers();
       });
-      const newComponentOneExports = merge({}, componentOneExports, {
+      const newComponentOneExports = toMerged(componentOneExports, {
         a: { args: { bar: 'edited' }, argTypes: { bar: { type: { name: 'string' } } } },
       });
       const newImportFn = vi.fn(async (path) => {
diff --git a/code/core/src/preview-api/modules/preview-web/SelectionStore.ts b/code/core/src/preview-api/modules/preview-web/SelectionStore.ts
index 439fb7a219b1..7d56f5bf586c 100644
--- a/code/core/src/preview-api/modules/preview-web/SelectionStore.ts
+++ b/code/core/src/preview-api/modules/preview-web/SelectionStore.ts
@@ -21,5 +21,5 @@ export interface SelectionStore {
 
   setSelection(selection: Selection): void;
 
-  setQueryParams(queryParams: qs.ParsedQs): void;
+  setQueryParams(queryParams: Record<PropertyKey, unknown>): void;
 }
diff --git a/code/core/src/preview-api/modules/preview-web/UrlStore.test.ts b/code/core/src/preview-api/modules/preview-web/UrlStore.test.ts
index 09c6e8925743..3ee48adc2222 100644
--- a/code/core/src/preview-api/modules/preview-web/UrlStore.test.ts
+++ b/code/core/src/preview-api/modules/preview-web/UrlStore.test.ts
@@ -40,7 +40,7 @@ describe('UrlStore', () => {
       );
     });
     it('should replace legacy parameters but preserve others', () => {
-      document.location.search = 'foo=bar&selectedStory=selStory&selectedKind=selKind';
+      document.location.search = '?foo=bar&selectedStory=selStory&selectedKind=selKind';
       setPath({ storyId: 'story--id', viewMode: 'story' });
       expect(history.replaceState).toHaveBeenCalledWith(
         {},
@@ -49,7 +49,7 @@ describe('UrlStore', () => {
       );
     });
     it('should ignore + keep hashes', () => {
-      document.location.search = 'foo=bar&selectedStory=selStory&selectedKind=selKind';
+      document.location.search = '?foo=bar&selectedStory=selStory&selectedKind=selKind';
       document.location.hash = '#foobar';
       setPath({ storyId: 'story--id', viewMode: 'story' });
       expect(history.replaceState).toHaveBeenCalledWith(
diff --git a/code/core/src/preview-api/modules/preview-web/UrlStore.ts b/code/core/src/preview-api/modules/preview-web/UrlStore.ts
index 8bcdb5260acb..c4a68c17decb 100644
--- a/code/core/src/preview-api/modules/preview-web/UrlStore.ts
+++ b/code/core/src/preview-api/modules/preview-web/UrlStore.ts
@@ -1,7 +1,7 @@
 import type { ViewMode } from '@storybook/core/types';
 import { global } from '@storybook/global';
 
-import qs from 'qs';
+import { parse, stringify } from 'picoquery';
 
 import type { Selection, SelectionSpecifier, SelectionStore } from './SelectionStore';
 import { parseArgsParam } from './parseArgsParam';
@@ -21,20 +21,16 @@ const getQueryString = ({
   extraParams,
 }: {
   selection?: Selection;
-  extraParams?: qs.ParsedQs;
+  extraParams?: Record<PropertyKey, unknown>;
 }) => {
-  const search = typeof document !== 'undefined' ? document.location.search : '';
-  const { path, selectedKind, selectedStory, ...rest } = qs.parse(search, {
-    ignoreQueryPrefix: true,
+  const search = document?.location.search.slice(1);
+  const { path, selectedKind, selectedStory, ...rest } = parse(search);
+  const queryStr = stringify({
+    ...rest,
+    ...extraParams,
+    ...(selection && { id: selection.storyId, viewMode: selection.viewMode }),
   });
-  return qs.stringify(
-    {
-      ...rest,
-      ...extraParams,
-      ...(selection && { id: selection.storyId, viewMode: selection.viewMode }),
-    },
-    { encode: false, addQueryPrefix: true }
-  );
+  return `?${queryStr}`;
 };
 
 export const setPath = (selection?: Selection) => {
@@ -48,10 +44,10 @@ export const setPath = (selection?: Selection) => {
 };
 
 type ValueOf<T> = T[keyof T];
-const isObject = (val: Record<string, any>) =>
+const isObject = (val: Record<string, any>): val is object =>
   val != null && typeof val === 'object' && Array.isArray(val) === false;
 
-const getFirstString = (v: ValueOf<qs.ParsedQs>): string | void => {
+const getFirstString = (v: ValueOf<Record<PropertyKey, unknown>>): string | void => {
   if (v === undefined) {
     return undefined;
   }
@@ -61,15 +57,18 @@ const getFirstString = (v: ValueOf<qs.ParsedQs>): string | void => {
   if (Array.isArray(v)) {
     return getFirstString(v[0]);
   }
-  if (isObject(v)) {
-    return getFirstString(Object.values(v).filter(Boolean) as string[]);
+  if (isObject(v as Record<PropertyKey, unknown>)) {
+    return getFirstString(
+      Object.values(v as Record<PropertyKey, unknown>).filter(Boolean) as string[]
+    );
   }
   return undefined;
 };
 
 export const getSelectionSpecifierFromPath: () => SelectionSpecifier | null = () => {
   if (typeof document !== 'undefined') {
-    const query = qs.parse(document.location.search, { ignoreQueryPrefix: true });
+    const queryStr = document.location.search.slice(1);
+    const query = parse(queryStr);
     const args = typeof query.args === 'string' ? parseArgsParam(query.args) : undefined;
     const globals = typeof query.globals === 'string' ? parseArgsParam(query.globals) : undefined;
 
@@ -103,7 +102,7 @@ export class UrlStore implements SelectionStore {
     setPath(this.selection);
   }
 
-  setQueryParams(queryParams: qs.ParsedQs) {
+  setQueryParams(queryParams: Record<PropertyKey, unknown>) {
     const query = getQueryString({ extraParams: queryParams });
     const { hash = '' } = document.location;
     history.replaceState({}, '', `${document.location.pathname}${query}${hash}`);
diff --git a/code/core/src/preview-api/modules/preview-web/WebView.ts b/code/core/src/preview-api/modules/preview-web/WebView.ts
index 3b7ff22646cc..90b0d23dce7b 100644
--- a/code/core/src/preview-api/modules/preview-web/WebView.ts
+++ b/code/core/src/preview-api/modules/preview-web/WebView.ts
@@ -4,7 +4,7 @@ import { global } from '@storybook/global';
 import { logger } from '@storybook/core/client-logger';
 
 import AnsiToHtml from 'ansi-to-html';
-import qs from 'qs';
+import { parse } from 'picoquery';
 import { dedent } from 'ts-dedent';
 
 import type { View } from './View';
@@ -50,9 +50,7 @@ export class WebView implements View<HTMLElement> {
     // Special code for testing situations
     if (typeof document !== 'undefined') {
       // eslint-disable-next-line @typescript-eslint/naming-convention
-      const { __SPECIAL_TEST_PARAMETER__ } = qs.parse(document.location.search, {
-        ignoreQueryPrefix: true,
-      });
+      const { __SPECIAL_TEST_PARAMETER__ } = parse(document.location.search.slice(1));
       switch (__SPECIAL_TEST_PARAMETER__) {
         case 'preparing-story': {
           this.showPreparingStory();
diff --git a/code/core/src/preview-api/modules/preview-web/parseArgsParam.test.ts b/code/core/src/preview-api/modules/preview-web/parseArgsParam.test.ts
index 28879b3464df..7b8da7118702 100644
--- a/code/core/src/preview-api/modules/preview-web/parseArgsParam.test.ts
+++ b/code/core/src/preview-api/modules/preview-web/parseArgsParam.test.ts
@@ -127,7 +127,7 @@ describe('parseArgsParam', () => {
   });
 
   it('parses single object in array', () => {
-    const args = parseArgsParam('arr[].one:A;arr[].two:B');
+    const args = parseArgsParam('arr[0].one:A;arr[0].two:B');
     expect(args).toStrictEqual({ arr: [{ one: 'A', two: 'B' }] });
   });
 
@@ -135,14 +135,10 @@ describe('parseArgsParam', () => {
     expect(parseArgsParam('arr[0].key:A;arr[1].key:B')).toStrictEqual({
       arr: [{ key: 'A' }, { key: 'B' }],
     });
-    expect(parseArgsParam('arr[0][key]:A;arr[1][key]:B')).toStrictEqual({
-      arr: [{ key: 'A' }, { key: 'B' }],
-    });
   });
 
   it('parses nested object in array', () => {
-    expect(parseArgsParam('arr[].foo.bar:val')).toStrictEqual({ arr: [{ foo: { bar: 'val' } }] });
-    expect(parseArgsParam('arr[][foo][bar]:val')).toStrictEqual({ arr: [{ foo: { bar: 'val' } }] });
+    expect(parseArgsParam('arr[0].foo.bar:val')).toStrictEqual({ arr: [{ foo: { bar: 'val' } }] });
   });
 
   describe('key sanitization', () => {
@@ -164,8 +160,6 @@ describe('parseArgsParam', () => {
       expect(parseArgsParam('a/b:val')).toStrictEqual({});
       expect(parseArgsParam('a\\b:val')).toStrictEqual({});
       expect(parseArgsParam('a|b:val')).toStrictEqual({});
-      expect(parseArgsParam('a[b:val')).toStrictEqual({});
-      expect(parseArgsParam('a]b:val')).toStrictEqual({});
       expect(parseArgsParam('a{b:val')).toStrictEqual({});
       expect(parseArgsParam('a}b:val')).toStrictEqual({});
       expect(parseArgsParam('a?b:val')).toStrictEqual({});
@@ -185,14 +179,10 @@ describe('parseArgsParam', () => {
 
     it('also applies to nested object keys', () => {
       expect(parseArgsParam('obj.a!b:val')).toStrictEqual({});
-      expect(parseArgsParam('obj[a!b]:val')).toStrictEqual({});
-      expect(parseArgsParam('arr[][a!b]:val')).toStrictEqual({});
-      expect(parseArgsParam('arr[0][a!b]:val')).toStrictEqual({});
     });
 
     it('completely omits an arg when a (deeply) nested key is invalid', () => {
       expect(parseArgsParam('obj.foo.a!b:val;obj.foo.bar:val;obj.baz:val')).toStrictEqual({});
-      expect(parseArgsParam('obj.foo[][a!b]:val;obj.foo.bar:val;obj.baz:val')).toStrictEqual({});
       expect(parseArgsParam('obj.foo.a!b:val;key:val')).toStrictEqual({ key: 'val' });
     });
   });
@@ -247,10 +237,6 @@ describe('parseArgsParam', () => {
 
     it('also applies to nested object and array values', () => {
       expect(parseArgsParam('obj.key:a!b')).toStrictEqual({});
-      expect(parseArgsParam('obj[key]:a!b')).toStrictEqual({});
-      expect(parseArgsParam('arr[][key]:a!b')).toStrictEqual({});
-      expect(parseArgsParam('arr[0][key]:a!b')).toStrictEqual({});
-      expect(parseArgsParam('arr[]:a!b')).toStrictEqual({});
       expect(parseArgsParam('arr[0]:a!b')).toStrictEqual({});
     });
 
@@ -258,7 +244,6 @@ describe('parseArgsParam', () => {
       expect(parseArgsParam('obj.key:a!b;obj.foo:val;obj.bar.baz:val')).toStrictEqual({});
       expect(parseArgsParam('obj.arr[]:a!b;obj.foo:val;obj.bar.baz:val')).toStrictEqual({});
       expect(parseArgsParam('obj.arr[0]:val;obj.arr[1]:a!b;obj.foo:val')).toStrictEqual({});
-      expect(parseArgsParam('obj.arr[][one]:a!b;obj.arr[][two]:val')).toStrictEqual({});
       expect(parseArgsParam('arr[]:val;arr[]:a!b;key:val')).toStrictEqual({ key: 'val' });
       expect(parseArgsParam('arr[0]:val;arr[1]:a!1;key:val')).toStrictEqual({ key: 'val' });
       expect(parseArgsParam('arr[0]:val;arr[2]:a!1;key:val')).toStrictEqual({ key: 'val' });
diff --git a/code/core/src/preview-api/modules/preview-web/parseArgsParam.ts b/code/core/src/preview-api/modules/preview-web/parseArgsParam.ts
index 6cdffe7eae10..06d1cd5320be 100644
--- a/code/core/src/preview-api/modules/preview-web/parseArgsParam.ts
+++ b/code/core/src/preview-api/modules/preview-web/parseArgsParam.ts
@@ -2,8 +2,8 @@ import type { Args } from '@storybook/core/types';
 
 import { once } from '@storybook/core/client-logger';
 
-import isPlainObject from 'lodash/isPlainObject.js';
-import qs from 'qs';
+import { isPlainObject } from 'es-toolkit';
+import { type Options, parse } from 'picoquery';
 import { dedent } from 'ts-dedent';
 
 // Keep this in sync with validateArgs in router/src/utils.ts
@@ -53,17 +53,14 @@ const validateArgs = (key = '', value: unknown): boolean => {
   return false;
 };
 
-const QS_OPTIONS = {
+const QUERY_OPTIONS: Partial<Options> = {
   delimiter: ';', // we're parsing a single query param
-  allowDots: true, // objects are encoded using dot notation
-  allowSparse: true, // arrays will be merged on top of their initial value
-  decoder(
-    str: string,
-    defaultDecoder: (str: string, decoder?: any, charset?: string) => string,
-    charset: string,
-    type: 'key' | 'value'
-  ) {
-    if (type === 'value' && str.startsWith('!')) {
+  nesting: true,
+  arrayRepeat: true,
+  arrayRepeatSyntax: 'bracket',
+  nestingSyntax: 'js', // objects are encoded using dot notation
+  valueDeserializer(str: string) {
+    if (str.startsWith('!')) {
       if (str === '!undefined') {
         return undefined;
       }
@@ -81,7 +78,7 @@ const QS_OPTIONS = {
       }
 
       if (str.startsWith('!date(') && str.endsWith(')')) {
-        return new Date(str.slice(6, -1));
+        return new Date(str.replaceAll(' ', '+').slice(6, -1));
       }
 
       if (str.startsWith('!hex(') && str.endsWith(')')) {
@@ -90,35 +87,35 @@ const QS_OPTIONS = {
 
       const color = str.slice(1).match(COLOR_REGEXP);
       if (color) {
-        if (str.startsWith('!rgba')) {
+        if (str.startsWith('!rgba') || str.startsWith('!RGBA')) {
           return `${color[1]}(${color[2]}, ${color[3]}, ${color[4]}, ${color[5]})`;
         }
 
-        if (str.startsWith('!hsla')) {
+        if (str.startsWith('!hsla') || str.startsWith('!HSLA')) {
           return `${color[1]}(${color[2]}, ${color[3]}%, ${color[4]}%, ${color[5]})`;
         }
-        return str.startsWith('!rgb')
+        return str.startsWith('!rgb') || str.startsWith('!RGB')
           ? `${color[1]}(${color[2]}, ${color[3]}, ${color[4]})`
           : `${color[1]}(${color[2]}, ${color[3]}%, ${color[4]}%)`;
       }
     }
 
-    if (type === 'value' && NUMBER_REGEXP.test(str)) {
+    if (NUMBER_REGEXP.test(str)) {
       return Number(str);
     }
-    return defaultDecoder(str, defaultDecoder, charset);
+    return str;
   },
 };
 export const parseArgsParam = (argsString: string): Args => {
   const parts = argsString.split(';').map((part) => part.replace('=', '~').replace(':', '='));
-  return Object.entries(qs.parse(parts.join(';'), QS_OPTIONS)).reduce((acc, [key, value]) => {
+  return Object.entries(parse(parts.join(';'), QUERY_OPTIONS)).reduce((acc, [key, value]) => {
     if (validateArgs(key, value)) {
       return Object.assign(acc, { [key]: value });
     }
     once.warn(dedent`
       Omitted potentially unsafe URL args.
 
-      More info: https://storybook.js.org/docs/react/writing-stories/args#setting-args-through-the-url
+      More info: https://storybook.js.org/docs/writing-stories/args#setting-args-through-the-url
     `);
     return acc;
   }, {} as Args);
diff --git a/code/core/src/preview-api/modules/preview-web/render/StoryRender.test.ts b/code/core/src/preview-api/modules/preview-web/render/StoryRender.test.ts
index 2bd3a9ca3830..41fdea4b6771 100644
--- a/code/core/src/preview-api/modules/preview-web/render/StoryRender.test.ts
+++ b/code/core/src/preview-api/modules/preview-web/render/StoryRender.test.ts
@@ -1,12 +1,14 @@
 // @vitest-environment happy-dom
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
+import { STORY_FINISHED } from 'storybook/internal/core-events';
+
 import { Channel } from '@storybook/core/channels';
 import type { PreparedStory, Renderer, StoryContext, StoryIndexEntry } from '@storybook/core/types';
 
-import type { StoryStore } from '../../store';
+import { ReporterAPI, type StoryStore } from '../../store';
 import { PREPARE_ABORTED } from './Render';
-import { StoryRender } from './StoryRender';
+import { StoryRender, serializeError } from './StoryRender';
 
 const entry = {
   type: 'story',
@@ -40,6 +42,7 @@ const buildStory = (overrides: Partial<PreparedStory> = {}): PreparedStory =>
     tags: [],
     applyLoaders: vi.fn(),
     applyBeforeEach: vi.fn(),
+    applyAfterEach: vi.fn(),
     unboundStoryFn: vi.fn(),
     playFunction: vi.fn(),
     mount: (context: StoryContext) => () => mountSpy(context),
@@ -48,7 +51,9 @@ const buildStory = (overrides: Partial<PreparedStory> = {}): PreparedStory =>
 
 const buildStore = (overrides: Partial<StoryStore<Renderer>> = {}): StoryStore<Renderer> =>
   ({
-    getStoryContext: () => ({}),
+    getStoryContext: () => ({
+      reporting: new ReporterAPI(),
+    }),
     addCleanupCallbacks: vi.fn(),
     cleanupStory: vi.fn(),
     ...overrides,
@@ -255,6 +260,91 @@ describe('StoryRender', () => {
     expect(actualMount).toHaveBeenCalled();
   });
 
+  it('should handle the "finished" phase correctly when the story finishes successfully', async () => {
+    // Arrange - setup StoryRender and async gate blocking finished phase
+    const [finishGate, resolveFinishGate] = createGate();
+    const story = buildStory({
+      playFunction: vi.fn(async () => {
+        await finishGate;
+      }),
+    });
+    const store = buildStore();
+
+    const channel = new Channel({});
+    const emitSpy = vi.spyOn(channel, 'emit');
+
+    const render = new StoryRender(
+      channel,
+      store,
+      vi.fn() as any,
+      {} as any,
+      entry.id,
+      'story',
+      { autoplay: true },
+      story
+    );
+
+    // Act - render, resolve finish gate, teardown
+    render.renderToElement({} as any);
+    await tick(); // go from 'loading' to 'rendering' phase
+    resolveFinishGate();
+    await tick(); // go from 'rendering' to 'finished' phase
+    render.teardown();
+
+    // Assert - ensure finished phase is handled correctly
+    expect(render.phase).toBe('finished');
+    expect(emitSpy).toHaveBeenCalledWith(STORY_FINISHED, {
+      reporters: [],
+      status: 'success',
+      storyId: 'id',
+    });
+  });
+
+  it('should handle the "finished" phase correctly when the story throws an error', async () => {
+    // Arrange - setup StoryRender and async gate blocking finished phase
+    const [finishGate, rejectFinishGate] = createGate();
+    const error = new Error('Test error');
+    const story = buildStory({
+      parameters: {},
+      playFunction: vi.fn(async () => {
+        await finishGate;
+        throw error;
+      }),
+    });
+    const store = buildStore();
+
+    const channel = new Channel({});
+    const emitSpy = vi.spyOn(channel, 'emit');
+
+    const render = new StoryRender(
+      channel,
+      store,
+      vi.fn() as any,
+      {
+        showException: vi.fn(),
+      } as any,
+      entry.id,
+      'story',
+      { autoplay: true },
+      story
+    );
+
+    // Act - render, reject finish gate, teardown
+    render.renderToElement({} as any);
+    await tick(); // go from 'loading' to 'rendering' phase
+    rejectFinishGate();
+    await tick(); // go from 'rendering' to 'finished' phase
+    render.teardown();
+
+    // Assert - ensure finished phase is handled correctly
+    expect(render.phase).toBe('finished');
+    expect(emitSpy).toHaveBeenCalledWith(STORY_FINISHED, {
+      reporters: [],
+      status: 'error',
+      storyId: 'id',
+    });
+  });
+
   describe('teardown', () => {
     it('throws PREPARE_ABORTED if torndown during prepare', async () => {
       const [importGate, openImportGate] = createGate();
diff --git a/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts b/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts
index 3441a5c64e97..0eacdf7e7551 100644
--- a/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts
+++ b/code/core/src/preview-api/modules/preview-web/render/StoryRender.ts
@@ -14,8 +14,10 @@ import type {
 
 import {
   PLAY_FUNCTION_THREW_EXCEPTION,
+  STORY_FINISHED,
   STORY_RENDERED,
   STORY_RENDER_PHASE_CHANGED,
+  type StoryFinishedPayload,
   UNHANDLED_ERRORS_WHILE_PLAYING,
 } from '@storybook/core/core-events';
 import { MountMustBeDestructuredError, NoStoryMountedError } from '@storybook/core/preview-errors';
@@ -33,11 +35,13 @@ export type RenderPhase =
   | 'rendering'
   | 'playing'
   | 'played'
+  | 'afterEach'
   | 'completed'
+  | 'finished'
   | 'aborted'
   | 'errored';
 
-function serializeError(error: any) {
+export function serializeError(error: any) {
   try {
     const { name = 'Error', message = String(error), stack } = error;
     return { name, message, stack };
@@ -132,7 +136,9 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
   }
 
   isPending() {
-    return ['loading', 'beforeEach', 'rendering', 'playing'].includes(this.phase as RenderPhase);
+    return ['loading', 'beforeEach', 'rendering', 'playing', 'afterEach'].includes(
+      this.phase as RenderPhase
+    );
   }
 
   async renderToElement(canvasElement: TRenderer['canvasElement']) {
@@ -180,6 +186,7 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
       tags,
       applyLoaders,
       applyBeforeEach,
+      applyAfterEach,
       unboundStoryFn,
       playFunction,
       runStep,
@@ -288,7 +295,7 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
       const ignoreUnhandledErrors =
         this.story.parameters?.test?.dangerouslyIgnoreUnhandledErrors === true;
 
-      const unhandledErrors: Set<unknown> = new Set();
+      const unhandledErrors: Set<unknown> = new Set<unknown>();
       const onError = (event: ErrorEvent | PromiseRejectionEvent) =>
         unhandledErrors.add('error' in event ? event.error : event.reason);
 
@@ -349,9 +356,39 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
       await this.runPhase(abortSignal, 'completed', async () =>
         this.channel.emit(STORY_RENDERED, id)
       );
+
+      if (this.phase !== 'errored') {
+        await this.runPhase(abortSignal, 'afterEach', async () => {
+          await applyAfterEach(context);
+        });
+      }
+
+      const hasUnhandledErrors = !ignoreUnhandledErrors && unhandledErrors.size > 0;
+
+      const hasSomeReportsFailed = context.reporting.reports.some(
+        (report) => report.status === 'failed'
+      );
+
+      const hasStoryErrored = hasUnhandledErrors || hasSomeReportsFailed;
+
+      await this.runPhase(abortSignal, 'finished', async () =>
+        this.channel.emit(STORY_FINISHED, {
+          storyId: id,
+          status: hasStoryErrored ? 'error' : 'success',
+          reporters: context.reporting.reports,
+        } as StoryFinishedPayload)
+      );
     } catch (err) {
       this.phase = 'errored';
       this.callbacks.showException(err as Error);
+
+      await this.runPhase(abortSignal, 'finished', async () =>
+        this.channel.emit(STORY_FINISHED, {
+          storyId: id,
+          status: 'error',
+          reporters: [],
+        } as StoryFinishedPayload)
+      );
     }
 
     // If a rerender was enqueued during the render, clear the queue and render again
diff --git a/code/core/src/preview-api/modules/store/StoryStore.test.ts b/code/core/src/preview-api/modules/store/StoryStore.test.ts
index 4cc27210c5af..b28638960727 100644
--- a/code/core/src/preview-api/modules/store/StoryStore.test.ts
+++ b/code/core/src/preview-api/modules/store/StoryStore.test.ts
@@ -645,6 +645,7 @@ describe('StoryStore', () => {
       expect(store.raw()).toMatchInlineSnapshot(`
         [
           {
+            "applyAfterEach": [Function],
             "applyBeforeEach": [Function],
             "applyLoaders": [Function],
             "argTypes": {
@@ -698,6 +699,7 @@ describe('StoryStore', () => {
             "usesMount": false,
           },
           {
+            "applyAfterEach": [Function],
             "applyBeforeEach": [Function],
             "applyLoaders": [Function],
             "argTypes": {
@@ -751,6 +753,7 @@ describe('StoryStore', () => {
             "usesMount": false,
           },
           {
+            "applyAfterEach": [Function],
             "applyBeforeEach": [Function],
             "applyLoaders": [Function],
             "argTypes": {
diff --git a/code/core/src/preview-api/modules/store/StoryStore.ts b/code/core/src/preview-api/modules/store/StoryStore.ts
index 510373177fa9..01404a5f1bf5 100644
--- a/code/core/src/preview-api/modules/store/StoryStore.ts
+++ b/code/core/src/preview-api/modules/store/StoryStore.ts
@@ -31,8 +31,7 @@ import {
   MissingStoryFromCsfFileError,
 } from '@storybook/core/preview-errors';
 
-import mapValues from 'lodash/mapValues.js';
-import pick from 'lodash/pick.js';
+import { mapValues, omitBy, pick, toMerged } from 'es-toolkit';
 import memoize from 'memoizerific';
 
 import { HooksContext } from '../addons';
@@ -46,6 +45,14 @@ import {
   prepareStory,
   processCSFFile,
 } from './csf';
+import { ReporterAPI } from './reporter-api';
+
+export function picky<T extends Record<string, any>, K extends keyof T>(
+  obj: T,
+  keys: K[]
+): Partial<Pick<T, K>> {
+  return omitBy(pick(obj, keys), (v) => v === undefined);
+}
 
 // TODO -- what are reasonable values for these?
 const CSF_CACHE_SIZE = 1000;
@@ -247,12 +254,14 @@ export class StoryStore<TRenderer extends Renderer> {
   getStoryContext(story: PreparedStory<TRenderer>, { forceInitialArgs = false } = {}) {
     const userGlobals = this.userGlobals.get();
     const { initialGlobals } = this.userGlobals;
+    const reporting = new ReporterAPI();
     return prepareContext({
       ...story,
       args: forceInitialArgs ? story.initialArgs : this.args.get(story.id),
       initialGlobals,
       globalTypes: this.projectAnnotations.globalTypes,
       userGlobals,
+      reporting,
       globals: {
         ...userGlobals,
         ...story.storyGlobals,
@@ -354,7 +363,7 @@ export class StoryStore<TRenderer extends Renderer> {
     const stories: Record<StoryId, V3CompatIndexEntry> = mapValues(value.stories, (story) => {
       const { importPath } = this.storyIndex.entries[story.id];
       return {
-        ...pick(story, ['id', 'name', 'title']),
+        ...picky(story, ['id', 'name', 'title']),
         importPath,
         // These 3 fields were going to be dropped in v7, but instead we will keep them for the
         // 7.x cycle so that v7 Storybooks can be composed successfully in v6 Storybook.
@@ -362,10 +371,10 @@ export class StoryStore<TRenderer extends Renderer> {
         kind: story.title,
         story: story.name,
         parameters: {
-          ...pick(story.parameters, allowedParameters),
+          ...picky(story.parameters, allowedParameters),
           fileName: importPath,
         },
-      };
+      } as V3CompatIndexEntry;
     });
 
     return {
diff --git a/code/core/src/preview-api/modules/store/args.ts b/code/core/src/preview-api/modules/store/args.ts
index e34df974c42c..145ccdfbc620 100644
--- a/code/core/src/preview-api/modules/store/args.ts
+++ b/code/core/src/preview-api/modules/store/args.ts
@@ -9,8 +9,7 @@ import type {
 
 import { once } from '@storybook/core/client-logger';
 
-import { dequal as deepEqual } from 'dequal';
-import isPlainObject from 'lodash/isPlainObject.js';
+import { isEqual as deepEqual, isPlainObject } from 'es-toolkit';
 import { dedent } from 'ts-dedent';
 
 const INCOMPATIBLE = Symbol('incompatible');
@@ -121,7 +120,7 @@ export const validateOptions = (args: Args, argTypes: ArgTypes): Args => {
       once.error(dedent`
         Invalid argType: '${key}.options' should be an array.
 
-        More info: https://storybook.js.org/docs/react/api/argtypes
+        More info: https://storybook.js.org/docs/api/arg-types
       `);
       return allowArg();
     }
@@ -130,7 +129,7 @@ export const validateOptions = (args: Args, argTypes: ArgTypes): Args => {
       once.error(dedent`
         Invalid argType: '${key}.options' should only contain primitives. Use a 'mapping' for complex values.
 
-        More info: https://storybook.js.org/docs/react/writing-stories/args#mapping-to-complex-arg-values
+        More info: https://storybook.js.org/docs/writing-stories/args#mapping-to-complex-arg-values
       `);
       return allowArg();
     }
diff --git a/code/core/src/preview-api/modules/store/csf/composeConfigs.test.ts b/code/core/src/preview-api/modules/store/csf/composeConfigs.test.ts
index 035aa60e7e14..d1539c4791e1 100644
--- a/code/core/src/preview-api/modules/store/csf/composeConfigs.test.ts
+++ b/code/core/src/preview-api/modules/store/csf/composeConfigs.test.ts
@@ -25,6 +25,7 @@ describe('composeConfigs', () => {
       loaders: [],
       beforeAll: expect.any(Function),
       beforeEach: [],
+      experimental_afterEach: [],
       runStep: expect.any(Function),
       tags: [],
     });
@@ -53,6 +54,7 @@ describe('composeConfigs', () => {
       loaders: [],
       beforeAll: expect.any(Function),
       beforeEach: [],
+      experimental_afterEach: [],
       runStep: expect.any(Function),
       tags: [],
     });
@@ -85,6 +87,7 @@ describe('composeConfigs', () => {
       loaders: [],
       beforeAll: expect.any(Function),
       beforeEach: [],
+      experimental_afterEach: [],
       runStep: expect.any(Function),
       tags: [],
     });
@@ -123,6 +126,7 @@ describe('composeConfigs', () => {
       loaders: [],
       beforeAll: expect.any(Function),
       beforeEach: [],
+      experimental_afterEach: [],
       runStep: expect.any(Function),
       tags: [],
     });
@@ -164,6 +168,7 @@ describe('composeConfigs', () => {
       loaders: [],
       beforeAll: expect.any(Function),
       beforeEach: [],
+      experimental_afterEach: [],
       runStep: expect.any(Function),
       tags: [],
     });
@@ -196,6 +201,7 @@ describe('composeConfigs', () => {
       loaders: ['1', '2', '3', '4'],
       beforeAll: expect.any(Function),
       beforeEach: [],
+      experimental_afterEach: [],
       runStep: expect.any(Function),
       tags: [],
     });
@@ -228,6 +234,7 @@ describe('composeConfigs', () => {
       loaders: ['1', '2', '3'],
       beforeAll: expect.any(Function),
       beforeEach: [],
+      experimental_afterEach: [],
       runStep: expect.any(Function),
       tags: [],
     });
@@ -256,6 +263,7 @@ describe('composeConfigs', () => {
       loaders: [],
       beforeAll: expect.any(Function),
       beforeEach: [],
+      experimental_afterEach: [],
       runStep: expect.any(Function),
       tags: [],
     });
@@ -285,6 +293,7 @@ describe('composeConfigs', () => {
       loaders: [],
       beforeAll: expect.any(Function),
       beforeEach: [],
+      experimental_afterEach: [],
       runStep: expect.any(Function),
       tags: [],
     });
@@ -317,6 +326,7 @@ describe('composeConfigs', () => {
       loaders: [],
       beforeAll: expect.any(Function),
       beforeEach: [],
+      experimental_afterEach: [],
       render: 'render-2',
       renderToCanvas: 'renderToCanvas-2',
       applyDecorators: 'applyDecorators-2',
diff --git a/code/core/src/preview-api/modules/store/csf/composeConfigs.ts b/code/core/src/preview-api/modules/store/csf/composeConfigs.ts
index 545ab719e5a3..e5ba4f731b83 100644
--- a/code/core/src/preview-api/modules/store/csf/composeConfigs.ts
+++ b/code/core/src/preview-api/modules/store/csf/composeConfigs.ts
@@ -64,6 +64,7 @@ export function composeConfigs<TRenderer extends Renderer>(
     loaders: getArrayField(moduleExportList, 'loaders'),
     beforeAll: composeBeforeAllHooks(beforeAllHooks),
     beforeEach: getArrayField(moduleExportList, 'beforeEach'),
+    experimental_afterEach: getArrayField(moduleExportList, 'experimental_afterEach'),
     render: getSingletonField(moduleExportList, 'render'),
     renderToCanvas: getSingletonField(moduleExportList, 'renderToCanvas'),
     renderToDOM: getSingletonField(moduleExportList, 'renderToDOM'), // deprecated
diff --git a/code/core/src/preview-api/modules/store/csf/normalizeInputTypes.ts b/code/core/src/preview-api/modules/store/csf/normalizeInputTypes.ts
index d0bdaabdfe1b..f4685dc83090 100644
--- a/code/core/src/preview-api/modules/store/csf/normalizeInputTypes.ts
+++ b/code/core/src/preview-api/modules/store/csf/normalizeInputTypes.ts
@@ -7,7 +7,7 @@ import type {
   StrictInputType,
 } from '@storybook/core/types';
 
-import mapValues from 'lodash/mapValues.js';
+import { mapValues } from 'es-toolkit';
 
 const normalizeType = (type: InputType['type']): StrictInputType['type'] => {
   return typeof type === 'string' ? { name: type } : type;
diff --git a/code/core/src/preview-api/modules/store/csf/normalizeProjectAnnotations.ts b/code/core/src/preview-api/modules/store/csf/normalizeProjectAnnotations.ts
index 26711a130106..7c5ec15724fb 100644
--- a/code/core/src/preview-api/modules/store/csf/normalizeProjectAnnotations.ts
+++ b/code/core/src/preview-api/modules/store/csf/normalizeProjectAnnotations.ts
@@ -26,6 +26,7 @@ export function normalizeProjectAnnotations<TRenderer extends Renderer>({
   decorators,
   loaders,
   beforeEach,
+  experimental_afterEach,
   globals,
   initialGlobals,
   ...annotations
@@ -44,6 +45,7 @@ export function normalizeProjectAnnotations<TRenderer extends Renderer>({
     decorators: normalizeArrays(decorators),
     loaders: normalizeArrays(loaders),
     beforeEach: normalizeArrays(beforeEach),
+    experimental_afterEach: normalizeArrays(experimental_afterEach),
     argTypesEnhancers: [
       ...(argTypesEnhancers || []),
       inferArgTypes,
diff --git a/code/core/src/preview-api/modules/store/csf/normalizeStory.test.ts b/code/core/src/preview-api/modules/store/csf/normalizeStory.test.ts
index ddacda230514..e7cad9cb0558 100644
--- a/code/core/src/preview-api/modules/store/csf/normalizeStory.test.ts
+++ b/code/core/src/preview-api/modules/store/csf/normalizeStory.test.ts
@@ -56,6 +56,7 @@ describe('normalizeStory', () => {
           "args": {},
           "beforeEach": [],
           "decorators": [],
+          "experimental_afterEach": [],
           "globals": {},
           "id": "title--story-export",
           "loaders": [],
@@ -127,6 +128,7 @@ describe('normalizeStory', () => {
             "args": {},
             "beforeEach": [],
             "decorators": [],
+            "experimental_afterEach": [],
             "globals": {},
             "id": "title--story-export",
             "loaders": [],
@@ -167,6 +169,7 @@ describe('normalizeStory', () => {
             "decorators": [
               [Function],
             ],
+            "experimental_afterEach": [],
             "globals": {},
             "id": "title--story-export",
             "loaders": [
@@ -225,6 +228,7 @@ describe('normalizeStory', () => {
               [Function],
               [Function],
             ],
+            "experimental_afterEach": [],
             "globals": {},
             "id": "title--story-export",
             "loaders": [
diff --git a/code/core/src/preview-api/modules/store/csf/normalizeStory.ts b/code/core/src/preview-api/modules/store/csf/normalizeStory.ts
index 2dd2ae957390..7fb9f59d256b 100644
--- a/code/core/src/preview-api/modules/store/csf/normalizeStory.ts
+++ b/code/core/src/preview-api/modules/store/csf/normalizeStory.ts
@@ -60,6 +60,11 @@ export function normalizeStory<TRenderer extends Renderer>(
     ...normalizeArrays(storyObject.beforeEach),
     ...normalizeArrays(story?.beforeEach),
   ];
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const experimental_afterEach = [
+    ...normalizeArrays(storyObject.experimental_afterEach),
+    ...normalizeArrays(story?.experimental_afterEach),
+  ];
   const { render, play, tags = [], globals = {} } = storyObject;
 
   // eslint-disable-next-line no-underscore-dangle
@@ -75,6 +80,7 @@ export function normalizeStory<TRenderer extends Renderer>(
     argTypes: normalizeInputTypes(argTypes),
     loaders,
     beforeEach,
+    experimental_afterEach,
     globals,
     ...(render && { render }),
     ...(userStoryFn && { userStoryFn }),
diff --git a/code/core/src/preview-api/modules/store/csf/portable-stories.test.ts b/code/core/src/preview-api/modules/store/csf/portable-stories.test.ts
index 6c85760cbd4e..24e286b3b909 100644
--- a/code/core/src/preview-api/modules/store/csf/portable-stories.test.ts
+++ b/code/core/src/preview-api/modules/store/csf/portable-stories.test.ts
@@ -77,6 +77,25 @@ describe('composeStory', () => {
     expect(composedStory.parameters.fromAnnotations.asDefaultImport).toEqual(true);
   });
 
+  it('should compose project annotations when used in named and default exports from the same module', () => {
+    setProjectAnnotations([
+      {
+        initialGlobals: { namedExportAnnotation: true },
+        default: {
+          parameters: { defaultExportAnnotation: true },
+        },
+      },
+    ]);
+
+    const Story: Story = {
+      render: () => {},
+    };
+
+    const composedStory = composeStory(Story, meta);
+    expect(composedStory.parameters.defaultExportAnnotation).toEqual(true);
+    expect(composedStory.globals.namedExportAnnotation).toEqual(true);
+  });
+
   it('should return story with composed annotations from story, meta and project', () => {
     const decoratorFromProjectAnnotations = vi.fn((StoryFn) => StoryFn());
     const decoratorFromStoryAnnotations = vi.fn((StoryFn) => StoryFn());
diff --git a/code/core/src/preview-api/modules/store/csf/portable-stories.ts b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
index fd50bd57c2dd..774137dcf85a 100644
--- a/code/core/src/preview-api/modules/store/csf/portable-stories.ts
+++ b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
@@ -26,6 +26,7 @@ import { MountMustBeDestructuredError } from '@storybook/core/preview-errors';
 import { dedent } from 'ts-dedent';
 
 import { HooksContext } from '../../../addons';
+import { ReporterAPI } from '../reporter-api';
 import { composeConfigs } from './composeConfigs';
 import { getValuesFromArgTypes } from './getValuesFromArgTypes';
 import { normalizeComponentAnnotations } from './normalizeComponentAnnotations';
@@ -61,11 +62,8 @@ function extractAnnotation<TRenderer extends Renderer = Renderer>(
   // import * as annotations from '.storybook/preview'
   // import annotations from '.storybook/preview'
   // in both cases: 1 - the file has a default export; 2 - named exports only
-  // support imports such as
-  // import * as annotations from '.storybook/preview'
-  // import annotations from '.storybook/preview'
-  // in both cases: 1 - the file has a default export; 2 - named exports only
-  return 'default' in annotation ? annotation.default : annotation;
+  // also support when the file has both annotations coming from default and named exports
+  return composeConfigs([annotation]);
 }
 
 export function setProjectAnnotations<TRenderer extends Renderer = Renderer>(
@@ -126,7 +124,7 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
     composeConfigs([
       defaultConfig && Object.keys(defaultConfig).length > 0
         ? defaultConfig
-        : globalThis.defaultProjectAnnotations ?? {},
+        : (globalThis.defaultProjectAnnotations ?? {}),
       globalThis.globalProjectAnnotations ?? {},
       projectAnnotations ?? {},
     ])
@@ -139,18 +137,22 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
   );
 
   const globalsFromGlobalTypes = getValuesFromArgTypes(normalizedProjectAnnotations.globalTypes);
+  const globals = {
+    // TODO: remove loading from globalTypes in 9.0
+    ...globalsFromGlobalTypes,
+    ...normalizedProjectAnnotations.initialGlobals,
+    ...story.storyGlobals,
+  };
+
+  const reporting = new ReporterAPI();
 
   const initializeContext = () => {
     const context: StoryContext<TRenderer> = prepareContext({
       hooks: new HooksContext(),
-      globals: {
-        // TODO: remove loading from globalTypes in 9.0
-        ...globalsFromGlobalTypes,
-        ...normalizedProjectAnnotations.initialGlobals,
-        ...story.storyGlobals,
-      },
+      globals,
       args: { ...story.initialArgs },
       viewMode: 'story',
+      reporting,
       loaded: {},
       abortSignal: new AbortController().signal,
       step: (label, play) => story.runStep(label, play, context),
@@ -251,11 +253,13 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
 
         loadedContext = context;
       },
+      globals,
       args: story.initialArgs as Partial<TArgs>,
       parameters: story.parameters as Parameters,
       argTypes: story.argTypes as StrictArgTypes<TArgs>,
       play: playFunction!,
       run,
+      reporting,
       tags: story.tags,
     }
   );
@@ -406,4 +410,6 @@ async function runStory<TRenderer extends Renderer>(
     }
     await playFunction(context);
   }
+
+  await story.applyAfterEach(context);
 }
diff --git a/code/core/src/preview-api/modules/store/csf/prepareStory.test.ts b/code/core/src/preview-api/modules/store/csf/prepareStory.test.ts
index e91a6fcfea05..4f3c88bbd55e 100644
--- a/code/core/src/preview-api/modules/store/csf/prepareStory.test.ts
+++ b/code/core/src/preview-api/modules/store/csf/prepareStory.test.ts
@@ -54,6 +54,10 @@ const addExtraContext = (
     ...context,
     hooks: new HooksContext(),
     viewMode: 'story' as const,
+    reporting: {
+      reports: [],
+      addReport: vi.fn(),
+    },
     loaded: {},
     mount: vi.fn(),
     abortSignal: new AbortController().signal,
@@ -792,6 +796,7 @@ describe('prepareMeta', () => {
       story,
       applyLoaders,
       applyBeforeEach,
+      applyAfterEach,
       originalStoryFn,
       unboundStoryFn,
       undecoratedStoryFn,
diff --git a/code/core/src/preview-api/modules/store/csf/prepareStory.ts b/code/core/src/preview-api/modules/store/csf/prepareStory.ts
index d6db661270d3..d2d7bba0c6df 100644
--- a/code/core/src/preview-api/modules/store/csf/prepareStory.ts
+++ b/code/core/src/preview-api/modules/store/csf/prepareStory.ts
@@ -92,6 +92,20 @@ export function prepareStory<TRenderer extends Renderer>(
     return cleanupCallbacks;
   };
 
+  const applyAfterEach = async (context: StoryContext<TRenderer>): Promise<void> => {
+    const reversedFinalizers = [
+      ...normalizeArrays(projectAnnotations.experimental_afterEach),
+      ...normalizeArrays(componentAnnotations.experimental_afterEach),
+      ...normalizeArrays(storyAnnotations.experimental_afterEach),
+    ].reverse();
+    for (const finalizer of reversedFinalizers) {
+      if (context.abortSignal.aborted) {
+        return;
+      }
+      await finalizer(context);
+    }
+  };
+
   const undecoratedStoryFn = (context: StoryContext<TRenderer>) =>
     (context.originalStoryFn as ArgsStoryFn<TRenderer>)(context.args, context);
 
@@ -150,6 +164,7 @@ export function prepareStory<TRenderer extends Renderer>(
     unboundStoryFn,
     applyLoaders,
     applyBeforeEach,
+    applyAfterEach,
     playFunction,
     runStep,
     mount,
diff --git a/code/core/src/preview-api/modules/store/filterArgTypes.ts b/code/core/src/preview-api/modules/store/filterArgTypes.ts
index 274489a67cf4..16c2dd3a6c51 100644
--- a/code/core/src/preview-api/modules/store/filterArgTypes.ts
+++ b/code/core/src/preview-api/modules/store/filterArgTypes.ts
@@ -1,6 +1,6 @@
 import type { StrictArgTypes } from '@storybook/core/types';
 
-import pickBy from 'lodash/pickBy.js';
+import { pickBy } from 'es-toolkit';
 
 export type PropDescriptor = string[] | RegExp;
 
@@ -18,8 +18,8 @@ export const filterArgTypes = (
   return (
     argTypes &&
     pickBy(argTypes, (argType, key) => {
-      const name = argType.name || key;
-      return (!include || matches(name, include)) && (!exclude || !matches(name, exclude));
+      const name = argType.name || key.toString();
+      return !!(!include || matches(name, include)) && (!exclude || !matches(name, exclude));
     })
   );
 };
diff --git a/code/core/src/preview-api/modules/store/index.ts b/code/core/src/preview-api/modules/store/index.ts
index f6694ad9017b..ea16e35bc908 100644
--- a/code/core/src/preview-api/modules/store/index.ts
+++ b/code/core/src/preview-api/modules/store/index.ts
@@ -10,3 +10,4 @@ export * from './decorators';
 export * from './args';
 export * from './autoTitle';
 export * from './sortStories';
+export * from './reporter-api';
diff --git a/code/core/src/preview-api/modules/store/inferArgTypes.ts b/code/core/src/preview-api/modules/store/inferArgTypes.ts
index ea8b45b75609..35e840fedcd8 100644
--- a/code/core/src/preview-api/modules/store/inferArgTypes.ts
+++ b/code/core/src/preview-api/modules/store/inferArgTypes.ts
@@ -2,7 +2,7 @@ import type { ArgTypesEnhancer, Renderer, SBType } from '@storybook/core/types';
 
 import { logger } from '@storybook/core/client-logger';
 
-import mapValues from 'lodash/mapValues.js';
+import { mapValues } from 'es-toolkit';
 import { dedent } from 'ts-dedent';
 
 import { combineParameters } from './parameters';
@@ -25,8 +25,8 @@ const inferType = (value: any, name: string, visited: Set<any>): SBType => {
         We've detected a cycle in arg '${name}'. Args should be JSON-serializable.
 
         Consider using the mapping feature or fully custom args:
-        - Mapping: https://storybook.js.org/docs/react/writing-stories/args#mapping-to-complex-arg-values
-        - Custom args: https://storybook.js.org/docs/react/essentials/controls#fully-custom-args
+        - Mapping: https://storybook.js.org/docs/writing-stories/args#mapping-to-complex-arg-values
+        - Custom args: https://storybook.js.org/docs/essentials/controls#fully-custom-args
       `);
       return { name: 'other', value: 'cyclic object' };
     }
diff --git a/code/core/src/preview-api/modules/store/inferControls.ts b/code/core/src/preview-api/modules/store/inferControls.ts
index b4408d85921f..92447845cc92 100644
--- a/code/core/src/preview-api/modules/store/inferControls.ts
+++ b/code/core/src/preview-api/modules/store/inferControls.ts
@@ -7,7 +7,7 @@ import type {
 
 import { logger } from '@storybook/core/client-logger';
 
-import mapValues from 'lodash/mapValues.js';
+import { mapValues } from 'es-toolkit';
 
 import { filterArgTypes } from './filterArgTypes';
 import { combineParameters } from './parameters';
@@ -77,7 +77,7 @@ export const inferControls: ArgTypesEnhancer<Renderer> = (context) => {
 
   const filteredArgTypes = filterArgTypes(argTypes, include, exclude);
   const withControls = mapValues(filteredArgTypes, (argType, name) => {
-    return argType?.type && inferControl(argType, name, matchers);
+    return argType?.type && inferControl(argType, name.toString(), matchers);
   });
 
   return combineParameters(withControls, filteredArgTypes);
diff --git a/code/core/src/preview-api/modules/store/parameters.ts b/code/core/src/preview-api/modules/store/parameters.ts
index 43dee876d71b..3b6077614801 100644
--- a/code/core/src/preview-api/modules/store/parameters.ts
+++ b/code/core/src/preview-api/modules/store/parameters.ts
@@ -1,7 +1,7 @@
 // Utilities for handling parameters
 import type { Parameters } from '@storybook/core/types';
 
-import isPlainObject from 'lodash/isPlainObject.js';
+import { isPlainObject } from 'es-toolkit';
 
 /**
  * Safely combine parameters recursively. Only copy objects when needed. Algorithm = always
diff --git a/code/core/src/preview-api/modules/store/reporter-api.ts b/code/core/src/preview-api/modules/store/reporter-api.ts
new file mode 100644
index 000000000000..593124b6b8eb
--- /dev/null
+++ b/code/core/src/preview-api/modules/store/reporter-api.ts
@@ -0,0 +1,14 @@
+export interface Report<T = unknown> {
+  type: string;
+  version?: number;
+  result: T;
+  status: 'failed' | 'passed' | 'warning';
+}
+
+export class ReporterAPI {
+  reports: Report[] = [];
+
+  async addReport(report: Report) {
+    this.reports.push(report);
+  }
+}
diff --git a/code/core/src/preview/runtime.ts b/code/core/src/preview/runtime.ts
index 45ca3083ae6b..dd437d7b57e1 100644
--- a/code/core/src/preview/runtime.ts
+++ b/code/core/src/preview/runtime.ts
@@ -6,25 +6,35 @@ import { globalPackages, globalsNameReferenceMap } from './globals/globals';
 import { globalsNameValueMap } from './globals/runtime';
 import { prepareForTelemetry } from './utils';
 
-// Apply all the globals
-globalPackages.forEach((key) => {
-  (global as any)[globalsNameReferenceMap[key]] = globalsNameValueMap[key];
-});
-
-global.sendTelemetryError = (error: any) => {
-  const channel = global.__STORYBOOK_ADDONS_CHANNEL__;
-  channel.emit(TELEMETRY_ERROR, prepareForTelemetry(error));
-};
-
-// handle all uncaught StorybookError at the root of the application and log to telemetry if applicable
-global.addEventListener('error', (args: any) => {
+function errorListener(args: any) {
   const error = args.error || args;
   if (error.fromStorybook) {
     global.sendTelemetryError(error);
   }
-});
-global.addEventListener('unhandledrejection', ({ reason }: any) => {
+}
+
+function unhandledRejectionListener({ reason }: any) {
   if (reason.fromStorybook) {
     global.sendTelemetryError(reason);
   }
-});
+}
+
+export function setup() {
+  // Apply all the globals
+  globalPackages.forEach((key) => {
+    (global as any)[globalsNameReferenceMap[key]] = globalsNameValueMap[key];
+  });
+
+  global.sendTelemetryError = (error: any) => {
+    const channel = global.__STORYBOOK_ADDONS_CHANNEL__;
+    channel.emit(TELEMETRY_ERROR, prepareForTelemetry(error));
+  };
+
+  // handle all uncaught StorybookError at the root of the application and log to telemetry if applicable
+  global.addEventListener('error', errorListener);
+  global.addEventListener('unhandledrejection', unhandledRejectionListener);
+}
+
+// TODO: In the future, remove this call to make the module side-effect free
+// when the webpack builder also imports this as a regular file
+setup();
diff --git a/code/core/src/router/router.tsx b/code/core/src/router/router.tsx
index 1866984ca3ea..d2b9d3f6e8b1 100644
--- a/code/core/src/router/router.tsx
+++ b/code/core/src/router/router.tsx
@@ -6,7 +6,7 @@ import { global } from '@storybook/global';
 import * as R from 'react-router-dom';
 
 import type { LinkProps, NavigateOptions, RenderData } from './types';
-import { getMatch, parsePath, queryFromString } from './utils';
+import { getMatch, parsePath, queryFromLocation } from './utils';
 
 const { document } = global;
 
@@ -76,7 +76,7 @@ Link.displayName = 'QueryLink';
  */
 export const Location = ({ children }: LocationProps) => {
   const location = R.useLocation();
-  const { path, singleStory } = queryFromString(location.search);
+  const { path, singleStory } = queryFromLocation(location);
   const { viewMode, storyId, refId } = parsePath(path);
 
   return (
diff --git a/code/core/src/router/utils.ts b/code/core/src/router/utils.ts
index 3859668c175e..bd8e3edc7aa5 100644
--- a/code/core/src/router/utils.ts
+++ b/code/core/src/router/utils.ts
@@ -1,10 +1,9 @@
 import { once } from '@storybook/core/client-logger';
 
-import { dequal as deepEqual } from 'dequal';
-import isPlainObject from 'lodash/isPlainObject.js';
+import { isEqual as deepEqual, isPlainObject } from 'es-toolkit';
 import memoize from 'memoizerific';
-import type { IStringifyOptions } from 'qs';
-import qs from 'qs';
+import type { Options as QueryOptions } from 'picoquery';
+import { parse, stringify } from 'picoquery';
 import { dedent } from 'ts-dedent';
 
 export interface StoryData {
@@ -120,6 +119,9 @@ const validateArgs = (key = '', value: unknown): boolean => {
   return false;
 };
 
+// Note this isn't a picoquery serializer because pq will turn any object
+// into a nested key internally. So we need to deal witth things like `Date`
+// up front.
 const encodeSpecialValues = (value: unknown): any => {
   if (value === undefined) {
     return '!undefined';
@@ -143,9 +145,14 @@ const encodeSpecialValues = (value: unknown): any => {
     return `!${value}`;
   }
 
+  if (value instanceof Date) {
+    return `!date(${value.toISOString()})`;
+  }
+
   if (Array.isArray(value)) {
     return value.map(encodeSpecialValues);
   }
+
   if (isPlainObject(value)) {
     return Object.entries(value as Record<string, any>).reduce(
       (acc, [key, val]) => Object.assign(acc, { [key]: encodeSpecialValues(val) }),
@@ -155,13 +162,27 @@ const encodeSpecialValues = (value: unknown): any => {
   return value;
 };
 
-const QS_OPTIONS: IStringifyOptions = {
-  encode: false, // we handle URL encoding ourselves
-  delimiter: ';', // we don't actually create multiple query params
-  allowDots: true, // encode objects using dot notation: obj.key=val
-  format: 'RFC1738', // encode spaces using the + sign
-  serializeDate: (date: Date) => `!date(${date.toISOString()})`,
+// Replaces some url-encoded characters with their decoded equivalents.
+// The URI RFC specifies these should be encoded, but all browsers will
+// tolerate them being decoded, so we opt to go with it for cleaner looking
+// URIs.
+const decodeKnownQueryChar = (chr: string) => {
+  switch (chr) {
+    case '%20':
+      return '+';
+    case '%5B':
+      return '[';
+    case '%5D':
+      return ']';
+    case '%2C':
+      return ',';
+    case '%3A':
+      return ':';
+  }
+  return chr;
 };
+const knownQueryChar = /%[0-9A-F]{2}/g;
+
 export const buildArgsParam = (initialArgs: Args | undefined, args: Args): string => {
   const update = deepDiff(initialArgs, args);
 
@@ -176,14 +197,17 @@ export const buildArgsParam = (initialArgs: Args | undefined, args: Args): strin
     once.warn(dedent`
       Omitted potentially unsafe URL args.
 
-      More info: https://storybook.js.org/docs/react/writing-stories/args#setting-args-through-the-url
+      More info: https://storybook.js.org/docs/writing-stories/args#setting-args-through-the-url
     `);
     return acc;
   }, {} as Args);
 
-  return qs
-    .stringify(encodeSpecialValues(object), QS_OPTIONS)
-    .replace(/ /g, '+')
+  return stringify(encodeSpecialValues(object), {
+    delimiter: ';', // we don't actually create multiple query params
+    nesting: true,
+    nestingSyntax: 'js', // encode objects using dot notation: obj.key=val
+  })
+    .replace(knownQueryChar, decodeKnownQueryChar)
     .split(';')
     .map((part: string) => part.replace('=', ':'))
     .join(';');
@@ -193,12 +217,16 @@ interface Query {
   [key: string]: any;
 }
 
-export const queryFromString = memoize(1000)(
-  (s?: string): Query => (s !== undefined ? qs.parse(s, { ignoreQueryPrefix: true }) : {})
-);
-export const queryFromLocation = (location: Partial<Location>) => queryFromString(location.search);
-export const stringifyQuery = (query: Query) =>
-  qs.stringify(query, { addQueryPrefix: true, encode: false });
+const queryFromString = memoize(1000)((s?: string): Query => (s !== undefined ? parse(s) : {}));
+
+export const queryFromLocation = (location: Partial<Location>) => {
+  return queryFromString(location.search ? location.search.slice(1) : '');
+};
+
+export const stringifyQuery = (query: Query) => {
+  const queryStr = stringify(query);
+  return queryStr ? '?' + queryStr : '';
+};
 
 type Match = { path: string };
 
diff --git a/code/core/src/server-errors.ts b/code/core/src/server-errors.ts
index 7160087cdfb6..a119e46ac74a 100644
--- a/code/core/src/server-errors.ts
+++ b/code/core/src/server-errors.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 
 import { StorybookError } from './storybook-error';
@@ -116,7 +116,7 @@ export class ConflictingStaticDirConfigError extends StorybookError {
       category: Category.CORE_SERVER,
       code: 1,
       documentation:
-        'https://storybook.js.org/docs/react/configure/images-and-assets#serving-static-files-via-storybook-configuration',
+        'https://storybook.js.org/docs/configure/integration/images-and-assets#serving-static-files-via-storybook-configuration',
       message: dedent`
         Storybook encountered a conflict when trying to serve statics. You have configured both:
         * Storybook's option in the config file: 'staticDirs'
@@ -133,7 +133,7 @@ export class InvalidStoriesEntryError extends StorybookError {
       category: Category.CORE_COMMON,
       code: 4,
       documentation:
-        'https://storybook.js.org/docs/react/faq#can-i-have-a-storybook-with-no-local-stories',
+        'https://storybook.js.org/docs/faq#can-i-have-a-storybook-with-no-local-stories',
       message: dedent`
         Storybook could not index your stories.
         Your main configuration somehow does not contain a 'stories' field, or it resolved to an empty array.
@@ -150,7 +150,7 @@ export class WebpackMissingStatsError extends StorybookError {
       code: 1,
       documentation: [
         'https://webpack.js.org/configuration/stats/',
-        'https://storybook.js.org/docs/react/builders/webpack#configure',
+        'https://storybook.js.org/docs/builders/webpack#configure',
       ],
       message: dedent`
         No Webpack stats found. Did you turn off stats reporting in your Webpack config?
@@ -217,7 +217,7 @@ export class MissingAngularJsonError extends StorybookError {
     super({
       category: Category.CLI_INIT,
       code: 2,
-      documentation: 'https://storybook.js.org/docs/angular/faq#error-no-angularjson-file-found',
+      documentation: 'https://storybook.js.org/docs/faq#error-no-angularjson-file-found',
       message: dedent`
         An angular.json file was not found in the current working directory: ${data.path}
         Storybook needs it to work properly, so please rerun the command at the root of your project, where the angular.json file is located.`,
@@ -349,21 +349,21 @@ export class MainFileESMOnlyImportError extends StorybookError {
     ];
     if (data.line) {
       message.push(
-        chalk.white(
-          `In your ${chalk.yellow(data.location)} file, line ${chalk.bold.cyan(
-            data.num
+        picocolors.white(
+          `In your ${picocolors.yellow(data.location)} file, line ${picocolors.bold(
+            picocolors.cyan(data.num)
           )} threw an error:`
         ),
-        chalk.grey(data.line)
+        picocolors.gray(data.line)
       );
     }
 
     message.push(
       '',
-      chalk.white(
-        `Convert the static import to a dynamic import ${chalk.underline('where they are used')}.`
+      picocolors.white(
+        `Convert the static import to a dynamic import ${picocolors.underline('where they are used')}.`
       ),
-      chalk.white(`Example:`) + ' ' + chalk.gray(`await import(<your ESM only module>);`),
+      picocolors.white(`Example:`) + ' ' + picocolors.gray(`await import(<your ESM only module>);`),
       ''
     );
 
@@ -398,7 +398,7 @@ export class MainFileMissingError extends StorybookError {
       code: 6,
       documentation,
       message: dedent`
-        No configuration files have been found in your configDir: ${chalk.yellow(data.location)}.
+        No configuration files have been found in your configDir: ${picocolors.yellow(data.location)}.
         Storybook needs a "main.js" file, please add it.
         
         ${helperMessage}`,
@@ -408,7 +408,7 @@ export class MainFileMissingError extends StorybookError {
 
 export class MainFileEvaluationError extends StorybookError {
   constructor(public data: { location: string; error: Error }) {
-    const errorText = chalk.white(
+    const errorText = picocolors.white(
       (data.error.stack || data.error.message).replaceAll(process.cwd(), '')
     );
 
@@ -416,7 +416,7 @@ export class MainFileEvaluationError extends StorybookError {
       category: Category.CORE_SERVER,
       code: 7,
       message: dedent`
-        Storybook couldn't evaluate your ${chalk.yellow(data.location)} file.
+        Storybook couldn't evaluate your ${picocolors.yellow(data.location)} file.
         
         Original error:
         ${errorText}`,
diff --git a/code/core/src/telemetry/README.md b/code/core/src/telemetry/README.md
index 7f84d318fc9e..c6a531ac6594 100644
--- a/code/core/src/telemetry/README.md
+++ b/code/core/src/telemetry/README.md
@@ -2,4 +2,4 @@
 
 Storybook collects completely anonymous telemetry data about general usage. Participation in this program is optional and it’s easy to opt-out.
 
-For more information visit: [storybook.js.org/telemetry](https://storybook.js.org/telemetry)
+For more information visit: [storybook.js.org/telemetry](https://storybook.js.org/docs/configure/telemetry)
diff --git a/code/core/src/telemetry/anonymous-id.test.ts b/code/core/src/telemetry/anonymous-id.test.ts
index 6606f43cabc2..8277ca547e85 100644
--- a/code/core/src/telemetry/anonymous-id.test.ts
+++ b/code/core/src/telemetry/anonymous-id.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 
-import { normalizeGitUrl } from './anonymous-id';
+import { normalizeGitUrl, unhashedProjectId } from './anonymous-id';
 
 describe('normalizeGitUrl', () => {
   it('trims off https://', () => {
@@ -69,6 +69,12 @@ describe('normalizeGitUrl', () => {
     );
   });
 
+  it('adds .git if missing', () => {
+    expect(normalizeGitUrl('https://github.com/storybookjs/storybook')).toEqual(
+      'github.com/storybookjs/storybook.git'
+    );
+  });
+
   it('trims off #hash', () => {
     expect(normalizeGitUrl('https://github.com/storybookjs/storybook.git#next')).toEqual(
       'github.com/storybookjs/storybook.git'
@@ -85,3 +91,17 @@ describe('normalizeGitUrl', () => {
     );
   });
 });
+
+describe('unhashedProjectId', () => {
+  it('does not touch unix paths', () => {
+    expect(
+      unhashedProjectId('https://github.com/storybookjs/storybook.git\n', 'path/to/storybook')
+    ).toBe('github.com/storybookjs/storybook.gitpath/to/storybook');
+  });
+
+  it('normalizes windows paths', () => {
+    expect(
+      unhashedProjectId('https://github.com/storybookjs/storybook.git\n', 'path\\to\\storybook')
+    ).toBe('github.com/storybookjs/storybook.gitpath/to/storybook');
+  });
+});
diff --git a/code/core/src/telemetry/anonymous-id.ts b/code/core/src/telemetry/anonymous-id.ts
index c97071c0d127..1d23d0a493ae 100644
--- a/code/core/src/telemetry/anonymous-id.ts
+++ b/code/core/src/telemetry/anonymous-id.ts
@@ -3,6 +3,7 @@ import { relative } from 'node:path';
 import { getProjectRoot } from '@storybook/core/common';
 
 import { execSync } from 'child_process';
+import slash from 'slash';
 
 import { oneWayHash } from './one-way-hash';
 
@@ -16,7 +17,18 @@ export function normalizeGitUrl(rawUrl: string) {
   // Now strip off scheme
   const urlWithoutScheme = urlWithoutUser.replace(/^.*\/\//, '');
 
-  return urlWithoutScheme.replace(':', '/');
+  // Ensure the URL ends in `.git`
+  const urlWithExtension = urlWithoutScheme.endsWith('.git')
+    ? urlWithoutScheme
+    : `${urlWithoutScheme}.git`;
+
+  return urlWithExtension.replace(':', '/');
+}
+
+// we use a combination of remoteUrl and working directory
+// to separate multiple storybooks from the same project (e.g. monorepo)
+export function unhashedProjectId(remoteUrl: string, projectRootPath: string) {
+  return `${normalizeGitUrl(remoteUrl)}${slash(projectRootPath)}`;
 }
 
 let anonymousProjectId: string;
@@ -25,7 +37,6 @@ export const getAnonymousProjectId = () => {
     return anonymousProjectId;
   }
 
-  let unhashedProjectId;
   try {
     const projectRoot = getProjectRoot();
 
@@ -36,11 +47,7 @@ export const getAnonymousProjectId = () => {
       stdio: `pipe`,
     });
 
-    // we use a combination of remoteUrl and working directory
-    // to separate multiple storybooks from the same project (e.g. monorepo)
-    unhashedProjectId = `${normalizeGitUrl(String(originBuffer))}${projectRootPath}`;
-
-    anonymousProjectId = oneWayHash(unhashedProjectId);
+    anonymousProjectId = oneWayHash(unhashedProjectId(String(originBuffer), projectRootPath));
   } catch (_) {
     //
   }
diff --git a/code/core/src/telemetry/exec-command-count-lines.test.ts b/code/core/src/telemetry/exec-command-count-lines.test.ts
new file mode 100644
index 000000000000..eacfe9f72952
--- /dev/null
+++ b/code/core/src/telemetry/exec-command-count-lines.test.ts
@@ -0,0 +1,71 @@
+import type { Transform } from 'node:stream';
+import { PassThrough } from 'node:stream';
+
+import { beforeEach, describe, expect, it, vitest } from 'vitest';
+
+// eslint-disable-next-line depend/ban-dependencies
+import { execaCommand as rawExecaCommand } from 'execa';
+
+import { execCommandCountLines } from './exec-command-count-lines';
+
+vitest.mock('execa');
+
+const execaCommand = vitest.mocked(rawExecaCommand);
+beforeEach(() => {
+  execaCommand.mockReset();
+});
+
+type ExecaStreamer = typeof Promise & {
+  stdout: Transform;
+  kill: () => void;
+};
+
+function createExecaStreamer() {
+  let resolver: () => void;
+  const promiseLike: ExecaStreamer = new Promise<void>((aResolver, aRejecter) => {
+    resolver = aResolver;
+  }) as any;
+
+  promiseLike.stdout = new PassThrough();
+  // @ts-expect-error technically it is invalid to use resolver "before" it is assigned (but not really)
+  promiseLike.kill = resolver;
+  return promiseLike;
+}
+
+describe('execCommandCountLines', () => {
+  it('counts lines, many', async () => {
+    const streamer = createExecaStreamer();
+    execaCommand.mockReturnValue(streamer as any);
+
+    const promise = execCommandCountLines('some command');
+
+    streamer.stdout.write('First line\n');
+    streamer.stdout.write('Second line\n');
+    streamer.kill();
+
+    expect(await promise).toEqual(2);
+  });
+
+  it('counts lines, one', async () => {
+    const streamer = createExecaStreamer();
+    execaCommand.mockReturnValue(streamer as any);
+
+    const promise = execCommandCountLines('some command');
+
+    streamer.stdout.write('First line\n');
+    streamer.kill();
+
+    expect(await promise).toEqual(1);
+  });
+
+  it('counts lines, none', async () => {
+    const streamer = createExecaStreamer();
+    execaCommand.mockReturnValue(streamer as any);
+
+    const promise = execCommandCountLines('some command');
+
+    streamer.kill();
+
+    expect(await promise).toEqual(0);
+  });
+});
diff --git a/code/core/src/telemetry/exec-command-count-lines.ts b/code/core/src/telemetry/exec-command-count-lines.ts
new file mode 100644
index 000000000000..fdc4547ce464
--- /dev/null
+++ b/code/core/src/telemetry/exec-command-count-lines.ts
@@ -0,0 +1,35 @@
+import { createInterface } from 'node:readline';
+
+// eslint-disable-next-line depend/ban-dependencies
+import { execaCommand } from 'execa';
+
+/**
+ * Execute a command in the local terminal and count the lines in the result
+ *
+ * @param command The command to execute.
+ * @param options Execa options
+ * @returns The number of lines the command returned
+ */
+export async function execCommandCountLines(
+  command: string,
+  options?: Parameters<typeof execaCommand>[1]
+) {
+  const process = execaCommand(command, { shell: true, buffer: false, ...options });
+  if (!process.stdout) {
+    // eslint-disable-next-line local-rules/no-uncategorized-errors
+    throw new Error('Unexpected missing stdout');
+  }
+
+  let lineCount = 0;
+  const rl = createInterface(process.stdout);
+  rl.on('line', () => {
+    lineCount += 1;
+  });
+
+  // If the process errors, this will throw
+  await process;
+
+  rl.close();
+
+  return lineCount;
+}
diff --git a/code/core/src/telemetry/get-application-file-count.test.ts b/code/core/src/telemetry/get-application-file-count.test.ts
new file mode 100644
index 000000000000..7fc570689147
--- /dev/null
+++ b/code/core/src/telemetry/get-application-file-count.test.ts
@@ -0,0 +1,14 @@
+import { join } from 'node:path';
+
+import { describe, expect, it } from 'vitest';
+
+import { getApplicationFilesCountUncached } from './get-application-file-count';
+
+const mocksDir = join(__dirname, '..', '__mocks__');
+
+describe('getApplicationFilesCount', () => {
+  it('should find files with correct names', async () => {
+    const files = await getApplicationFilesCountUncached(mocksDir);
+    expect(files).toMatchInlineSnapshot(`2`);
+  });
+});
diff --git a/code/core/src/telemetry/get-application-file-count.ts b/code/core/src/telemetry/get-application-file-count.ts
new file mode 100644
index 000000000000..4f4807ddff00
--- /dev/null
+++ b/code/core/src/telemetry/get-application-file-count.ts
@@ -0,0 +1,32 @@
+import { sep } from 'node:path';
+
+import { execCommandCountLines } from './exec-command-count-lines';
+import { runTelemetryOperation } from './run-telemetry-operation';
+
+// We are looking for files with the word "page" or "screen" somewhere in them with these exts
+const nameMatches = ['page', 'screen'];
+const extensions = ['js', 'jsx', 'ts', 'tsx'];
+
+export const getApplicationFilesCountUncached = async (basePath: string) => {
+  const bothCasesNameMatches = nameMatches.flatMap((match) => [
+    match,
+    [match[0].toUpperCase(), ...match.slice(1)].join(''),
+  ]);
+
+  const globs = bothCasesNameMatches.flatMap((match) =>
+    extensions.map((extension) => `"${basePath}${sep}*${match}*.${extension}"`)
+  );
+
+  try {
+    const command = `git ls-files -- ${globs.join(' ')}`;
+    return await execCommandCountLines(command);
+  } catch {
+    return undefined;
+  }
+};
+
+export const getApplicationFileCount = async (path: string) => {
+  return runTelemetryOperation('applicationFiles', async () =>
+    getApplicationFilesCountUncached(path)
+  );
+};
diff --git a/code/core/src/telemetry/get-has-router-package.test.ts b/code/core/src/telemetry/get-has-router-package.test.ts
new file mode 100644
index 000000000000..8504a5bc4d84
--- /dev/null
+++ b/code/core/src/telemetry/get-has-router-package.test.ts
@@ -0,0 +1,29 @@
+import { expect, it } from 'vitest';
+
+import { getHasRouterPackage } from './get-has-router-package';
+
+it('returns true if there is a routing package in package.json', () => {
+  expect(
+    getHasRouterPackage({
+      dependencies: {
+        react: '^18',
+        'react-dom': '^18',
+        'react-router': '^6',
+      },
+    })
+  ).toBe(true);
+});
+
+it('returns false if there is a routing package in package.json dependencies', () => {
+  expect(
+    getHasRouterPackage({
+      dependencies: {
+        react: '^18',
+        'react-dom': '^18',
+      },
+      devDependencies: {
+        'react-router': '^6',
+      },
+    })
+  ).toBe(false);
+});
diff --git a/code/core/src/telemetry/get-has-router-package.ts b/code/core/src/telemetry/get-has-router-package.ts
new file mode 100644
index 000000000000..5873c3832d25
--- /dev/null
+++ b/code/core/src/telemetry/get-has-router-package.ts
@@ -0,0 +1,37 @@
+import type { PackageJson } from '../types';
+
+const routerPackages = new Set([
+  'react-router',
+  'react-router-dom',
+  'remix',
+  '@tanstack/react-router',
+  'expo-router',
+  '@reach/router',
+  'react-easy-router',
+  '@remix-run/router',
+  'wouter',
+  'wouter-preact',
+  'preact-router',
+  'vue-router',
+  'unplugin-vue-router',
+  '@angular/router',
+  '@solidjs/router',
+
+  // metaframeworks that imply routing
+  'next',
+  'react-scripts',
+  'gatsby',
+  'nuxt',
+  '@sveltejs/kit',
+]);
+
+/**
+ * @param packageJson The package JSON of the project
+ * @returns Boolean Does this project use a routing package?
+ */
+export function getHasRouterPackage(packageJson: PackageJson) {
+  // NOTE: we just check real dependencies; if it is in dev dependencies, it may just be an example
+  return Object.keys(packageJson?.dependencies ?? {}).some((depName) =>
+    routerPackages.has(depName)
+  );
+}
diff --git a/code/core/src/telemetry/get-portable-stories-usage.ts b/code/core/src/telemetry/get-portable-stories-usage.ts
index e328a3283c57..0831b484ab69 100644
--- a/code/core/src/telemetry/get-portable-stories-usage.ts
+++ b/code/core/src/telemetry/get-portable-stories-usage.ts
@@ -1,36 +1,18 @@
-import { execaCommand } from 'execa';
-
-import { createFileSystemCache, resolvePathInStorybookCache } from '../common';
-
-const cache = createFileSystemCache({
-  basePath: resolvePathInStorybookCache('portable-stories'),
-  ns: 'storybook',
-  ttl: 24 * 60 * 60 * 1000, // 24h
-});
+import { execCommandCountLines } from './exec-command-count-lines';
+import { runTelemetryOperation } from './run-telemetry-operation';
 
 export const getPortableStoriesFileCountUncached = async (path?: string) => {
-  const command = `git grep -l composeStor` + (path ? ` -- ${path}` : '');
-  const { stdout } = await execaCommand(command, {
-    cwd: process.cwd(),
-    shell: true,
-  });
-
-  return stdout.split('\n').filter(Boolean).length;
+  try {
+    const command = `git grep -l composeStor` + (path ? ` -- ${path}` : '');
+    return await execCommandCountLines(command);
+  } catch (err: any) {
+    // exit code 1 if no matches are found
+    return err.exitCode === 1 ? 0 : undefined;
+  }
 };
 
-const CACHE_KEY = 'portableStories';
 export const getPortableStoriesFileCount = async (path?: string) => {
-  let cached = await cache.get(CACHE_KEY);
-  if (!cached) {
-    try {
-      const count = await getPortableStoriesFileCountUncached();
-      cached = { count };
-      await cache.set(CACHE_KEY, cached);
-    } catch (err: any) {
-      // exit code 1 if no matches are found
-      const count = err.exitCode === 1 ? 0 : null;
-      cached = { count };
-    }
-  }
-  return cached.count;
+  return runTelemetryOperation('portableStories', async () =>
+    getPortableStoriesFileCountUncached(path)
+  );
 };
diff --git a/code/core/src/telemetry/notify.ts b/code/core/src/telemetry/notify.ts
index 171d48ae671f..a6cf3e5b8b51 100644
--- a/code/core/src/telemetry/notify.ts
+++ b/code/core/src/telemetry/notify.ts
@@ -1,6 +1,6 @@
 import { cache } from '@storybook/core/common';
 
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 
 const TELEMETRY_KEY_NOTIFY_DATE = 'telemetry-notification-date';
 
@@ -20,14 +20,14 @@ export const notify = async () => {
 
   logger.log();
   logger.log(
-    `${chalk.magenta.bold(
-      'attention'
+    `${picocolors.magenta(
+      picocolors.bold('attention')
     )} => Storybook now collects completely anonymous telemetry regarding usage.`
   );
   logger.log(`This information is used to shape Storybook's roadmap and prioritize features.`);
   logger.log(
     `You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:`
   );
-  logger.log(chalk.cyan('https://storybook.js.org/telemetry'));
+  logger.log(picocolors.cyan('https://storybook.js.org/telemetry'));
   logger.log();
 };
diff --git a/code/core/src/telemetry/run-telemetry-operation.ts b/code/core/src/telemetry/run-telemetry-operation.ts
new file mode 100644
index 000000000000..29d2aee6c721
--- /dev/null
+++ b/code/core/src/telemetry/run-telemetry-operation.ts
@@ -0,0 +1,25 @@
+import { createFileSystemCache, resolvePathInStorybookCache } from '../common';
+
+const cache = createFileSystemCache({
+  basePath: resolvePathInStorybookCache('telemetry'),
+  ns: 'storybook',
+  ttl: 24 * 60 * 60 * 1000, // 24h
+});
+
+/**
+ * Run an (expensive) operation, caching the result in a FS cache for 24 hours.
+ *
+ * NOTE: if the operation returns `undefined` the value will not be cached. Use this to indicate
+ * that the operation failed.
+ */
+export const runTelemetryOperation = async <T>(cacheKey: string, operation: () => Promise<T>) => {
+  let cached = await cache.get<T>(cacheKey);
+  if (cached === undefined) {
+    cached = await operation();
+    // Undefined indicates an error, setting isn't really valuable.
+    if (cached !== undefined) {
+      await cache.set(cacheKey, cached);
+    }
+  }
+  return cached;
+};
diff --git a/code/core/src/telemetry/storybook-metadata.test.ts b/code/core/src/telemetry/storybook-metadata.test.ts
index 06bf355c0688..8d73ff7b437d 100644
--- a/code/core/src/telemetry/storybook-metadata.test.ts
+++ b/code/core/src/telemetry/storybook-metadata.test.ts
@@ -12,6 +12,8 @@ const packageJsonMock: PackageJson = {
   version: 'x.x.x',
 };
 
+const packageJsonPath = process.cwd();
+
 const mainJsMock: StorybookConfig = {
   stories: [],
 };
@@ -126,6 +128,7 @@ describe('storybook-metadata', () => {
       it('should parse pnp paths for known frameworks', async () => {
         const unixResult = await computeStorybookMetadata({
           packageJson: packageJsonMock,
+          packageJsonPath,
           mainConfig: {
             ...mainJsMock,
             framework: {
@@ -144,6 +147,7 @@ describe('storybook-metadata', () => {
 
         const windowsResult = await computeStorybookMetadata({
           packageJson: packageJsonMock,
+          packageJsonPath,
           mainConfig: {
             ...mainJsMock,
             framework: {
@@ -164,6 +168,7 @@ describe('storybook-metadata', () => {
       it('should parse pnp paths for unknown frameworks', async () => {
         const unixResult = await computeStorybookMetadata({
           packageJson: packageJsonMock,
+          packageJsonPath,
           mainConfig: {
             ...mainJsMock,
             framework: {
@@ -178,6 +183,7 @@ describe('storybook-metadata', () => {
 
         const windowsResult = await computeStorybookMetadata({
           packageJson: packageJsonMock,
+          packageJsonPath,
           mainConfig: {
             ...mainJsMock,
             framework: {
@@ -198,6 +204,7 @@ describe('storybook-metadata', () => {
 
         const unixResult = await computeStorybookMetadata({
           packageJson: packageJsonMock,
+          packageJsonPath,
           mainConfig: {
             ...mainJsMock,
             framework: {
@@ -215,6 +222,7 @@ describe('storybook-metadata', () => {
         cwdSpy = vi.spyOn(process, 'cwd').mockReturnValue('C:\\Users\\foo\\my-project');
         const windowsResult = await computeStorybookMetadata({
           packageJson: packageJsonMock,
+          packageJsonPath,
           mainConfig: {
             ...mainJsMock,
             framework: {
@@ -232,6 +240,7 @@ describe('storybook-metadata', () => {
     it('should return frameworkOptions from mainjs', async () => {
       const reactResult = await computeStorybookMetadata({
         packageJson: packageJsonMock,
+        packageJsonPath,
         mainConfig: {
           ...mainJsMock,
           framework: {
@@ -250,6 +259,7 @@ describe('storybook-metadata', () => {
 
       const angularResult = await computeStorybookMetadata({
         packageJson: packageJsonMock,
+        packageJsonPath,
         mainConfig: {
           ...mainJsMock,
           framework: {
@@ -279,6 +289,7 @@ describe('storybook-metadata', () => {
             'storybook-addon-deprecated': 'x.x.z',
           },
         } as PackageJson,
+        packageJsonPath,
         mainConfig: {
           ...mainJsMock,
           addons: [
@@ -319,6 +330,7 @@ describe('storybook-metadata', () => {
 
       const result = await computeStorybookMetadata({
         packageJson: packageJsonMock,
+        packageJsonPath,
         mainConfig: {
           ...mainJsMock,
           features,
@@ -332,6 +344,7 @@ describe('storybook-metadata', () => {
       expect(
         await computeStorybookMetadata({
           packageJson: packageJsonMock,
+          packageJsonPath,
           mainConfig: {
             ...mainJsMock,
             framework: '@storybook/react-vite',
@@ -347,6 +360,7 @@ describe('storybook-metadata', () => {
     it('should return the number of refs', async () => {
       const res = await computeStorybookMetadata({
         packageJson: packageJsonMock,
+        packageJsonPath,
         mainConfig: {
           ...mainJsMock,
           refs: {
@@ -361,6 +375,7 @@ describe('storybook-metadata', () => {
     it('only reports addon options for addon-essentials', async () => {
       const res = await computeStorybookMetadata({
         packageJson: packageJsonMock,
+        packageJsonPath,
         mainConfig: {
           ...mainJsMock,
           addons: [
@@ -395,6 +410,7 @@ describe('storybook-metadata', () => {
               [metaFramework]: 'x.x.x',
             },
           } as PackageJson,
+          packageJsonPath,
           mainConfig: mainJsMock,
         });
         expect(res.metaFramework).toEqual({
diff --git a/code/core/src/telemetry/storybook-metadata.ts b/code/core/src/telemetry/storybook-metadata.ts
index 75804b813fc2..5258eef0ffb7 100644
--- a/code/core/src/telemetry/storybook-metadata.ts
+++ b/code/core/src/telemetry/storybook-metadata.ts
@@ -1,3 +1,5 @@
+import { dirname } from 'node:path';
+
 import {
   getProjectRoot,
   getStorybookConfiguration,
@@ -9,10 +11,12 @@ import type { PackageJson, StorybookConfig } from '@storybook/core/types';
 import { readConfig } from '@storybook/core/csf-tools';
 
 import { detect, getNpmVersion } from 'detect-package-manager';
-import { findPackage } from 'fd-package-json';
+import { findPackage, findPackagePath } from 'fd-package-json';
 
+import { getApplicationFileCount } from './get-application-file-count';
 import { getChromaticVersionSpecifier } from './get-chromatic-version';
 import { getFrameworkInfo } from './get-framework-info';
+import { getHasRouterPackage } from './get-has-router-package';
 import { getMonorepoType } from './get-monorepo-type';
 import { getPortableStoriesFileCount } from './get-portable-stories-usage';
 import { getActualPackageVersion, getActualPackageVersions } from './package-json';
@@ -41,9 +45,11 @@ export const sanitizeAddonName = (name: string) => {
 // Analyze a combination of information from main.js and package.json
 // to provide telemetry over a Storybook project
 export const computeStorybookMetadata = async ({
+  packageJsonPath,
   packageJson,
   mainConfig,
 }: {
+  packageJsonPath: string;
   packageJson: PackageJson;
   mainConfig: StorybookConfig & Record<string, any>;
 }): Promise<StorybookMetadata> => {
@@ -100,6 +106,8 @@ export const computeStorybookMetadata = async ({
     )
   );
 
+  metadata.hasRouterPackage = getHasRouterPackage(packageJson);
+
   const monorepoType = getMonorepoType();
   if (monorepoType) {
     metadata.monorepo = monorepoType;
@@ -209,11 +217,13 @@ export const computeStorybookMetadata = async ({
 
   const storybookVersion = storybookPackages[storybookInfo.frameworkPackage]?.version;
   const portableStoriesFileCount = await getPortableStoriesFileCount();
+  const applicationFileCount = await getApplicationFileCount(dirname(packageJsonPath));
 
   return {
     ...metadata,
     ...frameworkInfo,
     portableStoriesFileCount,
+    applicationFileCount,
     storybookVersion,
     storybookVersionSpecifier: storybookInfo.version,
     language,
@@ -223,13 +233,29 @@ export const computeStorybookMetadata = async ({
   };
 };
 
+async function getPackageJsonDetails() {
+  const packageJsonPath = await findPackagePath(process.cwd());
+  if (packageJsonPath) {
+    return {
+      packageJsonPath,
+      packageJson: (await findPackage(packageJsonPath)) || {},
+    };
+  }
+
+  // If we don't find a `package.json`, we assume it "would have" been in the current working directory
+  return {
+    packageJsonPath: process.cwd(),
+    packageJson: {},
+  };
+}
+
 let cachedMetadata: StorybookMetadata;
 export const getStorybookMetadata = async (_configDir?: string) => {
   if (cachedMetadata) {
     return cachedMetadata;
   }
 
-  const packageJson = (await findPackage(process.cwd())) || {};
+  const { packageJson, packageJsonPath } = await getPackageJsonDetails();
   // TODO: improve the way configDir is extracted, as a "storybook" script might not be present
   // Scenarios:
   // 1. user changed it to something else e.g. "storybook:dev"
@@ -243,6 +269,6 @@ export const getStorybookMetadata = async (_configDir?: string) => {
       ) as string)) ??
     '.storybook';
   const mainConfig = await loadMainConfig({ configDir });
-  cachedMetadata = await computeStorybookMetadata({ mainConfig, packageJson });
+  cachedMetadata = await computeStorybookMetadata({ mainConfig, packageJson, packageJsonPath });
   return cachedMetadata;
 };
diff --git a/code/core/src/telemetry/types.ts b/code/core/src/telemetry/types.ts
index 699a8da6e83b..e43373e5e61b 100644
--- a/code/core/src/telemetry/types.ts
+++ b/code/core/src/telemetry/types.ts
@@ -20,7 +20,10 @@ export type EventType =
   | 'remove'
   | 'save-story'
   | 'create-new-story-file'
-  | 'create-new-story-file-search';
+  | 'create-new-story-file-search'
+  | 'testing-module-watch-mode'
+  | 'testing-module-completed-report'
+  | 'testing-module-crash-report';
 
 export interface Dependency {
   version: string | undefined;
@@ -56,6 +59,7 @@ export type StorybookMetadata = {
     version: string;
   };
   testPackages?: Record<string, string | undefined>;
+  hasRouterPackage?: boolean;
   hasStorybookEslint?: boolean;
   hasStaticDirs?: boolean;
   hasCustomWebpack?: boolean;
@@ -66,6 +70,7 @@ export type StorybookMetadata = {
     usesGlobals?: boolean;
   };
   portableStoriesFileCount?: number;
+  applicationFileCount?: number;
 };
 
 export interface Payload {
diff --git a/code/core/src/types/modules/addons.ts b/code/core/src/types/modules/addons.ts
index 7c80da4f297c..b2c7b4ac2f3c 100644
--- a/code/core/src/types/modules/addons.ts
+++ b/code/core/src/types/modules/addons.ts
@@ -1,9 +1,11 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import type { FC, PropsWithChildren, ReactElement, ReactNode } from 'react';
 
+import type { TestProviderConfig, TestingModuleProgressReportProgress } from '../../core-events';
 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_StoryEntry } from './api-stories';
 import type {
   Args,
   ArgsStoryFn as ArgsStoryFnForFramework,
@@ -26,6 +28,7 @@ export type Addon_Types = Exclude<
   Addon_TypesEnum,
   | Addon_TypesEnum.experimental_PAGE
   | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
+  | Addon_TypesEnum.experimental_TEST_PROVIDER
   | Addon_TypesEnum.experimental_SIDEBAR_TOP
 >;
 
@@ -176,7 +179,7 @@ export interface Addon_BaseAnnotations<
   /**
    * Dynamic data that are provided (and possibly updated by) Storybook and its addons.
    *
-   * @see [Arg story inputs](https://storybook.js.org/docs/react/api/csf#args-story-inputs)
+   * @see [Arg story inputs](https://storybook.js.org/docs/api/csf#args-story-inputs)
    */
   args?: Partial<TArgs>;
 
@@ -184,14 +187,14 @@ export interface Addon_BaseAnnotations<
    * ArgTypes encode basic metadata for args, such as `name`, `description`, `defaultValue` for an
    * arg. These get automatically filled in by Storybook Docs.
    *
-   * @see [Arg types](https://storybook.js.org/docs/react/api/arg-types)
+   * @see [Arg types](https://storybook.js.org/docs/api/arg-types)
    */
   argTypes?: Addons_ArgTypes<TArgs>;
 
   /**
    * Custom metadata for a story.
    *
-   * @see [Parameters](https://storybook.js.org/docs/react/writing-stories/parameters)
+   * @see [Parameters](https://storybook.js.org/docs/writing-stories/parameters)
    */
   parameters?: Parameters;
 
@@ -200,7 +203,7 @@ export interface Addon_BaseAnnotations<
    *
    * Decorators defined in Meta will be applied to every story variation.
    *
-   * @see [Decorators](https://storybook.js.org/docs/addons/#1-decorators)
+   * @see [Decorators](https://storybook.js.org/docs/writing-stories/decorators)
    */
   decorators?: Addon_BaseDecorators<StoryFnReturnType>;
 
@@ -227,7 +230,7 @@ export interface Addon_Annotations<TArgs, StoryFnReturnType>
    * includeStories: /.*Story$/;
    * ```
    *
-   * @see [Non-story exports](https://storybook.js.org/docs/formats/component-story-format/#non-story-exports)
+   * @see [Non-story exports](https://storybook.js.org/docs/api/csf#non-story-exports)
    */
   includeStories?: string[] | RegExp;
 
@@ -242,7 +245,7 @@ export interface Addon_Annotations<TArgs, StoryFnReturnType>
    * excludeStories: /.*Data$/;
    * ```
    *
-   * @see [Non-story exports](https://storybook.js.org/docs/formats/component-story-format/#non-story-exports)
+   * @see [Non-story exports](https://storybook.js.org/docs/api/csf#non-story-exports)
    */
   excludeStories?: string[] | RegExp;
 }
@@ -261,7 +264,7 @@ export interface Addon_BaseMeta<ComponentType> {
    * export default { title: 'Design System/Atoms/Button' };
    * ```
    *
-   * @see [Story Hierarchy](https://storybook.js.org/docs/basics/writing-stories/#story-hierarchy)
+   * @see [Story Hierarchy](https://storybook.js.org/docs/writing-stories/naming-components-and-hierarchy)
    */
   title?: string;
 
@@ -272,7 +275,7 @@ export interface Addon_BaseMeta<ComponentType> {
    * Storybook will prioritize the id over the title for ID generation, if provided, and will
    * prioritize the story.storyName over the export key for display.
    *
-   * @see [Sidebar and URLs](https://storybook.js.org/docs/react/configure/sidebar-and-urls#permalinking-to-stories)
+   * @see [Sidebar and URLs](https://storybook.js.org/docs/configure/user-interface/sidebar-and-urls#permalink-to-stories)
    */
   id?: string;
 
@@ -326,7 +329,8 @@ export type Addon_Type =
   | Addon_PageType
   | Addon_WrapperType
   | Addon_SidebarBottomType
-  | Addon_SidebarTopType;
+  | Addon_SidebarTopType
+  | Addon_TestProviderType<Addon_TestProviderState>;
 export interface Addon_BaseType {
   /**
    * The title of the addon. This can be a simple string, but it can also be a
@@ -348,6 +352,7 @@ export interface Addon_BaseType {
     | Addon_TypesEnum.experimental_PAGE
     | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
     | Addon_TypesEnum.experimental_SIDEBAR_TOP
+    | Addon_TypesEnum.experimental_TEST_PROVIDER
   >;
   /**
    * The unique id of the addon.
@@ -387,7 +392,7 @@ export interface Addon_BaseType {
   /** @unstable */
   paramKey?: string;
   /** @unstable */
-  disabled?: boolean;
+  disabled?: boolean | ((parameters: API_StoryEntry['parameters']) => boolean);
   /** @unstable */
   hidden?: boolean;
 }
@@ -461,12 +466,57 @@ export interface Addon_SidebarTopType {
   render: FC;
 }
 
+export interface Addon_TestProviderType<
+  Details extends { [key: string]: any } = NonNullable<unknown>,
+  Config extends { [key: string]: any } = NonNullable<unknown>,
+> {
+  type: Addon_TypesEnum.experimental_TEST_PROVIDER;
+  /** The unique id of the test provider. */
+  id: string;
+  name: string;
+  /** @deprecated Use render instead */
+  title?: (state: TestProviderConfig & Addon_TestProviderState<Details, Config>) => ReactNode;
+  /** @deprecated Use render instead */
+  description?: (state: TestProviderConfig & Addon_TestProviderState<Details, Config>) => ReactNode;
+  render?: (state: TestProviderConfig & Addon_TestProviderState<Details, Config>) => ReactNode;
+  sidebarContextMenu?: (options: {
+    context: API_HashEntry;
+    state: TestProviderConfig & Addon_TestProviderState<Details, Config>;
+  }) => ReactNode;
+  stateUpdater?: (
+    state: TestProviderConfig & Addon_TestProviderState<Details, Config>,
+    update: Partial<Addon_TestProviderState<Details, Config>>
+  ) => void | Partial<TestProviderConfig & Addon_TestProviderState<Details, Config>>;
+  runnable?: boolean;
+  watchable?: boolean;
+}
+
+export type Addon_TestProviderState<
+  Details extends { [key: string]: any } = NonNullable<unknown>,
+  Config extends { [key: string]: any } = NonNullable<unknown>,
+> = Pick<Addon_TestProviderType, 'runnable' | 'watchable'> & {
+  progress?: TestingModuleProgressReportProgress;
+  details: Details;
+  cancellable: boolean;
+  cancelling: boolean;
+  running: boolean;
+  watching: boolean;
+  failed: boolean;
+  crashed: boolean;
+  error?: {
+    name: string;
+    message?: string;
+  };
+  config?: Config;
+};
+
 type Addon_TypeBaseNames = Exclude<
   Addon_TypesEnum,
   | Addon_TypesEnum.PREVIEW
   | Addon_TypesEnum.experimental_PAGE
   | Addon_TypesEnum.experimental_SIDEBAR_BOTTOM
   | Addon_TypesEnum.experimental_SIDEBAR_TOP
+  | Addon_TypesEnum.experimental_TEST_PROVIDER
 >;
 
 export interface Addon_TypesMapping extends Record<Addon_TypeBaseNames, Addon_BaseType> {
@@ -474,6 +524,7 @@ export interface Addon_TypesMapping extends Record<Addon_TypeBaseNames, Addon_Ba
   [Addon_TypesEnum.experimental_PAGE]: Addon_PageType;
   [Addon_TypesEnum.experimental_SIDEBAR_BOTTOM]: Addon_SidebarBottomType;
   [Addon_TypesEnum.experimental_SIDEBAR_TOP]: Addon_SidebarTopType;
+  [Addon_TypesEnum.experimental_TEST_PROVIDER]: Addon_TestProviderType<Addon_TestProviderState>;
 }
 
 export type Addon_Loader<API> = (api: API) => void;
@@ -537,4 +588,6 @@ export enum Addon_TypesEnum {
    * @deprecated This will be removed in Storybook 9.0.
    */
   experimental_SIDEBAR_TOP = 'sidebar-top',
+  /** This adds items to the Testing Module in the sidebar. */
+  experimental_TEST_PROVIDER = 'test-provider',
 }
diff --git a/code/core/src/types/modules/api-stories.ts b/code/core/src/types/modules/api-stories.ts
index 29e82c40e74a..c94719215112 100644
--- a/code/core/src/types/modules/api-stories.ts
+++ b/code/core/src/types/modules/api-stories.ts
@@ -7,6 +7,7 @@ export interface API_BaseEntry {
   id: StoryId;
   depth: number;
   name: string;
+  tags: Tag[];
   refId?: string;
   renderLabel?: (item: API_BaseEntry, api: any) => any;
 }
@@ -34,7 +35,6 @@ export interface API_DocsEntry extends API_BaseEntry {
   parent: StoryId;
   title: ComponentTitle;
   importPath: Path;
-  tags: Tag[];
   prepared: boolean;
   parameters?: {
     [parameterName: string]: any;
@@ -46,7 +46,6 @@ export interface API_StoryEntry extends API_BaseEntry {
   parent: StoryId;
   title: ComponentTitle;
   importPath: Path;
-  tags: Tag[];
   prepared: boolean;
   parameters?: {
     [parameterName: string]: any;
@@ -125,6 +124,7 @@ export interface API_StatusObject {
   description: string;
   data?: any;
   onClick?: () => void;
+  sidebarContextMenu?: boolean;
 }
 
 export type API_StatusState = Record<StoryId, Record<string, API_StatusObject>>;
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'
diff --git a/code/core/src/types/modules/composedStory.ts b/code/core/src/types/modules/composedStory.ts
index 81ef2ef58c98..c5a58b280cd3 100644
--- a/code/core/src/types/modules/composedStory.ts
+++ b/code/core/src/types/modules/composedStory.ts
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import type {
+  Globals,
   ProjectAnnotations,
   Renderer,
   StoryContext,
@@ -8,6 +9,7 @@ import type {
   Tag,
 } from '@storybook/csf';
 
+import type { ReporterAPI } from '../../preview-api';
 import type {
   AnnotatedStoryFn,
   Args,
@@ -48,7 +50,9 @@ export type ComposedStoryFn<
   storyName: string;
   parameters: Parameters;
   argTypes: StrictArgTypes<TArgs>;
+  reporting: ReporterAPI;
   tags: Tag[];
+  globals: Globals;
 };
 /**
  * Based on a module of stories, it returns all stories within it, filtering non-stories Each story
diff --git a/code/core/src/types/modules/core-common.ts b/code/core/src/types/modules/core-common.ts
index 8e71a4cadb2a..2b4624a0564b 100644
--- a/code/core/src/types/modules/core-common.ts
+++ b/code/core/src/types/modules/core-common.ts
@@ -1,11 +1,11 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import type { Router } from 'express';
-import type { FileSystemCache } from 'file-system-cache';
 // should be node:http, but that caused the ui/manager to fail to build, might be able to switch this back once ui/manager is in the core
-import type { Server } from 'http';
-import type * as telejson from 'telejson';
+import type { Server as HttpServer, IncomingMessage, ServerResponse } from 'http';
+import type { Server as NetServer } from 'net';
+import type { Options as TelejsonOptions } from 'telejson';
 import type { PackageJson as PackageJsonFromTypeFest } from 'type-fest';
 
+import type { FileSystemCache } from '../../common/utils/file-cache';
 import type { Indexer, StoriesEntry } from './indexer';
 
 /** ⚠️ This file contains internal WIP types they MUST NOT be exported outside this package for now! */
@@ -26,7 +26,7 @@ export interface CoreConfig {
       };
   renderer?: RendererName;
   disableWebpackDefaults?: boolean;
-  channelOptions?: Partial<telejson.Options>;
+  channelOptions?: Partial<TelejsonOptions>;
   /** Disables the generation of project.json, a file containing Storybook metadata */
   disableProjectJson?: boolean;
   /**
@@ -71,6 +71,7 @@ export interface Presets {
   apply(extension: 'babel', config?: {}, args?: any): Promise<any>;
   apply(extension: 'swc', config?: {}, args?: any): Promise<any>;
   apply(extension: 'entries', config?: [], args?: any): Promise<unknown>;
+  apply(extension: 'env', config?: {}, args?: any): Promise<any>;
   apply(extension: 'stories', config?: [], args?: any): Promise<StoriesEntry[]>;
   apply(extension: 'managerEntries', config: [], args?: any): Promise<string[]>;
   apply(extension: 'refs', config?: [], args?: any): Promise<StorybookConfigRaw['refs']>;
@@ -156,7 +157,7 @@ export interface LoadOptions {
   configDir?: string;
   cacheKey?: string;
   ignorePreview?: boolean;
-  extendServer?: (server: Server) => void;
+  extendServer?: (server: HttpServer) => void;
 }
 
 export interface CLIOptions {
@@ -194,6 +195,7 @@ export interface BuilderOptions {
   ignorePreview?: boolean;
   cache?: FileSystemCache;
   configDir: string;
+  projectRoot?: string;
   docsMode?: boolean;
   features?: StorybookConfigRaw['features'];
   versionCheck?: VersionCheck;
@@ -211,13 +213,37 @@ export type Options = LoadOptions &
   CLIOptions &
   BuilderOptions & { build?: TestBuildConfig };
 
+// A minimal version of Polka's interface to avoid exposing internal implementation details
+export type Middleware<T extends IncomingMessage = IncomingMessage> = (
+  req: T & IncomingMessage,
+  res: ServerResponse,
+  next: (err?: string | Error) => Promise<void> | void
+) => Promise<void> | void;
+
+interface ServerApp<T extends IncomingMessage = IncomingMessage> {
+  server: NetServer;
+
+  use(pattern: RegExp | string, ...handlers: Middleware<T>[]): this;
+  use(...handlers: Middleware<T>[]): this;
+
+  get(pattern: RegExp | string, ...handlers: Middleware<T>[]): this;
+  post(pattern: RegExp | string, ...handlers: Middleware<T>[]): this;
+  put(pattern: RegExp | string, ...handlers: Middleware<T>[]): this;
+  patch(pattern: RegExp | string, ...handlers: Middleware<T>[]): this;
+  delete(pattern: RegExp | string, ...handlers: Middleware<T>[]): this;
+  head(pattern: RegExp | string, ...handlers: Middleware<T>[]): this;
+  options(pattern: RegExp | string, ...handlers: Middleware<T>[]): this;
+  connect(pattern: RegExp | string, ...handlers: Middleware<T>[]): this;
+  trace(pattern: RegExp | string, ...handlers: Middleware<T>[]): this;
+}
+
 export interface Builder<Config, BuilderStats extends Stats = Stats> {
   getConfig: (options: Options) => Promise<Config>;
   start: (args: {
     options: Options;
     startTime: ReturnType<typeof process.hrtime>;
-    router: Router;
-    server: Server;
+    router: ServerApp;
+    server: HttpServer;
     channel: ServerChannel;
   }) => Promise<void | {
     stats?: BuilderStats;
@@ -354,6 +380,8 @@ export interface StorybookConfigRaw {
     viewportStoryGlobals?: boolean;
     /** Use globals & globalTypes for configuring the backgrounds addon */
     backgroundsStoryGlobals?: boolean;
+    /** Set NODE_ENV to development in built Storybooks for better testability and debuggability */
+    developmentModeForBuild?: boolean;
   };
 
   build?: TestBuildConfig;
diff --git a/code/core/src/types/modules/csf.ts b/code/core/src/types/modules/csf.ts
index ae949e766fa8..fe0914bd398a 100644
--- a/code/core/src/types/modules/csf.ts
+++ b/code/core/src/types/modules/csf.ts
@@ -3,6 +3,7 @@ import type { ViewMode as ViewModeBase } from '@storybook/csf';
 import type { Addon_OptionsParameter } from './addons';
 
 export type {
+  AfterEach,
   AnnotatedStoryFn,
   Args,
   ArgsEnhancer,
@@ -11,6 +12,7 @@ export type {
   ArgTypes,
   ArgTypesEnhancer,
   BaseAnnotations,
+  BeforeEach,
   Canvas,
   ComponentAnnotations,
   ComponentId,
diff --git a/code/core/src/types/modules/frameworks.ts b/code/core/src/types/modules/frameworks.ts
index 2f2028db810b..8e0ec1a7eea0 100644
--- a/code/core/src/types/modules/frameworks.ts
+++ b/code/core/src/types/modules/frameworks.ts
@@ -8,6 +8,7 @@ export type SupportedFrameworks =
   | 'nextjs'
   | 'preact-vite'
   | 'preact-webpack5'
+  | 'react-native-web-vite'
   | 'react-vite'
   | 'react-webpack5'
   | 'server-webpack5'
@@ -20,5 +21,6 @@ export type SupportedFrameworks =
   | 'web-components-webpack5'
   | 'qwik'
   | 'solid'
+  | 'nuxt'
   | 'react-rsbuild'
   | 'vue3-rsbuild';
diff --git a/code/core/src/types/modules/renderers.ts b/code/core/src/types/modules/renderers.ts
index 4fcf0be99d87..e6fd0f650bf3 100644
--- a/code/core/src/types/modules/renderers.ts
+++ b/code/core/src/types/modules/renderers.ts
@@ -11,4 +11,5 @@ export type SupportedRenderers =
   | 'html'
   | 'web-components'
   | 'server'
-  | 'solid';
+  | 'solid'
+  | 'nuxt';
diff --git a/code/core/src/types/modules/story.ts b/code/core/src/types/modules/story.ts
index f8deb8c522f0..c4b07fa1cd30 100644
--- a/code/core/src/types/modules/story.ts
+++ b/code/core/src/types/modules/story.ts
@@ -109,6 +109,7 @@ export type PreparedStory<TRenderer extends Renderer = Renderer> =
     unboundStoryFn: LegacyStoryFn<TRenderer>;
     applyLoaders: (context: StoryContext<TRenderer>) => Promise<StoryContext<TRenderer>['loaded']>;
     applyBeforeEach: (context: StoryContext<TRenderer>) => Promise<CleanupCallback[]>;
+    applyAfterEach: (context: StoryContext<TRenderer>) => Promise<void>;
     playFunction?: (context: StoryContext<TRenderer>) => Promise<void> | void;
     runStep: StepRunner<TRenderer>;
     mount: (context: StoryContext<TRenderer>) => () => Promise<Canvas>;
diff --git a/code/core/template/stories/args.stories.ts b/code/core/template/stories/args.stories.ts
index 4f3b766b5a30..4c83a98ca0ae 100644
--- a/code/core/template/stories/args.stories.ts
+++ b/code/core/template/stories/args.stories.ts
@@ -8,7 +8,13 @@ import {
   UPDATE_STORY_ARGS,
 } from '@storybook/core/core-events';
 
-import pick from 'lodash/pick';
+function pick(obj, keys) {
+  const result = {};
+  for (const key of keys) {
+    result[key] = obj[key];
+  }
+  return result;
+}
 
 export default {
   component: globalThis.Components.Pre,
diff --git a/code/core/template/stories/hooks.stories.ts b/code/core/template/stories/hooks.stories.ts
index ce145288f147..3593fcbd72ec 100644
--- a/code/core/template/stories/hooks.stories.ts
+++ b/code/core/template/stories/hooks.stories.ts
@@ -1,4 +1,4 @@
-import type { PartialStoryFn, PlayFunctionContext } from '@storybook/core/types';
+import type { PartialStoryFn, StoryContext } from '@storybook/core/types';
 import { global as globalThis } from '@storybook/global';
 import { userEvent, within } from '@storybook/test';
 
@@ -6,13 +6,13 @@ import { useEffect, useState } from '@storybook/core/preview-api';
 
 export default {
   component: globalThis.Components.Button,
+  tags: ['!vitest'],
 };
 
 export const UseState = {
   decorators: [
     (story: PartialStoryFn) => {
       const [count, setCount] = useState(0);
-
       return story({
         args: {
           label: `Clicked ${count} times`,
@@ -23,16 +23,18 @@ export const UseState = {
       });
     },
   ],
-  play: async ({ canvasElement }: PlayFunctionContext<any>) => {
+  play: async ({ canvasElement }: StoryContext<any>) => {
     const button = await within(canvasElement).findByText('Clicked 0 times');
 
     await userEvent.click(button);
     await within(canvasElement).findByText('Clicked 1 times');
   },
+  // TODO VITEST INTEGRATION: remove this once we support Storybook hooks in portable stories
+  tags: ['!vitest'],
 };
 
 // NOTE: it isn't possible to write a play function for this story, as the
-// useEffect hooked doesn't fire until *after* the story has rendered, which includes
+// useEffect hook doesn't fire until *after* the story has rendered, which includes
 // the play function running.
 export const UseEffect = {
   decorators: [
diff --git a/code/core/template/stories/loaders.stories.ts b/code/core/template/stories/loaders.stories.ts
index 37a4ac62c0c8..1c24f5214fa2 100644
--- a/code/core/template/stories/loaders.stories.ts
+++ b/code/core/template/stories/loaders.stories.ts
@@ -1,10 +1,10 @@
-import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/core/types';
+import type { PartialStoryFn, StoryContext } from '@storybook/core/types';
 import { global as globalThis } from '@storybook/global';
 import { expect, within } from '@storybook/test';
 
 export default {
   component: globalThis.Components.Pre,
-  loaders: [async () => new Promise((r) => setTimeout(() => r({ componentValue: 7 }), 3000))],
+  loaders: [async () => new Promise((r) => setTimeout(() => r({ componentValue: 7 }), 1000))],
   decorators: [
     (storyFn: PartialStoryFn, context: StoryContext) =>
       storyFn({ args: { ...context.args, object: context.loaded } }),
@@ -12,8 +12,8 @@ export default {
 };
 
 export const Inheritance = {
-  loaders: [async () => new Promise((r) => setTimeout(() => r({ storyValue: 3 }), 1000))],
-  play: async ({ canvasElement }: PlayFunctionContext<any>) => {
+  loaders: [async () => new Promise((r) => setTimeout(() => r({ storyValue: 3 }), 500))],
+  play: async ({ canvasElement }: StoryContext<any>) => {
     const canvas = within(canvasElement);
     await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({
       projectValue: 2,
diff --git a/code/core/template/stories/rendering.stories.ts b/code/core/template/stories/rendering.stories.ts
index b0d0a7b06a1d..77e9432ef512 100644
--- a/code/core/template/stories/rendering.stories.ts
+++ b/code/core/template/stories/rendering.stories.ts
@@ -42,6 +42,38 @@ export const ForceRemount = {
   tags: ['!test', '!vitest'],
 };
 
+let loadedLabel = 'Initial';
+
+/**
+ * This story demonstrates what happens when rendering (loaders) have side effects, and can possibly
+ * interleave with each other Triggering multiple force remounts quickly should only result in a
+ * single remount in the end and the label should be 'Loaded. Click Me' at the end. If loaders are
+ * interleaving it would result in a label of 'Error: Interleaved loaders. Click Me' Similarly,
+ * changing args rapidly should only cause one rerender at a time, producing the same result.
+ */
+export const SlowLoader = {
+  parameters: {
+    chromatic: { disable: true },
+  },
+  loaders: [
+    async () => {
+      loadedLabel = 'Loading...';
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      loadedLabel = loadedLabel === 'Loading...' ? 'Loaded.' : 'Error: Interleaved loaders.';
+      return { label: loadedLabel };
+    },
+  ],
+  decorators: [
+    (storyFn: any, context: any) =>
+      storyFn({
+        args: {
+          ...context.args,
+          label: `${context.loaded.label} ${context.args.label}`,
+        },
+      }),
+  ],
+};
+
 export const ChangeArgs = {
   play: async ({ canvasElement, id }: PlayFunctionContext<any>) => {
     const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
@@ -74,35 +106,3 @@ export const ChangeArgs = {
     await expect(button).toHaveFocus();
   },
 };
-
-let loadedLabel = 'Initial';
-
-/**
- * This story demonstrates what happens when rendering (loaders) have side effects, and can possibly
- * interleave with each other Triggering multiple force remounts quickly should only result in a
- * single remount in the end and the label should be 'Loaded. Click Me' at the end. If loaders are
- * interleaving it would result in a label of 'Error: Interleaved loaders. Click Me' Similarly,
- * changing args rapidly should only cause one rerender at a time, producing the same result.
- */
-export const SlowLoader = {
-  parameters: {
-    chromatic: { disable: true },
-  },
-  loaders: [
-    async () => {
-      loadedLabel = 'Loading...';
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-      loadedLabel = loadedLabel === 'Loading...' ? 'Loaded.' : 'Error: Interleaved loaders.';
-      return { label: loadedLabel };
-    },
-  ],
-  decorators: [
-    (storyFn: any, context: any) =>
-      storyFn({
-        args: {
-          ...context.args,
-          label: `${context.loaded.label} ${context.args.label}`,
-        },
-      }),
-  ],
-};
diff --git a/code/core/template/stories/tags-add.stories.ts b/code/core/template/stories/tags-add.stories.ts
index f4b15f2557bf..edb70171eba1 100644
--- a/code/core/template/stories/tags-add.stories.ts
+++ b/code/core/template/stories/tags-add.stories.ts
@@ -17,11 +17,17 @@ export default {
 
 export const Inheritance = {
   tags: ['story-one', '!vitest'],
-  play: async ({ canvasElement }: PlayFunctionContext<any>) => {
+  play: async ({ canvasElement, tags }: PlayFunctionContext<any>) => {
     const canvas = within(canvasElement);
-    await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({
-      tags: ['story-one'],
-    });
+    if (tags.includes('a11ytest')) {
+      await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({
+        tags: ['a11ytest', 'story-one'],
+      });
+    } else {
+      await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({
+        tags: ['story-one'],
+      });
+    }
   },
   parameters: { chromatic: { disable: false } },
 };
diff --git a/code/core/template/stories/tags-config.stories.ts b/code/core/template/stories/tags-config.stories.ts
index 0f3269d4d4a1..a57a70390ce1 100644
--- a/code/core/template/stories/tags-config.stories.ts
+++ b/code/core/template/stories/tags-config.stories.ts
@@ -17,11 +17,25 @@ export default {
 
 export const Inheritance = {
   tags: ['story-one', '!vitest'],
-  play: async ({ canvasElement }: PlayFunctionContext<any>) => {
+  play: async ({ canvasElement, tags }: PlayFunctionContext<any>) => {
     const canvas = within(canvasElement);
-    await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({
-      tags: ['dev', 'test', 'component-one', 'component-two', 'autodocs', 'story-one'],
-    });
+    if (tags.includes('a11ytest')) {
+      await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({
+        tags: [
+          'dev',
+          'test',
+          'a11ytest',
+          'component-one',
+          'component-two',
+          'autodocs',
+          'story-one',
+        ],
+      });
+    } else {
+      await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({
+        tags: ['dev', 'test', 'component-one', 'component-two', 'autodocs', 'story-one'],
+      });
+    }
   },
   parameters: { chromatic: { disable: false } },
 };
diff --git a/code/core/template/stories/tags-remove.stories.ts b/code/core/template/stories/tags-remove.stories.ts
index cc05e9b23208..468f99614aa0 100644
--- a/code/core/template/stories/tags-remove.stories.ts
+++ b/code/core/template/stories/tags-remove.stories.ts
@@ -17,11 +17,17 @@ export default {
 
 export const Inheritance = {
   tags: ['story-one', '!vitest'],
-  play: async ({ canvasElement }: PlayFunctionContext<any>) => {
+  play: async ({ canvasElement, tags }: PlayFunctionContext<any>) => {
     const canvas = within(canvasElement);
-    await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({
-      tags: ['dev', 'test', 'component-one', 'autodocs', 'story-one'],
-    });
+    if (tags.includes('a11ytest')) {
+      await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({
+        tags: ['dev', 'test', 'a11ytest', 'component-one', 'autodocs', 'story-one'],
+      });
+    } else {
+      await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({
+        tags: ['dev', 'test', 'component-one', 'autodocs', 'story-one'],
+      });
+    }
   },
   parameters: { chromatic: { disable: false } },
 };
diff --git a/code/deprecated/builder-manager/package.json b/code/deprecated/builder-manager/package.json
index cd56ab5e48b0..e5118a8c957a 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook manager builder",
   "keywords": [
     "storybook"
@@ -39,7 +39,7 @@
     "*.d.ts"
   ],
   "peerDependencies": {
-    "storybook": "workspace:^"
+    "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/code/deprecated/channels/package.json b/code/deprecated/channels/package.json
index 0c5d9207f286..4ce43a5a47eb 100644
--- a/code/deprecated/channels/package.json
+++ b/code/deprecated/channels/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channels",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "",
   "keywords": [
     "storybook"
@@ -39,7 +39,7 @@
     "*.d.ts"
   ],
   "peerDependencies": {
-    "storybook": "workspace:^"
+    "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/code/deprecated/client-logger/package.json b/code/deprecated/client-logger/package.json
index e925983b6e29..e92abdd99cf7 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "",
   "keywords": [
     "storybook"
@@ -39,7 +39,7 @@
     "*.d.ts"
   ],
   "peerDependencies": {
-    "storybook": "workspace:^"
+    "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/code/deprecated/components/package.json b/code/deprecated/components/package.json
index f05ba78d1004..505500302c1b 100644
--- a/code/deprecated/components/package.json
+++ b/code/deprecated/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -39,7 +39,7 @@
     "*.d.ts"
   ],
   "peerDependencies": {
-    "storybook": "workspace:^"
+    "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/code/deprecated/core-common/package.json b/code/deprecated/core-common/package.json
index 6f5d1305fac6..c9b99bcbd507 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -38,7 +38,7 @@
     "*.d.ts"
   ],
   "peerDependencies": {
-    "storybook": "workspace:^"
+    "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/code/deprecated/core-events/package.json b/code/deprecated/core-events/package.json
index b7f3d3b567a5..ca0f2220c5f9 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Event names used in storybook core",
   "keywords": [
     "storybook"
@@ -70,7 +70,7 @@
     "*.d.ts"
   ],
   "peerDependencies": {
-    "storybook": "workspace:^"
+    "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/code/deprecated/core-server/package.json b/code/deprecated/core-server/package.json
index 057ed66ca4a6..f2583597b814 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -39,7 +39,7 @@
     "*.d.ts"
   ],
   "peerDependencies": {
-    "storybook": "workspace:^"
+    "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/code/deprecated/csf-tools/package.json b/code/deprecated/csf-tools/package.json
index 95a5ea0c608d..d7e81cfebe07 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Parse and manipulate CSF and Storybook config files",
   "keywords": [
     "storybook"
@@ -38,7 +38,7 @@
     "*.d.ts"
   ],
   "peerDependencies": {
-    "storybook": "workspace:^"
+    "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/code/deprecated/docs-tools/package.json b/code/deprecated/docs-tools/package.json
index c591880ff39b..e41e131d1380 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Shared utility functions for frameworks to implement docs",
   "keywords": [
     "storybook"
@@ -39,7 +39,7 @@
     "*.d.ts"
   ],
   "peerDependencies": {
-    "storybook": "workspace:^"
+    "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/code/deprecated/manager-api/package.json b/code/deprecated/manager-api/package.json
index f2a9d61f34fc..b474990df916 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Core Storybook Manager API & Context",
   "keywords": [
     "storybook"
@@ -38,7 +38,7 @@
     "*.d.ts"
   ],
   "peerDependencies": {
-    "storybook": "workspace:^"
+    "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/code/deprecated/manager/package.json b/code/deprecated/manager/package.json
index b1d991cdbb19..361f79026195 100644
--- a/code/deprecated/manager/package.json
+++ b/code/deprecated/manager/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/manager",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Core Storybook UI",
   "keywords": [
     "storybook"
@@ -36,7 +36,7 @@
     "*.d.ts"
   ],
   "peerDependencies": {
-    "storybook": "workspace:^"
+    "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/code/deprecated/node-logger/package.json b/code/deprecated/node-logger/package.json
index 2b5121aa0fc9..cb464d5a7bcd 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "",
   "keywords": [
     "storybook"
@@ -23,7 +23,7 @@
   "exports": {
     ".": {
       "types": "./shim.d.ts",
-      "module": "./shim.mjs",
+      "import": "./shim.mjs",
       "require": "./shim.js"
     },
     "./package.json": "./package.json"
@@ -39,7 +39,7 @@
     "*.d.ts"
   ],
   "peerDependencies": {
-    "storybook": "workspace:^"
+    "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/code/deprecated/preview-api/package.json b/code/deprecated/preview-api/package.json
index 736cd04c8338..c6279096606f 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "",
   "keywords": [
     "storybook"
@@ -40,7 +40,7 @@
     "*.d.ts"
   ],
   "peerDependencies": {
-    "storybook": "workspace:^"
+    "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/code/deprecated/preview/package.json b/code/deprecated/preview/package.json
index e55184702d1b..9a8e640f2f51 100644
--- a/code/deprecated/preview/package.json
+++ b/code/deprecated/preview/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preview",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "",
   "keywords": [
     "storybook"
@@ -36,7 +36,7 @@
     "*.d.ts"
   ],
   "peerDependencies": {
-    "storybook": "workspace:^"
+    "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/code/deprecated/router/package.json b/code/deprecated/router/package.json
index 66d026f73f2e..e73f2154fa53 100644
--- a/code/deprecated/router/package.json
+++ b/code/deprecated/router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/router",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Core Storybook Router",
   "keywords": [
     "storybook"
@@ -44,7 +44,7 @@
     "*.d.ts"
   ],
   "peerDependencies": {
-    "storybook": "workspace:^"
+    "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/code/deprecated/telemetry/package.json b/code/deprecated/telemetry/package.json
index faffe3105862..cf98e902a38a 100644
--- a/code/deprecated/telemetry/package.json
+++ b/code/deprecated/telemetry/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/telemetry",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Telemetry logging for crash reports and usage statistics",
   "keywords": [
     "storybook"
@@ -39,7 +39,7 @@
     "*.d.ts"
   ],
   "peerDependencies": {
-    "storybook": "workspace:^"
+    "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/code/deprecated/theming/package.json b/code/deprecated/theming/package.json
index 90bd9362026f..dfad0d3ac422 100644
--- a/code/deprecated/theming/package.json
+++ b/code/deprecated/theming/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/theming",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -44,7 +44,7 @@
     "*.d.ts"
   ],
   "peerDependencies": {
-    "storybook": "workspace:^"
+    "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/code/deprecated/types/package.json b/code/deprecated/types/package.json
index 1adbdeea218f..a10b2cf6770a 100644
--- a/code/deprecated/types/package.json
+++ b/code/deprecated/types/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/types",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Core Storybook TS Types",
   "keywords": [
     "storybook"
@@ -39,7 +39,7 @@
     "*.d.ts"
   ],
   "peerDependencies": {
-    "storybook": "workspace:^"
+    "storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/code/e2e-tests/addon-actions.spec.ts b/code/e2e-tests/addon-actions.spec.ts
index 501ed2c3a6a0..f049cbe3060a 100644
--- a/code/e2e-tests/addon-actions.spec.ts
+++ b/code/e2e-tests/addon-actions.spec.ts
@@ -12,8 +12,12 @@ test.describe('addon-actions', () => {
       templateName.includes('svelte') && templateName.includes('prerelease'),
       'Svelte 5 prerelase does not support automatic actions with our current example components yet'
     );
+    test.skip(
+      templateName.includes('react-native-web'),
+      'React Native uses onPress rather than onClick'
+    );
     await page.goto(storybookUrl);
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
     sbPage.waitUntilLoaded();
 
     await sbPage.navigateToStory('example/button', 'primary');
@@ -34,7 +38,7 @@ test.describe('addon-actions', () => {
       'Svelte 5 prerelase does not support automatic actions with our current example components yet'
     );
     await page.goto(storybookUrl);
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
     sbPage.waitUntilLoaded();
 
     await sbPage.navigateToStory('addons/actions/spies', 'show-spy-on-in-actions');
diff --git a/code/e2e-tests/addon-backgrounds.spec.ts b/code/e2e-tests/addon-backgrounds.spec.ts
index d40d922f8586..70cb2424ef19 100644
--- a/code/e2e-tests/addon-backgrounds.spec.ts
+++ b/code/e2e-tests/addon-backgrounds.spec.ts
@@ -9,14 +9,14 @@ const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
 test.describe('addon-backgrounds', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(storybookUrl);
-    await new SbPage(page).waitUntilLoaded();
+    await new SbPage(page, expect).waitUntilLoaded();
   });
 
   const backgroundToolbarSelector = '[title="Change the background of the preview"]';
   const gridToolbarSelector = '[title="Apply a grid to the preview"]';
 
   test('should have a dark background', async ({ page }) => {
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
 
     await sbPage.navigateToStory('example/button', 'primary');
     await sbPage.selectToolbar(backgroundToolbarSelector, '#list-item-dark');
@@ -25,7 +25,7 @@ test.describe('addon-backgrounds', () => {
   });
 
   test('should apply a grid', async ({ page }) => {
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
 
     await sbPage.navigateToStory('example/button', 'primary');
     await sbPage.selectToolbar(gridToolbarSelector);
@@ -34,7 +34,7 @@ test.describe('addon-backgrounds', () => {
   });
 
   test('button should appear for story pages', async ({ page }) => {
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
 
     await sbPage.navigateToStory('example/button', 'primary');
     await expect(sbPage.page.locator(backgroundToolbarSelector)).toBeVisible();
@@ -42,14 +42,14 @@ test.describe('addon-backgrounds', () => {
 
   test.describe('docs pages', () => {
     test('button should appear for attached docs pages', async ({ page }) => {
-      const sbPage = new SbPage(page);
+      const sbPage = new SbPage(page, expect);
 
       await sbPage.navigateToStory('example/button', 'docs');
       await expect(sbPage.page.locator(backgroundToolbarSelector)).toBeVisible();
     });
 
     test('button should appear for unattached .mdx files', async ({ page }) => {
-      const sbPage = new SbPage(page);
+      const sbPage = new SbPage(page, expect);
 
       // We start on the introduction page by default.
       await sbPage.page.waitForURL((url) =>
diff --git a/code/e2e-tests/addon-controls.spec.ts b/code/e2e-tests/addon-controls.spec.ts
index add1ef866820..5ae41a18b2d4 100644
--- a/code/e2e-tests/addon-controls.spec.ts
+++ b/code/e2e-tests/addon-controls.spec.ts
@@ -4,11 +4,14 @@ import process from 'process';
 import { SbPage } from './util';
 
 const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
+const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
 
 test.describe('addon-controls', () => {
   test('should change component when changing controls', async ({ page }) => {
+    test.skip(templateName.includes('react-native-web'), 'React Native CSS behaves differently');
+
     await page.goto(storybookUrl);
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
     await sbPage.waitUntilLoaded();
 
     await sbPage.navigateToStory('example/button', 'primary');
@@ -26,7 +29,7 @@ test.describe('addon-controls', () => {
     // Boolean toggle: Primary/secondary
     await expect(sbPage.previewRoot().locator('button')).toHaveCSS(
       'background-color',
-      'rgb(30, 167, 253)'
+      'rgb(85, 90, 185)'
     );
     const toggle = sbPage.panelContent().locator('input[name=primary]');
     await toggle.click();
@@ -58,14 +61,14 @@ test.describe('addon-controls', () => {
     await reset.click();
     const button = sbPage.previewRoot().locator('button');
     await expect(button).toHaveCSS('font-size', '14px');
-    await expect(button).toHaveCSS('background-color', 'rgb(30, 167, 253)');
+    await expect(button).toHaveCSS('background-color', 'rgb(85, 90, 185)');
     await expect(button).toContainText('Button');
   });
 
   test('should apply controls automatically when passed via url', async ({ page }) => {
     await page.goto(`${storybookUrl}?path=/story/example-button--primary&args=label:Hello+world`);
 
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
     await sbPage.waitUntilLoaded();
     await expect(sbPage.previewRoot().locator('button')).toContainText('Hello world');
 
@@ -77,7 +80,7 @@ test.describe('addon-controls', () => {
   test('should set select option when value contains double spaces', async ({ page }) => {
     await page.goto(`${storybookUrl}?path=/story/addons-controls-basics--undefined`);
 
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
     await sbPage.waitUntilLoaded();
     await sbPage.viewAddonPanel('Controls');
     await sbPage.panelContent().locator('#control-select').selectOption('double  space');
@@ -89,7 +92,7 @@ test.describe('addon-controls', () => {
   test('should set multiselect option when value contains double spaces', async ({ page }) => {
     await page.goto(`${storybookUrl}?path=/story/addons-controls-basics--undefined`);
 
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
     await sbPage.waitUntilLoaded();
     await sbPage.viewAddonPanel('Controls');
     await sbPage.panelContent().locator('#control-multiSelect').selectOption('double  space');
diff --git a/code/e2e-tests/addon-docs.spec.ts b/code/e2e-tests/addon-docs.spec.ts
index bcf6e6fea9fc..6d0542bf4b8d 100644
--- a/code/e2e-tests/addon-docs.spec.ts
+++ b/code/e2e-tests/addon-docs.spec.ts
@@ -13,7 +13,7 @@ const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
 test.describe('addon-docs', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(storybookUrl);
-    await new SbPage(page).waitUntilLoaded();
+    await new SbPage(page, expect).waitUntilLoaded();
   });
 
   test('should show descriptions for stories', async ({ page }) => {
@@ -26,7 +26,7 @@ test.describe('addon-docs', () => {
       `Skipping ${templateName}, because of wrong ordering of stories on docs page`
     );
 
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
     await sbPage.navigateToStory('addons/docs/docspage/basic', 'docs');
     const root = sbPage.previewRoot();
 
@@ -48,7 +48,7 @@ test.describe('addon-docs', () => {
       `Skipping ${templateName}, because of wrong ordering of stories on docs page`
     );
 
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
     await sbPage.navigateToStory('addons/docs/docspage/basic', 'docs');
     const root = sbPage.previewRoot();
 
@@ -75,7 +75,7 @@ test.describe('addon-docs', () => {
   });
 
   test('should render errors', async ({ page }) => {
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
     await sbPage.navigateToStory('addons/docs/docspage/error', 'docs');
     const root = sbPage.previewRoot();
 
@@ -90,7 +90,7 @@ test.describe('addon-docs', () => {
       `Skipping ${templateName}, which does not support dynamic source snippets`
     );
 
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
     await sbPage.navigateToStory('addons/docs/docspage/basic', 'docs');
     const root = sbPage.previewRoot();
     const toggles = root.locator('.docblock-code-toggle');
@@ -123,13 +123,14 @@ test.describe('addon-docs', () => {
       //   - template: https://638db567ed97c3fb3e21cc22-ulhjwkqzzj.chromatic.com/?path=/docs/addons-docs-docspage-basic--docs
       //   - real: https://638db567ed97c3fb3e21cc22-ulhjwkqzzj.chromatic.com/?path=/docs/example-button--docs
       'lit-vite',
+      'react-native-web',
     ];
     test.skip(
       new RegExp(`^${skipped.join('|')}`, 'i').test(`${templateName}`),
       `Skipping ${templateName}, which does not support dynamic source snippets`
     );
 
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
     await sbPage.navigateToStory('addons/docs/docspage/basic', 'docs');
     const root = sbPage.previewRoot();
     const toggles = root.locator('.docblock-code-toggle');
@@ -156,7 +157,7 @@ test.describe('addon-docs', () => {
   });
 
   test('should not run autoplay stories without parameter', async ({ page }) => {
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
     await sbPage.navigateToStory('addons/docs/docspage/autoplay', 'docs');
 
     const root = sbPage.previewRoot();
@@ -174,7 +175,7 @@ test.describe('addon-docs', () => {
       `${templateName} fails because of a known issue: https://github.com/storybookjs/storybook/issues/20941`
     );
 
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
     await sbPage.navigateToStory('addons/docs/docspage/basic', 'docs');
 
     // The `<Primary>` block should render the "Basic" story, and the `<Stories/>` block should
@@ -189,8 +190,12 @@ test.describe('addon-docs', () => {
   });
 
   test('should resolve react to the correct version', async ({ page }) => {
+    test.skip(
+      templateName?.includes('nextjs') || templateName?.includes('nuxt'),
+      'TODO: remove this once sandboxes are synced (SOON!!)'
+    );
     // Arrange - Navigate to MDX docs
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
     await sbPage.navigateToStory('addons/docs/docs2/resolvedreact', 'mdx', 'docs');
     const root = sbPage.previewRoot();
 
@@ -201,6 +206,7 @@ test.describe('addon-docs', () => {
     } else if (templateName.includes('react16')) {
       expectedReactVersionRange = /^16/;
     } else if (
+      templateName.includes('nextjs/default-ts') ||
       templateName.includes('nextjs/prerelease') ||
       templateName.includes('react-vite/prerelease') ||
       templateName.includes('react-webpack/prerelease')
@@ -259,7 +265,7 @@ test.describe('addon-docs', () => {
   });
 
   test('should have stories from multiple CSF files in autodocs', async ({ page }) => {
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
     await sbPage.navigateToStory('/addons/docs/multiple-csf-files-same-title', 'docs');
     const root = sbPage.previewRoot();
 
diff --git a/code/e2e-tests/addon-interactions.spec.ts b/code/e2e-tests/addon-interactions.spec.ts
index e2ec2e2ae61c..b1cb9ea9884a 100644
--- a/code/e2e-tests/addon-interactions.spec.ts
+++ b/code/e2e-tests/addon-interactions.spec.ts
@@ -1,15 +1,20 @@
 import { expect, test } from '@playwright/test';
 import process from 'process';
 
-import { SbPage } from './util';
+import { SbPage, hasVitestIntegration } from './util';
 
 const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
 const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
 
 test.describe('addon-interactions', () => {
+  test.skip(
+    hasVitestIntegration,
+    `Skipping ${templateName}, which does not have addon-interactions set up.`
+  );
+
   test.beforeEach(async ({ page }) => {
     await page.goto(storybookUrl);
-    await new SbPage(page).waitUntilLoaded();
+    await new SbPage(page, expect).waitUntilLoaded();
   });
 
   test('should have interactions', async ({ page }) => {
@@ -18,8 +23,12 @@ test.describe('addon-interactions', () => {
       /^(lit)/i.test(`${templateName}`),
       `Skipping ${templateName}, which does not support addon-interactions`
     );
+    test.skip(
+      templateName.includes('react-native-web'),
+      'React Native does not use className locators'
+    );
 
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
 
     await sbPage.navigateToStory('example/page', 'logged-in');
     await sbPage.viewAddonPanel('Interactions');
@@ -51,7 +60,7 @@ test.describe('addon-interactions', () => {
       `Skipping on FIreFox, which has trouble with "initial value"`
     );
 
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
 
     await sbPage.deepLinkToStory(storybookUrl, 'addons/interactions/basics', 'type-and-clear');
     await sbPage.viewAddonPanel('Interactions');
@@ -127,7 +136,7 @@ test.describe('addon-interactions', () => {
     // We trigger the implicit action error here, but angular works a bit different with implicit actions.
     test.skip(/^(angular)/i.test(`${templateName}`));
 
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
 
     await sbPage.deepLinkToStory(storybookUrl, 'addons/interactions/unhandled-errors', 'default');
     await sbPage.viewAddonPanel('Interactions');
diff --git a/code/e2e-tests/addon-onboarding.spec.ts b/code/e2e-tests/addon-onboarding.spec.ts
new file mode 100644
index 000000000000..85181d8abf2c
--- /dev/null
+++ b/code/e2e-tests/addon-onboarding.spec.ts
@@ -0,0 +1,53 @@
+import { expect, test } from '@playwright/test';
+import process from 'process';
+
+import { SbPage } from './util';
+
+const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
+const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
+const type = process.env.STORYBOOK_TYPE || 'dev';
+
+const supportsOnboarding =
+  templateName.includes('react') ||
+  templateName.includes('vue3') ||
+  templateName.includes('angular') ||
+  templateName.includes('next');
+
+test.describe('addon-onboarding', () => {
+  test.skip(type === 'build', `Skipping addon tests for production Storybooks`);
+  test.skip(
+    !supportsOnboarding,
+    `Skipping ${templateName}, which does not have addon-onboarding set up.`
+  );
+  test('the onboarding flow', async ({ page }) => {
+    await page.goto(`${storybookUrl}/?path=/onboarding`);
+    const sbPage = new SbPage(page, expect);
+    await sbPage.waitUntilLoaded();
+
+    await expect(page.getByRole('heading', { name: 'Meet your new frontend' })).toBeVisible();
+    await page.locator('#storybook-addon-onboarding').getByRole('button').click();
+
+    await expect(page.getByText('Interactive story playground')).toBeVisible();
+    await page.getByLabel('Next').click();
+
+    await expect(page.getByText('Save your changes as a new')).toBeVisible();
+    await page.getByLabel('Next').click();
+
+    await expect(page.getByRole('heading', { name: 'Create new story' })).toBeVisible();
+    await page.getByPlaceholder('Story export name').click();
+
+    // this is needed because the e2e test will generate a new file in the system
+    // which we don't know of its location (it runs in different sandboxes)
+    // so we just create a random id to make it easier to run tests
+    const id = Math.random().toString(36).substring(7);
+    await page.getByPlaceholder('Story export name').fill('Test-' + id);
+    await page.getByRole('button', { name: 'Create' }).click();
+
+    await expect(page.getByText('You just added your first')).toBeVisible();
+    await page.getByLabel('Last').click();
+
+    await expect(
+      sbPage.previewIframe().getByRole('heading', { name: 'Configure your project' })
+    ).toBeVisible();
+  });
+});
diff --git a/code/e2e-tests/addon-test.spec.ts b/code/e2e-tests/addon-test.spec.ts
new file mode 100644
index 000000000000..cca2f088eb99
--- /dev/null
+++ b/code/e2e-tests/addon-test.spec.ts
@@ -0,0 +1,148 @@
+import { expect, test } from '@playwright/test';
+import process from 'process';
+
+import { SbPage, hasVitestIntegration } from './util';
+
+const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
+const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
+
+test.describe('addon-test', () => {
+  test.skip(
+    !hasVitestIntegration,
+    `Skipping ${templateName}, which does not have addon-test set up.`
+  );
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto(storybookUrl);
+    await new SbPage(page, expect).waitUntilLoaded();
+  });
+
+  test('should have interactions', async ({ page }) => {
+    // templateName is e.g. 'vue-cli/default-js'
+    test.skip(
+      /^(lit)/i.test(`${templateName}`),
+      `Skipping ${templateName}, which does not support addon-test`
+    );
+
+    const sbPage = new SbPage(page, expect);
+
+    await sbPage.navigateToStory('example/page', 'logged-in');
+    await sbPage.viewAddonPanel('Component tests');
+
+    const welcome = sbPage.previewRoot().locator('.welcome');
+    await expect(welcome).toContainText('Welcome, Jane Doe!', { timeout: 50000 });
+
+    const interactionsTab = page.locator('#tabbutton-storybook-test-panel');
+    await expect(interactionsTab).toContainText(/(\d)/);
+    await expect(interactionsTab).toBeVisible();
+
+    const panel = sbPage.panelContent();
+    await expect(panel).toContainText(/Pass/);
+    await expect(panel).toContainText(/userEvent.click/);
+    await expect(panel).toBeVisible();
+
+    const done = panel.locator('[data-testid=icon-done]').nth(0);
+    await expect(done).toBeVisible();
+  });
+
+  test('should step through interactions', async ({ page, browserName }) => {
+    // templateName is e.g. 'vue-cli/default-js'
+    test.skip(
+      /^(lit)/i.test(`${templateName}`),
+      `Skipping ${templateName}, which does not support addon-test`
+    );
+    test.skip(
+      browserName === 'firefox',
+      `Skipping on FIreFox, which has trouble with "initial value"`
+    );
+
+    const sbPage = new SbPage(page, expect);
+
+    await sbPage.deepLinkToStory(storybookUrl, 'addons/test/basics', 'type-and-clear');
+    await sbPage.viewAddonPanel('Component tests');
+
+    // Test initial state - Interactions have run, count is correct and values are as expected
+    const formInput = sbPage.previewRoot().locator('#interaction-test-form input');
+    await expect(formInput).toHaveValue('final value', { timeout: 50000 });
+
+    const interactionsTab = page.locator('#tabbutton-storybook-test-panel');
+    await expect(interactionsTab.getByText('3')).toBeVisible();
+    await expect(interactionsTab).toBeVisible();
+    await expect(interactionsTab).toBeVisible();
+
+    const panel = sbPage.panelContent();
+    const runStatusBadge = panel.locator('[aria-label="Status of the test run"]');
+    await expect(runStatusBadge).toContainText(/Pass/);
+    await expect(panel).toContainText(/"initial value"/);
+    await expect(panel).toContainText(/clear/);
+    await expect(panel).toContainText(/"final value"/);
+    await expect(panel).toBeVisible();
+
+    // Test interactions debugger - Stepping through works, count is correct and values are as expected
+    const interactionsRow = panel.locator('[aria-label="Interaction step"]');
+
+    await interactionsRow.first().isVisible();
+
+    await expect(interactionsRow).toHaveCount(3);
+    const firstInteraction = interactionsRow.first();
+    await firstInteraction.click();
+
+    await expect(runStatusBadge).toContainText(/Runs/);
+    await expect(formInput).toHaveValue('initial value');
+
+    const goForwardBtn = panel.locator('[aria-label="Go forward"]');
+    await goForwardBtn.click();
+    await expect(formInput).toHaveValue('');
+    await goForwardBtn.click();
+    await expect(formInput).toHaveValue('final value');
+
+    await expect(runStatusBadge).toContainText(/Pass/);
+
+    // Test rerun state (from addon panel) - Interactions have rerun, count is correct and values are as expected
+    const rerunInteractionButton = panel.locator('[aria-label="Rerun"]');
+    await rerunInteractionButton.click();
+
+    await expect(formInput).toHaveValue('final value');
+
+    await interactionsRow.first().isVisible();
+    await interactionsRow.nth(1).isVisible();
+    await interactionsRow.nth(2).isVisible();
+    await expect(interactionsTab.getByText('3')).toBeVisible();
+    await expect(interactionsTab).toBeVisible();
+    await expect(interactionsTab.getByText('3')).toBeVisible();
+
+    // Test remount state (from toolbar) - Interactions have rerun, count is correct and values are as expected
+    const remountComponentButton = page.locator('[title="Remount component"]');
+    await remountComponentButton.click();
+
+    await interactionsRow.first().isVisible();
+    await interactionsRow.nth(1).isVisible();
+    await interactionsRow.nth(2).isVisible();
+    await expect(interactionsTab.getByText('3')).toBeVisible();
+    await expect(interactionsTab).toBeVisible();
+    await expect(interactionsTab).toBeVisible();
+    await expect(formInput).toHaveValue('final value');
+  });
+
+  test('should show unhandled errors', async ({ page }) => {
+    test.skip(
+      /^(lit)/i.test(`${templateName}`),
+      `Skipping ${templateName}, which does not support addon-test`
+    );
+    // We trigger the implicit action error here, but angular works a bit different with implicit actions.
+    test.skip(/^(angular)/i.test(`${templateName}`));
+
+    const sbPage = new SbPage(page, expect);
+
+    await sbPage.deepLinkToStory(storybookUrl, 'addons/test/unhandled-errors', 'default');
+    await sbPage.viewAddonPanel('Component tests');
+
+    const button = sbPage.previewRoot().locator('button');
+    await expect(button).toContainText('Button', { timeout: 50000 });
+
+    const panel = sbPage.panelContent();
+    await expect(panel).toContainText(/Fail/);
+    await expect(panel).toContainText(/Found 1 unhandled error/);
+    await expect(panel).toBeVisible();
+  });
+});
diff --git a/code/e2e-tests/addon-toolbars.spec.ts b/code/e2e-tests/addon-toolbars.spec.ts
index 0bcd779518b4..b51c92d6524e 100644
--- a/code/e2e-tests/addon-toolbars.spec.ts
+++ b/code/e2e-tests/addon-toolbars.spec.ts
@@ -8,11 +8,11 @@ const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
 test.describe('addon-toolbars', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(storybookUrl);
-    await new SbPage(page).waitUntilLoaded();
+    await new SbPage(page, expect).waitUntilLoaded();
   });
 
   test('should have locale button in the toolbar', async ({ page }) => {
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
 
     // Click on viewport button and select spanish
     await sbPage.navigateToStory('addons/toolbars/globals', 'basic');
@@ -25,7 +25,7 @@ test.describe('addon-toolbars', () => {
   test('locale button should be disabled for story that overrides locale global', async ({
     page,
   }) => {
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
 
     // Click on viewport button and select spanish
     await sbPage.navigateToStory('addons/toolbars/globals', 'override-locale');
diff --git a/code/e2e-tests/addon-viewport.spec.ts b/code/e2e-tests/addon-viewport.spec.ts
index cf53bc89432a..6f2ba1c4c88d 100644
--- a/code/e2e-tests/addon-viewport.spec.ts
+++ b/code/e2e-tests/addon-viewport.spec.ts
@@ -8,11 +8,11 @@ const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
 test.describe('addon-viewport', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(storybookUrl);
-    await new SbPage(page).waitUntilLoaded();
+    await new SbPage(page, expect).waitUntilLoaded();
   });
 
   test('should have viewport button in the toolbar', async ({ page }) => {
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
 
     // Click on viewport button and select small mobile
     await sbPage.navigateToStory('example/button', 'primary');
@@ -23,7 +23,7 @@ test.describe('addon-viewport', () => {
   });
 
   test('iframe width should be changed when a mobile viewport is selected', async ({ page }) => {
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
 
     // Click on viewport button and select small mobile
     await sbPage.navigateToStory('example/button', 'primary');
@@ -43,7 +43,7 @@ test.describe('addon-viewport', () => {
   });
 
   test('viewport should be editable when a default viewport is set', async ({ page }) => {
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
 
     // Story parameters/selected is set to small mobile
     await sbPage.navigateToStory('addons/viewport/parameters', 'selected');
diff --git a/code/e2e-tests/composition.spec.ts b/code/e2e-tests/composition.spec.ts
index 71b206010b46..ec5a96e5898d 100644
--- a/code/e2e-tests/composition.spec.ts
+++ b/code/e2e-tests/composition.spec.ts
@@ -11,12 +11,57 @@ test.describe('composition', () => {
     'Slow, framework independent test, so only run it on in react-vite/default-ts'
   );
 
-  test.beforeEach(async ({ page }) => {
+  test('should filter and render composed stories', async ({ page }) => {
     await page.goto(storybookUrl);
-    await new SbPage(page).waitUntilLoaded();
+    await new SbPage(page, expect).waitUntilLoaded();
+
+    // Expect that composed Storybooks are visible
+    await expect(page.getByTitle('Storybook 8.0.0')).toBeVisible();
+    await expect(page.getByTitle('Storybook 7.6.18')).toBeVisible();
+
+    // Expect composed stories to be available in the sidebar
+    await page.locator('[id="storybook\\@8\\.0\\.0_components-badge"]').click();
+    await expect(
+      page.locator('[id="storybook\\@8\\.0\\.0_components-badge--default"]')
+    ).toBeVisible();
+
+    await page.locator('[id="storybook\\@7\\.6\\.18_components-badge"]').click();
+    await expect(
+      page
+        .locator('iframe[title="storybook-ref-storybook\\@7\\.6\\.18"]')
+        .contentFrame()
+        .locator('#storybook-root')
+        .getByText('Default')
+    ).toBeVisible({ timeout: 15000 });
+
+    // Expect composed stories `to be available in the search
+    await page.getByPlaceholder('Find components').fill('Button');
+    await expect(
+      page.getByRole('option', { name: 'Button Storybook 7.6.18 / @blocks / examples' })
+    ).toBeVisible();
+
+    const buttonStory = page.getByRole('option', {
+      name: 'Button Storybook 8.0.0 / @blocks / examples',
+    });
+    await expect(buttonStory).toBeVisible();
+    await buttonStory.click();
+
+    // Note: this could potentially be flaky due to it accessing a hosted Storybook
+    await expect(
+      page
+        .locator('iframe[title="storybook-ref-storybook\\@8\\.0\\.0"]')
+        .contentFrame()
+        .getByRole('heading', { name: 'Example button component' })
+    ).toBeVisible({ timeout: 15000 });
   });
 
-  test('should correctly filter composed stories', async ({ page }) => {
+  test('should filter and render composed stories on mobile', async ({ page }) => {
+    page.setViewportSize({ width: 320, height: 800 });
+    await page.goto(storybookUrl);
+    await new SbPage(page, expect).waitUntilLoaded();
+
+    await page.click('button[title="Open navigation menu"]');
+
     // Expect that composed Storybooks are visible
     await expect(page.getByTitle('Storybook 8.0.0')).toBeVisible();
     await expect(page.getByTitle('Storybook 7.6.18')).toBeVisible();
@@ -34,11 +79,22 @@ test.describe('composition', () => {
 
     // Expect composed stories `to be available in the search
     await page.getByPlaceholder('Find components').fill('Button');
-    await expect(
-      page.getByRole('option', { name: 'Button Storybook 8.0.0 / @blocks / examples' })
-    ).toBeVisible();
     await expect(
       page.getByRole('option', { name: 'Button Storybook 7.6.18 / @blocks / examples' })
     ).toBeVisible();
+
+    const buttonStory = page.getByRole('option', {
+      name: 'Button Storybook 8.0.0 / @blocks / examples',
+    });
+    await expect(buttonStory).toBeVisible();
+    await buttonStory.click();
+
+    // Note: this could potentially be flaky due to it accessing a hosted Storybook
+    await expect(
+      page
+        .locator('iframe[title="storybook-ref-storybook\\@8\\.0\\.0"]')
+        .contentFrame()
+        .getByRole('heading', { name: 'Example button component' })
+    ).toBeVisible({ timeout: 15000 });
   });
 });
diff --git a/code/e2e-tests/framework-nextjs.spec.ts b/code/e2e-tests/framework-nextjs.spec.ts
index 982952f4cb40..9e426e26709b 100644
--- a/code/e2e-tests/framework-nextjs.spec.ts
+++ b/code/e2e-tests/framework-nextjs.spec.ts
@@ -17,14 +17,14 @@ test.describe('Next.js', () => {
 
   test.beforeEach(async ({ page }) => {
     await page.goto(storybookUrl);
-    await new SbPage(page).waitUntilLoaded();
+    await new SbPage(page, expect).waitUntilLoaded();
   });
 
   test.describe('next/image', () => {
     let sbPage: SbPage;
 
     test.beforeEach(async ({ page }) => {
-      sbPage = new SbPage(page);
+      sbPage = new SbPage(page, expect);
     });
 
     // eslint-disable-next-line playwright/no-skipped-test -- test is flaky, investigate why
@@ -51,12 +51,9 @@ test.describe('Next.js', () => {
     let sbPage: SbPage;
 
     test.beforeEach(async ({ page }) => {
-      sbPage = new SbPage(page);
+      sbPage = new SbPage(page, expect);
 
-      await sbPage.navigateToStory(
-        'stories/frameworks/nextjs-nextjs-default-ts/Navigation',
-        'default'
-      );
+      await sbPage.navigateToStory('stories/frameworks/nextjs/Navigation', 'default');
       root = sbPage.previewRoot();
     });
 
@@ -86,9 +83,9 @@ test.describe('Next.js', () => {
     let sbPage: SbPage;
 
     test.beforeEach(async ({ page }) => {
-      sbPage = new SbPage(page);
+      sbPage = new SbPage(page, expect);
 
-      await sbPage.navigateToStory('stories/frameworks/nextjs-nextjs-default-ts/Router', 'default');
+      await sbPage.navigateToStory('stories/frameworks/nextjs/Router', 'default');
       root = sbPage.previewRoot();
     });
 
diff --git a/code/e2e-tests/framework-svelte.spec.ts b/code/e2e-tests/framework-svelte.spec.ts
index d5b3354fb5d0..c32532b4e7ed 100644
--- a/code/e2e-tests/framework-svelte.spec.ts
+++ b/code/e2e-tests/framework-svelte.spec.ts
@@ -9,32 +9,32 @@ const templateName = process.env.STORYBOOK_TEMPLATE_NAME;
 test.describe('Svelte', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(storybookUrl);
-    await new SbPage(page).waitUntilLoaded();
+    await new SbPage(page, expect).waitUntilLoaded();
   });
 
   test.skip(!templateName?.includes('svelte'), 'Only run these tests on Svelte');
 
   test('JS story has auto-generated args table', async ({ page }) => {
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
 
-    await sbPage.navigateToStory('stories/renderers/svelte/js-docs', 'docs');
+    await sbPage.navigateToStory('stories/renderers/svelte/docs-jsdoc', 'docs');
     const root = sbPage.previewRoot();
     const argsTable = root.locator('.docblock-argstable');
-    await expect(argsTable).toContainText('Rounds the button');
+    await expect(argsTable).toContainText('Union of literal strings');
   });
 
   test('TS story has auto-generated args table', async ({ page }) => {
     test.skip(!templateName?.endsWith('ts') || false, 'Only test TS story in TS templates');
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
 
-    await sbPage.navigateToStory('stories/renderers/svelte/ts-docs', 'docs');
+    await sbPage.navigateToStory('stories/renderers/svelte/docs-ts', 'docs');
     const root = sbPage.previewRoot();
     const argsTable = root.locator('.docblock-argstable');
-    await expect(argsTable).toContainText('Rounds the button');
+    await expect(argsTable).toContainText('Union of literal strings');
   });
 
   test('Decorators are excluded from generated source code', async ({ page }) => {
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
 
     await sbPage.navigateToStory('stories/renderers/svelte/slot-decorators', 'docs');
     const root = sbPage.previewRoot();
@@ -46,7 +46,7 @@ test.describe('Svelte', () => {
   });
 
   test('Decorators runs only once', async ({ page }) => {
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
     const lines: string[] = [];
     page.on('console', (msg) => {
       const text = msg.text();
@@ -63,7 +63,7 @@ test.describe('Svelte', () => {
     test.skip(!templateName?.includes('svelte-kit'), 'Only run this test on SvelteKit');
 
     test('Links are logged in Actions panel', async ({ page }) => {
-      const sbPage = new SbPage(page);
+      const sbPage = new SbPage(page, expect);
 
       await sbPage.navigateToStory('stories/sveltekit/modules/hrefs', 'default-actions');
       const root = sbPage.previewRoot();
@@ -83,7 +83,7 @@ test.describe('Svelte', () => {
     });
 
     test('goto are logged in Actions panel', async ({ page }) => {
-      const sbPage = new SbPage(page);
+      const sbPage = new SbPage(page, expect);
 
       await sbPage.navigateToStory('stories/sveltekit/modules/navigation', 'default-actions');
       const root = sbPage.previewRoot();
diff --git a/code/e2e-tests/manager.spec.ts b/code/e2e-tests/manager.spec.ts
index e0156786f11c..16eb24e6d1e8 100644
--- a/code/e2e-tests/manager.spec.ts
+++ b/code/e2e-tests/manager.spec.ts
@@ -10,14 +10,14 @@ test.describe('Manager UI', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(storybookUrl);
 
-    await new SbPage(page).waitUntilLoaded();
+    await new SbPage(page, expect).waitUntilLoaded();
   });
 
   test.describe('Desktop', () => {
     // TODO: test dragging and resizing
 
     test('Sidebar toggling', async ({ page }) => {
-      const sbPage = new SbPage(page);
+      const sbPage = new SbPage(page, expect);
 
       await expect(sbPage.page.locator('.sidebar-container')).toBeVisible();
 
@@ -38,7 +38,7 @@ test.describe('Manager UI', () => {
     });
 
     test('Toolbar toggling', async ({ page }) => {
-      const sbPage = new SbPage(page);
+      const sbPage = new SbPage(page, expect);
       const expectToolbarVisibility = async (visible: boolean) => {
         await expect(async () => {
           const toolbar = sbPage.page.locator(`[data-test-id="sb-preview-toolbar"]`);
@@ -68,7 +68,7 @@ test.describe('Manager UI', () => {
 
     test.describe('Panel', () => {
       test('Hidden in docs view', async ({ page }) => {
-        const sbPage = new SbPage(page);
+        const sbPage = new SbPage(page, expect);
 
         // navigate to docs to hide panel
         await sbPage.navigateToStory('example/button', 'docs');
@@ -83,7 +83,7 @@ test.describe('Manager UI', () => {
       });
 
       test('Toggling', async ({ page }) => {
-        const sbPage = new SbPage(page);
+        const sbPage = new SbPage(page, expect);
 
         // navigate to story to show panel
         await sbPage.navigateToStory('example/button', 'primary');
@@ -107,7 +107,7 @@ test.describe('Manager UI', () => {
       });
 
       test('Positioning', async ({ page }) => {
-        const sbPage = new SbPage(page);
+        const sbPage = new SbPage(page, expect);
 
         // navigate to story to show panel
         await sbPage.navigateToStory('example/button', 'primary');
@@ -130,7 +130,7 @@ test.describe('Manager UI', () => {
     });
 
     test('Fullscreen toggling', async ({ page }) => {
-      const sbPage = new SbPage(page);
+      const sbPage = new SbPage(page, expect);
 
       // navigate to story to show panel
       await sbPage.navigateToStory('example/button', 'primary');
@@ -176,7 +176,7 @@ test.describe('Manager UI', () => {
     });
 
     test('Settings page', async ({ page }) => {
-      const sbPage = new SbPage(page);
+      const sbPage = new SbPage(page, expect);
       await sbPage.page.locator('[aria-label="Shortcuts"]').click();
       await sbPage.page.locator('#list-item-about').click();
 
@@ -200,7 +200,7 @@ test.describe('Manager UI', () => {
     test.use({ viewport: { width: 390, height: 844 } });
 
     test('Navigate to story', async ({ page }) => {
-      const sbPage = new SbPage(page);
+      const sbPage = new SbPage(page, expect);
 
       const closeNavigationButton = sbPage.page.locator('[title="Close navigation menu"]');
       const mobileNavigationHeading = sbPage.page.locator('[title="Open navigation menu"]');
@@ -229,7 +229,7 @@ test.describe('Manager UI', () => {
     });
 
     test('Open and close addon panel', async ({ page }) => {
-      const sbPage = new SbPage(page);
+      const sbPage = new SbPage(page, expect);
 
       const mobileNavigationHeading = sbPage.page.locator('[title="Open navigation menu"]');
       await mobileNavigationHeading.click();
diff --git a/code/e2e-tests/module-mocking.spec.ts b/code/e2e-tests/module-mocking.spec.ts
index 1c8de1778e36..3341f6449002 100644
--- a/code/e2e-tests/module-mocking.spec.ts
+++ b/code/e2e-tests/module-mocking.spec.ts
@@ -9,13 +9,13 @@ test.describe('module-mocking', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(storybookUrl);
 
-    await new SbPage(page).waitUntilLoaded();
+    await new SbPage(page, expect).waitUntilLoaded();
   });
 
   test('should assert story lifecycle order', async ({ page }) => {
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
 
-    await sbPage.navigateToStory('lib/test/before-each', 'before-each-order');
+    await sbPage.navigateToStory('lib/test/order-of-hooks', 'order-of-hooks');
 
     await sbPage.viewAddonPanel('Actions');
     const logItem = page.locator('#storybook-panel-root #panel-tab-content');
@@ -25,8 +25,12 @@ test.describe('module-mocking', () => {
       '1 - [from loaders]',
       '2 - [from meta beforeEach]',
       '3 - [from story beforeEach]',
-      '4 - [from decorator]',
-      '5 - [from onClick]',
+      '4 - [before mount]',
+      '5 - [from decorator]',
+      '6 - [after mount]',
+      '7 - [from onClick]',
+      '8 - [from story afterEach]',
+      '9 - [from meta afterEach]',
     ];
 
     // Assert that each LI text content contains the expected text in order
@@ -37,7 +41,7 @@ test.describe('module-mocking', () => {
   });
 
   test('should assert that utils import is mocked', async ({ page }) => {
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
 
     await sbPage.navigateToStory('lib/test/module-mocking', 'basic');
 
diff --git a/code/e2e-tests/navigation.spec.ts b/code/e2e-tests/navigation.spec.ts
index 16c72d6ffe6e..aa9bbdb9c07f 100644
--- a/code/e2e-tests/navigation.spec.ts
+++ b/code/e2e-tests/navigation.spec.ts
@@ -10,7 +10,7 @@ test.describe('navigating', () => {
     // this is purposefully not using the SbPage class, and the URL is a partial (it does not contain the full storyId)
     await page.goto(`${storybookUrl}?path=/story/example-button`);
 
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
 
     await sbPage.waitUntilLoaded();
 
diff --git a/code/e2e-tests/preview-api.spec.ts b/code/e2e-tests/preview-api.spec.ts
index 5130e78e1694..31b566027fd9 100644
--- a/code/e2e-tests/preview-api.spec.ts
+++ b/code/e2e-tests/preview-api.spec.ts
@@ -1,7 +1,7 @@
 import { expect, test } from '@playwright/test';
 import process from 'process';
 
-import { SbPage } from './util';
+import { SbPage, hasVitestIntegration } from './util';
 
 const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
 const templateName = process.env.STORYBOOK_TEMPLATE_NAME || '';
@@ -12,7 +12,7 @@ test.describe('preview-api', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(storybookUrl);
 
-    await new SbPage(page).waitUntilLoaded();
+    await new SbPage(page, expect).waitUntilLoaded();
   });
 
   test('should pass over shortcuts, but not from play functions, story', async ({ page }) => {
@@ -21,13 +21,17 @@ test.describe('preview-api', () => {
       `Skipping ${templateName}, which does not support addon-interactions`
     );
 
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
     await sbPage.deepLinkToStory(storybookUrl, 'core/shortcuts', 'keydown-during-play');
     await expect(sbPage.page.locator('.sidebar-container')).toBeVisible();
 
     // wait for the play function to complete
-    await sbPage.viewAddonPanel('Interactions');
-    const interactionsTab = page.locator('#tabbutton-storybook-interactions-panel');
+    await sbPage.viewAddonPanel(hasVitestIntegration ? 'Component tests' : 'Interactions');
+    const interactionsTab = page.locator(
+      hasVitestIntegration
+        ? '#tabbutton-storybook-test-panel'
+        : '#tabbutton-storybook-interactions-panel'
+    );
     await expect(interactionsTab).toBeVisible();
     const panel = sbPage.panelContent();
     const runStatusBadge = panel.locator('[aria-label="Status of the test run"]');
@@ -45,7 +49,7 @@ test.describe('preview-api', () => {
       `Skipping ${templateName}, which does not support addon-interactions`
     );
 
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
     await sbPage.deepLinkToStory(storybookUrl, 'core/shortcuts', 'docs');
 
     await expect(sbPage.page.locator('.sidebar-container')).toBeVisible();
@@ -56,11 +60,12 @@ test.describe('preview-api', () => {
 
   // if rerenders were interleaved the button would have rendered "Error: Interleaved loaders. Changed arg"
   test('should only render once at a time when rapidly changing args', async ({ page }) => {
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
     await sbPage.navigateToStory('core/rendering', 'slow-loader');
 
     const root = sbPage.previewRoot();
 
+    await sbPage.viewAddonPanel('Controls');
     const labelControl = sbPage.page.locator('#control-label');
 
     await expect(root.getByText('Loaded. Click me')).toBeVisible();
@@ -74,7 +79,7 @@ test.describe('preview-api', () => {
   });
 
   test('should reload plage when remounting while loading', async ({ page }) => {
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
     await sbPage.navigateToStory('core/rendering', 'slow-loader');
 
     const root = sbPage.previewRoot();
diff --git a/code/e2e-tests/save-from-controls.spec.ts b/code/e2e-tests/save-from-controls.spec.ts
index cf5ad28ef363..4d8e7f84cd4e 100644
--- a/code/e2e-tests/save-from-controls.spec.ts
+++ b/code/e2e-tests/save-from-controls.spec.ts
@@ -19,7 +19,7 @@ test.describe('save-from-controls', () => {
     test.skip(browserName !== 'chromium', `Skipping save-from-controls tests for ${browserName}`);
 
     await page.goto(storybookUrl);
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
     await sbPage.waitUntilLoaded();
 
     await sbPage.navigateToStory('example/button', 'primary');
diff --git a/code/e2e-tests/storybook-hooks.spec.ts b/code/e2e-tests/storybook-hooks.spec.ts
index b9c1ed1be4d2..9f3778852c96 100644
--- a/code/e2e-tests/storybook-hooks.spec.ts
+++ b/code/e2e-tests/storybook-hooks.spec.ts
@@ -4,7 +4,7 @@
 import { promises as fs } from 'node:fs';
 import { join } from 'node:path';
 
-import { test } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 
 import { SbPage } from './util';
 
@@ -31,11 +31,11 @@ test.describe('Storybook hooks', () => {
   );
   test.beforeEach(async ({ page }) => {
     await page.goto(storybookUrl);
-    await new SbPage(page).waitUntilLoaded();
+    await new SbPage(page, expect).waitUntilLoaded();
   });
 
   test('should call beforeAll upon loading Storybook', async ({ page }, { titlePath }) => {
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
 
     await sbPage.navigateToStory('example/button', 'primary');
 
@@ -50,7 +50,7 @@ test.describe('Storybook hooks', () => {
 
   test('should call beforeAll and cleanup on HMR', async ({ page }, { titlePath }) => {
     test.skip(!isStorybookDev, 'HMR is only applicable in dev mode');
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
 
     await sbPage.navigateToStory('example/button', 'primary');
 
diff --git a/code/e2e-tests/tags.spec.ts b/code/e2e-tests/tags.spec.ts
index b6aa96dafca2..e4743c0c2974 100644
--- a/code/e2e-tests/tags.spec.ts
+++ b/code/e2e-tests/tags.spec.ts
@@ -7,11 +7,11 @@ const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001';
 test.describe('tags', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(storybookUrl);
-    await new SbPage(page).waitUntilLoaded();
+    await new SbPage(page, expect).waitUntilLoaded();
   });
 
   test('should correctly filter dev-only, docs-only, test-only stories', async ({ page }) => {
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
 
     await sbPage.navigateToStory('core/tags-config', 'docs');
 
@@ -29,7 +29,7 @@ test.describe('tags', () => {
   });
 
   test('should correctly add dev, autodocs, test stories', async ({ page }) => {
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
 
     await sbPage.navigateToStory('core/tags-add', 'docs');
 
@@ -48,7 +48,7 @@ test.describe('tags', () => {
   });
 
   test('should correctly remove dev, autodocs, test stories', async ({ page }) => {
-    const sbPage = new SbPage(page);
+    const sbPage = new SbPage(page, expect);
 
     await sbPage.navigateToStory('core/tags-remove', 'docs');
 
diff --git a/code/e2e-tests/util.ts b/code/e2e-tests/util.ts
index 00122ef595d2..d9faad22939a 100644
--- a/code/e2e-tests/util.ts
+++ b/code/e2e-tests/util.ts
@@ -1,13 +1,18 @@
+/* eslint-disable local-rules/no-uncategorized-errors */
 import { toId } from '@storybook/csf';
 
-import type { Page } from '@playwright/test';
-import { expect } from '@playwright/test';
+import type { Expect, Page } from '@playwright/test';
+
+import { allTemplates } from '../lib/cli-storybook/src/sandbox-templates';
 
 export class SbPage {
   readonly page: Page;
 
-  constructor(page: Page) {
+  readonly expect: Expect;
+
+  constructor(page: Page, expect: Expect) {
     this.page = page;
+    this.expect = expect;
   }
 
   async openComponent(title: string, hasRoot = true) {
@@ -17,7 +22,7 @@ export class SbPage {
 
       const parentLink = this.page.locator(`#${parentId}`);
 
-      await expect(parentLink).toBeVisible();
+      await this.expect(parentLink).toBeVisible();
       if ((await parentLink.getAttribute('aria-expanded')) === 'false') {
         await parentLink.click();
       }
@@ -49,14 +54,15 @@ export class SbPage {
 
     await this.page.waitForURL((url) =>
       url.search.includes(
-        `path=/${viewMode ?? name === 'docs' ? 'docs' : 'story'}/${titleId}--${storyId}`
+        `path=/${(viewMode ?? name === 'docs') ? 'docs' : 'story'}/${titleId}--${storyId}`
       )
     );
 
     const selected = storyLink;
-    await expect(selected).toHaveAttribute('data-selected', 'true');
+    await this.expect(selected).toHaveAttribute('data-selected', 'true');
 
     await this.previewRoot();
+    await this.waitUntilLoaded();
   }
 
   async navigateToUnattachedDocs(title: string, name = 'docs') {
@@ -74,9 +80,27 @@ export class SbPage {
     );
 
     const selected = storyLink;
-    await expect(selected).toHaveAttribute('data-selected', 'true');
+    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() {
@@ -108,6 +132,8 @@ export class SbPage {
     const storyLoadingPage = root.locator('.sb-preparing-story');
     await docsLoadingPage.waitFor({ state: 'hidden' });
     await storyLoadingPage.waitFor({ state: 'hidden' });
+
+    await this.waitForStoryLoaded();
   }
 
   previewIframe() {
@@ -120,7 +146,7 @@ export class SbPage {
   }
 
   panelContent() {
-    return this.page.locator('#storybook-panel-root #panel-tab-content');
+    return this.page.locator('#storybook-panel-root #panel-tab-content > div:not([hidden])');
   }
 
   async viewAddonPanel(name: string) {
@@ -139,4 +165,34 @@ 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);
+
+const templates = allTemplates;
+export const hasVitestIntegration =
+  !templates[templateName]?.skipTasks?.includes('vitest-integration');
diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json
index 0dd1fa78ba0b..2105d16d28bb 100644
--- a/code/frameworks/angular/package.json
+++ b/code/frameworks/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -38,12 +38,12 @@
   },
   "dependencies": {
     "@storybook/builder-webpack5": "workspace:*",
-    "@storybook/components": "workspace:^",
+    "@storybook/components": "workspace:*",
     "@storybook/core-webpack": "workspace:*",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "workspace:^",
-    "@storybook/preview-api": "workspace:^",
-    "@storybook/theming": "workspace:^",
+    "@storybook/manager-api": "workspace:*",
+    "@storybook/preview-api": "workspace:*",
+    "@storybook/theming": "workspace:*",
     "@types/node": "^22.0.0",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
@@ -81,17 +81,17 @@
     "zone.js": "^0.14.2"
   },
   "peerDependencies": {
-    "@angular-devkit/architect": ">=0.1500.0 < 0.1900.0",
-    "@angular-devkit/build-angular": ">=15.0.0 < 19.0.0",
-    "@angular-devkit/core": ">=15.0.0 < 19.0.0",
-    "@angular/cli": ">=15.0.0 < 19.0.0",
-    "@angular/common": ">=15.0.0 < 19.0.0",
-    "@angular/compiler": ">=15.0.0 < 19.0.0",
-    "@angular/compiler-cli": ">=15.0.0 < 19.0.0",
-    "@angular/core": ">=15.0.0 < 19.0.0",
-    "@angular/forms": ">=15.0.0 < 19.0.0",
-    "@angular/platform-browser": ">=15.0.0 < 19.0.0",
-    "@angular/platform-browser-dynamic": ">=15.0.0 < 19.0.0",
+    "@angular-devkit/architect": ">=0.1500.0 < 0.2000.0",
+    "@angular-devkit/build-angular": ">=15.0.0 < 20.0.0",
+    "@angular-devkit/core": ">=15.0.0 < 20.0.0",
+    "@angular/cli": ">=15.0.0 < 20.0.0",
+    "@angular/common": ">=15.0.0 < 20.0.0",
+    "@angular/compiler": ">=15.0.0 < 20.0.0",
+    "@angular/compiler-cli": ">=15.0.0 < 20.0.0",
+    "@angular/core": ">=15.0.0 < 20.0.0",
+    "@angular/forms": ">=15.0.0 < 20.0.0",
+    "@angular/platform-browser": ">=15.0.0 < 20.0.0",
+    "@angular/platform-browser-dynamic": ">=15.0.0 < 20.0.0",
     "rxjs": "^6.0.0 || ^7.4.0",
     "storybook": "workspace:^",
     "typescript": "^4.0.0 || ^5.0.0",
diff --git a/code/frameworks/angular/project.json b/code/frameworks/angular/project.json
index 4c096a145ebc..8281c8a8742f 100644
--- a/code/frameworks/angular/project.json
+++ b/code/frameworks/angular/project.json
@@ -5,11 +5,7 @@
   "targets": {
     "build": {},
     "check": {
-      "executor": "nx:run-commands",
-      "options": {
-        "command": "echo '\"nx check angular\" can only run with the parameter \"-c production\"'",
-        "description": "We need to expand code/storybook/storybook/scripts/prepare/check.ts"
-      },
+      "command": "echo '\"nx check angular\" can only run with the parameter \"-c production\", we need to expand code/storybook/storybook/scripts/prepare/check.ts'",
       "configurations": {
         "production": {
           "cwd": "{projectRoot}",
diff --git a/code/frameworks/angular/src/builders/build-storybook/schema.json b/code/frameworks/angular/src/builders/build-storybook/schema.json
index dbc2a734417e..77e455cdb1be 100644
--- a/code/frameworks/angular/src/builders/build-storybook/schema.json
+++ b/code/frameworks/angular/src/builders/build-storybook/schema.json
@@ -51,7 +51,7 @@
     },
     "docs": {
       "type": "boolean",
-      "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.",
+      "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/writing-docs/build-documentation#preview-storybooks-documentation.",
       "default": false
     },
     "test": {
@@ -77,6 +77,11 @@
       "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"
diff --git a/code/frameworks/angular/src/builders/start-storybook/schema.json b/code/frameworks/angular/src/builders/start-storybook/schema.json
index a2eef03e4b08..64d53bd5481e 100644
--- a/code/frameworks/angular/src/builders/start-storybook/schema.json
+++ b/code/frameworks/angular/src/builders/start-storybook/schema.json
@@ -83,7 +83,7 @@
     },
     "docs": {
       "type": "boolean",
-      "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.",
+      "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/writing-docs/build-documentation#preview-storybooks-documentation.",
       "default": false
     },
     "compodoc": {
@@ -139,6 +139,11 @@
       "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"
diff --git a/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.ts b/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.ts
index dc12b820879c..1859bb9ca249 100644
--- a/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.ts
+++ b/code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.ts
@@ -11,6 +11,7 @@ import {
   Provider,
   ɵReflectionCapabilities as ReflectionCapabilities,
   importProvidersFrom,
+  VERSION,
 } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import {
@@ -176,15 +177,20 @@ export class PropertyExtractor implements NgModuleMetadata {
     const isDeclarable = isComponent || isDirective || isPipe;
 
     // Check if the hierarchically lowest Component or Directive decorator (the only relevant for importing dependencies) is standalone.
-    const isStandalone = !!(
+
+    let isStandalone =
       (isComponent || isDirective) &&
       [...decorators]
         .reverse() // reflectionCapabilities returns decorators in a hierarchically top-down order
         .find(
           (d) =>
             this.isDecoratorInstanceOf(d, 'Component') || this.isDecoratorInstanceOf(d, 'Directive')
-        )?.standalone
-    );
+        )?.standalone;
+
+    //Starting in Angular 19 the default (in case it's undefined) value for standalone is true
+    if (isStandalone === undefined) {
+      isStandalone = !!(VERSION.major && Number(VERSION.major) >= 19);
+    }
 
     return { isDeclarable, isStandalone };
   };
diff --git a/code/frameworks/angular/src/client/decorators.test.ts b/code/frameworks/angular/src/client/decorators.test.ts
index f7133806e3df..a977e681864b 100644
--- a/code/frameworks/angular/src/client/decorators.test.ts
+++ b/code/frameworks/angular/src/client/decorators.test.ts
@@ -20,6 +20,10 @@ const defaultContext: Addon_StoryContext<AngularRenderer> = {
   globals: {},
   globalTypes: {},
   storyGlobals: {},
+  reporting: {
+    reports: [],
+    addReport: vi.fn(),
+  },
   hooks: {},
   loaded: {},
   originalStoryFn: vi.fn(),
diff --git a/code/frameworks/angular/src/server/angular-cli-webpack.js b/code/frameworks/angular/src/server/angular-cli-webpack.js
index 92ed6225d19f..6be86712e5bc 100644
--- a/code/frameworks/angular/src/server/angular-cli-webpack.js
+++ b/code/frameworks/angular/src/server/angular-cli-webpack.js
@@ -68,7 +68,7 @@ exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }
       outputPath:
         typeof builderOptions.outputPath === 'string'
           ? builderOptions.outputPath
-          : builderOptions.outputPath?.base ?? 'noop-out',
+          : (builderOptions.outputPath?.base ?? 'noop-out'),
 
       // Fixed options
       optimization: false,
diff --git a/code/frameworks/angular/template/components/button.component.ts b/code/frameworks/angular/template/components/button.component.ts
index 7a0fc8e8408a..4407ead9b050 100644
--- a/code/frameworks/angular/template/components/button.component.ts
+++ b/code/frameworks/angular/template/components/button.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
+  standalone: false,
   // Needs to be a different name to the CLI template button
   selector: 'storybook-framework-button',
   template: ` <button
diff --git a/code/frameworks/angular/template/components/button.css b/code/frameworks/angular/template/components/button.css
index 94d674b7614d..4e3620b0dcbf 100644
--- a/code/frameworks/angular/template/components/button.css
+++ b/code/frameworks/angular/template/components/button.css
@@ -8,7 +8,7 @@
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 .storybook-button--primary {
-  background-color: #1ea7fd;
+  background-color: #555ab9;
   color: white;
 }
 .storybook-button--secondary {
diff --git a/code/frameworks/angular/template/components/form.component.ts b/code/frameworks/angular/template/components/form.component.ts
index 697aef1d68d6..272e79eebf7f 100644
--- a/code/frameworks/angular/template/components/form.component.ts
+++ b/code/frameworks/angular/template/components/form.component.ts
@@ -1,6 +1,7 @@
 import { Component, Output, EventEmitter } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'storybook-form',
   template: `
     <form id="interaction-test-form" (submit)="handleSubmit($event)">
diff --git a/code/frameworks/angular/template/components/html.component.ts b/code/frameworks/angular/template/components/html.component.ts
index 7efcf9770e6e..fc3e8235387f 100644
--- a/code/frameworks/angular/template/components/html.component.ts
+++ b/code/frameworks/angular/template/components/html.component.ts
@@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
+  standalone: false,
   selector: 'storybook-html',
   template: `<div [innerHTML]="safeContent"></div>`,
 })
diff --git a/code/frameworks/angular/template/components/pre.component.ts b/code/frameworks/angular/template/components/pre.component.ts
index df714c936931..0fdecbec545b 100644
--- a/code/frameworks/angular/template/components/pre.component.ts
+++ b/code/frameworks/angular/template/components/pre.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'storybook-pre',
   template: `<pre data-testid="pre" [ngStyle]="style">{{ finalText }}</pre>`,
 })
diff --git a/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.ts b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.ts
index 503dc358e22c..37852f7fe2e2 100644
--- a/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.ts
+++ b/code/frameworks/angular/template/stories/argTypes/doc-button/doc-button.component.ts
@@ -38,6 +38,7 @@ export enum ButtonAccent {
  * @html <span class="badge">aaa</span>
  */
 @Component({
+  standalone: false,
   selector: 'my-button',
   templateUrl: './doc-button.component.html',
   styleUrls: ['./doc-button.component.scss'],
diff --git a/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.directive.ts b/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.directive.ts
index 566ad55a992f..66c4b6681528 100644
--- a/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.directive.ts
+++ b/code/frameworks/angular/template/stories/argTypes/doc-directive/doc-directive.directive.ts
@@ -2,6 +2,7 @@ import { ElementRef, AfterViewInit, Directive, Input } from '@angular/core';
 
 /** This is an Angular Directive example that has a Prop Table. */
 @Directive({
+  standalone: false,
   selector: '[docDirective]',
 })
 export class DocDirective implements AfterViewInit {
diff --git a/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.pipe.ts b/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.pipe.ts
index 2964a6ef68c2..2bf9539e935b 100644
--- a/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.pipe.ts
+++ b/code/frameworks/angular/template/stories/argTypes/doc-pipe/doc-pipe.pipe.ts
@@ -2,6 +2,7 @@ import { PipeTransform, Pipe } from '@angular/core';
 
 /** This is an Angular Pipe example that has a Prop Table. */
 @Pipe({
+  standalone: false,
   name: 'docPipe',
 })
 export class DocPipe implements PipeTransform {
diff --git a/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts
index cf05f53fff56..00a23c4fe74e 100644
--- a/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts
+++ b/code/frameworks/angular/template/stories/basics/angular-forms/customControlValueAccessor/custom-cva.component.ts
@@ -4,6 +4,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 const NOOP = () => {};
 
 @Component({
+  standalone: false,
   selector: 'storybook-custom-cva-component',
   template: ` <div>{{ value }}</div>
 <input type="text" [(ngModel)]="value" /> `,
diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selector.component.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selector.component.ts
index 3b1eebacb1bc..6a3f6215b158 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selector.component.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/attribute-selector.component.ts
@@ -1,6 +1,7 @@
 import { ComponentFactoryResolver, ElementRef, Component } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'storybook-attribute-selector[foo=bar]',
   template: `<h3>Attribute selector</h3>
 Selector: {{ selectors }} <br />
diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.ts
index b1fa65859db9..2c60a3488b70 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/class-selector.component.ts
@@ -1,6 +1,7 @@
 import { ComponentFactoryResolver, ElementRef, Component } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'storybook-class-selector.foo, storybook-class-selector.bar',
   template: `<h3>Class selector</h3>
 Selector: {{ selectors }} <br />
diff --git a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.ts b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.ts
index 5a12fc7ffe5a..255d4d51a689 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-complex-selectors/multiple-selector.component.ts
@@ -1,6 +1,7 @@
 import { ComponentFactoryResolver, ElementRef, Component } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'storybook-multiple-selector, storybook-multiple-selector2',
   template: `<h3>Multiple selector</h3>
 Selector: {{ selectors }} <br />
@@ -22,6 +23,7 @@ export class MultipleSelectorComponent {
 }
 
 @Component({
+  standalone: false,
   selector: 'storybook-button, button[foo], .button[foo], button[baz]',
   template: `<h3>Multiple selector</h3>
 Selector: {{ selectors }} <br />
diff --git a/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.ts b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.ts
index 492f575b69f1..171e4ff51d0e 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-enums/enums.component.ts
@@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core';
 
 /** This component is used for testing the various forms of enum types */
 @Component({
+  standalone: false,
   selector: 'app-enums',
   templateUrl: './enums.component.html',
 })
diff --git a/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.component.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.component.ts
index 0cd694506d50..b1d8111cef2a 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.component.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-inheritance/base-button.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: `storybook-base-button`,
   template: ` <button>{{ label }}</button> `,
 })
diff --git a/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.component.ts b/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.component.ts
index 3994a3de2a97..4dfc63e09c8a 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.component.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-inheritance/icon-button.component.ts
@@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core';
 import { BaseButtonComponent } from './base-button.component';
 
 @Component({
+  standalone: false,
   selector: `storybook-icon-button`,
   template: ` <button>{{ label }} - {{ icon }}</button> `,
 })
diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts
index f8185f8eb80a..9f54986c6cc5 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts
@@ -2,6 +2,7 @@ import { Component, Input } from '@angular/core';
 import { componentWrapperDecorator, Meta, StoryObj } from '@storybook/angular';
 
 @Component({
+  standalone: false,
   selector: 'sb-button',
   template: `<button [style.background-color]="color"><ng-content></ng-content></button>`,
   styles: [
diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts
index cc6bd1ccf6e2..775a895aa5dc 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-ng-content/ng-content-simple.stories.ts
@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 import { Meta, StoryObj } from '@storybook/angular';
 
 @Component({
+  standalone: false,
   selector: 'storybook-with-ng-content',
   template: `Content value:
 <div style="color: #1e88e5"><ng-content></ng-content></div>`,
diff --git a/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts
index 24edd068f7f1..8ccc180b991b 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts
@@ -2,6 +2,7 @@ import { OnDestroy, OnInit, Component } from '@angular/core';
 import { Meta, StoryObj } from '@storybook/angular';
 
 @Component({
+  standalone: false,
   selector: 'on-destroy',
   template: `Current time: {{ time }} <br />
 📝 The current time in console should no longer display after a change of story`,
diff --git a/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push-box.component.ts b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push-box.component.ts
index b6bf293f1b0e..9d8a86aa67fb 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push-box.component.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-on-push/on-push-box.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input, ChangeDetectionStrategy, HostBinding } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'storybook-on-push-box',
   template: ` Word of the day: {{ word }} `,
   styles: [
diff --git a/code/frameworks/angular/template/stories/basics/component-with-pipe/custom.pipe.ts b/code/frameworks/angular/template/stories/basics/component-with-pipe/custom.pipe.ts
index 0038bd609241..e588751b936e 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-pipe/custom.pipe.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-pipe/custom.pipe.ts
@@ -1,6 +1,7 @@
 import { PipeTransform, Pipe } from '@angular/core';
 
 @Pipe({
+  standalone: false,
   name: 'customPipe',
 })
 export class CustomPipePipe implements PipeTransform {
diff --git a/code/frameworks/angular/template/stories/basics/component-with-pipe/with-pipe.component.ts b/code/frameworks/angular/template/stories/basics/component-with-pipe/with-pipe.component.ts
index 4582170ecf73..12ec82171649 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-pipe/with-pipe.component.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-pipe/with-pipe.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'storybook-with-pipe',
   template: ` <h1>{{ field | customPipe }}</h1> `,
 })
diff --git a/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts
index e3e8a28ac18f..c840bf64a4a6 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts
@@ -4,6 +4,7 @@ import { stringify } from 'telejson';
 export const TEST_TOKEN = new InjectionToken<string>('test');
 
 @Component({
+  standalone: false,
   selector: 'storybook-di-component',
   templateUrl: './di.component.html',
   providers: [{ provide: TEST_TOKEN, useValue: 123 }],
diff --git a/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.ts b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.ts
index 6cdb0a9a627b..63ac3c56b07e 100644
--- a/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.ts
+++ b/code/frameworks/angular/template/stories/basics/component-with-style/styled.component.ts
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'storybook-styled-component',
   templateUrl: './styled.component.html',
   styleUrls: ['./styled.component.css', './styled.component.scss'],
diff --git a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts
index 5518e437763e..64347d989fc1 100644
--- a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts
+++ b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector-ng-component-outlet.stories.ts
@@ -19,6 +19,7 @@ type Story = StoryObj<WithoutSelectorComponent>;
 // Advanced example with custom *ngComponentOutlet
 
 @Component({
+  standalone: false,
   selector: 'ng-component-outlet-wrapper',
   template: `<ng-container
   *ngComponentOutlet="componentOutlet; injector: componentInjector; content: componentContent"
diff --git a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.component.ts b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.component.ts
index 6e9ed12eff34..9d0b0d428690 100644
--- a/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.component.ts
+++ b/code/frameworks/angular/template/stories/basics/component-without-selector/without-selector.component.ts
@@ -5,6 +5,7 @@ export const WITHOUT_SELECTOR_DATA = new InjectionToken<{ color: string; name: s
 );
 
 @Component({
+  standalone: false,
   template: `My name in color :
 <div [style.color]="color">{{ name }}</div>
 <ng-content></ng-content> <ng-content></ng-content>`,
diff --git a/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip-text.pipe.ts b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip-text.pipe.ts
index 0d628239d07b..9c6f1745063a 100644
--- a/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip-text.pipe.ts
+++ b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip-text.pipe.ts
@@ -1,6 +1,7 @@
 import { PipeTransform, Pipe } from '@angular/core';
 
 @Pipe({
+  standalone: false,
   name: 'chipText',
 })
 export class ChipTextPipe implements PipeTransform {
diff --git a/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip.component.ts b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip.component.ts
index 52546084465a..7804fe73fbd7 100644
--- a/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip.component.ts
+++ b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chip.component.ts
@@ -2,6 +2,7 @@ import { Component, Input, Output, EventEmitter, Inject, HostBinding } from '@an
 import { CHIP_COLOR } from './chip-color.token';
 
 @Component({
+  standalone: false,
   selector: 'storybook-chip',
   template: `
     <span class="text">{{ displayText | chipText }}</span>
diff --git a/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips-group.component.ts b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips-group.component.ts
index 98131407a01c..fa56aca48860 100644
--- a/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips-group.component.ts
+++ b/code/frameworks/angular/template/stories/basics/ng-module/angular-src/chips-group.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'storybook-chips-group',
   template: `
     <storybook-chip
diff --git a/code/frameworks/angular/template/stories/button.component.ts b/code/frameworks/angular/template/stories/button.component.ts
index 3617f8c59935..0d675ad1a609 100644
--- a/code/frameworks/angular/template/stories/button.component.ts
+++ b/code/frameworks/angular/template/stories/button.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'storybook-button-component',
   template: ` <button (click)="onClick.emit($event)">{{ text }}</button> `,
   styles: [
diff --git a/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/child.component.ts b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/child.component.ts
index 5caf5db9cb20..3ac601cf8e86 100644
--- a/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/child.component.ts
+++ b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/child.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'child-component',
   template: `
     Child<br />
diff --git a/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/parent.component.ts b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/parent.component.ts
index 20a4447636b5..b32984ebb99a 100644
--- a/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/parent.component.ts
+++ b/code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator/parent.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'parent-component',
   template: `
     Parent<br />
diff --git a/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/custom.pipe.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/custom.pipe.ts
index 0038bd609241..e588751b936e 100644
--- a/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/custom.pipe.ts
+++ b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/custom.pipe.ts
@@ -1,6 +1,7 @@
 import { PipeTransform, Pipe } from '@angular/core';
 
 @Pipe({
+  standalone: false,
   name: 'customPipe',
 })
 export class CustomPipePipe implements PipeTransform {
diff --git a/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.ts
index db630db4d4b0..4982f166e2a2 100644
--- a/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.ts
+++ b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 
 @Component({
+  standalone: false,
   selector: 'app-open-close',
   animations: [
     trigger('openClose', [
diff --git a/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/service.component.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/service.component.ts
index 6e84cb430447..736c6cbff923 100644
--- a/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/service.component.ts
+++ b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/service.component.ts
@@ -2,6 +2,7 @@ import { OnInit, Component, Input } from '@angular/core';
 import { DummyService } from './dummy.service';
 
 @Component({
+  standalone: false,
   selector: 'storybook-simple-service-component',
   template: `<p>{{ name }}:</p>
 <ul>
diff --git a/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/token.component.ts b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/token.component.ts
index 8268bceaf3c0..df1c85925aac 100644
--- a/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/token.component.ts
+++ b/code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/token.component.ts
@@ -4,6 +4,7 @@ export const ITEMS = new InjectionToken<string[]>('TokenComponent.Items');
 export const DEFAULT_NAME = new InjectionToken<string>('TokenComponent.DefaultName');
 
 @Component({
+  standalone: false,
   selector: 'storybook-simple-token-component',
   template: `
     <h3>{{ name }}</h3>
diff --git a/code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts b/code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts
index f3cebdb807ad..b5c4d1d9725a 100644
--- a/code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts
+++ b/code/frameworks/angular/template/stories/core/parameters/bootstrap-options.stories.ts
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/angular';
 import { Component } from '@angular/core';
 
 @Component({
+  standalone: false,
   selector: 'component-with-whitespace',
   preserveWhitespaces: true,
   template: ` <div>
diff --git a/code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.component.ts b/code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.component.ts
index a471debefafa..d0513056aea1 100644
--- a/code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.component.ts
+++ b/code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input, input, output } from '@angular/core';
 
 @Component({
+  standalone: false,
   // Needs to be a different name to the CLI template button
   selector: 'storybook-signal-button',
   template: ` <button
diff --git a/code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.css b/code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.css
index 94d674b7614d..4e3620b0dcbf 100644
--- a/code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.css
+++ b/code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.css
@@ -8,7 +8,7 @@
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 .storybook-button--primary {
-  background-color: #1ea7fd;
+  background-color: #555ab9;
   color: white;
 }
 .storybook-button--secondary {
diff --git a/code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.component.ts b/code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.component.ts
index a471debefafa..d0513056aea1 100644
--- a/code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.component.ts
+++ b/code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.component.ts
@@ -1,6 +1,7 @@
 import { Component, Input, input, output } from '@angular/core';
 
 @Component({
+  standalone: false,
   // Needs to be a different name to the CLI template button
   selector: 'storybook-signal-button',
   template: ` <button
diff --git a/code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.css b/code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.css
index 94d674b7614d..4e3620b0dcbf 100644
--- a/code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.css
+++ b/code/frameworks/angular/template/stories_angular-cli-prerelease/signal/button.css
@@ -8,7 +8,7 @@
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 .storybook-button--primary {
-  background-color: #1ea7fd;
+  background-color: #555ab9;
   color: white;
 }
 .storybook-button--secondary {
diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json
index d2c853d602b1..bd1ae51f689e 100644
--- a/code/frameworks/ember/package.json
+++ b/code/frameworks/ember/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ember",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "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 a3b13a8430af..da9fce69dedd 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook for Next.js and Vite",
   "keywords": [
     "storybook",
@@ -97,22 +97,23 @@
   "dependencies": {
     "@storybook/builder-vite": "workspace:*",
     "@storybook/react": "workspace:*",
+    "@storybook/react-vite": "workspace:*",
     "@storybook/test": "workspace:*",
     "styled-jsx": "5.1.6",
-    "vite-plugin-storybook-nextjs": "^1.0.11"
+    "vite-plugin-storybook-nextjs": "^1.1.0"
   },
   "devDependencies": {
     "@types/node": "^18.0.0",
-    "next": "^14.2.5",
+    "next": "^15.0.3",
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
     "@storybook/test": "workspace:*",
-    "next": "^14.1.0",
+    "next": "^14.1.0 || ^15.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "storybook": "workspace:^",
-    "vite": "^5.0.0"
+    "vite": "^5.0.0 || ^6.0.0"
   },
   "peerDependenciesMeta": {
     "typescript": {
@@ -141,7 +142,8 @@
       "./src/images/decorator.tsx"
     ],
     "externals": [
-      "sb-original/image-context"
+      "sb-original/image-context",
+      "sb-original/default-loader"
     ],
     "platform": "node"
   },
diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/draft-mode.compat.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/draft-mode.compat.ts
new file mode 100644
index 000000000000..cdcaf63bbf1a
--- /dev/null
+++ b/code/frameworks/experimental-nextjs-vite/src/export-mocks/compatibility/draft-mode.compat.ts
@@ -0,0 +1,2 @@
+// @ts-expect-error Compatibility for Next 14
+export { draftMode } from 'next/dist/client/components/headers';
diff --git a/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/index.ts b/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/index.ts
index 1797d4ccaf57..1c903963ba2d 100644
--- a/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/index.ts
+++ b/code/frameworks/experimental-nextjs-vite/src/export-mocks/headers/index.ts
@@ -1,14 +1,15 @@
 import { fn } from '@storybook/test';
 
-import * as originalHeaders from 'next/dist/client/components/headers';
+import { draftMode as originalDraftMode } from 'next/dist/server/request/draft-mode';
+import * as headers from 'next/dist/server/request/headers';
 
 // re-exports of the actual module
-export * from 'next/dist/client/components/headers';
+export * from 'next/dist/server/request/headers';
 
 // mock utilities/overrides (as of Next v14.2.0)
 export { headers } from './headers';
 export { cookies } from './cookies';
 
 // passthrough mocks - keep original implementation but allow for spying
-const draftMode = fn(originalHeaders.draftMode).mockName('draftMode');
+const draftMode = fn(originalDraftMode ?? (headers as any).draftMode).mockName('draftMode');
 export { draftMode };
diff --git a/code/frameworks/experimental-nextjs-vite/src/preset.ts b/code/frameworks/experimental-nextjs-vite/src/preset.ts
index 0a725be35804..633f62a5dceb 100644
--- a/code/frameworks/experimental-nextjs-vite/src/preset.ts
+++ b/code/frameworks/experimental-nextjs-vite/src/preset.ts
@@ -4,6 +4,7 @@ import path from 'node:path';
 import type { PresetProperty } from 'storybook/internal/types';
 
 import type { StorybookConfigVite } from '@storybook/builder-vite';
+import { viteFinal as reactViteFinal } from '@storybook/react-vite/preset';
 
 import { dirname, join } from 'path';
 import vitePluginStorybookNextjs from 'vite-plugin-storybook-nextjs';
@@ -34,11 +35,13 @@ export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entry =
 };
 
 export const viteFinal: StorybookConfigVite['viteFinal'] = async (config, options) => {
-  config.plugins = config.plugins || [];
+  const reactConfig = await reactViteFinal(config, options);
+  const { plugins = [] } = reactConfig;
+
   const { nextConfigPath } = await options.presets.apply<FrameworkOptions>('frameworkOptions');
 
   const nextDir = nextConfigPath ? path.dirname(nextConfigPath) : undefined;
-  config.plugins.push(vitePluginStorybookNextjs({ dir: nextDir }));
+  plugins.push(vitePluginStorybookNextjs({ dir: nextDir }));
 
-  return config;
+  return reactConfig;
 };
diff --git a/code/frameworks/experimental-nextjs-vite/src/routing/app-router-provider.tsx b/code/frameworks/experimental-nextjs-vite/src/routing/app-router-provider.tsx
index 99269e569075..eec03995d266 100644
--- a/code/frameworks/experimental-nextjs-vite/src/routing/app-router-provider.tsx
+++ b/code/frameworks/experimental-nextjs-vite/src/routing/app-router-provider.tsx
@@ -18,11 +18,14 @@ import {
   PathnameContext,
   SearchParamsContext,
 } from 'next/dist/shared/lib/hooks-client-context.shared-runtime';
-import { type Params } from 'next/dist/shared/lib/router/utils/route-matcher';
 import { PAGE_SEGMENT_KEY } from 'next/dist/shared/lib/segment';
 
 import type { RouteParams } from './types';
 
+// Using an inline type so we can support Next 14 and lower
+// from https://github.com/vercel/next.js/blob/v15.0.3/packages/next/src/server/request/params.ts#L25
+type Params = Record<string, string | Array<string> | undefined>;
+
 type AppRouterProviderProps = {
   routeParams: RouteParams;
 };
@@ -41,8 +44,6 @@ function getSelectedParams(currentTree: FlightRouterState, params: Params = {}):
       continue;
     }
 
-    // Ensure catchAll and optional catchall are turned into an array
-
     // Ensure catchAll and optional catchall are turned into an array
     const isCatchAll = isDynamicParameter && (segment[2] === 'c' || segment[2] === 'oc');
 
@@ -79,6 +80,16 @@ export const AppRouterProvider: React.FC<React.PropsWithChildren<AppRouterProvid
     return getSelectedParams(tree);
   }, [tree]);
 
+  const newLazyCacheNode = {
+    lazyData: null,
+    rsc: null,
+    prefetchRsc: null,
+    head: null,
+    prefetchHead: null,
+    parallelRoutes: new Map(),
+    loading: null,
+  };
+
   // https://github.com/vercel/next.js/blob/canary/packages/next/src/client/components/app-router.tsx#L436
   return (
     <PathParamsContext.Provider value={pathParams}>
@@ -103,10 +114,18 @@ export const AppRouterProvider: React.FC<React.PropsWithChildren<AppRouterProvid
             <AppRouterContext.Provider value={getRouter()}>
               <LayoutRouterContext.Provider
                 value={{
+                  // TODO Remove when dropping Next.js < v15.1.1
                   childNodes: new Map(),
-                  loading: null,
                   tree,
+                  // TODO END
+
+                  // START Next.js v15.2 support
+                  // @ts-expect-error Only available in Next.js >= v15.1.1
+                  parentTree: tree,
+                  parentCacheNode: newLazyCacheNode,
+                  // END
                   url: pathname,
+                  loading: null,
                 }}
               >
                 {children}
diff --git a/code/frameworks/experimental-nextjs-vite/src/types.ts b/code/frameworks/experimental-nextjs-vite/src/types.ts
index 8de91a4430d9..0221787dccb6 100644
--- a/code/frameworks/experimental-nextjs-vite/src/types.ts
+++ b/code/frameworks/experimental-nextjs-vite/src/types.ts
@@ -1,9 +1,7 @@
-import type {
-  CompatibleString,
-  StorybookConfig as StorybookConfigBase,
-} from 'storybook/internal/types';
+import type { CompatibleString } from 'storybook/internal/types';
 
-import type { BuilderOptions, StorybookConfigVite } from '@storybook/builder-vite';
+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'>;
@@ -21,7 +19,7 @@ type StorybookConfigFramework = {
         name: FrameworkName;
         options: FrameworkOptions;
       };
-  core?: StorybookConfigBase['core'] & {
+  core?: StorybookConfigReactVite['core'] & {
     builder?:
       | BuilderName
       | {
@@ -32,9 +30,5 @@ type StorybookConfigFramework = {
 };
 
 /** The interface for Storybook configuration in `main.ts` files. */
-export type StorybookConfig = Omit<
-  StorybookConfigBase,
-  keyof StorybookConfigVite | keyof StorybookConfigFramework
-> &
-  StorybookConfigVite &
-  StorybookConfigFramework & {};
+export type StorybookConfig = Omit<StorybookConfigReactVite, keyof StorybookConfigFramework> &
+  StorybookConfigFramework;
diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/Head.stories.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/Head.stories.tsx
index db1b747bf78d..0d344078868f 100644
--- a/code/frameworks/experimental-nextjs-vite/template/stories/Head.stories.tsx
+++ b/code/frameworks/experimental-nextjs-vite/template/stories/Head.stories.tsx
@@ -33,8 +33,8 @@ export const Default: Story = {
   play: async () => {
     await waitFor(() => expect(document.title).toEqual('Next.js Head Title'));
     await expect(document.querySelectorAll('meta[property="og:title"]')).toHaveLength(1);
-    await expect((document.querySelector('meta[property="og:title"]') as any).content).toEqual(
-      'My new title'
-    );
+    await expect(
+      (document.querySelector('meta[property="og:title"]') as HTMLMetaElement)?.content
+    ).toEqual('My new title');
   },
 };
diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/ImageLegacy.stories.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/ImageLegacy.stories.tsx
index 61e61b916cbe..5e8852c2fb38 100644
--- a/code/frameworks/experimental-nextjs-vite/template/stories/ImageLegacy.stories.tsx
+++ b/code/frameworks/experimental-nextjs-vite/template/stories/ImageLegacy.stories.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import type { Meta, StoryObj } from '@storybook/react';
+
 import Image from 'next/legacy/image';
 
 import Accessibility from '../../assets/accessibility.svg';
@@ -10,17 +12,19 @@ export default {
     src: Accessibility,
     alt: 'Accessibility',
   },
-};
+} as Meta<typeof Image>;
+
+type Story = StoryObj<typeof Image>;
 
-export const Default = {};
+export const Default: Story = {};
 
-export const BlurredPlaceholder = {
+export const BlurredPlaceholder: Story = {
   args: {
     placeholder: 'blur',
   },
 };
 
-export const BlurredAbsolutePlaceholder = {
+export const BlurredAbsolutePlaceholder: Story = {
   args: {
     src: 'https://storybook.js.org/images/placeholders/50x50.png',
     width: 50,
diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/Link.stories.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/Link.stories.tsx
index 7c1aa2073ab6..d071539c57a5 100644
--- a/code/frameworks/experimental-nextjs-vite/template/stories/Link.stories.tsx
+++ b/code/frameworks/experimental-nextjs-vite/template/stories/Link.stories.tsx
@@ -76,9 +76,11 @@ export default {
   component: Component,
 } as Meta<typeof Component>;
 
-export const Default: StoryObj<typeof Component> = {};
+type Story = StoryObj<typeof Component>;
 
-export const InAppDir: StoryObj<typeof Component> = {
+export const Default: Story = {};
+
+export const InAppDir: Story = {
   parameters: {
     nextjs: {
       appDirectory: true,
diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/Navigation.stories.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/Navigation.stories.tsx
index d50ed5174d25..4b9b49904de0 100644
--- a/code/frameworks/experimental-nextjs-vite/template/stories/Navigation.stories.tsx
+++ b/code/frameworks/experimental-nextjs-vite/template/stories/Navigation.stories.tsx
@@ -109,7 +109,7 @@ export default {
   },
 } as Meta<typeof Component>;
 
-export const Default: StoryObj<typeof Component> = {
+export const Default: Story = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const routerMock = getRouter();
diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.stories.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.stories.tsx
index 178aea8c3ac8..1d31006f63e7 100644
--- a/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.stories.tsx
+++ b/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.stories.tsx
@@ -8,7 +8,11 @@ import NextHeader from './NextHeader';
 
 export default {
   component: NextHeader,
-  parameters: { react: { rsc: true } },
+  parameters: {
+    react: {
+      rsc: true,
+    },
+  },
 } as Meta<typeof NextHeader>;
 
 type Story = StoryObj<typeof NextHeader>;
diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.tsx
index 6189f84baa62..eca7197ed79a 100644
--- a/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.tsx
+++ b/code/frameworks/experimental-nextjs-vite/template/stories/NextHeader.tsx
@@ -5,25 +5,23 @@ import { cookies, headers } from 'next/headers';
 export default async function Component() {
   async function handleClick() {
     'use server';
-    cookies().set('user-id', 'encrypted-id');
+    (await cookies()).set('user-id', 'encrypted-id');
   }
 
   return (
     <>
       <h3>Cookies:</h3>
-      {cookies()
-        .getAll()
-        .map(({ name, value }) => {
-          return (
-            <p key={name} style={{ display: 'flex', flexDirection: 'row', gap: 8 }}>
-              <strong>Name:</strong> <span>{name}</span>
-              <strong>Value:</strong> <span>{value}</span>
-            </p>
-          );
-        })}
+      {(await cookies()).getAll().map(({ name, value }) => {
+        return (
+          <p key={name} style={{ display: 'flex', flexDirection: 'row', gap: 8 }}>
+            <strong>Name:</strong> <span>{name}</span>
+            <strong>Value:</strong> <span>{value}</span>
+          </p>
+        );
+      })}
 
       <h3>Headers:</h3>
-      {Array.from(headers().entries()).map(([name, value]: [string, string]) => {
+      {Array.from((await headers()).entries()).map(([name, value]: [string, string]) => {
         return (
           <p key={name} style={{ display: 'flex', flexDirection: 'row', gap: 8 }}>
             <strong>Name:</strong> <span>{name}</span>
diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/RSC.jsx b/code/frameworks/experimental-nextjs-vite/template/stories/RSC.jsx
deleted file mode 100644
index a5771a6a9202..000000000000
--- a/code/frameworks/experimental-nextjs-vite/template/stories/RSC.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-import 'server-only';
-
-export const RSC = async ({ label }) => <>RSC {label}</>;
-
-export const Nested = async ({ children }) => <>Nested {children}</>;
diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.jsx b/code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.tsx
similarity index 62%
rename from code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.jsx
rename to code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.tsx
index f5520448bd61..655a5f1a93e4 100644
--- a/code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.jsx
+++ b/code/frameworks/experimental-nextjs-vite/template/stories/RSC.stories.tsx
@@ -1,5 +1,8 @@
+/* eslint-disable local-rules/no-uncategorized-errors */
 import React from 'react';
 
+import type { Meta, StoryObj } from '@storybook/react';
+
 import { Nested, RSC } from './RSC';
 
 export default {
@@ -10,11 +13,13 @@ export default {
       rsc: true,
     },
   },
-};
+} as Meta<typeof RSC>;
+
+type Story = StoryObj<typeof RSC>;
 
-export const Default = {};
+export const Default: Story = {};
 
-export const DisableRSC = {
+export const DisableRSC: Story = {
   tags: ['!test'],
   parameters: {
     chromatic: { disable: true },
@@ -22,7 +27,7 @@ export const DisableRSC = {
   },
 };
 
-export const Error = {
+export const Errored: Story = {
   tags: ['!test', '!vitest'],
   parameters: {
     chromatic: { disable: true },
@@ -32,7 +37,7 @@ export const Error = {
   },
 };
 
-export const NestedRSC = {
+export const NestedRSC: Story = {
   render: (args) => (
     <Nested>
       <RSC {...args} />
diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/RSC.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/RSC.tsx
new file mode 100644
index 000000000000..24655728ff46
--- /dev/null
+++ b/code/frameworks/experimental-nextjs-vite/template/stories/RSC.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+import 'server-only';
+
+export const RSC = async ({ label }: { label: string }) => <>RSC {label}</>;
+
+export const Nested = async ({ children }: any) => <>Nested {children}</>;
diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.stories.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.stories.tsx
index 944bc42d8667..0844293c34f3 100644
--- a/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.stories.tsx
+++ b/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.stories.tsx
@@ -59,7 +59,9 @@ export default {
   },
 } as Meta<typeof Component>;
 
-export const ProtectedWhileLoggedOut: StoryObj<typeof Component> = {
+type Story = StoryObj<typeof Component>;
+
+export const ProtectedWhileLoggedOut: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await userEvent.click(canvas.getByText('Access protected route'));
@@ -71,7 +73,7 @@ export const ProtectedWhileLoggedOut: StoryObj<typeof Component> = {
   },
 };
 
-export const ProtectedWhileLoggedIn: StoryObj<typeof Component> = {
+export const ProtectedWhileLoggedIn: Story = {
   beforeEach() {
     cookies().set('user', 'storybookjs');
   },
@@ -87,7 +89,7 @@ export const ProtectedWhileLoggedIn: StoryObj<typeof Component> = {
   },
 };
 
-export const Logout: StoryObj<typeof Component> = {
+export const Logout: Story = {
   beforeEach() {
     cookies().set('user', 'storybookjs');
   },
@@ -103,7 +105,7 @@ export const Logout: StoryObj<typeof Component> = {
   },
 };
 
-export const Login: StoryObj<typeof Component> = {
+export const Login: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await userEvent.click(canvas.getByText('Login'));
diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.tsx b/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.tsx
index 5e1b3c7227dc..6244f78d2472 100644
--- a/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.tsx
+++ b/code/frameworks/experimental-nextjs-vite/template/stories/ServerActions.tsx
@@ -5,7 +5,7 @@ import { cookies } from 'next/headers';
 import { redirect } from 'next/navigation';
 
 export async function accessRoute() {
-  const user = cookies().get('user');
+  const user = (await cookies()).get('user');
 
   if (!user) {
     redirect('/');
@@ -16,13 +16,13 @@ export async function accessRoute() {
 }
 
 export async function logout() {
-  cookies().delete('user');
+  (await cookies()).delete('user');
   revalidatePath('/');
   redirect('/');
 }
 
 export async function login() {
-  cookies().set('user', 'storybookjs');
+  (await cookies()).set('user', 'storybookjs');
   revalidatePath('/');
   redirect('/');
 }
diff --git a/code/frameworks/nextjs/template/stories/StyledJsx.stories.jsx b/code/frameworks/experimental-nextjs-vite/template/stories/StyledJsx.stories.tsx
similarity index 66%
rename from code/frameworks/nextjs/template/stories/StyledJsx.stories.jsx
rename to code/frameworks/experimental-nextjs-vite/template/stories/StyledJsx.stories.tsx
index 5a0c586e232c..31adea42456c 100644
--- a/code/frameworks/nextjs/template/stories/StyledJsx.stories.jsx
+++ b/code/frameworks/experimental-nextjs-vite/template/stories/StyledJsx.stories.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import type { Meta, StoryObj } from '@storybook/react';
+
 const Component = () => (
   <div>
     <style jsx>{`
@@ -15,6 +17,6 @@ const Component = () => (
 
 export default {
   component: Component,
-};
+} as Meta<typeof Component>;
 
-export const Default = {};
+export const Default: StoryObj<typeof Component> = {};
diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json
index fdf1b4aaca73..08fb3adfa574 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "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 eb68bb0405bf..82f8536ca243 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "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 d5d81422b9fb..964a6ff14419 100644
--- a/code/frameworks/nextjs/package.json
+++ b/code/frameworks/nextjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/nextjs",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook for Next.js",
   "keywords": [
     "storybook",
@@ -57,6 +57,11 @@
       "import": "./dist/compatibility/redirect-status-code.compat.mjs",
       "require": "./dist/compatibility/redirect-status-code.compat.js"
     },
+    "./dist/compatibility/draft-mode.compat": {
+      "types": "./dist/compatibility/draft-mode.compat.d.ts",
+      "import": "./dist/compatibility/draft-mode.compat.mjs",
+      "require": "./dist/compatibility/draft-mode.compat.js"
+    },
     "./export-mocks": {
       "types": "./dist/export-mocks/index.d.ts",
       "import": "./dist/export-mocks/index.mjs",
@@ -156,7 +161,7 @@
     "postcss-loader": "^8.1.1",
     "react-refresh": "^0.14.0",
     "resolve-url-loader": "^5.0.0",
-    "sass-loader": "^13.2.0",
+    "sass-loader": "^14.2.1",
     "semver": "^7.3.5",
     "style-loader": "^3.3.1",
     "styled-jsx": "^5.1.6",
@@ -171,12 +176,12 @@
     "@types/babel__preset-env": "^7",
     "@types/loader-utils": "^2.0.5",
     "@types/react-refresh": "^0",
-    "next": "^14.1.0",
+    "next": "^15.0.3",
     "typescript": "^5.3.2",
     "webpack": "^5.65.0"
   },
   "peerDependencies": {
-    "next": "^13.5.0 || ^14.0.0",
+    "next": "^13.5.0 || ^14.0.0 || ^15.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "storybook": "workspace:^",
@@ -212,6 +217,7 @@
       "./src/export-mocks/navigation/index.ts",
       "./src/compatibility/segment.compat.ts",
       "./src/compatibility/redirect-status-code.compat.ts",
+      "./src/compatibility/draft-mode.compat.ts",
       "./src/next-image-loader-stub.ts",
       "./src/images/decorator.tsx",
       "./src/images/next-legacy-image.tsx",
diff --git a/code/frameworks/nextjs/src/aliases/webpack.ts b/code/frameworks/nextjs/src/aliases/webpack.ts
index ceacfa541a29..b5a9715505f4 100644
--- a/code/frameworks/nextjs/src/aliases/webpack.ts
+++ b/code/frameworks/nextjs/src/aliases/webpack.ts
@@ -1,6 +1,12 @@
 import type { Configuration as WebpackConfig } from 'webpack';
 
+import { configureCompatibilityAliases } from '../compatibility/compatibility-map';
+import { configureNextExportMocks } from '../export-mocks/webpack';
+
 export const configureAliases = (baseConfig: WebpackConfig): void => {
+  configureNextExportMocks(baseConfig);
+  configureCompatibilityAliases(baseConfig);
+
   baseConfig.resolve = {
     ...(baseConfig.resolve ?? {}),
     alias: {
@@ -8,4 +14,12 @@ export const configureAliases = (baseConfig: WebpackConfig): void => {
       '@opentelemetry/api': 'next/dist/compiled/@opentelemetry/api',
     },
   };
+
+  // remove warnings regarding compatibility paths
+  baseConfig.ignoreWarnings = [
+    ...(baseConfig.ignoreWarnings ?? []),
+    (warning) =>
+      warning.message.includes("export 'draftMode'") &&
+      warning.message.includes('next/dist/server/request/headers'),
+  ];
 };
diff --git a/code/frameworks/nextjs/src/compatibility/compatibility-map.ts b/code/frameworks/nextjs/src/compatibility/compatibility-map.ts
index 7f17cf10edc8..4cfb5e92f0b3 100644
--- a/code/frameworks/nextjs/src/compatibility/compatibility-map.ts
+++ b/code/frameworks/nextjs/src/compatibility/compatibility-map.ts
@@ -1,9 +1,9 @@
 import semver from 'semver';
 import type { Configuration as WebpackConfig } from 'webpack';
 
-import { addScopedAlias, getNextjsVersion } from '../utils';
+import { addScopedAlias, getNextjsVersion, setAlias } from '../utils';
 
-const mapping: Record<string, Record<string, string>> = {
+const mapping: Record<string, Record<string, string | boolean>> = {
   '<14.1.0': {
     // https://github.com/vercel/next.js/blob/v14.1.0/packages/next/src/shared/lib/segment.ts
     'next/dist/shared/lib/segment': '@storybook/nextjs/dist/compatibility/segment.compat',
@@ -13,6 +13,11 @@ const mapping: Record<string, Record<string, string>> = {
     'next/dist/client/components/redirect-status-code':
       '@storybook/nextjs/dist/compatibility/redirect-status-code.compat',
   },
+  '<15.0.0': {
+    'next/dist/server/request/headers': 'next/dist/client/components/headers',
+    // this path only exists from Next 15 onwards
+    'next/dist/server/request/draft-mode': '@storybook/nextjs/dist/compatibility/draft-mode.compat',
+  },
 };
 
 export const getCompatibilityAliases = () => {
@@ -32,6 +37,10 @@ export const configureCompatibilityAliases = (baseConfig: WebpackConfig): void =
   const aliases = getCompatibilityAliases();
 
   Object.entries(aliases).forEach(([name, alias]) => {
-    addScopedAlias(baseConfig, name, alias);
+    if (typeof alias === 'string') {
+      addScopedAlias(baseConfig, name, alias);
+    } else {
+      setAlias(baseConfig, name, alias);
+    }
   });
 };
diff --git a/code/frameworks/nextjs/src/compatibility/draft-mode.compat.ts b/code/frameworks/nextjs/src/compatibility/draft-mode.compat.ts
new file mode 100644
index 000000000000..cdcaf63bbf1a
--- /dev/null
+++ b/code/frameworks/nextjs/src/compatibility/draft-mode.compat.ts
@@ -0,0 +1,2 @@
+// @ts-expect-error Compatibility for Next 14
+export { draftMode } from 'next/dist/client/components/headers';
diff --git a/code/frameworks/nextjs/src/config/webpack.ts b/code/frameworks/nextjs/src/config/webpack.ts
index a0ea2d47bded..4b10922c9df9 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 {
@@ -36,24 +35,27 @@ export const configureConfig = async ({
     addScopedAlias(baseConfig, 'react', 'next/dist/compiled/react');
   }
   if (tryResolve('next/dist/compiled/react-dom/cjs/react-dom-test-utils.production.js')) {
-    setAlias(
+    addScopedAlias(
       baseConfig,
       'react-dom/test-utils',
       'next/dist/compiled/react-dom/cjs/react-dom-test-utils.production.js'
     );
   }
   if (tryResolve('next/dist/compiled/react-dom')) {
-    setAlias(baseConfig, 'react-dom$', 'next/dist/compiled/react-dom');
-    setAlias(baseConfig, 'react-dom/client', 'next/dist/compiled/react-dom/client');
-    setAlias(baseConfig, 'react-dom/server', 'next/dist/compiled/react-dom/server');
+    addScopedAlias(baseConfig, 'react-dom$', 'next/dist/compiled/react-dom');
+    addScopedAlias(baseConfig, 'react-dom/client', 'next/dist/compiled/react-dom/client');
+    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')).default.DefinePlugin(definePluginConfig));
 };
diff --git a/code/frameworks/nextjs/src/export-mocks/headers/index.ts b/code/frameworks/nextjs/src/export-mocks/headers/index.ts
index 1797d4ccaf57..1c903963ba2d 100644
--- a/code/frameworks/nextjs/src/export-mocks/headers/index.ts
+++ b/code/frameworks/nextjs/src/export-mocks/headers/index.ts
@@ -1,14 +1,15 @@
 import { fn } from '@storybook/test';
 
-import * as originalHeaders from 'next/dist/client/components/headers';
+import { draftMode as originalDraftMode } from 'next/dist/server/request/draft-mode';
+import * as headers from 'next/dist/server/request/headers';
 
 // re-exports of the actual module
-export * from 'next/dist/client/components/headers';
+export * from 'next/dist/server/request/headers';
 
 // mock utilities/overrides (as of Next v14.2.0)
 export { headers } from './headers';
 export { cookies } from './cookies';
 
 // passthrough mocks - keep original implementation but allow for spying
-const draftMode = fn(originalHeaders.draftMode).mockName('draftMode');
+const draftMode = fn(originalDraftMode ?? (headers as any).draftMode).mockName('draftMode');
 export { draftMode };
diff --git a/code/frameworks/nextjs/src/export-mocks/webpack.ts b/code/frameworks/nextjs/src/export-mocks/webpack.ts
index 3d054d114ed2..4f7376770588 100644
--- a/code/frameworks/nextjs/src/export-mocks/webpack.ts
+++ b/code/frameworks/nextjs/src/export-mocks/webpack.ts
@@ -23,14 +23,14 @@ export const getPackageAliases = ({ useESM = false }: { useESM?: boolean } = {})
   const packageLocation = dirname(require.resolve('@storybook/nextjs/package.json'));
 
   const getFullPath = (path: string) =>
-    join(packageLocation, path.replace('@storybook/nextjs', ''));
+    path.startsWith('next') ? path : join(packageLocation, path.replace('@storybook/nextjs', ''));
 
   const aliases = Object.fromEntries(
     Object.entries(mapping).map(([originalPath, aliasedPath]) => [
       originalPath,
       // Use paths for both next/xyz and @storybook/nextjs/xyz imports
       // to make sure they all serve the MJS/CJS version of the file
-      getFullPath(`${aliasedPath}.${extension}`),
+      typeof aliasedPath === 'string' ? getFullPath(`${aliasedPath}.${extension}`) : aliasedPath,
     ])
   );
 
diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts
index 1956b978a37a..6b90ae543a22 100644
--- a/code/frameworks/nextjs/src/preset.ts
+++ b/code/frameworks/nextjs/src/preset.ts
@@ -10,31 +10,29 @@ 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'))),
 ];
 
 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.
+  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: typeof framework === 'string' ? undefined : framework.options.nextConfigPath,
+  });
 
   return {
     ...config,
@@ -144,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);
@@ -162,8 +176,6 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig,
   configureStyledJsx(baseConfig);
   configureNodePolyfills(baseConfig);
   configureAliases(baseConfig);
-  configureCompatibilityAliases(baseConfig);
-  configureNextExportMocks(baseConfig);
 
   if (isDevelopment) {
     configureFastRefresh(baseConfig);
diff --git a/code/frameworks/nextjs/src/routing/app-router-provider.tsx b/code/frameworks/nextjs/src/routing/app-router-provider.tsx
index d21fdc8382cf..3f06a6668648 100644
--- a/code/frameworks/nextjs/src/routing/app-router-provider.tsx
+++ b/code/frameworks/nextjs/src/routing/app-router-provider.tsx
@@ -18,11 +18,14 @@ import {
   PathnameContext,
   SearchParamsContext,
 } from 'next/dist/shared/lib/hooks-client-context.shared-runtime';
-import { type Params } from 'next/dist/shared/lib/router/utils/route-matcher';
 import { PAGE_SEGMENT_KEY } from 'next/dist/shared/lib/segment';
 
 import type { RouteParams } from './types';
 
+// Using an inline type so we can support Next 14 and lower
+// from https://github.com/vercel/next.js/blob/v15.0.3/packages/next/src/server/request/params.ts#L25
+type Params = Record<string, string | Array<string> | undefined>;
+
 type AppRouterProviderProps = {
   routeParams: RouteParams;
 };
@@ -41,8 +44,6 @@ function getSelectedParams(currentTree: FlightRouterState, params: Params = {}):
       continue;
     }
 
-    // Ensure catchAll and optional catchall are turned into an array
-
     // Ensure catchAll and optional catchall are turned into an array
     const isCatchAll = isDynamicParameter && (segment[2] === 'c' || segment[2] === 'oc');
 
@@ -79,6 +80,16 @@ export const AppRouterProvider: React.FC<React.PropsWithChildren<AppRouterProvid
     return getSelectedParams(tree);
   }, [tree]);
 
+  const newLazyCacheNode = {
+    lazyData: null,
+    rsc: null,
+    prefetchRsc: null,
+    head: null,
+    prefetchHead: null,
+    parallelRoutes: new Map(),
+    loading: null,
+  };
+
   // https://github.com/vercel/next.js/blob/canary/packages/next/src/client/components/app-router.tsx#L436
   return (
     <PathParamsContext.Provider value={pathParams}>
@@ -103,8 +114,16 @@ export const AppRouterProvider: React.FC<React.PropsWithChildren<AppRouterProvid
             <AppRouterContext.Provider value={getRouter()}>
               <LayoutRouterContext.Provider
                 value={{
+                  // TODO Remove when dropping Next.js < v15.1.1
                   childNodes: new Map(),
                   tree,
+                  // TODO END
+
+                  // START Next.js v15.2 support
+                  // @ts-expect-error Only available in Next.js >= v15.1.1
+                  parentTree: tree,
+                  parentCacheNode: newLazyCacheNode,
+                  // END
                   url: pathname,
                   loading: null,
                 }}
diff --git a/code/frameworks/nextjs/src/utils.ts b/code/frameworks/nextjs/src/utils.ts
index 198917513166..82f15d088f59 100644
--- a/code/frameworks/nextjs/src/utils.ts
+++ b/code/frameworks/nextjs/src/utils.ts
@@ -51,18 +51,36 @@ export const addScopedAlias = (baseConfig: WebpackConfig, name: string, alias?:
 };
 
 /**
- * @example // before main script path truncation require.resolve('styled-jsx') ===
- * '/some/path/node_modules/styled-jsx/index.js // after main script path truncation
+ * @example
+ *
+ * ```
+ * // before main script path truncation
+ * require.resolve('styled-jsx') === '/some/path/node_modules/styled-jsx/index.js
+ * // after main script path truncation
  * scopedResolve('styled-jsx') === '/some/path/node_modules/styled-jsx'
+ * ```
+ *
+ * @example
+ *
+ * ```
+ * // referencing a named export of a package
+ * scopedResolve('next/dist/compiled/react-dom/client') ===
+ *   // returns the path to the package export without the script filename
+ *   '/some/path/node_modules/next/dist/compiled/react-dom/client';
+ *
+ * // referencing a specific file within a CJS package
+ * scopedResolve('next/dist/compiled/react-dom/cjs/react-dom-test-utils.production.js') ===
+ *   // returns the path to the physical file, including the script filename
+ *   '/some/path/node_modules/next/dist/compiled/react-dom/cjs/react-dom-test-utils.production.js';
+ * ```
  *
- * @param id The module id
- * @returns A path to the module id scoped to the project folder without the main script path at the
- *   end
+ * @param id The module id or script file to resolve
+ * @returns An absolute path to the specified module id or script file scoped to the project folder
  * @summary
  * This is to help the addon in development.
  * Without it, the addon resolves packages in its node_modules instead of the example's node_modules.
  * Because require.resolve will also include the main script as part of the path, this function strips
- * that to just include the path to the module folder
+ * that to just include the path to the module folder when the id provided is a package or named export.
  */
 export const scopedResolve = (id: string): string => {
   let scopedModulePath;
@@ -74,9 +92,15 @@ export const scopedResolve = (id: string): string => {
     scopedModulePath = require.resolve(id);
   }
 
-  const moduleFolderStrPosition = scopedModulePath.lastIndexOf(
-    id.replace(/\//g /* all '/' occurances */, sep)
-  );
+  const idWithNativePathSep = id.replace(/\//g /* all '/' occurrences */, sep);
+
+  // If the id referenced the file specifically, return the full module path & filename
+  if (scopedModulePath.endsWith(idWithNativePathSep)) {
+    return scopedModulePath;
+  }
+
+  // Otherwise, return just the path to the module folder or named export
+  const moduleFolderStrPosition = scopedModulePath.lastIndexOf(idWithNativePathSep);
   const beginningOfMainScriptPath = moduleFolderStrPosition + id.length;
   return scopedModulePath.substring(0, beginningOfMainScriptPath);
 };
diff --git a/code/frameworks/nextjs/template/stories/DynamicImport.stories.jsx b/code/frameworks/nextjs/template/stories/DynamicImport.stories.tsx
similarity index 70%
rename from code/frameworks/nextjs/template/stories/DynamicImport.stories.jsx
rename to code/frameworks/nextjs/template/stories/DynamicImport.stories.tsx
index e9efbd0f7080..b71430f72544 100644
--- a/code/frameworks/nextjs/template/stories/DynamicImport.stories.jsx
+++ b/code/frameworks/nextjs/template/stories/DynamicImport.stories.tsx
@@ -1,5 +1,7 @@
 import React, { Suspense } from 'react';
 
+import type { Meta, StoryObj } from '@storybook/react';
+
 import dynamic from 'next/dynamic';
 
 const DynamicComponent = dynamic(() => import('./dynamic-component'), {
@@ -16,6 +18,6 @@ function Component() {
 
 export default {
   component: Component,
-};
+} as Meta<typeof Component>;
 
-export const Default = {};
+export const Default: StoryObj<typeof Component> = {};
diff --git a/code/frameworks/nextjs/template/stories/Font.stories.tsx b/code/frameworks/nextjs/template/stories/Font.stories.tsx
new file mode 100644
index 000000000000..0e078409da0b
--- /dev/null
+++ b/code/frameworks/nextjs/template/stories/Font.stories.tsx
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Font from './Font';
+
+export default {
+  component: Font,
+} as Meta<typeof Font>;
+
+type Story = StoryObj<typeof Font>;
+
+export const WithClassName: Story = {
+  args: {
+    variant: 'className',
+  },
+};
+
+export const WithStyle: Story = {
+  args: {
+    variant: 'style',
+  },
+};
+
+export const WithVariable: Story = {
+  args: {
+    variant: 'variable',
+  },
+};
diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-js/Font.jsx b/code/frameworks/nextjs/template/stories/Font.tsx
similarity index 94%
rename from code/frameworks/nextjs/template/stories_nextjs-default-js/Font.jsx
rename to code/frameworks/nextjs/template/stories/Font.tsx
index f7509914db0c..5c7779fa60b4 100644
--- a/code/frameworks/nextjs/template/stories_nextjs-default-js/Font.jsx
+++ b/code/frameworks/nextjs/template/stories/Font.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 import React from 'react';
 
 import { Rubik_Puddles } from 'next/font/google';
@@ -15,7 +14,7 @@ export const localRubikStorm = localFont({
   variable: '--font-rubik-storm',
 });
 
-export default function Font({ variant }) {
+export default function Font({ variant }: { variant: 'className' | 'style' | 'variable' }) {
   switch (variant) {
     case 'className':
       return (
diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-js/Head.stories.jsx b/code/frameworks/nextjs/template/stories/Head.stories.tsx
similarity index 71%
rename from code/frameworks/nextjs/template/stories_nextjs-default-js/Head.stories.jsx
rename to code/frameworks/nextjs/template/stories/Head.stories.tsx
index 7b86941b0073..540d0e04dc3d 100644
--- a/code/frameworks/nextjs/template/stories_nextjs-default-js/Head.stories.jsx
+++ b/code/frameworks/nextjs/template/stories/Head.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import type { Meta, StoryObj } from '@storybook/react';
 import { expect, waitFor } from '@storybook/test';
 
 import Head from 'next/head';
@@ -21,14 +22,14 @@ function Component() {
 
 export default {
   component: Component,
-};
+} as Meta<typeof Component>;
 
-export const Default = {
+export const Default: StoryObj<typeof Component> = {
   play: async () => {
     await waitFor(() => expect(document.title).toEqual('Next.js Head Title'));
     await expect(document.querySelectorAll('meta[property="og:title"]')).toHaveLength(1);
-    await expect(document.querySelector('meta[property="og:title"]').content).toEqual(
-      'My new title'
-    );
+    await expect(
+      (document.querySelector('meta[property="og:title"]') as HTMLMetaElement)?.content
+    ).toEqual('My new title');
   },
 };
diff --git a/code/frameworks/nextjs/template/stories/Image.stories.jsx b/code/frameworks/nextjs/template/stories/Image.stories.tsx
similarity index 83%
rename from code/frameworks/nextjs/template/stories/Image.stories.jsx
rename to code/frameworks/nextjs/template/stories/Image.stories.tsx
index 47f28711224e..ebceacaf1300 100644
--- a/code/frameworks/nextjs/template/stories/Image.stories.jsx
+++ b/code/frameworks/nextjs/template/stories/Image.stories.tsx
@@ -1,4 +1,6 @@
-import React, { useRef, useState } from 'react';
+import React, { useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
 
 import Image from 'next/image';
 
@@ -11,24 +13,26 @@ export default {
     src: Accessibility,
     alt: 'Accessibility',
   },
-};
+} as Meta<typeof Image>;
+
+type Story = StoryObj<typeof Image>;
 
-export const Default = {};
+export const Default: Story = {};
 
-export const Avif = {
+export const Avif: Story = {
   args: {
     src: AvifImage,
     alt: 'Avif Test Image',
   },
 };
 
-export const BlurredPlaceholder = {
+export const BlurredPlaceholder: Story = {
   args: {
     placeholder: 'blur',
   },
 };
 
-export const BlurredAbsolutePlaceholder = {
+export const BlurredAbsolutePlaceholder: Story = {
   args: {
     src: 'https://storybook.js.org/images/placeholders/50x50.png',
     width: 50,
@@ -44,26 +48,26 @@ export const BlurredAbsolutePlaceholder = {
   },
 };
 
-export const FilledParent = {
+export const FilledParent: Story = {
   args: {
     fill: true,
   },
-  decorator: [
+  decorators: [
     (Story) => <div style={{ width: 500, height: 500, position: 'relative' }}>{Story()}</div>,
   ],
 };
 
-export const Sized = {
+export const Sized: Story = {
   args: {
     fill: true,
     sizes: '(max-width: 600px) 100vw, 600px',
-    decorator: [
-      (Story) => <div style={{ width: 800, height: 800, position: 'relative' }}>{Story()}</div>,
-    ],
   },
+  decorators: [
+    (Story) => <div style={{ width: 800, height: 800, position: 'relative' }}>{Story()}</div>,
+  ],
 };
 
-export const Lazy = {
+export const Lazy: Story = {
   args: {
     src: 'https://storybook.js.org/images/placeholders/50x50.png',
     width: 50,
@@ -79,7 +83,7 @@ export const Lazy = {
   ],
 };
 
-export const Eager = {
+export const Eager: Story = {
   ...Lazy,
   parameters: {
     nextjs: {
@@ -90,9 +94,9 @@ export const Eager = {
   },
 };
 
-export const WithRef = {
+export const WithRef: Story = {
   render() {
-    const [ref, setRef] = useState(null);
+    const [ref, setRef] = useState<HTMLImageElement | null>(null);
 
     return (
       <div>
diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-js/ImageLegacy.stories.jsx b/code/frameworks/nextjs/template/stories/ImageLegacy.stories.tsx
similarity index 90%
rename from code/frameworks/nextjs/template/stories_nextjs-default-js/ImageLegacy.stories.jsx
rename to code/frameworks/nextjs/template/stories/ImageLegacy.stories.tsx
index 61e61b916cbe..954bc36a260f 100644
--- a/code/frameworks/nextjs/template/stories_nextjs-default-js/ImageLegacy.stories.jsx
+++ b/code/frameworks/nextjs/template/stories/ImageLegacy.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import Image from 'next/legacy/image';
 
@@ -10,17 +10,19 @@ export default {
     src: Accessibility,
     alt: 'Accessibility',
   },
-};
+} as Meta<typeof Image>;
+
+type Story = StoryObj<typeof Image>;
 
-export const Default = {};
+export const Default: Story = {};
 
-export const BlurredPlaceholder = {
+export const BlurredPlaceholder: Story = {
   args: {
     placeholder: 'blur',
   },
 };
 
-export const BlurredAbsolutePlaceholder = {
+export const BlurredAbsolutePlaceholder: Story = {
   args: {
     src: 'https://storybook.js.org/images/placeholders/50x50.png',
     width: 50,
diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-js/Link.stories.module.css b/code/frameworks/nextjs/template/stories/Link.stories.module.css
similarity index 100%
rename from code/frameworks/nextjs/template/stories_nextjs-default-js/Link.stories.module.css
rename to code/frameworks/nextjs/template/stories/Link.stories.module.css
diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Link.stories.tsx b/code/frameworks/nextjs/template/stories/Link.stories.tsx
similarity index 94%
rename from code/frameworks/nextjs/template/stories_nextjs-default-ts/Link.stories.tsx
rename to code/frameworks/nextjs/template/stories/Link.stories.tsx
index 7c1aa2073ab6..d071539c57a5 100644
--- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Link.stories.tsx
+++ b/code/frameworks/nextjs/template/stories/Link.stories.tsx
@@ -76,9 +76,11 @@ export default {
   component: Component,
 } as Meta<typeof Component>;
 
-export const Default: StoryObj<typeof Component> = {};
+type Story = StoryObj<typeof Component>;
 
-export const InAppDir: StoryObj<typeof Component> = {
+export const Default: Story = {};
+
+export const InAppDir: Story = {
   parameters: {
     nextjs: {
       appDirectory: true,
diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx b/code/frameworks/nextjs/template/stories/Navigation.stories.tsx
similarity index 98%
rename from code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx
rename to code/frameworks/nextjs/template/stories/Navigation.stories.tsx
index 58dd07548841..5c4872d1ac31 100644
--- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Navigation.stories.tsx
+++ b/code/frameworks/nextjs/template/stories/Navigation.stories.tsx
@@ -108,7 +108,7 @@ export default {
   },
 } as Meta<typeof Component>;
 
-export const Default: StoryObj<typeof Component> = {
+export const Default: Story = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     const routerMock = getRouter();
diff --git a/code/frameworks/nextjs/template/stories/RSC.jsx b/code/frameworks/nextjs/template/stories/RSC.jsx
deleted file mode 100644
index a5771a6a9202..000000000000
--- a/code/frameworks/nextjs/template/stories/RSC.jsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-import 'server-only';
-
-export const RSC = async ({ label }) => <>RSC {label}</>;
-
-export const Nested = async ({ children }) => <>Nested {children}</>;
diff --git a/code/frameworks/nextjs/template/stories/RSC.stories.jsx b/code/frameworks/nextjs/template/stories/RSC.stories.tsx
similarity index 59%
rename from code/frameworks/nextjs/template/stories/RSC.stories.jsx
rename to code/frameworks/nextjs/template/stories/RSC.stories.tsx
index 774e129cbd58..655a5f1a93e4 100644
--- a/code/frameworks/nextjs/template/stories/RSC.stories.jsx
+++ b/code/frameworks/nextjs/template/stories/RSC.stories.tsx
@@ -1,5 +1,8 @@
+/* eslint-disable local-rules/no-uncategorized-errors */
 import React from 'react';
 
+import type { Meta, StoryObj } from '@storybook/react';
+
 import { Nested, RSC } from './RSC';
 
 export default {
@@ -10,11 +13,13 @@ export default {
       rsc: true,
     },
   },
-};
+} as Meta<typeof RSC>;
 
-export const Default = {};
+type Story = StoryObj<typeof RSC>;
 
-export const DisableRSC = {
+export const Default: Story = {};
+
+export const DisableRSC: Story = {
   tags: ['!test'],
   parameters: {
     chromatic: { disable: true },
@@ -22,8 +27,8 @@ export const DisableRSC = {
   },
 };
 
-export const Error = {
-  tags: ['!test'],
+export const Errored: Story = {
+  tags: ['!test', '!vitest'],
   parameters: {
     chromatic: { disable: true },
   },
@@ -32,7 +37,7 @@ export const Error = {
   },
 };
 
-export const NestedRSC = {
+export const NestedRSC: Story = {
   render: (args) => (
     <Nested>
       <RSC {...args} />
diff --git a/code/frameworks/nextjs/template/stories/RSC.tsx b/code/frameworks/nextjs/template/stories/RSC.tsx
new file mode 100644
index 000000000000..24655728ff46
--- /dev/null
+++ b/code/frameworks/nextjs/template/stories/RSC.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+import 'server-only';
+
+export const RSC = async ({ label }: { label: string }) => <>RSC {label}</>;
+
+export const Nested = async ({ children }: any) => <>Nested {children}</>;
diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx b/code/frameworks/nextjs/template/stories/Router.stories.tsx
similarity index 100%
rename from code/frameworks/nextjs/template/stories_nextjs-default-ts/Router.stories.tsx
rename to code/frameworks/nextjs/template/stories/Router.stories.tsx
diff --git a/code/frameworks/experimental-nextjs-vite/template/stories/StyledJsx.stories.jsx b/code/frameworks/nextjs/template/stories/StyledJsx.stories.tsx
similarity index 66%
rename from code/frameworks/experimental-nextjs-vite/template/stories/StyledJsx.stories.jsx
rename to code/frameworks/nextjs/template/stories/StyledJsx.stories.tsx
index 5a0c586e232c..31adea42456c 100644
--- a/code/frameworks/experimental-nextjs-vite/template/stories/StyledJsx.stories.jsx
+++ b/code/frameworks/nextjs/template/stories/StyledJsx.stories.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import type { Meta, StoryObj } from '@storybook/react';
+
 const Component = () => (
   <div>
     <style jsx>{`
@@ -15,6 +17,6 @@ const Component = () => (
 
 export default {
   component: Component,
-};
+} as Meta<typeof Component>;
 
-export const Default = {};
+export const Default: StoryObj<typeof Component> = {};
diff --git a/code/frameworks/nextjs/template/stories/dynamic-component.jsx b/code/frameworks/nextjs/template/stories/dynamic-component.tsx
similarity index 100%
rename from code/frameworks/nextjs/template/stories/dynamic-component.jsx
rename to code/frameworks/nextjs/template/stories/dynamic-component.tsx
diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-js/fonts/OFL.txt b/code/frameworks/nextjs/template/stories/fonts/OFL.txt
similarity index 100%
rename from code/frameworks/nextjs/template/stories_nextjs-default-js/fonts/OFL.txt
rename to code/frameworks/nextjs/template/stories/fonts/OFL.txt
diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-js/fonts/RubikStorm-Regular.ttf b/code/frameworks/nextjs/template/stories/fonts/RubikStorm-Regular.ttf
similarity index 100%
rename from code/frameworks/nextjs/template/stories_nextjs-default-js/fonts/RubikStorm-Regular.ttf
rename to code/frameworks/nextjs/template/stories/fonts/RubikStorm-Regular.ttf
diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-js/Font.stories.jsx b/code/frameworks/nextjs/template/stories_nextjs-default-js/Font.stories.jsx
deleted file mode 100644
index b851661dd436..000000000000
--- a/code/frameworks/nextjs/template/stories_nextjs-default-js/Font.stories.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import Font from './Font';
-
-export default {
-  component: Font,
-};
-
-export const WithClassName = {
-  args: {
-    variant: 'className',
-  },
-};
-
-export const WithStyle = {
-  args: {
-    variant: 'style',
-  },
-};
-
-export const WithVariable = {
-  args: {
-    variant: 'variable',
-  },
-};
diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-js/Link.stories.jsx b/code/frameworks/nextjs/template/stories_nextjs-default-js/Link.stories.jsx
deleted file mode 100644
index 14aa9d6805c6..000000000000
--- a/code/frameworks/nextjs/template/stories_nextjs-default-js/Link.stories.jsx
+++ /dev/null
@@ -1,83 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from 'react';
-
-import Link from 'next/link';
-
-import style from './Link.stories.module.css';
-
-// `onClick`, `href`, and `ref` need to be passed to the DOM element
-// for proper handling
-const MyButton = React.forwardRef(function Button({ onClick, href, children }, ref) {
-  return (
-    <a href={href} onClick={onClick} ref={ref}>
-      {children}
-    </a>
-  );
-});
-
-const Component = () => (
-  <ul>
-    <li>
-      <Link href="/">Normal Link</Link>
-    </li>
-    <li>
-      <Link
-        href={{
-          pathname: '/with-url-object',
-          query: { name: 'test' },
-        }}
-      >
-        With URL Object
-      </Link>
-    </li>
-    <li>
-      <Link href="/replace-url" replace>
-        Replace the URL instead of push
-      </Link>
-    </li>
-    <li>
-      <Link href="/legacy-behaviour" legacyBehavior>
-        <a>Legacy behavior</a>
-      </Link>
-    </li>
-    <li>
-      <Link href="/child-is-functional-component" passHref legacyBehavior>
-        <MyButton>child is a functional component</MyButton>
-      </Link>
-    </li>
-    <li>
-      <Link href="/#hashid" scroll={false}>
-        Disables scrolling to the top
-      </Link>
-    </li>
-    <li>
-      <Link href="/no-prefetch" prefetch={false}>
-        No Prefetching
-      </Link>
-    </li>
-    <li>
-      <Link style={{ color: 'red' }} href="/with-style">
-        With style
-      </Link>
-    </li>
-    <li>
-      <Link className={style.link} href="/with-classname">
-        With className
-      </Link>
-    </li>
-  </ul>
-);
-
-export default {
-  component: Component,
-};
-
-export const Default = {};
-
-export const InAppDir = {
-  parameters: {
-    nextjs: {
-      appDirectory: true,
-    },
-  },
-};
diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-js/GetImageProps.stories.jsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/GetImageProps.stories.tsx
similarity index 83%
rename from code/frameworks/nextjs/template/stories_nextjs-default-js/GetImageProps.stories.jsx
rename to code/frameworks/nextjs/template/stories_nextjs-default-ts/GetImageProps.stories.tsx
index f3e7c0b7462b..aefc27f54cfd 100644
--- a/code/frameworks/nextjs/template/stories_nextjs-default-js/GetImageProps.stories.jsx
+++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/GetImageProps.stories.tsx
@@ -1,12 +1,14 @@
 import React from 'react';
 
+import type { Meta, StoryObj } from '@storybook/react';
+
 import { getImageProps } from 'next/image';
 
 import Accessibility from '../../assets/accessibility.svg';
 import Testing from '../../assets/testing.png';
 
 // referenced from https://nextjs.org/docs/pages/api-reference/components/image#theme-detection-picture
-const Component = (props) => {
+const Component = (props: any) => {
   const {
     props: { srcSet: dark },
   } = getImageProps({ src: Accessibility, ...props });
@@ -29,6 +31,6 @@ export default {
   args: {
     alt: 'getImageProps Example',
   },
-};
+} as Meta<typeof Component>;
 
-export const Default = {};
+export const Default: StoryObj<typeof Component> = {};
diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Link.stories.module.css b/code/frameworks/nextjs/template/stories_nextjs-default-ts/Link.stories.module.css
deleted file mode 100644
index 9edb616226d0..000000000000
--- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/Link.stories.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.link {
-  color: green;
-}
diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx
index 059bcbcff7b7..f5e83ef867f6 100644
--- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx
+++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.stories.tsx
@@ -1,6 +1,5 @@
 import { cookies, headers } from '@storybook/nextjs/headers.mock';
-import type { Meta } from '@storybook/react';
-import type { StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { expect, userEvent, within } from '@storybook/test';
 
 import NextHeader from './NextHeader';
diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx
index 6189f84baa62..eca7197ed79a 100644
--- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx
+++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/NextHeader.tsx
@@ -5,25 +5,23 @@ import { cookies, headers } from 'next/headers';
 export default async function Component() {
   async function handleClick() {
     'use server';
-    cookies().set('user-id', 'encrypted-id');
+    (await cookies()).set('user-id', 'encrypted-id');
   }
 
   return (
     <>
       <h3>Cookies:</h3>
-      {cookies()
-        .getAll()
-        .map(({ name, value }) => {
-          return (
-            <p key={name} style={{ display: 'flex', flexDirection: 'row', gap: 8 }}>
-              <strong>Name:</strong> <span>{name}</span>
-              <strong>Value:</strong> <span>{value}</span>
-            </p>
-          );
-        })}
+      {(await cookies()).getAll().map(({ name, value }) => {
+        return (
+          <p key={name} style={{ display: 'flex', flexDirection: 'row', gap: 8 }}>
+            <strong>Name:</strong> <span>{name}</span>
+            <strong>Value:</strong> <span>{value}</span>
+          </p>
+        );
+      })}
 
       <h3>Headers:</h3>
-      {Array.from(headers().entries()).map(([name, value]: [string, string]) => {
+      {Array.from((await headers()).entries()).map(([name, value]: [string, string]) => {
         return (
           <p key={name} style={{ display: 'flex', flexDirection: 'row', gap: 8 }}>
             <strong>Name:</strong> <span>{name}</span>
diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx
index 018c4d33b54f..f1a9ad762eed 100644
--- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx
+++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/ServerActions.stories.tsx
@@ -58,7 +58,9 @@ export default {
   },
 } as Meta<typeof Component>;
 
-export const ProtectedWhileLoggedOut: StoryObj<typeof Component> = {
+type Story = StoryObj<typeof Component>;
+
+export const ProtectedWhileLoggedOut: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await userEvent.click(canvas.getByText('Access protected route'));
@@ -70,7 +72,7 @@ export const ProtectedWhileLoggedOut: StoryObj<typeof Component> = {
   },
 };
 
-export const ProtectedWhileLoggedIn: StoryObj<typeof Component> = {
+export const ProtectedWhileLoggedIn: Story = {
   beforeEach() {
     cookies().set('user', 'storybookjs');
   },
@@ -86,7 +88,7 @@ export const ProtectedWhileLoggedIn: StoryObj<typeof Component> = {
   },
 };
 
-export const Logout: StoryObj<typeof Component> = {
+export const Logout: Story = {
   beforeEach() {
     cookies().set('user', 'storybookjs');
   },
@@ -102,7 +104,7 @@ export const Logout: StoryObj<typeof Component> = {
   },
 };
 
-export const Login: StoryObj<typeof Component> = {
+export const Login: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await userEvent.click(canvas.getByText('Login'));
diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-ts/server-actions.tsx b/code/frameworks/nextjs/template/stories_nextjs-default-ts/server-actions.tsx
index 5e1b3c7227dc..6244f78d2472 100644
--- a/code/frameworks/nextjs/template/stories_nextjs-default-ts/server-actions.tsx
+++ b/code/frameworks/nextjs/template/stories_nextjs-default-ts/server-actions.tsx
@@ -5,7 +5,7 @@ import { cookies } from 'next/headers';
 import { redirect } from 'next/navigation';
 
 export async function accessRoute() {
-  const user = cookies().get('user');
+  const user = (await cookies()).get('user');
 
   if (!user) {
     redirect('/');
@@ -16,13 +16,13 @@ export async function accessRoute() {
 }
 
 export async function logout() {
-  cookies().delete('user');
+  (await cookies()).delete('user');
   revalidatePath('/');
   redirect('/');
 }
 
 export async function login() {
-  cookies().set('user', 'storybookjs');
+  (await cookies()).set('user', 'storybookjs');
   revalidatePath('/');
   redirect('/');
 }
diff --git a/code/frameworks/nextjs/template/stories_nextjs-prerelease/GetImageProps.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-prerelease/GetImageProps.stories.tsx
new file mode 100644
index 000000000000..aefc27f54cfd
--- /dev/null
+++ b/code/frameworks/nextjs/template/stories_nextjs-prerelease/GetImageProps.stories.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { getImageProps } from 'next/image';
+
+import Accessibility from '../../assets/accessibility.svg';
+import Testing from '../../assets/testing.png';
+
+// referenced from https://nextjs.org/docs/pages/api-reference/components/image#theme-detection-picture
+const Component = (props: any) => {
+  const {
+    props: { srcSet: dark },
+  } = getImageProps({ src: Accessibility, ...props });
+  const {
+    // capture rest on one to spread to img as default; it doesn't matter which barring art direction
+    props: { srcSet: light, ...rest },
+  } = getImageProps({ src: Testing, ...props });
+
+  return (
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcSet={dark} />
+      <source media="(prefers-color-scheme: light)" srcSet={light} />
+      <img {...rest} />
+    </picture>
+  );
+};
+
+export default {
+  component: Component,
+  args: {
+    alt: 'getImageProps Example',
+  },
+} as Meta<typeof Component>;
+
+export const Default: StoryObj<typeof Component> = {};
diff --git a/code/frameworks/nextjs/template/stories_nextjs-prerelease/NextHeader.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-prerelease/NextHeader.stories.tsx
new file mode 100644
index 000000000000..f5e83ef867f6
--- /dev/null
+++ b/code/frameworks/nextjs/template/stories_nextjs-prerelease/NextHeader.stories.tsx
@@ -0,0 +1,51 @@
+import { cookies, headers } from '@storybook/nextjs/headers.mock';
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, within } from '@storybook/test';
+
+import NextHeader from './NextHeader';
+
+export default {
+  component: NextHeader,
+  parameters: {
+    react: {
+      rsc: true,
+    },
+  },
+} as Meta<typeof NextHeader>;
+
+type Story = StoryObj<typeof NextHeader>;
+
+export const Default: Story = {
+  loaders: async () => {
+    cookies().set('firstName', 'Jane');
+    cookies().set({
+      name: 'lastName',
+      value: 'Doe',
+    });
+    headers().set('timezone', 'Central European Summer Time');
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const headersMock = headers();
+    const cookiesMock = cookies();
+    await step('Cookie and header store apis are called upon rendering', async () => {
+      await expect(cookiesMock.getAll).toHaveBeenCalled();
+      await expect(headersMock.entries).toHaveBeenCalled();
+    });
+
+    await step('Upon clicking on submit, the user-id cookie is set', async () => {
+      const submitButton = await canvas.findByRole('button');
+      await userEvent.click(submitButton);
+
+      await expect(cookiesMock.set).toHaveBeenCalledWith('user-id', 'encrypted-id');
+    });
+
+    await step('The user-id cookie is available in cookie and header stores', async () => {
+      await expect(headersMock.get('cookie')).toContain('user-id=encrypted-id');
+      await expect(cookiesMock.get('user-id')).toEqual({
+        name: 'user-id',
+        value: 'encrypted-id',
+      });
+    });
+  },
+};
diff --git a/code/frameworks/nextjs/template/stories_nextjs-prerelease/NextHeader.tsx b/code/frameworks/nextjs/template/stories_nextjs-prerelease/NextHeader.tsx
new file mode 100644
index 000000000000..eca7197ed79a
--- /dev/null
+++ b/code/frameworks/nextjs/template/stories_nextjs-prerelease/NextHeader.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { cookies, headers } from 'next/headers';
+
+export default async function Component() {
+  async function handleClick() {
+    'use server';
+    (await cookies()).set('user-id', 'encrypted-id');
+  }
+
+  return (
+    <>
+      <h3>Cookies:</h3>
+      {(await cookies()).getAll().map(({ name, value }) => {
+        return (
+          <p key={name} style={{ display: 'flex', flexDirection: 'row', gap: 8 }}>
+            <strong>Name:</strong> <span>{name}</span>
+            <strong>Value:</strong> <span>{value}</span>
+          </p>
+        );
+      })}
+
+      <h3>Headers:</h3>
+      {Array.from((await headers()).entries()).map(([name, value]: [string, string]) => {
+        return (
+          <p key={name} style={{ display: 'flex', flexDirection: 'row', gap: 8 }}>
+            <strong>Name:</strong> <span>{name}</span>
+            <strong>Value:</strong> <span>{value}</span>
+          </p>
+        );
+      })}
+
+      <form action={handleClick}>
+        <button>add user-id cookie</button>
+      </form>
+    </>
+  );
+}
diff --git a/code/frameworks/nextjs/template/stories_nextjs-prerelease/Redirect.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-prerelease/Redirect.stories.tsx
new file mode 100644
index 000000000000..3c5980b79757
--- /dev/null
+++ b/code/frameworks/nextjs/template/stories_nextjs-prerelease/Redirect.stories.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/test';
+
+import { redirect } from 'next/navigation';
+
+let state = 'Bug! Not invalidated';
+
+export default {
+  render() {
+    return (
+      <div>
+        <div>{state}</div>
+        <form
+          action={() => {
+            state = 'State is invalidated successfully.';
+            redirect('/');
+          }}
+        >
+          <button>Submit</button>
+        </form>
+      </div>
+    );
+  },
+  parameters: {
+    test: {
+      // This is needed until Next will update to the React 19 beta: https://github.com/vercel/next.js/pull/65058
+      // In the React 19 beta ErrorBoundary errors (such as redirect) are only logged, and not thrown.
+      // We will also suspress console.error logs for re the console.error logs for redirect in the next framework.
+      // Using the onCaughtError react root option:
+      //   react: {
+      //     rootOptions: {
+      //       onCaughtError(error: unknown) {
+      //         if (isNextRouterError(error)) return;
+      //         console.error(error);
+      //       },
+      //     },
+      // See: code/frameworks/nextjs/src/preview.tsx
+      dangerouslyIgnoreUnhandledErrors: true,
+    },
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: '/',
+      },
+    },
+  },
+  tags: ['!test'],
+} as Meta;
+
+export const SingletonStateGetsInvalidatedAfterRedirecting: StoryObj = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button'));
+  },
+};
diff --git a/code/frameworks/nextjs/template/stories_nextjs-prerelease/ServerActions.stories.tsx b/code/frameworks/nextjs/template/stories_nextjs-prerelease/ServerActions.stories.tsx
new file mode 100644
index 000000000000..f1a9ad762eed
--- /dev/null
+++ b/code/frameworks/nextjs/template/stories_nextjs-prerelease/ServerActions.stories.tsx
@@ -0,0 +1,118 @@
+import React from 'react';
+
+import { revalidatePath } from '@storybook/nextjs/cache.mock';
+import { cookies } from '@storybook/nextjs/headers.mock';
+import { getRouter, redirect } from '@storybook/nextjs/navigation.mock';
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, waitFor, within } from '@storybook/test';
+
+import { accessRoute, login, logout } from './server-actions';
+
+function Component() {
+  return (
+    <div style={{ display: 'flex', gap: 8 }}>
+      <form>
+        <button type="submit" formAction={login}>
+          Login
+        </button>
+      </form>
+      <form>
+        <button type="submit" formAction={logout}>
+          Logout
+        </button>
+      </form>
+      <form>
+        <button type="submit" formAction={accessRoute}>
+          Access protected route
+        </button>
+      </form>
+    </div>
+  );
+}
+
+export default {
+  component: Component,
+  tags: ['!test'],
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: '/',
+      },
+    },
+    test: {
+      // This is needed until Next will update to the React 19 beta: https://github.com/vercel/next.js/pull/65058
+      // In the React 19 beta ErrorBoundary errors (such as redirect) are only logged, and not thrown.
+      // We will also suspress console.error logs for re the console.error logs for redirect in the next framework.
+      // Using the onCaughtError react root option:
+      //   react: {
+      //     rootOptions: {
+      //       onCaughtError(error: unknown) {
+      //         if (isNextRouterError(error)) return;
+      //         console.error(error);
+      //       },
+      //     },
+      // See: code/frameworks/nextjs/src/preview.tsx
+      dangerouslyIgnoreUnhandledErrors: true,
+    },
+  },
+} as Meta<typeof Component>;
+
+type Story = StoryObj<typeof Component>;
+
+export const ProtectedWhileLoggedOut: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByText('Access protected route'));
+
+    await expect(cookies().get).toHaveBeenCalledWith('user');
+    await expect(redirect).toHaveBeenCalledWith('/');
+
+    await waitFor(() => expect(getRouter().push).toHaveBeenCalled());
+  },
+};
+
+export const ProtectedWhileLoggedIn: Story = {
+  beforeEach() {
+    cookies().set('user', 'storybookjs');
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByText('Access protected route'));
+
+    await expect(cookies().get).toHaveBeenLastCalledWith('user');
+    await expect(revalidatePath).toHaveBeenLastCalledWith('/');
+    await expect(redirect).toHaveBeenLastCalledWith('/protected');
+
+    await waitFor(() => expect(getRouter().push).toHaveBeenCalled());
+  },
+};
+
+export const Logout: Story = {
+  beforeEach() {
+    cookies().set('user', 'storybookjs');
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await userEvent.click(canvas.getByText('Logout'));
+    await expect(cookies().delete).toHaveBeenCalled();
+    await expect(revalidatePath).toHaveBeenCalledWith('/');
+    await expect(redirect).toHaveBeenCalledWith('/');
+
+    await waitFor(() => expect(getRouter().push).toHaveBeenCalled());
+  },
+};
+
+export const Login: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByText('Login'));
+
+    await expect(cookies().set).toHaveBeenCalledWith('user', 'storybookjs');
+    await expect(revalidatePath).toHaveBeenCalledWith('/');
+    await expect(redirect).toHaveBeenCalledWith('/');
+
+    await waitFor(() => expect(getRouter().push).toHaveBeenCalled());
+  },
+};
diff --git a/code/frameworks/nextjs/template/stories_nextjs-prerelease/server-actions.tsx b/code/frameworks/nextjs/template/stories_nextjs-prerelease/server-actions.tsx
new file mode 100644
index 000000000000..6244f78d2472
--- /dev/null
+++ b/code/frameworks/nextjs/template/stories_nextjs-prerelease/server-actions.tsx
@@ -0,0 +1,28 @@
+'use server';
+
+import { revalidatePath } from 'next/cache';
+import { cookies } from 'next/headers';
+import { redirect } from 'next/navigation';
+
+export async function accessRoute() {
+  const user = (await cookies()).get('user');
+
+  if (!user) {
+    redirect('/');
+  }
+
+  revalidatePath('/');
+  redirect(`/protected`);
+}
+
+export async function logout() {
+  (await cookies()).delete('user');
+  revalidatePath('/');
+  redirect('/');
+}
+
+export async function login() {
+  (await cookies()).set('user', 'storybookjs');
+  revalidatePath('/');
+  redirect('/');
+}
diff --git a/code/frameworks/nextjs/template/typings.d.ts b/code/frameworks/nextjs/template/typings.d.ts
new file mode 100644
index 000000000000..b8b55169fef8
--- /dev/null
+++ b/code/frameworks/nextjs/template/typings.d.ts
@@ -0,0 +1,14 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.avif' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.png' {
+  const content: string;
+  export default content;
+}
diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json
index 160fcae2c060..ec95f3fcf6fc 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "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 95ecb773d3d8..50c51eee007c 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook for Preact: Develop Preact Component in isolation.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/react-native-web-vite/README.md b/code/frameworks/react-native-web-vite/README.md
new file mode 100644
index 000000000000..5bdae8f819c0
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/README.md
@@ -0,0 +1,3 @@
+# Storybook for React Native Web & Vite
+
+See [documentation](https://storybook.js.org/docs/get-started/frameworks/react-native-web-vite?renderer=react-native-web) for installation instructions, usage examples, APIs, and more.
diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json
new file mode 100644
index 000000000000..b7392768f46b
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/package.json
@@ -0,0 +1,91 @@
+{
+  "name": "@storybook/react-native-web-vite",
+  "version": "8.5.0-beta.5",
+  "description": "Develop react-native components an isolated web environment with hot reloading.",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/react-native-web-vite",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "code/frameworks/react-native-web-vite"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "node": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./preset": {
+      "types": "./dist/preset.d.ts",
+      "require": "./dist/preset.js"
+    },
+    "./vite-plugin": {
+      "types": "./dist/vite-plugin.d.ts",
+      "import": "./dist/vite-plugin.mjs",
+      "require": "./dist/vite-plugin.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "template/cli/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts",
+    "!src/**/*"
+  ],
+  "scripts": {
+    "check": "jiti ../../../scripts/prepare/check.ts",
+    "prep": "jiti ../../../scripts/prepare/bundle.ts"
+  },
+  "dependencies": {
+    "@bunchtogether/vite-plugin-flow": "^1.0.2",
+    "@joshwooding/vite-plugin-react-docgen-typescript": "0.4.2",
+    "@storybook/builder-vite": "workspace:*",
+    "@storybook/react": "workspace:*",
+    "@storybook/react-vite": "workspace:*",
+    "@vitejs/plugin-react": "^4.3.2",
+    "vite-tsconfig-paths": "^5.1.4"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "typescript": "^5.3.2"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
+    "react-native": ">=0.74.5",
+    "react-native-web": "^0.19.12",
+    "storybook": "workspace:^",
+    "vite": "^5.0.0 || ^6.0.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/preset.ts",
+      "./src/vite-plugin.ts"
+    ],
+    "platform": "node"
+  },
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
+}
diff --git a/code/frameworks/react-native-web-vite/preset.js b/code/frameworks/react-native-web-vite/preset.js
new file mode 100644
index 000000000000..a83f95279e7f
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/preset.js
@@ -0,0 +1 @@
+module.exports = require('./dist/preset');
diff --git a/code/frameworks/react-native-web-vite/project.json b/code/frameworks/react-native-web-vite/project.json
new file mode 100644
index 000000000000..219e9c00077d
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/project.json
@@ -0,0 +1,8 @@
+{
+  "name": "react-native-web-vite",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "targets": {
+    "build": {}
+  }
+}
diff --git a/code/frameworks/react-native-web-vite/src/index.ts b/code/frameworks/react-native-web-vite/src/index.ts
new file mode 100644
index 000000000000..1855ad61a70b
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/src/index.ts
@@ -0,0 +1 @@
+export type { FrameworkOptions, StorybookConfig } from './types';
diff --git a/code/frameworks/react-native-web-vite/src/preset.ts b/code/frameworks/react-native-web-vite/src/preset.ts
new file mode 100644
index 000000000000..44e847171dda
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/src/preset.ts
@@ -0,0 +1,103 @@
+import { viteFinal as reactViteFinal } from '@storybook/react-vite/preset';
+
+import { esbuildFlowPlugin, flowPlugin } from '@bunchtogether/vite-plugin-flow';
+import react from '@vitejs/plugin-react';
+import type { InlineConfig, PluginOption } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+import type { FrameworkOptions, StorybookConfig } from './types';
+
+export function reactNativeWeb(): PluginOption {
+  return {
+    name: 'vite:react-native-web',
+    config(_userConfig, env) {
+      return {
+        define: {
+          // reanimated support
+          'global.__x': {},
+          _frameTimestamp: undefined,
+          _WORKLET: false,
+          __DEV__: `${env.mode === 'development'}`,
+          'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || env.mode),
+        },
+        optimizeDeps: {
+          include: [],
+          esbuildOptions: {
+            jsx: 'transform',
+            resolveExtensions: [
+              '.web.js',
+              '.web.ts',
+              '.web.tsx',
+              '.js',
+              '.jsx',
+              '.json',
+              '.ts',
+              '.tsx',
+              '.mjs',
+            ],
+            loader: {
+              '.js': 'jsx',
+            },
+          },
+        },
+        resolve: {
+          extensions: [
+            '.web.js',
+            '.web.ts',
+            '.web.tsx',
+            '.js',
+            '.jsx',
+            '.json',
+            '.ts',
+            '.tsx',
+            '.mjs',
+          ],
+          alias: {
+            'react-native': 'react-native-web',
+          },
+        },
+      };
+    },
+  };
+}
+
+export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) => {
+  const { mergeConfig } = await import('vite');
+
+  const { pluginReactOptions = {} } =
+    await options.presets.apply<FrameworkOptions>('frameworkOptions');
+
+  const reactConfig = await reactViteFinal(config, options);
+
+  const { plugins = [] } = reactConfig;
+
+  plugins.unshift(
+    tsconfigPaths(),
+    flowPlugin({
+      exclude: [/node_modules\/(?!react-native|@react-native)/],
+    }),
+    react({
+      babel: {
+        babelrc: false,
+        configFile: false,
+      },
+      jsxRuntime: 'automatic',
+      ...pluginReactOptions,
+    })
+  );
+
+  plugins.push(reactNativeWeb());
+
+  return mergeConfig(reactConfig, {
+    optimizeDeps: {
+      esbuildOptions: {
+        plugins: [esbuildFlowPlugin(new RegExp(/\.(flow|jsx?)$/), (_path: string) => 'jsx')],
+      },
+    },
+  } satisfies InlineConfig);
+};
+
+export const core = {
+  builder: '@storybook/builder-vite',
+  renderer: '@storybook/react',
+};
diff --git a/code/frameworks/react-native-web-vite/src/types.ts b/code/frameworks/react-native-web-vite/src/types.ts
new file mode 100644
index 000000000000..c82c79771a1b
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/src/types.ts
@@ -0,0 +1,24 @@
+import type { CompatibleString } from 'storybook/internal/types';
+
+import type {
+  FrameworkOptions as FrameworkOptionsBase,
+  StorybookConfig as StorybookConfigBase,
+} from '@storybook/react-vite';
+
+import type { BabelOptions, Options as ReactOptions } from '@vitejs/plugin-react';
+
+export type FrameworkOptions = FrameworkOptionsBase & {
+  pluginReactOptions?: Omit<ReactOptions, 'babel'> & { babel?: BabelOptions };
+};
+
+type FrameworkName = CompatibleString<'@storybook/react-native-web-vite'>;
+
+/** The interface for Storybook configuration in `main.ts` files. */
+export type StorybookConfig = Omit<StorybookConfigBase, 'framework'> & {
+  framework:
+    | FrameworkName
+    | {
+        name: FrameworkName;
+        options: FrameworkOptions;
+      };
+};
diff --git a/code/frameworks/react-native-web-vite/src/typings.d.ts b/code/frameworks/react-native-web-vite/src/typings.d.ts
new file mode 100644
index 000000000000..8aed0ac76f1a
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/src/typings.d.ts
@@ -0,0 +1 @@
+declare module '@bunchtogether/vite-plugin-flow';
diff --git a/code/frameworks/react-native-web-vite/src/vite-plugin.ts b/code/frameworks/react-native-web-vite/src/vite-plugin.ts
new file mode 100644
index 000000000000..72281860f090
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/src/vite-plugin.ts
@@ -0,0 +1,18 @@
+import react from '@vitejs/plugin-react';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+import { reactNativeWeb } from './preset';
+
+export const storybookReactNativeWeb = () => {
+  return [
+    tsconfigPaths(),
+    react({
+      babel: {
+        babelrc: false,
+        configFile: false,
+      },
+      jsxRuntime: 'automatic',
+    }),
+    reactNativeWeb(),
+  ];
+};
diff --git a/code/frameworks/react-native-web-vite/template/cli/.eslintrc.json b/code/frameworks/react-native-web-vite/template/cli/.eslintrc.json
new file mode 100644
index 000000000000..3715384e9511
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/template/cli/.eslintrc.json
@@ -0,0 +1,7 @@
+{
+  "rules": {
+    "import/extensions": "off",
+    "react/no-unknown-property": "off",
+    "react/react-in-jsx-scope": "off"
+  }
+}
diff --git a/code/frameworks/react-native-web-vite/template/cli/js/Button.jsx b/code/frameworks/react-native-web-vite/template/cli/js/Button.jsx
new file mode 100644
index 000000000000..4d87b6e2c4ea
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/template/cli/js/Button.jsx
@@ -0,0 +1,109 @@
+import PropTypes from 'prop-types';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+/** Primary UI component for user interaction */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  style,
+  onPress,
+}) => {
+  const modeStyle = primary ? styles.primary : styles.secondary;
+  const textModeStyle = primary ? styles.primaryText : styles.secondaryText;
+
+  const sizeStyle = styles[size];
+  const textSizeStyle = textSizeStyles[size];
+
+  return (
+    <TouchableOpacity accessibilityRole="button" activeOpacity={0.6} onPress={onPress}>
+      <View
+        style={[
+          styles.button,
+          modeStyle,
+          sizeStyle,
+          style,
+          !!backgroundColor && { backgroundColor },
+          { borderColor: 'black' },
+        ]}
+      >
+        <Text style={[textModeStyle, textSizeStyle]}>{label}</Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    borderWidth: 0,
+    borderRadius: 48,
+  },
+  buttonText: {
+    fontWeight: '700',
+    lineHeight: 1,
+  },
+  primary: {
+    backgroundColor: '#1ea7fd',
+  },
+  primaryText: {
+    color: 'white',
+  },
+  secondary: {
+    backgroundColor: 'transparent',
+    borderColor: 'rgba(0, 0, 0, 0.15)',
+    borderWidth: 1,
+  },
+  secondaryText: {
+    color: '#333',
+  },
+  small: {
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+  },
+  smallText: {
+    fontSize: 12,
+  },
+  medium: {
+    paddingVertical: 11,
+    paddingHorizontal: 20,
+  },
+  mediumText: {
+    fontSize: 14,
+  },
+  large: {
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+  },
+  largeText: {
+    fontSize: 16,
+  },
+});
+
+const textSizeStyles = {
+  small: styles.smallText,
+  medium: styles.mediumText,
+  large: styles.largeText,
+};
+
+Button.propTypes = {
+  /** Is this the principal call to action on the page? */
+  primary: PropTypes.bool,
+  /** What background color to use */
+  backgroundColor: PropTypes.string,
+  /** How large should the button be? */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /** Button contents */
+  label: PropTypes.string.isRequired,
+  /** Optional click handler */
+  onPress: PropTypes.func,
+  /** Optional extra styles */
+  style: PropTypes.object,
+};
+
+Button.defaultProps = {
+  backgroundColor: null,
+  primary: false,
+  size: 'medium',
+  onClick: undefined,
+};
diff --git a/code/frameworks/react-native-web-vite/template/cli/js/Button.stories.jsx b/code/frameworks/react-native-web-vite/template/cli/js/Button.stories.jsx
new file mode 100644
index 000000000000..b7136fd8ae67
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/template/cli/js/Button.stories.jsx
@@ -0,0 +1,50 @@
+import { fn } from '@storybook/test';
+
+import { View } from 'react-native';
+
+import { Button } from './Button';
+
+const meta = {
+  title: 'Example/Button',
+  component: Button,
+  decorators: [
+    (Story) => (
+      <View style={{ flex: 1, alignItems: 'flex-start' }}>
+        <Story />
+      </View>
+    ),
+  ],
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // Use `fn` to spy on the onPress arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onPress: fn() },
+};
+
+export default meta;
+
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};
diff --git a/code/frameworks/react-native-web-vite/template/cli/js/Header.jsx b/code/frameworks/react-native-web-vite/template/cli/js/Header.jsx
new file mode 100644
index 000000000000..ebc34b85ea4f
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/template/cli/js/Header.jsx
@@ -0,0 +1,84 @@
+import PropTypes from 'prop-types';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { Button } from './Button';
+
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
+  <View>
+    <View style={styles.wrapper}>
+      <View style={styles.logoContainer}>
+        <Text style={styles.h1}>Acme</Text>
+      </View>
+
+      <View style={styles.buttonContainer}>
+        {user ? (
+          <>
+            <>
+              <Text>Welcome, </Text>
+              <Text style={styles.userName}>{user.name}!</Text>
+            </>
+            <Button style={styles.button} size="small" onPress={onLogout} label="Log out" />
+          </>
+        ) : (
+          <>
+            <Button style={styles.button} size="small" onPress={onLogin} label="Log in" />
+            <Button
+              style={styles.button}
+              primary
+              size="small"
+              onPress={onCreateAccount}
+              label="Sign up"
+            />
+          </>
+        )}
+      </View>
+    </View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  wrapper: {
+    borderBottomWidth: 1,
+    borderBottomColor: 'rgba(0, 0, 0, 0.1)',
+    paddingVertical: 15,
+    paddingHorizontal: 20,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  h1: {
+    fontWeight: '900',
+    fontSize: 20,
+    marginTop: 6,
+    marginBottom: 6,
+    marginLeft: 10,
+    color: 'black',
+    alignSelf: 'flex-start',
+  },
+  logoContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  button: {
+    marginLeft: 10,
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  userName: {
+    fontWeight: '700',
+  },
+});
+
+Header.propTypes = {
+  user: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+  }),
+  onLogin: PropTypes.func.isRequired,
+  onLogout: PropTypes.func.isRequired,
+  onCreateAccount: PropTypes.func.isRequired,
+};
+
+Header.defaultProps = {
+  user: null,
+};
diff --git a/code/frameworks/react-native-web-vite/template/cli/js/Header.stories.jsx b/code/frameworks/react-native-web-vite/template/cli/js/Header.stories.jsx
new file mode 100644
index 000000000000..97da8bee0dea
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/template/cli/js/Header.stories.jsx
@@ -0,0 +1,29 @@
+import { Header } from './Header';
+
+const meta = {
+  title: 'Example/Header',
+  component: Header,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+    onLogin: () => {},
+    onLogout: () => {},
+    onCreateAccount: () => {},
+  },
+};
+
+export const LoggedOut = {
+  args: {
+    onLogin: () => {},
+    onLogout: () => {},
+    onCreateAccount: () => {},
+  },
+};
diff --git a/code/frameworks/react-native-web-vite/template/cli/js/Page.jsx b/code/frameworks/react-native-web-vite/template/cli/js/Page.jsx
new file mode 100644
index 000000000000..81aa45a0a7b2
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/template/cli/js/Page.jsx
@@ -0,0 +1,162 @@
+import { useState } from 'react';
+
+import { Linking, StyleSheet, Text, View } from 'react-native';
+
+import { Header } from './Header';
+
+export const Page = () => {
+  const [user, setUser] = useState();
+
+  return (
+    <View>
+      <Header
+        user={user}
+        onLogin={() => setUser({ name: 'Jane Doe' })}
+        onLogout={() => setUser(undefined)}
+        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
+      />
+
+      <View style={styles.section}>
+        <Text role="heading" style={styles.h2}>
+          Pages in Storybook
+        </Text>
+
+        <Text style={styles.p}>
+          We recommend building UIs with a{' '}
+          <Text
+            style={[styles.a, { fontWeight: 'bold' }]}
+            role="link"
+            onPress={() => {
+              Linking.openURL('https://componentdriven.org');
+            }}
+          >
+            <Text>component-driven</Text>
+          </Text>{' '}
+          process starting with atomic components and ending with pages.
+        </Text>
+
+        <Text style={styles.p}>
+          Render pages with mock data. This makes it easy to build and review page states without
+          needing to navigate to them in your app. Here are some handy patterns for managing page
+          data in Storybook:
+        </Text>
+
+        <View>
+          <View>
+            Use a higher-level connected component. Storybook helps you compose such data from the
+            "args" of child component stories
+          </View>
+
+          <View>
+            Assemble data in the page component from your services. You can mock these services out
+            using Storybook.
+          </View>
+        </View>
+
+        <Text style={styles.p}>
+          Get a guided tutorial on component-driven development at{' '}
+          <Text
+            style={styles.a}
+            role="link"
+            onPress={() => {
+              Linking.openURL('https://storybook.js.org/tutorials/');
+            }}
+          >
+            Storybook tutorials
+          </Text>
+          . Read more in the{' '}
+          <Text
+            style={styles.a}
+            role="link"
+            onPress={() => {
+              Linking.openURL('https://storybook.js.org/docs');
+            }}
+          >
+            docs
+          </Text>
+          .
+        </Text>
+
+        <View style={styles.tipWrapper}>
+          <View style={styles.tip}>
+            <Text style={styles.tipText}>Tip </Text>
+          </View>
+
+          <Text>Adjust the width of the canvas with the </Text>
+
+          <Text>Viewports addon in the toolbar</Text>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: {
+    fontFamily: "'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif",
+    fontSize: 14,
+    lineHeight: 24,
+    paddingVertical: 48,
+    paddingHorizontal: 20,
+    marginHorizontal: 'auto',
+    maxWidth: 600,
+    color: '#333',
+  },
+
+  h2: {
+    fontWeight: '900',
+    fontSize: 32,
+    lineHeight: 1,
+    marginBottom: 4,
+  },
+
+  p: {
+    marginVertical: 16,
+    marginHorizontal: 0,
+  },
+
+  a: {
+    color: '#1ea7fd',
+  },
+
+  ul: {
+    paddingLeft: 30,
+    marginVertical: 16,
+  },
+
+  li: {
+    marginBottom: 8,
+  },
+
+  tip: {
+    alignSelf: 'flex-start',
+    borderRadius: 16,
+    backgroundColor: '#e7fdd8',
+    paddingVertical: 4,
+    paddingHorizontal: 12,
+    marginRight: 10,
+    marginBottom: 4,
+  },
+  tipText: {
+    fontSize: 11,
+    lineHeight: 12,
+    fontWeight: '700',
+    color: '#66bf3c',
+  },
+
+  tipWrapper: {
+    fontSize: 13,
+    lineHeight: 20,
+    marginTop: 40,
+    marginBottom: 40,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+
+  tipWrapperSvg: {
+    height: 12,
+    width: 12,
+    marginRight: 4,
+    marginTop: 3,
+  },
+});
diff --git a/code/frameworks/react-native-web-vite/template/cli/js/Page.stories.jsx b/code/frameworks/react-native-web-vite/template/cli/js/Page.stories.jsx
new file mode 100644
index 000000000000..249647fce862
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/template/cli/js/Page.stories.jsx
@@ -0,0 +1,25 @@
+import { expect, userEvent, within } from '@storybook/test';
+
+import { Page } from './Page';
+
+const meta = {
+  title: 'Example/Page',
+  component: Page,
+};
+
+export default meta;
+
+export const LoggedIn = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = canvas.getByRole('button', { name: /Log in/i });
+    await expect(loginButton).toBeInTheDocument();
+    await userEvent.click(loginButton);
+    // FIXME: await expect(loginButton).not.toBeInTheDocument();
+
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    await expect(logoutButton).toBeInTheDocument();
+  },
+};
+
+export const LoggedOut = {};
diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.stories.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.stories.tsx
new file mode 100644
index 000000000000..77d371d51182
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.stories.tsx
@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { View } from 'react-native';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'Example/Button',
+  component: Button,
+  decorators: [
+    (Story) => (
+      <View style={{ flex: 1, alignItems: 'flex-start' }}>
+        <Story />
+      </View>
+    ),
+  ],
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // Use `fn` to spy on the onPress arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onPress: fn() },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};
diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.tsx
new file mode 100644
index 000000000000..3e389596d4d3
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Button.tsx
@@ -0,0 +1,99 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+export interface ButtonProps {
+  /** Is this the principal call to action on the page? */
+  primary?: boolean;
+  /** What background color to use */
+  backgroundColor?: string;
+  /** How large should the button be? */
+  size?: 'small' | 'medium' | 'large';
+  /** Button contents */
+  label: string;
+  /** Optional click handler */
+  onPress?: () => void;
+}
+
+/** Primary UI component for user interaction */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  onPress,
+}: ButtonProps) => {
+  const modeStyle = primary ? styles.primary : styles.secondary;
+  const textModeStyle = primary ? styles.primaryText : styles.secondaryText;
+
+  const sizeStyle = styles[size];
+  const textSizeStyle = textSizeStyles[size];
+
+  return (
+    <TouchableOpacity accessibilityRole="button" activeOpacity={0.6} onPress={onPress}>
+      <View
+        style={[
+          styles.button,
+          modeStyle,
+          sizeStyle,
+          style,
+          !!backgroundColor && { backgroundColor },
+          { borderColor: 'black' },
+        ]}
+      >
+        <Text style={[textModeStyle, textSizeStyle]}>{label}</Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    borderWidth: 0,
+    borderRadius: 48,
+  },
+  buttonText: {
+    fontWeight: '700',
+    lineHeight: 1,
+  },
+  primary: {
+    backgroundColor: '#1ea7fd',
+  },
+  primaryText: {
+    color: 'white',
+  },
+  secondary: {
+    backgroundColor: 'transparent',
+    borderColor: 'rgba(0, 0, 0, 0.15)',
+    borderWidth: 1,
+  },
+  secondaryText: {
+    color: '#333',
+  },
+  small: {
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+  },
+  smallText: {
+    fontSize: 12,
+  },
+  medium: {
+    paddingVertical: 11,
+    paddingHorizontal: 20,
+  },
+  mediumText: {
+    fontSize: 14,
+  },
+  large: {
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+  },
+  largeText: {
+    fontSize: 16,
+  },
+});
+
+const textSizeStyles = {
+  small: styles.smallText,
+  medium: styles.mediumText,
+  large: styles.largeText,
+};
diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.stories.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.stories.tsx
new file mode 100644
index 000000000000..65b1ecf9a010
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.stories.tsx
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Header } from './Header';
+
+const meta: Meta<typeof Header> = {
+  title: 'Example/Header',
+  component: Header,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const LoggedIn: Story = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+    onLogin: () => {},
+    onLogout: () => {},
+    onCreateAccount: () => {},
+  },
+};
+
+export const LoggedOut: Story = {
+  args: {
+    onLogin: () => {},
+    onLogout: () => {},
+    onCreateAccount: () => {},
+  },
+};
diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.tsx
new file mode 100644
index 000000000000..0304209832f9
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Header.tsx
@@ -0,0 +1,78 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { Button } from './Button';
+
+export type HeaderProps = {
+  user?: {};
+  onLogin: () => void;
+  onLogout: () => void;
+  onCreateAccount: () => void;
+};
+
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
+  <View>
+    <View style={styles.wrapper}>
+      <View style={styles.logoContainer}>
+        <Text style={styles.h1}>Acme</Text>
+      </View>
+
+      <View style={styles.buttonContainer}>
+        {user ? (
+          <>
+            <>
+              <Text>Welcome, </Text>
+              <Text style={styles.userName}>{user.name}!</Text>
+            </>
+            <Button style={styles.button} size="small" onPress={onLogout} label="Log out" />
+          </>
+        ) : (
+          <>
+            <Button style={styles.button} size="small" onPress={onLogin} label="Log in" />
+
+            <Button
+              style={styles.button}
+              primary
+              size="small"
+              onPress={onCreateAccount}
+              label="Sign up"
+            />
+          </>
+        )}
+      </View>
+    </View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  wrapper: {
+    borderBottomWidth: 1,
+    borderBottomColor: 'rgba(0, 0, 0, 0.1)',
+    paddingVertical: 15,
+    paddingHorizontal: 20,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  h1: {
+    fontWeight: '900',
+    fontSize: 20,
+    marginTop: 6,
+    marginBottom: 6,
+    marginLeft: 10,
+    color: 'black',
+    alignSelf: 'flex-start',
+  },
+  logoContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  button: {
+    marginLeft: 10,
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  userName: {
+    fontWeight: '700',
+  },
+});
diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Page.stories.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Page.stories.tsx
new file mode 100644
index 000000000000..96468b31d19b
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Page.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, within } from '@storybook/test';
+
+import { Page } from './Page';
+
+const meta: Meta<typeof Page> = {
+  title: 'Example/Page',
+  component: Page,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const LoggedIn: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = canvas.getByRole('button', { name: /Log in/i });
+    await expect(loginButton).toBeInTheDocument();
+    await userEvent.click(loginButton);
+    // FIXME: await expect(loginButton).not.toBeInTheDocument();
+
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    await expect(logoutButton).toBeInTheDocument();
+  },
+};
+
+export const LoggedOut: Story = {};
diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Page.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Page.tsx
new file mode 100644
index 000000000000..81aa45a0a7b2
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/template/cli/ts-3-8/Page.tsx
@@ -0,0 +1,162 @@
+import { useState } from 'react';
+
+import { Linking, StyleSheet, Text, View } from 'react-native';
+
+import { Header } from './Header';
+
+export const Page = () => {
+  const [user, setUser] = useState();
+
+  return (
+    <View>
+      <Header
+        user={user}
+        onLogin={() => setUser({ name: 'Jane Doe' })}
+        onLogout={() => setUser(undefined)}
+        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
+      />
+
+      <View style={styles.section}>
+        <Text role="heading" style={styles.h2}>
+          Pages in Storybook
+        </Text>
+
+        <Text style={styles.p}>
+          We recommend building UIs with a{' '}
+          <Text
+            style={[styles.a, { fontWeight: 'bold' }]}
+            role="link"
+            onPress={() => {
+              Linking.openURL('https://componentdriven.org');
+            }}
+          >
+            <Text>component-driven</Text>
+          </Text>{' '}
+          process starting with atomic components and ending with pages.
+        </Text>
+
+        <Text style={styles.p}>
+          Render pages with mock data. This makes it easy to build and review page states without
+          needing to navigate to them in your app. Here are some handy patterns for managing page
+          data in Storybook:
+        </Text>
+
+        <View>
+          <View>
+            Use a higher-level connected component. Storybook helps you compose such data from the
+            "args" of child component stories
+          </View>
+
+          <View>
+            Assemble data in the page component from your services. You can mock these services out
+            using Storybook.
+          </View>
+        </View>
+
+        <Text style={styles.p}>
+          Get a guided tutorial on component-driven development at{' '}
+          <Text
+            style={styles.a}
+            role="link"
+            onPress={() => {
+              Linking.openURL('https://storybook.js.org/tutorials/');
+            }}
+          >
+            Storybook tutorials
+          </Text>
+          . Read more in the{' '}
+          <Text
+            style={styles.a}
+            role="link"
+            onPress={() => {
+              Linking.openURL('https://storybook.js.org/docs');
+            }}
+          >
+            docs
+          </Text>
+          .
+        </Text>
+
+        <View style={styles.tipWrapper}>
+          <View style={styles.tip}>
+            <Text style={styles.tipText}>Tip </Text>
+          </View>
+
+          <Text>Adjust the width of the canvas with the </Text>
+
+          <Text>Viewports addon in the toolbar</Text>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: {
+    fontFamily: "'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif",
+    fontSize: 14,
+    lineHeight: 24,
+    paddingVertical: 48,
+    paddingHorizontal: 20,
+    marginHorizontal: 'auto',
+    maxWidth: 600,
+    color: '#333',
+  },
+
+  h2: {
+    fontWeight: '900',
+    fontSize: 32,
+    lineHeight: 1,
+    marginBottom: 4,
+  },
+
+  p: {
+    marginVertical: 16,
+    marginHorizontal: 0,
+  },
+
+  a: {
+    color: '#1ea7fd',
+  },
+
+  ul: {
+    paddingLeft: 30,
+    marginVertical: 16,
+  },
+
+  li: {
+    marginBottom: 8,
+  },
+
+  tip: {
+    alignSelf: 'flex-start',
+    borderRadius: 16,
+    backgroundColor: '#e7fdd8',
+    paddingVertical: 4,
+    paddingHorizontal: 12,
+    marginRight: 10,
+    marginBottom: 4,
+  },
+  tipText: {
+    fontSize: 11,
+    lineHeight: 12,
+    fontWeight: '700',
+    color: '#66bf3c',
+  },
+
+  tipWrapper: {
+    fontSize: 13,
+    lineHeight: 20,
+    marginTop: 40,
+    marginBottom: 40,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+
+  tipWrapperSvg: {
+    height: 12,
+    width: 12,
+    marginRight: 4,
+    marginTop: 3,
+  },
+});
diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Button.stories.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Button.stories.tsx
new file mode 100644
index 000000000000..8e655fbfe266
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Button.stories.tsx
@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { View } from 'react-native';
+
+import { Button } from './Button';
+
+const meta = {
+  title: 'Example/Button',
+  component: Button,
+  decorators: [
+    (Story) => (
+      <View style={{ flex: 1, alignItems: 'flex-start' }}>
+        <Story />
+      </View>
+    ),
+  ],
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // Use `fn` to spy on the onPress arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  args: { onPress: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};
diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Button.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Button.tsx
new file mode 100644
index 000000000000..ed17e64a3d20
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Button.tsx
@@ -0,0 +1,101 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+export interface ButtonProps {
+  /** Is this the principal call to action on the page? */
+  primary?: boolean;
+  /** What background color to use */
+  backgroundColor?: string;
+  /** How large should the button be? */
+  size?: 'small' | 'medium' | 'large';
+  /** Button contents */
+  label: string;
+  /** Optional click handler */
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Primary UI component for user interaction */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  style,
+  onPress,
+}: ButtonProps) => {
+  const modeStyle = primary ? styles.primary : styles.secondary;
+  const textModeStyle = primary ? styles.primaryText : styles.secondaryText;
+
+  const sizeStyle = styles[size];
+  const textSizeStyle = textSizeStyles[size];
+
+  return (
+    <TouchableOpacity accessibilityRole="button" activeOpacity={0.6} onPress={onPress}>
+      <View
+        style={[
+          styles.button,
+          modeStyle,
+          sizeStyle,
+          style,
+          !!backgroundColor && { backgroundColor },
+          { borderColor: 'black' },
+        ]}
+      >
+        <Text style={[textModeStyle, textSizeStyle]}>{label}</Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    borderWidth: 0,
+    borderRadius: 48,
+  },
+  buttonText: {
+    fontWeight: '700',
+    lineHeight: 1,
+  },
+  primary: {
+    backgroundColor: '#1ea7fd',
+  },
+  primaryText: {
+    color: 'white',
+  },
+  secondary: {
+    backgroundColor: 'transparent',
+    borderColor: 'rgba(0, 0, 0, 0.15)',
+    borderWidth: 1,
+  },
+  secondaryText: {
+    color: '#333',
+  },
+  small: {
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+  },
+  smallText: {
+    fontSize: 12,
+  },
+  medium: {
+    paddingVertical: 11,
+    paddingHorizontal: 20,
+  },
+  mediumText: {
+    fontSize: 14,
+  },
+  large: {
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+  },
+  largeText: {
+    fontSize: 16,
+  },
+});
+
+const textSizeStyles = {
+  small: styles.smallText,
+  medium: styles.mediumText,
+  large: styles.largeText,
+};
diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Header.stories.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Header.stories.tsx
new file mode 100644
index 000000000000..029f040b0396
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Header.stories.tsx
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Header } from './Header';
+
+const meta = {
+  title: 'Example/Header',
+  component: Header,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+} satisfies Meta<typeof Header>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const LoggedIn: Story = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+    onLogin: () => {},
+    onLogout: () => {},
+    onCreateAccount: () => {},
+  },
+};
+
+export const LoggedOut: Story = {
+  args: {
+    onLogin: () => {},
+    onLogout: () => {},
+    onCreateAccount: () => {},
+  },
+};
diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Header.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Header.tsx
new file mode 100644
index 000000000000..4f8fcf7b8c49
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Header.tsx
@@ -0,0 +1,76 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { Button } from './Button';
+
+export type HeaderProps = {
+  user?: {};
+  onLogin: () => void;
+  onLogout: () => void;
+  onCreateAccount: () => void;
+};
+
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
+  <View>
+    <View style={styles.wrapper}>
+      <View style={styles.logoContainer}>
+        <Text style={styles.h1}>Acme</Text>
+      </View>
+      <View style={styles.buttonContainer}>
+        {user ? (
+          <>
+            <>
+              <Text>Welcome, </Text>
+              <Text style={styles.userName}>{user.name}!</Text>
+            </>
+            <Button style={styles.button} size="small" onPress={onLogout} label="Log out" />
+          </>
+        ) : (
+          <>
+            <Button style={styles.button} size="small" onPress={onLogin} label="Log in" />
+            <Button
+              style={styles.button}
+              primary
+              size="small"
+              onPress={onCreateAccount}
+              label="Sign up"
+            />
+          </>
+        )}
+      </View>
+    </View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  wrapper: {
+    borderBottomWidth: 1,
+    borderBottomColor: 'rgba(0, 0, 0, 0.1)',
+    paddingVertical: 15,
+    paddingHorizontal: 20,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  h1: {
+    fontWeight: '900',
+    fontSize: 20,
+    marginTop: 6,
+    marginBottom: 6,
+    marginLeft: 10,
+    color: 'black',
+    alignSelf: 'flex-start',
+  },
+  logoContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  button: {
+    marginLeft: 10,
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  userName: {
+    fontWeight: '700',
+  },
+});
diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Page.stories.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Page.stories.tsx
new file mode 100644
index 000000000000..5a5db7ff2685
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Page.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta } from '@storybook/react';
+import { expect, userEvent, within } from '@storybook/test';
+
+import { Page } from './Page';
+
+export default {
+  title: 'Example/Page',
+  component: Page,
+} as Meta<typeof Page>;
+
+export const LoggedIn = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = canvas.getByRole('button', { name: /Log in/i });
+    await expect(loginButton).toBeInTheDocument();
+    await userEvent.click(loginButton);
+    // FIXME: await expect(loginButton).not.toBeInTheDocument();
+
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    await expect(logoutButton).toBeInTheDocument();
+  },
+};
+
+export const LoggedOut = {};
diff --git a/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Page.tsx b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Page.tsx
new file mode 100644
index 000000000000..44ca0103ecaf
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/template/cli/ts-4-9/Page.tsx
@@ -0,0 +1,154 @@
+import { useState } from 'react';
+
+import { Linking, StyleSheet, Text, View } from 'react-native';
+
+import { Header } from './Header';
+
+export const Page = () => {
+  const [user, setUser] = useState();
+
+  return (
+    <View>
+      <Header
+        user={user}
+        onLogin={() => setUser({ name: 'Jane Doe' })}
+        onLogout={() => setUser(undefined)}
+        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
+      />
+
+      <View style={styles.section}>
+        <Text role="heading" style={styles.h2}>
+          Pages in Storybook
+        </Text>
+        <Text style={styles.p}>
+          We recommend building UIs with a{' '}
+          <Text
+            style={[styles.a, { fontWeight: 'bold' }]}
+            role="link"
+            onPress={() => {
+              Linking.openURL('https://componentdriven.org');
+            }}
+          >
+            <Text>component-driven</Text>
+          </Text>{' '}
+          process starting with atomic components and ending with pages.
+        </Text>
+        <Text style={styles.p}>
+          Render pages with mock data. This makes it easy to build and review page states without
+          needing to navigate to them in your app. Here are some handy patterns for managing page
+          data in Storybook:
+        </Text>
+        <View>
+          <View>
+            Use a higher-level connected component. Storybook helps you compose such data from the
+            "args" of child component stories
+          </View>
+          <View>
+            Assemble data in the page component from your services. You can mock these services out
+            using Storybook.
+          </View>
+        </View>
+        <Text style={styles.p}>
+          Get a guided tutorial on component-driven development at{' '}
+          <Text
+            style={styles.a}
+            role="link"
+            onPress={() => {
+              Linking.openURL('https://storybook.js.org/tutorials/');
+            }}
+          >
+            Storybook tutorials
+          </Text>
+          . Read more in the{' '}
+          <Text
+            style={styles.a}
+            role="link"
+            onPress={() => {
+              Linking.openURL('https://storybook.js.org/docs');
+            }}
+          >
+            docs
+          </Text>
+          .
+        </Text>
+        <View style={styles.tipWrapper}>
+          <View style={styles.tip}>
+            <Text style={styles.tipText}>Tip </Text>
+          </View>
+          <Text>Adjust the width of the canvas with the </Text>
+          <Text>Viewports addon in the toolbar</Text>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: {
+    fontFamily: "'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif",
+    fontSize: 14,
+    lineHeight: 24,
+    paddingVertical: 48,
+    paddingHorizontal: 20,
+    marginHorizontal: 'auto',
+    maxWidth: 600,
+    color: '#333',
+  },
+
+  h2: {
+    fontWeight: '900',
+    fontSize: 32,
+    lineHeight: 1,
+    marginBottom: 4,
+  },
+
+  p: {
+    marginVertical: 16,
+    marginHorizontal: 0,
+  },
+
+  a: {
+    color: '#1ea7fd',
+  },
+
+  ul: {
+    paddingLeft: 30,
+    marginVertical: 16,
+  },
+
+  li: {
+    marginBottom: 8,
+  },
+
+  tip: {
+    alignSelf: 'flex-start',
+    borderRadius: 16,
+    backgroundColor: '#e7fdd8',
+    paddingVertical: 4,
+    paddingHorizontal: 12,
+    marginRight: 10,
+    marginBottom: 4,
+  },
+  tipText: {
+    fontSize: 11,
+    lineHeight: 12,
+    fontWeight: '700',
+    color: '#66bf3c',
+  },
+
+  tipWrapper: {
+    fontSize: 13,
+    lineHeight: 20,
+    marginTop: 40,
+    marginBottom: 40,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+
+  tipWrapperSvg: {
+    height: 12,
+    width: 12,
+    marginRight: 4,
+    marginTop: 3,
+  },
+});
diff --git a/code/frameworks/react-native-web-vite/tsconfig.json b/code/frameworks/react-native-web-vite/tsconfig.json
new file mode 100644
index 000000000000..c749496d9a6e
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "storybook/internal/*": ["../../lib/cli/core/*"]
+    },
+    "rootDir": "./src"
+  },
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*"]
+}
diff --git a/code/frameworks/react-native-web-vite/vitest.config.ts b/code/frameworks/react-native-web-vite/vitest.config.ts
new file mode 100644
index 000000000000..7420176b2e46
--- /dev/null
+++ b/code/frameworks/react-native-web-vite/vitest.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig, mergeConfig } from 'vitest/config';
+
+import { vitestCommonConfig } from '../../vitest.workspace';
+
+export default mergeConfig(
+  vitestCommonConfig,
+  defineConfig({
+    // Add custom config here
+  })
+);
diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json
index fa1a682656bb..2db52d151651 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -35,6 +35,16 @@
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "preset": [
+        "dist/preset.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist/**/*",
     "README.md",
@@ -47,7 +57,7 @@
     "prep": "jiti ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.0",
+    "@joshwooding/vite-plugin-react-docgen-typescript": "0.4.2",
     "@rollup/pluginutils": "^5.0.2",
     "@storybook/builder-vite": "workspace:*",
     "@storybook/react": "workspace:*",
@@ -63,10 +73,16 @@
     "vite": "^4.0.0"
   },
   "peerDependencies": {
+    "@storybook/test": "workspace:*",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "storybook": "workspace:^",
-    "vite": "^4.0.0 || ^5.0.0"
+    "vite": "^4.0.0 || ^5.0.0 || ^6.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@storybook/test": {
+      "optional": true
+    }
   },
   "engines": {
     "node": ">=18.0.0"
diff --git a/code/frameworks/react-vite/src/preset.ts b/code/frameworks/react-vite/src/preset.ts
index cef1a270f33b..a01721dadacc 100644
--- a/code/frameworks/react-vite/src/preset.ts
+++ b/code/frameworks/react-vite/src/preset.ts
@@ -12,7 +12,7 @@ export const core: PresetProperty<'core'> = {
   renderer: getAbsolutePath('@storybook/react'),
 };
 
-export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => {
+export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (config, { presets }) => {
   const { plugins = [] } = config;
 
   // Add docgen plugin
diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json
index 1117894ced7e..868da3831029 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/frameworks/react-webpack5/src/preset.ts b/code/frameworks/react-webpack5/src/preset.ts
index 9e233459c10b..08f870a23054 100644
--- a/code/frameworks/react-webpack5/src/preset.ts
+++ b/code/frameworks/react-webpack5/src/preset.ts
@@ -2,6 +2,8 @@ import { dirname, join } from 'node:path';
 
 import type { PresetProperty } from 'storybook/internal/types';
 
+import { WebpackDefinePlugin } from '@storybook/builder-webpack5';
+
 import type { StorybookConfig } from './types';
 
 const getAbsolutePath = <I extends string>(input: I): I =>
@@ -24,12 +26,23 @@ export const core: PresetProperty<'core'> = async (config, options) => {
   };
 };
 
-export const webpack: StorybookConfig['webpack'] = async (config) => {
+export const webpack: StorybookConfig['webpack'] = async (config, options) => {
   config.resolve = config.resolve || {};
 
   config.resolve.alias = {
     ...config.resolve?.alias,
     '@storybook/react': getAbsolutePath('@storybook/react'),
   };
+
+  if (options.features?.developmentModeForBuild) {
+    config.plugins = [
+      // @ts-expect-error Ignore this error, because in the `webpack` preset the user actually hasn't defined a config yet.
+      ...config.plugins,
+      new WebpackDefinePlugin({
+        NODE_ENV: JSON.stringify('development'),
+      }),
+    ];
+  }
+
   return config;
 };
diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json
index 4ee3f6eca929..24e17e444527 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "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 7ee073acf0bf..b17aea752397 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -51,21 +51,23 @@
     "@storybook/svelte": "workspace:*",
     "magic-string": "^0.30.0",
     "svelte-preprocess": "^5.1.1",
+    "svelte2tsx": "^0.7.13",
     "sveltedoc-parser": "^4.2.1",
-    "ts-dedent": "^2.2.0"
+    "ts-dedent": "^2.2.0",
+    "typescript": "^4.9.4 || ^5.0.0"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.0.1",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@types/node": "^22.0.0",
-    "svelte": "^5.0.0-next.65",
+    "svelte": "^5.0.5",
     "typescript": "^5.3.2",
     "vite": "^4.0.0"
   },
   "peerDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^2.0.0 || ^3.0.0",
+    "@sveltejs/vite-plugin-svelte": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0",
     "storybook": "workspace:^",
-    "svelte": "^4.0.0 || ^5.0.0-next.65",
-    "vite": "^4.0.0 || ^5.0.0"
+    "svelte": "^4.0.0 || ^5.0.0",
+    "vite": "^4.0.0 || ^5.0.0 || ^6.0.0"
   },
   "engines": {
     "node": ">=18.0.0"
diff --git a/code/frameworks/svelte-vite/src/plugins/generateDocgen.ts b/code/frameworks/svelte-vite/src/plugins/generateDocgen.ts
new file mode 100644
index 000000000000..eff343fbfe0b
--- /dev/null
+++ b/code/frameworks/svelte-vite/src/plugins/generateDocgen.ts
@@ -0,0 +1,528 @@
+import path from 'node:path';
+
+import svelte2tsx from 'svelte2tsx';
+import { VERSION } from 'svelte/compiler';
+import ts from 'typescript';
+
+export type Docgen = {
+  name?: string;
+  propsRuneUsed?: boolean;
+  props: PropInfo[];
+};
+
+export type PropInfo = {
+  name: string;
+  type?: Type;
+  optional?: boolean;
+  defaultValue?: DefaultValue;
+  description?: string;
+};
+
+type BaseType = object;
+
+type ScalarType = BaseType & {
+  type: 'number' | 'string' | 'boolean' | 'symbol' | 'any' | 'null' | 'undefined' | 'void';
+};
+type FunctionType = BaseType & {
+  type: 'function';
+  text: string;
+};
+type LiteralType = BaseType & {
+  type: 'literal';
+  value: string | number | boolean;
+  text: string;
+};
+type ArrayType = BaseType & {
+  type: 'array';
+  text: string;
+};
+type ObjectType = BaseType & {
+  type: 'object';
+  text: string;
+};
+type UnionType = BaseType & {
+  type: 'union';
+  types: Type[];
+};
+type IntersectionType = BaseType & {
+  type: 'intersection';
+  types: Type[];
+};
+
+export type Type =
+  | ScalarType
+  | LiteralType
+  | FunctionType
+  | ArrayType
+  | ObjectType
+  | UnionType
+  | IntersectionType;
+
+type DefaultValue = {
+  text: string;
+};
+
+function convertType(type: ts.Type, checker: ts.TypeChecker): Type | undefined {
+  // TypeScript compiler uses bit flags to represent type information.
+  // Note the use of the bitwise AND (&) operator here.
+  // See examples at: https://github.com/search?q=repo%3Amicrosoft%2FTypeScript+TypeFlags.&type=code
+  if (type.flags & ts.TypeFlags.Any) {
+    return { type: 'any' };
+  }
+  if (type.flags & ts.TypeFlags.Number) {
+    return { type: 'number' };
+  }
+  if (type.flags & ts.TypeFlags.String) {
+    return { type: 'string' };
+  }
+  if (type.flags & ts.TypeFlags.Boolean) {
+    return { type: 'boolean' };
+  }
+  if (type.flags & ts.TypeFlags.ESSymbol) {
+    return { type: 'symbol' };
+  }
+  if (type.flags & ts.TypeFlags.Null) {
+    return { type: 'null' };
+  }
+  if (type.flags & ts.TypeFlags.Undefined) {
+    return { type: 'undefined' };
+  }
+  if (type.flags & ts.TypeFlags.Void) {
+    return { type: 'void' };
+  }
+  if (type.getCallSignatures().length > 0) {
+    return { type: 'function', text: checker.typeToString(type) };
+  }
+  if (type.flags & ts.TypeFlags.Object) {
+    const indexType = checker.getIndexTypeOfType(type, ts.IndexKind.Number);
+    if (indexType) {
+      return { type: 'array', text: checker.typeToString(type) };
+    }
+    return { type: 'object', text: checker.typeToString(type) };
+  }
+  if (type.isNumberLiteral() || type.isStringLiteral()) {
+    return {
+      type: 'literal',
+      value: type.value,
+      text:
+        type.flags & ts.TypeFlags.EnumLiteral
+          ? checker.typeToString(type)
+          : JSON.stringify(type.value),
+    };
+  }
+  if (type.flags & ts.TypeFlags.BooleanLiteral) {
+    const text = checker.typeToString(type);
+    return { type: 'literal', value: text === 'true', text: text };
+  }
+  if (type.isUnion()) {
+    // TypeA | TypeB
+    const types = type.types
+      .map((t) => convertType(t, checker))
+      .filter((t) => {
+        return t !== undefined && t.type !== 'undefined';
+      }) as Type[];
+
+    // Boolean is represented as 'true' | 'false' in TypeScript's type checker,
+    // so we need to merge them into a single 'boolean' type.
+    const idxTrue = types.findIndex((t) => t.type === 'literal' && t.value === true);
+    const idxFalse = types.findIndex((t) => t.type === 'literal' && t.value === false);
+    if (idxTrue !== -1 && idxFalse !== -1) {
+      types.splice(Math.max(idxTrue, idxFalse), 1);
+      types.splice(Math.min(idxTrue, idxFalse), 1, { type: 'boolean' });
+    }
+
+    return types.length > 1 ? { type: 'union', types: types } : types[0];
+  }
+  if (type.isIntersection()) {
+    // TypeA & TypeB
+    const types = type.types
+      .map((t) => convertType(t, checker))
+      .filter((t) => t !== undefined) as Type[];
+    return { type: 'intersection', types };
+  }
+
+  return undefined;
+}
+
+function initializerToDefaultValue(
+  expr: ts.Expression,
+  checker: ts.TypeChecker
+): DefaultValue | undefined {
+  if (ts.isNumericLiteral(expr)) {
+    return { text: expr.text };
+  } else if (ts.isStringLiteral(expr)) {
+    return { text: JSON.stringify(expr.text) };
+  } else if (ts.isIdentifier(expr) || ts.isPropertyAccessExpression(expr)) {
+    const symbol = checker.getSymbolAtLocation(expr);
+    if (symbol && checker.isUndefinedSymbol(symbol)) {
+      return undefined;
+    }
+    const type = checker.getTypeAtLocation(expr);
+    if (type.flags & ts.TypeFlags.EnumLiteral) {
+      return { text: checker.typeToString(type) };
+    } else if (type.isLiteral()) {
+      // string or number
+      return { text: JSON.stringify(type.value) };
+    } else if (type.flags & ts.TypeFlags.Null) {
+      return { text: 'null' };
+    } else if (type.flags & ts.TypeFlags.BooleanLiteral) {
+      return { text: checker.typeToString(type) };
+    } else if (type.getCallSignatures().length > 0) {
+      return { text: 'function' };
+    }
+  } else if (
+    ts.isArrayLiteralExpression(expr) ||
+    ts.isObjectLiteralExpression(expr) ||
+    ts.isNewExpression(expr)
+  ) {
+    return { text: expr.getText() };
+  } else if (ts.isArrowFunction(expr)) {
+    return { text: 'function' };
+  }
+  switch (expr.kind) {
+    case ts.SyntaxKind.TrueKeyword:
+      return { text: 'true' };
+    case ts.SyntaxKind.FalseKeyword:
+      return { text: 'false' };
+    case ts.SyntaxKind.NullKeyword:
+      return { text: 'null' };
+  }
+  return { text: '...' };
+}
+
+function loadConfig(basepath: string): [ts.CompilerOptions, Set<string>] {
+  const configPath =
+    ts.findConfigFile(basepath, ts.sys.fileExists) ||
+    ts.findConfigFile(basepath, ts.sys.fileExists, 'jsconfig.json');
+
+  const forcedOptions = {
+    sourceMap: false,
+    noEmit: true,
+    strict: true,
+    allowJs: true,
+    checkJs: true,
+    skipLibCheck: true,
+    skipDefaultLibCheck: true,
+  };
+  if (!configPath) {
+    return [forcedOptions, new Set()];
+  }
+
+  const configFile = ts.readConfigFile(configPath, ts.sys.readFile);
+  const config = ts.parseJsonConfigFileContent(
+    configFile.config,
+    ts.sys,
+    path.dirname(configPath),
+    undefined,
+    configPath,
+    undefined,
+    [
+      {
+        extension: 'svelte',
+        isMixedContent: true,
+        scriptKind: ts.ScriptKind.Deferred,
+      },
+    ]
+  );
+
+  const fileNames = new Set(
+    config.fileNames
+      .filter((fileName) => fileName.endsWith('.svelte'))
+      .map((fileName) => fileName + '.tsx')
+  );
+
+  return [
+    {
+      ...config.options,
+      ...forcedOptions,
+    },
+    fileNames,
+  ];
+}
+
+export interface DocgenCache {
+  filenameToModifiedTime: Record<string, Date | undefined>;
+  filenameToSourceFile: Record<string, ts.SourceFile>;
+  fileCache: Record<string, string>;
+  oldProgram?: ts.Program;
+  options?: ts.CompilerOptions;
+  rootNames?: Set<string>;
+}
+
+export function createDocgenCache(): DocgenCache {
+  return {
+    filenameToModifiedTime: {},
+    filenameToSourceFile: {},
+    fileCache: {},
+  };
+}
+
+export function generateDocgen(targetFileName: string, cache: DocgenCache): Docgen {
+  if (targetFileName.endsWith('.svelte')) {
+    targetFileName = targetFileName + '.tsx';
+  }
+  let propsRuneUsed = false;
+
+  if (cache.options === undefined || !cache.rootNames?.has(targetFileName)) {
+    [cache.options, cache.rootNames] = loadConfig(targetFileName);
+
+    const shimFilename = require.resolve('svelte2tsx/svelte-shims-v4.d.ts');
+    cache.rootNames.add(shimFilename);
+    cache.rootNames.add(targetFileName);
+  }
+
+  // Create a custom host
+  const originalHost = ts.createCompilerHost(cache.options);
+  const host: ts.CompilerHost = {
+    ...originalHost,
+    readFile(fileName) {
+      // Cache package.json
+      const isCacheTarget = fileName.endsWith(path.sep + 'package.json');
+      if (isCacheTarget && cache.fileCache[fileName]) {
+        return cache.fileCache[fileName];
+      }
+      const content = originalHost.readFile(fileName);
+      if (content && isCacheTarget) {
+        cache.fileCache[fileName] = content;
+      }
+      return content;
+    },
+    fileExists(fileName) {
+      const isCacheTarget = fileName.endsWith(path.sep + 'package.json');
+      if (isCacheTarget && cache.fileCache[fileName]) {
+        return true;
+      }
+
+      let exists = originalHost.fileExists(fileName);
+      if (exists) {
+        return exists;
+      }
+
+      // Virtual .svelte.tsx file
+      if (fileName.endsWith('.svelte.tsx') || fileName.endsWith('.svelte.jsx')) {
+        fileName = fileName.slice(0, -4); // remove .tsx or .jsx
+        exists = originalHost.fileExists(fileName);
+        return exists;
+      }
+
+      return false;
+    },
+    getSourceFile(fileName, languageVersion, onError) {
+      if (fileName.endsWith('.svelte.tsx') || fileName.endsWith('.svelte.jsx')) {
+        // .svelte file (`import ... from './path/to/file.svelte'`)
+
+        const realFileName = fileName.slice(0, -4); // remove .tsx or .jsx
+
+        const modifiedTime: Date | undefined = ts.sys.getModifiedTime
+          ? ts.sys.getModifiedTime(realFileName)
+          : undefined;
+        if (modifiedTime) {
+          const cachedModifiedTime = cache.filenameToModifiedTime[fileName];
+          if (cachedModifiedTime?.getTime() === modifiedTime.getTime()) {
+            return cache.filenameToSourceFile[fileName];
+          }
+        }
+
+        const content = originalHost.readFile(realFileName);
+        if (content === undefined) {
+          return;
+        }
+
+        const isTsFile = /<script\s+[^>]*?lang=('|")(ts|typescript)('|")/.test(content);
+
+        const tsx = svelte2tsx.svelte2tsx(content, {
+          version: VERSION,
+          isTsFile,
+          mode: 'dts',
+        });
+
+        const sourceFile = ts.createSourceFile(
+          fileName,
+          tsx.code,
+          languageVersion,
+          true,
+          isTsFile ? ts.ScriptKind.TS : ts.ScriptKind.JS // Set to 'JS' to enable TypeScript to parse JSDoc.
+        );
+
+        // update cache
+        cache.filenameToSourceFile[fileName] = sourceFile;
+        cache.filenameToModifiedTime[fileName] = modifiedTime;
+
+        return sourceFile;
+      } else {
+        // non-svelte file
+
+        let staticCaching = false;
+        staticCaching ||= fileName
+          .split(path.sep)
+          .some((part) => part.toLowerCase() === 'node_modules');
+
+        // We can significantly speed up the docgen process by caching source files.
+        const cachedSourceFile = cache.filenameToSourceFile[fileName];
+        if (cachedSourceFile && staticCaching) {
+          return cachedSourceFile;
+        }
+        const modifiedTime: Date | undefined = ts.sys.getModifiedTime
+          ? ts.sys.getModifiedTime(fileName)
+          : undefined;
+        if (modifiedTime) {
+          const cachedModifiedTime = cache.filenameToModifiedTime[fileName];
+          if (cachedModifiedTime?.getTime() === modifiedTime.getTime()) {
+            return cache.filenameToSourceFile[fileName];
+          }
+        }
+
+        const content = originalHost.readFile(fileName);
+        if (content === undefined) {
+          return;
+        }
+
+        const sourceFile = ts.createSourceFile(fileName, content, languageVersion, true);
+
+        // update cache
+        cache.filenameToSourceFile[fileName] = sourceFile;
+        cache.filenameToModifiedTime[fileName] = modifiedTime;
+
+        return sourceFile;
+      }
+    },
+    writeFile() {
+      // Write nothing
+    },
+  };
+
+  const program = ts.createProgram({
+    rootNames: Array.from(cache.rootNames),
+    options: cache.options,
+    host,
+    oldProgram: cache.oldProgram,
+  });
+  cache.oldProgram = program;
+
+  const checker = program.getTypeChecker();
+  const sourceFile = program.getSourceFile(targetFileName);
+  if (sourceFile === undefined) {
+    return {
+      props: [],
+    };
+  }
+
+  const propMap: Map<string, PropInfo> = new Map();
+
+  // Get render function generated by svelte2tsx
+  const renderFunction = sourceFile.statements.find((statement) => {
+    return ts.isFunctionDeclaration(statement) && statement.name?.text === 'render';
+  }) as ts.FunctionDeclaration | undefined;
+  if (renderFunction === undefined) {
+    return {
+      props: [],
+    };
+  }
+
+  let propsType: ts.Type | undefined;
+
+  const signature = checker.getSignatureFromDeclaration(renderFunction);
+
+  if (signature && signature.declaration) {
+    // Get props type from ReturnType<render>
+    const type = checker.getReturnTypeOfSignature(signature);
+
+    type.getProperties().forEach((retObjProp) => {
+      if (retObjProp.name === 'props') {
+        const decl = signature.getDeclaration();
+        propsType = checker.getTypeOfSymbolAtLocation(retObjProp, decl);
+        propsType.getProperties().forEach((prop) => {
+          const name = prop.getName();
+          let description =
+            ts.displayPartsToString(prop.getDocumentationComment(checker)) || undefined;
+
+          // Infer prop type
+          const propType = checker.getTypeOfSymbolAtLocation(prop, decl);
+
+          if (prop.valueDeclaration) {
+            // Comment from JSDoc '@type {type} comment'
+            const typeTag = ts.getJSDocTypeTag(prop.valueDeclaration);
+            if (typeTag?.comment) {
+              description = ((description || '') + '\n' + typeTag.comment).trim();
+            }
+          }
+
+          // Ignore props from svelte/elements.d.ts (HTMLAttributes, AriaAttributes and DOMAttributes).
+          // Some libraries use these for {...$$restProps}
+          if (
+            prop.valueDeclaration
+              ?.getSourceFile()
+              .fileName.includes('node_modules/svelte/elements.d.ts')
+          ) {
+            return;
+          }
+
+          // Check if this prop is optional
+          const optional = (prop.flags & ts.SymbolFlags.Optional) !== 0;
+          propMap.set(name, {
+            name,
+            optional,
+            description,
+            type: convertType(propType, checker),
+          });
+        });
+      }
+    });
+  }
+
+  renderFunction.body?.forEachChild((node) => {
+    if (ts.isVariableStatement(node)) {
+      node.declarationList.declarations.forEach((declaration) => {
+        // Extract default values from:
+        //     let { <name> = <defaultValue>, ... }: <propsType> = $props();
+
+        if (ts.isObjectBindingPattern(declaration.name)) {
+          const isPropsRune =
+            declaration.initializer &&
+            ts.isCallExpression(declaration.initializer) &&
+            ts.isIdentifier(declaration.initializer.expression) &&
+            declaration.initializer.expression.text === '$props';
+
+          const isPropsType =
+            declaration.type && propsType === checker.getTypeFromTypeNode(declaration.type);
+
+          if (isPropsRune || isPropsType) {
+            propsRuneUsed = true;
+            declaration.name.elements.forEach((element) => {
+              const name = element.name.getText();
+              const prop = propMap.get(name);
+              if (prop && element.initializer) {
+                const defaultValue = initializerToDefaultValue(element.initializer, checker);
+                if (defaultValue) {
+                  prop.defaultValue = defaultValue;
+                }
+              }
+            });
+          }
+        }
+
+        // Extract default values from:
+        //    export let <name> = <defaultValue>
+        if (
+          ts.isVariableDeclaration(declaration) &&
+          ts.isIdentifier(declaration.name) &&
+          propMap.has(declaration.name.text)
+        ) {
+          const prop = propMap.get(declaration.name.text);
+          if (prop && declaration.initializer) {
+            prop.optional = true;
+            const defaultValue = initializerToDefaultValue(declaration.initializer, checker);
+            if (defaultValue) {
+              prop.defaultValue = defaultValue;
+            }
+          }
+        }
+      });
+    }
+  });
+
+  return {
+    props: Array.from(propMap.values()),
+    propsRuneUsed,
+  };
+}
diff --git a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts
index a9dc886f69ee..c153bd9d8b28 100644
--- a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts
+++ b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts
@@ -6,10 +6,17 @@ import { logger } from 'storybook/internal/node-logger';
 import MagicString from 'magic-string';
 import { replace, typescript } from 'svelte-preprocess';
 import { preprocess } from 'svelte/compiler';
+import type {
+  JSDocType,
+  SvelteComponentDoc,
+  SvelteDataItem,
+  SvelteParserOptions,
+} from 'sveltedoc-parser';
 import svelteDoc from 'sveltedoc-parser';
-import type { SvelteComponentDoc, SvelteParserOptions } from 'sveltedoc-parser';
 import type { PluginOption } from 'vite';
 
+import { type Docgen, type Type, createDocgenCache, generateDocgen } from './generateDocgen';
+
 /*
  * Patch sveltedoc-parser internal options.
  * Waiting for a fix for https://github.com/alexprey/sveltedoc-parser/issues/87
@@ -62,6 +69,68 @@ function getNameFromFilename(filename: string) {
   return base[0].toUpperCase() + base.slice(1);
 }
 
+function transformToSvelteDocParserType(type: Type): JSDocType {
+  switch (type.type) {
+    case 'string':
+      return { kind: 'type', type: 'string', text: 'string' };
+    case 'number':
+      return { kind: 'type', type: 'number', text: 'number' };
+    case 'boolean':
+      return { kind: 'type', type: 'boolean', text: 'boolean' };
+    case 'symbol':
+      return { kind: 'type', type: 'other', text: 'symbol' };
+    case 'null':
+      return { kind: 'type', type: 'other', text: 'null' };
+    case 'undefined':
+      return { kind: 'type', type: 'other', text: 'undefined' };
+    case 'void':
+      return { kind: 'type', type: 'other', text: 'void' };
+    case 'any':
+      return { kind: 'type', type: 'any', text: 'any' };
+    case 'object':
+      return { kind: 'type', type: 'object', text: type.text };
+    case 'array':
+      return { kind: 'type', type: 'array', text: type.text };
+    case 'function':
+      return { kind: 'function', text: type.text };
+    case 'literal':
+      return { kind: 'const', type: typeof type.value, value: type.value, text: type.text };
+    case 'union': {
+      const nonNull = type.types.filter((t) => t.type !== 'null'); // ignore null
+      const text = nonNull.map((t): string => transformToSvelteDocParserType(t).text).join(' | ');
+      const types = nonNull.map((t) => transformToSvelteDocParserType(t));
+      return types.length === 1 ? types[0] : { kind: 'union', type: types, text };
+    }
+    case 'intersection': {
+      const text = type.types
+        .map((t): string => transformToSvelteDocParserType(t).text)
+        .join(' & ');
+      return { kind: 'type', type: 'intersection', text };
+    }
+  }
+}
+
+/** Mimic sveltedoc-parser's props data structure */
+function transformToSvelteDocParserDataItems(docgen: Docgen): SvelteDataItem[] {
+  return docgen.props.map((p) => {
+    const required = p.optional === false && p.defaultValue === undefined;
+    return {
+      name: p.name,
+      visibility: 'public',
+      description: p.description,
+      keywords: required ? [{ name: 'required', description: '' }] : [],
+      kind: 'let',
+      type: p.type ? transformToSvelteDocParserType(p.type) : undefined,
+      static: false,
+      readonly: false,
+      importPath: undefined,
+      originalName: undefined,
+      localName: undefined,
+      defaultValue: p.defaultValue ? p.defaultValue.text : undefined,
+    } satisfies SvelteDataItem;
+  });
+}
+
 export async function svelteDocgen(svelteOptions: Record<string, any> = {}): Promise<PluginOption> {
   const cwd = process.cwd();
   const { preprocess: preprocessOptions, logDocgen = false } = svelteOptions;
@@ -69,6 +138,7 @@ export async function svelteDocgen(svelteOptions: Record<string, any> = {}): Pro
   const { createFilter } = await import('vite');
 
   const filter = createFilter(include);
+  const sourceFileCache = createDocgenCache();
 
   let docPreprocessOptions: Parameters<typeof preprocess>[1] | undefined;
 
@@ -79,69 +149,82 @@ export async function svelteDocgen(svelteOptions: Record<string, any> = {}): Pro
         return undefined;
       }
 
-      if (preprocessOptions && !docPreprocessOptions) {
-        /*
-         * We can't use vitePreprocess() for the documentation
-         * because it uses esbuild which removes jsdoc.
-         *
-         * By default, only typescript is transpiled, and style tags are removed.
-         *
-         * Note: these preprocessors are only used to make the component
-         * compatible to sveltedoc-parser (no ts), not to compile
-         * the component.
-         */
-        docPreprocessOptions = [replace([[/<style.+<\/style>/gims, '']])];
+      const resource = relative(cwd, id);
 
-        try {
-          const ts = require.resolve('typescript');
-          if (ts) {
-            docPreprocessOptions.unshift(typescript());
+      // Get props information
+      const docgen = generateDocgen(resource, sourceFileCache);
+      const data = transformToSvelteDocParserDataItems(docgen);
+
+      let componentDoc: SvelteComponentDoc & { keywords?: string[] } = {};
+
+      if (!docgen.propsRuneUsed) {
+        // Retain sveltedoc-parser for backward compatibility, as it can extract slot information from HTML comments.
+        // See: https://github.com/alexprey/sveltedoc-parser/issues/61
+        //
+        // Note: Events are deprecated in Svelte 5, and slots cannot be used in runes mode.
+
+        if (preprocessOptions && !docPreprocessOptions) {
+          /*
+           * We can't use vitePreprocess() for the documentation
+           * because it uses esbuild which removes jsdoc.
+           *
+           * By default, only typescript is transpiled, and style tags are removed.
+           *
+           * Note: these preprocessors are only used to make the component
+           * compatible to sveltedoc-parser (no ts), not to compile
+           * the component.
+           */
+          docPreprocessOptions = [replace([[/<style.+<\/style>/gims, '']])];
+
+          try {
+            const ts = require.resolve('typescript');
+            if (ts) {
+              docPreprocessOptions.unshift(typescript());
+            }
+          } catch {
+            // this will error in JavaScript-only projects, this is okay
           }
-        } catch {
-          // this will error in JavaScript-only projects, this is okay
         }
-      }
-
-      const resource = relative(cwd, id);
-
-      let docOptions;
-      if (docPreprocessOptions) {
-        const rawSource = readFileSync(resource).toString();
 
-        const { code: fileContent } = await preprocess(rawSource, docPreprocessOptions, {
-          filename: resource,
-        });
+        let docOptions;
+        if (docPreprocessOptions) {
+          const rawSource = readFileSync(resource).toString();
+          const { code: fileContent } = await preprocess(rawSource, docPreprocessOptions, {
+            filename: resource,
+          });
+
+          docOptions = {
+            fileContent,
+          };
+        } else {
+          docOptions = { filename: resource };
+        }
 
-        docOptions = {
-          fileContent,
+        // set SvelteDoc options
+        const options: SvelteParserOptions = {
+          ...docOptions,
+          version: 3,
         };
-      } else {
-        docOptions = { filename: resource };
-      }
-
-      // set SvelteDoc options
-      const options: SvelteParserOptions = {
-        ...docOptions,
-        version: 3,
-      };
 
-      const s = new MagicString(src);
-
-      let componentDoc: SvelteComponentDoc & { keywords?: string[] };
-      try {
-        componentDoc = await svelteDoc.parse(options);
-      } catch (error: any) {
-        componentDoc = { keywords: [], data: [] };
-        if (logDocgen) {
-          logger.error(error);
+        try {
+          componentDoc = await svelteDoc.parse(options);
+        } catch (error: any) {
+          componentDoc = { keywords: [], data: [] };
+          if (logDocgen) {
+            logger.error(error);
+          }
         }
       }
 
+      // Always use props info from generateDocgen
+      componentDoc.data = data;
+
       // get filename for source content
       const file = basename(resource);
 
       componentDoc.name = basename(file);
 
+      const s = new MagicString(src);
       const componentName = getNameFromFilename(resource);
       s.append(`;${componentName}.__docgen = ${JSON.stringify(componentDoc)}`);
 
diff --git a/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/ButtonTypeScript.svelte b/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/ButtonTypeScript.svelte
deleted file mode 100644
index cd00f38a3d57..000000000000
--- a/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/ButtonTypeScript.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-  /**
-   * @component Button TypeScript
-   * @wrapper
-   */
-  import { global as globalThis } from '@storybook/global';
-  // @ts-ignore
-  const Button = globalThis.Components?.Button;
-
-  /**
-   * Rounds the button
-   */
-  export let primary: boolean = false;
-
-  /**
-   * Displays the count
-   */
-  export let count: number = 0;
-
-  /**
-   * Button text
-   * @slot
-   */
-  export let text: string = 'You clicked';
-
-  function handleClick(_event: MouseEvent) {
-    count += 1;
-  }
-</script>
-
-<h1>Button TypeScript</h1>
-
-<Button {primary} on:click on:click={handleClick} label="{text}: {count}" />
-
-<p>A little text to show this is a view.</p>
-<p>If we need to test components in a Svelte environment, for instance to test slot behaviour,</p>
-<p>then wrapping the component up in a view</p>
-<p>made just for the story is the simplest way to achieve this.</p>
diff --git a/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/DocsTS.svelte b/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/DocsTS.svelte
new file mode 100644
index 000000000000..62897f032afa
--- /dev/null
+++ b/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/DocsTS.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+  import type { LiteralNumbers, LiteralStrings } from './types';
+  import { MyEnum } from './types';
+
+  type MyObject = {
+    foo: string;
+    bar: number;
+  };
+
+  /**
+   * Boolean
+   */
+  export let boolean: boolean = true;
+  /**
+   * String
+   */
+  export let string: string = 'default';
+  /**
+   * String (required)
+   */
+  export let stringRequired: string;
+  /**
+   * Number
+   */
+  export let number: number = 123;
+  /**
+   * True literal
+   */
+  export let trueLiteral: true | undefined = undefined;
+  /**
+   * Symbol
+   */
+  export let symbol: symbol | undefined = undefined;
+  /**
+   * Null
+   */
+  export let nullValue: null = null;
+  /**
+   * Undefined
+   */
+  export let undefinedValue: undefined = undefined;
+  /**
+   * Any
+   */
+  export let any: any = null;
+  /**
+   * Date
+   */
+  export let date: Date = new Date('20 Jan 1983');
+  /**
+   * Array of numbers
+   */
+  export let arrayOfNumbers: number[] = [1, 20, 300];
+  /**
+   * Enum
+   */
+  export let enumValue: MyEnum = MyEnum.FOO;
+  /**
+   * Union of literal strings
+   */
+  export let unionLiteralStrings: LiteralStrings = 'apple';
+  /**
+   * Union of literal numbers
+   */
+  export let unionLiteralNumbers: LiteralNumbers = 100;
+  /**
+   * Object
+   */
+  export let object: MyObject | undefined = undefined;
+  /**
+   * Inline object
+   */
+  export let inlineObject:
+    | {
+        foo: string;
+        bar: number;
+      }
+    | undefined = undefined;
+  /**
+   * Record
+   */
+  export let record: Record<string, number> = { a: 1, b: 2 };
+  /**
+   * Union of types
+   */
+  export let unionTypes: number | string = 123;
+  /**
+   * Intersection of types
+   */
+  export let intersection: ({ a: number } & { b: string }) | undefined = undefined;
+  /**
+   * Event callback function
+   */
+  export let func: (event: MouseEvent) => number = () => 10;
+</script>
+
+<div>Docs: TS</div>
diff --git a/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/docs-ts.stories.js b/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/docs-ts.stories.js
new file mode 100644
index 000000000000..0124aa9b58f4
--- /dev/null
+++ b/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/docs-ts.stories.js
@@ -0,0 +1,10 @@
+import DocsTS from './DocsTS.svelte';
+
+export default {
+  title: 'stories/renderers/svelte/docs-ts',
+  component: DocsTS,
+  args: {},
+  tags: ['autodocs'],
+};
+
+export const Primary = {};
diff --git a/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/ts-docs.stories.js b/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/ts-docs.stories.js
deleted file mode 100644
index f33428810ee9..000000000000
--- a/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/ts-docs.stories.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import ButtonTypescript from './ButtonTypeScript.svelte';
-
-export default {
-  title: 'stories/renderers/svelte/ts-docs',
-  component: ButtonTypescript,
-  args: {
-    primary: true,
-  },
-  tags: ['autodocs'],
-};
-
-export const Primary = {};
diff --git a/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/types.ts b/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/types.ts
new file mode 100644
index 000000000000..199b60cbba22
--- /dev/null
+++ b/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/types.ts
@@ -0,0 +1,7 @@
+export type LiteralNumbers = 100 | 1000 | 10000;
+export type LiteralStrings = 'apple' | 'grape' | 'orange';
+
+export enum MyEnum {
+  FOO = 'foo',
+  BAR = 'bar',
+}
diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json
index 4a6a2a541cb0..12bc1d7d84eb 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -52,13 +52,13 @@
     "@storybook/svelte": "workspace:*"
   },
   "devDependencies": {
-    "svelte": "^4.0.0",
-    "svelte-loader": "^3.1.9",
+    "svelte": "^5.0.5",
+    "svelte-loader": "^3.2.4",
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
     "storybook": "workspace:^",
-    "svelte": "^4.0.0 || ^5.0.0-next.65",
+    "svelte": "^4.0.0 || ^5.0.0",
     "svelte-loader": "*"
   },
   "engines": {
diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json
index 54e060c0191e..6e90749fedf3 100644
--- a/code/frameworks/sveltekit/package.json
+++ b/code/frameworks/sveltekit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/sveltekit",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook for SvelteKit",
   "keywords": [
     "storybook",
@@ -70,8 +70,8 @@
   },
   "peerDependencies": {
     "storybook": "workspace:^",
-    "svelte": "^4.0.0 || ^5.0.0-next.65",
-    "vite": "^4.0.0 || ^5.0.0"
+    "svelte": "^4.0.0 || ^5.0.0",
+    "vite": "^4.0.0 || ^5.0.0 || ^6.0.0"
   },
   "engines": {
     "node": ">=18.0.0"
diff --git a/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts b/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts
index 8831e9217052..98ceb6cc7e5c 100644
--- a/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts
+++ b/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts
@@ -1,16 +1,21 @@
-import { resolve } from 'node:path';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
 
 import type { Plugin } from 'vite';
 
+// @ts-expect-error We are building for CJS and ESM, so we have to use import.meta.url for the ESM output
+const filename = __filename ?? fileURLToPath(import.meta.url);
+const dir = dirname(filename);
+
 export async function mockSveltekitStores() {
   return {
     name: 'storybook:sveltekit-mock-stores',
     config: () => ({
       resolve: {
         alias: {
-          '$app/forms': resolve(__dirname, '../src/mocks/app/forms.ts'),
-          '$app/navigation': resolve(__dirname, '../src/mocks/app/navigation.ts'),
-          '$app/stores': resolve(__dirname, '../src/mocks/app/stores.ts'),
+          '$app/forms': resolve(dir, '../src/mocks/app/forms.ts'),
+          '$app/navigation': resolve(dir, '../src/mocks/app/navigation.ts'),
+          '$app/stores': resolve(dir, '../src/mocks/app/stores.ts'),
         },
       },
     }),
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/ButtonTypeScript.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/ButtonTypeScript.svelte
deleted file mode 100644
index cd00f38a3d57..000000000000
--- a/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/ButtonTypeScript.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-  /**
-   * @component Button TypeScript
-   * @wrapper
-   */
-  import { global as globalThis } from '@storybook/global';
-  // @ts-ignore
-  const Button = globalThis.Components?.Button;
-
-  /**
-   * Rounds the button
-   */
-  export let primary: boolean = false;
-
-  /**
-   * Displays the count
-   */
-  export let count: number = 0;
-
-  /**
-   * Button text
-   * @slot
-   */
-  export let text: string = 'You clicked';
-
-  function handleClick(_event: MouseEvent) {
-    count += 1;
-  }
-</script>
-
-<h1>Button TypeScript</h1>
-
-<Button {primary} on:click on:click={handleClick} label="{text}: {count}" />
-
-<p>A little text to show this is a view.</p>
-<p>If we need to test components in a Svelte environment, for instance to test slot behaviour,</p>
-<p>then wrapping the component up in a view</p>
-<p>made just for the story is the simplest way to achieve this.</p>
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/DocsJSDocRunes.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/DocsJSDocRunes.svelte
new file mode 100644
index 000000000000..fc5044f1a46d
--- /dev/null
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/DocsJSDocRunes.svelte
@@ -0,0 +1,55 @@
+<script>
+  /**
+   * @typedef {Object} MyObject
+   * @property {string} foo
+   * @property {number} bar
+   */
+
+  /**
+   * @typedef {Object} MyProps
+   * @property {boolean=} boolean Boolean
+   * @property {string=} string String
+   * @property {string} stringRequired String (required)
+   * @property {number=} number Number
+   * @property {true=} trueLiteral True literal
+   * @property {symbol=} symbol Symbol
+   * @property {null=} nullValue Null
+   * @property {undefined=} undefinedValue Undefined
+   * @property {any=} any Any
+   * @property {import("./types").LiteralStrings=} unionLiteralStrings Union of literal strings
+   * @property {import("./types").LiteralNumbers=} unionLiteralNumbers Union of literal numbers
+   * @property {MyObject=} object Object
+   * @property {{ foo: string, bar: number }=} inlineObject Inline object
+   * @property {Record<string, number> =} record Record
+   * @property {Date=} date Date
+   * @property {number | string =} unionTypes Union of types
+   * @property {{ a: number } & { b: string } =} intersection Intersection of types
+   * @property {import("svelte").Snippet} children Snippet contents
+   * @property {(event: MouseEvent) => number =} func Event callback function
+   */
+
+  /** @type {MyProps} */
+  let {
+    boolean = true,
+    string = 'default',
+    stringRequired,
+    number = 123,
+    trueLiteral = undefined,
+    symbol = undefined,
+    nullValue = null,
+    undefinedValue = undefined,
+    any = undefined,
+    unionLiteralStrings = 'apple',
+    unionLiteralNumbers = 1000,
+    object = undefined,
+    inlineObject = undefined,
+    record = { a: 1, b: 2 },
+    date = new Date('20 Jan 1983'),
+    unionTypes = 123,
+    intersection = undefined,
+    children,
+    func = () => 10,
+  } = $props();
+</script>
+
+<div>Docs: JSDoc + Runes</div>
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/DocsTSInlinePropTypes.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/DocsTSInlinePropTypes.svelte
new file mode 100644
index 000000000000..3bc777098f63
--- /dev/null
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/DocsTSInlinePropTypes.svelte
@@ -0,0 +1,114 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { LiteralNumbers, LiteralStrings } from './types';
+  import { MyEnum } from './types';
+
+  type MyObject = {
+    foo: string;
+    bar: number;
+  };
+
+  let {
+    boolean = true,
+    string = 'default',
+    stringRequired,
+    number = 123,
+    nullValue = null,
+    arrayOfNumbers = [1, 20, 300],
+    enumValue = MyEnum.FOO,
+    record = { a: 1, b: 2 },
+    date = new Date('20 Jan 1983'),
+    unionTypes = 123,
+    func = () => 10,
+  }: {
+    /**
+     * Boolean
+     */
+    boolean?: boolean;
+    /**
+     * String
+     */
+    string?: string;
+    /**
+     * String (required)
+     */
+    stringRequired: string;
+    /**
+     * Number
+     */
+    number?: number;
+    /**
+     * True literal
+     */
+    trueLiteral?: true;
+    /**
+     * Symbol
+     */
+    symbol?: symbol;
+    /**
+     * Null
+     */
+    nullValue?: null;
+    /**
+     * Undefined
+     */
+    undefinedValue?: undefined;
+    /**
+     * Any
+     */
+    any?: any;
+    /**
+     * Array of numbers
+     */
+    arrayOfNumbers?: number[];
+    /**
+     * Enum
+     */
+    enumValue?: MyEnum;
+    /**
+     * Union of literal strings
+     */
+    unionLiteralStrings?: LiteralStrings;
+    /**
+     * Union of literal numbers
+     */
+    unionLiteralNumbers?: LiteralNumbers;
+    /**
+     * Object
+     */
+    object?: MyObject;
+    /**
+     * Inline object
+     */
+    inlineObject?: {
+      foo: string;
+      bar: number;
+    };
+    /**
+     * Record
+     */
+    record?: Record<string, number>;
+    /**
+     * Date
+     */
+    date?: Date;
+    /**
+     * Union of types
+     */
+    unionTypes?: number | string;
+    /**
+     * Intersection of types
+     */
+    intersection?: { a: number } & { b: string };
+    /**
+     * Snippet contents
+     */
+    children: Snippet;
+    /**
+     * Event callback function
+     */
+    func?: (event: MouseEvent) => number;
+  } = $props();
+</script>
+
+<div>Docs: TS + Runes (inline prop types)</div>
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/DocsTSLegacy.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/DocsTSLegacy.svelte
new file mode 100644
index 000000000000..4498eefccbf4
--- /dev/null
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/DocsTSLegacy.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { LiteralNumbers, LiteralStrings } from './types';
+  import { MyEnum } from './types';
+
+  type MyObject = {
+    foo: string;
+    bar: number;
+  };
+
+  /**
+   * Boolean
+   */
+  export let boolean: boolean = true;
+  /**
+   * String
+   */
+  export let string: string = 'default';
+  /**
+   * String (required)
+   */
+  export let stringRequired: string;
+  /**
+   * Number
+   */
+  export let number: number = 123;
+  /**
+   * True literal
+   */
+  export let trueLiteral: true | undefined = undefined;
+  /**
+   * Symbol
+   */
+  export let symbol: symbol | undefined = undefined;
+  /**
+   * Null
+   */
+  export let nullValue: null = null;
+  /**
+   * Undefined
+   */
+  export let undefinedValue: undefined = undefined;
+  /**
+   * Any
+   */
+  export let any: any = null;
+  /**
+   * Date
+   */
+  export let date: Date = new Date('20 Jan 1983');
+  /**
+   * Array of numbers
+   */
+  export let arrayOfNumbers: number[] = [1, 20, 300];
+  /**
+   * Enum
+   */
+  export let enumValue: MyEnum = MyEnum.FOO;
+  /**
+   * Union of literal strings
+   */
+  export let unionLiteralStrings: LiteralStrings = 'apple';
+  /**
+   * Union of literal numbers
+   */
+  export let unionLiteralNumbers: LiteralNumbers = 1000;
+  /**
+   * Object
+   */
+  export let object: MyObject | undefined = undefined;
+  /**
+   * Inline object
+   */
+  export let inlineObject:
+    | {
+        foo: string;
+        bar: number;
+      }
+    | undefined = undefined;
+  /**
+   * Record
+   */
+  export let record: Record<string, number> = { a: 1, b: 2 };
+  /**
+   * Union of types
+   */
+  export let unionTypes: number | string = 123;
+  /**
+   * Intersection of types
+   */
+  export let intersection: ({ a: number } & { b: string }) | undefined = undefined;
+  /**
+   * Snippet contents
+   */
+  export let children: Snippet;
+  /**
+   * Event callback function
+   */
+  export let func: (event: MouseEvent) => number = () => 10;
+</script>
+
+<div>Docs: TS (Non-runes mode)</div>
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/DocsTSReferencedPropTypes.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/DocsTSReferencedPropTypes.svelte
new file mode 100644
index 000000000000..7f8107819055
--- /dev/null
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/DocsTSReferencedPropTypes.svelte
@@ -0,0 +1,118 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { LiteralNumbers, LiteralStrings } from './types';
+  import { MyEnum } from './types';
+
+  type MyObject = {
+    foo: string;
+    bar: number;
+  };
+
+  type PropsA = {
+    /**
+     * Boolean
+     */
+    boolean?: boolean;
+    /**
+     * String
+     */
+    string?: string;
+    /**
+     * String (required)
+     */
+    stringRequired: string;
+    /**
+     * Number
+     */
+    number?: number;
+  };
+  type PropsB = {
+    /**
+     * True literal
+     */
+    trueLiteral?: true;
+    /**
+     * Symbol
+     */
+    symbol?: symbol;
+    /**
+     * Null
+     */
+    nullValue?: null;
+    /**
+     * Undefined
+     */
+    undefinedValue?: undefined;
+    /**
+     * Any
+     */
+    any?: any;
+    /**
+     * Array of numbers
+     */
+    arrayOfNumbers?: number[];
+    /**
+     * Enum
+     */
+    enumValue?: MyEnum;
+    /**
+     * Union of literal strings
+     */
+    unionLiteralStrings?: LiteralStrings;
+    /**
+     * Union of literal numbers
+     */
+    unionLiteralNumbers?: LiteralNumbers;
+    /**
+     * Object
+     */
+    object?: MyObject;
+    /**
+     * Inline object
+     */
+    inlineObject?: {
+      foo: string;
+      bar: number;
+    };
+    /**
+     * Record
+     */
+    record?: Record<string, number>;
+    /**
+     * Date
+     */
+    date?: Date;
+    /**
+     * Union of types
+     */
+    unionTypes?: number | string;
+    /**
+     * Intersection of types
+     */
+    intersection?: { a: number } & { b: string };
+    /**
+     * Snippet contents
+     */
+    children: Snippet;
+    /**
+     * Event callback function
+     */
+    func?: (event: MouseEvent) => number;
+  };
+
+  let {
+    boolean = true,
+    string = 'default',
+    stringRequired,
+    number = 123,
+    nullValue = null,
+    arrayOfNumbers = [1, 20, 300],
+    enumValue = MyEnum.FOO,
+    record = { a: 1, b: 2 },
+    date = new Date('20 Jan 1983'),
+    unionTypes = 123,
+    func = () => 10,
+  }: PropsA & PropsB = $props();
+</script>
+
+<div>Docs: TS + Runes (referenced prop types)</div>
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/docs-jsdoc-runes.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/docs-jsdoc-runes.stories.js
new file mode 100644
index 000000000000..ce9d9d95cd49
--- /dev/null
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/docs-jsdoc-runes.stories.js
@@ -0,0 +1,10 @@
+import DocsJSDocRunes from './DocsJSDocRunes.svelte';
+
+export default {
+  title: 'stories/renderers/svelte/docs-jsdoc-runes',
+  component: DocsJSDocRunes,
+  args: {},
+  tags: ['autodocs'],
+};
+
+export const Primary = {};
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/docs-ts-inline-prop-types.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/docs-ts-inline-prop-types.stories.js
new file mode 100644
index 000000000000..d3e956b5df41
--- /dev/null
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/docs-ts-inline-prop-types.stories.js
@@ -0,0 +1,10 @@
+import DocsTSInlinePropTypes from './DocsTSInlinePropTypes.svelte';
+
+export default {
+  title: 'stories/renderers/svelte/docs-ts-inline-prop-types',
+  component: DocsTSInlinePropTypes,
+  args: {},
+  tags: ['autodocs'],
+};
+
+export const Primary = {};
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/docs-ts-referenced-prop-types.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/docs-ts-referenced-prop-types.stories.js
new file mode 100644
index 000000000000..3e06c350f850
--- /dev/null
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/docs-ts-referenced-prop-types.stories.js
@@ -0,0 +1,10 @@
+import DocsTSReferencedPropTypes from './DocsTSReferencedPropTypes.svelte';
+
+export default {
+  title: 'stories/renderers/svelte/docs-ts-referenced-prop-types',
+  component: DocsTSReferencedPropTypes,
+  args: {},
+  tags: ['autodocs'],
+};
+
+export const Primary = {};
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/docs-ts.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/docs-ts.stories.js
new file mode 100644
index 000000000000..ec3a5e044b97
--- /dev/null
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/docs-ts.stories.js
@@ -0,0 +1,10 @@
+import DocsTSLegacy from './DocsTSLegacy.svelte';
+
+export default {
+  title: 'stories/renderers/svelte/docs-ts',
+  component: DocsTSLegacy,
+  args: {},
+  tags: ['autodocs'],
+};
+
+export const Primary = {};
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/ts-docs.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/ts-docs.stories.js
deleted file mode 100644
index f33428810ee9..000000000000
--- a/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/ts-docs.stories.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import ButtonTypescript from './ButtonTypeScript.svelte';
-
-export default {
-  title: 'stories/renderers/svelte/ts-docs',
-  component: ButtonTypescript,
-  args: {
-    primary: true,
-  },
-  tags: ['autodocs'],
-};
-
-export const Primary = {};
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/types.ts b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/types.ts
new file mode 100644
index 000000000000..199b60cbba22
--- /dev/null
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/types.ts
@@ -0,0 +1,7 @@
+export type LiteralNumbers = 100 | 1000 | 10000;
+export type LiteralStrings = 'apple' | 'grape' | 'orange';
+
+export enum MyEnum {
+  FOO = 'foo',
+  BAR = 'bar',
+}
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/ButtonTypeScript.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/ButtonTypeScript.svelte
deleted file mode 100644
index cd00f38a3d57..000000000000
--- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/ButtonTypeScript.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script lang="ts">
-  /**
-   * @component Button TypeScript
-   * @wrapper
-   */
-  import { global as globalThis } from '@storybook/global';
-  // @ts-ignore
-  const Button = globalThis.Components?.Button;
-
-  /**
-   * Rounds the button
-   */
-  export let primary: boolean = false;
-
-  /**
-   * Displays the count
-   */
-  export let count: number = 0;
-
-  /**
-   * Button text
-   * @slot
-   */
-  export let text: string = 'You clicked';
-
-  function handleClick(_event: MouseEvent) {
-    count += 1;
-  }
-</script>
-
-<h1>Button TypeScript</h1>
-
-<Button {primary} on:click on:click={handleClick} label="{text}: {count}" />
-
-<p>A little text to show this is a view.</p>
-<p>If we need to test components in a Svelte environment, for instance to test slot behaviour,</p>
-<p>then wrapping the component up in a view</p>
-<p>made just for the story is the simplest way to achieve this.</p>
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/DocsTS.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/DocsTS.svelte
new file mode 100644
index 000000000000..62897f032afa
--- /dev/null
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/DocsTS.svelte
@@ -0,0 +1,97 @@
+<script lang="ts">
+  import type { LiteralNumbers, LiteralStrings } from './types';
+  import { MyEnum } from './types';
+
+  type MyObject = {
+    foo: string;
+    bar: number;
+  };
+
+  /**
+   * Boolean
+   */
+  export let boolean: boolean = true;
+  /**
+   * String
+   */
+  export let string: string = 'default';
+  /**
+   * String (required)
+   */
+  export let stringRequired: string;
+  /**
+   * Number
+   */
+  export let number: number = 123;
+  /**
+   * True literal
+   */
+  export let trueLiteral: true | undefined = undefined;
+  /**
+   * Symbol
+   */
+  export let symbol: symbol | undefined = undefined;
+  /**
+   * Null
+   */
+  export let nullValue: null = null;
+  /**
+   * Undefined
+   */
+  export let undefinedValue: undefined = undefined;
+  /**
+   * Any
+   */
+  export let any: any = null;
+  /**
+   * Date
+   */
+  export let date: Date = new Date('20 Jan 1983');
+  /**
+   * Array of numbers
+   */
+  export let arrayOfNumbers: number[] = [1, 20, 300];
+  /**
+   * Enum
+   */
+  export let enumValue: MyEnum = MyEnum.FOO;
+  /**
+   * Union of literal strings
+   */
+  export let unionLiteralStrings: LiteralStrings = 'apple';
+  /**
+   * Union of literal numbers
+   */
+  export let unionLiteralNumbers: LiteralNumbers = 100;
+  /**
+   * Object
+   */
+  export let object: MyObject | undefined = undefined;
+  /**
+   * Inline object
+   */
+  export let inlineObject:
+    | {
+        foo: string;
+        bar: number;
+      }
+    | undefined = undefined;
+  /**
+   * Record
+   */
+  export let record: Record<string, number> = { a: 1, b: 2 };
+  /**
+   * Union of types
+   */
+  export let unionTypes: number | string = 123;
+  /**
+   * Intersection of types
+   */
+  export let intersection: ({ a: number } & { b: string }) | undefined = undefined;
+  /**
+   * Event callback function
+   */
+  export let func: (event: MouseEvent) => number = () => 10;
+</script>
+
+<div>Docs: TS</div>
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/docs-ts.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/docs-ts.stories.js
new file mode 100644
index 000000000000..0124aa9b58f4
--- /dev/null
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/docs-ts.stories.js
@@ -0,0 +1,10 @@
+import DocsTS from './DocsTS.svelte';
+
+export default {
+  title: 'stories/renderers/svelte/docs-ts',
+  component: DocsTS,
+  args: {},
+  tags: ['autodocs'],
+};
+
+export const Primary = {};
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/ts-docs.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/ts-docs.stories.js
deleted file mode 100644
index f33428810ee9..000000000000
--- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/ts-docs.stories.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import ButtonTypescript from './ButtonTypeScript.svelte';
-
-export default {
-  title: 'stories/renderers/svelte/ts-docs',
-  component: ButtonTypescript,
-  args: {
-    primary: true,
-  },
-  tags: ['autodocs'],
-};
-
-export const Primary = {};
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/types.ts b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/types.ts
new file mode 100644
index 000000000000..199b60cbba22
--- /dev/null
+++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/types.ts
@@ -0,0 +1,7 @@
+export type LiteralNumbers = 100 | 1000 | 10000;
+export type LiteralStrings = 'apple' | 'grape' | 'orange';
+
+export enum MyEnum {
+  FOO = 'foo',
+  BAR = 'bar',
+}
diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json
index 92d6ab4d41fa..c863dc5bbfe9 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -68,7 +68,7 @@
   },
   "peerDependencies": {
     "storybook": "workspace:^",
-    "vite": "^4.0.0 || ^5.0.0"
+    "vite": "^4.0.0 || ^5.0.0 || ^6.0.0"
   },
   "engines": {
     "node": ">=18.0.0"
diff --git a/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts b/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts
index aea3d269a1e3..82c9f4dc3109 100644
--- a/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts
+++ b/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts
@@ -3,7 +3,7 @@ import { dirname, join, parse, relative, resolve } from 'node:path';
 
 import findPackageJson from 'find-package-json';
 import MagicString from 'magic-string';
-import type { PluginOption } from 'vite';
+import type { ModuleNode, Plugin } from 'vite';
 import {
   type ComponentMeta,
   type MetaCheckerOptions,
@@ -21,12 +21,11 @@ type MetaSource = {
 } & ComponentMeta &
   MetaCheckerOptions['schema'];
 
-export async function vueComponentMeta(tsconfigPath = 'tsconfig.json'): Promise<PluginOption> {
+export async function vueComponentMeta(tsconfigPath = 'tsconfig.json'): Promise<Plugin> {
   const { createFilter } = await import('vite');
 
   // exclude stories, virtual modules and storybook internals
-  const exclude =
-    /\.stories\.(ts|tsx|js|jsx)$|^\0\/virtual:|^\/virtual:|^\/sb-preview\/|\.storybook\/.*\.(ts|js)$/;
+  const exclude = /\.stories\.(ts|tsx|js|jsx)$|^\0\/virtual:|^\/virtual:|\.storybook\/.*\.(ts|js)$/;
   const include = /\.(vue|ts|js|tsx|jsx)$/;
   const filter = createFilter(include, exclude);
 
@@ -146,6 +145,20 @@ export async function vueComponentMeta(tsconfigPath = 'tsconfig.json'): Promise<
         return undefined;
       }
     },
+    // handle hot updates to update the component meta on file changes
+    async handleHotUpdate({ file, read, server, modules, timestamp }) {
+      const content = await read();
+      checker.updateFile(file, content);
+      // Invalidate modules manually
+      const invalidatedModules = new Set<ModuleNode>();
+
+      for (const mod of modules) {
+        server.moduleGraph.invalidateModule(mod, invalidatedModules, timestamp, true);
+      }
+
+      server.ws.send({ type: 'full-reload' });
+      return [];
+    },
   };
 }
 
diff --git a/code/frameworks/vue3-vite/src/plugins/vue-docgen.ts b/code/frameworks/vue3-vite/src/plugins/vue-docgen.ts
index 502264f88f14..c8b9268d0f46 100644
--- a/code/frameworks/vue3-vite/src/plugins/vue-docgen.ts
+++ b/code/frameworks/vue3-vite/src/plugins/vue-docgen.ts
@@ -1,8 +1,8 @@
 import MagicString from 'magic-string';
-import type { PluginOption } from 'vite';
+import type { Plugin } from 'vite';
 import { parse } from 'vue-docgen-api';
 
-export async function vueDocgen(): Promise<PluginOption> {
+export async function vueDocgen(): Promise<Plugin> {
   const { createFilter } = await import('vite');
 
   const include = /\.(vue)$/;
diff --git a/code/frameworks/vue3-vite/src/plugins/vue-template.ts b/code/frameworks/vue3-vite/src/plugins/vue-template.ts
index 325bc20341b4..22751c20222b 100644
--- a/code/frameworks/vue3-vite/src/plugins/vue-template.ts
+++ b/code/frameworks/vue3-vite/src/plugins/vue-template.ts
@@ -1,6 +1,6 @@
 import type { Plugin } from 'vite';
 
-export async function templateCompilation() {
+export async function templateCompilation(): Promise<Plugin> {
   return {
     name: 'storybook:vue-template-compilation',
     config: () => ({
diff --git a/code/frameworks/vue3-vite/src/preset.ts b/code/frameworks/vue3-vite/src/preset.ts
index 574ab0a04ad3..d565b947587c 100644
--- a/code/frameworks/vue3-vite/src/preset.ts
+++ b/code/frameworks/vue3-vite/src/preset.ts
@@ -2,7 +2,7 @@ import { dirname, join } from 'node:path';
 
 import type { PresetProperty } from 'storybook/internal/types';
 
-import type { PluginOption } from 'vite';
+import type { Plugin } from 'vite';
 
 import { vueComponentMeta } from './plugins/vue-component-meta';
 import { vueDocgen } from './plugins/vue-docgen';
@@ -18,11 +18,11 @@ export const core: PresetProperty<'core'> = {
 };
 
 export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) => {
-  const plugins: PluginOption[] = [templateCompilation()];
+  const plugins: Plugin[] = [await templateCompilation()];
 
   const framework = await options.presets.apply('framework');
   const frameworkOptions: FrameworkOptions =
-    typeof framework === 'string' ? {} : framework.options ?? {};
+    typeof framework === 'string' ? {} : (framework.options ?? {});
 
   const docgen = resolveDocgenOptions(frameworkOptions.docgen);
 
diff --git a/code/frameworks/vue3-vite/src/vite-plugin.ts b/code/frameworks/vue3-vite/src/vite-plugin.ts
index eb2a3345e937..8b90ffe73ffa 100644
--- a/code/frameworks/vue3-vite/src/vite-plugin.ts
+++ b/code/frameworks/vue3-vite/src/vite-plugin.ts
@@ -1,5 +1,7 @@
+import type { Plugin } from 'vite';
+
 import { templateCompilation } from './plugins/vue-template';
 
-export const storybookVuePlugin = () => {
+export const storybookVuePlugin = (): Promise<Plugin>[] => {
   return [templateCompilation()];
 };
diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json
index 554f5d92370d..bcb49a1fb6e2 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "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 2f617925837b..1000ee226865 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "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 b6ff71516042..1922e8bb0c28 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "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 ca92f5fffac7..d815acc1a453 100644
--- a/code/lib/blocks/package.json
+++ b/code/lib/blocks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/blocks",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook Doc Blocks",
   "keywords": [
     "storybook"
@@ -43,26 +43,22 @@
     "prep": "jiti ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "^0.1.11",
-    "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.10",
-    "@types/lodash": "^4.14.167",
-    "color-convert": "^2.0.1",
-    "dequal": "^2.0.2",
-    "lodash": "^4.17.21",
-    "markdown-to-jsx": "^7.4.5",
-    "memoizerific": "^1.11.3",
-    "polished": "^4.2.2",
-    "react-colorful": "^5.1.2",
-    "telejson": "^7.2.0",
-    "ts-dedent": "^2.0.0",
-    "util-deprecate": "^1.0.2"
+    "@storybook/csf": "0.1.12",
+    "@storybook/icons": "^1.2.12",
+    "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
     "@storybook/addon-actions": "workspace:*",
     "@storybook/react": "workspace:*",
     "@storybook/test": "workspace:*",
     "@types/color-convert": "^2.0.0",
+    "color-convert": "^2.0.1",
+    "es-toolkit": "^1.22.0",
+    "markdown-to-jsx": "^7.4.5",
+    "memoizerific": "^1.11.3",
+    "polished": "^4.2.2",
+    "react-colorful": "^5.1.2",
+    "telejson": "^7.2.0",
     "tocbot": "^4.20.1"
   },
   "peerDependencies": {
diff --git a/code/lib/blocks/src/blocks/Canvas.stories.tsx b/code/lib/blocks/src/blocks/Canvas.stories.tsx
index 4a7e25f6706d..987e28678a71 100644
--- a/code/lib/blocks/src/blocks/Canvas.stories.tsx
+++ b/code/lib/blocks/src/blocks/Canvas.stories.tsx
@@ -93,10 +93,7 @@ export const PropAdditionalActions: Story = {
       {
         title: 'Go to documentation',
         onClick: () => {
-          window.open(
-            'https://storybook.js.org/docs/react/essentials/controls#annotation',
-            '_blank'
-          );
+          window.open('https://storybook.js.org/docs/essentials/controls#annotation', '_blank');
         },
       },
     ],
diff --git a/code/lib/blocks/src/blocks/DocsContainer.tsx b/code/lib/blocks/src/blocks/DocsContainer.tsx
index 3fb52a32ca53..be6649113e14 100644
--- a/code/lib/blocks/src/blocks/DocsContainer.tsx
+++ b/code/lib/blocks/src/blocks/DocsContainer.tsx
@@ -5,8 +5,6 @@ import type { ThemeVars } from 'storybook/internal/theming';
 import { ThemeProvider, ensure as ensureTheme } from 'storybook/internal/theming';
 import type { Renderer } from 'storybook/internal/types';
 
-import { global } from '@storybook/global';
-
 import { DocsPageWrapper } from '../components';
 import { TableOfContents } from '../components/TableOfContents';
 import type { DocsContextProps } from './DocsContext';
@@ -14,7 +12,7 @@ import { DocsContext } from './DocsContext';
 import { SourceContainer } from './SourceContainer';
 import { scrollToElement } from './utils';
 
-const { document, window: globalWindow } = global;
+const { document, window: globalWindow } = globalThis;
 
 export interface DocsContainerProps<TFramework extends Renderer = Renderer> {
   context: DocsContextProps<TFramework>;
diff --git a/code/lib/blocks/src/blocks/DocsContext.ts b/code/lib/blocks/src/blocks/DocsContext.ts
index b7680f920c5d..850b0ccddd94 100644
--- a/code/lib/blocks/src/blocks/DocsContext.ts
+++ b/code/lib/blocks/src/blocks/DocsContext.ts
@@ -4,8 +4,6 @@ import { createContext } from 'react';
 
 import type { DocsContextProps, Renderer } from 'storybook/internal/types';
 
-import { global } from '@storybook/global';
-
 export type { DocsContextProps };
 
 // We add DocsContext to window. The reason is that in case DocsContext.ts is
@@ -13,11 +11,11 @@ export type { DocsContextProps };
 // we will have multiple DocsContext definitions - leading to lost context in
 // the React component tree.
 // This was specifically a problem with the Vite builder.
-if (global && global.__DOCS_CONTEXT__ === undefined) {
-  global.__DOCS_CONTEXT__ = createContext(null);
-  global.__DOCS_CONTEXT__.displayName = 'DocsContext';
+if (globalThis && globalThis.__DOCS_CONTEXT__ === undefined) {
+  globalThis.__DOCS_CONTEXT__ = createContext(null);
+  globalThis.__DOCS_CONTEXT__.displayName = 'DocsContext';
 }
 
-export const DocsContext: Context<DocsContextProps<Renderer>> = global
-  ? global.__DOCS_CONTEXT__
+export const DocsContext: Context<DocsContextProps<Renderer>> = globalThis
+  ? globalThis.__DOCS_CONTEXT__
   : createContext(null);
diff --git a/code/lib/blocks/src/blocks/mdx.tsx b/code/lib/blocks/src/blocks/mdx.tsx
index 9a4bf1173c80..09d8cff33465 100644
--- a/code/lib/blocks/src/blocks/mdx.tsx
+++ b/code/lib/blocks/src/blocks/mdx.tsx
@@ -6,14 +6,13 @@ import { Code, components, nameSpaceClassNames } from 'storybook/internal/compon
 import { NAVIGATE_URL } from 'storybook/internal/core-events';
 import { styled } from 'storybook/internal/theming';
 
-import { global } from '@storybook/global';
 import { LinkIcon } from '@storybook/icons';
 
 import { Source } from '../components';
 import type { DocsContextProps } from './DocsContext';
 import { DocsContext } from './DocsContext';
 
-const { document } = global;
+const { document } = globalThis;
 
 // Hacky utility for asserting identifiers in MDX Story elements
 export const assertIsFn = (val: any) => {
diff --git a/code/lib/blocks/src/components/ArgsTable/ArgControl.tsx b/code/lib/blocks/src/components/ArgsTable/ArgControl.tsx
index 36e75aa81d36..064a115dd410 100644
--- a/code/lib/blocks/src/components/ArgsTable/ArgControl.tsx
+++ b/code/lib/blocks/src/components/ArgsTable/ArgControl.tsx
@@ -71,11 +71,7 @@ export const ArgControl: FC<ArgControlProps> = ({ row, arg, updateArgs, isHovere
   if (!control || control.disable) {
     const canBeSetup = control?.disable !== true && row?.type?.name !== 'function';
     return isHovered && canBeSetup ? (
-      <Link
-        href="https://storybook.js.org/docs/react/essentials/controls"
-        target="_blank"
-        withArrow
-      >
+      <Link href="https://storybook.js.org/docs/essentials/controls" target="_blank" withArrow>
         Setup controls
       </Link>
     ) : (
diff --git a/code/lib/blocks/src/components/ArgsTable/ArgValue.tsx b/code/lib/blocks/src/components/ArgsTable/ArgValue.tsx
index 0df1accdada6..3b97b757e490 100644
--- a/code/lib/blocks/src/components/ArgsTable/ArgValue.tsx
+++ b/code/lib/blocks/src/components/ArgsTable/ArgValue.tsx
@@ -6,7 +6,7 @@ import { styled } from 'storybook/internal/theming';
 
 import { ChevronSmallDownIcon, ChevronSmallUpIcon } from '@storybook/icons';
 
-import uniq from 'lodash/uniq.js';
+import { uniq } from 'es-toolkit/compat';
 import memoize from 'memoizerific';
 
 import type { PropSummaryValue } from './types';
diff --git a/code/lib/blocks/src/components/ArgsTable/ArgsTable.stories.tsx b/code/lib/blocks/src/components/ArgsTable/ArgsTable.stories.tsx
index ab867ff74b5c..8d44e5f7cb43 100644
--- a/code/lib/blocks/src/components/ArgsTable/ArgsTable.stories.tsx
+++ b/code/lib/blocks/src/components/ArgsTable/ArgsTable.stories.tsx
@@ -90,10 +90,14 @@ export const SectionsAndSubsections = {
 export const SubsectionsOnly = {
   args: {
     rows: {
-      a: { ...stringType, table: { ...stringType.table, ...componentSubsection } },
+      a: { ...stringType, key: 'stringA', table: { ...stringType.table, ...componentSubsection } },
       b: { ...numberType, table: { ...stringType.table, ...componentSubsection } },
-      c: { ...stringType, table: { ...stringType.table, ...componentSubsection } },
-      d: { ...stringType, table: { ...stringType.table, ...htmlElementSubsection } },
+      c: { ...stringType, key: 'stringB', table: { ...stringType.table, ...componentSubsection } },
+      d: {
+        ...stringType,
+        key: 'stringC',
+        table: { ...stringType.table, ...htmlElementSubsection },
+      },
     },
   },
 };
@@ -106,14 +110,14 @@ export const AllControls = {
       color: ArgRow.Color.args.row,
       date: ArgRow.Date.args.row,
       string: ArgRow.String.args.row,
-      number: ArgRow.Number.args.row,
-      range: ArgRow.Number.args.row,
-      radio: ArgRow.Radio.args.row,
-      inlineRadio: ArgRow.InlineRadio.args.row,
-      check: ArgRow.Check.args.row,
-      inlineCheck: ArgRow.InlineCheck.args.row,
-      select: ArgRow.Select.args.row,
-      multiSelect: ArgRow.MultiSelect.args.row,
+      number: { ...ArgRow.Number.args.row, key: 'number' },
+      range: { ...ArgRow.Number.args.row, key: 'range' },
+      radio: { ...ArgRow.Radio.args.row, key: 'radio' },
+      inlineRadio: { ...ArgRow.InlineRadio.args.row, key: 'inlineRadio' },
+      check: { ...ArgRow.Check.args.row, key: 'check' },
+      inlineCheck: { ...ArgRow.InlineCheck.args.row, key: 'inlineCheck' },
+      select: { ...ArgRow.Select.args.row, key: 'select' },
+      multiSelect: { ...ArgRow.MultiSelect.args.row, key: 'multiSelect' },
       object: ArgRow.ObjectOf.args.row,
       func: ArgRow.Func.args.row,
     },
diff --git a/code/lib/blocks/src/components/ArgsTable/ArgsTable.tsx b/code/lib/blocks/src/components/ArgsTable/ArgsTable.tsx
index e0dab71a171c..5a1c71b36a2a 100644
--- a/code/lib/blocks/src/components/ArgsTable/ArgsTable.tsx
+++ b/code/lib/blocks/src/components/ArgsTable/ArgsTable.tsx
@@ -8,7 +8,7 @@ import { styled } from 'storybook/internal/theming';
 import { includeConditionalArg } from '@storybook/csf';
 import { DocumentIcon, UndoIcon } from '@storybook/icons';
 
-import pickBy from 'lodash/pickBy.js';
+import { pickBy } from 'es-toolkit/compat';
 import { transparentize } from 'polished';
 
 import { EmptyBlock } from '..';
@@ -346,7 +346,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
   const { rows, args, globals } = 'rows' in props && props;
   const groups = groupRows(
     pickBy(
-      rows,
+      rows || {},
       (row) => !row?.table?.disable && safeIncludeConditionalArg(row, args || {}, globals || {})
     ),
     sort
diff --git a/code/lib/blocks/src/components/IFrame.tsx b/code/lib/blocks/src/components/IFrame.tsx
index 4fbf6220a1eb..4f2bd4beedb3 100644
--- a/code/lib/blocks/src/components/IFrame.tsx
+++ b/code/lib/blocks/src/components/IFrame.tsx
@@ -1,8 +1,6 @@
 import React, { Component } from 'react';
 
-import { global } from '@storybook/global';
-
-const { window: globalWindow } = global;
+const { window: globalWindow } = globalThis;
 
 interface IFrameProps {
   id: string;
diff --git a/code/lib/blocks/src/components/Preview.stories.tsx b/code/lib/blocks/src/components/Preview.stories.tsx
index 69b3adb29bf6..39a2e3b1a942 100644
--- a/code/lib/blocks/src/components/Preview.stories.tsx
+++ b/code/lib/blocks/src/components/Preview.stories.tsx
@@ -5,8 +5,6 @@ import { Button, Spaced } from 'storybook/internal/components';
 import { styled } from 'storybook/internal/theming';
 import type { DocsContextProps, ModuleExport } from 'storybook/internal/types';
 
-import { global } from '@storybook/global';
-
 import * as ButtonStories from '../examples/Button.stories';
 import { Preview, PreviewSkeleton } from './Preview';
 import * as sourceStories from './Source.stories';
@@ -251,7 +249,7 @@ export const WithAdditionalActions = (
       {
         title: 'Open on GitHub',
         onClick: () => {
-          global.location.href =
+          globalThis.location.href =
             'https://github.com/storybookjs/storybook/blob/next/code/lib/blocks/src/components/Preview.stories.tsx#L165-L186';
         },
       },
diff --git a/code/lib/blocks/src/components/Preview.tsx b/code/lib/blocks/src/components/Preview.tsx
index e0491c2166fe..2c7defbe37a3 100644
--- a/code/lib/blocks/src/components/Preview.tsx
+++ b/code/lib/blocks/src/components/Preview.tsx
@@ -5,8 +5,6 @@ import { ActionBar, Zoom } from 'storybook/internal/components';
 import type { ActionItem } from 'storybook/internal/components';
 import { styled } from 'storybook/internal/theming';
 
-import { global } from '@storybook/global';
-
 import { darken } from 'polished';
 
 import type { SourceProps } from '.';
@@ -204,7 +202,7 @@ export const Preview: FC<PreviewProps> = ({
   );
   const actionItems = [...defaultActionItems, ...additionalActionItems];
 
-  const { window: globalWindow } = global;
+  const { window: globalWindow } = globalThis;
 
   const copyToClipboard = useCallback(async (text: string) => {
     const { createCopyToClipboardFunction } = await import('storybook/internal/components');
diff --git a/code/lib/blocks/src/components/Story.tsx b/code/lib/blocks/src/components/Story.tsx
index 9be47a232abb..3110b14a0205 100644
--- a/code/lib/blocks/src/components/Story.tsx
+++ b/code/lib/blocks/src/components/Story.tsx
@@ -6,12 +6,10 @@ import { ErrorFormatter, Loader, getStoryHref } from 'storybook/internal/compone
 import { styled } from 'storybook/internal/theming';
 import type { DocsContextProps, PreparedStory } from 'storybook/internal/types';
 
-import { global } from '@storybook/global';
-
 import { IFrame } from './IFrame';
 import { ZoomContext } from './ZoomContext';
 
-const { PREVIEW_URL } = global;
+const { PREVIEW_URL } = globalThis;
 const BASE_URL = PREVIEW_URL || 'iframe.html';
 
 interface CommonProps {
diff --git a/code/lib/blocks/src/controls/Boolean.stories.tsx b/code/lib/blocks/src/controls/Boolean.stories.tsx
index f8b5e96c94a7..ad7365c03838 100644
--- a/code/lib/blocks/src/controls/Boolean.stories.tsx
+++ b/code/lib/blocks/src/controls/Boolean.stories.tsx
@@ -83,6 +83,7 @@ export const Toggling: Story = {
       });
     });
   },
+  tags: ['!vitest'],
 };
 
 export const TogglingInDocs: Story = {
@@ -95,6 +96,7 @@ export const TogglingInDocs: Story = {
       autoplay: true,
     },
   },
+  tags: ['!vitest'],
 };
 
 export const Readonly: Story = {
diff --git a/code/lib/blocks/src/controls/Color.stories.tsx b/code/lib/blocks/src/controls/Color.stories.tsx
index f12a0f05f80b..8b77cff62f0c 100644
--- a/code/lib/blocks/src/controls/Color.stories.tsx
+++ b/code/lib/blocks/src/controls/Color.stories.tsx
@@ -40,9 +40,9 @@ export const WithPresetColors: Story = {
       { color: '#ff4785', title: 'Coral' },
       { color: '#1EA7FD', title: 'Ocean' },
       { color: 'rgb(252, 82, 31)', title: 'Orange' },
-      { color: 'RGBA(255, 174, 0, 0.5)', title: 'Gold' },
+      { color: 'rgba(255, 174, 0, 0.5)', title: 'Gold' },
       { color: 'hsl(101, 52%, 49%)', title: 'Green' },
-      { color: 'HSLA(179,65%,53%,0.5)', title: 'Seafoam' },
+      { color: 'hsla(179,65%,53%,0.5)', title: 'Seafoam' },
       { color: '#6F2CAC', title: 'Purple' },
       { color: '#2A0481', title: 'Ultraviolet' },
       { color: 'black' },
@@ -58,7 +58,7 @@ export const WithPresetColors: Story = {
       '#fe4a49',
       '#FED766',
       'rgba(0, 159, 183, 1)',
-      'HSLA(240,11%,91%,0.5)',
+      'hsla(240,11%,91%,0.5)',
       'slategray',
     ],
   },
diff --git a/code/lib/blocks/src/controls/Color.tsx b/code/lib/blocks/src/controls/Color.tsx
index 2feafd97d148..82b95aa95f22 100644
--- a/code/lib/blocks/src/controls/Color.tsx
+++ b/code/lib/blocks/src/controls/Color.tsx
@@ -7,7 +7,7 @@ import { styled } from 'storybook/internal/theming';
 import { MarkupIcon } from '@storybook/icons';
 
 import convert from 'color-convert';
-import debounce from 'lodash/debounce.js';
+import { debounce } from 'es-toolkit/compat';
 import { HexColorPicker, HslaStringColorPicker, RgbaStringColorPicker } from 'react-colorful';
 
 import { getControlId } from './helpers';
diff --git a/code/lib/blocks/src/controls/Object.tsx b/code/lib/blocks/src/controls/Object.tsx
index 50b5b9891d5e..ced28529b763 100644
--- a/code/lib/blocks/src/controls/Object.tsx
+++ b/code/lib/blocks/src/controls/Object.tsx
@@ -4,16 +4,15 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Button, Form, IconButton } from 'storybook/internal/components';
 import { type Theme, styled, useTheme } from 'storybook/internal/theming';
 
-import { global } from '@storybook/global';
 import { AddIcon, EyeCloseIcon, EyeIcon, SubtractIcon } from '@storybook/icons';
 
-import cloneDeep from 'lodash/cloneDeep.js';
+import { cloneDeep } from 'es-toolkit/compat';
 
 import { getControlId, getControlSetterButtonId } from './helpers';
 import { JsonTree } from './react-editable-json-tree';
 import type { ControlProps, ObjectConfig, ObjectValue } from './types';
 
-const { window: globalWindow } = global;
+const { window: globalWindow } = globalThis;
 
 type JsonTreeProps = ComponentProps<typeof JsonTree>;
 
diff --git a/code/lib/blocks/src/examples/Button.stories.tsx b/code/lib/blocks/src/examples/Button.stories.tsx
index 31f28a568c51..c22d141f541c 100644
--- a/code/lib/blocks/src/examples/Button.stories.tsx
+++ b/code/lib/blocks/src/examples/Button.stories.tsx
@@ -137,4 +137,5 @@ export const ErrorStory: Story = {
   parameters: {
     chromatic: { disable: true },
   },
+  tags: ['!test', '!vitest'],
 };
diff --git a/code/lib/blocks/src/examples/CanvasParameters.stories.tsx b/code/lib/blocks/src/examples/CanvasParameters.stories.tsx
index aa9affefbfec..4d4433747494 100644
--- a/code/lib/blocks/src/examples/CanvasParameters.stories.tsx
+++ b/code/lib/blocks/src/examples/CanvasParameters.stories.tsx
@@ -30,10 +30,7 @@ export const AdditionalActions: Story = {
           {
             title: 'Go to documentation',
             onClick: () => {
-              window.open(
-                'https://storybook.js.org/docs/react/essentials/controls#annotation',
-                '_blank'
-              );
+              window.open('https://storybook.js.org/docs/essentials/controls#annotation', '_blank');
             },
           },
         ],
diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json
index 25a66aa344ed..5210403c97b9 100644
--- a/code/lib/cli-sb/package.json
+++ b/code/lib/cli-sb/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sb",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"
diff --git a/code/lib/cli-sb/project.json b/code/lib/cli-sb/project.json
index efaba5c541b2..25f5e9e0ebb9 100644
--- a/code/lib/cli-sb/project.json
+++ b/code/lib/cli-sb/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "cli-sb",
+  "name": "sb",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {}
diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json
index 7623c68b2f4d..f08e2354adad 100644
--- a/code/lib/cli-storybook/package.json
+++ b/code/lib/cli-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/cli",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"
@@ -44,7 +44,6 @@
     "@babel/types": "^7.24.0",
     "@storybook/codemod": "workspace:*",
     "@types/semver": "^7.3.4",
-    "chalk": "^4.1.0",
     "commander": "^12.1.0",
     "create-storybook": "workspace:*",
     "cross-spawn": "^7.0.3",
@@ -66,6 +65,7 @@
     "@types/cross-spawn": "^6.0.2",
     "@types/prompts": "^2.0.9",
     "boxen": "^7.1.1",
+    "picocolors": "^1.1.0",
     "slash": "^5.0.0",
     "strip-ansi": "^7.1.0",
     "typescript": "^5.3.2"
diff --git a/code/lib/cli-storybook/project.json b/code/lib/cli-storybook/project.json
index 229b547bb854..82cebd8431b3 100644
--- a/code/lib/cli-storybook/project.json
+++ b/code/lib/cli-storybook/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "cli-storybook",
+  "name": "cli",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {
diff --git a/code/lib/cli-storybook/src/add.test.ts b/code/lib/cli-storybook/src/add.test.ts
index 5fb009f11df3..1bbf88275afc 100644
--- a/code/lib/cli-storybook/src/add.test.ts
+++ b/code/lib/cli-storybook/src/add.test.ts
@@ -171,7 +171,7 @@ describe('add (extra)', () => {
 
     expect(MockedConsole.warn).toHaveBeenCalledWith(
       expect.stringContaining(
-        `The version of @storybook/addon-docs you are installing is not the same as the version of Storybook you are using. This may lead to unexpected behavior.`
+        `The version of @storybook/addon-docs (2.0.0) you are installing is not the same as the version of Storybook you are using (8.0.0). This may lead to unexpected behavior.`
       )
     );
   });
diff --git a/code/lib/cli-storybook/src/add.ts b/code/lib/cli-storybook/src/add.ts
index 522fb4b6899e..d8df0813905d 100644
--- a/code/lib/cli-storybook/src/add.ts
+++ b/code/lib/cli-storybook/src/add.ts
@@ -23,6 +23,7 @@ import { postinstallAddon } from './postinstallAddon';
 export interface PostinstallOptions {
   packageManager: PackageManagerName;
   configDir: string;
+  yes?: boolean;
 }
 
 /**
@@ -66,6 +67,7 @@ type CLIOptions = {
   packageManager?: PackageManagerName;
   configDir?: string;
   skipPostinstall: boolean;
+  yes?: boolean;
 };
 
 /**
@@ -83,7 +85,7 @@ type CLIOptions = {
  */
 export async function add(
   addon: string,
-  { packageManager: pkgMgr, skipPostinstall, configDir: userSpecifiedConfigDir }: CLIOptions,
+  { packageManager: pkgMgr, skipPostinstall, configDir: userSpecifiedConfigDir, yes }: CLIOptions,
   logger = console
 ) {
   const [addonName, inputVersion] = getVersionSpecifier(addon);
@@ -138,7 +140,7 @@ export async function add(
 
   if (isCoreAddon(addonName) && version !== storybookVersion) {
     logger.warn(
-      `The version of ${addonName} you are installing is not the same as the version of Storybook you are using. This may lead to unexpected behavior.`
+      `The version of ${addonName} (${version}) you are installing is not the same as the version of Storybook you are using (${storybookVersion}). This may lead to unexpected behavior.`
     );
   }
 
@@ -165,7 +167,7 @@ export async function add(
   }
 
   if (!skipPostinstall && isCoreAddon(addonName)) {
-    await postinstallAddon(addonName, { packageManager: packageManager.type, configDir });
+    await postinstallAddon(addonName, { packageManager: packageManager.type, configDir, yes });
   }
 }
 function isValidVersion(version: string) {
diff --git a/code/lib/cli-storybook/src/autoblock/block-dependencies-versions.ts b/code/lib/cli-storybook/src/autoblock/block-dependencies-versions.ts
index 49ebdbb54318..1bc9bdc7fca6 100644
--- a/code/lib/cli-storybook/src/autoblock/block-dependencies-versions.ts
+++ b/code/lib/cli-storybook/src/autoblock/block-dependencies-versions.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import { lt } from 'semver';
 import { dedent } from 'ts-dedent';
 
@@ -52,7 +52,7 @@ export const blocker = createBlocker({
         return dedent`
           Support for react-script < 5.0.0 has been removed.
           Please see the migration guide for more information:
-          ${chalk.yellow(
+          ${picocolors.yellow(
             'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#create-react-app-dropped-cra4-support'
           )}
           
@@ -62,7 +62,7 @@ export const blocker = createBlocker({
         return dedent`
           Support for Vue 2 has been removed.
           Please see the migration guide for more information:
-          ${chalk.yellow('https://v3-migration.vuejs.org/')}
+          ${picocolors.yellow('https://v3-migration.vuejs.org/')}
 
           Please upgrade to the latest version of Vue.
         `;
@@ -70,7 +70,7 @@ export const blocker = createBlocker({
         return dedent`
           Support for Angular < 15 has been removed.
           Please see the migration guide for more information:
-          ${chalk.yellow('https://angular.io/guide/update-to-version-15')}
+          ${picocolors.yellow('https://angular.io/guide/update-to-version-15')}
 
           Please upgrade to the latest version of Angular.
         `;
@@ -78,7 +78,7 @@ export const blocker = createBlocker({
         return dedent`
           Support for Next.js < 13.5 has been removed.
           Please see the migration guide for more information:
-          ${chalk.yellow(
+          ${picocolors.yellow(
             'https://nextjs.org/docs/pages/building-your-application/upgrading/version-13'
           )}
 
diff --git a/code/lib/cli-storybook/src/autoblock/block-node-version.ts b/code/lib/cli-storybook/src/autoblock/block-node-version.ts
index 6c4340c38dad..850b4b460d3a 100644
--- a/code/lib/cli-storybook/src/autoblock/block-node-version.ts
+++ b/code/lib/cli-storybook/src/autoblock/block-node-version.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import { lt } from 'semver';
 import { dedent } from 'ts-dedent';
 
@@ -18,7 +18,7 @@ export const blocker = createBlocker({
       We've detected you're using Node.js v${data.nodeVersion}.
       Storybook needs Node.js 18 or higher.
 
-      ${chalk.yellow('https://nodejs.org/en/download')}
+      ${picocolors.yellow('https://nodejs.org/en/download')}
     `;
   },
 });
diff --git a/code/lib/cli-storybook/src/autoblock/block-storystorev6.ts b/code/lib/cli-storybook/src/autoblock/block-storystorev6.ts
index 7904c39ae33f..9d28b8d15a08 100644
--- a/code/lib/cli-storybook/src/autoblock/block-storystorev6.ts
+++ b/code/lib/cli-storybook/src/autoblock/block-storystorev6.ts
@@ -1,6 +1,6 @@
 import type { StorybookConfigRaw } from 'storybook/internal/types';
 
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 
 import { createBlocker } from './types';
@@ -22,7 +22,7 @@ export const blocker = createBlocker({
       StoryStoreV7 feature must be removed from your Storybook configuration.
       This feature was removed in Storybook 8.0.0.
       Please see the migration guide for more information:
-      ${chalk.yellow(
+      ${picocolors.yellow(
         'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev6-and-storiesof-is-deprecated'
       )}
       
@@ -30,7 +30,7 @@ export const blocker = createBlocker({
 
       export default = {
           features: {
-              ${chalk.cyan(`storyStoreV7: false`)}, <--- ${chalk.bold('remove this line')}
+              ${picocolors.cyan(`storyStoreV7: false`)}, <--- ${picocolors.bold('remove this line')}
           },
       };
 
diff --git a/code/lib/cli-storybook/src/autoblock/index.ts b/code/lib/cli-storybook/src/autoblock/index.ts
index a09d1b60477f..5e61a8042582 100644
--- a/code/lib/cli-storybook/src/autoblock/index.ts
+++ b/code/lib/cli-storybook/src/autoblock/index.ts
@@ -1,7 +1,7 @@
 import { logger } from 'storybook/internal/node-logger';
 
 import boxen from 'boxen';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 
 import type { AutoblockOptions, Blocker } from './types';
 
@@ -49,7 +49,9 @@ export const autoblock = async (
   if (faults.length > 0) {
     const messages = {
       welcome: `Storybook has found potential blockers in your project that need to be resolved before upgrading:`,
-      reminder: chalk.yellow('Fix the above issues and try running the upgrade command again.'),
+      reminder: picocolors.yellow(
+        'Fix the above issues and try running the upgrade command again.'
+      ),
     };
     const borderColor = '#FC521F';
 
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/__test__/main-config-without-wrappers.js b/code/lib/cli-storybook/src/automigrate/fixes/__test__/main-config-without-wrappers.js
index 0979ef60ff60..e88bf7243994 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/__test__/main-config-without-wrappers.js
+++ b/code/lib/cli-storybook/src/automigrate/fixes/__test__/main-config-without-wrappers.js
@@ -1,10 +1,6 @@
 const config = {
   stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-  ],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/angular',
     options: {},
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
new file mode 100644
index 000000000000..87da579183cb
--- /dev/null
+++ b/code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.test.ts
@@ -0,0 +1,244 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { existsSync, readFileSync, writeFileSync } from 'fs';
+import path from 'path';
+import dedent from 'ts-dedent';
+
+import { getAddonNames } from '../helpers/mainConfigFile';
+import { addonA11yAddonTest, transformSetupFile } from './addon-a11y-addon-test';
+
+vi.mock('../helpers/mainConfigFile', async (importOriginal) => {
+  const mod = (await importOriginal()) as any;
+  return {
+    ...mod,
+    getAddonNames: vi.fn(),
+  };
+});
+
+// mock fs.existsSync
+vi.mock('fs', async (importOriginal) => {
+  const mod = (await importOriginal()) as any;
+  return {
+    ...mod,
+    existsSync: vi.fn(),
+    readFileSync: vi.fn(),
+    writeFileSync: vi.fn(),
+  };
+});
+
+describe('addonA11yAddonTest', () => {
+  const configDir = '/path/to/config';
+  const mainConfig = {} as any;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('check', () => {
+    it('should return null if a11y addon is not present', async () => {
+      vi.mocked(getAddonNames).mockReturnValue([]);
+      const result = await addonA11yAddonTest.check({ mainConfig, configDir } as any);
+      expect(result).toBeNull();
+    });
+
+    it('should return null if test addon is not present', async () => {
+      vi.mocked(getAddonNames).mockReturnValue(['@storybook/addon-a11y']);
+      const result = await addonA11yAddonTest.check({ mainConfig, configDir } as any);
+      expect(result).toBeNull();
+    });
+
+    it('should return null if configDir is not provided', async () => {
+      const result = await addonA11yAddonTest.check({ mainConfig, configDir: '' } as any);
+      expect(result).toBeNull();
+    });
+
+    it('should return null if provided framework is not supported', async () => {
+      vi.mocked(getAddonNames).mockReturnValue([
+        '@storybook/addon-a11y',
+        '@storybook/experimental-addon-test',
+      ]);
+      const result = await addonA11yAddonTest.check({
+        mainConfig: {
+          framework: '@storybook/angular',
+        },
+        configDir: '',
+      } as any);
+      expect(result).toBeNull();
+    });
+
+    it('should return setupFile and transformedSetupCode if vitest.setup file exists', async () => {
+      vi.mocked(getAddonNames).mockReturnValue([
+        '@storybook/addon-a11y',
+        '@storybook/experimental-addon-test',
+      ]);
+      vi.mocked(existsSync).mockReturnValue(true);
+      vi.mocked(readFileSync).mockReturnValue('const annotations = setProjectAnnotations([]);');
+
+      const result = await addonA11yAddonTest.check({
+        mainConfig: {
+          framework: '@storybook/react-vite',
+        },
+        configDir,
+      } as any);
+      expect(result).toEqual({
+        setupFile: path.join(configDir, 'vitest.setup.js'),
+        transformedSetupCode: expect.any(String),
+      });
+    });
+
+    it('should return setupFile and null transformedSetupCode if transformation fails', async () => {
+      vi.mocked(getAddonNames).mockReturnValue([
+        '@storybook/addon-a11y',
+        '@storybook/experimental-addon-test',
+      ]);
+      vi.mocked(existsSync).mockReturnValue(true);
+      vi.mocked(readFileSync).mockImplementation(() => {
+        throw new Error('Test error');
+      });
+
+      const result = await addonA11yAddonTest.check({
+        mainConfig: {
+          framework: '@storybook/sveltekit',
+        },
+        configDir,
+      } as any);
+      expect(result).toEqual({
+        setupFile: path.join(configDir, 'vitest.setup.js'),
+        transformedSetupCode: null,
+      });
+    });
+  });
+
+  describe('prompt', () => {
+    it('should return manual prompt if setupFile is null', () => {
+      const result = addonA11yAddonTest.prompt({ setupFile: null, transformedSetupCode: null });
+      expect(result).toContain("We couldn't find or automatically update your");
+    });
+
+    it('should return auto prompt if setupFile and transformedSetupCode are present', () => {
+      const result = addonA11yAddonTest.prompt({
+        setupFile: '/path/to/vitest.setup.ts',
+        transformedSetupCode: 'transformed code',
+      });
+      expect(result).toContain('In order for these checks to be enabled we have to update your');
+    });
+  });
+
+  describe('run', () => {
+    it('should write transformed setup code to file', async () => {
+      const setupFile = '/path/to/vitest.setup.ts';
+      const transformedSetupCode = 'transformed code';
+
+      await addonA11yAddonTest.run?.({ result: { setupFile, transformedSetupCode } } as any);
+
+      expect(writeFileSync).toHaveBeenCalledWith(setupFile, transformedSetupCode, 'utf8');
+    });
+
+    it('should not write to file if setupFile or transformedSetupCode is null', async () => {
+      await addonA11yAddonTest.run?.({
+        result: { setupFile: null, transformedSetupCode: null },
+      } as any);
+
+      expect(writeFileSync).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('transformSetupFile', async () => {
+    it('should throw', async () => {
+      const setupFile = '/path/to/vitest.setup.ts';
+      const source = dedent`
+        import { beforeAll } from 'vitest';
+        import { setProjectAnnotations } from 'storybook';
+
+        beforeAll(project.beforeAll);
+      `;
+
+      vi.mocked(readFileSync).mockReturnValue(source);
+
+      expect(() => transformSetupFile(setupFile)).toThrow();
+    });
+
+    it('should transform setup file correctly - 1', () => {
+      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';
+        import { setProjectAnnotations } from 'storybook';
+        import * as projectAnnotations from './preview';
+
+        const project = setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);
+
+        beforeAll(project.beforeAll);"
+      `);
+    });
+
+    it('should transform setup file correctly - 2 (different format)', () => {
+      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';
+        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';
+        import { setProjectAnnotations } from 'storybook';
+        import * as projectAnnotations from './preview';
+
+        const project = setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);
+
+        beforeAll(project.beforeAll);"
+      `);
+    });
+  });
+});
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
new file mode 100644
index 000000000000..a8cd25cdf371
--- /dev/null
+++ b/code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.ts
@@ -0,0 +1,186 @@
+import { rendererPackages } from 'storybook/internal/common';
+
+import { existsSync, readFileSync, writeFileSync } from 'fs';
+import * as jscodeshift from 'jscodeshift';
+import path from 'path';
+import picocolors from 'picocolors';
+import { dedent } from 'ts-dedent';
+
+// Relative path import to avoid dependency to @storybook/test
+import {
+  SUPPORTED_FRAMEWORKS,
+  SUPPORTED_RENDERERS,
+} from '../../../../../addons/test/src/constants';
+import { getAddonNames, getFrameworkPackageName, getRendererName } from '../helpers/mainConfigFile';
+import type { Fix } from '../types';
+
+export const vitestFileExtensions = ['.js', '.ts', '.cts', '.mts', '.cjs', '.mjs'] as const;
+
+interface AddonA11yAddonTestOptions {
+  setupFile: string | null;
+  transformedSetupCode: string | null;
+}
+
+/**
+ * If addon-a11y and experimental-addon-test are already installed, we need to update
+ * `.storybook/vitest.setup.<ts|js>` to set up project annotations from addon-a11y. If we can't find
+ * `.storybook/vitest.setup.<ts|js>`, we need to set up a notification to the user to manually
+ * update the file.
+ */
+export const addonA11yAddonTest: Fix<AddonA11yAddonTestOptions> = {
+  id: 'addonA11yAddonTest',
+  versionRange: ['<8.5.0', '>=8.5.0'],
+
+  promptType(result) {
+    if (result.setupFile === null) {
+      return 'manual';
+    }
+
+    return 'auto';
+  },
+
+  async check({ mainConfig, configDir }) {
+    const addons = getAddonNames(mainConfig);
+
+    const frameworkPackageName = getFrameworkPackageName(mainConfig);
+    const rendererPackageName = getRendererName(mainConfig);
+
+    const hasA11yAddon = !!addons.find((addon) => addon.includes('@storybook/addon-a11y'));
+    const hasTestAddon = !!addons.find((addon) =>
+      addon.includes('@storybook/experimental-addon-test')
+    );
+
+    if (
+      !SUPPORTED_FRAMEWORKS.find((framework) => frameworkPackageName?.includes(framework)) &&
+      !SUPPORTED_RENDERERS.find((renderer) =>
+        rendererPackageName?.includes(rendererPackages[renderer])
+      )
+    ) {
+      return null;
+    }
+
+    if (!hasA11yAddon || !hasTestAddon || !configDir) {
+      return null;
+    }
+
+    // get `${configDir}/vitest.setup.<ts|js>` absolute file path
+    const vitestSetupFile =
+      vitestFileExtensions
+        .map((ext) => path.join(configDir, `vitest.setup${ext}`))
+        .find((filePath) => existsSync(filePath)) ?? null;
+
+    try {
+      if (vitestSetupFile) {
+        const source = readFileSync(vitestSetupFile, 'utf8');
+        if (source.includes('@storybook/addon-a11y')) {
+          return null;
+        }
+        const transformedSetupCode = transformSetupFile(source);
+        return {
+          setupFile: vitestSetupFile,
+          transformedSetupCode,
+        };
+      } else {
+        return {
+          setupFile: null,
+          transformedSetupCode: null,
+        };
+      }
+    } catch (e) {
+      return {
+        setupFile: vitestSetupFile,
+        transformedSetupCode: null,
+      };
+    }
+  },
+
+  prompt({ setupFile, transformedSetupCode }) {
+    const introduction = dedent`
+      We have detected that you have ${picocolors.magenta(`@storybook/addon-a11y`)} and ${picocolors.magenta(`@storybook/experimental-addon-test`)} installed.
+
+      ${picocolors.magenta(`@storybook/addon-a11y`)} integrates now with ${picocolors.magenta(`@storybook/experimental-addon-test`)} to provide automatic accessibility checks for your stories, powered by Axe and Vitest.
+    `;
+
+    if (setupFile === null || transformedSetupCode === null) {
+      return dedent`
+      ${introduction}
+
+      We couldn't find or automatically update your ${picocolors.cyan(`.storybook/vitest.setup.<ts|js>`)} in your project to smoothly set up project annotations from ${picocolors.magenta(`@storybook/addon-a11y`)}. 
+      Please manually update your ${picocolors.cyan(`vitest.setup.ts`)} file to include the following:
+
+      ${picocolors.gray('...')}   
+      ${picocolors.green('+ import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";')}
+
+      ${picocolors.gray('const annotations = setProjectAnnotations([')}
+      ${picocolors.gray('  ...')}
+      ${picocolors.green('+ a11yAddonAnnotations,')}
+      ${picocolors.gray(']);')}
+
+      ${picocolors.gray('beforeAll(annotations.beforeAll);')}
+
+      For more information, please refer to the addon test documentation: 
+      ${picocolors.cyan('https://storybook.js.org/docs/writing-tests/addon-test')}
+      `;
+    }
+
+    const fileExtension = path.extname(setupFile);
+
+    return dedent`
+      We have detected that you have ${picocolors.magenta(`@storybook/addon-a11y`)} and ${picocolors.magenta(`@storybook/experimental-addon-test`)} installed.
+
+      ${picocolors.magenta(`@storybook/addon-a11y`)} integrates now with ${picocolors.magenta(`@storybook/experimental-addon-test`)} to provide automatic accessibility checks for your stories, powered by Axe and Vitest.
+
+      In order for these checks to be enabled we have to update your ${picocolors.cyan(`.storybook/vitest.setup${fileExtension}`)} file.
+    `;
+  },
+
+  async run({ result }) {
+    const { setupFile, transformedSetupCode } = result;
+
+    if (!setupFile || !transformedSetupCode) {
+      return;
+    }
+
+    // Write the transformed code back to the file
+    writeFileSync(setupFile, transformedSetupCode, 'utf8');
+  },
+};
+
+export function transformSetupFile(source: string) {
+  const j = jscodeshift.withParser('ts');
+
+  const root = j(source);
+
+  // Import a11yAddonAnnotations
+  const importDeclaration = j.importDeclaration(
+    [j.importNamespaceSpecifier(j.identifier('a11yAddonAnnotations'))],
+    j.literal('@storybook/addon-a11y/preview')
+  );
+
+  // Find the setProjectAnnotations call
+  const setProjectAnnotationsCall = root.find(j.CallExpression, {
+    callee: {
+      type: 'Identifier',
+      name: 'setProjectAnnotations',
+    },
+  });
+
+  if (setProjectAnnotationsCall.length === 0) {
+    throw new Error('Could not find setProjectAnnotations call in vitest.setup file');
+  }
+
+  // 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
+  root.get().node.program.body.unshift(importDeclaration);
+
+  return root.toSource();
+}
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/addon-postcss.ts b/code/lib/cli-storybook/src/automigrate/fixes/addon-postcss.ts
index 130ac71d38d2..d8bd135da2f9 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/addon-postcss.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/addon-postcss.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 
 import { getAddonNames } from '../helpers/mainConfigFile';
@@ -28,13 +28,13 @@ export const addonPostCSS: Fix<AddonPostcssRunOptions> = {
 
   prompt() {
     return dedent`
-      ${chalk.bold(
+      ${picocolors.bold(
         'Attention'
       )}: We've detected that you're using the following package which is incompatible with Storybook 8 and beyond:
 
-      - ${chalk.cyan(`@storybook/addon-postcss`)}
+      - ${picocolors.cyan(`@storybook/addon-postcss`)}
       
-      Please migrate to ${chalk.cyan(
+      Please migrate to ${picocolors.cyan(
         `@storybook/addon-styling-webpack`
       )} once you're done upgrading.
     `;
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/addons-api.ts b/code/lib/cli-storybook/src/automigrate/fixes/addons-api.ts
index f014b331c064..b0236fcf82a7 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/addons-api.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/addons-api.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 
 import type { Fix } from '../types';
@@ -27,18 +27,18 @@ export const addonsAPI: Fix<AddonsAPIRunOptions> = {
 
   prompt() {
     return dedent`
-      ${chalk.bold(
+      ${picocolors.bold(
         'Attention'
       )}: We've detected that you're using the following package which is removed in Storybook 8 and beyond:
 
-      - ${chalk.cyan(`@storybook/addons`)}
+      - ${picocolors.cyan(`@storybook/addons`)}
       
-      This package has been deprecated and replaced with ${chalk.cyan(
+      This package has been deprecated and replaced with ${picocolors.cyan(
         `@storybook/preview-api`
-      )} and ${chalk.cyan(`@storybook/manager-api`)}.
+      )} and ${picocolors.cyan(`@storybook/manager-api`)}.
 
       You can find more information about the new addons API in the migration guide:
-      ${chalk.yellow(
+      ${picocolors.yellow(
         'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-addons-api'
       )}
     `;
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/angular-builders-multiproject.ts b/code/lib/cli-storybook/src/automigrate/fixes/angular-builders-multiproject.ts
index 182ab521942b..dad252bcf42d 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/angular-builders-multiproject.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/angular-builders-multiproject.ts
@@ -1,6 +1,6 @@
 import { AngularJSON, isNxProject } from 'storybook/internal/cli';
 
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import semver from 'semver';
 import { dedent } from 'ts-dedent';
 
@@ -47,13 +47,13 @@ export const angularBuildersMultiproject: Fix<AngularBuildersMultiprojectRunOpti
 
   prompt() {
     return dedent`
-    In Storybook 6.4 we have deprecated calling Storybook directly (npm run storybook) for Angular. In Storybook 7.0, we've removed it entirely. Instead you have to set up the Storybook builder in your ${chalk.yellow(
+    In Storybook 6.4 we have deprecated calling Storybook directly (npm run storybook) for Angular. In Storybook 7.0, we've removed it entirely. Instead you have to set up the Storybook builder in your ${picocolors.yellow(
       'angular.json'
-    )} and execute ${chalk.yellow('ng run <your-project>:storybook')} to start Storybook. 
+    )} and execute ${picocolors.yellow('ng run <your-project>:storybook')} to start Storybook. 
     
-    ❌ Your Angular workspace uses multiple projects defined in the ${chalk.yellow(
+    ❌ Your Angular workspace uses multiple projects defined in the ${picocolors.yellow(
       'angular.json'
-    )} file and we were not able to detect a root project. Therefore we are not able to automigrate to use Angular Storybook builder. Instead, please visit ${chalk.yellow(
+    )} file and we were not able to detect a root project. Therefore we are not able to automigrate to use Angular Storybook builder. Instead, please visit ${picocolors.yellow(
       'https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular'
     )} to do the migration manually.
     `;
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/angular-builders.ts b/code/lib/cli-storybook/src/automigrate/fixes/angular-builders.ts
index 80eccbc1f046..30798fe53335 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/angular-builders.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/angular-builders.ts
@@ -2,7 +2,7 @@ import { AngularJSON, isNxProject } from 'storybook/internal/cli';
 import type { JsPackageManager } from 'storybook/internal/common';
 import type { StorybookConfig } from 'storybook/internal/types';
 
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import prompts from 'prompts';
 import { dedent } from 'ts-dedent';
 
@@ -60,7 +60,7 @@ export const angularBuilders: Fix<AngularBuildersRunOptions> = {
 
       Also feel free to remove the Compodoc script from your package.json file if you don't use it apart from Storybook anymore. Storybook uses Compodoc internally and you don't have to call in separately anymore.
 
-      Read more about the Angular builder here: ${chalk.yellow(
+      Read more about the Angular builder here: ${picocolors.yellow(
         'https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular#how-do-i-migrate-to-an-angular-storybook-builder'
       )}
     `;
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/autodocs-tags.ts b/code/lib/cli-storybook/src/automigrate/fixes/autodocs-tags.ts
index ebfbf45213a6..30d5c9a5ed8e 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/autodocs-tags.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/autodocs-tags.ts
@@ -1,7 +1,7 @@
 import { readConfig, writeConfig } from 'storybook/internal/csf-tools';
 import type { DocsOptions } from 'storybook/internal/types';
 
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 
 import { updateMainConfig } from '../helpers/mainConfigFile';
@@ -30,13 +30,13 @@ export const autodocsTags: Fix<Options> = {
 
     if (autodocs === true && !previewConfigPath) {
       throw Error(dedent`
-        ❌ Failed to remove the deprecated ${chalk.cyan('docs.autodocs')} setting from ${chalk.cyan(
-          mainConfigPath
-        )}.
+        ❌ Failed to remove the deprecated ${picocolors.cyan(
+          'docs.autodocs'
+        )} setting from ${picocolors.cyan(mainConfigPath)}.
         
-        There is no preview config file in which to add the ${chalk.cyan('autodocs')} tag.
+        There is no preview config file in which to add the ${picocolors.cyan('autodocs')} tag.
 
-        Please perform the migration by hand: ${chalk.yellow(MIGRATION)}
+        Please perform the migration by hand: ${picocolors.yellow(MIGRATION)}
       `);
       return null;
     }
@@ -52,21 +52,23 @@ export const autodocsTags: Fix<Options> = {
       falseMessage = dedent`
 
 
-        There is no ${chalk.cyan('docs.autodocs = false')} equivalent.
-        You'll need to check your stories to ensure none are tagged with ${chalk.cyan('autodocs')}.
+        There is no ${picocolors.cyan('docs.autodocs = false')} equivalent.
+        You'll need to check your stories to ensure none are tagged with ${picocolors.cyan(
+          'autodocs'
+        )}.
       `;
     } else if (autodocs === true) {
-      trueMessage = ` and update ${chalk.cyan(previewConfigPath)}`;
+      trueMessage = ` and update ${picocolors.cyan(previewConfigPath)}`;
     }
 
     return dedent`
-      The ${chalk.cyan('docs.autodocs')} setting in ${chalk.cyan(
+      The ${picocolors.cyan('docs.autodocs')} setting in ${picocolors.cyan(
         mainConfigPath
       )} is deprecated.${falseMessage}
         
-      Learn more: ${chalk.yellow(MIGRATION)}
+      Learn more: ${picocolors.yellow(MIGRATION)}
       
-      Remove ${chalk.cyan('docs.autodocs')}${trueMessage}?
+      Remove ${picocolors.cyan('docs.autodocs')}${trueMessage}?
     `;
   },
 
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/autodocs-true.ts b/code/lib/cli-storybook/src/automigrate/fixes/autodocs-true.ts
index 5f3dc66a899d..9ed1aa6b06ed 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/autodocs-true.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/autodocs-true.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 
 import { updateMainConfig } from '../helpers/mainConfigFile';
@@ -42,7 +42,9 @@ export const autodocsTrue: Fix<AutodocsTrueFrameworkRunOptions> = {
   },
 
   prompt({ value }) {
-    const autodocsFormatted = chalk.cyan(`docs: { autodocs: ${JSON.stringify(value ?? true)} }`);
+    const autodocsFormatted = picocolors.cyan(
+      `docs: { autodocs: ${JSON.stringify(value ?? true)} }`
+    );
     const tagWarning = dedent`
       NOTE: if you're upgrading from an older 7.0-beta using the 'docsPage' tag,
       please update your story files to use the 'autodocs' tag instead.
@@ -59,7 +61,7 @@ export const autodocsTrue: Fix<AutodocsTrueFrameworkRunOptions> = {
 
       ${autodocsFormatted}
       ${value === 'tag' ? tagWarning : ''}
-      More info: ${chalk.yellow(
+      More info: ${picocolors.yellow(
         'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes'
       )}
     `;
@@ -72,7 +74,7 @@ export const autodocsTrue: Fix<AutodocsTrueFrameworkRunOptions> = {
 
       ${autodocsFormatted}
 
-      More info: ${chalk.yellow(
+      More info: ${picocolors.yellow(
         'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes'
       )}
     `;
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/builder-vite.ts b/code/lib/cli-storybook/src/automigrate/fixes/builder-vite.ts
index 0f3e7714edee..258d033d8649 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/builder-vite.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/builder-vite.ts
@@ -2,7 +2,7 @@ import { getStorybookVersionSpecifier } from 'storybook/internal/cli';
 import { writeConfig } from 'storybook/internal/csf-tools';
 import type { PackageJson } from 'storybook/internal/types';
 
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 
 import { updateMainConfig } from '../helpers/mainConfigFile';
@@ -42,18 +42,18 @@ export const builderVite: Fix<BuilderViteOptions> = {
   },
 
   prompt({ builder }) {
-    const builderFormatted = chalk.cyan(JSON.stringify(builder, null, 2));
+    const builderFormatted = picocolors.cyan(JSON.stringify(builder, null, 2));
 
     return dedent`
       We've detected you're using the community vite builder: ${builderFormatted}
       
-      'storybook-builder-vite' is deprecated and now located at ${chalk.cyan(
+      'storybook-builder-vite' is deprecated and now located at ${picocolors.cyan(
         '@storybook/builder-vite'
       )}.
 
       We can upgrade your project to use the new builder automatically.
       
-      More info: ${chalk.yellow(
+      More info: ${picocolors.yellow(
         'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#vite-builder-renamed'
       )}
     `;
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/cra5.ts b/code/lib/cli-storybook/src/automigrate/fixes/cra5.ts
index 968b24cb4985..26904460664a 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/cra5.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/cra5.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import semver from 'semver';
 import { dedent } from 'ts-dedent';
 
@@ -36,17 +36,17 @@ export const cra5: Fix<CRA5RunOptions> = {
   },
 
   prompt({ craVersion }) {
-    const craFormatted = chalk.cyan(`Create React App (CRA) ${craVersion}`);
+    const craFormatted = picocolors.cyan(`Create React App (CRA) ${craVersion}`);
 
     return dedent`
       We've detected you are running ${craFormatted} which is powered by webpack5.
       Your Storybook's main.js files specifies webpack4, which is incompatible.
 
-      In order to work with your version of CRA, we need to install Storybook's ${chalk.cyan(
+      In order to work with your version of CRA, we need to install Storybook's ${picocolors.cyan(
         '@storybook/builder-webpack5'
       )}.
 
-      More info: ${chalk.yellow(
+      More info: ${picocolors.yellow(
         'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#cra5-upgrade'
       )}
     `;
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/eslint-plugin.ts b/code/lib/cli-storybook/src/automigrate/fixes/eslint-plugin.ts
index 719ee2e046dd..a0d21efbc70b 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/eslint-plugin.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/eslint-plugin.ts
@@ -5,7 +5,7 @@ import {
   findEslintFile,
 } from 'storybook/internal/cli';
 
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 
 import type { Fix } from '../types';
@@ -58,7 +58,9 @@ export const eslintPlugin: Fix<EslintPluginRunOptions> = {
 
       In order to have the best experience with Storybook and follow best practices, we advise you to install eslint-plugin-storybook.
 
-      More info: ${chalk.yellow('https://github.com/storybookjs/eslint-plugin-storybook#readme')}
+      More info: ${picocolors.yellow(
+        'https://github.com/storybookjs/eslint-plugin-storybook#readme'
+      )}
     `;
   },
 
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/index.ts b/code/lib/cli-storybook/src/automigrate/fixes/index.ts
index 20d701bb16a8..dfd43100665c 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/index.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/index.ts
@@ -1,4 +1,5 @@
 import type { Fix } from '../types';
+import { addonA11yAddonTest } from './addon-a11y-addon-test';
 import { addonPostCSS } from './addon-postcss';
 import { addonsAPI } from './addons-api';
 import { angularBuilders } from './angular-builders';
@@ -65,6 +66,7 @@ export const allFixes: Fix[] = [
   vta,
   autodocsTags,
   initialGlobals,
+  addonA11yAddonTest,
 ];
 
 export const initFixes: Fix[] = [eslintPlugin];
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/initial-globals.ts b/code/lib/cli-storybook/src/automigrate/fixes/initial-globals.ts
index fe40749ffa16..f452be36067a 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/initial-globals.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/initial-globals.ts
@@ -4,7 +4,7 @@ import type { ConfigFile } from 'storybook/internal/csf-tools';
 import { formatConfig, loadConfig } from 'storybook/internal/csf-tools';
 
 import type { Expression } from '@babel/types';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 
 import type { Fix } from '../types';
@@ -39,12 +39,14 @@ export const initialGlobals: Fix<Options> = {
 
   prompt({ previewConfigPath }) {
     return dedent`
-      The ${chalk.cyan('globals')} setting in ${chalk.cyan(previewConfigPath)} is deprecated
-      and has been renamed to ${chalk.cyan('initialGlobals')}.
+      The ${picocolors.cyan('globals')} setting in ${picocolors.cyan(
+        previewConfigPath
+      )} is deprecated
+      and has been renamed to ${picocolors.cyan('initialGlobals')}.
         
-      Learn more: ${chalk.yellow(MIGRATION)}
+      Learn more: ${picocolors.yellow(MIGRATION)}
       
-      Rename ${chalk.cyan('globals')} to ${chalk.cyan('initalGlobals')}?
+      Rename ${picocolors.cyan('globals')} to ${picocolors.cyan('initalGlobals')}?
     `;
   },
 
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/mdx-1-to-3.ts b/code/lib/cli-storybook/src/automigrate/fixes/mdx-1-to-3.ts
index bf87b5fed74f..155ee08246f6 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/mdx-1-to-3.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/mdx-1-to-3.ts
@@ -1,7 +1,7 @@
 import { readFile, writeFile } from 'node:fs/promises';
 import { basename } from 'node:path';
 
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 
 import type { Fix } from '../types';
@@ -51,6 +51,7 @@ export const mdx1to3: Fix<Mdx1to3Options> = {
 
   async check() {
     // Dynamically import globby because it is a pure ESM module
+    // eslint-disable-next-line depend/ban-dependencies
     const { globby } = await import('globby');
 
     const storiesMdxFiles = await globby('./!(node_modules)**/*.(story|stories).mdx');
@@ -59,7 +60,7 @@ export const mdx1to3: Fix<Mdx1to3Options> = {
 
   prompt({ storiesMdxFiles }) {
     return dedent`
-      We've found ${chalk.yellow(storiesMdxFiles.length)} '.stories.mdx' files in your project.
+      We've found ${picocolors.yellow(storiesMdxFiles.length)} '.stories.mdx' files in your project.
       
       Storybook has upgraded to MDX3 (https://mdxjs.com/blog/v3/). MDX3 itself doesn't contain disruptive breaking changes, whereas the transition from MDX1 to MDX2 was a significant change.
       We can try to automatically upgrade your MDX files to MDX3 format using some common patterns.
@@ -67,7 +68,7 @@ export const mdx1to3: Fix<Mdx1to3Options> = {
       After this install completes, and before you start Storybook, we strongly recommend reading the MDX2 section
       of the 7.0 migration guide. It contains useful tools for detecting and fixing any remaining issues.
       
-      ${chalk.cyan('https://storybook.js.org/migration-guides/7.0')}
+      ${picocolors.cyan('https://storybook.js.org/migration-guides/7.0')}
     `;
   },
 
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/mdx-gfm.ts b/code/lib/cli-storybook/src/automigrate/fixes/mdx-gfm.ts
index 8369f8896ef3..41fc1b4a3a0b 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/mdx-gfm.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/mdx-gfm.ts
@@ -47,6 +47,7 @@ export const mdxgfm: Fix<Options> = {
       }
 
       // Dynamically import globby because it is a pure ESM module
+      // eslint-disable-next-line depend/ban-dependencies
       const { globby } = await import('globby');
 
       const files = await globby(pattern, commonGlobOptions(pattern));
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/mdx-to-csf.ts b/code/lib/cli-storybook/src/automigrate/fixes/mdx-to-csf.ts
index 373ec72f8c35..217b3dcacb93 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/mdx-to-csf.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/mdx-to-csf.ts
@@ -2,8 +2,9 @@ import type { StoriesEntry } from 'storybook/internal/types';
 
 import { runCodemod } from '@storybook/codemod';
 
-import chalk from 'chalk';
+// eslint-disable-next-line depend/ban-dependencies
 import { glob } from 'glob';
+import picocolors from 'picocolors';
 import { prompt } from 'prompts';
 import { dedent } from 'ts-dedent';
 
@@ -43,9 +44,9 @@ export const mdxToCSF: Fix<BareMdxStoriesGlobRunOptions> = {
 
     if (!existingStoriesEntries) {
       throw new Error(dedent`
-        ❌ Unable to determine Storybook stories globs in ${chalk.blue(
-          mainConfig
-        )}, skipping ${chalk.cyan(this.id)} fix.
+        ❌ Unable to determine Storybook stories globs in ${picocolors.blue(
+          JSON.stringify(mainConfig, null, 2)
+        )}, skipping ${picocolors.cyan(this.id)} fix.
         
         In Storybook 7, we have deprecated defining stories in MDX files, and consequently have changed the suffix to simply .mdx.
 
@@ -53,7 +54,7 @@ export const mdxToCSF: Fix<BareMdxStoriesGlobRunOptions> = {
 
         We were unable to automatically migrate your 'stories' config to include any .mdx file instead of just .stories.mdx.
         We suggest you make this change manually.
-        To learn more about this change, see: ${chalk.yellow(
+        To learn more about this change, see: ${picocolors.yellow(
           'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mdx-docs-files'
         )}
       `);
@@ -97,7 +98,7 @@ export const mdxToCSF: Fix<BareMdxStoriesGlobRunOptions> = {
       .join('\n');
     return dedent`
       We've detected your project has one or more globs in your 'stories' config that matches .stories.mdx files:
-        ${chalk.cyan(prettyExistingStoriesEntries)}
+        ${picocolors.cyan(prettyExistingStoriesEntries)}
       
       In Storybook 7, we have deprecated defining stories in MDX files, and consequently have changed the suffix to simply .mdx. Since Storybook 8, we have removed the support of story definition in MDX files entirely. Therefore '.stories.mdx' files aren't supported anymore.
 
@@ -105,11 +106,11 @@ export const mdxToCSF: Fix<BareMdxStoriesGlobRunOptions> = {
 
       We can automatically migrate your 'stories' config to include any .mdx file instead of just .stories.mdx.
       That would result in the following 'stories' config:
-        ${chalk.cyan(prettyNextStoriesEntries)}
+        ${picocolors.cyan(prettyNextStoriesEntries)}
 
       Additionally, we will run the 'mdx-to-csf' codemod for you, which tries to transform '*.stories.mdx' files to '*.stories.js' and '*.mdx' files.
 
-      To learn more about this change, see: ${chalk.yellow(
+      To learn more about this change, see: ${picocolors.yellow(
         'https://storybook.js.org/docs/migration-guide#storiesmdx-to-mdxcsf'
       )}
     `;
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/missing-storybook-dependencies.ts b/code/lib/cli-storybook/src/automigrate/fixes/missing-storybook-dependencies.ts
index ad912867f6f2..8eda42d9b9ba 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/missing-storybook-dependencies.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/missing-storybook-dependencies.ts
@@ -4,7 +4,7 @@ import { getStorybookVersionSpecifier } from 'storybook/internal/cli';
 
 import type { InstallationMetadata, JsPackageManager } from '@storybook/core/common';
 
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 
 import type { Fix } from '../types';
@@ -70,6 +70,7 @@ export const missingStorybookDependencies: Fix<MissingStorybookDependenciesOptio
 
   async check({ packageManager }) {
     // Dynamically import globby because it is a pure ESM module
+    // eslint-disable-next-line depend/ban-dependencies
     const { globby } = await import('globby');
 
     const result = await checkInstallations(packageManager, consolidatedPackages);
@@ -112,7 +113,7 @@ export const missingStorybookDependencies: Fix<MissingStorybookDependenciesOptio
       ${Object.entries(packageUsage)
         .map(
           ([pkg, files]) =>
-            `- ${chalk.cyan(pkg)}: (${files.length} ${files.length === 1 ? 'file' : 'files'})`
+            `- ${picocolors.cyan(pkg)}: (${files.length} ${files.length === 1 ? 'file' : 'files'})`
         )
         .sort()
         .join('\n')}
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/new-frameworks.ts b/code/lib/cli-storybook/src/automigrate/fixes/new-frameworks.ts
index 4c891e172099..2de095f742c6 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/new-frameworks.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/new-frameworks.ts
@@ -2,7 +2,7 @@ import { getStorybookVersionSpecifier } from 'storybook/internal/cli';
 import { frameworkPackages, rendererPackages } from 'storybook/internal/common';
 import type { Preset } from 'storybook/internal/types';
 
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import semver from 'semver';
 import invariant from 'tiny-invariant';
 import { dedent } from 'ts-dedent';
@@ -211,13 +211,13 @@ export const newFrameworks: Fix<NewFrameworkRunOptions> = {
 
     if (viteVersion && semver.lt(viteVersion, '3.0.0')) {
       throw new Error(dedent`
-        ❌ Your project should be upgraded to use the framework package ${chalk.bold(
+        ❌ Your project should be upgraded to use the framework package ${picocolors.bold(
           newFrameworkPackage
-        )}, but we detected that you are using Vite ${chalk.bold(
+        )}, but we detected that you are using Vite ${picocolors.bold(
           viteVersion
-        )}, which is unsupported since ${chalk.bold(
+        )}, which is unsupported since ${picocolors.bold(
           'Storybook 7.0'
-        )}. Please upgrade Vite to ${chalk.bold('3.0.0 or higher')} and rerun this migration.
+        )}. Please upgrade Vite to ${picocolors.bold('3.0.0 or higher')} and rerun this migration.
       `);
     }
 
@@ -263,41 +263,47 @@ export const newFrameworks: Fix<NewFrameworkRunOptions> = {
 
     if (dependenciesToRemove.length > 0) {
       migrationSteps += `- Remove the following dependencies:
-      ${dependenciesToRemove.map((dep) => `- * ${chalk.cyan(dep)}`).join('\n')}\n`;
+      ${dependenciesToRemove.map((dep) => `- * ${picocolors.cyan(dep)}`).join('\n')}\n`;
     }
 
     if (dependenciesToAdd.length > 0) {
       migrationSteps += `- Add the following dependencies: 
-      ${dependenciesToAdd.map((dep) => `- * ${chalk.cyan(dep)}`).join('\n')}\n`;
+      ${dependenciesToAdd.map((dep) => `- * ${picocolors.cyan(dep)}`).join('\n')}\n`;
     }
 
     if (!hasFrameworkInMainConfig) {
-      migrationSteps += `- Update or specify the ${chalk.yellow('framework')} field in ${chalk.blue(
-        mainConfigPath
-      )} with the value of "${chalk.cyan(frameworkPackage)}".\n`;
+      migrationSteps += `- Update or specify the ${picocolors.yellow(
+        'framework'
+      )} field in ${picocolors.blue(mainConfigPath)} with the value of "${picocolors.cyan(
+        frameworkPackage
+      )}".\n`;
     }
 
     if (Object.keys(rendererOptions).length > 0) {
-      migrationSteps += `- Move the ${chalk.yellow(`${renderer}Options`)} field in ${chalk.blue(
-        mainConfigPath
-      )} to ${chalk.yellow('framework.options')}, and remove that field entirely.
-      More info: ${chalk.yellow(
+      migrationSteps += `- Move the ${picocolors.yellow(
+        `${renderer}Options`
+      )} field in ${picocolors.blue(mainConfigPath)} to ${picocolors.yellow(
+        'framework.options'
+      )}, and remove that field entirely.
+      More info: ${picocolors.yellow(
         'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#frameworkoptions-renamed'
       )}\n`;
     }
 
     if (addonsToRemove.length > 0) {
-      migrationSteps += `- Remove the following addons from your ${chalk.blue(
+      migrationSteps += `- Remove the following addons from your ${picocolors.blue(
         mainConfigPath
       )}, as the new framework also supports features provided by them:
-      ${addonsToRemove.map((dep) => `- * ${chalk.cyan(dep)}`).join('\n')}
+      ${addonsToRemove.map((dep) => `- * ${picocolors.cyan(dep)}`).join('\n')}
       `;
     }
 
     if (Object.keys(addonOptions).length > 0) {
-      migrationSteps += `- Move the addon options "${chalk.yellow(
+      migrationSteps += `- Move the addon options "${picocolors.yellow(
         Object.keys(addonOptions).join(', ')
-      )}" in ${chalk.blue(mainConfigPath)} to the ${chalk.yellow('framework.options')} field.\n`;
+      )}" in ${picocolors.blue(mainConfigPath)} to the ${picocolors.yellow(
+        'framework.options'
+      )} field.\n`;
     }
 
     if (builderConfig) {
@@ -305,14 +311,16 @@ export const newFrameworks: Fix<NewFrameworkRunOptions> = {
         typeof builderConfig === 'object' &&
         Object.keys(builderConfig.options || {}).length > 0
       ) {
-        migrationSteps += `- Move the ${chalk.yellow('core.builder.options')} field in ${chalk.blue(
-          mainConfigPath
-        )} to ${chalk.yellow('framework.options.builder')}\n`;
+        migrationSteps += `- Move the ${picocolors.yellow(
+          'core.builder.options'
+        )} field in ${picocolors.blue(mainConfigPath)} to ${picocolors.yellow(
+          'framework.options.builder'
+        )}\n`;
       }
 
-      migrationSteps += `- Remove the ${chalk.yellow('core.builder')} field in ${chalk.blue(
-        mainConfigPath
-      )}.\n`;
+      migrationSteps += `- Remove the ${picocolors.yellow(
+        'core.builder'
+      )} field in ${picocolors.blue(mainConfigPath)}.\n`;
     }
 
     if (
@@ -320,47 +328,49 @@ export const newFrameworks: Fix<NewFrameworkRunOptions> = {
       dependenciesToRemove.includes('@storybook/manager-webpack4')
     ) {
       disclaimer = dedent`\n\n
-      ${chalk.underline(chalk.bold(chalk.cyan('Webpack 4 users')))}
+      ${picocolors.underline(picocolors.bold(picocolors.cyan('Webpack 4 users')))}
 
       Unless you're using Storybook's Vite builder, this automigration will install a Webpack 5 based framework.
       
       Given you were using Storybook's Webpack 4 builder (default in 6.x, discontinued in 7.0), this could be a breaking change -- especially if your project has a custom webpack configuration.
       
-      To learn more about migrating from Webpack4, see: ${chalk.yellow(
+      To learn more about migrating from Webpack4, see: ${picocolors.yellow(
         'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack4-support-discontinued'
       )}`;
     }
 
     if (metaFramework === 'nextjs') {
       if (dependenciesToRemove.includes('storybook-addon-next-router')) {
-        migrationSteps += `- Migrate the usage of the ${chalk.cyan(
+        migrationSteps += `- Migrate the usage of the ${picocolors.cyan(
           'storybook-addon-next-router'
-        )} addon to use the APIs from the ${chalk.magenta(
+        )} addon to use the APIs from the ${picocolors.magenta(
           '@storybook/nextjs'
         )} framework package instead. Follow the instructions below.`;
       }
 
       if (frameworkPackage === '@storybook/react-vite') {
         disclaimer = dedent`\n\n
-          ${chalk.bold('Important')}: We've detected you are using Storybook in a Next.js project.
+          ${picocolors.bold(
+            'Important'
+          )}: We've detected you are using Storybook in a Next.js project.
   
-          This migration is set to update your project to use the ${chalk.magenta(
+          This migration is set to update your project to use the ${picocolors.magenta(
             '@storybook/react-vite'
-          )} framework, but Storybook provides a framework package specifically for Next.js projects: ${chalk.magenta(
+          )} framework, but Storybook provides a framework package specifically for Next.js projects: ${picocolors.magenta(
             '@storybook/nextjs'
           )}.
   
           This package provides a better, out of the box experience for Next.js users, however it is only compatible with the Webpack 5 builder, so we can't automigrate for you, as you are using the Vite builder. If you switch this project to use Webpack 5 and rerun this migration, we can update your project.
           
-          If you are interested in using this package, see: ${chalk.yellow(
+          If you are interested in using this package, see: ${picocolors.yellow(
             'https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md'
           )}
         `;
       } else if (frameworkPackage === '@storybook/nextjs') {
         disclaimer = dedent`\n\n
-        The ${chalk.magenta(
+        The ${picocolors.magenta(
           '@storybook/nextjs'
-        )} package provides great user experience for Next.js users, and we highly recommend you to read more about it at ${chalk.yellow(
+        )} package provides great user experience for Next.js users, and we highly recommend you to read more about it at ${picocolors.yellow(
           'https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md'
         )}
         `;
@@ -370,31 +380,33 @@ export const newFrameworks: Fix<NewFrameworkRunOptions> = {
     if (metaFramework === 'sveltekit') {
       if (frameworkPackage === '@storybook/svelte-webpack5') {
         disclaimer = dedent`\n\n
-          ${chalk.bold('Important')}: We've detected you are using Storybook in a SvelteKit project.
+          ${picocolors.bold(
+            'Important'
+          )}: We've detected you are using Storybook in a SvelteKit project.
   
-          This migration is set to update your project to use the ${chalk.magenta(
+          This migration is set to update your project to use the ${picocolors.magenta(
             '@storybook/svelte-webpack5'
-          )} framework, but Storybook provides a framework package specifically for SvelteKit projects: ${chalk.magenta(
+          )} framework, but Storybook provides a framework package specifically for SvelteKit projects: ${picocolors.magenta(
             '@storybook/sveltekit'
           )}.
   
           This package provides a better experience for SvelteKit users, however it is only compatible with the Vite builder, so we can't automigrate for you, as you are using the Webpack builder.
           
-          If you are interested in using this package, see: ${chalk.yellow(
+          If you are interested in using this package, see: ${picocolors.yellow(
             'https://github.com/storybookjs/storybook/blob/next/code/frameworks/sveltekit/README.md'
           )}
         `;
       } else {
-        migrationSteps += `- Remove the ${chalk.yellow(
+        migrationSteps += `- Remove the ${picocolors.yellow(
           `${renderer}Options`
-        )} field from ${chalk.blue(mainConfigPath)}.
-        More info: ${chalk.yellow(
+        )} field from ${picocolors.blue(mainConfigPath)}.
+        More info: ${picocolors.yellow(
           'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#vite-builder-uses-vite-config-automatically'
         )}\n`;
         disclaimer = dedent`\n\n
-        The ${chalk.magenta(
+        The ${picocolors.magenta(
           '@storybook/sveltekit'
-        )} package provides great user experience for SvelteKit users, and we highly recommend you to read more about it at ${chalk.yellow(
+        )} package provides great user experience for SvelteKit users, and we highly recommend you to read more about it at ${picocolors.yellow(
           'https://github.com/storybookjs/storybook/blob/next/code/frameworks/sveltekit/README.md'
         )}
         `;
@@ -406,14 +418,14 @@ export const newFrameworks: Fix<NewFrameworkRunOptions> = {
 
       Storybook 7 introduced the concept of frameworks, which abstracts configuration for renderers (e.g. React, Vue), builders (e.g. Webpack, Vite) and defaults to make integrations easier.
 
-      Your project should be updated to use Storybook's framework: ${chalk.magenta(
+      Your project should be updated to use Storybook's framework: ${picocolors.magenta(
         frameworkPackage
       )}. We can attempt to do this for you automatically.
 
       Here are the steps this migration will do to migrate your project:
       ${migrationSteps}
 
-      To learn more about the new framework format, see: ${chalk.yellow(
+      To learn more about the new framework format, see: ${picocolors.yellow(
         'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-framework-api'
       )}${disclaimer}
     `;
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/prompt-remove-react.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/prompt-remove-react.test.ts
index 2e6c644bed54..07ed5571ac09 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/prompt-remove-react.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/prompt-remove-react.test.ts
@@ -3,6 +3,7 @@ import { describe, expect, it, vi } from 'vitest';
 import type { JsPackageManager } from 'storybook/internal/common';
 import type { StorybookConfig } from 'storybook/internal/types';
 
+// eslint-disable-next-line depend/ban-dependencies
 import { glob } from 'glob';
 
 import { removeReactDependency } from './prompt-remove-react';
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/react-docgen.ts b/code/lib/cli-storybook/src/automigrate/fixes/react-docgen.ts
index bec42b612a46..86b67df2509f 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/react-docgen.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/react-docgen.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 
 import { getRendererName, updateMainConfig } from '../helpers/mainConfigFile';
@@ -47,25 +47,25 @@ export const reactDocgen: Fix<Options> = {
     `;
     } else {
       return dedent`
-      Since Storybook 8.0, ${chalk.cyan(
+      Since Storybook 8.0, ${picocolors.cyan(
         'react-docgen'
-      )} is now the default for generating component controls, replacing ${chalk.cyan(
+      )} is now the default for generating component controls, replacing ${picocolors.cyan(
         'react-docgen-typescript'
       )}. 
       This offers better performance and suits most cases. 
       However, for complex TypeScript types or specific type features, the generated controls might not be as precise.
       
       For more on this change, check the migration guide: 
-      ${chalk.yellow(
+      ${picocolors.yellow(
         'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-docgen-component-analysis-by-default'
       )}
       
       For known "react-docgen" limitations, see: 
-      ${chalk.yellow('https://github.com/storybookjs/storybook/issues/26606')}
+      ${picocolors.yellow('https://github.com/storybookjs/storybook/issues/26606')}
       
-      Press Y to revert to ${chalk.cyan('react-docgen-typescript')}, press N to use ${chalk.cyan(
-        'react-docgen'
-      )}
+      Press Y to revert to ${picocolors.cyan(
+        'react-docgen-typescript'
+      )}, press N to use ${picocolors.cyan('react-docgen')}
     `;
     }
   },
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/remove-argtypes-regex.ts b/code/lib/cli-storybook/src/automigrate/fixes/remove-argtypes-regex.ts
index ec84504127c8..bec9a2cb0d13 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/remove-argtypes-regex.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/remove-argtypes-regex.ts
@@ -4,7 +4,7 @@ import { babelParse } from 'storybook/internal/csf-tools';
 
 import * as babel from '@babel/core';
 import type { BabelFile, NodePath } from '@babel/core';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 
 import type { Fix } from '../types';
@@ -40,7 +40,7 @@ export const removeArgtypesRegex: Fix<{ argTypesRegex: NodePath; previewConfigPa
   },
   prompt({ argTypesRegex, previewConfigPath }) {
     return dedent`
-      ${chalk.bold('Attention')}: We've detected that you're using argTypesRegex:
+      ${picocolors.bold('Attention')}: We've detected that you're using argTypesRegex:
       
       ${argTypesRegex.buildCodeFrameError(`${previewConfigPath}`).message}
 
@@ -53,13 +53,13 @@ export const removeArgtypesRegex: Fix<{ argTypesRegex: NodePath; previewConfigPa
       (fn) function to mock your component's methods instead.
       
       Use the following command to check for implied mocked actions in your play functions:
-      ${chalk.cyan(
+      ${picocolors.cyan(
         'npx storybook migrate find-implicit-spies --glob="**/*.stories.@(js|jsx|ts|tsx)"'
       )}
        
       Then, refer to our docs to migrate your play functions to Storybook 8: 
-      ${chalk.yellow(
-        'https://storybook.js.org/docs/8.0/essentials/actions#via-storybooktest-fn-spy-function'
+      ${picocolors.yellow(
+        'https://storybook.js.org/docs/essentials/actions#via-storybooktest-fn-spy-function'
       )}
     `;
   },
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/remove-global-client-apis.ts b/code/lib/cli-storybook/src/automigrate/fixes/remove-global-client-apis.ts
index e7caf9027d4b..36213c09e953 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/remove-global-client-apis.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/remove-global-client-apis.ts
@@ -1,6 +1,6 @@
 import { readFile } from 'node:fs/promises';
 
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 
 import type { Fix } from '../types';
@@ -48,16 +48,18 @@ export const removedGlobalClientAPIs: Fix<GlobalClientAPIOptions> = {
   },
   prompt({ usedAPIs, previewPath }) {
     return dedent`
-      ${chalk.bold(
-        chalk.red('Attention')
+      ${picocolors.bold(
+        picocolors.red('Attention')
       )}: We could not automatically make this change. You'll need to do it manually.
 
-      The following APIs (used in "${chalk.yellow(previewPath)}") have been removed from Storybook:
+      The following APIs (used in "${picocolors.yellow(
+        previewPath
+      )}") have been removed from Storybook:
       
-      ${usedAPIs.map((api) => `- ${chalk.cyan(api)}`).join('\n')}
+      ${usedAPIs.map((api) => `- ${picocolors.cyan(api)}`).join('\n')}
 
       Please see the migration guide for more information:
-      ${chalk.yellow(
+      ${picocolors.yellow(
         'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#removed-global-client-apis'
       )}
     `;
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/remove-jest-testing-library.ts b/code/lib/cli-storybook/src/automigrate/fixes/remove-jest-testing-library.ts
index 928ace2519bf..b7de9df0afc6 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/remove-jest-testing-library.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/remove-jest-testing-library.ts
@@ -2,7 +2,7 @@ import { getStorybookVersionSpecifier } from 'storybook/internal/cli';
 
 import { runCodemod } from '@storybook/codemod';
 
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import prompts from 'prompts';
 import { dedent } from 'ts-dedent';
 
@@ -24,13 +24,13 @@ export const removeJestTestingLibrary: Fix<{ incompatiblePackages: string[] }> =
   },
   prompt({ incompatiblePackages }) {
     return dedent`
-      ${chalk.bold(
+      ${picocolors.bold(
         'Attention'
       )}: We've detected that you're using the following packages which are known to be incompatible since Storybook 8:
 
-      ${incompatiblePackages.map((name) => `- ${chalk.cyan(`${name}`)}`).join('\n')}
+      ${incompatiblePackages.map((name) => `- ${picocolors.cyan(`${name}`)}`).join('\n')}
       
-      We will uninstall them for you and install ${chalk.cyan('@storybook/test')} instead.
+      We will uninstall them for you and install ${picocolors.cyan('@storybook/test')} instead.
 
       Also, we can help you migrate your stories to use the new package.
     `;
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/remove-legacymdx1.ts b/code/lib/cli-storybook/src/automigrate/fixes/remove-legacymdx1.ts
index 851aae16a689..4482cf99f079 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/remove-legacymdx1.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/remove-legacymdx1.ts
@@ -31,6 +31,7 @@ export const removeLegacyMDX1: Fix<RemoveLegacyMDX1Options> = {
     return null;
   },
 
+  // TODO: This is a temporary fix to prevent a 500 error when running the migration and the user clicks the link in the prompt to preview the docs. We'll probably need to account for future releases.
   prompt({}) {
     return dedent`
       You have features.legacyMdx1 in your Storybook main config file. This feature has been removed. Shall we remove it from your Storybook main config file?
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/sb-binary.ts b/code/lib/cli-storybook/src/automigrate/fixes/sb-binary.ts
index 36dcdc32cc11..e680f93da772 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/sb-binary.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/sb-binary.ts
@@ -1,7 +1,7 @@
 import { getStorybookVersionSpecifier } from 'storybook/internal/cli';
 import type { PackageJsonWithDepsAndDevDeps } from 'storybook/internal/common';
 
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 
 import type { Fix } from '../types';
@@ -50,10 +50,10 @@ export const sbBinary: Fix<SbBinaryRunOptions> = {
   },
 
   prompt({ storybookVersion, hasSbBinary, hasStorybookBinary }) {
-    const sbFormatted = chalk.cyan(`Storybook ${storybookVersion}`);
+    const sbFormatted = picocolors.cyan(`Storybook ${storybookVersion}`);
 
     const storybookBinaryMessage = !hasStorybookBinary
-      ? `We've detected you are using ${sbFormatted} without Storybook's ${chalk.magenta(
+      ? `We've detected you are using ${sbFormatted} without Storybook's ${picocolors.magenta(
           'storybook'
         )} binary. Starting in Storybook 7.0, it has to be installed.`
       : '';
@@ -66,7 +66,7 @@ export const sbBinary: Fix<SbBinaryRunOptions> = {
       ${storybookBinaryMessage}
       ${extraMessage}
 
-      More info: ${chalk.yellow(
+      More info: ${picocolors.yellow(
         'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#start-storybook--build-storybook-binaries-removed'
       )}
       `;
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/sb-scripts.ts b/code/lib/cli-storybook/src/automigrate/fixes/sb-scripts.ts
index af80c94c394e..d3c34e8ef8b8 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/sb-scripts.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/sb-scripts.ts
@@ -1,7 +1,7 @@
 import type { PackageJsonWithDepsAndDevDeps } from 'storybook/internal/common';
 import type { PackageJson } from 'storybook/internal/types';
 
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import semver from 'semver';
 import { dedent } from 'ts-dedent';
 
@@ -101,16 +101,16 @@ export const sbScripts: Fix<SbScriptsRunOptions> = {
   },
 
   prompt({ storybookVersion, storybookScripts }) {
-    const sbFormatted = chalk.cyan(`Storybook ${storybookVersion}`);
+    const sbFormatted = picocolors.cyan(`Storybook ${storybookVersion}`);
 
     const newScriptsMessage = Object.keys(storybookScripts).reduce((acc: string[], scriptKey) => {
       acc.push(
         [
-          chalk.bold(scriptKey),
+          picocolors.bold(scriptKey),
           'from:',
-          chalk.cyan(storybookScripts[scriptKey].before),
+          picocolors.cyan(storybookScripts[scriptKey].before),
           'to:',
-          chalk.cyan(storybookScripts[scriptKey].after),
+          picocolors.cyan(storybookScripts[scriptKey].after),
         ].join('\n')
       );
       return acc;
@@ -118,16 +118,16 @@ export const sbScripts: Fix<SbScriptsRunOptions> = {
 
     return dedent`
       We've detected you are using ${sbFormatted} with scripts from previous versions of Storybook.
-      Starting in Storybook 7, the ${chalk.yellow('start-storybook')} and ${chalk.yellow(
+      Starting in Storybook 7, the ${picocolors.yellow('start-storybook')} and ${picocolors.yellow(
         'build-storybook'
-      )} binaries have changed to ${chalk.magenta('storybook dev')} and ${chalk.magenta(
+      )} binaries have changed to ${picocolors.magenta('storybook dev')} and ${picocolors.magenta(
         'storybook build'
       )} respectively.
       In order to work with ${sbFormatted}, your storybook scripts have to be adjusted to use the binary. We can adjust them for you:
 
       ${newScriptsMessage.join('\n\n')}
 
-      In case this migration did not cover all of your scripts, or you'd like more info: ${chalk.yellow(
+      In case this migration did not cover all of your scripts, or you'd like more info: ${picocolors.yellow(
         'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#start-storybook--build-storybook-binaries-removed'
       )}
       `;
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/storyshots-migration.ts b/code/lib/cli-storybook/src/automigrate/fixes/storyshots-migration.ts
index 7024a4763c6f..b6836584edd3 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/storyshots-migration.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/storyshots-migration.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 
 import type { Fix } from '../types';
@@ -21,12 +21,12 @@ export const storyshotsMigration: Fix = {
   },
   prompt() {
     return dedent`
-      ${chalk.bold(
+      ${picocolors.bold(
         'Attention'
       )}: Storyshots is now officially deprecated, is no longer being maintained, and was removed in Storybook 8. 
       
       We recommend following the migration guide we've prepared to help you during this transition period:
-      ${chalk.yellow('https://storybook.js.org/docs/writing-tests/storyshots-migration-guide')}
+      ${picocolors.yellow('https://storybook.js.org/docs/writing-tests/storyshots-migration-guide')}
     `;
   },
 };
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/upgrade-storybook-related-dependencies.ts b/code/lib/cli-storybook/src/automigrate/fixes/upgrade-storybook-related-dependencies.ts
index 0df85cb43635..40200ab9ac41 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/upgrade-storybook-related-dependencies.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/upgrade-storybook-related-dependencies.ts
@@ -1,7 +1,7 @@
 import type { JsPackageManager } from 'storybook/internal/common';
 import { isCorePackage } from 'storybook/internal/common';
 
-import { cyan, yellow } from 'chalk';
+import { cyan, yellow } from 'picocolors';
 import { gt } from 'semver';
 import { dedent } from 'ts-dedent';
 
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/vite-config-file.ts b/code/lib/cli-storybook/src/automigrate/fixes/vite-config-file.ts
index 6afc31311663..84201fd64852 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/vite-config-file.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/vite-config-file.ts
@@ -97,6 +97,7 @@ export const viteConfigFile = {
     return null;
   },
 
+  // TODO: This is a temporary fix to prevent a 500 error when running the migration and the user clicks the link in the prompt to preview the docs. We'll probably need to account for future releases.
   prompt({ existed, plugins }) {
     if (existed) {
       return dedent`
@@ -108,7 +109,7 @@ export const viteConfigFile = {
         If you already have these plugins, you can ignore this message.
 
         You can find more information on how to do this here:
-        https://storybook.js.org/docs/8.0/migration-guide/#missing-viteconfigjs-file
+        https://storybook.js.org/docs/8.0/migration-guide#missing-viteconfigjs-file
 
         This change was necessary to support newer versions of Vite.
       `;
@@ -118,7 +119,7 @@ export const viteConfigFile = {
       Please add a vite.config.js file to your project root.
 
       You can find more information on how to do this here:
-      https://storybook.js.org/docs/8.0/migration-guide/#missing-viteconfigjs-file
+      https://storybook.js.org/docs/8.0/migration-guide#missing-viteconfigjs-file
 
       This change was necessary to support newer versions of Vite.
     `;
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/vta.ts b/code/lib/cli-storybook/src/automigrate/fixes/vta.ts
index f2c174bd9d01..47cd1a9fe0ff 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/vta.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/vta.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 
 import { getAddonNames, updateMainConfig } from '../helpers/mainConfigFile';
@@ -31,8 +31,8 @@ export const vta: Fix<Options> = {
     return dedent`
       New to Storybook 8: Storybook's Visual Tests addon helps you catch unintentional changes/bugs in your stories. The addon is powered by Chromatic, a cloud-based testing tool developed by Storybook's core team.
 
-      Learn more: ${chalk.yellow('https://storybook.js.org/docs/writing-tests/visual-testing')}
-      
+      Learn more: ${picocolors.yellow('https://storybook.js.org/docs/writing-tests/visual-testing')}
+
       Install Visual Tests addon in your project?
     `;
   },
@@ -42,7 +42,7 @@ export const vta: Fix<Options> = {
       const packageJson = await packageManager.retrievePackageJson();
       await packageManager.addDependencies(
         { installAsDevDependencies: true, skipInstall, packageJson },
-        [`@chromatic-com/storybook@^1`]
+        [`@chromatic-com/storybook@^3`]
       );
 
       await updateMainConfig({ mainConfigPath, dryRun: !!dryRun }, async (main) => {
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/vue3.ts b/code/lib/cli-storybook/src/automigrate/fixes/vue3.ts
index aa04378d0622..1ce497a8cee7 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/vue3.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/vue3.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import semver from 'semver';
 import { dedent } from 'ts-dedent';
 
@@ -35,17 +35,17 @@ export const vue3: Fix<Vue3RunOptions> = {
   },
 
   prompt({ vueVersion, storybookVersion }) {
-    const vueFormatted = chalk.cyan(`Vue ${vueVersion}`);
-    const sbFormatted = chalk.cyan(`Storybook ${storybookVersion}`);
+    const vueFormatted = picocolors.cyan(`Vue ${vueVersion}`);
+    const sbFormatted = picocolors.cyan(`Storybook ${storybookVersion}`);
     return dedent`
       We've detected you are running ${vueFormatted} with Storybook.
       ${sbFormatted} runs webpack4 by default, which is incompatible.
 
-      In order to work with your version of Vue, we need to install Storybook's ${chalk.cyan(
+      In order to work with your version of Vue, we need to install Storybook's ${picocolors.cyan(
         'webpack5 builder'
       )}.
 
-      More info: ${chalk.yellow(
+      More info: ${picocolors.yellow(
         'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#vue3-upgrade'
       )}
     `;
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/webpack5-compiler-setup.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/webpack5-compiler-setup.test.ts
index 5cf952a3a5c4..d4eb41b693dd 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/webpack5-compiler-setup.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/webpack5-compiler-setup.test.ts
@@ -36,8 +36,8 @@ vi.mock('prompts', () => {
   };
 });
 
-// mock chalk yellow and cyan
-vi.mock('chalk', () => {
+// mock picocolors yellow and cyan
+vi.mock('picocolors', () => {
   return {
     default: {
       yellow: (str: string) => str,
@@ -415,7 +415,7 @@ describe('prompt', () => {
         In the next step, Storybook will install @storybook/addon-webpack5-compiler-swc and will add it to your addons list in your Storybook config.
 
         After the migration, you can switch Webpack5 compilers by swapping the addon in your project.
-        You can find more information here: https://storybook.js.org/docs/8.0/builders/webpack#compiler-support"
+        You can find more information here: https://storybook.js.org/docs/builders/webpack#compiler-support"
       `);
   });
 
@@ -434,7 +434,7 @@ describe('prompt', () => {
         In the next step, Storybook will install @storybook/addon-webpack5-compiler-swc and will add it to your addons list in your Storybook config.
 
         After the migration, you can switch Webpack5 compilers by swapping the addon in your project.
-        You can find more information here: https://storybook.js.org/docs/8.0/builders/webpack#compiler-support"
+        You can find more information here: https://storybook.js.org/docs/builders/webpack#compiler-support"
       `);
   });
 
@@ -454,7 +454,7 @@ describe('prompt', () => {
         In the next step, Storybook will ask you to choose a compiler to automatically set it up for you.
 
         After the migration, you can switch Webpack5 compilers by swapping the addon in your project.
-        You can find more information here: https://storybook.js.org/docs/8.0/builders/webpack#compiler-support"
+        You can find more information here: https://storybook.js.org/docs/builders/webpack#compiler-support"
       `);
   });
 
@@ -494,7 +494,7 @@ describe('prompt', () => {
         In the next step, Storybook will install @storybook/addon-webpack5-compiler-swc and will add it to your addons list in your Storybook config.
 
         After the migration, you can switch Webpack5 compilers by swapping the addon in your project.
-        You can find more information here: https://storybook.js.org/docs/8.0/builders/webpack#compiler-support"
+        You can find more information here: https://storybook.js.org/docs/builders/webpack#compiler-support"
       `);
   });
 
@@ -514,7 +514,7 @@ describe('prompt', () => {
         In the next step, Storybook will ask you to choose a compiler to automatically set it up for you.
 
         After the migration, you can switch Webpack5 compilers by swapping the addon in your project.
-        You can find more information here: https://storybook.js.org/docs/8.0/builders/webpack#compiler-support"
+        You can find more information here: https://storybook.js.org/docs/builders/webpack#compiler-support"
       `);
   });
 });
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/webpack5-compiler-setup.ts b/code/lib/cli-storybook/src/automigrate/fixes/webpack5-compiler-setup.ts
index 2462e02ff159..e0c5f0e9cfc7 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/webpack5-compiler-setup.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/webpack5-compiler-setup.ts
@@ -8,7 +8,7 @@ import {
 import { frameworkPackages } from 'storybook/internal/common';
 import type { SupportedFrameworks } from 'storybook/internal/types';
 
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import prompts from 'prompts';
 import { dedent } from 'ts-dedent';
 
@@ -115,23 +115,23 @@ export const webpack5CompilerSetup = {
     if (shouldRemoveSWCFlag) {
       message.push(dedent`
       We need to update your Storybook configuration for Webpack 5.
-      The ${chalk.yellow('framework.options.builder.useSWC')} flag will be removed.`);
+      The ${picocolors.yellow('framework.options.builder.useSWC')} flag will be removed.`);
     }
 
     if (isNextJs) {
       message.push(dedent`
       Storybook now detects whether it should use Babel or SWC as a compiler by applying the same logic as Next.js itself:\n
-        - If you have a ${chalk.yellow('.babelrc')} (or ${chalk.yellow(
+        - If you have a ${picocolors.yellow('.babelrc')} (or ${picocolors.yellow(
           'babel.config.js'
         )}) file in your project, Storybook will use Babel as the compiler.
-        - If you have a ${chalk.yellow('.babelrc')} (or ${chalk.yellow(
+        - If you have a ${picocolors.yellow('.babelrc')} (or ${picocolors.yellow(
           'babel.config.js'
         )}) file in your project and you have set 
-          ${chalk.yellow('experimental.forceSwcTransforms = true')} in your ${chalk.yellow(
-            'next.config.js'
-          )} file, 
+          ${picocolors.yellow(
+            'experimental.forceSwcTransforms = true'
+          )} in your ${picocolors.yellow('next.config.js')} file, 
           Storybook will use SWC as the compiler.
-        - If you don't have a ${chalk.yellow('.babelrc')} (or ${chalk.yellow(
+        - If you don't have a ${picocolors.yellow('.babelrc')} (or ${picocolors.yellow(
           'babel.config.js'
         )}) file in your project, Storybook will use SWC as the compiler.
       `);
@@ -142,8 +142,8 @@ export const webpack5CompilerSetup = {
         - SWC:  Fast and easy to configure. Ideal if you want faster builds and have a straightforward configuration without the need for Babel's extensibility.\n
       In the next step, Storybook will ask you to choose a compiler to automatically set it up for you.\n
       After the migration, you can switch Webpack5 compilers by swapping the addon in your project.
-      You can find more information here: ${chalk.yellow(
-        'https://storybook.js.org/docs/8.0/builders/webpack#compiler-support'
+      You can find more information here: ${picocolors.yellow(
+        'https://storybook.js.org/docs/builders/webpack#compiler-support'
       )}
       `);
     } else {
@@ -152,8 +152,8 @@ export const webpack5CompilerSetup = {
       We have detected, that you want to use SWC as the compiler for Webpack5.\n
       In the next step, Storybook will install @storybook/addon-webpack5-compiler-swc and will add it to your addons list in your Storybook config.\n
       After the migration, you can switch Webpack5 compilers by swapping the addon in your project.
-      You can find more information here: ${chalk.yellow(
-        'https://storybook.js.org/docs/8.0/builders/webpack#compiler-support'
+      You can find more information here: ${picocolors.yellow(
+        'https://storybook.js.org/docs/builders/webpack#compiler-support'
       )}
       `);
     }
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/webpack5.ts b/code/lib/cli-storybook/src/automigrate/fixes/webpack5.ts
index ff27a1479590..da33295d49f9 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/webpack5.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/webpack5.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import semver from 'semver';
 import { dedent } from 'ts-dedent';
 
@@ -43,17 +43,17 @@ export const webpack5 = {
   },
 
   prompt({ webpackVersion }) {
-    const webpackFormatted = chalk.cyan(`webpack ${webpackVersion}`);
+    const webpackFormatted = picocolors.cyan(`webpack ${webpackVersion}`);
 
     return dedent`
       We've detected you're running ${webpackFormatted}.
       Your Storybook's main.js files specifies webpack4, which is incompatible.
       
-      To run Storybook in webpack5-mode, we can install Storybook's ${chalk.cyan(
+      To run Storybook in webpack5-mode, we can install Storybook's ${picocolors.cyan(
         '@storybook/builder-webpack5'
       )} for you.
 
-      More info: ${chalk.yellow(
+      More info: ${picocolors.yellow(
         'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#webpack-5-manager-build'
       )}
     `;
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/wrap-require.ts b/code/lib/cli-storybook/src/automigrate/fixes/wrap-require.ts
index 723a2874031a..7a2b09e3315a 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/wrap-require.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/wrap-require.ts
@@ -1,7 +1,7 @@
 import { detectPnp } from 'storybook/internal/cli';
 import { readConfig } from 'storybook/internal/csf-tools';
 
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 
 import { updateMainConfig } from '../helpers/mainConfigFile';
@@ -50,14 +50,14 @@ export const wrapRequire: Fix<WrapRequireRunOptions> = {
   },
 
   prompt({ storybookVersion, isStorybookInMonorepo }) {
-    const sbFormatted = chalk.cyan(`Storybook ${storybookVersion}`);
+    const sbFormatted = picocolors.cyan(`Storybook ${storybookVersion}`);
 
     return dedent`We have detected that you're using ${sbFormatted} in a ${
       isStorybookInMonorepo ? 'monorepo' : 'PnP'
     } project. 
     For Storybook to work correctly, some fields in your main config must be updated. We can do this for you automatically.
     
-    More info: https://storybook.js.org/docs/react/faq#how-do-i-fix-module-resolution-in-special-environments`;
+    More info: https://storybook.js.org/docs/faq#how-do-i-fix-module-resolution-in-special-environments`;
   },
 
   async run({ dryRun, mainConfigPath, result }) {
diff --git a/code/lib/cli-storybook/src/automigrate/helpers/checkWebpack5Builder.ts b/code/lib/cli-storybook/src/automigrate/helpers/checkWebpack5Builder.ts
index cc6a977454dc..6e27a27f513c 100644
--- a/code/lib/cli-storybook/src/automigrate/helpers/checkWebpack5Builder.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/checkWebpack5Builder.ts
@@ -1,6 +1,6 @@
 import type { StorybookConfigRaw } from 'storybook/internal/types';
 
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import semver from 'semver';
 import { dedent } from 'ts-dedent';
 
@@ -22,11 +22,11 @@ export const checkWebpack5Builder = async ({
 
         To upgrade to the latest stable release, run this from your project directory:
 
-        ${chalk.cyan('npx storybook@latest upgrade')}
+        ${picocolors.cyan('npx storybook@latest upgrade')}
 
         To upgrade to the latest pre-release, run this from your project directory:
 
-        ${chalk.cyan('npx storybook@next upgrade')}
+        ${picocolors.cyan('npx storybook@next upgrade')}
       `.trim()
     );
     return null;
diff --git a/code/lib/cli-storybook/src/automigrate/helpers/cleanLog.ts b/code/lib/cli-storybook/src/automigrate/helpers/cleanLog.ts
index 7cb8c864197a..2f8a7b7ed856 100644
--- a/code/lib/cli-storybook/src/automigrate/helpers/cleanLog.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/cleanLog.ts
@@ -13,7 +13,7 @@ export const ansiRegex = ({ onlyFirst = false } = {}) => {
 
 export const cleanLog = (str: string) =>
   str
-    // remove chalk ANSI colors
+    // remove picocolors ANSI colors
     .replace(ansiRegex(), '')
     // fix boxen output
     .replace(/╮│/g, '╮\n│')
diff --git a/code/lib/cli-storybook/src/automigrate/helpers/getMigrationSummary.test.ts b/code/lib/cli-storybook/src/automigrate/helpers/getMigrationSummary.test.ts
index 62883e69bf1e..d06750cd862a 100644
--- a/code/lib/cli-storybook/src/automigrate/helpers/getMigrationSummary.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/getMigrationSummary.test.ts
@@ -110,7 +110,7 @@ describe('getMigrationSummary', () => {
 
       The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook.
 
-      Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/docs/8.0/migration-guide
+      Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/docs/migration-guide
       And reach out on Discord if you need help: https://discord.gg/storybook"
     `);
   });
@@ -130,7 +130,7 @@ describe('getMigrationSummary', () => {
 
       The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook.
 
-      Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/docs/8.0/migration-guide
+      Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/docs/migration-guide
       And reach out on Discord if you need help: https://discord.gg/storybook"
     `);
   });
@@ -150,7 +150,7 @@ describe('getMigrationSummary', () => {
 
       The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook.
 
-      Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/docs/8.0/migration-guide
+      Please check the changelog and migration guide for manual migrations and more information: https://storybook.js.org/docs/migration-guide
       And reach out on Discord if you need help: https://discord.gg/storybook"
     `);
   });
diff --git a/code/lib/cli-storybook/src/automigrate/helpers/getMigrationSummary.ts b/code/lib/cli-storybook/src/automigrate/helpers/getMigrationSummary.ts
index 3aaaf7542cd6..c8974101533d 100644
--- a/code/lib/cli-storybook/src/automigrate/helpers/getMigrationSummary.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/getMigrationSummary.ts
@@ -1,7 +1,7 @@
 import { type InstallationMetadata } from 'storybook/internal/common';
 
 import boxen from 'boxen';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 
 import type { FixSummary } from '../types';
@@ -17,34 +17,36 @@ function getGlossaryMessages(
 ) {
   const messages = [];
   if (fixSummary.succeeded.length > 0) {
-    messages.push(chalk.bold('Successful migrations:'));
-    messages.push(fixSummary.succeeded.map((m) => chalk.green(m)).join(', '));
+    messages.push(picocolors.bold('Successful migrations:'));
+    messages.push(fixSummary.succeeded.map((m) => picocolors.green(m)).join(', '));
   }
 
   if (Object.keys(fixSummary.failed).length > 0) {
-    messages.push(chalk.bold('Failed migrations:'));
+    messages.push(picocolors.bold('Failed migrations:'));
     messages.push(
       Object.entries(fixSummary.failed)
         .map(([id, error]) => {
-          return `${chalk.redBright(id)}:\n${error}`;
+          return `${picocolors.bold(picocolors.red(id))}:\n${error}`;
         })
         .join('\n')
     );
-    messages.push(`You can find the full logs in ${chalk.cyan(logFile)}`);
+    messages.push(`You can find the full logs in ${picocolors.cyan(logFile)}`);
   }
 
   if (fixSummary.manual.length > 0) {
-    messages.push(chalk.bold('Manual migrations:'));
+    messages.push(picocolors.bold('Manual migrations:'));
     messages.push(
       fixSummary.manual
-        .map((m) => (fixResults[m] === FixStatus.MANUAL_SUCCEEDED ? chalk.green(m) : chalk.blue(m)))
+        .map((m) =>
+          fixResults[m] === FixStatus.MANUAL_SUCCEEDED ? picocolors.green(m) : picocolors.blue(m)
+        )
         .join(', ')
     );
   }
 
   if (fixSummary.skipped.length > 0) {
-    messages.push(chalk.bold('Skipped migrations:'));
-    messages.push(fixSummary.skipped.map((m) => chalk.cyan(m)).join(', '));
+    messages.push(picocolors.bold('Skipped migrations:'));
+    messages.push(fixSummary.skipped.map((m) => picocolors.cyan(m)).join(', '));
   }
 
   return messages;
@@ -64,16 +66,16 @@ export function getMigrationSummary({
   const messages = [];
   messages.push(getGlossaryMessages(fixSummary, fixResults, logFile).join(messageDivider));
 
-  messages.push(dedent`If you'd like to run the migrations again, you can do so by running '${chalk.cyan(
+  messages.push(dedent`If you'd like to run the migrations again, you can do so by running '${picocolors.cyan(
     'npx storybook automigrate'
   )}'
     
     The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to the latest version of Storybook.
     
-    Please check the changelog and migration guide for manual migrations and more information: ${chalk.yellow(
-      'https://storybook.js.org/docs/8.0/migration-guide'
+    Please check the changelog and migration guide for manual migrations and more information: ${picocolors.yellow(
+      'https://storybook.js.org/docs/migration-guide'
     )}
-    And reach out on Discord if you need help: ${chalk.yellow('https://discord.gg/storybook')}
+    And reach out on Discord if you need help: ${picocolors.yellow('https://discord.gg/storybook')}
   `);
 
   const hasNoFixes = Object.values(fixResults).every((r) => r === FixStatus.UNNECESSARY);
diff --git a/code/lib/cli-storybook/src/automigrate/helpers/mainConfigFile.ts b/code/lib/cli-storybook/src/automigrate/helpers/mainConfigFile.ts
index bf9daf36c7ae..57aa4bf7ce07 100644
--- a/code/lib/cli-storybook/src/automigrate/helpers/mainConfigFile.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/mainConfigFile.ts
@@ -15,7 +15,7 @@ import type { ConfigFile } from 'storybook/internal/csf-tools';
 import { readConfig, writeConfig as writeConfigFile } from 'storybook/internal/csf-tools';
 import type { StorybookConfig, StorybookConfigRaw } from 'storybook/internal/types';
 
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 
 const logger = console;
@@ -94,7 +94,9 @@ export const getBuilderPackageName = (mainConfig?: StorybookConfigRaw) => {
 export const getFrameworkOptions = (
   mainConfig?: StorybookConfigRaw
 ): Record<string, any> | null => {
-  return typeof mainConfig?.framework === 'string' ? null : mainConfig?.framework?.options ?? null;
+  return typeof mainConfig?.framework === 'string'
+    ? null
+    : (mainConfig?.framework?.options ?? null);
 };
 
 /**
@@ -144,7 +146,7 @@ export const getStorybookData = async ({
     mainConfig = (await loadMainConfig({ configDir, noCache: true })) as StorybookConfigRaw;
   } catch (err) {
     throw new Error(
-      dedent`Unable to find or evaluate ${chalk.blue(mainConfigPath)}: ${String(err)}`
+      dedent`Unable to find or evaluate ${picocolors.blue(mainConfigPath)}: ${String(err)}`
     );
   }
 
@@ -187,13 +189,13 @@ export const updateMainConfig = async (
     }
   } catch (e) {
     logger.info(
-      `❌ The migration failed to update your ${chalk.blue(
+      `❌ The migration failed to update your ${picocolors.blue(
         mainConfigPath
       )} on your behalf because of the following error:
         ${e}\n`
     );
     logger.info(
-      `⚠️ Storybook automigrations are based on AST parsing and it's possible that your ${chalk.blue(
+      `⚠️ Storybook automigrations are based on AST parsing and it's possible that your ${picocolors.blue(
         mainConfigPath
       )} file contains a non-standard format (e.g. your export is not an object) or that there was an error when parsing dynamic values (e.g. "require" calls, or usage of environment variables). When your main config is non-standard, automigrations are unfortunately not possible. Please follow the instructions given previously and follow the documentation to make the updates manually.`
     );
diff --git a/code/lib/cli-storybook/src/automigrate/helpers/new-frameworks-utils.ts b/code/lib/cli-storybook/src/automigrate/helpers/new-frameworks-utils.ts
index a4ab6ee34a4f..280bb2cf5034 100644
--- a/code/lib/cli-storybook/src/automigrate/helpers/new-frameworks-utils.ts
+++ b/code/lib/cli-storybook/src/automigrate/helpers/new-frameworks-utils.ts
@@ -77,14 +77,14 @@ export const detectBuilderInfo = async ({
   const builderPackageName = getBuilderPackageName(mainConfig);
   const frameworkPackageName = getFrameworkPackageName(mainConfig) as string;
 
-  let builderOptions = typeof builder !== 'string' ? builder?.options ?? {} : {};
+  let builderOptions = typeof builder !== 'string' ? (builder?.options ?? {}) : {};
 
   if (builderPackageName) {
     builderOrFrameworkName = builderPackageName;
   } else if (framework) {
     if (Object.keys(frameworkPackages).includes(frameworkPackageName)) {
       builderOrFrameworkName = frameworkPackageName;
-      builderOptions = typeof framework === 'object' ? framework.options?.builder ?? {} : {};
+      builderOptions = typeof framework === 'object' ? (framework.options?.builder ?? {}) : {};
     }
   }
 
diff --git a/code/lib/cli-storybook/src/automigrate/index.ts b/code/lib/cli-storybook/src/automigrate/index.ts
index ff727783dff3..9d98d97d7013 100644
--- a/code/lib/cli-storybook/src/automigrate/index.ts
+++ b/code/lib/cli-storybook/src/automigrate/index.ts
@@ -11,7 +11,7 @@ import {
 } from 'storybook/internal/common';
 
 import boxen from 'boxen';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import prompts from 'prompts';
 import semver from 'semver';
 import invariant from 'tiny-invariant';
@@ -61,7 +61,7 @@ const cleanup = () => {
 
 const logAvailableMigrations = () => {
   const availableFixes = allFixes
-    .map((f) => chalk.yellow(f.id))
+    .map((f) => picocolors.yellow(f.id))
     .map((x) => `- ${x}`)
     .join('\n');
 
@@ -154,7 +154,7 @@ export const automigrate = async ({
   const fixes: Fix[] = fixId ? selectedFixes.filter((f) => f.id === fixId) : selectedFixes;
 
   if (fixId && fixes.length === 0) {
-    logger.info(`📭 No migrations found for ${chalk.magenta(fixId)}.`);
+    logger.info(`📭 No migrations found for ${picocolors.magenta(fixId)}.`);
     logAvailableMigrations();
     return null;
   }
@@ -265,7 +265,7 @@ export async function runFixes({
         });
       }
     } catch (error) {
-      logger.info(`⚠️  failed to check fix ${chalk.bold(f.id)}`);
+      logger.info(`⚠️  failed to check fix ${picocolors.bold(f.id)}`);
       if (error instanceof Error) {
         logger.error(`\n${error.stack}`);
         fixSummary.failed[f.id] = error.message;
@@ -275,9 +275,9 @@ export async function runFixes({
 
     if (result) {
       const promptType: Prompt =
-        typeof f.promptType === 'function' ? await f.promptType(result) : f.promptType ?? 'auto';
+        typeof f.promptType === 'function' ? await f.promptType(result) : (f.promptType ?? 'auto');
 
-      logger.info(`\n🔎 found a '${chalk.cyan(f.id)}' migration:`);
+      logger.info(`\n🔎 found a '${picocolors.cyan(f.id)}' migration:`);
       const message = f.prompt(result);
 
       const getTitle = () => {
@@ -342,7 +342,9 @@ export async function runFixes({
             {
               type: 'confirm',
               name: 'fix',
-              message: `Do you want to run the '${chalk.cyan(f.id)}' migration on your project?`,
+              message: `Do you want to run the '${picocolors.cyan(
+                f.id
+              )}' migration on your project?`,
               initial: f.promptDefaultValue ?? true,
             },
             {
@@ -383,7 +385,7 @@ export async function runFixes({
               mainConfigPath,
               skipInstall,
             });
-            logger.info(`✅ ran ${chalk.cyan(f.id)} migration`);
+            logger.info(`✅ ran ${picocolors.cyan(f.id)} migration`);
 
             fixResults[f.id] = FixStatus.SUCCEEDED;
             fixSummary.succeeded.push(f.id);
@@ -392,7 +394,7 @@ export async function runFixes({
             fixSummary.failed[f.id] =
               error instanceof Error ? error.message : 'Failed to run migration';
 
-            logger.info(`❌ error when running ${chalk.cyan(f.id)} migration`);
+            logger.info(`❌ error when running ${picocolors.cyan(f.id)} migration`);
             logger.info(error);
             logger.info();
           }
diff --git a/code/lib/cli-storybook/src/bin/index.ts b/code/lib/cli-storybook/src/bin/index.ts
index 34f70b540a0b..165b3f9dd999 100644
--- a/code/lib/cli-storybook/src/bin/index.ts
+++ b/code/lib/cli-storybook/src/bin/index.ts
@@ -7,11 +7,11 @@ import { withTelemetry } from 'storybook/internal/core-server';
 import { logger } from 'storybook/internal/node-logger';
 import { addToGlobalContext, telemetry } from 'storybook/internal/telemetry';
 
-import chalk from 'chalk';
 import { program } from 'commander';
 import envinfo from 'envinfo';
 import { findPackageSync } from 'fd-package-json';
 import leven from 'leven';
+import picocolors from 'picocolors';
 import invariant from 'tiny-invariant';
 
 import { add } from '../add';
@@ -40,22 +40,45 @@ const command = (name: string) =>
     .option('--debug', 'Get more logs in debug mode', false)
     .option('--enable-crash-reports', 'Enable sending crash reports to telemetry data');
 
+command('init')
+  .description('Initialize Storybook into your project')
+  .option('-f --force', 'Force add Storybook')
+  .option('-s --skip-install', 'Skip installing deps')
+  .option('--package-manager <npm|pnpm|yarn1|yarn2>', 'Force package manager for installing deps')
+  .option('--use-pnp', 'Enable PnP mode for Yarn 2+')
+  .option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser')
+  .option('-t --type <type>', 'Add Storybook for a specific project type')
+  .option('-y --yes', 'Answer yes to all prompts')
+  .option('-b --builder <webpack5 | vite>', 'Builder library')
+  .option('-l --linkable', 'Prepare installation for link (contributor helper)')
+  .option(
+    '--dev',
+    'Launch the development server after completing initialization. Enabled by default (default: true)',
+    process.env.CI !== 'true' && process.env.IN_STORYBOOK_SANDBOX !== 'true'
+  )
+  .option(
+    '--no-dev',
+    'Complete the initialization of Storybook without launching the Storybook development server'
+  );
+
 command('add <addon>')
   .description('Add an addon to your Storybook')
   .option(
-    '--package-manager <npm|pnpm|yarn1|yarn2>',
+    '--package-manager <npm|pnpm|yarn1|yarn2|bun>',
     'Force package manager for installing dependencies'
   )
   .option('-c, --config-dir <dir-name>', 'Directory where to load Storybook configurations from')
   .option('-s --skip-postinstall', 'Skip package specific postinstall config modifications')
+  .option('-y --yes', 'Skip prompting the user')
   .action((addonName: string, options: any) => add(addonName, options));
 
 command('remove <addon>')
   .description('Remove an addon from your Storybook')
   .option(
-    '--package-manager <npm|pnpm|yarn1|yarn2>',
+    '--package-manager <npm|pnpm|yarn1|yarn2|bun>',
     'Force package manager for installing dependencies'
   )
+  .option('-c, --config-dir <dir-name>', 'Directory where to load Storybook configurations from')
   .action((addonName: string, options: any) =>
     withTelemetry('remove', { cliOptions: options }, async () => {
       await remove(addonName, options);
@@ -68,7 +91,7 @@ command('remove <addon>')
 command('upgrade')
   .description(`Upgrade your Storybook packages to v${versions.storybook}`)
   .option(
-    '--package-manager <npm|pnpm|yarn1|yarn2>',
+    '--package-manager <npm|pnpm|yarn1|yarn2|bun>',
     'Force package manager for installing dependencies'
   )
   .option('-y --yes', 'Skip prompting the user')
@@ -81,7 +104,7 @@ command('upgrade')
 command('info')
   .description('Prints debugging information about the local environment')
   .action(async () => {
-    consoleLogger.log(chalk.bold('\nStorybook Environment Info:'));
+    consoleLogger.log(picocolors.bold('\nStorybook Environment Info:'));
     const pkgManager = await JsPackageManagerFactory.getPackageManager();
     const activePackageManager = pkgManager.type.replace(/\d/, ''); // 'yarn1' -> 'yarn'
     const output = await envinfo.run({
@@ -95,7 +118,7 @@ command('info')
     consoleLogger.log(
       output.replace(
         activePackageManagerLine,
-        chalk.bold(`${activePackageManagerLine} <----- active`)
+        picocolors.bold(`${activePackageManagerLine} <----- active`)
       )
     );
   });
@@ -155,7 +178,7 @@ command('automigrate [fixId]')
   .description('Check storybook for incompatibilities or migrations and apply fixes')
   .option('-y --yes', 'Skip prompting the user')
   .option('-n --dry-run', 'Only check for fixes, do not actually run them')
-  .option('--package-manager <npm|pnpm|yarn1|yarn2>', 'Force package manager')
+  .option('--package-manager <npm|pnpm|yarn1|yarn2|bun>', 'Force package manager')
   .option('-l --list', 'List available migrations')
   .option('-c, --config-dir <dir-name>', 'Directory of Storybook configurations to migrate')
   .option('-s --skip-install', 'Skip installing deps')
@@ -172,7 +195,7 @@ command('automigrate [fixId]')
 
 command('doctor')
   .description('Check Storybook for known problems and provide suggestions or fixes')
-  .option('--package-manager <npm|pnpm|yarn1|yarn2>', 'Force package manager')
+  .option('--package-manager <npm|pnpm|yarn1|yarn2|bun>', 'Force package manager')
   .option('-c, --config-dir <dir-name>', 'Directory of Storybook configuration')
   .action(async (options) => {
     await doctor(options).catch((e) => {
diff --git a/code/lib/cli-storybook/src/doctor/getDuplicatedDepsWarnings.ts b/code/lib/cli-storybook/src/doctor/getDuplicatedDepsWarnings.ts
index 871bb13e4805..617713f5adfc 100644
--- a/code/lib/cli-storybook/src/doctor/getDuplicatedDepsWarnings.ts
+++ b/code/lib/cli-storybook/src/doctor/getDuplicatedDepsWarnings.ts
@@ -1,7 +1,7 @@
 import { frameworkPackages, rendererPackages } from 'storybook/internal/common';
 import type { InstallationMetadata } from 'storybook/internal/common';
 
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 
 import { hasMultipleVersions } from './hasMultipleVersions';
 
@@ -67,9 +67,11 @@ export function getDuplicatedDepsWarnings(
         const hasMultipleMajorVersions = hasMultipleVersions(packageVersions);
 
         if (disallowList.includes(dep) && hasMultipleMajorVersions) {
-          acc.critical.push(`${chalk.redBright(dep)}:\n${packageVersions.join(', ')}`);
+          acc.critical.push(
+            `${picocolors.bold(picocolors.red(dep))}:\n${packageVersions.join(', ')}`
+          );
         } else {
-          acc.trivial.push(`${chalk.hex('#ff9800')(dep)}:\n${packageVersions.join(', ')}`);
+          acc.trivial.push(`${picocolors.yellow(dep)}:\n${packageVersions.join(', ')}`);
         }
 
         return acc;
@@ -83,7 +85,7 @@ export function getDuplicatedDepsWarnings(
 
     if (critical.length > 0) {
       messages.push(
-        `${chalk.bold(
+        `${picocolors.bold(
           'Critical:'
         )} The following dependencies are duplicated and WILL cause unexpected behavior:`
       );
@@ -92,7 +94,7 @@ export function getDuplicatedDepsWarnings(
 
     if (trivial.length > 0) {
       messages.push(
-        `${chalk.bold(
+        `${picocolors.bold(
           'Attention:'
         )} The following dependencies are duplicated which might cause unexpected behavior:`
       );
@@ -101,14 +103,14 @@ export function getDuplicatedDepsWarnings(
 
     messages.push(
       '\n',
-      `Please try de-duplicating these dependencies by running ${chalk.cyan(
+      `Please try de-duplicating these dependencies by running ${picocolors.cyan(
         `${installationMetadata.dedupeCommand}`
       )}`
     );
 
     messages.push(
       '\n',
-      `You can find more information for a given dependency by running ${chalk.cyan(
+      `You can find more information for a given dependency by running ${picocolors.cyan(
         `${installationMetadata.infoCommand} <package-name>`
       )}`
     );
diff --git a/code/lib/cli-storybook/src/doctor/getIncompatibleStorybookPackages.test.ts b/code/lib/cli-storybook/src/doctor/getIncompatibleStorybookPackages.test.ts
index b804567c9a7a..9ed4ff7b34b0 100644
--- a/code/lib/cli-storybook/src/doctor/getIncompatibleStorybookPackages.test.ts
+++ b/code/lib/cli-storybook/src/doctor/getIncompatibleStorybookPackages.test.ts
@@ -9,7 +9,7 @@ import {
   getIncompatibleStorybookPackages,
 } from './getIncompatibleStorybookPackages';
 
-vi.mock('chalk', () => {
+vi.mock('picocolors', () => {
   return {
     default: {
       yellow: (str: string) => str,
diff --git a/code/lib/cli-storybook/src/doctor/getIncompatibleStorybookPackages.ts b/code/lib/cli-storybook/src/doctor/getIncompatibleStorybookPackages.ts
index 0c65c5902701..bc2af0904884 100644
--- a/code/lib/cli-storybook/src/doctor/getIncompatibleStorybookPackages.ts
+++ b/code/lib/cli-storybook/src/doctor/getIncompatibleStorybookPackages.ts
@@ -5,7 +5,7 @@ import {
   versions as storybookCorePackages,
 } from 'storybook/internal/common';
 
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import semver from 'semver';
 
 export type AnalysedPackage = {
@@ -107,15 +107,15 @@ export const getIncompatiblePackagesSummary = (
 
   if (incompatiblePackages.length > 0) {
     summaryMessage.push(
-      `The following packages are incompatible with Storybook ${chalk.bold(
+      `The following packages are incompatible with Storybook ${picocolors.bold(
         currentStorybookVersion
       )} as they depend on different major versions of Storybook packages:`
     );
     incompatiblePackages.forEach(
       ({ packageName: addonName, packageVersion: addonVersion, homepage, availableUpdate }) => {
-        const packageDescription = `${chalk.cyan(addonName)}@${chalk.cyan(addonVersion)}`;
+        const packageDescription = `${picocolors.cyan(addonName)}@${picocolors.cyan(addonVersion)}`;
         const updateMessage = availableUpdate ? ` (${availableUpdate} available!)` : '';
-        const packageRepo = homepage ? `\n Repo: ${chalk.yellow(homepage)}` : '';
+        const packageRepo = homepage ? `\n Repo: ${picocolors.yellow(homepage)}` : '';
 
         summaryMessage.push(`- ${packageDescription}${updateMessage}${packageRepo}`);
       }
@@ -125,7 +125,7 @@ export const getIncompatiblePackagesSummary = (
       '\n',
       'Please consider updating your packages or contacting the maintainers for compatibility details.',
       'For more on Storybook 8 compatibility, see the linked GitHub issue:',
-      chalk.yellow('https://github.com/storybookjs/storybook/issues/26031')
+      picocolors.yellow('https://github.com/storybookjs/storybook/issues/26031')
     );
   }
 
diff --git a/code/lib/cli-storybook/src/doctor/getMismatchingVersionsWarning.ts b/code/lib/cli-storybook/src/doctor/getMismatchingVersionsWarning.ts
index 00cd470c1b28..da07203e6d26 100644
--- a/code/lib/cli-storybook/src/doctor/getMismatchingVersionsWarning.ts
+++ b/code/lib/cli-storybook/src/doctor/getMismatchingVersionsWarning.ts
@@ -1,7 +1,7 @@
 import { frameworkPackages, versions as storybookCorePackages } from 'storybook/internal/common';
 import type { InstallationMetadata } from 'storybook/internal/common';
 
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import semver from 'semver';
 
 function getPrimaryVersion(name: string | undefined, installationMetadata?: InstallationMetadata) {
@@ -39,7 +39,7 @@ export function getMismatchingVersionsWarnings(
     }
 
     messages.push(
-      `${chalk.bold(
+      `${picocolors.bold(
         'Attention:'
       )} There seems to be a mismatch between your Storybook package versions. This can result in a broken Storybook installation.`
     );
@@ -55,9 +55,9 @@ export function getMismatchingVersionsWarnings(
     }
 
     messages.push(
-      `The version of your storybook core packages should align with ${chalk.yellow(
+      `The version of your storybook core packages should align with ${picocolors.yellow(
         versionToCompare
-      )} (from the ${chalk.cyan(packageToDisplay)} package) or higher.`
+      )} (from the ${picocolors.cyan(packageToDisplay)} package) or higher.`
     );
 
     const filteredDependencies = Object.entries(installationMetadata?.dependencies || []).filter(
@@ -78,7 +78,7 @@ export function getMismatchingVersionsWarnings(
         filteredDependencies
           .map(
             ([name, dep]) =>
-              `${chalk.hex('#ff9800')(name)}: ${dep[0].version} ${
+              `${picocolors.yellow(name)}: ${dep[0].version} ${
                 allDependencies?.[name] ? packageJsonSuffix : ''
               }`
           )
@@ -91,11 +91,11 @@ export function getMismatchingVersionsWarnings(
     }
 
     messages.push(
-      `You can run ${chalk.cyan(
+      `You can run ${picocolors.cyan(
         'npx storybook@latest upgrade'
       )} to upgrade all of your Storybook packages to the latest version.
 
-      Alternatively you can try manually changing the versions to match in your package.json. We also recommend regenerating your lockfile, or running the following command to possibly deduplicate your Storybook package versions: ${chalk.cyan(
+      Alternatively you can try manually changing the versions to match in your package.json. We also recommend regenerating your lockfile, or running the following command to possibly deduplicate your Storybook package versions: ${picocolors.cyan(
         installationMetadata?.dedupeCommand
       )}`
     );
diff --git a/code/lib/cli-storybook/src/doctor/index.ts b/code/lib/cli-storybook/src/doctor/index.ts
index 53439e244f00..1c7a03477c80 100644
--- a/code/lib/cli-storybook/src/doctor/index.ts
+++ b/code/lib/cli-storybook/src/doctor/index.ts
@@ -6,7 +6,7 @@ import { JsPackageManagerFactory, temporaryFile } from 'storybook/internal/commo
 import type { PackageManagerName } from 'storybook/internal/common';
 
 import boxen from 'boxen';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 
 import { cleanLog } from '../automigrate/helpers/cleanLog';
@@ -84,7 +84,7 @@ export const doctor = async ({
   } catch (err: any) {
     if (err.message.includes('No configuration files have been found')) {
       logger.info(
-        dedent`[Storybook doctor] Could not find or evaluate your Storybook main.js config directory at ${chalk.blue(
+        dedent`[Storybook doctor] Could not find or evaluate your Storybook main.js config directory at ${picocolors.blue(
           userSpecifiedConfigDir || '.storybook'
         )} so the doctor command cannot proceed. You might be running this command in a monorepo or a non-standard project structure. If that is the case, please rerun this command by specifying the path to your Storybook config directory via the --config-dir option.`
       );
@@ -109,10 +109,10 @@ export const doctor = async ({
 
   if (!('storybook' in allDependencies)) {
     logDiagnostic(
-      `Package ${chalk.cyan('storybook')} not found`,
+      `Package ${picocolors.cyan('storybook')} not found`,
       dedent`
-        The ${chalk.cyan('storybook')} package was not found in your package.json.
-        Installing ${chalk.cyan('storybook')} as a direct dev dependency in your package.json is required. 
+        The ${picocolors.cyan('storybook')} package was not found in your package.json.
+        Installing ${picocolors.cyan('storybook')} as a direct dev dependency in your package.json is required. 
       `
     );
   }
@@ -151,7 +151,7 @@ export const doctor = async ({
     }
   }
 
-  const commandMessage = `You can always recheck the health of your project by running:\n${chalk.cyan(
+  const commandMessage = `You can always recheck the health of your project by running:\n${picocolors.cyan(
     'npx storybook doctor'
   )}`;
   logger.info();
@@ -160,7 +160,7 @@ export const doctor = async ({
     logger.info(commandMessage);
     logger.info();
 
-    logger.info(`Full logs are available in ${chalk.cyan(LOG_FILE_PATH)}`);
+    logger.info(`Full logs are available in ${picocolors.cyan(LOG_FILE_PATH)}`);
 
     await rename(TEMP_LOG_FILE_PATH, join(process.cwd(), LOG_FILE_NAME));
   } else {
diff --git a/code/lib/cli-storybook/src/link.ts b/code/lib/cli-storybook/src/link.ts
index 8f0b2ed6718c..5db8d2cbd930 100644
--- a/code/lib/cli-storybook/src/link.ts
+++ b/code/lib/cli-storybook/src/link.ts
@@ -3,8 +3,8 @@ import { basename, extname, join } from 'node:path';
 
 import { logger } from 'storybook/internal/node-logger';
 
-import chalk from 'chalk';
 import { spawn as spawnAsync, sync as spawnSync } from 'cross-spawn';
+import picocolors from 'picocolors';
 
 type ExecOptions = Parameters<typeof spawnAsync>[2];
 
@@ -48,7 +48,7 @@ export const exec = async (
       if (code === 0) {
         resolve(undefined);
       } else {
-        logger.error(chalk.red(`An error occurred while executing: \`${command}\``));
+        logger.error(picocolors.red(`An error occurred while executing: \`${command}\``));
         if (errorMessage) {
           logger.info(errorMessage);
         }
diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts
index f5937d53714b..0324635b1ffe 100644
--- a/code/lib/cli-storybook/src/sandbox-templates.ts
+++ b/code/lib/cli-storybook/src/sandbox-templates.ts
@@ -103,8 +103,10 @@ const baseTemplates = {
       renderer: '@storybook/react',
       builder: '@storybook/builder-webpack5',
     },
+
     skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'],
     modifications: {
+      extraDependencies: ['prop-types'],
       mainConfig: (config) => {
         const stories = config.getFieldValue<Array<StoriesEntry>>(['stories']);
         return {
@@ -133,6 +135,9 @@ const baseTemplates = {
       renderer: '@storybook/react',
       builder: '@storybook/builder-webpack5',
     },
+    modifications: {
+      extraDependencies: ['prop-types'],
+    },
   },
   'nextjs/13-ts': {
     name: 'Next.js v13.5 (Webpack | TypeScript)',
@@ -145,16 +150,19 @@ const baseTemplates = {
     },
     modifications: {
       mainConfig: {
-        features: { experimentalRSC: true },
+        features: {
+          experimentalRSC: true,
+          developmentModeForBuild: true,
+        },
       },
-      extraDependencies: ['server-only'],
+      extraDependencies: ['server-only', 'prop-types'],
     },
     skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'],
   },
-  'nextjs/default-js': {
-    name: 'Next.js Latest (Webpack | JavaScript)',
+  'nextjs/14-ts': {
+    name: 'Next.js v14.2 (Webpack | TypeScript)',
     script:
-      'yarn create next-app {{beforeDir}} --javascript --eslint --tailwind --app --import-alias="@/*" --src-dir',
+      'yarn create next-app {{beforeDir}} -e https://github.com/vercel/next.js/tree/v14.2.17/examples/hello-world && cd {{beforeDir}} && npm pkg set "dependencies.next"="^14.2.17" && yarn && git add . && git commit --amend --no-edit && cd ..',
     expected: {
       framework: '@storybook/nextjs',
       renderer: '@storybook/react',
@@ -162,16 +170,19 @@ const baseTemplates = {
     },
     modifications: {
       mainConfig: {
-        features: { experimentalRSC: true },
+        features: {
+          experimentalRSC: true,
+          developmentModeForBuild: true,
+        },
       },
-      extraDependencies: ['server-only'],
+      extraDependencies: ['server-only', 'prop-types'],
     },
     skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'],
   },
   'nextjs/default-ts': {
     name: 'Next.js Latest (Webpack | TypeScript)',
     script:
-      'yarn create next-app {{beforeDir}} --typescript --eslint --tailwind --app --import-alias="@/*" --src-dir',
+      'npx create-next-app {{beforeDir}} --eslint --tailwind --app --import-alias="@/*" --src-dir',
     expected: {
       framework: '@storybook/nextjs',
       renderer: '@storybook/react',
@@ -179,33 +190,65 @@ const baseTemplates = {
     },
     modifications: {
       mainConfig: {
-        features: { experimentalRSC: true },
+        features: {
+          experimentalRSC: true,
+          developmentModeForBuild: true,
+        },
       },
-      extraDependencies: ['server-only'],
+      extraDependencies: ['server-only', 'prop-types'],
     },
     skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'],
   },
   'nextjs/prerelease': {
     name: 'Next.js Prerelease (Webpack | TypeScript)',
     script:
-      'npx create-next-app@canary {{beforeDir}} --typescript --eslint --tailwind --app --import-alias="@/*" --src-dir',
+      'npx create-next-app@canary {{beforeDir}} --eslint --tailwind --app --import-alias="@/*" --src-dir',
     expected: {
       framework: '@storybook/nextjs',
       renderer: '@storybook/react',
       builder: '@storybook/builder-webpack5',
     },
     modifications: {
-      extraDependencies: ['server-only'],
       mainConfig: {
-        features: { experimentalRSC: true },
+        features: {
+          experimentalRSC: true,
+          developmentModeForBuild: true,
+        },
       },
+      extraDependencies: ['server-only', 'prop-types'],
     },
     skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'],
   },
+  'experimental-nextjs-vite/14-ts': {
+    name: 'Next.js Latest (Vite | TypeScript)',
+    script:
+      'npx create-next-app@^14 {{beforeDir}} --eslint --tailwind --app --import-alias="@/*" --src-dir',
+    expected: {
+      framework: '@storybook/experimental-nextjs-vite',
+      renderer: '@storybook/react',
+      builder: '@storybook/builder-vite',
+    },
+    modifications: {
+      mainConfig: {
+        framework: '@storybook/experimental-nextjs-vite',
+        features: {
+          experimentalRSC: true,
+          developmentModeForBuild: true,
+        },
+      },
+      extraDependencies: [
+        'server-only',
+        '@storybook/experimental-nextjs-vite',
+        'vite',
+        'prop-types',
+      ],
+    },
+    skipTasks: ['e2e-tests-dev', 'bench'],
+  },
   'experimental-nextjs-vite/default-ts': {
     name: 'Next.js Latest (Vite | TypeScript)',
     script:
-      'yarn create next-app {{beforeDir}} --typescript --eslint --tailwind --app --import-alias="@/*" --src-dir',
+      'npx create-next-app {{beforeDir}} --eslint --tailwind --app --import-alias="@/*" --src-dir',
     expected: {
       framework: '@storybook/experimental-nextjs-vite',
       renderer: '@storybook/react',
@@ -214,9 +257,17 @@ const baseTemplates = {
     modifications: {
       mainConfig: {
         framework: '@storybook/experimental-nextjs-vite',
-        features: { experimentalRSC: true },
+        features: {
+          experimentalRSC: true,
+          developmentModeForBuild: true,
+        },
       },
-      extraDependencies: ['server-only', '@storybook/experimental-nextjs-vite', 'vite'],
+      extraDependencies: [
+        'server-only',
+        '@storybook/experimental-nextjs-vite',
+        'vite',
+        'prop-types',
+      ],
     },
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
@@ -228,6 +279,14 @@ const baseTemplates = {
       renderer: '@storybook/react',
       builder: '@storybook/builder-vite',
     },
+    modifications: {
+      extraDependencies: ['prop-types'],
+      mainConfig: {
+        features: {
+          developmentModeForBuild: true,
+        },
+      },
+    },
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'react-vite/default-ts': {
@@ -238,6 +297,14 @@ const baseTemplates = {
       renderer: '@storybook/react',
       builder: '@storybook/builder-vite',
     },
+    modifications: {
+      extraDependencies: ['prop-types'],
+      mainConfig: {
+        features: {
+          developmentModeForBuild: true,
+        },
+      },
+    },
     skipTasks: ['bench'],
   },
   'react-vite/prerelease-ts': {
@@ -261,6 +328,14 @@ const baseTemplates = {
       renderer: '@storybook/react',
       builder: '@storybook/builder-vite',
     },
+    modifications: {
+      extraDependencies: ['prop-types'],
+      mainConfig: {
+        features: {
+          developmentModeForBuild: true,
+        },
+      },
+    },
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'react-webpack/18-ts': {
@@ -271,6 +346,9 @@ const baseTemplates = {
       renderer: '@storybook/react',
       builder: '@storybook/builder-webpack5',
     },
+    modifications: {
+      extraDependencies: ['prop-types'],
+    },
     skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'],
   },
   'react-webpack/17-ts': {
@@ -282,6 +360,9 @@ const baseTemplates = {
       renderer: '@storybook/react',
       builder: '@storybook/builder-webpack5',
     },
+    modifications: {
+      extraDependencies: ['prop-types'],
+    },
     skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'],
   },
   'react-webpack/prerelease-ts': {
@@ -303,6 +384,9 @@ const baseTemplates = {
       renderer: '@storybook/react',
       builder: '@storybook/builder-webpack5',
     },
+    modifications: {
+      extraDependencies: ['prop-types'],
+    },
     skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'],
   },
   'solid-vite/default-js': {
@@ -349,6 +433,16 @@ const baseTemplates = {
     },
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
+  'nuxt-vite/default-ts': {
+    name: 'Nuxt v3 (Vite | TypeScript)',
+    script: 'npx nuxi init --packageManager yarn --gitInit false {{beforeDir}}',
+    expected: {
+      framework: '@storybook-vue/nuxt',
+      renderer: '@storybook/vue3',
+      builder: '@storybook/builder-vite',
+    },
+    skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'],
+  },
   'html-webpack/default': {
     name: 'HTML Latest (Webpack | JavaScript)',
     script: 'yarn create webpack5-html {{beforeDir}}',
@@ -564,6 +658,43 @@ const baseTemplates = {
       builder: '@storybook/builder-webpack5',
     },
   },
+  'react-native-web-vite/expo-ts': {
+    // NOTE: create-expo-app installs React 18.2.0. But yarn portal
+    // expects 18.3.1 (dunno why). Therefore to run this in dev you
+    // must either:
+    //  - edit the sandbox package.json to depend on react 18.3.1, OR
+    //  - build/run the sandbox in --no-link mode, which is fine
+    //
+    // Users & CI won't see this limitation because they are not using
+    // yarn portals.
+    name: 'React Native Expo Latest (Vite | TypeScript)',
+    script: 'npx create-expo-app -y {{beforeDir}}',
+    expected: {
+      framework: '@storybook/react-native-web-vite',
+      renderer: '@storybook/react',
+      builder: '@storybook/builder-vite',
+    },
+    skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'],
+  },
+  'react-native-web-vite/rn-cli-ts': {
+    // NOTE: create-expo-app installs React 18.2.0. But yarn portal
+    // expects 18.3.1 (dunno why). Therefore to run this in dev you
+    // must either:
+    //  - edit the sandbox package.json to depend on react 18.3.1, OR
+    //  - build/run the sandbox in --no-link mode, which is fine
+    //
+    // Users & CI won't see this limitation because they are not using
+    // yarn portals.
+    name: 'React Native CLI Latest (Vite | TypeScript)',
+    script:
+      'npx @react-native-community/cli@latest init --install-pods=false --directory={{beforeDir}} rnapp',
+    expected: {
+      framework: '@storybook/react-native-web-vite',
+      renderer: '@storybook/react',
+      builder: '@storybook/builder-vite',
+    },
+    skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'],
+  },
 } satisfies Record<string, BaseTemplates>;
 
 /**
@@ -581,7 +712,7 @@ const internalTemplates = {
       builder: '@storybook/builder-webpack5',
     },
     modifications: {
-      extraDependencies: ['@storybook/addon-webpack5-compiler-babel'],
+      extraDependencies: ['@storybook/addon-webpack5-compiler-babel', 'prop-types'],
       editAddons: (addons) =>
         [...addons, '@storybook/addon-webpack5-compiler-babel'].filter(
           (a) => a !== '@storybook/addon-webpack5-compiler-swc'
@@ -599,6 +730,9 @@ const internalTemplates = {
       renderer: '@storybook/react',
       builder: '@storybook/builder-webpack5',
     },
+    modifications: {
+      extraDependencies: ['prop-types'],
+    },
     skipTasks: ['e2e-tests-dev', 'bench', 'vitest-integration'],
     isInternal: true,
   },
@@ -713,10 +847,12 @@ export const allTemplates: Record<TemplateKey, Template> = {
 };
 
 export const normal: TemplateKey[] = [
-  'cra/default-ts',
+  // TODO: Add this back once we resolve the React 19 issues
+  // 'cra/default-ts',
   'react-vite/default-ts',
   'angular-cli/default-ts',
   'vue3-vite/default-ts',
+  'nuxt-vite/default-ts',
   'lit-vite/default-ts',
   'svelte-vite/default-ts',
   'svelte-kit/skeleton-ts',
@@ -743,7 +879,8 @@ export const merged: TemplateKey[] = [
 export const daily: TemplateKey[] = [
   ...merged,
   'angular-cli/prerelease',
-  'cra/default-js',
+  // TODO: Add this back once we resolve the React 19 issues
+  // 'cra/default-js',
   'react-vite/default-js',
   'react-vite/prerelease-ts',
   'react-webpack/prerelease-ts',
@@ -754,13 +891,14 @@ export const daily: TemplateKey[] = [
   'svelte-kit/prerelease-ts',
   'svelte-vite/default-js',
   'nextjs/13-ts',
-  'nextjs/default-js',
   'nextjs/prerelease',
   'qwik-vite/default-ts',
   'preact-vite/default-js',
   'html-vite/default-js',
   'internal/react16-webpack',
   'internal/react18-webpack-babel',
+  'react-native-web-vite/expo-ts',
+  // 'react-native-web-vite/rn-cli-ts',
 ];
 
 export const templatesByCadence = { normal, merged, daily };
diff --git a/code/lib/cli-storybook/src/sandbox.ts b/code/lib/cli-storybook/src/sandbox.ts
index 9b02ca82dd4e..3b43a05af5d5 100644
--- a/code/lib/cli-storybook/src/sandbox.ts
+++ b/code/lib/cli-storybook/src/sandbox.ts
@@ -7,9 +7,9 @@ import { JsPackageManagerFactory } from 'storybook/internal/common';
 import { versions } from 'storybook/internal/common';
 
 import boxen from 'boxen';
-import chalk from 'chalk';
 import { initiate } from 'create-storybook';
 import { downloadTemplate } from 'giget';
+import picocolors from 'picocolors';
 import prompts from 'prompts';
 import { lt, prerelease } from 'semver';
 import invariant from 'tiny-invariant';
@@ -57,18 +57,18 @@ export const sandbox = async ({
   const branch = isPrerelease ? 'next' : 'main';
 
   const messages = {
-    welcome: `Creating a Storybook ${chalk.bold(currentVersion)} sandbox..`,
-    notLatest: chalk.red(dedent`
-      This version is behind the latest release, which is: ${chalk.bold(latestVersion)}!
+    welcome: `Creating a Storybook ${picocolors.bold(currentVersion)} sandbox..`,
+    notLatest: picocolors.red(dedent`
+      This version is behind the latest release, which is: ${picocolors.bold(latestVersion)}!
       You likely ran the init command through npx, which can use a locally cached version, to get the latest please run:
-      ${chalk.bold('npx storybook@latest sandbox')}
+      ${picocolors.bold('npx storybook@latest sandbox')}
       
       You may want to CTRL+C to stop, and run with the latest version instead.
     `),
-    longInitTime: chalk.yellow(
+    longInitTime: picocolors.yellow(
       'The creation of the sandbox will take longer, because we will need to run init.'
     ),
-    prerelease: chalk.yellow('This is a pre-release version.'),
+    prerelease: picocolors.yellow('This is a pre-release version.'),
   };
 
   logger.log(
@@ -115,12 +115,12 @@ export const sandbox = async ({
           dedent`
             🔎 You filtered out all templates. 🔍
 
-            After filtering all the templates with "${chalk.yellow(
+            After filtering all the templates with "${picocolors.yellow(
               filterValue
             )}", we found no results. Please try again with a different filter.
 
             Available templates:
-            ${keys.map((key) => chalk.blue`- ${key}`).join('\n')}
+            ${keys.map((key) => picocolors.blue(`- ${key}`)).join('\n')}
             `.trim(),
           { borderStyle: 'round', padding: 1, borderColor: '#F1618C' } as any
         )
@@ -134,9 +134,9 @@ export const sandbox = async ({
       logger.info(
         boxen(
           dedent`
-            🤗 Welcome to ${chalk.yellow('sb sandbox')}! 🤗
+            🤗 Welcome to ${picocolors.yellow('sb sandbox')}! 🤗
 
-            Create a ${chalk.green('new project')} to minimally reproduce Storybook issues.
+            Create a ${picocolors.green('new project')} to minimally reproduce Storybook issues.
 
             1. select an environment that most closely matches your project setup.
             2. select a location for the reproduction, outside of your project.
@@ -199,7 +199,7 @@ export const sandbox = async ({
 
     logger.info(`🏃 Adding ${selectedConfig.name} into ${templateDestination}`);
 
-    logger.log(`📦 Downloading sandbox template (${chalk.bold(downloadType)})...`);
+    logger.log(`📦 Downloading sandbox template (${picocolors.bold(downloadType)})...`);
     try {
       // Download the sandbox based on subfolder "after-storybook" and selected branch
       const gitPath = `github:storybookjs/sandboxes/${templateId}/${downloadType}#${branch}`;
@@ -209,9 +209,9 @@ export const sandbox = async ({
       });
       // throw an error if templateDestination is an empty directory
       if ((await readdir(templateDestination)).length === 0) {
-        const selected = chalk.yellow(templateId);
+        const selected = picocolors.yellow(templateId);
         throw new Error(dedent`
-          Template downloaded from ${chalk.blue(gitPath)} is empty.
+          Template downloaded from ${picocolors.blue(gitPath)} is empty.
           Are you use it exists? Or did you want to set ${selected} to inDevelopment first?
         `);
       }
@@ -237,23 +237,23 @@ export const sandbox = async ({
     }
 
     const initMessage = init
-      ? chalk.yellow(dedent`
+      ? picocolors.yellow(dedent`
           yarn install
           yarn storybook
         `)
-      : `Recreate your setup, then ${chalk.yellow(`npx storybook@latest init`)}`;
+      : `Recreate your setup, then ${picocolors.yellow(`npx storybook@latest init`)}`;
 
     logger.info(
       boxen(
         dedent`
         🎉 Your Storybook reproduction project is ready to use! 🎉
 
-        ${chalk.yellow(`cd ${selectedDirectory}`)}
+        ${picocolors.yellow(`cd ${selectedDirectory}`)}
         ${initMessage}
 
         Once you've recreated the problem you're experiencing, please:
 
-        1. Document any additional steps in ${chalk.cyan('README.md')}
+        1. Document any additional steps in ${picocolors.cyan('README.md')}
         2. Publish the repository to github
         3. Link to the repro repository in your issue
 
diff --git a/code/lib/cli-storybook/src/upgrade.ts b/code/lib/cli-storybook/src/upgrade.ts
index b880838199c4..6657fb0ee691 100644
--- a/code/lib/cli-storybook/src/upgrade.ts
+++ b/code/lib/cli-storybook/src/upgrade.ts
@@ -18,8 +18,8 @@ import {
 import { telemetry } from 'storybook/internal/telemetry';
 
 import boxen from 'boxen';
-import chalk from 'chalk';
 import { sync as spawnSync } from 'cross-spawn';
+import picocolors from 'picocolors';
 import semver, { clean, eq, lt, prerelease } from 'semver';
 import { dedent } from 'ts-dedent';
 
@@ -171,17 +171,19 @@ export const doUpgrade = async ({
   const borderColor = isCLIOutdated ? '#FC521F' : '#F1618C';
 
   const messages = {
-    welcome: `Upgrading Storybook from version ${chalk.bold(beforeVersion)} to version ${chalk.bold(
-      currentCLIVersion
-    )}..`,
-    notLatest: chalk.red(dedent`
-      This version is behind the latest release, which is: ${chalk.bold(latestCLIVersionOnNPM)}!
+    welcome: `Upgrading Storybook from version ${picocolors.bold(
+      beforeVersion
+    )} to version ${picocolors.bold(currentCLIVersion)}..`,
+    notLatest: picocolors.red(dedent`
+      This version is behind the latest release, which is: ${picocolors.bold(
+        latestCLIVersionOnNPM
+      )}!
       You likely ran the upgrade command through npx, which can use a locally cached version, to upgrade to the latest version please run:
-      ${chalk.bold('npx storybook@latest upgrade')}
+      ${picocolors.bold('npx storybook@latest upgrade')}
       
       You may want to CTRL+C to stop, and run with the latest version instead.
     `),
-    prerelease: chalk.yellow('This is a pre-release version.'),
+    prerelease: picocolors.yellow('This is a pre-release version.'),
   };
 
   logger.plain(
@@ -252,7 +254,7 @@ export const doUpgrade = async ({
     const upgradedDependencies = toUpgradedDependencies(packageJson.dependencies);
     const upgradedDevDependencies = toUpgradedDependencies(packageJson.devDependencies);
 
-    logger.info(`Updating dependencies in ${chalk.cyan('package.json')}..`);
+    logger.info(`Updating dependencies in ${picocolors.cyan('package.json')}..`);
     if (upgradedDependencies.length > 0) {
       await packageManager.addDependencies(
         { installAsDevDependencies: false, skipInstall: true, packageJson },
diff --git a/code/lib/cli-storybook/src/warn.ts b/code/lib/cli-storybook/src/warn.ts
index ef995d87ef76..f76cd1c6ea4e 100644
--- a/code/lib/cli-storybook/src/warn.ts
+++ b/code/lib/cli-storybook/src/warn.ts
@@ -7,6 +7,7 @@ interface Options {
 export const warn = async ({ hasTSDependency }: Options) => {
   if (!hasTSDependency) {
     // Dynamically import globby because it is a pure ESM module
+    // eslint-disable-next-line depend/ban-dependencies
     const { globby } = await import('globby');
 
     const files = await globby(['**/*.@(ts|tsx)', '!**/node_modules', '!**/*.d.ts']);
diff --git a/code/lib/cli-storybook/test/default/cli.test.cjs b/code/lib/cli-storybook/test/default/cli.test.cjs
index b569fa4dc5c6..f55fa0ef9a61 100755
--- a/code/lib/cli-storybook/test/default/cli.test.cjs
+++ b/code/lib/cli-storybook/test/default/cli.test.cjs
@@ -1,4 +1,4 @@
-import { describe, it, expect } from 'vitest';
+import { describe, expect, it } from 'vitest';
 
 const run = require('../helpers.cjs');
 
@@ -12,3 +12,92 @@ describe('Default behavior', () => {
     expect(stdout.toString()).toContain('Did you mean upgrade?');
   });
 });
+
+describe('Help command', () => {
+  it('should prints out "init" command', () => {
+    const { status, stdout, stderr } = run(['help']);
+
+    expect(status).toBe(0);
+    expect(stderr.toString()).toBe('');
+    expect(stdout.toString()).toContain('init');
+    expect(stdout.toString()).toContain('Initialize Storybook into your project');
+  });
+
+  it('should prints out "add" command', () => {
+    const { status, stdout, stderr } = run(['help']);
+
+    expect(status).toBe(0);
+    expect(stderr.toString()).toBe('');
+    expect(stdout.toString()).toContain('add');
+    expect(stdout.toString()).toContain('Add an addon to your Storybook');
+  });
+
+  it('should prints out "remove" command', () => {
+    const { status, stdout, stderr } = run(['help']);
+
+    expect(status).toBe(0);
+    expect(stderr.toString()).toBe('');
+    expect(stdout.toString()).toContain('remove');
+    expect(stdout.toString()).toContain('Remove an addon from your Storybook');
+  });
+
+  it('should prints out "upgrade" command', () => {
+    const { status, stdout, stderr } = run(['help']);
+
+    expect(status).toBe(0);
+    expect(stderr.toString()).toBe('');
+    expect(stdout.toString()).toContain('upgrade');
+    expect(stdout.toString()).toContain('Upgrade your Storybook packages to');
+  });
+
+  it('should prints out "migrate" command', () => {
+    const { status, stdout, stderr } = run(['help']);
+
+    expect(status).toBe(0);
+    expect(stderr.toString()).toBe('');
+    expect(stdout.toString()).toContain('migrate');
+    expect(stdout.toString()).toContain('Run a Storybook codemod migration on your source files');
+  });
+
+  it('should prints out "sandbox" command', () => {
+    const { status, stdout, stderr } = run(['help']);
+
+    expect(status).toBe(0);
+    expect(stderr.toString()).toBe('');
+    expect(stdout.toString()).toContain('sandbox');
+    expect(stdout.toString()).toContain('Create a sandbox from a set of possible templates');
+  });
+
+  it('should prints out "link" command', () => {
+    const { status, stdout, stderr } = run(['help']);
+
+    expect(status).toBe(0);
+    expect(stderr.toString()).toBe('');
+    expect(stdout.toString()).toContain('link');
+    expect(stdout.toString()).toContain(
+      'Pull down a repro from a URL (or a local directory), link it, and run storybook'
+    );
+  });
+
+  it('should prints out "automigrate" command', () => {
+    const { status, stdout, stderr } = run(['help']);
+
+    expect(status).toBe(0);
+    expect(stderr.toString()).toBe('');
+    expect(stdout.toString()).toContain('automigrate');
+    expect(stdout.toString()).toContain(
+      'Check storybook for incompatibilities or migrations and apply fixes'
+    );
+  });
+
+  it('should prints out "doctor" command', () => {
+    const { status, stdout, stderr } = run(['help']);
+
+    expect(status).toBe(0);
+    expect(stderr.toString()).toBe('');
+    expect(stdout.toString()).toContain('doctor');
+    expect(stdout.toString()).toContain(
+      'Check Storybook for known problems and provide suggestions or fixes'
+    );
+  });
+});
diff --git a/code/lib/cli/core/manager/globals-runtime.js b/code/lib/cli/core/manager/globals-runtime.js
new file mode 100644
index 000000000000..5b5c33945b1a
--- /dev/null
+++ b/code/lib/cli/core/manager/globals-runtime.js
@@ -0,0 +1 @@
+export * from '@storybook/core/manager/globals-runtime';
diff --git a/code/lib/cli/core/preview/runtime.js b/code/lib/cli/core/preview/runtime.js
new file mode 100644
index 000000000000..612f0116dc32
--- /dev/null
+++ b/code/lib/cli/core/preview/runtime.js
@@ -0,0 +1 @@
+export * from '@storybook/core/preview/runtime';
diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json
index 8dead94de633..cdc83ea4bbb2 100644
--- a/code/lib/cli/package.json
+++ b/code/lib/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "storybook",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook's CLI - install, dev, build, upgrade, and more",
   "keywords": [
     "cli",
@@ -187,6 +187,12 @@
       "types": "./core/babel/index.d.ts",
       "import": "./core/babel/index.js",
       "require": "./core/babel/index.cjs"
+    },
+    "./internal/manager/globals-runtime": {
+      "import": "./core/manager/globals-runtime.js"
+    },
+    "./internal/preview/runtime": {
+      "import": "./core/preview/runtime.js"
     }
   },
   "main": "dist/index.cjs",
@@ -227,15 +233,6 @@
       "internal/core-server": [
         "./core/core-server/index.d.ts"
       ],
-      "internal/core-server/presets/common-manager": [
-        "./core/core-server/presets/common-manager.d.ts"
-      ],
-      "internal/core-server/presets/common-override-preset": [
-        "./core/core-server/presets/common-override-preset.d.ts"
-      ],
-      "internal/core-server/presets/common-preset": [
-        "./core/core-server/presets/common-preset.d.ts"
-      ],
       "internal/csf-tools": [
         "./core/csf-tools/index.d.ts"
       ],
@@ -314,7 +311,8 @@
   ],
   "scripts": {
     "check": "jiti ../../../scripts/prepare/check.ts",
-    "prep": "jiti ../../../scripts/prepare/bundle.ts"
+    "prep": "jiti ../../../scripts/prepare/bundle.ts",
+    "sb": "node ./bin/index.js"
   },
   "dependencies": {
     "@storybook/core": "workspace:*"
@@ -322,6 +320,14 @@
   "devDependencies": {
     "typescript": "^5.3.2"
   },
+  "peerDependencies": {
+    "prettier": "^2 || ^3"
+  },
+  "peerDependenciesMeta": {
+    "prettier": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public"
   },
diff --git a/code/lib/cli/project.json b/code/lib/cli/project.json
index 82cebd8431b3..4f06674e2e03 100644
--- a/code/lib/cli/project.json
+++ b/code/lib/cli/project.json
@@ -1,5 +1,5 @@
 {
-  "name": "cli",
+  "name": "storybook",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {
diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json
index 28445891eb3c..324c7bc26320 100644
--- a/code/lib/codemod/package.json
+++ b/code/lib/codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/codemod",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "A collection of codemod scripts written with JSCodeshift",
   "keywords": [
     "storybook"
@@ -58,12 +58,12 @@
     "@babel/preset-env": "^7.24.4",
     "@babel/types": "^7.24.0",
     "@storybook/core": "workspace:*",
-    "@storybook/csf": "^0.1.11",
+    "@storybook/csf": "0.1.12",
     "@types/cross-spawn": "^6.0.2",
     "cross-spawn": "^7.0.3",
+    "es-toolkit": "^1.22.0",
     "globby": "^14.0.1",
     "jscodeshift": "^0.15.1",
-    "lodash": "^4.17.21",
     "prettier": "^3.1.1",
     "recast": "^0.23.5",
     "tiny-invariant": "^1.3.1"
@@ -71,6 +71,7 @@
   "devDependencies": {
     "@types/jscodeshift": "^0.11.10",
     "ansi-regex": "^6.0.1",
+    "camelcase": "^8.0.0",
     "mdast-util-mdx-jsx": "^3.0.0",
     "mdast-util-mdxjs-esm": "^2.0.1",
     "remark": "^15.0.1",
diff --git a/code/lib/codemod/src/index.ts b/code/lib/codemod/src/index.ts
index ec80bd250d3f..80bc90932918 100644
--- a/code/lib/codemod/src/index.ts
+++ b/code/lib/codemod/src/index.ts
@@ -65,6 +65,7 @@ export async function runCodemod(
   }
 
   // Dynamically import globby because it is a pure ESM module
+  // eslint-disable-next-line depend/ban-dependencies
   const { globby } = await import('globby');
 
   const files = await globby([glob, '!**/node_modules', '!**/dist']);
diff --git a/code/lib/codemod/src/lib/utils.ts b/code/lib/codemod/src/lib/utils.ts
index 529c87efe731..a89002e10787 100644
--- a/code/lib/codemod/src/lib/utils.ts
+++ b/code/lib/codemod/src/lib/utils.ts
@@ -1,5 +1,4 @@
-import camelCase from 'lodash/camelCase.js';
-import upperFirst from 'lodash/upperFirst.js';
+import { camelCase, upperFirst } from 'es-toolkit/compat';
 
 export const sanitizeName = (name: string) => {
   let key = upperFirst(camelCase(name));
diff --git a/code/lib/codemod/src/transforms/__tests__/mdx-to-csf.test.ts b/code/lib/codemod/src/transforms/__tests__/mdx-to-csf.test.ts
index 304fb0c40b05..6d41995d3e82 100644
--- a/code/lib/codemod/src/transforms/__tests__/mdx-to-csf.test.ts
+++ b/code/lib/codemod/src/transforms/__tests__/mdx-to-csf.test.ts
@@ -7,7 +7,7 @@ import { dedent } from 'ts-dedent';
 import jscodeshift, { nameToValidExport } from '../mdx-to-csf';
 
 expect.addSnapshotSerializer({
-  print: (val: any) => (typeof val === 'string' ? val : JSON.stringify(val, null, 2) ?? ''),
+  print: (val: any) => (typeof val === 'string' ? val : (JSON.stringify(val, null, 2) ?? '')),
   test: () => true,
 });
 
diff --git a/code/lib/codemod/src/transforms/mdx-to-csf.ts b/code/lib/codemod/src/transforms/mdx-to-csf.ts
index 15a6ae49e7b4..c83f900d0d87 100644
--- a/code/lib/codemod/src/transforms/mdx-to-csf.ts
+++ b/code/lib/codemod/src/transforms/mdx-to-csf.ts
@@ -11,8 +11,8 @@ import {
   types as t,
 } from '@storybook/core/babel';
 
+import { camelCase } from 'es-toolkit';
 import type { FileInfo } from 'jscodeshift';
-import camelCase from 'lodash/camelCase';
 import type { MdxFlowExpression } from 'mdast-util-mdx-expression';
 import type {
   MdxJsxAttribute,
@@ -410,7 +410,7 @@ function addStoriesImport(
 }
 
 export function nameToValidExport(name: string) {
-  const [first, ...rest] = Array.from(camelCase(name));
+  const [first, ...rest] = Array.from(camelCase(name).replace(/\s/g, ''));
 
   return `${first.match(/[a-zA-Z_$]/) ? first.toUpperCase() : `$${first}`}${rest.join('')}`;
 }
diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json
index ca73db9d84de..798463e83457 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
diff --git a/code/lib/create-storybook/package.json b/code/lib/create-storybook/package.json
index 612b559bcae2..05255add8f42 100644
--- a/code/lib/create-storybook/package.json
+++ b/code/lib/create-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-storybook",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Initialize Storybook into your project",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/lib/create-storybook",
   "bugs": {
@@ -56,7 +56,6 @@
   },
   "dependencies": {
     "@types/semver": "^7.3.4",
-    "chalk": "^4.1.0",
     "commander": "^12.1.0",
     "execa": "^5.0.0",
     "fd-package-json": "^1.2.0",
@@ -73,6 +72,7 @@
     "@types/prompts": "^2.0.9",
     "@types/util-deprecate": "^1.0.0",
     "boxen": "^7.1.1",
+    "picocolors": "^1.1.0",
     "typescript": "^5.3.2"
   },
   "publishConfig": {
diff --git a/code/lib/create-storybook/rendererAssets/common/button.css b/code/lib/create-storybook/rendererAssets/common/button.css
index 94d674b7614d..4e3620b0dcbf 100644
--- a/code/lib/create-storybook/rendererAssets/common/button.css
+++ b/code/lib/create-storybook/rendererAssets/common/button.css
@@ -8,7 +8,7 @@
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 .storybook-button--primary {
-  background-color: #1ea7fd;
+  background-color: #555ab9;
   color: white;
 }
 .storybook-button--secondary {
diff --git a/code/lib/create-storybook/rendererAssets/common/page.css b/code/lib/create-storybook/rendererAssets/common/page.css
index 87f7ecb17c4e..77c81d2d58f9 100644
--- a/code/lib/create-storybook/rendererAssets/common/page.css
+++ b/code/lib/create-storybook/rendererAssets/common/page.css
@@ -22,8 +22,7 @@
 }
 
 .storybook-page a {
-  color: #1ea7fd;
-  text-decoration: none;
+  color: inherit;
 }
 
 .storybook-page ul {
@@ -42,7 +41,7 @@
   border-radius: 1em;
   background: #e7fdd8;
   padding: 4px 12px;
-  color: #66bf3c;
+  color: #357a14;
   font-weight: 700;
   font-size: 11px;
   line-height: 12px;
diff --git a/code/lib/create-storybook/src/bin/index.ts b/code/lib/create-storybook/src/bin/index.ts
index 187e2811c38f..6dd321c5aa6a 100644
--- a/code/lib/create-storybook/src/bin/index.ts
+++ b/code/lib/create-storybook/src/bin/index.ts
@@ -25,7 +25,10 @@ program
   .option('--enable-crash-reports', 'Enable sending crash reports to telemetry data')
   .option('-f --force', 'Force add Storybook')
   .option('-s --skip-install', 'Skip installing deps')
-  .option('--package-manager <npm|pnpm|yarn1|yarn2>', 'Force package manager for installing deps')
+  .option(
+    '--package-manager <npm|pnpm|yarn1|yarn2|bun>',
+    'Force package manager for installing deps'
+  )
   .option('--use-pnp', 'Enable pnp mode for Yarn 2+')
   .option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser')
   .option('-t --type <type>', 'Add Storybook for a specific project type')
diff --git a/code/lib/create-storybook/src/generators/NUXT/index.ts b/code/lib/create-storybook/src/generators/NUXT/index.ts
new file mode 100644
index 000000000000..a7d7be640eb7
--- /dev/null
+++ b/code/lib/create-storybook/src/generators/NUXT/index.ts
@@ -0,0 +1,31 @@
+import { baseGenerator } from '../baseGenerator';
+import type { Generator } from '../types';
+
+const generator: Generator = async (packageManager, npmOptions, options) => {
+  await baseGenerator(
+    packageManager,
+    npmOptions,
+    options,
+    'vue3',
+    {
+      extraPackages: async () => {
+        return ['@nuxtjs/storybook'];
+      },
+      installFrameworkPackages: false,
+      componentsDestinationPath: './components',
+      extraMain: {
+        stories: ['../components/**/*.mdx', '../components/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+      },
+    },
+    'nuxt'
+  );
+  // Add nuxtjs/storybook to nuxt.config.js
+  await packageManager.runPackageCommand('nuxi', [
+    'module',
+    'add',
+    '@nuxtjs/storybook',
+    '--skipInstall',
+  ]);
+};
+
+export default generator;
diff --git a/code/lib/create-storybook/src/generators/REACT_NATIVE/index.ts b/code/lib/create-storybook/src/generators/REACT_NATIVE/index.ts
index a1fb9be5ad79..cd89b38a16b0 100644
--- a/code/lib/create-storybook/src/generators/REACT_NATIVE/index.ts
+++ b/code/lib/create-storybook/src/generators/REACT_NATIVE/index.ts
@@ -14,15 +14,19 @@ const generator = async (
 
   const reactVersion = packageJson.dependencies.react;
 
-  const controlsPeerDependencies = [
+  const peerDependencies = [
     'react-native-safe-area-context',
     '@react-native-async-storage/async-storage',
     '@react-native-community/datetimepicker',
     '@react-native-community/slider',
+    'react-native-reanimated',
+    'react-native-gesture-handler',
+    '@gorhom/bottom-sheet',
+    'react-native-svg',
   ].filter((dep) => !packageJson.dependencies[dep] && !packageJson.devDependencies[dep]);
 
   const packagesToResolve = [
-    ...controlsPeerDependencies,
+    ...peerDependencies,
     '@storybook/addon-ondevice-controls',
     '@storybook/addon-ondevice-actions',
     '@storybook/react-native',
@@ -57,7 +61,8 @@ const generator = async (
   await copyTemplateFiles({
     packageManager,
     renderer: 'react-native',
-    language: SupportedLanguage.TYPESCRIPT_3_8,
+    // this value for language is not used since we only ship the ts template. This means we just fallback to @storybook/react-native/template/cli.
+    language: SupportedLanguage.TYPESCRIPT_4_9,
     destination: storybookConfigFolder,
   });
 };
diff --git a/code/lib/create-storybook/src/generators/REACT_NATIVE_WEB/index.ts b/code/lib/create-storybook/src/generators/REACT_NATIVE_WEB/index.ts
new file mode 100644
index 000000000000..f0c1a14076c0
--- /dev/null
+++ b/code/lib/create-storybook/src/generators/REACT_NATIVE_WEB/index.ts
@@ -0,0 +1,35 @@
+import { readdir, rm } from 'node:fs/promises';
+import { join } from 'node:path';
+
+import { SupportedLanguage, cliStoriesTargetPath, detectLanguage } from 'storybook/internal/cli';
+
+import { baseGenerator } from '../baseGenerator';
+import type { Generator } from '../types';
+
+const generator: Generator = async (packageManager, npmOptions, options) => {
+  // Add prop-types dependency if not using TypeScript
+  const language = await detectLanguage(packageManager);
+  const extraPackages = ['vite', 'react-native-web'];
+  if (language === SupportedLanguage.JAVASCRIPT) {
+    extraPackages.push('prop-types');
+  }
+
+  await baseGenerator(
+    packageManager,
+    npmOptions,
+    options,
+    'react',
+    {
+      extraPackages,
+      extraAddons: [`@storybook/addon-onboarding`],
+    },
+    'react-native-web-vite'
+  );
+
+  // Remove CSS files automatically copeied by baseGenerator
+  const targetPath = await cliStoriesTargetPath();
+  const cssFiles = (await readdir(targetPath)).filter((f) => f.endsWith('.css'));
+  await Promise.all(cssFiles.map((f) => rm(join(targetPath, f))));
+};
+
+export default generator;
diff --git a/code/lib/create-storybook/src/generators/SVELTE/index.test.ts b/code/lib/create-storybook/src/generators/SVELTE/index.test.ts
new file mode 100644
index 000000000000..0fb124025879
--- /dev/null
+++ b/code/lib/create-storybook/src/generators/SVELTE/index.test.ts
@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest';
+
+import type { JsPackageManager } from '@storybook/core/common';
+
+import { getAddonSvelteCsfVersion } from './index';
+
+describe('installed', () => {
+  it.each([
+    ['3.0.0', ''],
+    ['4.0.0', '4'],
+    ['5.0.0', '^5.0.0-next.0'],
+    ['6.0.0', ''],
+    ['3.0.0-next.0', ''],
+    ['4.0.0-next.0', '4'],
+    ['4.2.19::__archiveUrl=https%3A%2F%2Fregistry.npmjs.org%2Fsvelte%2F-%2Fsvelte-4.2.19.tgz', '4'],
+    ['5.0.0-next.0', '^5.0.0-next.0'],
+    ['6.0.0-next.0', ''],
+  ])('svelte %s => %s', async (svelteVersion, expectedAddonSpecifier) => {
+    const packageManager = {
+      getInstalledVersion: async (pkg: string) => (pkg === 'svelte' ? svelteVersion : undefined),
+      getAllDependencies: async () => ({ svelte: `^${svelteVersion}` }),
+    } as any as JsPackageManager;
+    await expect(getAddonSvelteCsfVersion(packageManager)).resolves.toBe(expectedAddonSpecifier);
+  });
+});
+
+describe('uninstalled', () => {
+  it.each([
+    ['^3', ''],
+    ['^4', '4'],
+    ['^5', '^5.0.0-next.0'],
+    ['^6', ''],
+    ['^3.0.0-next.0', ''],
+    ['^4.0.0-next.0', '4'],
+    ['^5.0.0-next.0', '^5.0.0-next.0'],
+    ['^6.0.0-next.0', ''],
+  ])('svelte %s => %s', async (svelteSpecifier, expectedAddonSpecifier) => {
+    const packageManager = {
+      getInstalledVersion: async (pkg: string) => undefined,
+      getAllDependencies: async () => ({ svelte: svelteSpecifier }),
+    } as any as JsPackageManager;
+    await expect(getAddonSvelteCsfVersion(packageManager)).resolves.toBe(expectedAddonSpecifier);
+  });
+});
diff --git a/code/lib/create-storybook/src/generators/SVELTE/index.ts b/code/lib/create-storybook/src/generators/SVELTE/index.ts
index d3b4a89a7351..9d00099437fb 100644
--- a/code/lib/create-storybook/src/generators/SVELTE/index.ts
+++ b/code/lib/create-storybook/src/generators/SVELTE/index.ts
@@ -1,10 +1,36 @@
+import { getVersionSafe } from 'storybook/internal/cli';
+import type { JsPackageManager } from 'storybook/internal/common';
+
+import { major } from 'semver';
+
 import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
+export const getAddonSvelteCsfVersion = async (packageManager: JsPackageManager) => {
+  const svelteVersion = await getVersionSafe(packageManager, 'svelte');
+  try {
+    const svelteMajor = major(svelteVersion ?? '');
+    if (svelteMajor === 4) {
+      return '4';
+    }
+    // TODO: update when addon-svelte-csf v5 is released
+    if (svelteMajor === 5) {
+      return '^5.0.0-next.0';
+    }
+  } catch {
+    // fallback to latest version
+  }
+  return '';
+};
+
 const generator: Generator = async (packageManager, npmOptions, options) => {
+  const addonSvelteCsfVersion = await getAddonSvelteCsfVersion(packageManager);
+
   await baseGenerator(packageManager, npmOptions, options, 'svelte', {
     extensions: ['js', 'ts', 'svelte'],
-    extraAddons: ['@storybook/addon-svelte-csf'],
+    extraAddons: [
+      `@storybook/addon-svelte-csf${addonSvelteCsfVersion && `@${addonSvelteCsfVersion}`}`,
+    ],
   });
 };
 
diff --git a/code/lib/create-storybook/src/generators/SVELTEKIT/index.ts b/code/lib/create-storybook/src/generators/SVELTEKIT/index.ts
index 4a891b9a68bf..1a17c0ac5b67 100644
--- a/code/lib/create-storybook/src/generators/SVELTEKIT/index.ts
+++ b/code/lib/create-storybook/src/generators/SVELTEKIT/index.ts
@@ -1,9 +1,12 @@
 import { CoreBuilder } from 'storybook/internal/cli';
 
+import { getAddonSvelteCsfVersion } from '../SVELTE';
 import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 
 const generator: Generator = async (packageManager, npmOptions, options) => {
+  const addonSvelteCsfVersion = await getAddonSvelteCsfVersion(packageManager);
+
   await baseGenerator(
     packageManager,
     npmOptions,
@@ -11,7 +14,9 @@ const generator: Generator = async (packageManager, npmOptions, options) => {
     'svelte',
     {
       extensions: ['js', 'ts', 'svelte'],
-      extraAddons: ['@storybook/addon-svelte-csf'],
+      extraAddons: [
+        `@storybook/addon-svelte-csf${addonSvelteCsfVersion && `@${addonSvelteCsfVersion}`}`,
+      ],
     },
     'sveltekit'
   );
diff --git a/code/lib/create-storybook/src/generators/baseGenerator.ts b/code/lib/create-storybook/src/generators/baseGenerator.ts
index f5d0c6ed828c..1b0c917edd58 100644
--- a/code/lib/create-storybook/src/generators/baseGenerator.ts
+++ b/code/lib/create-storybook/src/generators/baseGenerator.ts
@@ -1,16 +1,17 @@
 import { mkdir } from 'node:fs/promises';
 import { dirname, join } from 'node:path';
 
-import type { NpmOptions } from 'storybook/internal/cli';
-import type { Builder, SupportedRenderers } from 'storybook/internal/cli';
+import type { Builder, NpmOptions } from 'storybook/internal/cli';
 import { SupportedLanguage, externalFrameworks } from 'storybook/internal/cli';
 import { copyTemplateFiles } from 'storybook/internal/cli';
 import { configureEslintPlugin, extractEslintInfo } from 'storybook/internal/cli';
 import { detectBuilder } from 'storybook/internal/cli';
 import type { JsPackageManager } from 'storybook/internal/common';
 import { getPackageDetails, versions as packageVersions } from 'storybook/internal/common';
+import type { SupportedRenderers } from 'storybook/internal/types';
 import type { SupportedFrameworks } from 'storybook/internal/types';
 
+// eslint-disable-next-line depend/ban-dependencies
 import ora from 'ora';
 import invariant from 'tiny-invariant';
 import { dedent } from 'ts-dedent';
@@ -26,6 +27,7 @@ const defaultOptions: FrameworkOptions = {
   staticDir: undefined,
   addScripts: true,
   addMainFile: true,
+  addPreviewFile: true,
   addComponents: true,
   webpackCompiler: () => undefined,
   extraMain: undefined,
@@ -33,6 +35,7 @@ const defaultOptions: FrameworkOptions = {
   extensions: undefined,
   componentsDestinationPath: undefined,
   storybookConfigFolder: '.storybook',
+  installFrameworkPackages: true,
 };
 
 const getBuilderDetails = (builder: string) => {
@@ -81,13 +84,10 @@ const getFrameworkPackage = (framework: string | undefined, renderer: string, bu
     );
   }
 
-  if (externalFramework.frameworks !== undefined) {
-    return externalFramework.frameworks.find((item) =>
-      item.match(new RegExp(`-${storybookBuilder}`))
-    );
-  }
-
-  return externalFramework.packageName;
+  return (
+    externalFramework.frameworks?.find((item) => item.match(new RegExp(`-${storybookBuilder}`))) ??
+    externalFramework.packageName
+  );
 };
 
 const getRendererPackage = (framework: string | undefined, renderer: string) => {
@@ -116,6 +116,7 @@ const getFrameworkDetails = (
   framework?: string;
   renderer?: string;
   rendererId: SupportedRenderers;
+  frameworkPackage?: string;
 } => {
   const frameworkPackage = getFrameworkPackage(framework, renderer, builder);
   invariant(frameworkPackage, 'Missing framework package.');
@@ -143,6 +144,7 @@ const getFrameworkDetails = (
     return {
       packages: [rendererPackage, frameworkPackage],
       framework: frameworkPackagePath,
+      frameworkPackage,
       rendererId: renderer,
       type: 'framework',
     };
@@ -168,8 +170,18 @@ const stripVersions = (addons: string[]) => addons.map((addon) => getPackageDeta
 const hasInteractiveStories = (rendererId: SupportedRenderers) =>
   ['react', 'angular', 'preact', 'svelte', 'vue3', 'html', 'solid', 'qwik'].includes(rendererId);
 
-const hasFrameworkTemplates = (framework?: SupportedFrameworks) =>
-  framework ? ['angular', 'nextjs'].includes(framework) : false;
+const hasFrameworkTemplates = (framework?: SupportedFrameworks) => {
+  if (!framework) {
+    return false;
+  }
+  // Nuxt has framework templates, but for sandboxes we create them from the Vue3 renderer
+  // As the Nuxt framework templates are not compatible with the stories we need for CI.
+  // See: https://github.com/storybookjs/storybook/pull/28607#issuecomment-2467903327
+  if (framework === 'nuxt') {
+    return process.env.IN_STORYBOOK_SANDBOX !== 'true';
+  }
+  return ['angular', 'nextjs', 'react-native-web-vite'].includes(framework);
+};
 
 export async function baseGenerator(
   packageManager: JsPackageManager,
@@ -192,6 +204,7 @@ export async function baseGenerator(
     rendererId,
     framework: frameworkInclude,
     builder: builderInclude,
+    frameworkPackage,
   } = getFrameworkDetails(
     renderer,
     builder,
@@ -207,12 +220,14 @@ export async function baseGenerator(
     staticDir,
     addScripts,
     addMainFile,
+    addPreviewFile,
     addComponents,
     extraMain,
     extensions,
     storybookConfigFolder,
     componentsDestinationPath,
     webpackCompiler,
+    installFrameworkPackages,
   } = {
     ...defaultOptions,
     ...options,
@@ -228,11 +243,7 @@ export async function baseGenerator(
         })
       : extraAddonPackages;
 
-  extraAddonsToInstall.push(
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@chromatic-com/storybook@^1'
-  );
+  extraAddonsToInstall.push('@storybook/addon-essentials', '@chromatic-com/storybook@^3');
 
   // added to main.js
   const addons = [
@@ -247,12 +258,7 @@ export async function baseGenerator(
     ...extraAddonsToInstall,
   ].filter(Boolean);
 
-  // TODO: migrate template stories in solid and qwik to use @storybook/test
-  if (['solid', 'qwik'].includes(rendererId)) {
-    addonPackages.push('@storybook/testing-library');
-  } else {
-    addonPackages.push('@storybook/test');
-  }
+  addonPackages.push('@storybook/test');
 
   if (hasInteractiveStories(rendererId)) {
     addons.push('@storybook/addon-interactions');
@@ -286,7 +292,7 @@ export async function baseGenerator(
   const allPackages = [
     'storybook',
     getExternalFramework(rendererId) ? undefined : `@storybook/${rendererId}`,
-    ...frameworkPackages,
+    ...(installFrameworkPackages ? frameworkPackages : []),
     ...addonPackages,
     ...(extraPackagesToInstall || []),
   ].filter(Boolean);
@@ -328,9 +334,9 @@ export async function baseGenerator(
     addDependenciesSpinner.succeed();
   }
 
-  // Passing `recursive: true` ensures that the method doesn't throw when
-  // the directory already exists.
-  await mkdir(`./${storybookConfigFolder}`, { recursive: true });
+  if (addMainFile || addPreviewFile) {
+    await mkdir(`./${storybookConfigFolder}`, { recursive: true });
+  }
 
   if (addMainFile) {
     const prefixes = shouldApplyRequireWrapperOnPackageNames
@@ -340,14 +346,14 @@ export async function baseGenerator(
             ? dedent`/**
             * This function is used to resolve the absolute path of a package.
             * It is needed in projects that use Yarn PnP or are set up within a monorepo.
-            */ 
+            */
             function getAbsolutePath(value) {
               return dirname(require.resolve(join(value, 'package.json')))
             }`
             : dedent`/**
           * This function is used to resolve the absolute path of a package.
           * It is needed in projects that use Yarn PnP or are set up within a monorepo.
-          */ 
+          */
           function getAbsolutePath(value: string): any {
             return dirname(require.resolve(join(value, 'package.json')))
           }`,
@@ -359,6 +365,7 @@ export async function baseGenerator(
         name: frameworkInclude,
         options: options.framework || {},
       },
+      frameworkPackage,
       prefixes,
       storybookConfigFolder,
       addons: shouldApplyRequireWrapperOnPackageNames
@@ -378,12 +385,14 @@ export async function baseGenerator(
     });
   }
 
-  await configurePreview({
-    frameworkPreviewParts,
-    storybookConfigFolder: storybookConfigFolder as string,
-    language,
-    rendererId,
-  });
+  if (addPreviewFile) {
+    await configurePreview({
+      frameworkPreviewParts,
+      storybookConfigFolder: storybookConfigFolder as string,
+      language,
+      rendererId,
+    });
+  }
 
   if (addScripts) {
     await packageManager.addStorybookCommandInScripts({
diff --git a/code/lib/create-storybook/src/generators/configure.test.ts b/code/lib/create-storybook/src/generators/configure.test.ts
index db099baf5590..e593810dd971 100644
--- a/code/lib/create-storybook/src/generators/configure.test.ts
+++ b/code/lib/create-storybook/src/generators/configure.test.ts
@@ -26,6 +26,7 @@ describe('configureMain', () => {
       framework: {
         name: '@storybook/react-vite',
       },
+      frameworkPackage: '@storybook/react-vite',
     });
 
     const { calls } = vi.mocked(fsp.writeFile).mock;
@@ -55,6 +56,7 @@ describe('configureMain', () => {
       framework: {
         name: '@storybook/react-vite',
       },
+      frameworkPackage: '@storybook/react-vite',
     });
 
     const { calls } = vi.mocked(fsp.writeFile).mock;
@@ -81,7 +83,6 @@ describe('configureMain', () => {
       language: SupportedLanguage.JAVASCRIPT,
       prefixes: [],
       addons: [
-        "%%path.dirname(require.resolve(path.join('@storybook/addon-links', 'package.json')))%%",
         "%%path.dirname(require.resolve(path.join('@storybook/addon-essentials', 'package.json')))%%",
         "%%path.dirname(require.resolve(path.join('@storybook/preset-create-react-app', 'package.json')))%%",
         "%%path.dirname(require.resolve(path.join('@storybook/addon-interactions', 'package.json')))%%",
@@ -90,6 +91,7 @@ describe('configureMain', () => {
       framework: {
         name: "%%path.dirname(require.resolve(path.join('@storybook/react-webpack5', 'package.json')))%%",
       },
+      frameworkPackage: '@storybook/react-webpack5',
     });
 
     const { calls } = vi.mocked(fsp.writeFile).mock;
@@ -103,7 +105,6 @@ describe('configureMain', () => {
       const config = {
         stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
         addons: [
-          path.dirname(require.resolve(path.join('@storybook/addon-links', 'package.json'))),
           path.dirname(require.resolve(path.join('@storybook/addon-essentials', 'package.json'))),
           path.dirname(require.resolve(path.join('@storybook/preset-create-react-app', 'package.json'))),
           path.dirname(require.resolve(path.join('@storybook/addon-interactions', 'package.json'))),
diff --git a/code/lib/create-storybook/src/generators/configure.ts b/code/lib/create-storybook/src/generators/configure.ts
index c7002c58c045..401509dc2399 100644
--- a/code/lib/create-storybook/src/generators/configure.ts
+++ b/code/lib/create-storybook/src/generators/configure.ts
@@ -13,6 +13,7 @@ interface ConfigureMainOptions {
   storybookConfigFolder: string;
   language: SupportedLanguage;
   prefixes: string[];
+  frameworkPackage: string;
   /**
    * Extra values for main.js
    *
@@ -61,6 +62,7 @@ export async function configureMain({
   extensions = ['js', 'jsx', 'mjs', 'ts', 'tsx'],
   storybookConfigFolder,
   language,
+  frameworkPackage,
   prefixes = [],
   ...custom
 }: ConfigureMainOptions) {
@@ -78,8 +80,6 @@ export async function configureMain({
   let mainConfigTemplate = dedent`<<import>><<prefix>>const config<<type>> = <<mainContents>>;
     export default config;`;
 
-  const frameworkPackage = sanitizeFramework(custom.framework?.name);
-
   if (!frameworkPackage) {
     mainConfigTemplate = mainConfigTemplate.replace('<<import>>', '').replace('<<type>>', '');
     logger.warn('Could not find framework package name');
diff --git a/code/lib/create-storybook/src/generators/types.ts b/code/lib/create-storybook/src/generators/types.ts
index e9192a47c3c9..3c07d97e27cc 100644
--- a/code/lib/create-storybook/src/generators/types.ts
+++ b/code/lib/create-storybook/src/generators/types.ts
@@ -23,6 +23,7 @@ export interface FrameworkOptions {
   staticDir?: string;
   addScripts?: boolean;
   addMainFile?: boolean;
+  addPreviewFile?: boolean;
   addComponents?: boolean;
   webpackCompiler?: ({ builder }: { builder: Builder }) => 'babel' | 'swc' | undefined;
   extraMain?: any;
@@ -30,6 +31,7 @@ export interface FrameworkOptions {
   framework?: Record<string, any>;
   storybookConfigFolder?: string;
   componentsDestinationPath?: string;
+  installFrameworkPackages?: boolean;
 }
 
 export type Generator<T = void> = (
diff --git a/code/lib/create-storybook/src/initiate.ts b/code/lib/create-storybook/src/initiate.ts
index bed1870fd2a9..970cef3d137b 100644
--- a/code/lib/create-storybook/src/initiate.ts
+++ b/code/lib/create-storybook/src/initiate.ts
@@ -17,8 +17,8 @@ import { NxProjectDetectedError } from 'storybook/internal/server-errors';
 import { telemetry } from 'storybook/internal/telemetry';
 
 import boxen from 'boxen';
-import chalk from 'chalk';
 import findUp from 'find-up';
+import picocolors from 'picocolors';
 import prompts from 'prompts';
 import { lt, prerelease } from 'semver';
 import { dedent } from 'ts-dedent';
@@ -27,10 +27,12 @@ import angularGenerator from './generators/ANGULAR';
 import emberGenerator from './generators/EMBER';
 import htmlGenerator from './generators/HTML';
 import nextjsGenerator from './generators/NEXTJS';
+import nuxtGenerator from './generators/NUXT';
 import preactGenerator from './generators/PREACT';
 import qwikGenerator from './generators/QWIK';
 import reactGenerator from './generators/REACT';
 import reactNativeGenerator from './generators/REACT_NATIVE';
+import reactNativeWebGenerator from './generators/REACT_NATIVE_WEB';
 import reactScriptsGenerator from './generators/REACT_SCRIPTS';
 import serverGenerator from './generators/SERVER';
 import solidGenerator from './generators/SOLID';
@@ -84,6 +86,12 @@ const installStorybook = async <Project extends ProjectType>(
         );
       }
 
+      case ProjectType.REACT_NATIVE_WEB: {
+        return reactNativeWebGenerator(packageManager, npmOptions, generatorOptions).then(
+          commandLog('Adding Storybook support to your "React Native" app')
+        );
+      }
+
       case ProjectType.QWIK: {
         return qwikGenerator(packageManager, npmOptions, generatorOptions).then(
           commandLog('Adding Storybook support to your "Qwik" app')
@@ -110,6 +118,11 @@ const installStorybook = async <Project extends ProjectType>(
           commandLog('Adding Storybook support to your "Vue 3" app')
         );
 
+      case ProjectType.NUXT:
+        return nuxtGenerator(packageManager, npmOptions, generatorOptions).then(
+          commandLog('Adding Storybook support to your "Nuxt" app')
+        );
+
       case ProjectType.ANGULAR:
         commandLog('Adding Storybook support to your "Angular" app');
         return angularGenerator(packageManager, npmOptions, generatorOptions, options);
@@ -171,7 +184,7 @@ const installStorybook = async <Project extends ProjectType>(
       default:
         paddedLog(`We couldn't detect your project type. (code: ${projectType})`);
         paddedLog(
-          'You can specify a project type explicitly via `storybook init --type <type>`, see our docs on how to configure Storybook for your framework: https://storybook.js.org/docs/react/get-started/install'
+          'You can specify a project type explicitly via `storybook init --type <type>`, see our docs on how to configure Storybook for your framework: https://storybook.js.org/docs/get-started/install'
         );
 
         // Add a new line for the clear visibility.
@@ -185,7 +198,7 @@ const installStorybook = async <Project extends ProjectType>(
     return await runGenerator();
   } catch (err: any) {
     if (err?.message !== 'Canceled by the user' && err?.stack) {
-      logger.error(`\n     ${chalk.red(err.stack)}`);
+      logger.error(`\n     ${picocolors.red(err.stack)}`);
     }
     throw new HandledError(err);
   }
@@ -250,15 +263,15 @@ export async function doInitiate(options: CommandOptions): Promise<
   const borderColor = isOutdated ? '#FC521F' : '#F1618C';
 
   const messages = {
-    welcome: `Adding Storybook version ${chalk.bold(currentVersion)} to your project..`,
-    notLatest: chalk.red(dedent`
-      This version is behind the latest release, which is: ${chalk.bold(latestVersion)}!
+    welcome: `Adding Storybook version ${picocolors.bold(currentVersion)} to your project..`,
+    notLatest: picocolors.red(dedent`
+      This version is behind the latest release, which is: ${picocolors.bold(latestVersion)}!
       You likely ran the init command through npx, which can use a locally cached version, to get the latest please run:
-      ${chalk.bold('npx storybook@latest init')}
+      ${picocolors.bold('npx storybook@latest init')}
       
       You may want to CTRL+C to stop, and run with the latest version instead.
     `),
-    prelease: chalk.yellow('This is a pre-release version.'),
+    prelease: picocolors.yellow('This is a pre-release version.'),
   };
 
   logger.log(
@@ -348,22 +361,25 @@ export async function doInitiate(options: CommandOptions): Promise<
 
   if (projectType === ProjectType.REACT_NATIVE) {
     logger.log(dedent`
-      ${chalk.yellow('NOTE: installation is not 100% automated.')}
+      ${picocolors.yellow('NOTE: installation is not 100% automated.')}
 
       To run Storybook, you will need to:
 
       1. Replace the contents of your app entry with the following
       
-      ${chalk.inverse(' ' + "export {default} from './.storybook';" + ' ')}
+      ${picocolors.inverse(' ' + "export {default} from './.storybook';" + ' ')}
       
-      2. Enable transformer.unstable_allowRequireContext in your metro config
+      2. Wrap your metro config with the withStorybook enhancer function like this: 
       
-      For a more detailed guide go to:
-      ${chalk.cyan('https://github.com/storybookjs/react-native#existing-project')}
+      ${picocolors.inverse(' ' + "const withStorybook = require('@storybook/react-native/metro/withStorybook');" + ' ')}
+      ${picocolors.inverse(' ' + 'module.exports = withStorybook(defaultConfig);' + ' ')}
+
+      For more details go to:
+      ${picocolors.cyan('https://github.com/storybookjs/react-native#getting-started')}
       
       Then to run your Storybook, type:
 
-      ${chalk.inverse(' ' + packageManager.getRunCommand('start') + ' ')}
+      ${picocolors.inverse(' ' + packageManager.getRunCommand('start') + ' ')}
 
     `);
 
@@ -388,12 +404,14 @@ export async function doInitiate(options: CommandOptions): Promise<
     boxen(
       dedent`
           Storybook was successfully installed in your project! 🎉
-          To run Storybook manually, run ${chalk.yellow(
-            chalk.bold(storybookCommand)
+          To run Storybook manually, run ${picocolors.yellow(
+            picocolors.bold(storybookCommand)
           )}. CTRL+C to stop.
           
-          Wanna know more about Storybook? Check out ${chalk.cyan('https://storybook.js.org/')}
-          Having trouble or want to chat? Join us at ${chalk.cyan('https://discord.gg/storybook/')}
+          Wanna know more about Storybook? Check out ${picocolors.cyan('https://storybook.js.org/')}
+          Having trouble or want to chat? Join us at ${picocolors.cyan(
+            'https://discord.gg/storybook/'
+          )}
         `,
       { borderStyle: 'round', padding: 1, borderColor: '#F1618C' }
     )
diff --git a/code/lib/create-storybook/src/scaffold-new-project.ts b/code/lib/create-storybook/src/scaffold-new-project.ts
index f2d64fa794bd..2ece91bfc008 100644
--- a/code/lib/create-storybook/src/scaffold-new-project.ts
+++ b/code/lib/create-storybook/src/scaffold-new-project.ts
@@ -7,8 +7,9 @@ import { GenerateNewProjectOnInitError } from 'storybook/internal/server-errors'
 import { telemetry } from 'storybook/internal/telemetry';
 
 import boxen from 'boxen';
-import chalk from 'chalk';
+// eslint-disable-next-line depend/ban-dependencies
 import execa from 'execa';
+import picocolors from 'picocolors';
 import prompts from 'prompts';
 import { dedent } from 'ts-dedent';
 
@@ -45,9 +46,10 @@ const SUPPORTED_PROJECTS: Record<string, SupportedProject> = {
       language: 'TS',
     },
     createScript: {
-      npm: 'npm create next-app . -- --typescript --use-npm --eslint --tailwind --no-app --import-alias="@/*" --src-dir',
-      yarn: 'yarn create next-app . --typescript --use-yarn --eslint --tailwind --no-app --import-alias="@/*" --src-dir',
-      pnpm: 'pnpm create next-app . --typescript --use-pnpm --eslint --tailwind --no-app --import-alias="@/*" --src-dir',
+      npm: 'npm create next-app@^14 . -- --typescript --use-npm --eslint --tailwind --no-app --import-alias="@/*" --src-dir',
+      // yarn doesn't support version ranges, so we have to use npx
+      yarn: 'npx create-next-app@^14 . --typescript --use-yarn --eslint --tailwind --no-app --import-alias="@/*" --src-dir',
+      pnpm: 'pnpm create next-app^14 . --typescript --use-pnpm --eslint --tailwind --no-app --import-alias="@/*" --src-dir',
     },
   },
   'vue-vite-ts': {
@@ -102,7 +104,7 @@ const packageManagerToCoercedName = (
 
 const buildProjectDisplayNameForPrint = ({ displayName }: SupportedProject) => {
   const { type, builder, language } = displayName;
-  return `${chalk.bold.blue(type)} ${builder ? `+ ${builder} ` : ''}(${language})`;
+  return `${picocolors.bold(picocolors.blue(type))} ${builder ? `+ ${builder} ` : ''}(${language})`;
 };
 
 /**
@@ -121,14 +123,14 @@ export const scaffoldNewProject = async (
       dedent`
         Would you like to generate a new project from the following list?
 
-        ${chalk.bold('Note:')}
+        ${picocolors.bold('Note:')}
         Storybook supports many more frameworks and bundlers than listed below. If you don't see your
         preferred setup, you can still generate a project then rerun this command to add Storybook.
 
-        ${chalk.bold('Press ^C at any time to quit.')}
+        ${picocolors.bold('Press ^C at any time to quit.')}
       `,
       {
-        title: chalk.bold('🔎 Empty directory detected'),
+        title: picocolors.bold('🔎 Empty directory detected'),
         padding: 1,
         borderStyle: 'double',
         borderColor: 'yellow',
@@ -166,7 +168,7 @@ export const scaffoldNewProject = async (
 
   logger.line(1);
   logger.plain(
-    `Creating a new "${projectDisplayName}" project with ${chalk.bold(packageManagerName)}...`
+    `Creating a new "${projectDisplayName}" project with ${picocolors.bold(packageManagerName)}...`
   );
   logger.line(1);
 
@@ -202,12 +204,14 @@ export const scaffoldNewProject = async (
   logger.plain(
     boxen(
       dedent`
-      "${projectDisplayName}" project with ${chalk.bold(packageManagerName)} created successfully!
+      "${projectDisplayName}" project with ${picocolors.bold(
+        packageManagerName
+      )} created successfully!
 
       Continuing with Storybook installation...
     `,
       {
-        title: chalk.bold('✅ Success!'),
+        title: picocolors.bold('✅ Success!'),
         padding: 1,
         borderStyle: 'double',
         borderColor: 'green',
diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json
index 709c14d03eda..3b57203d481f 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Enrich CSF files via static analysis",
   "keywords": [
     "storybook"
diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json
index 0393a36e1f8e..84b42100656e 100644
--- a/code/lib/instrumenter/package.json
+++ b/code/lib/instrumenter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/instrumenter",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "",
   "keywords": [
     "storybook"
@@ -44,8 +44,7 @@
   },
   "dependencies": {
     "@storybook/global": "^5.0.0",
-    "@vitest/utils": "^2.0.5",
-    "util": "^0.12.4"
+    "@vitest/utils": "^2.1.1"
   },
   "devDependencies": {
     "typescript": "^5.3.2"
@@ -68,6 +67,9 @@
       "@vitest/expect",
       "@vitest/spy",
       "@vitest/utils"
+    ],
+    "externals": [
+      "util"
     ]
   },
   "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
diff --git a/code/lib/instrumenter/project.json b/code/lib/instrumenter/project.json
index 3ecdad88a0dd..dd7cc79ecbe4 100644
--- a/code/lib/instrumenter/project.json
+++ b/code/lib/instrumenter/project.json
@@ -1,4 +1,5 @@
 {
+  "name": "instrumenter",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {
diff --git a/code/lib/instrumenter/src/instrumenter.ts b/code/lib/instrumenter/src/instrumenter.ts
index 5e5a5c1cacab..524b7300222e 100644
--- a/code/lib/instrumenter/src/instrumenter.ts
+++ b/code/lib/instrumenter/src/instrumenter.ts
@@ -195,7 +195,7 @@ export class Instrumenter {
         return {
           playUntil: shadowCalls
             .slice(0, firstRowIndex)
-            .filter((call) => call.interceptable && !call.ancestors.length)
+            .filter((call) => call.interceptable && !call.ancestors?.length)
             .slice(-1)[0]?.id,
         };
       });
@@ -205,7 +205,7 @@ export class Instrumenter {
     };
 
     const back = ({ storyId }: { storyId: string }) => {
-      const log = this.getLog(storyId).filter((call) => !call.ancestors.length);
+      const log = this.getLog(storyId).filter((call) => !call.ancestors?.length);
       const last = log.reduceRight((res, item, index) => {
         if (res >= 0 || item.status === CallStates.WAITING) {
           return res;
@@ -538,7 +538,7 @@ export class Instrumenter {
         }));
 
         // Exceptions inside callbacks should bubble up to the parent call.
-        if (call.ancestors.length) {
+        if (call.ancestors?.length) {
           if (!Object.prototype.hasOwnProperty.call(e, 'callId')) {
             Object.defineProperty(e, 'callId', { value: call.id });
           }
diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json
index f9c6fdf7d3b5..13eacc85b7ed 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json
index 7372daad6416..409cdf2a3a04 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Source loader",
   "keywords": [
     "lib",
@@ -44,9 +44,9 @@
     "prep": "jiti ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "^0.1.11",
+    "@storybook/csf": "0.1.12",
+    "es-toolkit": "^1.22.0",
     "estraverse": "^5.2.0",
-    "lodash": "^4.17.21",
     "prettier": "^3.1.1"
   },
   "devDependencies": {
diff --git a/code/lib/source-loader/src/abstract-syntax-tree/generate-helpers.js b/code/lib/source-loader/src/abstract-syntax-tree/generate-helpers.js
index da737063db1c..39c667804aef 100644
--- a/code/lib/source-loader/src/abstract-syntax-tree/generate-helpers.js
+++ b/code/lib/source-loader/src/abstract-syntax-tree/generate-helpers.js
@@ -1,6 +1,6 @@
 import { sanitize, storyNameFromExport } from '@storybook/csf';
 
-import mapKeys from 'lodash/mapKeys.js';
+import { mapKeys } from 'es-toolkit/compat';
 
 import { extractSource } from '../extract-source';
 import { patchNode } from './parse-helpers';
diff --git a/code/lib/test/package.json b/code/lib/test/package.json
index f103259c54c5..da8c9beb9229 100644
--- a/code/lib/test/package.json
+++ b/code/lib/test/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/test",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "",
   "keywords": [
     "storybook"
@@ -23,10 +23,9 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
       "node": "./dist/index.js",
-      "default": "./dist/index.mjs"
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
     },
     "./package.json": "./package.json"
   },
@@ -44,15 +43,14 @@
     "prep": "jiti ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "^0.1.11",
+    "@storybook/csf": "0.1.12",
     "@storybook/global": "^5.0.0",
     "@storybook/instrumenter": "workspace:*",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.5.0",
     "@testing-library/user-event": "14.5.2",
     "@vitest/expect": "2.0.5",
-    "@vitest/spy": "2.0.5",
-    "util": "^0.12.4"
+    "@vitest/spy": "2.0.5"
   },
   "devDependencies": {
     "chai": "^5.1.1",
@@ -79,6 +77,9 @@
       "@vitest/expect",
       "@vitest/spy",
       "@vitest/utils"
+    ],
+    "externals": [
+      "util"
     ]
   },
   "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"
diff --git a/code/lib/test/project.json b/code/lib/test/project.json
index 3ecdad88a0dd..1302a230f1e1 100644
--- a/code/lib/test/project.json
+++ b/code/lib/test/project.json
@@ -1,4 +1,5 @@
 {
+  "name": "test",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {
diff --git a/code/lib/test/src/testing-library.ts b/code/lib/test/src/testing-library.ts
index 1aa814dafdce..4ff01e47eacf 100644
--- a/code/lib/test/src/testing-library.ts
+++ b/code/lib/test/src/testing-library.ts
@@ -28,7 +28,7 @@ testingLibrary.screen = new Proxy(testingLibrary.screen, {
   get(target, prop, receiver) {
     once.warn(dedent`
           You are using Testing Library's \`screen\` object. Use \`within(canvasElement)\` instead.
-          More info: https://storybook.js.org/docs/react/essentials/interactions
+          More info: https://storybook.js.org/docs/essentials/interactions
         `);
     return Reflect.get(target, prop, receiver);
   },
diff --git a/code/lib/test/template/stories/before-each.stories.ts b/code/lib/test/template/stories/before-each.stories.ts
index 79c31874c813..0d9a88cafa3c 100644
--- a/code/lib/test/template/stories/before-each.stories.ts
+++ b/code/lib/test/template/stories/before-each.stories.ts
@@ -1,47 +1,13 @@
 /* eslint-disable @typescript-eslint/naming-convention,storybook/prefer-pascal-case */
-import { expect, getByRole, mocked, spyOn, userEvent } from '@storybook/test';
+import { expect } from '@storybook/test';
 
 const meta = {
   component: globalThis.Components.Button,
-  loaders() {
-    spyOn(console, 'log').mockName('console.log');
-    console.log('1 - [from loaders]');
-  },
-  beforeEach() {
-    console.log('2 - [from meta beforeEach]');
-  },
+  args: { label: 'Button' },
 };
 
 export default meta;
 
-export const BeforeEachOrder = {
-  parameters: { chromatic: { disable: true } },
-  beforeEach() {
-    console.log('3 - [from story beforeEach]');
-  },
-  decorators: (StoryFn: any) => {
-    console.log('4 - [from decorator]');
-    return StoryFn();
-  },
-  args: {
-    label: 'Button',
-    onClick: () => {
-      console.log('5 - [from onClick]');
-    },
-  },
-  async play({ canvasElement }: any) {
-    await userEvent.click(getByRole(canvasElement, 'button'));
-
-    await expect(mocked(console.log).mock.calls).toEqual([
-      ['1 - [from loaders]'],
-      ['2 - [from meta beforeEach]'],
-      ['3 - [from story beforeEach]'],
-      ['4 - [from decorator]'],
-      ['5 - [from onClick]'],
-    ]);
-  },
-};
-
 export const before_each_and_loaders_can_extend_context = {
   parameters: { chromatic: { disable: true } },
   loaders(context) {
diff --git a/code/lib/test/template/stories/mount-in-play.stories.ts b/code/lib/test/template/stories/mount-in-play.stories.ts
index c7acb7dce688..22c92497783d 100644
--- a/code/lib/test/template/stories/mount-in-play.stories.ts
+++ b/code/lib/test/template/stories/mount-in-play.stories.ts
@@ -1,49 +1,9 @@
-import { expect, fn, getByRole, mocked, spyOn, userEvent } from '@storybook/test';
+import { expect, fn } from '@storybook/test';
 
-const meta = {
-  component: globalThis.Components.Button,
-  loaders() {
-    spyOn(console, 'log').mockName('console.log');
-    console.log('1 - [from loaders]');
-  },
-  beforeEach() {
-    console.log('2 - [from meta beforeEach]');
-  },
-};
+const meta = { component: globalThis.Components.Button };
 
 export default meta;
 
-export const MountInPlay = {
-  beforeEach() {
-    console.log('3 - [from story beforeEach]');
-  },
-  decorators: (storyFn) => {
-    console.log('5 - [from decorator]');
-    return storyFn();
-  },
-  args: {
-    label: 'Button',
-    onClick: () => {
-      console.log('7 - [from onClick]');
-    },
-  },
-  async play({ mount, canvasElement }) {
-    console.log('4 - [before mount]');
-    await mount();
-    console.log('6 - [after mount]');
-    await userEvent.click(getByRole(canvasElement, 'button'));
-    await expect(mocked(console.log).mock.calls).toEqual([
-      ['1 - [from loaders]'],
-      ['2 - [from meta beforeEach]'],
-      ['3 - [from story beforeEach]'],
-      ['4 - [before mount]'],
-      ['5 - [from decorator]'],
-      ['6 - [after mount]'],
-      ['7 - [from onClick]'],
-    ]);
-  },
-};
-
 export const MountShouldBeDestructured = {
   parameters: { chromatic: { disable: true } },
   args: {
diff --git a/code/lib/test/template/stories/order-of-hooks.stories.ts b/code/lib/test/template/stories/order-of-hooks.stories.ts
new file mode 100644
index 000000000000..f3e965dee1b3
--- /dev/null
+++ b/code/lib/test/template/stories/order-of-hooks.stories.ts
@@ -0,0 +1,54 @@
+import { expect, fn, getByRole, mocked, spyOn, userEvent } from '@storybook/test';
+
+const meta = {
+  component: globalThis.Components.Button,
+  loaders() {
+    spyOn(console, 'log').mockName('console.log');
+    console.log('1 - [from loaders]');
+  },
+  beforeEach() {
+    console.log('2 - [from meta beforeEach]');
+  },
+  async experimental_afterEach() {
+    console.log('9 - [from meta afterEach]');
+
+    await expect(mocked(console.log).mock.calls).toEqual([
+      ['1 - [from loaders]'],
+      ['2 - [from meta beforeEach]'],
+      ['3 - [from story beforeEach]'],
+      ['4 - [before mount]'],
+      ['5 - [from decorator]'],
+      ['6 - [after mount]'],
+      ['7 - [from onClick]'],
+      ['8 - [from story afterEach]'],
+      ['9 - [from meta afterEach]'],
+    ]);
+  },
+};
+
+export default meta;
+
+export const OrderOfHooks = {
+  beforeEach() {
+    console.log('3 - [from story beforeEach]');
+  },
+  decorators: (storyFn) => {
+    console.log('5 - [from decorator]');
+    return storyFn();
+  },
+  args: {
+    label: 'Button',
+    onClick: () => {
+      console.log('7 - [from onClick]');
+    },
+  },
+  async play({ mount, canvasElement }) {
+    console.log('4 - [before mount]');
+    await mount();
+    console.log('6 - [after mount]');
+    await userEvent.click(getByRole(canvasElement, 'button'));
+  },
+  async experimental_afterEach() {
+    console.log('8 - [from story afterEach]');
+  },
+};
diff --git a/code/migrations.json b/code/migrations.json
deleted file mode 100644
index 7581c9bc77a7..000000000000
--- a/code/migrations.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "migrations": [
-    {
-      "cli": "nx",
-      "version": "17.3.0-beta.6",
-      "description": "Updates the nx wrapper.",
-      "implementation": "./src/migrations/update-17-3-0/update-nxw",
-      "package": "nx",
-      "name": "17.3.0-update-nx-wrapper"
-    },
-    {
-      "cli": "nx",
-      "version": "18.0.0-beta.2",
-      "description": "Updates .env to disabled adding plugins when generating projects in an existing Nx workspace",
-      "implementation": "./src/migrations/update-18-0-0/disable-crystal-for-existing-workspaces",
-      "x-repair-skip": true,
-      "package": "nx",
-      "name": "18.0.0-disable-adding-plugins-for-existing-workspaces"
-    }
-  ]
-}
diff --git a/code/nx.json b/code/nx.json
index 12070cbb8d4e..eaaabd089ea4 100644
--- a/code/nx.json
+++ b/code/nx.json
@@ -1,16 +1,10 @@
 {
   "$schema": "./node_modules/nx/schemas/nx-schema.json",
   "extends": "nx/presets/npm.json",
-  "cacheDirectory": "../.nx/cache",
   "nxCloudAccessToken": "NGVmYTkxMmItYzY3OS00MjkxLTk1ZDktZDFmYTFmNmVlNGY4fHJlYWQ=",
   "defaultBase": "next",
+  "useLegacyCache": true,
   "parallel": 8,
-  "affected": {
-    "defaultBase": "next"
-  },
-  "cli": {
-    "packageManager": "yarn"
-  },
   "plugins": [
     {
       "plugin": "@nx/vite/plugin",
@@ -52,7 +46,7 @@
         "{workspaceRoot}/../scripts/prepare/{bundle,addon-bundle,esm-bundle}.ts"
       ],
       "dependsOn": ["^build"],
-      "outputs": ["{projectRoot}/dist"],
+      "outputs": ["{projectRoot}/dist", "{workspaceRoot}/bench/esbuild-metafiles/{projectName}"],
       "cache": true
     },
     "test": {
@@ -138,7 +132,7 @@
     "sharedGlobals": ["{workspaceRoot}/tsconfig.json"],
     "production": [
       "default",
-      "!{projectRoot}/src/**/**/*.{test,spec,stories}.?(c|m)[jt]s?(x)?(.snap),",
+      "!{projectRoot}/src/**/**/*.{test,spec,stories}.?(c|m)[jt]s?(x)?(.snap)",
       "!{projectRoot}/vitest.config.[jt]s",
       "!{projectRoot}/README.md",
       "!{projectRoot}/.eslintrc.{json,js}",
diff --git a/code/package.json b/code/package.json
index af2a344764ec..b8531c49d34d 100644
--- a/code/package.json
+++ b/code/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/root",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "private": true,
   "description": "Storybook root",
   "homepage": "https://storybook.js.org/",
@@ -36,6 +36,7 @@
     "generate-sandboxes": "yarn --cwd ../scripts generate-sandboxes",
     "github-release": "github-release-from-changelog",
     "i": "yarn --cwd .. i",
+    "knip": "VITE_CJS_IGNORE_WARNING=1 ../scripts/node_modules/.bin/knip --config ../scripts/knip.config.ts",
     "lint": "yarn lint:js && yarn lint:md",
     "lint:ejs": "ejslint **/*.ejs",
     "lint:js": "yarn lint:js:cmd .  --quiet",
@@ -77,24 +78,24 @@
     "defaults"
   ],
   "resolutions": {
-    "@playwright/test": "1.46.0",
+    "@playwright/test": "1.48.1",
     "@types/babel__traverse@npm:*": "patch:@types/babel__traverse@npm%3A7.20.6#~/.yarn/patches/@types-babel__traverse-npm-7.20.6-fac4243243.patch",
     "@types/babel__traverse@npm:^7.18.0": "patch:@types/babel__traverse@npm%3A7.20.6#~/.yarn/patches/@types-babel__traverse-npm-7.20.6-fac4243243.patch",
     "@types/node": "^22.0.0",
     "@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.46.0",
-    "playwright-core": "1.46.0",
+    "esbuild": "^0.24.0",
+    "playwright": "1.48.1",
+    "playwright-core": "1.48.1",
     "serialize-javascript": "^3.1.0",
     "type-fest": "~2.19"
   },
   "dependencies": {
-    "@chromatic-com/storybook": "^1.6.1",
+    "@chromatic-com/storybook": "^3.2.2",
     "@happy-dom/global-registrator": "^14.12.0",
-    "@nx/eslint": "18.0.6",
-    "@nx/vite": "18.0.6",
-    "@nx/workspace": "18.0.6",
-    "@playwright/test": "1.46.0",
+    "@nx/eslint": "20.2.2",
+    "@nx/vite": "20.2.2",
+    "@nx/workspace": "20.2.2",
+    "@playwright/test": "1.48.1",
     "@storybook/addon-a11y": "workspace:*",
     "@storybook/addon-actions": "workspace:*",
     "@storybook/addon-backgrounds": "workspace:*",
@@ -122,7 +123,7 @@
     "@storybook/codemod": "workspace:*",
     "@storybook/core": "workspace:*",
     "@storybook/core-webpack": "workspace:*",
-    "@storybook/csf": "0.1.11",
+    "@storybook/csf": "0.1.12",
     "@storybook/csf-plugin": "workspace:*",
     "@storybook/ember": "workspace:*",
     "@storybook/eslint-config-storybook": "^4.0.0",
@@ -167,29 +168,30 @@
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "@types/express": "^4.17.21",
-    "@types/lodash": "^4.14.167",
     "@types/mock-require": "^2.0.3",
     "@types/node": "^22.0.0",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
     "@types/semver": "^7.3.4",
     "@types/serve-static": "^1.13.8",
-    "@typescript-eslint/experimental-utils": "^5.62.0",
-    "@typescript-eslint/parser": "^6.18.1",
-    "@vitejs/plugin-react": "^3.0.1",
+    "@typescript-eslint/eslint-plugin": "7.18.0",
+    "@typescript-eslint/parser": "7.18.0",
+    "@vitejs/plugin-react": "^4.3.2",
     "@vitejs/plugin-vue": "^4.4.0",
-    "@vitest/browser": "^2.0.5",
-    "@vitest/coverage-istanbul": "^2.0.5",
-    "@vitest/coverage-v8": "^2.0.5",
+    "@vitest/browser": "^2.1.3",
+    "@vitest/coverage-istanbul": "^2.1.3",
+    "@vitest/coverage-v8": "^2.1.3",
     "create-storybook": "workspace:*",
     "cross-env": "^7.0.3",
     "danger": "^12.3.3",
-    "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0",
+    "es-toolkit": "^1.22.0",
+    "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0",
     "esbuild-loader": "^4.2.0",
     "esbuild-plugin-alias": "^0.2.1",
-    "eslint": "^8.56.0",
+    "eslint": "8.57.1",
     "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-depend": "^0.11.0",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-local-rules": "portal:../scripts/eslint-plugin-local-rules",
     "eslint-plugin-playwright": "^1.6.2",
     "eslint-plugin-storybook": "^0.8.0",
@@ -199,9 +201,8 @@
     "http-server": "^14.1.1",
     "husky": "^4.3.7",
     "lint-staged": "^13.2.2",
-    "lodash": "^4.17.21",
     "mock-require": "^3.0.3",
-    "nx": "18.0.6",
+    "nx": "20.2.2",
     "prettier": "^3.1.1",
     "prettier-plugin-brace-style": "^0.6.2",
     "prettier-plugin-css-order": "^2.1.2",
@@ -215,13 +216,13 @@
     "serve-static": "^1.14.1",
     "slash": "^5.0.0",
     "storybook": "workspace:^",
-    "svelte": "^5.0.0-next.65",
+    "svelte": "^5.0.0-next.268",
     "ts-dedent": "^2.0.0",
-    "typescript": "^5.4.3",
+    "typescript": "5.4.3",
     "util": "^0.12.4",
     "vite": "^4.0.0",
     "vite-plugin-inspect": "^0.8.5",
-    "vitest": "^2.0.5",
+    "vitest": "^2.1.3",
     "wait-on": "^7.0.1"
   },
   "dependenciesMeta": {
diff --git a/code/playwright.config.ts b/code/playwright.config.ts
index dee882693c80..5b29fa4cce32 100644
--- a/code/playwright.config.ts
+++ b/code/playwright.config.ts
@@ -3,6 +3,10 @@ import { defineConfig, devices } from '@playwright/test';
 /** Read environment variables from file. https://github.com/motdotla/dotenv */
 // require('dotenv').config();
 
+// Comment this out and fill in the values to run E2E tests locally using the Playwright extension easily
+// process.env.STORYBOOK_URL = 'http://localhost:6006';
+// process.env.STORYBOOK_TEMPLATE_NAME = 'react-vite/default-ts';
+
 /** See https://playwright.dev/docs/test-configuration. */
 export default defineConfig({
   testDir: './e2e-tests',
diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json
index 5dab09ec6c19..034243e84eb8 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook for Create React App preset",
   "keywords": [
     "storybook"
diff --git a/code/presets/html-webpack/README.md b/code/presets/html-webpack/README.md
index 3fa497407563..e6b8fd3e587b 100644
--- a/code/presets/html-webpack/README.md
+++ b/code/presets/html-webpack/README.md
@@ -1,6 +1,6 @@
 # Storybook Webpack preset for HTML
 
-This package is a [preset](https://storybook.js.org/docs/html/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling HTML.
+This package is a [preset](https://storybook.js.org/docs/addons/writing-presets?renderer=html) that configures Storybook's webpack settings for handling HTML.
 It's an internal package that's not intended to be used directly by users.
 
-- More info on [Storybook for HTML](https://storybook.js.org/docs/html/get-started)
+- More info on [Storybook for HTML](https://storybook.js.org/docs/get-started/install?renderer=html)
diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json
index 7c9fd1d7cebb..b0d642817560 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/presets/preact-webpack/README.md b/code/presets/preact-webpack/README.md
index 5ac103fdd029..c3e23e11f650 100644
--- a/code/presets/preact-webpack/README.md
+++ b/code/presets/preact-webpack/README.md
@@ -1,6 +1,6 @@
 # Storybook Webpack preset for Preact
 
-This package is a [preset](https://storybook.js.org/docs/preact/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling Preact.
+This package is a [preset](https://storybook.js.org/docs/addons/writing-presets?renderer=preact) that configures Storybook's webpack settings for handling Preact.
 It's an internal package that's not intended to be used directly by users.
 
-- More info on [Storybook for Preact](https://storybook.js.org/docs/preact/get-started)
+- More info on [Storybook for Preact](https://storybook.js.org/docs/get-started/install?renderer=preact)
diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json
index ee4f7b1d79ab..b9afcadcc54a 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook for Preact: Develop Preact Component in isolation.",
   "keywords": [
     "storybook"
diff --git a/code/presets/react-webpack/README.md b/code/presets/react-webpack/README.md
index 74e2ad35024f..30e05d0a67b1 100644
--- a/code/presets/react-webpack/README.md
+++ b/code/presets/react-webpack/README.md
@@ -1,6 +1,6 @@
 # Storybook Webpack preset for React
 
-This package is a [preset](https://storybook.js.org/docs/react/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling React.
+This package is a [preset](https://storybook.js.org/docs/addons/writing-presets?renderer=react) that configures Storybook's webpack settings for handling React.
 It's an internal package that's not intended to be used directly by users.
 
-- More info on [Storybook for React](https://storybook.js.org/docs/react/get-started)
+- More info on [Storybook for React](https://storybook.js.org/docs/get-started/install?renderer=react)
diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json
index 8f3e04e671b7..d6dbc6b2988b 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading",
   "keywords": [
     "storybook"
diff --git a/code/presets/server-webpack/README.md b/code/presets/server-webpack/README.md
index 6ec71da73371..b804e929699b 100644
--- a/code/presets/server-webpack/README.md
+++ b/code/presets/server-webpack/README.md
@@ -1,6 +1,6 @@
 # Storybook Webpack preset for Server
 
-This package is a [preset](https://storybook.js.org/docs/react/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling React.
+This package is a [preset](https://storybook.js.org/docs/addons/writing-presets) that configures Storybook's webpack settings for handling React.
 It's an internal package that's not intended to be used directly by users.
 
 - More info on [Storybook for Server](https://github.com/storybookjs/storybook/tree/next/code/frameworks/server-webpack5)
diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json
index 0dcf0288a02e..11dd58d5e508 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
diff --git a/code/presets/svelte-webpack/README.md b/code/presets/svelte-webpack/README.md
index b2d6cd5e9035..c29a4ed7a173 100644
--- a/code/presets/svelte-webpack/README.md
+++ b/code/presets/svelte-webpack/README.md
@@ -1,6 +1,6 @@
 # Storybook Webpack preset for Svelte
 
-This package is a [preset](https://storybook.js.org/docs/svelte/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling Svelte.
+This package is a [preset](https://storybook.js.org/docs/addons/writing-presets?renderer=svelte) that configures Storybook's webpack settings for handling Svelte.
 It's an internal package that's not intended to be used directly by users.
 
-- More info on [Storybook for Svelte](https://storybook.js.org/docs/svelte/get-started)
+- More info on [Storybook for Svelte](https://storybook.js.org/docs/get-started/install?renderer=svelte)
diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json
index d3f4f143e6c7..31132600ffc7 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -69,13 +69,13 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "svelte": "^4.0.0",
-    "svelte-loader": "^3.1.9",
+    "svelte": "^5.0.0",
+    "svelte-loader": "^3.2.4",
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
     "storybook": "workspace:^",
-    "svelte": "^4.0.0 || ^5.0.0-next.65",
+    "svelte": "^4.0.0 || ^5.0.0",
     "svelte-loader": "*"
   },
   "engines": {
diff --git a/code/presets/vue3-webpack/README.md b/code/presets/vue3-webpack/README.md
index 4c2a2df89914..9c6133472d65 100644
--- a/code/presets/vue3-webpack/README.md
+++ b/code/presets/vue3-webpack/README.md
@@ -1,6 +1,6 @@
 # Storybook Webpack preset for Vue3
 
-This package is a [preset](https://storybook.js.org/docs/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling Vue 3.
+This package is a [preset](https://storybook.js.org/docs/addons/writing-presets?renderer=vue) that configures Storybook's webpack settings for handling Vue 3.
 It's an internal package that's not intended to be used directly by users.
 
-- More info on [Storybook for Vue3](https://storybook.js.org/docs/get-started/why-storybook)
+- More info on [Storybook for Vue3](https://storybook.js.org/docs/get-started/install?renderer=vue)
diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json
index defa498c49be..997b4807d360 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "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 610953c43199..78f5d26b0802 100644
--- a/code/renderers/html/package.json
+++ b/code/renderers/html/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook HTML renderer",
   "keywords": [
     "storybook"
@@ -46,11 +46,11 @@
     "prep": "jiti ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/components": "workspace:^",
+    "@storybook/components": "workspace:*",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "workspace:^",
-    "@storybook/preview-api": "workspace:^",
-    "@storybook/theming": "workspace:^",
+    "@storybook/manager-api": "workspace:*",
+    "@storybook/preview-api": "workspace:*",
+    "@storybook/theming": "workspace:*",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
diff --git a/code/renderers/html/src/public-types.ts b/code/renderers/html/src/public-types.ts
index 462de867ddd9..6f635ab7f6f2 100644
--- a/code/renderers/html/src/public-types.ts
+++ b/code/renderers/html/src/public-types.ts
@@ -18,21 +18,21 @@ export type { HtmlRenderer };
 /**
  * Metadata to configure the stories for a component.
  *
- * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
+ * @see [Default export](https://storybook.js.org/docs/api/csf#default-export)
  */
 export type Meta<TArgs = Args> = ComponentAnnotations<HtmlRenderer, TArgs>;
 
 /**
  * Story function that represents a CSFv2 component example.
  *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ * @see [Named Story exports](https://storybook.js.org/docs/api/csf#named-story-exports)
  */
 export type StoryFn<TArgs = Args> = AnnotatedStoryFn<HtmlRenderer, TArgs>;
 
 /**
  * Story object that represents a CSFv3 component example.
  *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ * @see [Named Story exports](https://storybook.js.org/docs/api/csf#named-story-exports)
  */
 export type StoryObj<TArgs = Args> = StoryAnnotations<HtmlRenderer, TArgs>;
 
diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json
index fd75078890cf..a740e9671db2 100644
--- a/code/renderers/preact/package.json
+++ b/code/renderers/preact/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook Preact renderer",
   "keywords": [
     "storybook"
@@ -46,11 +46,11 @@
     "prep": "jiti ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/components": "workspace:^",
+    "@storybook/components": "workspace:*",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "workspace:^",
-    "@storybook/preview-api": "workspace:^",
-    "@storybook/theming": "workspace:^",
+    "@storybook/manager-api": "workspace:*",
+    "@storybook/preview-api": "workspace:*",
+    "@storybook/theming": "workspace:*",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
diff --git a/code/renderers/preact/src/public-types.ts b/code/renderers/preact/src/public-types.ts
index d9ee4aa59860..eb4a3201c442 100644
--- a/code/renderers/preact/src/public-types.ts
+++ b/code/renderers/preact/src/public-types.ts
@@ -18,21 +18,21 @@ export type { PreactRenderer };
 /**
  * Metadata to configure the stories for a component.
  *
- * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
+ * @see [Default export](https://storybook.js.org/docs/api/csf#default-export)
  */
 export type Meta<TArgs = Args> = ComponentAnnotations<PreactRenderer, TArgs>;
 
 /**
  * Story function that represents a CSFv2 component example.
  *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ * @see [Named Story exports](https://storybook.js.org/docs/api/csf#named-story-exports)
  */
 export type StoryFn<TArgs = Args> = AnnotatedStoryFn<PreactRenderer, TArgs>;
 
 /**
  * Story object that represents a CSFv3 component example.
  *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ * @see [Named Story exports](https://storybook.js.org/docs/api/csf#named-story-exports)
  */
 export type StoryObj<TArgs = Args> = StoryAnnotations<PreactRenderer, TArgs>;
 
diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json
index 3a2e94742328..3df61fc8f8cf 100644
--- a/code/renderers/react/package.json
+++ b/code/renderers/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook React renderer",
   "keywords": [
     "storybook"
@@ -62,36 +62,34 @@
     "prep": "jiti ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/components": "workspace:^",
+    "@storybook/components": "workspace:*",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "workspace:^",
-    "@storybook/preview-api": "workspace:^",
+    "@storybook/manager-api": "workspace:*",
+    "@storybook/preview-api": "workspace:*",
     "@storybook/react-dom-shim": "workspace:*",
-    "@storybook/theming": "workspace:^",
+    "@storybook/theming": "workspace:*"
+  },
+  "devDependencies": {
+    "@storybook/test": "workspace:*",
+    "@types/babel-plugin-react-docgen": "^4",
     "@types/escodegen": "^0.0.6",
     "@types/estree": "^0.0.51",
     "@types/node": "^22.0.0",
+    "@types/semver": "^7.3.4",
     "acorn": "^7.4.1",
     "acorn-jsx": "^5.3.1",
     "acorn-walk": "^7.2.0",
+    "babel-plugin-react-docgen": "^4.2.1",
+    "es-toolkit": "^1.22.0",
     "escodegen": "^2.1.0",
+    "expect-type": "^0.15.0",
     "html-tags": "^3.1.0",
     "prop-types": "^15.7.2",
     "react-element-to-jsx-string": "^15.0.0",
+    "require-from-string": "^2.0.2",
     "semver": "^7.3.7",
     "ts-dedent": "^2.0.0",
-    "type-fest": "~2.19",
-    "util-deprecate": "^1.0.2"
-  },
-  "devDependencies": {
-    "@storybook/test": "workspace:*",
-    "@types/babel-plugin-react-docgen": "^4",
-    "@types/semver": "^7.3.4",
-    "@types/util-deprecate": "^1.0.0",
-    "babel-plugin-react-docgen": "^4.2.1",
-    "expect-type": "^0.15.0",
-    "lodash": "^4.17.21",
-    "require-from-string": "^2.0.2"
+    "type-fest": "~2.19"
   },
   "peerDependencies": {
     "@storybook/test": "workspace:*",
diff --git a/code/renderers/react/src/__test__/__snapshots__/portable-stories-legacy.test.tsx.snap b/code/renderers/react/src/__test__/__snapshots__/portable-stories-legacy.test.tsx.snap
index b690349bed8d..b4753327aaf1 100644
--- a/code/renderers/react/src/__test__/__snapshots__/portable-stories-legacy.test.tsx.snap
+++ b/code/renderers/react/src/__test__/__snapshots__/portable-stories-legacy.test.tsx.snap
@@ -147,40 +147,6 @@ exports[`Legacy Portable Stories API > Renders Modal story 1`] = `
 </body>
 `;
 
-exports[`Legacy Portable Stories API > Renders MountInPlayFunction story 1`] = `
-<body>
-  <div>
-    <div
-      data-testid="loaded-data"
-    >
-      loaded data
-    </div>
-    <div
-      data-testid="spy-data"
-    >
-      mockFn return value
-    </div>
-  </div>
-</body>
-`;
-
-exports[`Legacy Portable Stories API > Renders MountInPlayFunctionThrow story 1`] = `
-<body>
-  <div>
-    <div
-      data-testid="loaded-data"
-    >
-      loaded data
-    </div>
-    <div
-      data-testid="spy-data"
-    >
-      mockFn return value
-    </div>
-  </div>
-</body>
-`;
-
 exports[`Legacy Portable Stories API > Renders WithActionArg story 1`] = `
 <body>
   <div>
diff --git a/code/renderers/react/src/__test__/button.css b/code/renderers/react/src/__test__/button.css
index 94d674b7614d..4e3620b0dcbf 100644
--- a/code/renderers/react/src/__test__/button.css
+++ b/code/renderers/react/src/__test__/button.css
@@ -8,7 +8,7 @@
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 .storybook-button--primary {
-  background-color: #1ea7fd;
+  background-color: #555ab9;
   color: white;
 }
 .storybook-button--secondary {
diff --git a/code/renderers/react/src/act-compat.ts b/code/renderers/react/src/act-compat.ts
index 3eab722d3bb1..7d64e0f7c3be 100644
--- a/code/renderers/react/src/act-compat.ts
+++ b/code/renderers/react/src/act-compat.ts
@@ -8,9 +8,14 @@ declare const globalThis: {
   IS_REACT_ACT_ENVIRONMENT: boolean;
 };
 
+// We need to spread React to avoid
+// export 'act' (imported as 'React4') was not found in 'react' errors in webpack
+// We do check if act exists, but webpack will still throw an error on compile time
+const clonedReact = { ...React };
+
 const reactAct =
   // @ts-expect-error act might not be available in some versions of React
-  typeof React.act === 'function' ? React.act : DeprecatedReactTestUtils.act;
+  typeof clonedReact.act === 'function' ? clonedReact.act : DeprecatedReactTestUtils.act;
 
 export function setReactActEnvironment(isReactActEnvironment: boolean) {
   globalThis.IS_REACT_ACT_ENVIRONMENT = isReactActEnvironment;
@@ -35,15 +40,15 @@ function withGlobalActEnvironment(actImplementation: (callback: () => void) => P
         return result;
       });
       if (callbackNeedsToBeAwaited) {
-        const thenable: Promise<any> = actResult;
+        const thenable = actResult;
         return {
           then: (resolve: (param: any) => void, reject: (param: any) => void) => {
             thenable.then(
-              (returnValue) => {
+              (returnValue: any) => {
                 setReactActEnvironment(previousActEnvironment);
                 resolve(returnValue);
               },
-              (error) => {
+              (error: any) => {
                 setReactActEnvironment(previousActEnvironment);
                 reject(error);
               }
@@ -63,4 +68,7 @@ function withGlobalActEnvironment(actImplementation: (callback: () => void) => P
   };
 }
 
-export const act = withGlobalActEnvironment(reactAct);
+export const act =
+  process.env.NODE_ENV === 'production'
+    ? (cb: (...args: any[]) => any) => cb()
+    : withGlobalActEnvironment(reactAct);
diff --git a/code/renderers/react/src/docs/jsxDecorator.tsx b/code/renderers/react/src/docs/jsxDecorator.tsx
index dd145b1192f7..821d9dc3dd08 100644
--- a/code/renderers/react/src/docs/jsxDecorator.tsx
+++ b/code/renderers/react/src/docs/jsxDecorator.tsx
@@ -8,11 +8,15 @@ import { addons, useEffect } from 'storybook/internal/preview-api';
 import type { ArgsStoryFn, PartialStoryFn, StoryContext } from 'storybook/internal/types';
 
 import type { Options } from 'react-element-to-jsx-string';
-import reactElementToJSXString from 'react-element-to-jsx-string';
+import type reactElementToJSXStringType from 'react-element-to-jsx-string';
+// @ts-expect-error (this is needed, because our bundling prefers the `browser` field, but that yields CJS)
+import reactElementToJSXStringRaw from 'react-element-to-jsx-string/dist/esm/index.js';
 
 import type { ReactRenderer } from '../types';
 import { isForwardRef, isMemo } from './lib';
 
+const reactElementToJSXString = reactElementToJSXStringRaw as typeof reactElementToJSXStringType;
+
 const toPascalCase = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
 
 /**
diff --git a/code/renderers/react/src/docs/lib/defaultValues/createFromRawDefaultProp.ts b/code/renderers/react/src/docs/lib/defaultValues/createFromRawDefaultProp.ts
index fa8ae48e3c89..7ed6c8df098c 100644
--- a/code/renderers/react/src/docs/lib/defaultValues/createFromRawDefaultProp.ts
+++ b/code/renderers/react/src/docs/lib/defaultValues/createFromRawDefaultProp.ts
@@ -6,10 +6,10 @@ import {
   isTooLongForDefaultValueSummary,
 } from 'storybook/internal/docs-tools';
 
-import isFunction from 'lodash/isFunction.js';
-import isPlainObject from 'lodash/isPlainObject.js';
-import isString from 'lodash/isString.js';
-import reactElementToJSXString from 'react-element-to-jsx-string';
+import { isFunction, isPlainObject, isString } from 'es-toolkit/compat';
+import type reactElementToJSXStringType from 'react-element-to-jsx-string';
+// @ts-expect-error (this is needed, because our bundling prefers the `browser` field, but that yields CJS)
+import reactElementToJSXStringRaw from 'react-element-to-jsx-string/dist/esm/index.js';
 
 import { ELEMENT_CAPTION, FUNCTION_CAPTION, OBJECT_CAPTION } from '../captions';
 import type { InspectionFunction } from '../inspection';
@@ -19,6 +19,8 @@ import { generateArray } from './generateArray';
 import { generateObject } from './generateObject';
 import { getPrettyElementIdentifier, getPrettyFuncIdentifier } from './prettyIdentifier';
 
+const reactElementToJSXString = reactElementToJSXStringRaw as typeof reactElementToJSXStringType;
+
 export type TypeResolver = (rawDefaultProp: any, propDef: PropDef) => PropDefaultValue;
 
 export interface TypeResolvers {
diff --git a/code/renderers/react/src/entry-preview.tsx b/code/renderers/react/src/entry-preview.tsx
index 08d625b5729d..b2e6c1de5b18 100644
--- a/code/renderers/react/src/entry-preview.tsx
+++ b/code/renderers/react/src/entry-preview.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 
 import semver from 'semver';
 
+import { act, getReactActEnvironment, setReactActEnvironment } from './act-compat';
 import type { Decorator } from './public-types';
 
 export const parameters = { renderer: 'react' };
@@ -10,9 +11,9 @@ export { renderToCanvas } from './renderToCanvas';
 export { mount } from './mount';
 
 export const decorators: Decorator[] = [
-  (Story, context) => {
+  (story, context) => {
     if (!context.parameters?.react?.rsc) {
-      return <Story />;
+      return story();
     }
 
     const major = semver.major(React.version);
@@ -21,10 +22,73 @@ export const decorators: Decorator[] = [
       throw new Error('React Server Components require React >= 18.3');
     }
 
-    return (
-      <React.Suspense>
-        <Story />
-      </React.Suspense>
-    );
+    return <React.Suspense>{story()}</React.Suspense>;
   },
 ];
+
+export const beforeAll = async () => {
+  try {
+    // copied from
+    // https://github.com/testing-library/react-testing-library/blob/3dcd8a9649e25054c0e650d95fca2317b7008576/src/pure.js
+    const { configure } = await import('@storybook/test');
+
+    configure({
+      unstable_advanceTimersWrapper: (cb) => {
+        return act(cb);
+      },
+      // For more context about why we need disable act warnings in waitFor:
+      // https://github.com/reactwg/react-18/discussions/102
+      asyncWrapper: async (cb) => {
+        const previousActEnvironment = getReactActEnvironment();
+        setReactActEnvironment(false);
+        try {
+          const result = await cb();
+          // Drain microtask queue.
+          // Otherwise we'll restore the previous act() environment, before we resolve the `waitFor` call.
+          // The caller would have no chance to wrap the in-flight Promises in `act()`
+          await new Promise<void>((resolve) => {
+            setTimeout(() => {
+              resolve();
+            }, 0);
+
+            if (jestFakeTimersAreEnabled()) {
+              // @ts-expect-error global jest
+              jest.advanceTimersByTime(0);
+            }
+          });
+
+          return result;
+        } finally {
+          setReactActEnvironment(previousActEnvironment);
+        }
+      },
+      eventWrapper: (cb) => {
+        let result;
+        act(() => {
+          result = cb();
+          return result;
+        });
+        return result;
+      },
+    });
+  } catch (e) {
+    // no-op
+    // @storybook/test might not be available
+  }
+};
+
+/** The function is used to configure jest's fake timers in environments where React's act is enabled */
+function jestFakeTimersAreEnabled() {
+  // @ts-expect-error global jest
+  if (typeof jest !== 'undefined' && jest !== null) {
+    return (
+      // legacy timers
+
+      // eslint-disable-next-line no-underscore-dangle
+      (setTimeout as any)._isMockFunction === true || // modern timers
+      Object.prototype.hasOwnProperty.call(setTimeout, 'clock')
+    );
+  }
+
+  return false;
+}
diff --git a/code/renderers/react/src/portable-stories.tsx b/code/renderers/react/src/portable-stories.tsx
index 7b906c9f4bde..ca29c8c7de72 100644
--- a/code/renderers/react/src/portable-stories.tsx
+++ b/code/renderers/react/src/portable-stories.tsx
@@ -17,7 +17,6 @@ import type {
   StoryAnnotationsOrFn,
 } from 'storybook/internal/types';
 
-import { act, getReactActEnvironment, setReactActEnvironment } from './act-compat';
 import * as reactProjectAnnotations from './entry-preview';
 import type { Meta } from './public-types';
 import type { ReactRenderer } from './types';
@@ -55,67 +54,14 @@ export function setProjectAnnotations(
 // This will not be necessary once we have auto preset loading
 export const INTERNAL_DEFAULT_PROJECT_ANNOTATIONS: ProjectAnnotations<ReactRenderer> = {
   ...reactProjectAnnotations,
-  beforeAll: async function reactBeforeAll() {
-    try {
-      // copied from
-      // https://github.com/testing-library/react-testing-library/blob/3dcd8a9649e25054c0e650d95fca2317b7008576/src/pure.js
-      const { configure } = await import('@storybook/test');
-
-      configure({
-        unstable_advanceTimersWrapper: (cb) => {
-          return act(cb);
-        },
-        // For more context about why we need disable act warnings in waitFor:
-        // https://github.com/reactwg/react-18/discussions/102
-        asyncWrapper: async (cb) => {
-          const previousActEnvironment = getReactActEnvironment();
-          setReactActEnvironment(false);
-          try {
-            const result = await cb();
-            // Drain microtask queue.
-            // Otherwise we'll restore the previous act() environment, before we resolve the `waitFor` call.
-            // The caller would have no chance to wrap the in-flight Promises in `act()`
-            await new Promise<void>((resolve) => {
-              setTimeout(() => {
-                resolve();
-              }, 0);
-
-              if (jestFakeTimersAreEnabled()) {
-                // @ts-expect-error global jest
-                jest.advanceTimersByTime(0);
-              }
-            });
-
-            return result;
-          } finally {
-            setReactActEnvironment(previousActEnvironment);
-          }
-        },
-        eventWrapper: (cb) => {
-          let result;
-          act(() => {
-            result = cb();
-          });
-          return result;
-        },
-      });
-    } catch (e) {
-      // no-op
-      // @storybook/test might not be available
-    }
-  },
   renderToCanvas: async (renderContext, canvasElement) => {
     if (renderContext.storyContext.testingLibraryRender == null) {
-      let unmount: () => void;
-
-      await act(async () => {
-        unmount = await reactProjectAnnotations.renderToCanvas(renderContext, canvasElement);
-      });
+      // eslint-disable-next-line no-underscore-dangle
+      renderContext.storyContext.parameters.__isPortableStory = true;
+      const unmount = await reactProjectAnnotations.renderToCanvas(renderContext, canvasElement);
 
       return async () => {
-        await act(() => {
-          unmount();
-        });
+        await unmount();
       };
     }
     const {
@@ -209,19 +155,3 @@ export function composeStories<TModule extends Store_CSFExports<ReactRenderer, a
     keyof Store_CSFExports
   >;
 }
-
-/** The function is used to configure jest's fake timers in environments where React's act is enabled */
-function jestFakeTimersAreEnabled() {
-  // @ts-expect-error global jest
-  if (typeof jest !== 'undefined' && jest !== null) {
-    return (
-      // legacy timers
-
-      // eslint-disable-next-line no-underscore-dangle
-      (setTimeout as any)._isMockFunction === true || // modern timers
-      Object.prototype.hasOwnProperty.call(setTimeout, 'clock')
-    );
-  }
-
-  return false;
-}
diff --git a/code/renderers/react/src/public-types.ts b/code/renderers/react/src/public-types.ts
index 255b684ca3e1..8a2f7003ec94 100644
--- a/code/renderers/react/src/public-types.ts
+++ b/code/renderers/react/src/public-types.ts
@@ -24,7 +24,7 @@ export type { ReactRenderer };
 /**
  * Metadata to configure the stories for a component.
  *
- * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
+ * @see [Default export](https://storybook.js.org/docs/api/csf#default-export)
  */
 export type Meta<TCmpOrArgs = Args> = [TCmpOrArgs] extends [ComponentType<any>]
   ? ComponentAnnotations<ReactRenderer, ComponentProps<TCmpOrArgs>>
@@ -33,7 +33,7 @@ export type Meta<TCmpOrArgs = Args> = [TCmpOrArgs] extends [ComponentType<any>]
 /**
  * Story function that represents a CSFv2 component example.
  *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ * @see [Named Story exports](https://storybook.js.org/docs/api/csf#named-story-exports)
  */
 export type StoryFn<TCmpOrArgs = Args> = [TCmpOrArgs] extends [ComponentType<any>]
   ? AnnotatedStoryFn<ReactRenderer, ComponentProps<TCmpOrArgs>>
@@ -42,7 +42,7 @@ export type StoryFn<TCmpOrArgs = Args> = [TCmpOrArgs] extends [ComponentType<any
 /**
  * Story object that represents a CSFv3 component example.
  *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ * @see [Named Story exports](https://storybook.js.org/docs/api/csf#named-story-exports)
  */
 export type StoryObj<TMetaOrCmpOrArgs = Args> = [TMetaOrCmpOrArgs] extends [
   {
diff --git a/code/renderers/react/src/renderToCanvas.tsx b/code/renderers/react/src/renderToCanvas.tsx
index 3ae6136f9582..4ae1acbb7fe9 100644
--- a/code/renderers/react/src/renderToCanvas.tsx
+++ b/code/renderers/react/src/renderToCanvas.tsx
@@ -5,7 +5,7 @@ import type { RenderContext } from 'storybook/internal/types';
 
 import { global } from '@storybook/global';
 
-import { getReactActEnvironment } from './act-compat';
+import { act } from './act-compat';
 import type { ReactRenderer, StoryContext } from './types';
 
 const { FRAMEWORK_OPTIONS } = global;
@@ -58,9 +58,10 @@ export async function renderToCanvas(
   const { renderElement, unmountElement } = await import('@storybook/react-dom-shim');
   const Story = unboundStoryFn as FC<StoryContext<ReactRenderer>>;
 
-  const isActEnabled = getReactActEnvironment();
+  // eslint-disable-next-line no-underscore-dangle
+  const isPortableStory = storyContext.parameters.__isPortableStory;
 
-  const content = isActEnabled ? (
+  const content = isPortableStory ? (
     <Story {...storyContext} />
   ) : (
     <ErrorBoundary showMain={showMain} showException={showException}>
@@ -80,7 +81,13 @@ export async function renderToCanvas(
     unmountElement(canvasElement);
   }
 
-  await renderElement(element, canvasElement, storyContext?.parameters?.react?.rootOptions);
+  await act(async () => {
+    await renderElement(element, canvasElement, storyContext?.parameters?.react?.rootOptions);
+  });
 
-  return () => unmountElement(canvasElement);
+  return async () => {
+    await act(() => {
+      unmountElement(canvasElement);
+    });
+  };
 }
diff --git a/code/renderers/react/template/cli/js/Button.jsx b/code/renderers/react/template/cli/js/Button.jsx
index 5b36a6347d07..dabe38e0e82a 100644
--- a/code/renderers/react/template/cli/js/Button.jsx
+++ b/code/renderers/react/template/cli/js/Button.jsx
@@ -5,7 +5,13 @@ import PropTypes from 'prop-types';
 import './button.css';
 
 /** Primary UI component for user interaction */
-export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
+export const Button = ({
+  primary = false,
+  backgroundColor = null,
+  size = 'medium',
+  label,
+  ...props
+}) => {
   const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
   return (
     <button
@@ -31,10 +37,3 @@ Button.propTypes = {
   /** Optional click handler */
   onClick: PropTypes.func,
 };
-
-Button.defaultProps = {
-  backgroundColor: null,
-  primary: false,
-  size: 'medium',
-  onClick: undefined,
-};
diff --git a/code/renderers/react/template/cli/js/Header.jsx b/code/renderers/react/template/cli/js/Header.jsx
index 38aa4d89af8b..94a691e1dd76 100644
--- a/code/renderers/react/template/cli/js/Header.jsx
+++ b/code/renderers/react/template/cli/js/Header.jsx
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { Button } from './Button';
 import './header.css';
 
-export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
+export const Header = ({ user = null, onLogin, onLogout, onCreateAccount }) => (
   <header>
     <div className="storybook-header">
       <div>
@@ -54,7 +54,3 @@ Header.propTypes = {
   onLogout: PropTypes.func.isRequired,
   onCreateAccount: PropTypes.func.isRequired,
 };
-
-Header.defaultProps = {
-  user: null,
-};
diff --git a/code/renderers/react/template/stories/js-argtypes.stories.jsx b/code/renderers/react/template/stories/js-argtypes.stories.jsx
index 0d884f27951f..f111f47f72ed 100644
--- a/code/renderers/react/template/stories/js-argtypes.stories.jsx
+++ b/code/renderers/react/template/stories/js-argtypes.stories.jsx
@@ -5,7 +5,7 @@ import { ThemeProvider, convert, themes } from 'storybook/internal/theming';
 
 import { PureArgsTable as ArgsTable } from '@storybook/blocks';
 
-import mapValues from 'lodash/mapValues.js';
+import { mapValues } from 'es-toolkit/compat';
 import PropTypes from 'prop-types';
 
 // import { component as JsStyledDocgenComponent } from './__testfixtures__/8279-js-styled-docgen/input';
diff --git a/code/renderers/react/template/stories/ts-argtypes.stories.tsx b/code/renderers/react/template/stories/ts-argtypes.stories.tsx
index b3de474d3953..0af26d5bbd85 100644
--- a/code/renderers/react/template/stories/ts-argtypes.stories.tsx
+++ b/code/renderers/react/template/stories/ts-argtypes.stories.tsx
@@ -7,7 +7,7 @@ import type { Args, Parameters, StoryContext } from 'storybook/internal/types';
 import { PureArgsTable as ArgsTable } from '@storybook/blocks';
 import type { StoryObj } from '@storybook/react';
 
-import mapValues from 'lodash/mapValues.js';
+import { mapValues } from 'es-toolkit/compat';
 
 import { component as TsImportedTypesComponent } from './docgen-components/8143-ts-imported-types/input';
 import { component as TsReactFcGenericsComponent } from './docgen-components/8143-ts-react-fc-generics/input';
diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json
index 67d3343a72b3..1e14664e966e 100644
--- a/code/renderers/server/package.json
+++ b/code/renderers/server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/server",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook Server renderer",
   "keywords": [
     "storybook"
@@ -45,12 +45,12 @@
     "prep": "jiti ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/components": "workspace:^",
-    "@storybook/csf": "^0.1.11",
+    "@storybook/components": "workspace:*",
+    "@storybook/csf": "0.1.12",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "workspace:^",
-    "@storybook/preview-api": "workspace:^",
-    "@storybook/theming": "workspace:^",
+    "@storybook/manager-api": "workspace:*",
+    "@storybook/preview-api": "workspace:*",
+    "@storybook/theming": "workspace:*",
     "ts-dedent": "^2.0.0",
     "yaml": "^2.3.1"
   },
diff --git a/code/renderers/server/src/public-types.ts b/code/renderers/server/src/public-types.ts
index c733d5ad9ffe..a4841ee1b84d 100644
--- a/code/renderers/server/src/public-types.ts
+++ b/code/renderers/server/src/public-types.ts
@@ -17,21 +17,21 @@ export type { Args, ArgTypes, Parameters, StrictArgs } from 'storybook/internal/
 /**
  * Metadata to configure the stories for a component.
  *
- * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
+ * @see [Default export](https://storybook.js.org/docs/api/csf#default-export)
  */
 export type Meta<TArgs = Args> = ComponentAnnotations<ServerRenderer, TArgs>;
 
 /**
  * Story function that represents a CSFv2 component example.
  *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ * @see [Named Story exports](https://storybook.js.org/docs/api/csf#named-story-exports)
  */
 export type StoryFn<TArgs = Args> = AnnotatedStoryFn<ServerRenderer, TArgs>;
 
 /**
  * Story object that represents a CSFv3 component example.
  *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ * @see [Named Story exports](https://storybook.js.org/docs/api/csf#named-story-exports)
  */
 export type StoryObj<TArgs = Args> = StoryAnnotations<ServerRenderer, TArgs>;
 
diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json
index 5972c0ef2ac8..d585164196f0 100644
--- a/code/renderers/svelte/package.json
+++ b/code/renderers/svelte/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook Svelte renderer",
   "keywords": [
     "storybook"
@@ -55,26 +55,26 @@
     "prep": "jiti ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/components": "workspace:^",
+    "@storybook/components": "workspace:*",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "workspace:^",
-    "@storybook/preview-api": "workspace:^",
-    "@storybook/theming": "workspace:^",
+    "@storybook/manager-api": "workspace:*",
+    "@storybook/preview-api": "workspace:*",
+    "@storybook/theming": "workspace:*",
     "sveltedoc-parser": "^4.2.1",
     "ts-dedent": "^2.0.0",
     "type-fest": "~2.19"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.0.2",
-    "@testing-library/svelte": "patch:@testing-library/svelte@npm%3A4.1.0#~/.yarn/patches/@testing-library-svelte-npm-4.1.0-34b7037bc0.patch",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@testing-library/svelte": "^5.2.4",
     "expect-type": "^0.15.0",
-    "svelte": "^5.0.0-next.65",
-    "svelte-check": "^3.6.4",
+    "svelte": "^5.0.5",
+    "svelte-check": "^4.0.5",
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
     "storybook": "workspace:^",
-    "svelte": "^4.0.0 || ^5.0.0-next.65"
+    "svelte": "^4.0.0 || ^5.0.0"
   },
   "engines": {
     "node": ">=18.0.0"
diff --git a/code/renderers/svelte/src/__test__/composeStories/Button.stories.ts b/code/renderers/svelte/src/__test__/composeStories/Button.stories.ts
index 94558abf996e..92ade46f29a8 100644
--- a/code/renderers/svelte/src/__test__/composeStories/Button.stories.ts
+++ b/code/renderers/svelte/src/__test__/composeStories/Button.stories.ts
@@ -53,7 +53,11 @@ const getCaptionForLocale = (locale: string) => {
   }
 };
 
-export const CSF2StoryWithLocale: CSF2Story<StoryWithLocaleComponent> = (args, { globals }) => ({
+// @ts-expect-error -- incompatibility with Svelte 5 types and CSF
+export const CSF2StoryWithLocale: CSF2Story<typeof StoryWithLocaleComponent> = (
+  args,
+  { globals }
+) => ({
   Component: StoryWithLocaleComponent,
   props: {
     ...args,
@@ -113,10 +117,11 @@ export const CSF3ButtonWithRender: StoryObj<CustomRenderComponent> = {
   }),
 };
 
-export const CSF3InputFieldFilled: StoryObj<InputFilledStoryComponent> = {
-  render: () => ({
-    Component: InputFilledStoryComponent,
-  }),
+export const CSF3InputFieldFilled: StoryObj<typeof InputFilledStoryComponent> = {
+  render: () =>
+    ({
+      Component: InputFilledStoryComponent,
+    }) as any,
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
     await step('Step label', async () => {
@@ -128,10 +133,10 @@ export const CSF3InputFieldFilled: StoryObj<InputFilledStoryComponent> = {
 };
 
 const mockFn = fn();
-export const LoaderStory: StoryObj<LoaderStoryComponent> = {
+export const LoaderStory: StoryObj<typeof LoaderStoryComponent> = {
   args: {
     mockFn,
-  },
+  } as any,
   loaders: [
     async () => {
       mockFn.mockReturnValueOnce('mockFn return value');
@@ -140,13 +145,14 @@ export const LoaderStory: StoryObj<LoaderStoryComponent> = {
       };
     },
   ],
-  render: (args, { loaded }) => ({
-    Component: LoaderStoryComponent,
-    props: {
-      ...args,
-      loaded,
-    },
-  }),
+  render: (args, { loaded }) =>
+    ({
+      Component: LoaderStoryComponent,
+      props: {
+        ...args,
+        loaded,
+      },
+    }) as any,
   play: async () => {
     expect(mockFn).toHaveBeenCalledWith('render');
   },
diff --git a/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories.test.ts.snap b/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories.test.ts.snap
index 6042c29439c9..7141b7af1311 100644
--- a/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories.test.ts.snap
+++ b/code/renderers/svelte/src/__test__/composeStories/__snapshots__/portable-stories.test.ts.snap
@@ -3,6 +3,8 @@
 exports[`Renders CSF2Secondary story 1`] = `
 <body>
   <div>
+    <!---->
+    <!---->
     <button
       class="storybook-button storybook-button--medium storybook-button--secondary"
       style=""
@@ -11,9 +13,8 @@ exports[`Renders CSF2Secondary story 1`] = `
       label coming from story args! 
       <!---->
     </button>
-    <!---->
-    <!---->
-    <!---->
+    
+    
     
   </div>
 </body>
@@ -22,10 +23,15 @@ exports[`Renders CSF2Secondary story 1`] = `
 exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
 <body>
   <div>
+    <!---->
+    <!---->
+    <!---->
+    <!---->
     <div
       data-testid="local-decorator"
       style="margin: 3em;"
     >
+      <!---->
       <button
         class="storybook-button storybook-button--medium storybook-button--secondary"
         style=""
@@ -34,14 +40,13 @@ exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
         foo 
         <!---->
       </button>
-      <!---->
+      
       <!---->
     </div>
-    <!---->
-    <!---->
-    <!---->
-    <!---->
-    <!---->
+    
+    
+    
+    
     
   </div>
 </body>
@@ -50,6 +55,8 @@ exports[`Renders CSF2StoryWithParamsAndDecorator story 1`] = `
 exports[`Renders CSF3Button story 1`] = `
 <body>
   <div>
+    <!---->
+    <!---->
     <button
       class="storybook-button storybook-button--medium storybook-button--secondary"
       style=""
@@ -58,9 +65,8 @@ exports[`Renders CSF3Button story 1`] = `
       foo 
       <!---->
     </button>
-    <!---->
-    <!---->
-    <!---->
+    
+    
     
   </div>
 </body>
@@ -69,6 +75,8 @@ exports[`Renders CSF3Button story 1`] = `
 exports[`Renders CSF3ButtonWithRender story 1`] = `
 <body>
   <div>
+    <!---->
+    <!---->
     <div>
       <p
         data-testid="custom-render"
@@ -86,9 +94,8 @@ exports[`Renders CSF3ButtonWithRender story 1`] = `
       </button>
       <!---->
     </div>
-    <!---->
-    <!---->
-    <!---->
+    
+    
     
   </div>
 </body>
@@ -97,14 +104,15 @@ exports[`Renders CSF3ButtonWithRender story 1`] = `
 exports[`Renders CSF3InputFieldFilled story 1`] = `
 <body>
   <div>
+    <!---->
+    <!---->
     <input
       data-testid="input"
       formaction="http://localhost:3000/"
       formmethod=""
     />
-    <!---->
-    <!---->
-    <!---->
+    
+    
     
   </div>
 </body>
@@ -113,6 +121,8 @@ exports[`Renders CSF3InputFieldFilled story 1`] = `
 exports[`Renders CSF3Primary story 1`] = `
 <body>
   <div>
+    <!---->
+    <!---->
     <button
       class="storybook-button storybook-button--large storybook-button--primary"
       style=""
@@ -121,9 +131,8 @@ exports[`Renders CSF3Primary story 1`] = `
       foo 
       <!---->
     </button>
-    <!---->
-    <!---->
-    <!---->
+    
+    
     
   </div>
 </body>
@@ -132,6 +141,8 @@ exports[`Renders CSF3Primary story 1`] = `
 exports[`Renders LoaderStory story 1`] = `
 <body>
   <div>
+    <!---->
+    <!---->
     <div>
       <div
         data-testid="loaded-data"
@@ -145,9 +156,8 @@ exports[`Renders LoaderStory story 1`] = `
         mockFn return value
       </div>
     </div>
-    <!---->
-    <!---->
-    <!---->
+    
+    
     
   </div>
 </body>
@@ -156,10 +166,15 @@ exports[`Renders LoaderStory story 1`] = `
 exports[`Renders NewStory story 1`] = `
 <body>
   <div>
+    <!---->
+    <!---->
+    <!---->
+    <!---->
     <div
       data-testid="local-decorator"
       style="margin: 3em;"
     >
+      <!---->
       <button
         class="storybook-button storybook-button--large storybook-button--primary"
         style=""
@@ -168,14 +183,13 @@ exports[`Renders NewStory story 1`] = `
         foo 
         <!---->
       </button>
-      <!---->
+      
       <!---->
     </div>
-    <!---->
-    <!---->
-    <!---->
-    <!---->
-    <!---->
+    
+    
+    
+    
     
   </div>
 </body>
diff --git a/code/renderers/svelte/src/docs/extractArgTypes.ts b/code/renderers/svelte/src/docs/extractArgTypes.ts
index 11db441d29f2..9709b6a37ecd 100644
--- a/code/renderers/svelte/src/docs/extractArgTypes.ts
+++ b/code/renderers/svelte/src/docs/extractArgTypes.ts
@@ -37,12 +37,12 @@ export const createArgTypes = (docgen: SvelteComponentDoc) => {
   if (docgen.data) {
     docgen.data.forEach((item) => {
       results[item.name] = {
-        control: parseTypeToControl(item.type),
+        ...parseTypeToControl(item.type),
         name: item.name,
         description: item.description || undefined,
         type: {
           required: hasKeyword('required', item.keywords || []),
-          name: item.type?.text as SBScalarType['name'],
+          name: item.type?.text === '{}' ? 'object' : (item.type?.text as SBScalarType['name']),
         },
         table: {
           type: {
@@ -103,25 +103,30 @@ const parseTypeToControl = (type: JSDocType | undefined): any => {
   if (type.kind === 'type') {
     switch (type.type) {
       case 'string':
-        return { type: 'text' };
-
-      case 'enum':
-        return { type: 'radio' };
+        return { control: { type: 'text' } };
       case 'any':
-        return { type: 'object' };
+        return { control: { type: 'object' } };
       default:
-        return { type: type.type };
+        return { control: { type: type.type } };
     }
   } else if (type.kind === 'union') {
-    // @ts-expect-error TODO: fix, this seems like a broke in package update
-    if (Array.isArray(type.type) && !type.type.find((t) => t.type !== 'string')) {
+    if (
+      Array.isArray(type.type) &&
+      !type.type.some(
+        (t) => t.kind !== 'const' || !['string', 'number', 'null', 'undefined'].includes(t.type)
+      )
+    ) {
+      const options = type.type.map((t) => (t as JSDocTypeConst).value);
       return {
-        type: 'radio',
-        options: type.type
-          .filter((t) => t.kind === 'const')
-          .map((t) => (t as JSDocTypeConst).value),
+        control: {
+          type: 'radio',
+          labels: options.map(String),
+        },
+        options,
       };
     }
+  } else if (type.kind === 'function') {
+    return { control: null };
   }
 
   return null;
diff --git a/code/renderers/svelte/src/public-types.ts b/code/renderers/svelte/src/public-types.ts
index 2ca1db421e7a..24c61055d9b1 100644
--- a/code/renderers/svelte/src/public-types.ts
+++ b/code/renderers/svelte/src/public-types.ts
@@ -22,7 +22,7 @@ export type { Args, ArgTypes, Parameters, StrictArgs } from 'storybook/internal/
 /**
  * Metadata to configure the stories for a component.
  *
- * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
+ * @see [Default export](https://storybook.js.org/docs/api/csf#default-export)
  */
 export type Meta<CmpOrArgs = Args> =
   CmpOrArgs extends SvelteComponent<infer Props>
@@ -31,7 +31,7 @@ export type Meta<CmpOrArgs = Args> =
 /**
  * Story function that represents a CSFv2 component example.
  *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ * @see [Named Story exports](https://storybook.js.org/docs/api/csf#named-story-exports)
  */
 export type StoryFn<TCmpOrArgs = Args> =
   TCmpOrArgs extends SvelteComponent<infer Props>
@@ -41,7 +41,7 @@ export type StoryFn<TCmpOrArgs = Args> =
 /**
  * Story object that represents a CSFv3 component example.
  *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ * @see [Named Story exports](https://storybook.js.org/docs/api/csf#named-story-exports)
  */
 export type StoryObj<MetaOrCmpOrArgs = Args> = MetaOrCmpOrArgs extends {
   render?: ArgsStoryFn<SvelteRenderer, any>;
diff --git a/code/renderers/svelte/template/cli/svelte-5-js/Button.stories.svelte b/code/renderers/svelte/template/cli/svelte-5-js/Button.stories.svelte
new file mode 100644
index 000000000000..4c8c7cce632a
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-js/Button.stories.svelte
@@ -0,0 +1,31 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Button from './Button.svelte';
+  import { fn } from '@storybook/test';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: 'Example/Button',
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: {
+      backgroundColor: { control: 'color' },
+      size: {
+        control: { type: 'select' },
+        options: ['small', 'medium', 'large'],
+      },
+    },
+    args: {
+      onClick: fn(),
+    }
+  });
+</script>
+
+<!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->
+<Story name="Primary" args={{ primary: true, label: 'Button' }} />
+
+<Story name="Secondary" args={{ label: 'Button' }} />
+
+<Story name="Large" args={{ size: 'large', label: 'Button' }} />
+
+<Story name="Small" args={{ size: 'small', label: 'Button' }} />
diff --git a/code/renderers/svelte/template/cli/svelte-5-js/Button.svelte b/code/renderers/svelte/template/cli/svelte-5-js/Button.svelte
new file mode 100644
index 000000000000..b2b820ea4971
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-js/Button.svelte
@@ -0,0 +1,26 @@
+<script>
+  import './button.css';
+
+  /**
+   * @typedef {Object} Props
+   * @property {boolean} [primary] Is this the principal call to action on the page?
+   * @property {string} [backgroundColor] What background color to use
+   * @property {'small' | 'medium' | 'large'} [size] How large should the button be?
+   * @property {string} label Button contents
+   * @property {() => void} [onClick] The onclick event handler
+   */
+
+  /** @type {Props} */
+  const { primary = false, backgroundColor, size = 'medium', label, onClick } = $props();
+</script>
+
+<button
+  type="button"
+  class={['storybook-button', `storybook-button--${size}`].join(' ')}
+  class:storybook-button--primary={primary}
+  class:storybook-button--secondary={!primary}
+  style:background-color={backgroundColor}
+  onclick={onClick}
+>
+  {label}
+</button>
diff --git a/code/renderers/svelte/template/cli/svelte-5-js/Header.stories.svelte b/code/renderers/svelte/template/cli/svelte-5-js/Header.stories.svelte
new file mode 100644
index 000000000000..0130c115acf6
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-js/Header.stories.svelte
@@ -0,0 +1,26 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Header from './Header.svelte';
+  import { fn } from '@storybook/test';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: 'Example/Header',
+    component: Header,
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+    parameters: {
+      // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+      layout: 'fullscreen',
+    },
+    args: {
+      onLogin: fn(),
+      onLogout: fn(),
+      onCreateAccount: fn(),
+    }
+  });
+</script>
+
+<Story name="Logged In" args={{ user: { name: 'Jane Doe' } }} />
+
+<Story name="Logged Out" />
diff --git a/code/renderers/svelte/template/cli/svelte-5-js/Header.svelte b/code/renderers/svelte/template/cli/svelte-5-js/Header.svelte
new file mode 100644
index 000000000000..dba3b7880f49
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-js/Header.svelte
@@ -0,0 +1,47 @@
+<script>
+  import './header.css';
+  import Button from './Button.svelte';
+
+  /**
+   * @typedef {Object} Props
+   * @property {{name: string}} [user] The user object
+   * @property {() => void} [onLogin] The login event handler
+   * @property {() => void} [onLogout] The logout event handler
+   * @property {() => void} [onCreateAccount] The account creation event handler
+   */
+
+  /** @type {Props} */
+  const { user, onLogin, onLogout, onCreateAccount } = $props();
+</script>
+
+<header>
+  <div class="storybook-header">
+    <div>
+      <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+        <g fill="none" fill-rule="evenodd">
+          <path
+            d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+            fill="#FFF"
+          />
+          <path
+            d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+            fill="#555AB9"
+          />
+          <path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
+        </g>
+      </svg>
+      <h1>Acme</h1>
+    </div>
+    <div>
+      {#if user}
+        <span class="welcome">
+          Welcome, <b>{user.name}</b>!
+        </span>
+        <Button size="small" onClick={onLogout} label="Log out" />
+      {:else}
+        <Button size="small" onClick={onLogin} label="Log in" />
+        <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
+      {/if}
+    </div>
+  </div>
+</header>
diff --git a/code/renderers/svelte/template/cli/svelte-5-js/Page.stories.svelte b/code/renderers/svelte/template/cli/svelte-5-js/Page.stories.svelte
new file mode 100644
index 000000000000..aa7372c58ef4
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-js/Page.stories.svelte
@@ -0,0 +1,30 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { expect, userEvent, waitFor, within } from '@storybook/test';
+  import Page from './Page.svelte';
+  import { fn } from '@storybook/test';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: 'Example/Page',
+    component: Page,
+    parameters: {
+      // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+      layout: 'fullscreen',
+    },
+  });
+</script>
+
+<Story name="Logged In" play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = canvas.getByRole('button', { name: /Log in/i });
+    await expect(loginButton).toBeInTheDocument();
+    await userEvent.click(loginButton);
+    await waitFor(() => expect(loginButton).not.toBeInTheDocument());
+
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    await expect(logoutButton).toBeInTheDocument();
+  }}
+  />
+
+<Story name="Logged Out" />
diff --git a/code/renderers/svelte/template/cli/svelte-5-js/Page.svelte b/code/renderers/svelte/template/cli/svelte-5-js/Page.svelte
new file mode 100644
index 000000000000..92a95c00c5c5
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-js/Page.svelte
@@ -0,0 +1,70 @@
+<script>
+  import './page.css';
+  import Header from './Header.svelte';
+
+  let user = $state(null);
+</script>
+
+<article>
+  <Header
+    {user}
+    onLogin={() => (user = { name: 'Jane Doe' })}
+    onLogout={() => (user = null)}
+    onCreateAccount={() => (user = { name: 'Jane Doe' })}
+  />
+
+  <section class="storybook-page">
+    <h2>Pages in Storybook</h2>
+    <p>
+      We recommend building UIs with a
+      <a
+        href="https://blog.hichroma.com/component-driven-development-ce1109d56c8e"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <strong>component-driven</strong>
+      </a>
+      process starting with atomic components and ending with pages.
+    </p>
+    <p>
+      Render pages with mock data. This makes it easy to build and review page states without
+      needing to navigate to them in your app. Here are some handy patterns for managing page data
+      in Storybook:
+    </p>
+    <ul>
+      <li>
+        Use a higher-level connected component. Storybook helps you compose such data from the
+        "args" of child component stories
+      </li>
+      <li>
+        Assemble data in the page component from your services. You can mock these services out
+        using Storybook.
+      </li>
+    </ul>
+    <p>
+      Get a guided tutorial on component-driven development at
+      <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+        Storybook tutorials
+      </a>
+      . Read more in the
+      <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
+      .
+    </p>
+    <div class="tip-wrapper">
+      <span class="tip">Tip</span>
+      Adjust the width of the canvas with the
+      <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+        <g fill="none" fill-rule="evenodd">
+          <path
+            d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0
+            01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0
+            010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+            id="a"
+            fill="#999"
+          />
+        </g>
+      </svg>
+      Viewports addon in the toolbar
+    </div>
+  </section>
+</article>
diff --git a/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Button.stories.svelte b/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Button.stories.svelte
new file mode 100644
index 000000000000..4c8c7cce632a
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Button.stories.svelte
@@ -0,0 +1,31 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Button from './Button.svelte';
+  import { fn } from '@storybook/test';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: 'Example/Button',
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: {
+      backgroundColor: { control: 'color' },
+      size: {
+        control: { type: 'select' },
+        options: ['small', 'medium', 'large'],
+      },
+    },
+    args: {
+      onClick: fn(),
+    }
+  });
+</script>
+
+<!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->
+<Story name="Primary" args={{ primary: true, label: 'Button' }} />
+
+<Story name="Secondary" args={{ label: 'Button' }} />
+
+<Story name="Large" args={{ size: 'large', label: 'Button' }} />
+
+<Story name="Small" args={{ size: 'small', label: 'Button' }} />
diff --git a/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Button.svelte b/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Button.svelte
new file mode 100644
index 000000000000..b31f5bffe4a5
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Button.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import './button.css';
+
+  interface Props {
+    /** Is this the principal call to action on the page? */
+    primary?: boolean;
+    /** What background color to use */
+    backgroundColor?: string;
+    /** How large should the button be? */
+    size?: 'small' | 'medium' | 'large';
+    /** Button contents */
+    label: string;
+    /** The onclick event handler */
+    onClick?: () => void;
+  }
+  
+  const { primary = false, backgroundColor, size = 'medium', label, onClick }: Props = $props();
+</script>
+
+<button
+  type="button"
+  class={['storybook-button', `storybook-button--${size}`].join(' ')}
+  class:storybook-button--primary={primary}
+  class:storybook-button--secondary={!primary}
+  style:background-color={backgroundColor}
+  onclick={onClick}
+>
+  {label}
+</button>
diff --git a/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Header.stories.svelte b/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Header.stories.svelte
new file mode 100644
index 000000000000..0130c115acf6
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Header.stories.svelte
@@ -0,0 +1,26 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Header from './Header.svelte';
+  import { fn } from '@storybook/test';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: 'Example/Header',
+    component: Header,
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+    parameters: {
+      // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+      layout: 'fullscreen',
+    },
+    args: {
+      onLogin: fn(),
+      onLogout: fn(),
+      onCreateAccount: fn(),
+    }
+  });
+</script>
+
+<Story name="Logged In" args={{ user: { name: 'Jane Doe' } }} />
+
+<Story name="Logged Out" />
diff --git a/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Header.svelte b/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Header.svelte
new file mode 100644
index 000000000000..14e890c79e98
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Header.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import './header.css';
+  import Button from './Button.svelte';
+
+  interface Props {
+    user?: { name: string };
+    onLogin?: () => void;
+    onLogout?: () => void;
+    onCreateAccount?: () => void;
+  }
+
+  const { user, onLogin, onLogout, onCreateAccount }: Props = $props();
+</script>
+
+<header>
+  <div class="storybook-header">
+    <div>
+      <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+        <g fill="none" fill-rule="evenodd">
+          <path
+            d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+            fill="#FFF"
+          />
+          <path
+            d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+            fill="#555AB9"
+          />
+          <path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
+        </g>
+      </svg>
+      <h1>Acme</h1>
+    </div>
+    <div>
+      {#if user}
+        <span class="welcome">
+          Welcome, <b>{user.name}</b>!
+        </span>
+        <Button size="small" onClick={onLogout} label="Log out" />
+      {:else}
+        <Button size="small" onClick={onLogin} label="Log in" />
+        <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
+      {/if}
+    </div>
+  </div>
+</header>
diff --git a/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Page.stories.svelte b/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Page.stories.svelte
new file mode 100644
index 000000000000..ed850d83718e
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Page.stories.svelte
@@ -0,0 +1,30 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { expect, userEvent, waitFor, within } from '@storybook/test';
+  import Page from './Page.svelte';
+  import { fn } from '@storybook/test';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: 'Example/Page',
+    component: Page,
+    parameters: {
+      // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+      layout: 'fullscreen',
+    },
+  });
+</script>
+
+<Story name="Logged In" play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = canvas.getByRole('button', { name: /Log in/i });
+    await expect(loginButton).toBeInTheDocument();
+    await userEvent.click(loginButton);
+    await waitFor(() => expect(loginButton).not.toBeInTheDocument());
+
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    await expect(logoutButton).toBeInTheDocument();
+  }}
+/>
+
+<Story name="Logged Out" />
diff --git a/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Page.svelte b/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Page.svelte
new file mode 100644
index 000000000000..c4c069a5a50b
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-ts-3-8/Page.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+  import './page.css';
+  import Header from './Header.svelte';
+
+  let user = $state<{ name: string }>();
+</script>
+
+<article>
+  <Header
+    {user}
+    onLogin={() => (user = { name: 'Jane Doe' })}
+    onLogout={() => (user = undefined)}
+    onCreateAccount={() => (user = { name: 'Jane Doe' })}
+  />
+
+  <section class="storybook-page">
+    <h2>Pages in Storybook</h2>
+    <p>
+      We recommend building UIs with a
+      <a
+        href="https://blog.hichroma.com/component-driven-development-ce1109d56c8e"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <strong>component-driven</strong>
+      </a>
+      process starting with atomic components and ending with pages.
+    </p>
+    <p>
+      Render pages with mock data. This makes it easy to build and review page states without
+      needing to navigate to them in your app. Here are some handy patterns for managing page data
+      in Storybook:
+    </p>
+    <ul>
+      <li>
+        Use a higher-level connected component. Storybook helps you compose such data from the
+        "args" of child component stories
+      </li>
+      <li>
+        Assemble data in the page component from your services. You can mock these services out
+        using Storybook.
+      </li>
+    </ul>
+    <p>
+      Get a guided tutorial on component-driven development at
+      <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+        Storybook tutorials
+      </a>
+      . Read more in the
+      <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
+      .
+    </p>
+    <div class="tip-wrapper">
+      <span class="tip">Tip</span>
+      Adjust the width of the canvas with the
+      <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+        <g fill="none" fill-rule="evenodd">
+          <path
+            d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0
+            01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0
+            010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+            id="a"
+            fill="#999"
+          />
+        </g>
+      </svg>
+      Viewports addon in the toolbar
+    </div>
+  </section>
+</article>
diff --git a/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Button.stories.svelte b/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Button.stories.svelte
new file mode 100644
index 000000000000..4c8c7cce632a
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Button.stories.svelte
@@ -0,0 +1,31 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Button from './Button.svelte';
+  import { fn } from '@storybook/test';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: 'Example/Button',
+    component: Button,
+    tags: ['autodocs'],
+    argTypes: {
+      backgroundColor: { control: 'color' },
+      size: {
+        control: { type: 'select' },
+        options: ['small', 'medium', 'large'],
+      },
+    },
+    args: {
+      onClick: fn(),
+    }
+  });
+</script>
+
+<!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->
+<Story name="Primary" args={{ primary: true, label: 'Button' }} />
+
+<Story name="Secondary" args={{ label: 'Button' }} />
+
+<Story name="Large" args={{ size: 'large', label: 'Button' }} />
+
+<Story name="Small" args={{ size: 'small', label: 'Button' }} />
diff --git a/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Button.svelte b/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Button.svelte
new file mode 100644
index 000000000000..b31f5bffe4a5
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Button.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import './button.css';
+
+  interface Props {
+    /** Is this the principal call to action on the page? */
+    primary?: boolean;
+    /** What background color to use */
+    backgroundColor?: string;
+    /** How large should the button be? */
+    size?: 'small' | 'medium' | 'large';
+    /** Button contents */
+    label: string;
+    /** The onclick event handler */
+    onClick?: () => void;
+  }
+  
+  const { primary = false, backgroundColor, size = 'medium', label, onClick }: Props = $props();
+</script>
+
+<button
+  type="button"
+  class={['storybook-button', `storybook-button--${size}`].join(' ')}
+  class:storybook-button--primary={primary}
+  class:storybook-button--secondary={!primary}
+  style:background-color={backgroundColor}
+  onclick={onClick}
+>
+  {label}
+</button>
diff --git a/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Header.stories.svelte b/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Header.stories.svelte
new file mode 100644
index 000000000000..0130c115acf6
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Header.stories.svelte
@@ -0,0 +1,26 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Header from './Header.svelte';
+  import { fn } from '@storybook/test';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: 'Example/Header',
+    component: Header,
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+    parameters: {
+      // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+      layout: 'fullscreen',
+    },
+    args: {
+      onLogin: fn(),
+      onLogout: fn(),
+      onCreateAccount: fn(),
+    }
+  });
+</script>
+
+<Story name="Logged In" args={{ user: { name: 'Jane Doe' } }} />
+
+<Story name="Logged Out" />
diff --git a/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Header.svelte b/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Header.svelte
new file mode 100644
index 000000000000..14e890c79e98
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Header.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import './header.css';
+  import Button from './Button.svelte';
+
+  interface Props {
+    user?: { name: string };
+    onLogin?: () => void;
+    onLogout?: () => void;
+    onCreateAccount?: () => void;
+  }
+
+  const { user, onLogin, onLogout, onCreateAccount }: Props = $props();
+</script>
+
+<header>
+  <div class="storybook-header">
+    <div>
+      <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+        <g fill="none" fill-rule="evenodd">
+          <path
+            d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+            fill="#FFF"
+          />
+          <path
+            d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+            fill="#555AB9"
+          />
+          <path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
+        </g>
+      </svg>
+      <h1>Acme</h1>
+    </div>
+    <div>
+      {#if user}
+        <span class="welcome">
+          Welcome, <b>{user.name}</b>!
+        </span>
+        <Button size="small" onClick={onLogout} label="Log out" />
+      {:else}
+        <Button size="small" onClick={onLogin} label="Log in" />
+        <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
+      {/if}
+    </div>
+  </div>
+</header>
diff --git a/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Page.stories.svelte b/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Page.stories.svelte
new file mode 100644
index 000000000000..ed850d83718e
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Page.stories.svelte
@@ -0,0 +1,30 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { expect, userEvent, waitFor, within } from '@storybook/test';
+  import Page from './Page.svelte';
+  import { fn } from '@storybook/test';
+
+  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+  const { Story } = defineMeta({
+    title: 'Example/Page',
+    component: Page,
+    parameters: {
+      // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+      layout: 'fullscreen',
+    },
+  });
+</script>
+
+<Story name="Logged In" play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = canvas.getByRole('button', { name: /Log in/i });
+    await expect(loginButton).toBeInTheDocument();
+    await userEvent.click(loginButton);
+    await waitFor(() => expect(loginButton).not.toBeInTheDocument());
+
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    await expect(logoutButton).toBeInTheDocument();
+  }}
+/>
+
+<Story name="Logged Out" />
diff --git a/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Page.svelte b/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Page.svelte
new file mode 100644
index 000000000000..c4c069a5a50b
--- /dev/null
+++ b/code/renderers/svelte/template/cli/svelte-5-ts-4-9/Page.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+  import './page.css';
+  import Header from './Header.svelte';
+
+  let user = $state<{ name: string }>();
+</script>
+
+<article>
+  <Header
+    {user}
+    onLogin={() => (user = { name: 'Jane Doe' })}
+    onLogout={() => (user = undefined)}
+    onCreateAccount={() => (user = { name: 'Jane Doe' })}
+  />
+
+  <section class="storybook-page">
+    <h2>Pages in Storybook</h2>
+    <p>
+      We recommend building UIs with a
+      <a
+        href="https://blog.hichroma.com/component-driven-development-ce1109d56c8e"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <strong>component-driven</strong>
+      </a>
+      process starting with atomic components and ending with pages.
+    </p>
+    <p>
+      Render pages with mock data. This makes it easy to build and review page states without
+      needing to navigate to them in your app. Here are some handy patterns for managing page data
+      in Storybook:
+    </p>
+    <ul>
+      <li>
+        Use a higher-level connected component. Storybook helps you compose such data from the
+        "args" of child component stories
+      </li>
+      <li>
+        Assemble data in the page component from your services. You can mock these services out
+        using Storybook.
+      </li>
+    </ul>
+    <p>
+      Get a guided tutorial on component-driven development at
+      <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+        Storybook tutorials
+      </a>
+      . Read more in the
+      <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
+      .
+    </p>
+    <div class="tip-wrapper">
+      <span class="tip">Tip</span>
+      Adjust the width of the canvas with the
+      <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+        <g fill="none" fill-rule="evenodd">
+          <path
+            d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0
+            01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0
+            010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+            id="a"
+            fill="#999"
+          />
+        </g>
+      </svg>
+      Viewports addon in the toolbar
+    </div>
+  </section>
+</article>
diff --git a/code/renderers/svelte/template/components/button.css b/code/renderers/svelte/template/components/button.css
index 94d674b7614d..4e3620b0dcbf 100644
--- a/code/renderers/svelte/template/components/button.css
+++ b/code/renderers/svelte/template/components/button.css
@@ -8,7 +8,7 @@
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 .storybook-button--primary {
-  background-color: #1ea7fd;
+  background-color: #555ab9;
   color: white;
 }
 .storybook-button--secondary {
diff --git a/code/renderers/svelte/template/stories/DocsJSDoc.svelte b/code/renderers/svelte/template/stories/DocsJSDoc.svelte
new file mode 100644
index 000000000000..237a2b9b95f7
--- /dev/null
+++ b/code/renderers/svelte/template/stories/DocsJSDoc.svelte
@@ -0,0 +1,103 @@
+<script>
+  /**
+   * @typedef {100 | 1000 | 10000} LiteralNumbers
+   */
+
+  /**
+   * @typedef {"apple" | "grape" | "orange"} LiteralStrings
+   */
+
+  /**
+   * @typedef {Object} MyObject
+   * @property {string} foo
+   * @property {number} bar
+   */
+
+  /**
+   * @type {boolean} Boolean
+   */
+  export let boolean = true;
+  /**
+   * @type {string} String
+   */
+  export let string = 'default';
+  /**
+   * @type {string} String (required)
+   */
+  export let stringRequired;
+  /**
+   * @type {number} Number
+   */
+  export let number = 123;
+  /**
+   * True literal
+   * @type {true=}
+   */
+  export let trueLiteral = undefined;
+  /**
+   * Null
+   * @type {null}
+   */
+  export let nullValue = null;
+  /**
+   * Undefined
+   * @type {undefined}
+   */
+  export let undefinedValue = undefined;
+  /**
+   * Any
+   * @type {any}
+   */
+  export let any = null;
+  /**
+   * Array of numbers
+   * @type {number[]}
+   */
+  export let arrayOfNumbers = [1, 20, 300];
+  /**
+   * Union of literal strings
+   * @type {LiteralStrings=}
+   */
+  export let unionLiteralStrings = 'apple';
+  /**
+   * Union of literal numbers
+   * @type {LiteralNumbers=}
+   */
+  export let unionLiteralNumbers = 1000;
+  /**
+   * @type {MyObject=} Object
+   */
+  export let object = undefined;
+  /**
+   * Inline object
+   * @type {{ foo: string; bar: number } =}
+   */
+  export let inlineObject = undefined;
+  /**
+   * Record
+   * @type {Record<string, number>}
+   */
+  export let record = { a: 1, b: 2 };
+  /**
+   * Date
+   * @type {Date}
+   */
+  export let date = new Date('20 Jan 1983');
+  /**
+   * Union of types
+   * @type {number | string =}
+   */
+  export let unionTypes = 123;
+  /**
+   * Intersection of types
+   * @type {{ a: number } & { b: string } =}
+   */
+  export let intersection = undefined;
+  /**
+   * Event callback function
+   * @type {(event: MouseEvent) => number}
+   */
+  export let func = () => 10;
+</script>
+
+<div>Docs: JSDoc</div>
diff --git a/code/renderers/svelte/template/stories/docs-jsdoc.stories.js b/code/renderers/svelte/template/stories/docs-jsdoc.stories.js
new file mode 100644
index 000000000000..d8c766d967e3
--- /dev/null
+++ b/code/renderers/svelte/template/stories/docs-jsdoc.stories.js
@@ -0,0 +1,9 @@
+import DocsJSDoc from './DocsJSDoc.svelte';
+
+export default {
+  component: DocsJSDoc,
+  args: {},
+  tags: ['autodocs'],
+};
+
+export const Primary = {};
diff --git a/code/renderers/svelte/template/stories/js-docs.stories.js b/code/renderers/svelte/template/stories/js-docs.stories.js
deleted file mode 100644
index d2e37cc971d5..000000000000
--- a/code/renderers/svelte/template/stories/js-docs.stories.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import ButtonJavaScript from './views/ButtonJavaScript.svelte';
-
-export default {
-  component: ButtonJavaScript,
-  args: {
-    primary: true,
-  },
-  tags: ['autodocs'],
-};
-
-export const Primary = {};
diff --git a/code/renderers/svelte/vitest.config.ts b/code/renderers/svelte/vitest.config.ts
index 58fc647e8f30..f80ba91df63f 100644
--- a/code/renderers/svelte/vitest.config.ts
+++ b/code/renderers/svelte/vitest.config.ts
@@ -5,9 +5,12 @@ import { vitestCommonConfig } from '../../vitest.workspace';
 export default defineConfig(
   mergeConfig(vitestCommonConfig, {
     plugins: [
-      import('@sveltejs/vite-plugin-svelte').then(({ svelte, vitePreprocess }) =>
-        svelte({ preprocess: vitePreprocess() })
-      ),
+      import('@sveltejs/vite-plugin-svelte').then(({ svelte }) => svelte()),
+      // @ts-expect-error -- types don't match our TS module resolution setting
+      import('@testing-library/svelte/vite').then(({ svelteTesting }) => svelteTesting()),
     ],
+    test: {
+      environment: 'happy-dom',
+    },
   })
 );
diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json
index be6775754ba9..5415a7e89abd 100644
--- a/code/renderers/vue3/package.json
+++ b/code/renderers/vue3/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3",
-  "version": "8.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook Vue 3 renderer",
   "keywords": [
     "storybook"
@@ -61,11 +61,11 @@
     "prep": "jiti ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/components": "workspace:^",
+    "@storybook/components": "workspace:*",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "workspace:^",
-    "@storybook/preview-api": "workspace:^",
-    "@storybook/theming": "workspace:^",
+    "@storybook/manager-api": "workspace:*",
+    "@storybook/preview-api": "workspace:*",
+    "@storybook/theming": "workspace:*",
     "@vue/compiler-core": "^3.0.0",
     "ts-dedent": "^2.0.0",
     "type-fest": "~2.19",
@@ -76,7 +76,6 @@
     "@testing-library/vue": "^8.0.0",
     "@types/prettier": "^3.0.0",
     "@vitejs/plugin-vue": "^4.4.0",
-    "lodash": "^4.17.21",
     "typescript": "^5.3.2",
     "vue": "^3.2.47",
     "vue-tsc": "latest"
diff --git a/code/renderers/vue3/project.json b/code/renderers/vue3/project.json
index fcde94c77422..e45231254348 100644
--- a/code/renderers/vue3/project.json
+++ b/code/renderers/vue3/project.json
@@ -5,11 +5,7 @@
   "targets": {
     "build": {},
     "check": {
-      "executor": "nx:run-commands",
-      "options": {
-        "command": "echo '\"nx check vue3\" can only run with the parameter \"-c production\"'",
-        "description": "We need to expand code/storybook/storybook/scripts/prepare/check.ts"
-      },
+      "command": "echo '\"nx check vue3\" can only run with the parameter \"-c production\", we need to expand code/storybook/storybook/scripts/prepare/check.ts'",
       "configurations": {
         "production": {
           "cwd": "{projectRoot}",
diff --git a/code/renderers/vue3/src/__tests__/button.css b/code/renderers/vue3/src/__tests__/button.css
index 94d674b7614d..4e3620b0dcbf 100644
--- a/code/renderers/vue3/src/__tests__/button.css
+++ b/code/renderers/vue3/src/__tests__/button.css
@@ -8,7 +8,7 @@
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 .storybook-button--primary {
-  background-color: #1ea7fd;
+  background-color: #555ab9;
   color: white;
 }
 .storybook-button--secondary {
diff --git a/code/renderers/vue3/src/docs/extractArgTypes.ts b/code/renderers/vue3/src/docs/extractArgTypes.ts
index 7e76c731177f..f52f21c15255 100644
--- a/code/renderers/vue3/src/docs/extractArgTypes.ts
+++ b/code/renderers/vue3/src/docs/extractArgTypes.ts
@@ -129,7 +129,7 @@ export const extractFromVueDocgenApi = (
     }
   }
 
-  const required = 'required' in docgenInfo ? docgenInfo.required ?? false : false;
+  const required = 'required' in docgenInfo ? (docgenInfo.required ?? false) : false;
 
   return {
     name: docgenInfo.name,
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;
 };
 
 /**
diff --git a/code/renderers/vue3/src/public-types.ts b/code/renderers/vue3/src/public-types.ts
index cb8250069805..bf9257fb63d0 100644
--- a/code/renderers/vue3/src/public-types.ts
+++ b/code/renderers/vue3/src/public-types.ts
@@ -24,7 +24,7 @@ export type { VueRenderer };
 /**
  * Metadata to configure the stories for a component.
  *
- * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
+ * @see [Default export](https://storybook.js.org/docs/api/csf#default-export)
  */
 export type Meta<TCmpOrArgs = Args> = ComponentAnnotations<
   VueRenderer,
@@ -34,7 +34,7 @@ export type Meta<TCmpOrArgs = Args> = ComponentAnnotations<
 /**
  * Story function that represents a CSFv2 component example.
  *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ * @see [Named Story exports](https://storybook.js.org/docs/api/csf#named-story-exports)
  */
 export type StoryFn<TCmpOrArgs = Args> = AnnotatedStoryFn<
   VueRenderer,
@@ -44,7 +44,7 @@ export type StoryFn<TCmpOrArgs = Args> = AnnotatedStoryFn<
 /**
  * Story object that represents a CSFv3 component example.
  *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ * @see [Named Story exports](https://storybook.js.org/docs/api/csf#named-story-exports)
  */
 export type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
   render?: ArgsStoryFn<VueRenderer, any>;
diff --git a/code/renderers/vue3/template/components/button.css b/code/renderers/vue3/template/components/button.css
index 94d674b7614d..4e3620b0dcbf 100644
--- a/code/renderers/vue3/template/components/button.css
+++ b/code/renderers/vue3/template/components/button.css
@@ -8,7 +8,7 @@
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 .storybook-button--primary {
-  background-color: #1ea7fd;
+  background-color: #555ab9;
   color: white;
 }
 .storybook-button--secondary {
diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json
index 37413d6a4fd7..febfc3bf6f5e 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.4.0-alpha.0",
+  "version": "8.5.0-beta.5",
   "description": "Storybook web-components renderer",
   "keywords": [
     "lit",
@@ -49,11 +49,11 @@
     "prep": "jiti ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/components": "workspace:^",
+    "@storybook/components": "workspace:*",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "workspace:^",
-    "@storybook/preview-api": "workspace:^",
-    "@storybook/theming": "workspace:^",
+    "@storybook/manager-api": "workspace:*",
+    "@storybook/preview-api": "workspace:*",
+    "@storybook/theming": "workspace:*",
     "tiny-invariant": "^1.3.1",
     "ts-dedent": "^2.0.0"
   },
diff --git a/code/renderers/web-components/src/public-types.ts b/code/renderers/web-components/src/public-types.ts
index a1d5b7559e21..16ab3e80ad6d 100644
--- a/code/renderers/web-components/src/public-types.ts
+++ b/code/renderers/web-components/src/public-types.ts
@@ -18,21 +18,21 @@ export type { WebComponentsRenderer };
 /**
  * Metadata to configure the stories for a component.
  *
- * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
+ * @see [Default export](https://storybook.js.org/docs/api/csf#default-export)
  */
 export type Meta<TArgs = Args> = ComponentAnnotations<WebComponentsRenderer, TArgs>;
 
 /**
  * Story function that represents a CSFv2 component example.
  *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ * @see [Named Story exports](https://storybook.js.org/docs/api/csf#named-story-exports)
  */
 export type StoryFn<TArgs = Args> = AnnotatedStoryFn<WebComponentsRenderer, TArgs>;
 
 /**
  * Story object that represents a CSFv3 component example.
  *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ * @see [Named Story exports](https://storybook.js.org/docs/api/csf#named-story-exports)
  */
 export type StoryObj<TArgs = Args> = StoryAnnotations<WebComponentsRenderer, TArgs>;
 
diff --git a/code/renderers/web-components/template/components/button.css b/code/renderers/web-components/template/components/button.css
index 94d674b7614d..4e3620b0dcbf 100644
--- a/code/renderers/web-components/template/components/button.css
+++ b/code/renderers/web-components/template/components/button.css
@@ -8,7 +8,7 @@
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 .storybook-button--primary {
-  background-color: #1ea7fd;
+  background-color: #555ab9;
   color: white;
 }
 .storybook-button--secondary {
diff --git a/code/sandbox/angular-cli-15-ts/project.json b/code/sandbox/angular-cli-15-ts/project.json
index b59d1e58d99f..d2d595560d2a 100644
--- a/code/sandbox/angular-cli-15-ts/project.json
+++ b/code/sandbox/angular-cli-15-ts/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "angular"
   ],
diff --git a/code/sandbox/angular-cli-default-ts/project.json b/code/sandbox/angular-cli-default-ts/project.json
index 76d3d5738544..cb48bbc83e0e 100644
--- a/code/sandbox/angular-cli-default-ts/project.json
+++ b/code/sandbox/angular-cli-default-ts/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "angular"
   ],
diff --git a/code/sandbox/angular-cli-prerelease/project.json b/code/sandbox/angular-cli-prerelease/project.json
index e07d7448e0eb..4433e7dde157 100644
--- a/code/sandbox/angular-cli-prerelease/project.json
+++ b/code/sandbox/angular-cli-prerelease/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "angular"
   ],
diff --git a/code/sandbox/bench-react-vite-default-ts-nodocs/project.json b/code/sandbox/bench-react-vite-default-ts-nodocs/project.json
index 3c879e9894c6..e0ed20e23930 100644
--- a/code/sandbox/bench-react-vite-default-ts-nodocs/project.json
+++ b/code/sandbox/bench-react-vite-default-ts-nodocs/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "react-vite"
   ],
diff --git a/code/sandbox/bench-react-vite-default-ts-test-build/project.json b/code/sandbox/bench-react-vite-default-ts-test-build/project.json
index ce151efd582d..5e44f6ba14ce 100644
--- a/code/sandbox/bench-react-vite-default-ts-test-build/project.json
+++ b/code/sandbox/bench-react-vite-default-ts-test-build/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "react-vite"
   ],
diff --git a/code/sandbox/bench-react-vite-default-ts/project.json b/code/sandbox/bench-react-vite-default-ts/project.json
index 07766ae7da96..a59cb05cc369 100644
--- a/code/sandbox/bench-react-vite-default-ts/project.json
+++ b/code/sandbox/bench-react-vite-default-ts/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "react-vite"
   ],
diff --git a/code/sandbox/bench-react-webpack-18-ts-test-build/project.json b/code/sandbox/bench-react-webpack-18-ts-test-build/project.json
index 45744cfd7fc0..647d78878fd3 100644
--- a/code/sandbox/bench-react-webpack-18-ts-test-build/project.json
+++ b/code/sandbox/bench-react-webpack-18-ts-test-build/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "react-webpack5"
   ],
diff --git a/code/sandbox/bench-react-webpack-18-ts/project.json b/code/sandbox/bench-react-webpack-18-ts/project.json
index 91958a205f40..2825bb2831d2 100644
--- a/code/sandbox/bench-react-webpack-18-ts/project.json
+++ b/code/sandbox/bench-react-webpack-18-ts/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "react-webpack5"
   ],
diff --git a/code/sandbox/cra-default-js/project.json b/code/sandbox/cra-default-js/project.json
index e3565c634036..a8febc5d3b00 100644
--- a/code/sandbox/cra-default-js/project.json
+++ b/code/sandbox/cra-default-js/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "react-webpack5"
   ],
diff --git a/code/sandbox/cra-default-ts/project.json b/code/sandbox/cra-default-ts/project.json
index d3ac6861159f..b51b71aa0940 100644
--- a/code/sandbox/cra-default-ts/project.json
+++ b/code/sandbox/cra-default-ts/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "react-webpack5"
   ],
diff --git a/code/sandbox/ember-3-js/project.json b/code/sandbox/ember-3-js/project.json
index e31e6d1ebbc4..068515be75b2 100644
--- a/code/sandbox/ember-3-js/project.json
+++ b/code/sandbox/ember-3-js/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "ember"
   ],
diff --git a/code/sandbox/ember-default-js/project.json b/code/sandbox/ember-default-js/project.json
index f63dfb0f2d3b..81f91494ac2a 100644
--- a/code/sandbox/ember-default-js/project.json
+++ b/code/sandbox/ember-default-js/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "ember"
   ],
diff --git a/code/sandbox/experimental-nextjs-vite-default-ts/project.json b/code/sandbox/experimental-nextjs-vite-default-ts/project.json
new file mode 100644
index 000000000000..ae9d595865dd
--- /dev/null
+++ b/code/sandbox/experimental-nextjs-vite-default-ts/project.json
@@ -0,0 +1,21 @@
+{
+  "name": "experimental-nextjs-vite/default-ts",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "implicitDependencies": [
+    "storybook",
+    "core",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
+    "blocks",
+    "experimental-nextjs-vite"
+  ],
+  "targets": {
+    "sandbox": {},
+    "sb:dev": {},
+    "sb:build": {}
+  },
+  "tags": ["ci:normal", "ci:merged", "ci:daily"]
+}
diff --git a/code/sandbox/html-vite-default-js/project.json b/code/sandbox/html-vite-default-js/project.json
index f7c873967190..9363e37e0b07 100644
--- a/code/sandbox/html-vite-default-js/project.json
+++ b/code/sandbox/html-vite-default-js/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "html-vite"
   ],
diff --git a/code/sandbox/html-vite-default-ts/project.json b/code/sandbox/html-vite-default-ts/project.json
index e297ef74eba4..d816dd3fbd29 100644
--- a/code/sandbox/html-vite-default-ts/project.json
+++ b/code/sandbox/html-vite-default-ts/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "html-vite"
   ],
diff --git a/code/sandbox/html-webpack-default/project.json b/code/sandbox/html-webpack-default/project.json
index 44dfca1ab5b5..466b55828a54 100644
--- a/code/sandbox/html-webpack-default/project.json
+++ b/code/sandbox/html-webpack-default/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "html-webpack5"
   ],
diff --git a/code/sandbox/internal-react16-webpack/project.json b/code/sandbox/internal-react16-webpack/project.json
index 909c0797144b..a2164412649b 100644
--- a/code/sandbox/internal-react16-webpack/project.json
+++ b/code/sandbox/internal-react16-webpack/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "react-webpack5"
   ],
diff --git a/code/sandbox/internal-react18-webpack-babel/project.json b/code/sandbox/internal-react18-webpack-babel/project.json
index 6d0d1545bd57..e1585cc8ba0b 100644
--- a/code/sandbox/internal-react18-webpack-babel/project.json
+++ b/code/sandbox/internal-react18-webpack-babel/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "react-webpack5"
   ],
diff --git a/code/sandbox/internal-server-webpack5/project.json b/code/sandbox/internal-server-webpack5/project.json
index b1e2f7adfaf7..51b572402699 100644
--- a/code/sandbox/internal-server-webpack5/project.json
+++ b/code/sandbox/internal-server-webpack5/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "server-webpack5"
   ],
diff --git a/code/sandbox/lit-vite-default-js/project.json b/code/sandbox/lit-vite-default-js/project.json
index 659690873d7d..22bf1065c982 100644
--- a/code/sandbox/lit-vite-default-js/project.json
+++ b/code/sandbox/lit-vite-default-js/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "web-components-vite"
   ],
diff --git a/code/sandbox/lit-vite-default-ts/project.json b/code/sandbox/lit-vite-default-ts/project.json
index 273084b0d96f..978833395968 100644
--- a/code/sandbox/lit-vite-default-ts/project.json
+++ b/code/sandbox/lit-vite-default-ts/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "web-components-vite"
   ],
diff --git a/code/sandbox/nextjs-13-ts/project.json b/code/sandbox/nextjs-13-ts/project.json
index e06a73e0bc06..d83ef788bf2c 100644
--- a/code/sandbox/nextjs-13-ts/project.json
+++ b/code/sandbox/nextjs-13-ts/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "nextjs"
   ],
diff --git a/code/sandbox/nextjs-default-js/project.json b/code/sandbox/nextjs-default-js/project.json
index a7c86faa9f0c..540936cbd268 100644
--- a/code/sandbox/nextjs-default-js/project.json
+++ b/code/sandbox/nextjs-default-js/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "nextjs"
   ],
diff --git a/code/sandbox/nextjs-default-ts/project.json b/code/sandbox/nextjs-default-ts/project.json
index feb21dacb48f..5144fc10b9d4 100644
--- a/code/sandbox/nextjs-default-ts/project.json
+++ b/code/sandbox/nextjs-default-ts/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "nextjs"
   ],
diff --git a/code/sandbox/nextjs-prerelease/project.json b/code/sandbox/nextjs-prerelease/project.json
index 3c7d06c9f0df..9579c10b3928 100644
--- a/code/sandbox/nextjs-prerelease/project.json
+++ b/code/sandbox/nextjs-prerelease/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "nextjs"
   ],
diff --git a/code/sandbox/nuxt-vite-default-ts/project.json b/code/sandbox/nuxt-vite-default-ts/project.json
new file mode 100644
index 000000000000..71bb3820c382
--- /dev/null
+++ b/code/sandbox/nuxt-vite-default-ts/project.json
@@ -0,0 +1,21 @@
+{
+  "name": "nuxt-vite/default-ts",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "implicitDependencies": [
+    "storybook",
+    "core",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
+    "blocks",
+    "vue3-vite"
+  ],
+  "targets": {
+    "sandbox": {},
+    "sb:dev": {},
+    "sb:build": {}
+  },
+  "tags": ["ci:normal", "ci:merged", "ci:daily"]
+}
diff --git a/code/sandbox/preact-vite-default-js/project.json b/code/sandbox/preact-vite-default-js/project.json
index 524fb53a196a..4eb038e5c735 100644
--- a/code/sandbox/preact-vite-default-js/project.json
+++ b/code/sandbox/preact-vite-default-js/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "preact-vite"
   ],
diff --git a/code/sandbox/preact-vite-default-ts/project.json b/code/sandbox/preact-vite-default-ts/project.json
index 2fffaf2a2153..2c1cdf04e3a4 100644
--- a/code/sandbox/preact-vite-default-ts/project.json
+++ b/code/sandbox/preact-vite-default-ts/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "preact-vite"
   ],
diff --git a/code/sandbox/qwik-vite-default-ts/project.json b/code/sandbox/qwik-vite-default-ts/project.json
index b354e5f74615..0a1c65c53499 100644
--- a/code/sandbox/qwik-vite-default-ts/project.json
+++ b/code/sandbox/qwik-vite-default-ts/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks"
   ],
   "targets": {
diff --git a/code/sandbox/react-vite-default-js/project.json b/code/sandbox/react-vite-default-js/project.json
index 7f440a312ce0..cc44d8e4a6fa 100644
--- a/code/sandbox/react-vite-default-js/project.json
+++ b/code/sandbox/react-vite-default-js/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "react-vite"
   ],
diff --git a/code/sandbox/react-vite-default-ts/project.json b/code/sandbox/react-vite-default-ts/project.json
index bea7aa3642b1..25c9b2442a1b 100644
--- a/code/sandbox/react-vite-default-ts/project.json
+++ b/code/sandbox/react-vite-default-ts/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "react-vite"
   ],
diff --git a/code/sandbox/react-webpack-17-ts/project.json b/code/sandbox/react-webpack-17-ts/project.json
index a9dd4fe427ac..01209a70efa9 100644
--- a/code/sandbox/react-webpack-17-ts/project.json
+++ b/code/sandbox/react-webpack-17-ts/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "react-webpack5"
   ],
diff --git a/code/sandbox/react-webpack-18-ts/project.json b/code/sandbox/react-webpack-18-ts/project.json
index d95c1a4c4bff..34cae14e059c 100644
--- a/code/sandbox/react-webpack-18-ts/project.json
+++ b/code/sandbox/react-webpack-18-ts/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "react-webpack5"
   ],
diff --git a/code/sandbox/solid-vite-default-js/project.json b/code/sandbox/solid-vite-default-js/project.json
index 471ad5fe3aa4..7bba5774a7a1 100644
--- a/code/sandbox/solid-vite-default-js/project.json
+++ b/code/sandbox/solid-vite-default-js/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks"
   ],
   "targets": {
diff --git a/code/sandbox/solid-vite-default-ts/project.json b/code/sandbox/solid-vite-default-ts/project.json
index 3b084c7804f1..50d504a77255 100644
--- a/code/sandbox/solid-vite-default-ts/project.json
+++ b/code/sandbox/solid-vite-default-ts/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks"
   ],
   "targets": {
diff --git a/code/sandbox/svelte-kit-prerelease-ts/project.json b/code/sandbox/svelte-kit-prerelease-ts/project.json
index e38bfd206d3d..e9ec53e855c8 100644
--- a/code/sandbox/svelte-kit-prerelease-ts/project.json
+++ b/code/sandbox/svelte-kit-prerelease-ts/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "sveltekit"
   ],
diff --git a/code/sandbox/svelte-kit-skeleton-js/project.json b/code/sandbox/svelte-kit-skeleton-js/project.json
index a7bed3a416e6..c0ac8adf0ba2 100644
--- a/code/sandbox/svelte-kit-skeleton-js/project.json
+++ b/code/sandbox/svelte-kit-skeleton-js/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "sveltekit"
   ],
diff --git a/code/sandbox/svelte-kit-skeleton-ts/project.json b/code/sandbox/svelte-kit-skeleton-ts/project.json
index 55f7fd0e2256..17f7e5cdee4e 100644
--- a/code/sandbox/svelte-kit-skeleton-ts/project.json
+++ b/code/sandbox/svelte-kit-skeleton-ts/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "sveltekit"
   ],
diff --git a/code/sandbox/svelte-vite-default-js/project.json b/code/sandbox/svelte-vite-default-js/project.json
index 096864499ea4..d93d4e9b6ab1 100644
--- a/code/sandbox/svelte-vite-default-js/project.json
+++ b/code/sandbox/svelte-vite-default-js/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "svelte-vite"
   ],
diff --git a/code/sandbox/svelte-vite-default-ts/project.json b/code/sandbox/svelte-vite-default-ts/project.json
index 8236af79dcdc..90dadf8177f4 100644
--- a/code/sandbox/svelte-vite-default-ts/project.json
+++ b/code/sandbox/svelte-vite-default-ts/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "svelte-vite"
   ],
diff --git a/code/sandbox/vue-cli-default-js/project.json b/code/sandbox/vue-cli-default-js/project.json
index dfbbc9051756..fa29b401d74a 100644
--- a/code/sandbox/vue-cli-default-js/project.json
+++ b/code/sandbox/vue-cli-default-js/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "vue3-webpack5"
   ],
diff --git a/code/sandbox/vue3-vite-default-js/project.json b/code/sandbox/vue3-vite-default-js/project.json
index 8c49705a9ee0..6bbb297d51cd 100644
--- a/code/sandbox/vue3-vite-default-js/project.json
+++ b/code/sandbox/vue3-vite-default-js/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "vue3-vite"
   ],
diff --git a/code/sandbox/vue3-vite-default-ts/project.json b/code/sandbox/vue3-vite-default-ts/project.json
index 223d11d694c0..ad777a4b5ece 100644
--- a/code/sandbox/vue3-vite-default-ts/project.json
+++ b/code/sandbox/vue3-vite-default-ts/project.json
@@ -3,12 +3,12 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
   "implicitDependencies": [
-    "cli",
+    "storybook",
     "core",
-    "essentials",
-    "interactions",
-    "links",
-    "onboarding",
+    "addon-essentials",
+    "addon-interactions",
+    "addon-links",
+    "addon-onboarding",
     "blocks",
     "vue3-vite"
   ],
diff --git a/code/vitest.config.ts b/code/vitest.config.ts
index cabfb4e8b0ce..0eef8a17b4ba 100644
--- a/code/vitest.config.ts
+++ b/code/vitest.config.ts
@@ -12,6 +12,7 @@ export default defineConfig({
         'playwright.config.ts',
         'vitest-setup.ts',
         'vitest.helpers.ts',
+        '**/*.stories.*',
       ],
     },
   },
diff --git a/code/yarn.lock b/code/yarn.lock
index 08b73cfd20cc..13e798756fd5 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -19,7 +19,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ampproject/remapping@npm:2.3.0, @ampproject/remapping@npm:^2.2.0, @ampproject/remapping@npm:^2.2.1, @ampproject/remapping@npm:^2.3.0":
+"@ampproject/remapping@npm:2.3.0, @ampproject/remapping@npm:^2.2.0, @ampproject/remapping@npm:^2.3.0":
   version: 2.3.0
   resolution: "@ampproject/remapping@npm:2.3.0"
   dependencies:
@@ -367,7 +367,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.16.7, @babel/code-frame@npm:^7.21.4, @babel/code-frame@npm:^7.22.13, @babel/code-frame@npm:^7.23.5, @babel/code-frame@npm:^7.24.7":
+"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.16.7, @babel/code-frame@npm:^7.21.4, @babel/code-frame@npm:^7.22.13, @babel/code-frame@npm:^7.23.5, @babel/code-frame@npm:^7.25.9, @babel/code-frame@npm:^7.26.0":
+  version: 7.26.2
+  resolution: "@babel/code-frame@npm:7.26.2"
+  dependencies:
+    "@babel/helper-validator-identifier": "npm:^7.25.9"
+    js-tokens: "npm:^4.0.0"
+    picocolors: "npm:^1.0.0"
+  checksum: 10c0/7d79621a6849183c415486af99b1a20b84737e8c11cd55b6544f688c51ce1fd710e6d869c3dd21232023da272a79b91efb3e83b5bc2dc65c1187c5fcd1b72ea8
+  languageName: node
+  linkType: hard
+
+"@babel/code-frame@npm:^7.24.7":
   version: 7.24.7
   resolution: "@babel/code-frame@npm:7.24.7"
   dependencies:
@@ -377,7 +388,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.5, @babel/compat-data@npm:^7.24.4, @babel/compat-data@npm:^7.25.2":
+"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.23.5, @babel/compat-data@npm:^7.24.4, @babel/compat-data@npm:^7.25.9":
+  version: 7.26.2
+  resolution: "@babel/compat-data@npm:7.26.2"
+  checksum: 10c0/c9b5f3724828d17f728a778f9d66c19b55c018d0d76de6d731178cca64f182c22b71400a73bf2b65dcc4fcfe52b630088a94d5902911b54206aa90e3ffe07d12
+  languageName: node
+  linkType: hard
+
+"@babel/compat-data@npm:^7.25.2":
   version: 7.25.2
   resolution: "@babel/compat-data@npm:7.25.2"
   checksum: 10c0/5bf1f14d6e5f0d37c19543e99209ff4a94bb97915e1ce01e5334a144aa08cd56b6e62ece8135dac77e126723d63d4d4b96fc603a12c43b88c28f4b5e070270c5
@@ -430,7 +448,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.18.9, @babel/core@npm:^7.20.12, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2, @babel/core@npm:^7.23.9, @babel/core@npm:^7.24.4, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5":
+"@babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.18.9, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2, @babel/core@npm:^7.23.9, @babel/core@npm:^7.24.4, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5":
   version: 7.25.2
   resolution: "@babel/core@npm:7.25.2"
   dependencies:
@@ -453,6 +471,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/core@npm:^7.25.2":
+  version: 7.26.0
+  resolution: "@babel/core@npm:7.26.0"
+  dependencies:
+    "@ampproject/remapping": "npm:^2.2.0"
+    "@babel/code-frame": "npm:^7.26.0"
+    "@babel/generator": "npm:^7.26.0"
+    "@babel/helper-compilation-targets": "npm:^7.25.9"
+    "@babel/helper-module-transforms": "npm:^7.26.0"
+    "@babel/helpers": "npm:^7.26.0"
+    "@babel/parser": "npm:^7.26.0"
+    "@babel/template": "npm:^7.25.9"
+    "@babel/traverse": "npm:^7.25.9"
+    "@babel/types": "npm:^7.26.0"
+    convert-source-map: "npm:^2.0.0"
+    debug: "npm:^4.1.0"
+    gensync: "npm:^1.0.0-beta.2"
+    json5: "npm:^2.2.3"
+    semver: "npm:^6.3.1"
+  checksum: 10c0/91de73a7ff5c4049fbc747930aa039300e4d2670c2a91f5aa622f1b4868600fc89b01b6278385fbcd46f9574186fa3d9b376a9e7538e50f8d118ec13cfbcb63e
+  languageName: node
+  linkType: hard
+
 "@babel/generator@npm:7.17.7":
   version: 7.17.7
   resolution: "@babel/generator@npm:7.17.7"
@@ -476,7 +517,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.23.0, @babel/generator@npm:^7.23.6, @babel/generator@npm:^7.24.4, @babel/generator@npm:^7.25.0":
+"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.23.0, @babel/generator@npm:^7.23.6, @babel/generator@npm:^7.24.4, @babel/generator@npm:^7.25.9, @babel/generator@npm:^7.26.0":
+  version: 7.26.2
+  resolution: "@babel/generator@npm:7.26.2"
+  dependencies:
+    "@babel/parser": "npm:^7.26.2"
+    "@babel/types": "npm:^7.26.0"
+    "@jridgewell/gen-mapping": "npm:^0.3.5"
+    "@jridgewell/trace-mapping": "npm:^0.3.25"
+    jsesc: "npm:^3.0.2"
+  checksum: 10c0/167ebce8977142f5012fad6bd91da51ac52bcd752f2261a54b7ab605d928aebe57e21636cdd2a9c7757e552652c68d9fcb5d40b06fcb66e02d9ee7526e118a5c
+  languageName: node
+  linkType: hard
+
+"@babel/generator@npm:^7.25.0":
   version: 7.25.0
   resolution: "@babel/generator@npm:7.25.0"
   dependencies:
@@ -516,7 +570,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-compilation-targets@npm:^7.12.0, @babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.23.6, @babel/helper-compilation-targets@npm:^7.24.7, @babel/helper-compilation-targets@npm:^7.25.2":
+"@babel/helper-compilation-targets@npm:^7.12.0, @babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.23.6, @babel/helper-compilation-targets@npm:^7.24.7, @babel/helper-compilation-targets@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/helper-compilation-targets@npm:7.25.9"
+  dependencies:
+    "@babel/compat-data": "npm:^7.25.9"
+    "@babel/helper-validator-option": "npm:^7.25.9"
+    browserslist: "npm:^4.24.0"
+    lru-cache: "npm:^5.1.1"
+    semver: "npm:^6.3.1"
+  checksum: 10c0/a6b26a1e4222e69ef8e62ee19374308f060b007828bc11c65025ecc9e814aba21ff2175d6d3f8bf53c863edd728ee8f94ba7870f8f90a37d39552ad9933a8aaa
+  languageName: node
+  linkType: hard
+
+"@babel/helper-compilation-targets@npm:^7.25.2":
   version: 7.25.2
   resolution: "@babel/helper-compilation-targets@npm:7.25.2"
   dependencies:
@@ -639,7 +706,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-transforms@npm:^7.23.3, @babel/helper-module-transforms@npm:^7.24.7, @babel/helper-module-transforms@npm:^7.25.2":
+"@babel/helper-module-imports@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/helper-module-imports@npm:7.25.9"
+  dependencies:
+    "@babel/traverse": "npm:^7.25.9"
+    "@babel/types": "npm:^7.25.9"
+  checksum: 10c0/078d3c2b45d1f97ffe6bb47f61961be4785d2342a4156d8b42c92ee4e1b7b9e365655dd6cb25329e8fe1a675c91eeac7e3d04f0c518b67e417e29d6e27b6aa70
+  languageName: node
+  linkType: hard
+
+"@babel/helper-module-transforms@npm:^7.23.3, @babel/helper-module-transforms@npm:^7.24.7, @babel/helper-module-transforms@npm:^7.26.0":
+  version: 7.26.0
+  resolution: "@babel/helper-module-transforms@npm:7.26.0"
+  dependencies:
+    "@babel/helper-module-imports": "npm:^7.25.9"
+    "@babel/helper-validator-identifier": "npm:^7.25.9"
+    "@babel/traverse": "npm:^7.25.9"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10c0/ee111b68a5933481d76633dad9cdab30c41df4479f0e5e1cc4756dc9447c1afd2c9473b5ba006362e35b17f4ebddd5fca090233bef8dfc84dca9d9127e56ec3a
+  languageName: node
+  linkType: hard
+
+"@babel/helper-module-transforms@npm:^7.25.2":
   version: 7.25.2
   resolution: "@babel/helper-module-transforms@npm:7.25.2"
   dependencies:
@@ -669,6 +759,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-plugin-utils@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/helper-plugin-utils@npm:7.25.9"
+  checksum: 10c0/483066a1ba36ff16c0116cd24f93de05de746a603a777cd695ac7a1b034928a65a4ecb35f255761ca56626435d7abdb73219eba196f9aa83b6c3c3169325599d
+  languageName: node
+  linkType: hard
+
 "@babel/helper-remap-async-to-generator@npm:^7.22.20, @babel/helper-remap-async-to-generator@npm:^7.24.7":
   version: 7.24.7
   resolution: "@babel/helper-remap-async-to-generator@npm:7.24.7"
@@ -740,14 +837,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-validator-identifier@npm:^7.16.7, @babel/helper-validator-identifier@npm:^7.24.7":
-  version: 7.24.7
-  resolution: "@babel/helper-validator-identifier@npm:7.24.7"
-  checksum: 10c0/87ad608694c9477814093ed5b5c080c2e06d44cb1924ae8320474a74415241223cc2a725eea2640dd783ff1e3390e5f95eede978bc540e870053152e58f1d651
+"@babel/helper-string-parser@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/helper-string-parser@npm:7.25.9"
+  checksum: 10c0/7244b45d8e65f6b4338a6a68a8556f2cb161b782343e97281a5f2b9b93e420cad0d9f5773a59d79f61d0c448913d06f6a2358a87f2e203cf112e3c5b53522ee6
+  languageName: node
+  linkType: hard
+
+"@babel/helper-validator-identifier@npm:^7.16.7, @babel/helper-validator-identifier@npm:^7.24.7, @babel/helper-validator-identifier@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/helper-validator-identifier@npm:7.25.9"
+  checksum: 10c0/4fc6f830177b7b7e887ad3277ddb3b91d81e6c4a24151540d9d1023e8dc6b1c0505f0f0628ae653601eb4388a8db45c1c14b2c07a9173837aef7e4116456259d
   languageName: node
   linkType: hard
 
-"@babel/helper-validator-option@npm:^7.22.15, @babel/helper-validator-option@npm:^7.23.5, @babel/helper-validator-option@npm:^7.24.8":
+"@babel/helper-validator-option@npm:^7.22.15, @babel/helper-validator-option@npm:^7.23.5, @babel/helper-validator-option@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/helper-validator-option@npm:7.25.9"
+  checksum: 10c0/27fb195d14c7dcb07f14e58fe77c44eea19a6a40a74472ec05c441478fa0bb49fa1c32b2d64be7a38870ee48ef6601bdebe98d512f0253aea0b39756c4014f3e
+  languageName: node
+  linkType: hard
+
+"@babel/helper-validator-option@npm:^7.24.8":
   version: 7.24.8
   resolution: "@babel/helper-validator-option@npm:7.24.8"
   checksum: 10c0/73db93a34ae89201351288bee7623eed81a54000779462a986105b54ffe82069e764afd15171a428b82e7c7a9b5fec10b5d5603b216317a414062edf5c67a21f
@@ -766,7 +877,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helpers@npm:^7.23.9, @babel/helpers@npm:^7.24.0, @babel/helpers@npm:^7.25.0":
+"@babel/helpers@npm:^7.23.9, @babel/helpers@npm:^7.24.0, @babel/helpers@npm:^7.26.0":
+  version: 7.26.0
+  resolution: "@babel/helpers@npm:7.26.0"
+  dependencies:
+    "@babel/template": "npm:^7.25.9"
+    "@babel/types": "npm:^7.26.0"
+  checksum: 10c0/343333cced6946fe46617690a1d0789346960910225ce359021a88a60a65bc0d791f0c5d240c0ed46cf8cc63b5fd7df52734ff14e43b9c32feae2b61b1647097
+  languageName: node
+  linkType: hard
+
+"@babel/helpers@npm:^7.25.0":
   version: 7.25.0
   resolution: "@babel/helpers@npm:7.25.0"
   dependencies:
@@ -788,7 +909,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.11.5, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.5, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.22.5, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.23.5, @babel/parser@npm:^7.23.6, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.24.0, @babel/parser@npm:^7.24.4, @babel/parser@npm:^7.24.7, @babel/parser@npm:^7.25.0, @babel/parser@npm:^7.25.3, @babel/parser@npm:^7.4.5, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.9.6":
+"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.11.5, @babel/parser@npm:^7.13.16, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.5, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.22.5, @babel/parser@npm:^7.23.0, @babel/parser@npm:^7.23.5, @babel/parser@npm:^7.23.6, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.24.0, @babel/parser@npm:^7.24.4, @babel/parser@npm:^7.24.7, @babel/parser@npm:^7.25.9, @babel/parser@npm:^7.26.0, @babel/parser@npm:^7.26.2, @babel/parser@npm:^7.4.5, @babel/parser@npm:^7.6.0, @babel/parser@npm:^7.9.6":
+  version: 7.26.2
+  resolution: "@babel/parser@npm:7.26.2"
+  dependencies:
+    "@babel/types": "npm:^7.26.0"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 10c0/751a743087b3a9172a7599f1421830d44c38f065ef781588d2bfb1c98f9b461719a226feb13c868d7a284783eee120c88ea522593118f2668f46ebfb1105c4d7
+  languageName: node
+  linkType: hard
+
+"@babel/parser@npm:^7.25.0, @babel/parser@npm:^7.25.3":
   version: 7.25.3
   resolution: "@babel/parser@npm:7.25.3"
   dependencies:
@@ -1711,25 +1843,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx-self@npm:^7.18.6":
-  version: 7.22.5
-  resolution: "@babel/plugin-transform-react-jsx-self@npm:7.22.5"
+"@babel/plugin-transform-react-jsx-self@npm:^7.24.7":
+  version: 7.25.9
+  resolution: "@babel/plugin-transform-react-jsx-self@npm:7.25.9"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.25.9"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/263091bdede1f448cb2c59b84eb69972c15d3f022c929a75337bd20d8b65551ac38cd26dad1946eaa93289643506b10ddaea3445a28cb8fca5a773a22a0df90b
+  checksum: 10c0/ce0e289f6af93d7c4dc6b385512199c5bb138ae61507b4d5117ba88b6a6b5092f704f1bdf80080b7d69b1b8c36649f2a0b250e8198667d4d30c08bbb1546bd99
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx-source@npm:^7.19.6":
-  version: 7.22.5
-  resolution: "@babel/plugin-transform-react-jsx-source@npm:7.22.5"
+"@babel/plugin-transform-react-jsx-source@npm:^7.24.7":
+  version: 7.25.9
+  resolution: "@babel/plugin-transform-react-jsx-source@npm:7.25.9"
   dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.25.9"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 10c0/defc9debb76b4295e3617ef7795a0533dbbecef6f51bf5ba4bfc162df892a84fd39e14d5f1b9a5aad7b09b97074fef4c6756f9d2036eef5a9874acabe198f75a
+  checksum: 10c0/fc9ee08efc9be7cbd2cc6788bbf92579adf3cab37912481f1b915221be3d22b0613b5b36a721df5f4c0ab65efe8582fcf8673caab83e6e1ce4cc04ceebf57dfa
   languageName: node
   linkType: hard
 
@@ -2247,7 +2379,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/template@npm:^7.23.9, @babel/template@npm:^7.24.0, @babel/template@npm:^7.24.7, @babel/template@npm:^7.25.0":
+"@babel/template@npm:^7.23.9, @babel/template@npm:^7.24.0, @babel/template@npm:^7.24.7, @babel/template@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/template@npm:7.25.9"
+  dependencies:
+    "@babel/code-frame": "npm:^7.25.9"
+    "@babel/parser": "npm:^7.25.9"
+    "@babel/types": "npm:^7.25.9"
+  checksum: 10c0/ebe677273f96a36c92cc15b7aa7b11cc8bc8a3bb7a01d55b2125baca8f19cae94ff3ce15f1b1880fb8437f3a690d9f89d4e91f16fc1dc4d3eb66226d128983ab
+  languageName: node
+  linkType: hard
+
+"@babel/template@npm:^7.25.0":
   version: 7.25.0
   resolution: "@babel/template@npm:7.25.0"
   dependencies:
@@ -2276,7 +2419,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.16.0, @babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.22.5, @babel/traverse@npm:^7.23.9, @babel/traverse@npm:^7.24.0, @babel/traverse@npm:^7.24.1, @babel/traverse@npm:^7.24.7, @babel/traverse@npm:^7.25.2, @babel/traverse@npm:^7.4.5":
+"@babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.16.0, @babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.22.5, @babel/traverse@npm:^7.23.9, @babel/traverse@npm:^7.24.0, @babel/traverse@npm:^7.24.1, @babel/traverse@npm:^7.24.7, @babel/traverse@npm:^7.25.9, @babel/traverse@npm:^7.4.5":
+  version: 7.25.9
+  resolution: "@babel/traverse@npm:7.25.9"
+  dependencies:
+    "@babel/code-frame": "npm:^7.25.9"
+    "@babel/generator": "npm:^7.25.9"
+    "@babel/parser": "npm:^7.25.9"
+    "@babel/template": "npm:^7.25.9"
+    "@babel/types": "npm:^7.25.9"
+    debug: "npm:^4.3.1"
+    globals: "npm:^11.1.0"
+  checksum: 10c0/e90be586a714da4adb80e6cb6a3c5cfcaa9b28148abdafb065e34cc109676fc3db22cf98cd2b2fff66ffb9b50c0ef882cab0f466b6844be0f6c637b82719bba1
+  languageName: node
+  linkType: hard
+
+"@babel/traverse@npm:^7.25.2":
   version: 7.25.3
   resolution: "@babel/traverse@npm:7.25.3"
   dependencies:
@@ -2301,7 +2459,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.17.0, @babel/types@npm:^7.18.9, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.4, @babel/types@npm:^7.23.6, @babel/types@npm:^7.23.9, @babel/types@npm:^7.24.0, @babel/types@npm:^7.24.7, @babel/types@npm:^7.25.0, @babel/types@npm:^7.25.2, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.2, @babel/types@npm:^7.9.6":
+"@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.17.0, @babel/types@npm:^7.18.9, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.4, @babel/types@npm:^7.23.6, @babel/types@npm:^7.23.9, @babel/types@npm:^7.24.0, @babel/types@npm:^7.24.7, @babel/types@npm:^7.25.9, @babel/types@npm:^7.26.0, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.2, @babel/types@npm:^7.9.6":
+  version: 7.26.0
+  resolution: "@babel/types@npm:7.26.0"
+  dependencies:
+    "@babel/helper-string-parser": "npm:^7.25.9"
+    "@babel/helper-validator-identifier": "npm:^7.25.9"
+  checksum: 10c0/b694f41ad1597127e16024d766c33a641508aad037abd08d0d1f73af753e1119fa03b4a107d04b5f92cc19c095a594660547ae9bead1db2299212d644b0a5cb8
+  languageName: node
+  linkType: hard
+
+"@babel/types@npm:^7.25.0, @babel/types@npm:^7.25.2":
   version: 7.25.2
   resolution: "@babel/types@npm:7.25.2"
   dependencies:
@@ -2326,6 +2494,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@bunchtogether/vite-plugin-flow@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "@bunchtogether/vite-plugin-flow@npm:1.0.2"
+  dependencies:
+    flow-remove-types: "npm:^2.158.0"
+    rollup-pluginutils: "npm:^2.8.2"
+  checksum: 10c0/84faf014977196470bbeae686b4e167de2805777389f8a0da88647484df7cf39db3da91907d75ea810ea77175c0cdd40a9a3ad92b7c7c44681b0cd1f4156c7b8
+  languageName: node
+  linkType: hard
+
 "@bundled-es-modules/cookie@npm:^2.0.0":
   version: 2.0.0
   resolution: "@bundled-es-modules/cookie@npm:2.0.0"
@@ -2354,16 +2532,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@chromatic-com/storybook@npm:^1.6.1":
-  version: 1.6.1
-  resolution: "@chromatic-com/storybook@npm:1.6.1"
+"@chromatic-com/storybook@npm:^3.2.2":
+  version: 3.2.2
+  resolution: "@chromatic-com/storybook@npm:3.2.2"
   dependencies:
-    chromatic: "npm:^11.4.0"
+    chromatic: "npm:^11.15.0"
     filesize: "npm:^10.0.12"
     jsonfile: "npm:^6.1.0"
     react-confetti: "npm:^6.1.0"
     strip-ansi: "npm:^7.1.0"
-  checksum: 10c0/411a2c9f44542c4940e6452846f1c2b71f4529640cefcf60396c1eb0a16cd2a4d27ba648523c73a7ca9b5b64f2a67b19159281add6730d0a237336a3856c8f37
+  peerDependencies:
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+  checksum: 10c0/7b8da1ddb399c804337ff28a28594b548392b7bead52f66615b98e201cdeb4d31184b9e355791ba5d0d8cfdd2bea7d38355ecd0058f26f4790f9a887107bde0f
   languageName: node
   linkType: hard
 
@@ -2490,12 +2670,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emnapi/runtime@npm:^1.1.1":
-  version: 1.2.0
-  resolution: "@emnapi/runtime@npm:1.2.0"
+"@emnapi/core@npm:^1.1.0":
+  version: 1.3.1
+  resolution: "@emnapi/core@npm:1.3.1"
+  dependencies:
+    "@emnapi/wasi-threads": "npm:1.0.1"
+    tslib: "npm:^2.4.0"
+  checksum: 10c0/d3be1044ad704e2c486641bc18908523490f28c7d38bd12d9c1d4ce37d39dae6c4aecd2f2eaf44c6e3bd90eaf04e0591acc440b1b038cdf43cce078a355a0ea0
+  languageName: node
+  linkType: hard
+
+"@emnapi/runtime@npm:^1.1.0, @emnapi/runtime@npm:^1.2.0":
+  version: 1.3.1
+  resolution: "@emnapi/runtime@npm:1.3.1"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 10c0/060ffede50f1b619c15083312b80a9e62a5b0c87aa8c1b54854c49766c9d69f8d1d3d87bd963a647071263a320db41b25eaa50b74d6a80dcc763c23dbeaafd6c
+  languageName: node
+  linkType: hard
+
+"@emnapi/wasi-threads@npm:1.0.1":
+  version: 1.0.1
+  resolution: "@emnapi/wasi-threads@npm:1.0.1"
   dependencies:
     tslib: "npm:^2.4.0"
-  checksum: 10c0/7005ff8b67724c9e61b6cd79a3decbdb2ce25d24abd4d3d187472f200ee6e573329c30264335125fb136bd813aa9cf9f4f7c9391d04b07dd1e63ce0a3427be57
+  checksum: 10c0/1e0c8036b8d53e9b07cc9acf021705ef6c86ab6b13e1acda7fffaf541a2d3565072afb92597419173ced9ea14f6bf32fce149106e669b5902b825e8b499e5c6c
   languageName: node
   linkType: hard
 
@@ -2661,170 +2860,170 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/aix-ppc64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/aix-ppc64@npm:0.23.0"
+"@esbuild/aix-ppc64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/aix-ppc64@npm:0.24.0"
   conditions: os=aix & cpu=ppc64
   languageName: node
   linkType: hard
 
-"@esbuild/android-arm64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/android-arm64@npm:0.23.0"
+"@esbuild/android-arm64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/android-arm64@npm:0.24.0"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
 
-"@esbuild/android-arm@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/android-arm@npm:0.23.0"
+"@esbuild/android-arm@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/android-arm@npm:0.24.0"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
 
-"@esbuild/android-x64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/android-x64@npm:0.23.0"
+"@esbuild/android-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/android-x64@npm:0.24.0"
   conditions: os=android & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/darwin-arm64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/darwin-arm64@npm:0.23.0"
+"@esbuild/darwin-arm64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/darwin-arm64@npm:0.24.0"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@esbuild/darwin-x64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/darwin-x64@npm:0.23.0"
+"@esbuild/darwin-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/darwin-x64@npm:0.24.0"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/freebsd-arm64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/freebsd-arm64@npm:0.23.0"
+"@esbuild/freebsd-arm64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/freebsd-arm64@npm:0.24.0"
   conditions: os=freebsd & cpu=arm64
   languageName: node
   linkType: hard
 
-"@esbuild/freebsd-x64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/freebsd-x64@npm:0.23.0"
+"@esbuild/freebsd-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/freebsd-x64@npm:0.24.0"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/linux-arm64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/linux-arm64@npm:0.23.0"
+"@esbuild/linux-arm64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-arm64@npm:0.24.0"
   conditions: os=linux & cpu=arm64
   languageName: node
   linkType: hard
 
-"@esbuild/linux-arm@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/linux-arm@npm:0.23.0"
+"@esbuild/linux-arm@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-arm@npm:0.24.0"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"@esbuild/linux-ia32@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/linux-ia32@npm:0.23.0"
+"@esbuild/linux-ia32@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-ia32@npm:0.24.0"
   conditions: os=linux & cpu=ia32
   languageName: node
   linkType: hard
 
-"@esbuild/linux-loong64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/linux-loong64@npm:0.23.0"
+"@esbuild/linux-loong64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-loong64@npm:0.24.0"
   conditions: os=linux & cpu=loong64
   languageName: node
   linkType: hard
 
-"@esbuild/linux-mips64el@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/linux-mips64el@npm:0.23.0"
+"@esbuild/linux-mips64el@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-mips64el@npm:0.24.0"
   conditions: os=linux & cpu=mips64el
   languageName: node
   linkType: hard
 
-"@esbuild/linux-ppc64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/linux-ppc64@npm:0.23.0"
+"@esbuild/linux-ppc64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-ppc64@npm:0.24.0"
   conditions: os=linux & cpu=ppc64
   languageName: node
   linkType: hard
 
-"@esbuild/linux-riscv64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/linux-riscv64@npm:0.23.0"
+"@esbuild/linux-riscv64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-riscv64@npm:0.24.0"
   conditions: os=linux & cpu=riscv64
   languageName: node
   linkType: hard
 
-"@esbuild/linux-s390x@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/linux-s390x@npm:0.23.0"
+"@esbuild/linux-s390x@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-s390x@npm:0.24.0"
   conditions: os=linux & cpu=s390x
   languageName: node
   linkType: hard
 
-"@esbuild/linux-x64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/linux-x64@npm:0.23.0"
+"@esbuild/linux-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-x64@npm:0.24.0"
   conditions: os=linux & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/netbsd-x64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/netbsd-x64@npm:0.23.0"
+"@esbuild/netbsd-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/netbsd-x64@npm:0.24.0"
   conditions: os=netbsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/openbsd-arm64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/openbsd-arm64@npm:0.23.0"
+"@esbuild/openbsd-arm64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/openbsd-arm64@npm:0.24.0"
   conditions: os=openbsd & cpu=arm64
   languageName: node
   linkType: hard
 
-"@esbuild/openbsd-x64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/openbsd-x64@npm:0.23.0"
+"@esbuild/openbsd-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/openbsd-x64@npm:0.24.0"
   conditions: os=openbsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/sunos-x64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/sunos-x64@npm:0.23.0"
+"@esbuild/sunos-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/sunos-x64@npm:0.24.0"
   conditions: os=sunos & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/win32-arm64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/win32-arm64@npm:0.23.0"
+"@esbuild/win32-arm64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/win32-arm64@npm:0.24.0"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@esbuild/win32-ia32@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/win32-ia32@npm:0.23.0"
+"@esbuild/win32-ia32@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/win32-ia32@npm:0.24.0"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@esbuild/win32-x64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/win32-x64@npm:0.23.0"
+"@esbuild/win32-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/win32-x64@npm:0.24.0"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -2840,6 +3039,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@eslint-community/regexpp@npm:^4.10.0":
+  version: 4.12.1
+  resolution: "@eslint-community/regexpp@npm:4.12.1"
+  checksum: 10c0/a03d98c246bcb9109aec2c08e4d10c8d010256538dcb3f56610191607214523d4fb1b00aa81df830b6dffb74c5fa0be03642513a289c567949d3e550ca11cdf6
+  languageName: node
+  linkType: hard
+
 "@eslint-community/regexpp@npm:^4.5.1, @eslint-community/regexpp@npm:^4.6.1":
   version: 4.10.0
   resolution: "@eslint-community/regexpp@npm:4.10.0"
@@ -2881,10 +3087,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint/js@npm:8.57.0":
-  version: 8.57.0
-  resolution: "@eslint/js@npm:8.57.0"
-  checksum: 10c0/9a518bb8625ba3350613903a6d8c622352ab0c6557a59fe6ff6178bf882bf57123f9d92aa826ee8ac3ee74b9c6203fe630e9ee00efb03d753962dcf65ee4bd94
+"@eslint/js@npm:8.57.1":
+  version: 8.57.1
+  resolution: "@eslint/js@npm:8.57.1"
+  checksum: 10c0/b489c474a3b5b54381c62e82b3f7f65f4b8a5eaaed126546520bf2fede5532a8ed53212919fed1e9048dcf7f37167c8561d58d0ba4492a4244004e7793805223
   languageName: node
   linkType: hard
 
@@ -3362,14 +3568,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@humanwhocodes/config-array@npm:^0.11.14":
-  version: 0.11.14
-  resolution: "@humanwhocodes/config-array@npm:0.11.14"
+"@humanwhocodes/config-array@npm:^0.13.0":
+  version: 0.13.0
+  resolution: "@humanwhocodes/config-array@npm:0.13.0"
   dependencies:
-    "@humanwhocodes/object-schema": "npm:^2.0.2"
+    "@humanwhocodes/object-schema": "npm:^2.0.3"
     debug: "npm:^4.3.1"
     minimatch: "npm:^3.0.5"
-  checksum: 10c0/66f725b4ee5fdd8322c737cb5013e19fac72d4d69c8bf4b7feb192fcb83442b035b92186f8e9497c220e58b2d51a080f28a73f7899bc1ab288c3be172c467541
+  checksum: 10c0/205c99e756b759f92e1f44a3dc6292b37db199beacba8f26c2165d4051fe73a4ae52fdcfd08ffa93e7e5cb63da7c88648f0e84e197d154bbbbe137b2e0dd332e
   languageName: node
   linkType: hard
 
@@ -3405,18 +3611,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@humanwhocodes/object-schema@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "@humanwhocodes/object-schema@npm:2.0.2"
-  checksum: 10c0/6fd83dc320231d71c4541d0244051df61f301817e9f9da9fd4cb7e44ec8aacbde5958c1665b0c419401ab935114fdf532a6ad5d4e7294b1af2f347dd91a6983f
+"@humanwhocodes/object-schema@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "@humanwhocodes/object-schema@npm:2.0.3"
+  checksum: 10c0/80520eabbfc2d32fe195a93557cef50dfe8c8905de447f022675aaf66abc33ae54098f5ea78548d925aa671cd4ab7c7daa5ad704fe42358c9b5e7db60f80696c
   languageName: node
   linkType: hard
 
-"@img/sharp-darwin-arm64@npm:0.33.4":
-  version: 0.33.4
-  resolution: "@img/sharp-darwin-arm64@npm:0.33.4"
+"@img/sharp-darwin-arm64@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-darwin-arm64@npm:0.33.5"
   dependencies:
-    "@img/sharp-libvips-darwin-arm64": "npm:1.0.2"
+    "@img/sharp-libvips-darwin-arm64": "npm:1.0.4"
   dependenciesMeta:
     "@img/sharp-libvips-darwin-arm64":
       optional: true
@@ -3424,11 +3630,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-darwin-x64@npm:0.33.4":
-  version: 0.33.4
-  resolution: "@img/sharp-darwin-x64@npm:0.33.4"
+"@img/sharp-darwin-x64@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-darwin-x64@npm:0.33.5"
   dependencies:
-    "@img/sharp-libvips-darwin-x64": "npm:1.0.2"
+    "@img/sharp-libvips-darwin-x64": "npm:1.0.4"
   dependenciesMeta:
     "@img/sharp-libvips-darwin-x64":
       optional: true
@@ -3436,67 +3642,67 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-libvips-darwin-arm64@npm:1.0.2":
-  version: 1.0.2
-  resolution: "@img/sharp-libvips-darwin-arm64@npm:1.0.2"
+"@img/sharp-libvips-darwin-arm64@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@img/sharp-libvips-darwin-arm64@npm:1.0.4"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@img/sharp-libvips-darwin-x64@npm:1.0.2":
-  version: 1.0.2
-  resolution: "@img/sharp-libvips-darwin-x64@npm:1.0.2"
+"@img/sharp-libvips-darwin-x64@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@img/sharp-libvips-darwin-x64@npm:1.0.4"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@img/sharp-libvips-linux-arm64@npm:1.0.2":
-  version: 1.0.2
-  resolution: "@img/sharp-libvips-linux-arm64@npm:1.0.2"
+"@img/sharp-libvips-linux-arm64@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@img/sharp-libvips-linux-arm64@npm:1.0.4"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@img/sharp-libvips-linux-arm@npm:1.0.2":
-  version: 1.0.2
-  resolution: "@img/sharp-libvips-linux-arm@npm:1.0.2"
+"@img/sharp-libvips-linux-arm@npm:1.0.5":
+  version: 1.0.5
+  resolution: "@img/sharp-libvips-linux-arm@npm:1.0.5"
   conditions: os=linux & cpu=arm & libc=glibc
   languageName: node
   linkType: hard
 
-"@img/sharp-libvips-linux-s390x@npm:1.0.2":
-  version: 1.0.2
-  resolution: "@img/sharp-libvips-linux-s390x@npm:1.0.2"
+"@img/sharp-libvips-linux-s390x@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@img/sharp-libvips-linux-s390x@npm:1.0.4"
   conditions: os=linux & cpu=s390x & libc=glibc
   languageName: node
   linkType: hard
 
-"@img/sharp-libvips-linux-x64@npm:1.0.2":
-  version: 1.0.2
-  resolution: "@img/sharp-libvips-linux-x64@npm:1.0.2"
+"@img/sharp-libvips-linux-x64@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@img/sharp-libvips-linux-x64@npm:1.0.4"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@img/sharp-libvips-linuxmusl-arm64@npm:1.0.2":
-  version: 1.0.2
-  resolution: "@img/sharp-libvips-linuxmusl-arm64@npm:1.0.2"
+"@img/sharp-libvips-linuxmusl-arm64@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@img/sharp-libvips-linuxmusl-arm64@npm:1.0.4"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@img/sharp-libvips-linuxmusl-x64@npm:1.0.2":
-  version: 1.0.2
-  resolution: "@img/sharp-libvips-linuxmusl-x64@npm:1.0.2"
+"@img/sharp-libvips-linuxmusl-x64@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@img/sharp-libvips-linuxmusl-x64@npm:1.0.4"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@img/sharp-linux-arm64@npm:0.33.4":
-  version: 0.33.4
-  resolution: "@img/sharp-linux-arm64@npm:0.33.4"
+"@img/sharp-linux-arm64@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-linux-arm64@npm:0.33.5"
   dependencies:
-    "@img/sharp-libvips-linux-arm64": "npm:1.0.2"
+    "@img/sharp-libvips-linux-arm64": "npm:1.0.4"
   dependenciesMeta:
     "@img/sharp-libvips-linux-arm64":
       optional: true
@@ -3504,11 +3710,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-linux-arm@npm:0.33.4":
-  version: 0.33.4
-  resolution: "@img/sharp-linux-arm@npm:0.33.4"
+"@img/sharp-linux-arm@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-linux-arm@npm:0.33.5"
   dependencies:
-    "@img/sharp-libvips-linux-arm": "npm:1.0.2"
+    "@img/sharp-libvips-linux-arm": "npm:1.0.5"
   dependenciesMeta:
     "@img/sharp-libvips-linux-arm":
       optional: true
@@ -3516,11 +3722,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-linux-s390x@npm:0.33.4":
-  version: 0.33.4
-  resolution: "@img/sharp-linux-s390x@npm:0.33.4"
+"@img/sharp-linux-s390x@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-linux-s390x@npm:0.33.5"
   dependencies:
-    "@img/sharp-libvips-linux-s390x": "npm:1.0.2"
+    "@img/sharp-libvips-linux-s390x": "npm:1.0.4"
   dependenciesMeta:
     "@img/sharp-libvips-linux-s390x":
       optional: true
@@ -3528,11 +3734,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-linux-x64@npm:0.33.4":
-  version: 0.33.4
-  resolution: "@img/sharp-linux-x64@npm:0.33.4"
+"@img/sharp-linux-x64@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-linux-x64@npm:0.33.5"
   dependencies:
-    "@img/sharp-libvips-linux-x64": "npm:1.0.2"
+    "@img/sharp-libvips-linux-x64": "npm:1.0.4"
   dependenciesMeta:
     "@img/sharp-libvips-linux-x64":
       optional: true
@@ -3540,11 +3746,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-linuxmusl-arm64@npm:0.33.4":
-  version: 0.33.4
-  resolution: "@img/sharp-linuxmusl-arm64@npm:0.33.4"
+"@img/sharp-linuxmusl-arm64@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-linuxmusl-arm64@npm:0.33.5"
   dependencies:
-    "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.2"
+    "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.4"
   dependenciesMeta:
     "@img/sharp-libvips-linuxmusl-arm64":
       optional: true
@@ -3552,11 +3758,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-linuxmusl-x64@npm:0.33.4":
-  version: 0.33.4
-  resolution: "@img/sharp-linuxmusl-x64@npm:0.33.4"
+"@img/sharp-linuxmusl-x64@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-linuxmusl-x64@npm:0.33.5"
   dependencies:
-    "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.2"
+    "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.4"
   dependenciesMeta:
     "@img/sharp-libvips-linuxmusl-x64":
       optional: true
@@ -3564,25 +3770,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@img/sharp-wasm32@npm:0.33.4":
-  version: 0.33.4
-  resolution: "@img/sharp-wasm32@npm:0.33.4"
+"@img/sharp-wasm32@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-wasm32@npm:0.33.5"
   dependencies:
-    "@emnapi/runtime": "npm:^1.1.1"
+    "@emnapi/runtime": "npm:^1.2.0"
   conditions: cpu=wasm32
   languageName: node
   linkType: hard
 
-"@img/sharp-win32-ia32@npm:0.33.4":
-  version: 0.33.4
-  resolution: "@img/sharp-win32-ia32@npm:0.33.4"
+"@img/sharp-win32-ia32@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-win32-ia32@npm:0.33.5"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@img/sharp-win32-x64@npm:0.33.4":
-  version: 0.33.4
-  resolution: "@img/sharp-win32-x64@npm:0.33.4"
+"@img/sharp-win32-x64@npm:0.33.5":
+  version: 0.33.5
+  resolution: "@img/sharp-win32-x64@npm:0.33.5"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -3677,21 +3883,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.0":
-  version: 0.3.0
-  resolution: "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.0"
+"@joshwooding/vite-plugin-react-docgen-typescript@npm:0.4.2":
+  version: 0.4.2
+  resolution: "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.4.2"
   dependencies:
-    glob: "npm:^7.2.0"
-    glob-promise: "npm:^4.2.0"
     magic-string: "npm:^0.27.0"
     react-docgen-typescript: "npm:^2.2.2"
   peerDependencies:
     typescript: ">= 4.3.x"
-    vite: ^3.0.0 || ^4.0.0 || ^5.0.0
+    vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/31098ad8fcc2440437534599c111d9f2951dd74821e8ba46c521b969bae4c918d830b7bb0484efbad29a51711bb62d3bc623d5a1ed5b1695b5b5594ea9dd4ca0
+  checksum: 10c0/355d13ad92a9da786b561a25250e6c94a8e51d235ced345e54ebfe709abc45ab60c2a8d06599df6ec0441fba01720f189883429943cb62dff9a4c31b59f0939c
   languageName: node
   linkType: hard
 
@@ -3747,7 +3951,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/trace-mapping@npm:^0.3.12, @jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.18, @jridgewell/trace-mapping@npm:^0.3.20, @jridgewell/trace-mapping@npm:^0.3.23, @jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25, @jridgewell/trace-mapping@npm:^0.3.9":
+"@jridgewell/trace-mapping@npm:^0.3.12, @jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.20, @jridgewell/trace-mapping@npm:^0.3.23, @jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25, @jridgewell/trace-mapping@npm:^0.3.9":
   version: 0.3.25
   resolution: "@jridgewell/trace-mapping@npm:0.3.25"
   dependencies:
@@ -3878,17 +4082,28 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mswjs/interceptors@npm:^0.29.0":
-  version: 0.29.1
-  resolution: "@mswjs/interceptors@npm:0.29.1"
+"@mswjs/interceptors@npm:^0.35.6":
+  version: 0.35.6
+  resolution: "@mswjs/interceptors@npm:0.35.6"
   dependencies:
     "@open-draft/deferred-promise": "npm:^2.2.0"
     "@open-draft/logger": "npm:^0.3.0"
     "@open-draft/until": "npm:^2.0.0"
     is-node-process: "npm:^1.2.0"
-    outvariant: "npm:^1.2.1"
+    outvariant: "npm:^1.4.3"
     strict-event-emitter: "npm:^0.5.1"
-  checksum: 10c0/816660a17b0e89e6e6955072b96882b5807c8c9faa316eab27104e8ba80e8e7d78b1862af42e1044156a5ae3ae2071289dc9211ecdc8fd5f7078d8c8a8a7caa3
+  checksum: 10c0/9472f640183675869368bf2ccf32354db0dfb320c754bcbfc683059f5380674598c59dde4fa58007f74817e31aa1dbd123787fcd0b1d37d53595aa718d06bfbe
+  languageName: node
+  linkType: hard
+
+"@napi-rs/wasm-runtime@npm:0.2.4":
+  version: 0.2.4
+  resolution: "@napi-rs/wasm-runtime@npm:0.2.4"
+  dependencies:
+    "@emnapi/core": "npm:^1.1.0"
+    "@emnapi/runtime": "npm:^1.1.0"
+    "@tybys/wasm-util": "npm:^0.9.0"
+  checksum: 10c0/1040de49b2ef509db207e2517465dbf7fb3474f20e8ec32897672a962ff4f59872385666dac61dc9dbeae3cae5dad265d8dc3865da756adeb07d1634c67b03a1
   languageName: node
   linkType: hard
 
@@ -3903,72 +4118,72 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/env@npm:14.2.5, @next/env@npm:^14.2.5":
-  version: 14.2.5
-  resolution: "@next/env@npm:14.2.5"
-  checksum: 10c0/63d8b88ac450b3c37940a9e2119a63a1074aca89908574ade6157a8aa295275dcb3ac5f69e00883fc55d0f12963b73b74e87ba32a5768a489f9609c6be57b699
+"@neoconfetti/react@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@neoconfetti/react@npm:1.0.0"
+  checksum: 10c0/dfa487965b69f88b39562ccd910114cd68b00a90c7eb79cfb1a483c7ac717b720f9f095e5aea13cef8a9b9bea05533d380ddff5e44d3bc3f7dc4d5c66716765c
+  languageName: node
+  linkType: hard
+
+"@next/env@npm:15.0.3, @next/env@npm:^15.0.3":
+  version: 15.0.3
+  resolution: "@next/env@npm:15.0.3"
+  checksum: 10c0/63582fed80d6a28fff102c935095da71fd57ddf6b5f5d564e85ebdefdeb93298f7f7cf7d813c75b460c6627106717ea959b4c232939e7abb97d73d8b8467d4cd
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-arm64@npm:14.2.5":
-  version: 14.2.5
-  resolution: "@next/swc-darwin-arm64@npm:14.2.5"
+"@next/swc-darwin-arm64@npm:15.0.3":
+  version: 15.0.3
+  resolution: "@next/swc-darwin-arm64@npm:15.0.3"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-x64@npm:14.2.5":
-  version: 14.2.5
-  resolution: "@next/swc-darwin-x64@npm:14.2.5"
+"@next/swc-darwin-x64@npm:15.0.3":
+  version: 15.0.3
+  resolution: "@next/swc-darwin-x64@npm:15.0.3"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-gnu@npm:14.2.5":
-  version: 14.2.5
-  resolution: "@next/swc-linux-arm64-gnu@npm:14.2.5"
+"@next/swc-linux-arm64-gnu@npm:15.0.3":
+  version: 15.0.3
+  resolution: "@next/swc-linux-arm64-gnu@npm:15.0.3"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-musl@npm:14.2.5":
-  version: 14.2.5
-  resolution: "@next/swc-linux-arm64-musl@npm:14.2.5"
+"@next/swc-linux-arm64-musl@npm:15.0.3":
+  version: 15.0.3
+  resolution: "@next/swc-linux-arm64-musl@npm:15.0.3"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-gnu@npm:14.2.5":
-  version: 14.2.5
-  resolution: "@next/swc-linux-x64-gnu@npm:14.2.5"
+"@next/swc-linux-x64-gnu@npm:15.0.3":
+  version: 15.0.3
+  resolution: "@next/swc-linux-x64-gnu@npm:15.0.3"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-musl@npm:14.2.5":
-  version: 14.2.5
-  resolution: "@next/swc-linux-x64-musl@npm:14.2.5"
+"@next/swc-linux-x64-musl@npm:15.0.3":
+  version: 15.0.3
+  resolution: "@next/swc-linux-x64-musl@npm:15.0.3"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@next/swc-win32-arm64-msvc@npm:14.2.5":
-  version: 14.2.5
-  resolution: "@next/swc-win32-arm64-msvc@npm:14.2.5"
+"@next/swc-win32-arm64-msvc@npm:15.0.3":
+  version: 15.0.3
+  resolution: "@next/swc-win32-arm64-msvc@npm:15.0.3"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-win32-ia32-msvc@npm:14.2.5":
-  version: 14.2.5
-  resolution: "@next/swc-win32-ia32-msvc@npm:14.2.5"
-  conditions: os=win32 & cpu=ia32
-  languageName: node
-  linkType: hard
-
-"@next/swc-win32-x64-msvc@npm:14.2.5":
-  version: 14.2.5
-  resolution: "@next/swc-win32-x64-msvc@npm:14.2.5"
+"@next/swc-win32-x64-msvc@npm:15.0.3":
+  version: 15.0.3
+  resolution: "@next/swc-win32-x64-msvc@npm:15.0.3"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -4125,94 +4340,46 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nrwl/devkit@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nrwl/devkit@npm:18.0.6"
-  dependencies:
-    "@nx/devkit": "npm:18.0.6"
-  checksum: 10c0/70e02f256216fe11392e2d12a692ddc76acb28140246dfabeac59d3c7a1d8ee1c811e4bcaa6e879a610a7ba7d4669850469676508e8f333e6d42ee487b2ce279
-  languageName: node
-  linkType: hard
-
-"@nrwl/js@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nrwl/js@npm:18.0.6"
-  dependencies:
-    "@nx/js": "npm:18.0.6"
-  checksum: 10c0/b1126517ab2fd7a8358109169fe42c29da955956526b0ac5f39f60abaed497fc66cbf8d45977cac633ce9038b6c6ae23b368b6228f82be93382979d999745244
-  languageName: node
-  linkType: hard
-
-"@nrwl/tao@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nrwl/tao@npm:18.0.6"
-  dependencies:
-    nx: "npm:18.0.6"
-    tslib: "npm:^2.3.0"
-  bin:
-    tao: index.js
-  checksum: 10c0/f11f0f579dcfb59c501308a9143844785d5aa63c8cca97e5adc6f8faa51468b3105a99ac421b3e5a241001fdfe319a675b586afff1ef3f5d42301994c38da202
-  languageName: node
-  linkType: hard
-
-"@nrwl/vite@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nrwl/vite@npm:18.0.6"
-  dependencies:
-    "@nx/vite": "npm:18.0.6"
-  checksum: 10c0/bb72cfbae2febb9a064f7538bb67c0fa6e4cf50ba875c3d483b1923ac007267f0a4f316d53e6c52984781cd2b764911f749cd0604128eb3c134bc0a434841cf9
-  languageName: node
-  linkType: hard
-
-"@nrwl/workspace@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nrwl/workspace@npm:18.0.6"
-  dependencies:
-    "@nx/workspace": "npm:18.0.6"
-  checksum: 10c0/0cf5ec95c036fd98269d9e746ab08f578d793011667823053aecfb062337a9b0bd98def282acf7fba453930537d5adb7c2d5284b5faebe676f22717a1a7040c1
-  languageName: node
-  linkType: hard
-
-"@nx/devkit@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nx/devkit@npm:18.0.6"
+"@nx/devkit@npm:20.2.2":
+  version: 20.2.2
+  resolution: "@nx/devkit@npm:20.2.2"
   dependencies:
-    "@nrwl/devkit": "npm:18.0.6"
     ejs: "npm:^3.1.7"
     enquirer: "npm:~2.3.6"
     ignore: "npm:^5.0.4"
+    minimatch: "npm:9.0.3"
     semver: "npm:^7.5.3"
     tmp: "npm:~0.2.1"
     tslib: "npm:^2.3.0"
     yargs-parser: "npm:21.1.1"
   peerDependencies:
-    nx: ">= 16 <= 18"
-  checksum: 10c0/1645003b800475257fce500802ce99acc35490c73161896247f7e2747a0160c47a40245b17daf568b6d05f66ddf55097772e2ab8ba895a286f8b544af1b51c44
+    nx: ">= 19 <= 21"
+  checksum: 10c0/2e23120846f6f03a25a81dd69b3cacb5ddfd6bae070411668dcb12c507db8265d81b577a88db348ce4ef89dd8177af6532c9514a42524369d6ed33473a41abe2
   languageName: node
   linkType: hard
 
-"@nx/eslint@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nx/eslint@npm:18.0.6"
+"@nx/eslint@npm:20.2.2":
+  version: 20.2.2
+  resolution: "@nx/eslint@npm:20.2.2"
   dependencies:
-    "@nx/devkit": "npm:18.0.6"
-    "@nx/js": "npm:18.0.6"
-    "@nx/linter": "npm:18.0.6"
-    eslint: "npm:^8.0.0"
+    "@nx/devkit": "npm:20.2.2"
+    "@nx/js": "npm:20.2.2"
+    semver: "npm:^7.5.3"
     tslib: "npm:^2.3.0"
-    typescript: "npm:~5.3.2"
+    typescript: "npm:~5.6.2"
   peerDependencies:
-    js-yaml: 4.1.0
+    "@zkochan/js-yaml": 0.0.7
+    eslint: ^8.0.0 || ^9.0.0
   peerDependenciesMeta:
-    js-yaml:
+    "@zkochan/js-yaml":
       optional: true
-  checksum: 10c0/c9b1821b3b5fd5ffbe7aa7a412a3256d24464d662a31bfe7f026347cf7ebd73d8860b2beadcbbaa0d312011d7def3250b9e4d2285f974f7bd0828f1300cf80a7
+  checksum: 10c0/79b7f28b391b8f49572063d1056f2a15097d8e544c4c65ab982879e2c6680eca5c42d3e30b0d8544fb4e6372a4b124a19d00e78e7567e231e294379fa2eb1470
   languageName: node
   linkType: hard
 
-"@nx/js@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nx/js@npm:18.0.6"
+"@nx/js@npm:20.2.2":
+  version: 20.2.2
+  resolution: "@nx/js@npm:20.2.2"
   dependencies:
     "@babel/core": "npm:^7.23.2"
     "@babel/plugin-proposal-decorators": "npm:^7.22.7"
@@ -4221,26 +4388,26 @@ __metadata:
     "@babel/preset-env": "npm:^7.23.2"
     "@babel/preset-typescript": "npm:^7.22.5"
     "@babel/runtime": "npm:^7.22.6"
-    "@nrwl/js": "npm:18.0.6"
-    "@nx/devkit": "npm:18.0.6"
-    "@nx/workspace": "npm:18.0.6"
-    "@phenomnomnominal/tsquery": "npm:~5.0.1"
+    "@nx/devkit": "npm:20.2.2"
+    "@nx/workspace": "npm:20.2.2"
+    "@zkochan/js-yaml": "npm:0.0.7"
     babel-plugin-const-enum: "npm:^1.0.1"
     babel-plugin-macros: "npm:^2.8.0"
     babel-plugin-transform-typescript-metadata: "npm:^0.3.1"
     chalk: "npm:^4.1.0"
     columnify: "npm:^1.6.0"
     detect-port: "npm:^1.5.1"
-    fast-glob: "npm:3.2.7"
-    fs-extra: "npm:^11.1.0"
+    enquirer: "npm:~2.3.6"
     ignore: "npm:^5.0.4"
     js-tokens: "npm:^4.0.0"
+    jsonc-parser: "npm:3.2.0"
     minimatch: "npm:9.0.3"
     npm-package-arg: "npm:11.0.1"
     npm-run-path: "npm:^4.0.1"
     ora: "npm:5.3.0"
     semver: "npm:^7.5.3"
     source-map-support: "npm:0.5.19"
+    tinyglobby: "npm:^0.2.10"
     ts-node: "npm:10.9.1"
     tsconfig-paths: "npm:^4.1.2"
     tslib: "npm:^2.3.0"
@@ -4249,119 +4416,109 @@ __metadata:
   peerDependenciesMeta:
     verdaccio:
       optional: true
-  checksum: 10c0/dd35398a3af7013255e1f78bbd435377a85a5a887ea10fc121e13b4bda530f3ee6b238373c74ba4a90cd1afd78187c12b7efca2617445024d67ebd5dd027145d
-  languageName: node
-  linkType: hard
-
-"@nx/linter@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nx/linter@npm:18.0.6"
-  dependencies:
-    "@nx/eslint": "npm:18.0.6"
-  checksum: 10c0/b9c05840392a088ea6b70f675096556ef5510b495286327eed3548c373093a8e773a836968747e92ed1dc4448eda8af3af652d79063b68fa9d68f1e69b5eb2ca
+  checksum: 10c0/2f920ca70187f81c1afcac5254aa9d41a8047e149803b0e036b14fade9fde1b00cad7b4ff6b0c46e9ec78d878c8f128857e8288ed0fe9d0d7bf27db6310d718d
   languageName: node
   linkType: hard
 
-"@nx/nx-darwin-arm64@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nx/nx-darwin-arm64@npm:18.0.6"
+"@nx/nx-darwin-arm64@npm:20.2.2":
+  version: 20.2.2
+  resolution: "@nx/nx-darwin-arm64@npm:20.2.2"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@nx/nx-darwin-x64@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nx/nx-darwin-x64@npm:18.0.6"
+"@nx/nx-darwin-x64@npm:20.2.2":
+  version: 20.2.2
+  resolution: "@nx/nx-darwin-x64@npm:20.2.2"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@nx/nx-freebsd-x64@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nx/nx-freebsd-x64@npm:18.0.6"
+"@nx/nx-freebsd-x64@npm:20.2.2":
+  version: 20.2.2
+  resolution: "@nx/nx-freebsd-x64@npm:20.2.2"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@nx/nx-linux-arm-gnueabihf@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nx/nx-linux-arm-gnueabihf@npm:18.0.6"
+"@nx/nx-linux-arm-gnueabihf@npm:20.2.2":
+  version: 20.2.2
+  resolution: "@nx/nx-linux-arm-gnueabihf@npm:20.2.2"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"@nx/nx-linux-arm64-gnu@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nx/nx-linux-arm64-gnu@npm:18.0.6"
+"@nx/nx-linux-arm64-gnu@npm:20.2.2":
+  version: 20.2.2
+  resolution: "@nx/nx-linux-arm64-gnu@npm:20.2.2"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@nx/nx-linux-arm64-musl@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nx/nx-linux-arm64-musl@npm:18.0.6"
+"@nx/nx-linux-arm64-musl@npm:20.2.2":
+  version: 20.2.2
+  resolution: "@nx/nx-linux-arm64-musl@npm:20.2.2"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@nx/nx-linux-x64-gnu@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nx/nx-linux-x64-gnu@npm:18.0.6"
+"@nx/nx-linux-x64-gnu@npm:20.2.2":
+  version: 20.2.2
+  resolution: "@nx/nx-linux-x64-gnu@npm:20.2.2"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@nx/nx-linux-x64-musl@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nx/nx-linux-x64-musl@npm:18.0.6"
+"@nx/nx-linux-x64-musl@npm:20.2.2":
+  version: 20.2.2
+  resolution: "@nx/nx-linux-x64-musl@npm:20.2.2"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@nx/nx-win32-arm64-msvc@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nx/nx-win32-arm64-msvc@npm:18.0.6"
+"@nx/nx-win32-arm64-msvc@npm:20.2.2":
+  version: 20.2.2
+  resolution: "@nx/nx-win32-arm64-msvc@npm:20.2.2"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@nx/nx-win32-x64-msvc@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nx/nx-win32-x64-msvc@npm:18.0.6"
+"@nx/nx-win32-x64-msvc@npm:20.2.2":
+  version: 20.2.2
+  resolution: "@nx/nx-win32-x64-msvc@npm:20.2.2"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
 
-"@nx/vite@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nx/vite@npm:18.0.6"
+"@nx/vite@npm:20.2.2":
+  version: 20.2.2
+  resolution: "@nx/vite@npm:20.2.2"
   dependencies:
-    "@nrwl/vite": "npm:18.0.6"
-    "@nx/devkit": "npm:18.0.6"
-    "@nx/js": "npm:18.0.6"
+    "@nx/devkit": "npm:20.2.2"
+    "@nx/js": "npm:20.2.2"
     "@phenomnomnominal/tsquery": "npm:~5.0.1"
     "@swc/helpers": "npm:~0.5.0"
     enquirer: "npm:~2.3.6"
+    minimatch: "npm:9.0.3"
     tsconfig-paths: "npm:^4.1.2"
   peerDependencies:
     vite: ^5.0.0
-    vitest: ^1.3.1
-  checksum: 10c0/58a7d158e8143e67143ef3cbe29f3fbfff1940e0fbffcbd14770a89a6391db1b61185e807039edee295d5d7b5a04a39be34d9b8af159334ca0433bad269151fd
+    vitest: ^1.3.1 || ^2.0.0
+  checksum: 10c0/f46877b8e8dfd2989a11b48cb57d2b95e62e1e88f81892ede414dff762983e886d01dc2455e7a34b37c8ff1bab9e73d83cdfecf698b2457e618e1fa5dac4daaa
   languageName: node
   linkType: hard
 
-"@nx/workspace@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nx/workspace@npm:18.0.6"
+"@nx/workspace@npm:20.2.2":
+  version: 20.2.2
+  resolution: "@nx/workspace@npm:20.2.2"
   dependencies:
-    "@nrwl/workspace": "npm:18.0.6"
-    "@nx/devkit": "npm:18.0.6"
+    "@nx/devkit": "npm:20.2.2"
     chalk: "npm:^4.1.0"
     enquirer: "npm:~2.3.6"
-    nx: "npm:18.0.6"
+    nx: "npm:20.2.2"
     tslib: "npm:^2.3.0"
     yargs-parser: "npm:21.1.1"
-  checksum: 10c0/bd01b6b28fbe0c783a9c37bfdf0a01846df4ef46f366f6596e586063dff06d87761c35b06819839fefdf66a9c32947697db7ecc21b2933a06a633693a962272c
+  checksum: 10c0/ab3a7bd1787d7534682ac6b1dbe928aea168c15c95636f68fa7885f6da2f9e4da4ff34991c385bacc5f27f0bfd850ab1553883651c5f94f4162dbac8118e2c7b
   languageName: node
   linkType: hard
 
@@ -4606,14 +4763,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@playwright/test@npm:1.46.0":
-  version: 1.46.0
-  resolution: "@playwright/test@npm:1.46.0"
+"@playwright/test@npm:1.48.1":
+  version: 1.48.1
+  resolution: "@playwright/test@npm:1.48.1"
   dependencies:
-    playwright: "npm:1.46.0"
+    playwright: "npm:1.48.1"
   bin:
     playwright: cli.js
-  checksum: 10c0/dced91081efc8b063267626059b37923f44f98132edba906f30281277d919de27c6acf6de082d390ad263112a983f856e7f4bf37722a33cc42f62c5be308bf87
+  checksum: 10c0/32cedc3b2d375cb8f4a830bc820d7726b0235be7a6202e1d6ee46e739b83666271c47c100c11311cf5a916468c18e6a4dc526accf9ef090786e7614c2633b2b8
   languageName: node
   linkType: hard
 
@@ -4656,6 +4813,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@polka/compression@npm:^1.0.0-next.28":
+  version: 1.0.0-next.28
+  resolution: "@polka/compression@npm:1.0.0-next.28"
+  checksum: 10c0/e55912f0a8d5dfcda6f7eb9b8d87cc65782a652003f47e7caf0bd88d81f5c280d9a8310441ee34e2774662ed39369e4f9d5fdb3f3a6adc8f18bc1ee97245fff3
+  languageName: node
+  linkType: hard
+
+"@polka/url@npm:^1.0.0-next.21":
+  version: 1.0.0-next.28
+  resolution: "@polka/url@npm:1.0.0-next.28"
+  checksum: 10c0/acc5ea62597e4da2fb42dbee02749d07f102ae7d6d2c966bf7e423c79cd65d1621da305af567e6e7c232f3b565e242d1ec932cbb3dcc0db1508d02e9a2cafa2e
+  languageName: node
+  linkType: hard
+
 "@polka/url@npm:^1.0.0-next.24":
   version: 1.0.0-next.25
   resolution: "@polka/url@npm:1.0.0-next.25"
@@ -4999,7 +5170,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-slot@npm:1.0.2, @radix-ui/react-slot@npm:^1.0.2":
+"@radix-ui/react-slot@npm:1.0.2":
   version: 1.0.2
   resolution: "@radix-ui/react-slot@npm:1.0.2"
   dependencies:
@@ -5015,7 +5186,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-slot@npm:1.1.0":
+"@radix-ui/react-slot@npm:1.1.0, @radix-ui/react-slot@npm:^1.0.2":
   version: 1.1.0
   resolution: "@radix-ui/react-slot@npm:1.1.0"
   dependencies:
@@ -5236,6 +5407,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sec-ant/readable-stream@npm:^0.4.1":
+  version: 0.4.1
+  resolution: "@sec-ant/readable-stream@npm:0.4.1"
+  checksum: 10c0/64e9e9cf161e848067a5bf60cdc04d18495dc28bb63a8d9f8993e4dd99b91ad34e4b563c85de17d91ffb177ec17a0664991d2e115f6543e73236a906068987af
+  languageName: node
+  linkType: hard
+
 "@sideway/address@npm:^4.1.3":
   version: 4.1.4
   resolution: "@sideway/address@npm:4.1.4"
@@ -5329,21 +5507,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sindresorhus/merge-streams@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@sindresorhus/merge-streams@npm:4.0.0"
+  checksum: 10c0/482ee543629aa1933b332f811a1ae805a213681ecdd98c042b1c1b89387df63e7812248bb4df3910b02b3cc5589d3d73e4393f30e197c9dde18046ccd471fc6b
+  languageName: node
+  linkType: hard
+
 "@storybook/addon-a11y@workspace:*, @storybook/addon-a11y@workspace:addons/a11y":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-a11y@workspace:addons/a11y"
   dependencies:
     "@storybook/addon-highlight": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/icons": "npm:^1.2.10"
+    "@storybook/icons": "npm:^1.2.12"
+    "@storybook/test": "workspace:*"
     "@testing-library/react": "npm:^14.0.0"
     axe-core: "npm:^4.2.0"
-    lodash: "npm:^4.17.21"
+    execa: "npm:^9.5.2"
+    picocolors: "npm:^1.1.0"
+    pretty-format: "npm:^29.7.0"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
     react-resize-detector: "npm:^7.1.2"
     resize-observer-polyfill: "npm:^1.5.1"
     typescript: "npm:^5.3.2"
+    vitest-axe: "npm:^0.1.0"
   peerDependencies:
     storybook: "workspace:^"
   languageName: unknown
@@ -5374,7 +5563,7 @@ __metadata:
   resolution: "@storybook/addon-backgrounds@workspace:addons/backgrounds"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/icons": "npm:^1.2.10"
+    "@storybook/icons": "npm:^1.2.12"
     memoizerific: "npm:^1.11.3"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
@@ -5391,9 +5580,8 @@ __metadata:
   dependencies:
     "@storybook/blocks": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/icons": "npm:^1.2.10"
+    "@storybook/icons": "npm:^1.2.12"
     dequal: "npm:^2.0.2"
-    lodash: "npm:^4.17.21"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
     ts-dedent: "npm:^2.0.0"
@@ -5434,7 +5622,6 @@ __metadata:
     "@rollup/pluginutils": "npm:^5.0.2"
     "@storybook/blocks": "workspace:*"
     "@storybook/csf-plugin": "workspace:*"
-    "@storybook/global": "npm:^5.0.0"
     "@storybook/react-dom-shim": "workspace:*"
     "@types/react": "npm:^16.8.0 || ^17.0.0 || ^18.0.0"
     react: "npm:^18.2.0"
@@ -5508,7 +5695,7 @@ __metadata:
   resolution: "@storybook/addon-jest@workspace:addons/jest"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/icons": "npm:^1.2.10"
+    "@storybook/icons": "npm:^1.2.12"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
     react-resize-detector: "npm:^7.1.2"
@@ -5525,7 +5712,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-links@workspace:addons/links"
   dependencies:
-    "@storybook/csf": "npm:^0.1.11"
+    "@storybook/csf": "npm:0.1.12"
     "@storybook/global": "npm:^5.0.0"
     ts-dedent: "npm:^2.0.0"
     typescript: "npm:^5.3.2"
@@ -5555,7 +5742,7 @@ __metadata:
   resolution: "@storybook/addon-measure@workspace:addons/measure"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/icons": "npm:^1.2.10"
+    "@storybook/icons": "npm:^1.2.12"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
     tiny-invariant: "npm:^1.3.1"
@@ -5569,12 +5756,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-onboarding@workspace:addons/onboarding"
   dependencies:
+    "@neoconfetti/react": "npm:^1.0.0"
     "@radix-ui/react-dialog": "npm:^1.0.5"
-    "@storybook/icons": "npm:^1.2.10"
+    "@storybook/icons": "npm:^1.2.12"
     "@storybook/react": "workspace:*"
     framer-motion: "npm:^11.0.3"
     react: "npm:^18.2.0"
-    react-confetti: "npm:^6.1.0"
     react-dom: "npm:^18.2.0"
     react-joyride: "npm:^2.8.2"
     react-use-measure: "npm:^2.1.1"
@@ -5589,7 +5776,7 @@ __metadata:
   resolution: "@storybook/addon-outline@workspace:addons/outline"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/icons": "npm:^1.2.10"
+    "@storybook/icons": "npm:^1.2.12"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
     ts-dedent: "npm:^2.0.0"
@@ -5621,7 +5808,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-themes@workspace:addons/themes"
   dependencies:
-    "@storybook/icons": "npm:^1.2.10"
+    "@storybook/icons": "npm:^1.2.12"
     ts-dedent: "npm:^2.0.0"
     typescript: "npm:^5.3.2"
   peerDependencies:
@@ -5646,7 +5833,7 @@ __metadata:
   resolution: "@storybook/addon-viewport@workspace:addons/viewport"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/icons": "npm:^1.2.10"
+    "@storybook/icons": "npm:^1.2.12"
     memoizerific: "npm:^1.11.3"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
@@ -5674,12 +5861,12 @@ __metadata:
     "@angular/platform-browser": "npm:^17.3.0"
     "@angular/platform-browser-dynamic": "npm:^17.3.0"
     "@storybook/builder-webpack5": "workspace:*"
-    "@storybook/components": "workspace:^"
+    "@storybook/components": "workspace:*"
     "@storybook/core-webpack": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/manager-api": "workspace:^"
-    "@storybook/preview-api": "workspace:^"
-    "@storybook/theming": "workspace:^"
+    "@storybook/manager-api": "workspace:*"
+    "@storybook/preview-api": "workspace:*"
+    "@storybook/theming": "workspace:*"
     "@types/cross-spawn": "npm:^6.0.2"
     "@types/node": "npm:^22.0.0"
     "@types/react": "npm:^18.0.37"
@@ -5700,17 +5887,17 @@ __metadata:
     webpack: "npm:5"
     zone.js: "npm:^0.14.2"
   peerDependencies:
-    "@angular-devkit/architect": ">=0.1500.0 < 0.1900.0"
-    "@angular-devkit/build-angular": ">=15.0.0 < 19.0.0"
-    "@angular-devkit/core": ">=15.0.0 < 19.0.0"
-    "@angular/cli": ">=15.0.0 < 19.0.0"
-    "@angular/common": ">=15.0.0 < 19.0.0"
-    "@angular/compiler": ">=15.0.0 < 19.0.0"
-    "@angular/compiler-cli": ">=15.0.0 < 19.0.0"
-    "@angular/core": ">=15.0.0 < 19.0.0"
-    "@angular/forms": ">=15.0.0 < 19.0.0"
-    "@angular/platform-browser": ">=15.0.0 < 19.0.0"
-    "@angular/platform-browser-dynamic": ">=15.0.0 < 19.0.0"
+    "@angular-devkit/architect": ">=0.1500.0 < 0.2000.0"
+    "@angular-devkit/build-angular": ">=15.0.0 < 20.0.0"
+    "@angular-devkit/core": ">=15.0.0 < 20.0.0"
+    "@angular/cli": ">=15.0.0 < 20.0.0"
+    "@angular/common": ">=15.0.0 < 20.0.0"
+    "@angular/compiler": ">=15.0.0 < 20.0.0"
+    "@angular/compiler-cli": ">=15.0.0 < 20.0.0"
+    "@angular/core": ">=15.0.0 < 20.0.0"
+    "@angular/forms": ">=15.0.0 < 20.0.0"
+    "@angular/platform-browser": ">=15.0.0 < 20.0.0"
+    "@angular/platform-browser-dynamic": ">=15.0.0 < 20.0.0"
     rxjs: ^6.0.0 || ^7.4.0
     storybook: "workspace:^"
     typescript: ^4.0.0 || ^5.0.0
@@ -5751,16 +5938,13 @@ __metadata:
   resolution: "@storybook/blocks@workspace:lib/blocks"
   dependencies:
     "@storybook/addon-actions": "workspace:*"
-    "@storybook/csf": "npm:^0.1.11"
-    "@storybook/global": "npm:^5.0.0"
-    "@storybook/icons": "npm:^1.2.10"
+    "@storybook/csf": "npm:0.1.12"
+    "@storybook/icons": "npm:^1.2.12"
     "@storybook/react": "workspace:*"
     "@storybook/test": "workspace:*"
     "@types/color-convert": "npm:^2.0.0"
-    "@types/lodash": "npm:^4.14.167"
     color-convert: "npm:^2.0.1"
-    dequal: "npm:^2.0.2"
-    lodash: "npm:^4.17.21"
+    es-toolkit: "npm:^1.22.0"
     markdown-to-jsx: "npm:^7.4.5"
     memoizerific: "npm:^1.11.3"
     polished: "npm:^4.2.2"
@@ -5768,7 +5952,6 @@ __metadata:
     telejson: "npm:^7.2.0"
     tocbot: "npm:^4.20.1"
     ts-dedent: "npm:^2.0.0"
-    util-deprecate: "npm:^1.0.2"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
@@ -5785,7 +5968,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/builder-manager@workspace:deprecated/builder-manager"
   peerDependencies:
-    storybook: "workspace:^"
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
   languageName: unknown
   linkType: soft
 
@@ -5794,32 +5977,23 @@ __metadata:
   resolution: "@storybook/builder-vite@workspace:builders/builder-vite"
   dependencies:
     "@storybook/csf-plugin": "workspace:*"
-    "@types/express": "npm:^4.17.21"
     "@types/find-cache-dir": "npm:^3.2.1"
     "@types/node": "npm:^22.0.0"
     browser-assert: "npm:^1.2.1"
     es-module-lexer: "npm:^1.5.0"
-    express: "npm:^4.19.2"
     find-cache-dir: "npm:^3.0.0"
     glob: "npm:^10.0.0"
+    knitwork: "npm:^1.1.0"
     magic-string: "npm:^0.30.0"
+    pathe: "npm:^1.1.2"
+    polka: "npm:^1.0.0-next.28"
+    sirv: "npm:^2.0.4"
     slash: "npm:^5.0.0"
     ts-dedent: "npm:^2.0.0"
-    typescript: "npm:^5.3.2"
     vite: "npm:^4.0.4"
   peerDependencies:
-    "@preact/preset-vite": "*"
     storybook: "workspace:^"
-    typescript: ">= 4.3.x"
-    vite: ^4.0.0 || ^5.0.0
-    vite-plugin-glimmerx: "*"
-  peerDependenciesMeta:
-    "@preact/preset-vite":
-      optional: true
-    typescript:
-      optional: true
-    vite-plugin-glimmerx:
-      optional: true
+    vite: ^4.0.0 || ^5.0.0 || ^6.0.0
   languageName: unknown
   linkType: soft
 
@@ -5839,7 +6013,6 @@ __metadata:
     constants-browserify: "npm:^1.0.0"
     css-loader: "npm:^6.7.1"
     es-module-lexer: "npm:^1.5.0"
-    express: "npm:^4.19.2"
     fork-ts-checker-webpack-plugin: "npm:^8.0.0"
     html-webpack-plugin: "npm:^5.5.0"
     magic-string: "npm:^0.30.5"
@@ -5847,6 +6020,7 @@ __metadata:
     pretty-hrtime: "npm:^1.0.3"
     process: "npm:^0.11.10"
     semver: "npm:^7.3.7"
+    sirv: "npm:^2.0.4"
     slash: "npm:^5.0.0"
     style-loader: "npm:^3.3.1"
     terser-webpack-plugin: "npm:^5.3.1"
@@ -5871,7 +6045,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/channels@workspace:deprecated/channels"
   peerDependencies:
-    storybook: "workspace:^"
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
   languageName: unknown
   linkType: soft
 
@@ -5886,7 +6060,6 @@ __metadata:
     "@types/prompts": "npm:^2.0.9"
     "@types/semver": "npm:^7.3.4"
     boxen: "npm:^7.1.1"
-    chalk: "npm:^4.1.0"
     commander: "npm:^12.1.0"
     create-storybook: "workspace:*"
     cross-spawn: "npm:^7.0.3"
@@ -5898,6 +6071,7 @@ __metadata:
     globby: "npm:^14.0.1"
     jscodeshift: "npm:^0.15.1"
     leven: "npm:^3.1.0"
+    picocolors: "npm:^1.1.0"
     prompts: "npm:^2.4.0"
     semver: "npm:^7.3.7"
     slash: "npm:^5.0.0"
@@ -5915,7 +6089,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/client-logger@workspace:deprecated/client-logger"
   peerDependencies:
-    storybook: "workspace:^"
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
   languageName: unknown
   linkType: soft
 
@@ -5927,14 +6101,15 @@ __metadata:
     "@babel/preset-env": "npm:^7.24.4"
     "@babel/types": "npm:^7.24.0"
     "@storybook/core": "workspace:*"
-    "@storybook/csf": "npm:^0.1.11"
+    "@storybook/csf": "npm:0.1.12"
     "@types/cross-spawn": "npm:^6.0.2"
     "@types/jscodeshift": "npm:^0.11.10"
     ansi-regex: "npm:^6.0.1"
+    camelcase: "npm:^8.0.0"
     cross-spawn: "npm:^7.0.3"
+    es-toolkit: "npm:^1.22.0"
     globby: "npm:^14.0.1"
     jscodeshift: "npm:^0.15.1"
-    lodash: "npm:^4.17.21"
     mdast-util-mdx-jsx: "npm:^3.0.0"
     mdast-util-mdxjs-esm: "npm:^2.0.1"
     prettier: "npm:^3.1.1"
@@ -5952,11 +6127,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/components@workspace:^, @storybook/components@workspace:deprecated/components":
+"@storybook/components@workspace:*, @storybook/components@workspace:deprecated/components":
   version: 0.0.0-use.local
   resolution: "@storybook/components@workspace:deprecated/components"
   peerDependencies:
-    storybook: "workspace:^"
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
   languageName: unknown
   linkType: soft
 
@@ -5964,7 +6139,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/core-common@workspace:deprecated/core-common"
   peerDependencies:
-    storybook: "workspace:^"
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
   languageName: unknown
   linkType: soft
 
@@ -5972,7 +6147,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/core-events@workspace:deprecated/core-events"
   peerDependencies:
-    storybook: "workspace:^"
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
   languageName: unknown
   linkType: soft
 
@@ -5980,7 +6155,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/core-server@workspace:deprecated/core-server"
   peerDependencies:
-    storybook: "workspace:^"
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
   languageName: unknown
   linkType: soft
 
@@ -6017,32 +6192,29 @@ __metadata:
     "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.1"
     "@fal-works/esbuild-plugin-global-externals": "npm:^2.1.2"
     "@ndelangen/get-tarball": "npm:^3.0.7"
+    "@polka/compression": "npm:^1.0.0-next.28"
     "@popperjs/core": "npm:^2.6.0"
     "@radix-ui/react-dialog": "npm:^1.0.5"
     "@radix-ui/react-scroll-area": "npm:1.2.0-rc.7"
     "@radix-ui/react-slot": "npm:^1.0.2"
-    "@storybook/csf": "npm:^0.1.11"
+    "@storybook/csf": "npm:0.1.12"
     "@storybook/docs-mdx": "npm:4.0.0-next.1"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/icons": "npm:^1.2.10"
+    "@storybook/icons": "npm:^1.2.12"
     "@tanstack/react-virtual": "npm:^3.3.0"
     "@testing-library/react": "npm:^14.0.0"
-    "@types/compression": "npm:^1.7.0"
     "@types/cross-spawn": "npm:^6.0.2"
     "@types/detect-port": "npm:^1.3.0"
     "@types/diff": "npm:^5.0.9"
     "@types/ejs": "npm:^3.1.1"
-    "@types/express": "npm:^4.17.21"
     "@types/find-cache-dir": "npm:^5.0.0"
     "@types/js-yaml": "npm:^4.0.5"
-    "@types/lodash": "npm:^4.14.167"
     "@types/node": "npm:^22.0.0"
     "@types/npmlog": "npm:^7.0.0"
     "@types/picomatch": "npm:^2.3.0"
     "@types/prettier": "npm:^3.0.0"
     "@types/pretty-hrtime": "npm:^1.0.0"
     "@types/prompts": "npm:^2.0.9"
-    "@types/qs": "npm:^6"
     "@types/react-syntax-highlighter": "npm:11.0.5"
     "@types/react-transition-group": "npm:^4"
     "@types/semver": "npm:^7.5.8"
@@ -6058,12 +6230,9 @@ __metadata:
     browser-assert: "npm:^1.2.1"
     browser-dtector: "npm:^3.4.0"
     camelcase: "npm:^8.0.0"
-    chai: "npm:^4.4.1"
-    chalk: "npm:^5.3.0"
     cli-table3: "npm:^0.6.1"
     commander: "npm:^12.1.0"
     comment-parser: "npm:^1.4.1"
-    compression: "npm:^1.7.4"
     copy-to-clipboard: "npm:^3.3.1"
     cross-spawn: "npm:^7.0.3"
     css: "npm:^3.0.0"
@@ -6075,14 +6244,13 @@ __metadata:
     diff: "npm:^5.2.0"
     downshift: "npm:^9.0.4"
     ejs: "npm:^3.1.10"
+    es-toolkit: "npm:^1.22.0"
     esbuild: "npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0"
     esbuild-plugin-alias: "npm:^0.2.1"
     esbuild-register: "npm:^3.5.0"
     execa: "npm:^8.0.1"
-    express: "npm:^4.19.2"
     fd-package-json: "npm:^1.2.0"
     fetch-retry: "npm:^6.0.0"
-    file-system-cache: "npm:^2.4.4"
     find-cache-dir: "npm:^5.0.0"
     find-up: "npm:^7.0.0"
     flush-promises: "npm:^1.0.2"
@@ -6090,26 +6258,26 @@ __metadata:
     get-npm-tarball-url: "npm:^2.0.3"
     glob: "npm:^10.0.0"
     globby: "npm:^14.0.1"
-    handlebars: "npm:^4.7.7"
     jiti: "npm:^1.21.6"
     js-yaml: "npm:^4.1.0"
     jsdoc-type-pratt-parser: "npm:^4.0.0"
     lazy-universal-dotenv: "npm:^4.0.0"
     leven: "npm:^4.0.0"
-    lodash: "npm:^4.17.21"
     markdown-to-jsx: "npm:^7.4.5"
     memfs: "npm:^4.11.1"
     memoizerific: "npm:^1.11.3"
     nanoid: "npm:^4.0.2"
     npmlog: "npm:^7.0.0"
     open: "npm:^8.4.0"
+    picocolors: "npm:^1.1.0"
     picomatch: "npm:^2.3.0"
+    picoquery: "npm:^1.4.0"
     polished: "npm:^4.2.2"
+    polka: "npm:^1.0.0-next.28"
     prettier: "npm:^3.2.5"
     pretty-hrtime: "npm:^1.0.3"
     process: "npm:^0.11.10"
     prompts: "npm:^2.4.0"
-    qs: "npm:^6.10.0"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
     react-draggable: "npm:^4.4.5"
@@ -6124,6 +6292,7 @@ __metadata:
     require-from-string: "npm:^2.0.2"
     resolve-from: "npm:^5.0.0"
     semver: "npm:^7.6.2"
+    sirv: "npm:^2.0.4"
     slash: "npm:^5.0.0"
     source-map: "npm:^0.7.4"
     store2: "npm:^2.14.2"
@@ -6140,6 +6309,11 @@ __metadata:
     util: "npm:^0.12.5"
     watchpack: "npm:^2.2.0"
     ws: "npm:^8.2.3"
+  peerDependencies:
+    prettier: ^2 || ^3
+  peerDependenciesMeta:
+    prettier:
+      optional: true
   languageName: unknown
   linkType: soft
 
@@ -6158,16 +6332,16 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/csf-tools@workspace:deprecated/csf-tools"
   peerDependencies:
-    storybook: "workspace:^"
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
   languageName: unknown
   linkType: soft
 
-"@storybook/csf@npm:0.1.11, @storybook/csf@npm:^0.1.11":
-  version: 0.1.11
-  resolution: "@storybook/csf@npm:0.1.11"
+"@storybook/csf@npm:0.1.12":
+  version: 0.1.12
+  resolution: "@storybook/csf@npm:0.1.12"
   dependencies:
     type-fest: "npm:^2.19.0"
-  checksum: 10c0/c5329fc13e7d762049b5c91df1bc1c0e510a1a898c401b72b68f1ff64139a85ab64a92f8e681d2fcb226c0a4a55d0f23b569b2bdb517e0f067bd05ea46228356
+  checksum: 10c0/3d96a976ada67eb683279338d1eb6aa730b228107d4c4f6616ea7b94061899c1fdc11957a756e7bc0708d18cb39af0010c865d124efd84559cd82dcb2d8bc959
   languageName: node
   linkType: hard
 
@@ -6193,7 +6367,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/docs-tools@workspace:deprecated/docs-tools"
   peerDependencies:
-    storybook: "workspace:^"
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
   languageName: unknown
   linkType: soft
 
@@ -6233,19 +6407,51 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/experimental-addon-test@workspace:addons/test"
   dependencies:
-    "@storybook/csf": "npm:^0.1.11"
+    "@devtools-ds/object-inspector": "npm:^1.1.2"
+    "@storybook/csf": "npm:0.1.12"
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/icons": "npm:^1.2.12"
+    "@storybook/instrumenter": "workspace:*"
+    "@storybook/test": "workspace:*"
+    "@types/istanbul-lib-report": "npm:^3.0.3"
+    "@types/node": "npm:^22.0.0"
     "@types/semver": "npm:^7"
-    "@vitest/browser": "npm:^2.0.0"
+    "@vitest/browser": "npm:^2.1.3"
+    "@vitest/runner": "npm:^2.1.3"
+    ansi-to-html: "npm:^0.7.2"
     boxen: "npm:^8.0.1"
+    es-toolkit: "npm:^1.22.0"
+    execa: "npm:^8.0.1"
     find-up: "npm:^7.0.0"
+    formik: "npm:^2.2.9"
+    istanbul-lib-report: "npm:^3.0.1"
+    pathe: "npm:^1.1.2"
+    picocolors: "npm:^1.1.0"
+    polished: "npm:^4.2.2"
+    prompts: "npm:^2.4.0"
+    react: "npm:^18.2.0"
+    react-dom: "npm:^18.2.0"
     semver: "npm:^7.6.3"
-    tinyrainbow: "npm:^1.2.0"
+    sirv: "npm:^2.0.4"
+    slash: "npm:^5.0.0"
+    strip-ansi: "npm:^7.1.0"
+    tinyglobby: "npm:^0.2.10"
+    tree-kill: "npm:^1.2.2"
     ts-dedent: "npm:^2.2.0"
-    vitest: "npm:^2.0.0"
+    typescript: "npm:^5.3.2"
+    vitest: "npm:^2.1.3"
   peerDependencies:
-    "@vitest/browser": ^2.0.0
+    "@vitest/browser": ^2.1.1
+    "@vitest/runner": ^2.1.1
     storybook: "workspace:^"
-    vitest: ^2.0.0
+    vitest: ^2.1.1
+  peerDependenciesMeta:
+    "@vitest/browser":
+      optional: true
+    "@vitest/runner":
+      optional: true
+    vitest:
+      optional: true
   languageName: unknown
   linkType: soft
 
@@ -6255,20 +6461,21 @@ __metadata:
   dependencies:
     "@storybook/builder-vite": "workspace:*"
     "@storybook/react": "workspace:*"
+    "@storybook/react-vite": "workspace:*"
     "@storybook/test": "workspace:*"
     "@types/node": "npm:^18.0.0"
-    next: "npm:^14.2.5"
+    next: "npm:^15.0.3"
     sharp: "npm:^0.33.3"
     styled-jsx: "npm:5.1.6"
     typescript: "npm:^5.3.2"
-    vite-plugin-storybook-nextjs: "npm:^1.0.11"
+    vite-plugin-storybook-nextjs: "npm:^1.1.0"
   peerDependencies:
     "@storybook/test": "workspace:*"
-    next: ^14.1.0
+    next: ^14.1.0 || ^15.0.0
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     storybook: "workspace:^"
-    vite: ^5.0.0
+    vite: ^5.0.0 || ^6.0.0
   dependenciesMeta:
     sharp:
       optional: true
@@ -6318,11 +6525,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/html@workspace:renderers/html"
   dependencies:
-    "@storybook/components": "workspace:^"
+    "@storybook/components": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/manager-api": "workspace:^"
-    "@storybook/preview-api": "workspace:^"
-    "@storybook/theming": "workspace:^"
+    "@storybook/manager-api": "workspace:*"
+    "@storybook/preview-api": "workspace:*"
+    "@storybook/theming": "workspace:*"
     ts-dedent: "npm:^2.0.0"
     typescript: "npm:^5.3.2"
   peerDependencies:
@@ -6330,7 +6537,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/icons@npm:^1.2.10, @storybook/icons@npm:^1.2.5":
+"@storybook/icons@npm:^1.2.12":
+  version: 1.2.12
+  resolution: "@storybook/icons@npm:1.2.12"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 10c0/97f6a7b7841fb5a0d1c8a30c36173469e7b0814a674c8103c7c0fd8803f0f7c2a778545af864012d40883195a533534dbc98541deac2bafe31e6a3fe37fdfc66
+  languageName: node
+  linkType: hard
+
+"@storybook/icons@npm:^1.2.5":
   version: 1.2.10
   resolution: "@storybook/icons@npm:1.2.10"
   peerDependencies:
@@ -6345,9 +6562,8 @@ __metadata:
   resolution: "@storybook/instrumenter@workspace:lib/instrumenter"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
-    "@vitest/utils": "npm:^2.0.5"
+    "@vitest/utils": "npm:^2.1.1"
     typescript: "npm:^5.3.2"
-    util: "npm:^0.12.4"
   peerDependencies:
     storybook: "workspace:^"
   languageName: unknown
@@ -6380,11 +6596,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/manager-api@workspace:^, @storybook/manager-api@workspace:deprecated/manager-api":
+"@storybook/manager-api@workspace:*, @storybook/manager-api@workspace:deprecated/manager-api":
   version: 0.0.0-use.local
   resolution: "@storybook/manager-api@workspace:deprecated/manager-api"
   peerDependencies:
-    storybook: "workspace:^"
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
   languageName: unknown
   linkType: soft
 
@@ -6392,7 +6608,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/manager@workspace:deprecated/manager"
   peerDependencies:
-    storybook: "workspace:^"
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
   languageName: unknown
   linkType: soft
 
@@ -6431,14 +6647,14 @@ __metadata:
     find-up: "npm:^5.0.0"
     image-size: "npm:^1.0.0"
     loader-utils: "npm:^3.2.1"
-    next: "npm:^14.1.0"
+    next: "npm:^15.0.3"
     node-polyfill-webpack-plugin: "npm:^2.0.1"
     pnp-webpack-plugin: "npm:^1.7.0"
     postcss: "npm:^8.4.38"
     postcss-loader: "npm:^8.1.1"
     react-refresh: "npm:^0.14.0"
     resolve-url-loader: "npm:^5.0.0"
-    sass-loader: "npm:^13.2.0"
+    sass-loader: "npm:^14.2.1"
     semver: "npm:^7.3.5"
     sharp: "npm:^0.33.3"
     style-loader: "npm:^3.3.1"
@@ -6449,7 +6665,7 @@ __metadata:
     typescript: "npm:^5.3.2"
     webpack: "npm:^5.65.0"
   peerDependencies:
-    next: ^13.5.0 || ^14.0.0
+    next: ^13.5.0 || ^14.0.0 || ^15.0.0
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     storybook: "workspace:^"
@@ -6469,7 +6685,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/node-logger@workspace:deprecated/node-logger"
   peerDependencies:
-    storybook: "workspace:^"
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
   languageName: unknown
   linkType: soft
 
@@ -6508,11 +6724,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/preact@workspace:renderers/preact"
   dependencies:
-    "@storybook/components": "workspace:^"
+    "@storybook/components": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/manager-api": "workspace:^"
-    "@storybook/preview-api": "workspace:^"
-    "@storybook/theming": "workspace:^"
+    "@storybook/manager-api": "workspace:*"
+    "@storybook/preview-api": "workspace:*"
+    "@storybook/theming": "workspace:*"
     preact: "npm:^10.5.13"
     ts-dedent: "npm:^2.0.0"
     typescript: "npm:^5.3.2"
@@ -6617,14 +6833,14 @@ __metadata:
   resolution: "@storybook/preset-svelte-webpack@workspace:presets/svelte-webpack"
   dependencies:
     "@storybook/core-webpack": "workspace:*"
-    svelte: "npm:^4.0.0"
-    svelte-loader: "npm:^3.1.9"
+    svelte: "npm:^5.0.0"
+    svelte-loader: "npm:^3.2.4"
     sveltedoc-parser: "npm:^4.2.1"
     ts-dedent: "npm:^2.0.0"
     typescript: "npm:^5.3.2"
   peerDependencies:
     storybook: "workspace:^"
-    svelte: ^4.0.0 || ^5.0.0-next.65
+    svelte: ^4.0.0 || ^5.0.0
     svelte-loader: "*"
   languageName: unknown
   linkType: soft
@@ -6650,11 +6866,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preview-api@workspace:^, @storybook/preview-api@workspace:deprecated/preview-api":
+"@storybook/preview-api@workspace:*, @storybook/preview-api@workspace:deprecated/preview-api":
   version: 0.0.0-use.local
   resolution: "@storybook/preview-api@workspace:deprecated/preview-api"
   peerDependencies:
-    storybook: "workspace:^"
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
   languageName: unknown
   linkType: soft
 
@@ -6662,7 +6878,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/preview@workspace:deprecated/preview"
   peerDependencies:
-    storybook: "workspace:^"
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
   languageName: unknown
   linkType: soft
 
@@ -6696,11 +6912,34 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@storybook/react-native-web-vite@workspace:frameworks/react-native-web-vite":
+  version: 0.0.0-use.local
+  resolution: "@storybook/react-native-web-vite@workspace:frameworks/react-native-web-vite"
+  dependencies:
+    "@bunchtogether/vite-plugin-flow": "npm:^1.0.2"
+    "@joshwooding/vite-plugin-react-docgen-typescript": "npm:0.4.2"
+    "@storybook/builder-vite": "workspace:*"
+    "@storybook/react": "workspace:*"
+    "@storybook/react-vite": "workspace:*"
+    "@types/node": "npm:^22.0.0"
+    "@vitejs/plugin-react": "npm:^4.3.2"
+    typescript: "npm:^5.3.2"
+    vite-tsconfig-paths: "npm:^5.1.4"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-native: ">=0.74.5"
+    react-native-web: ^0.19.12
+    storybook: "workspace:^"
+    vite: ^5.0.0 || ^6.0.0
+  languageName: unknown
+  linkType: soft
+
 "@storybook/react-vite@workspace:*, @storybook/react-vite@workspace:frameworks/react-vite":
   version: 0.0.0-use.local
   resolution: "@storybook/react-vite@workspace:frameworks/react-vite"
   dependencies:
-    "@joshwooding/vite-plugin-react-docgen-typescript": "npm:0.3.0"
+    "@joshwooding/vite-plugin-react-docgen-typescript": "npm:0.4.2"
     "@rollup/pluginutils": "npm:^5.0.2"
     "@storybook/builder-vite": "workspace:*"
     "@storybook/react": "workspace:*"
@@ -6713,10 +6952,14 @@ __metadata:
     typescript: "npm:^5.3.2"
     vite: "npm:^4.0.0"
   peerDependencies:
+    "@storybook/test": "workspace:*"
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     storybook: "workspace:^"
-    vite: ^4.0.0 || ^5.0.0
+    vite: ^4.0.0 || ^5.0.0 || ^6.0.0
+  peerDependenciesMeta:
+    "@storybook/test":
+      optional: true
   languageName: unknown
   linkType: soft
 
@@ -6743,34 +6986,32 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/react@workspace:renderers/react"
   dependencies:
-    "@storybook/components": "workspace:^"
+    "@storybook/components": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/manager-api": "workspace:^"
-    "@storybook/preview-api": "workspace:^"
+    "@storybook/manager-api": "workspace:*"
+    "@storybook/preview-api": "workspace:*"
     "@storybook/react-dom-shim": "workspace:*"
     "@storybook/test": "workspace:*"
-    "@storybook/theming": "workspace:^"
+    "@storybook/theming": "workspace:*"
     "@types/babel-plugin-react-docgen": "npm:^4"
     "@types/escodegen": "npm:^0.0.6"
     "@types/estree": "npm:^0.0.51"
     "@types/node": "npm:^22.0.0"
     "@types/semver": "npm:^7.3.4"
-    "@types/util-deprecate": "npm:^1.0.0"
     acorn: "npm:^7.4.1"
     acorn-jsx: "npm:^5.3.1"
     acorn-walk: "npm:^7.2.0"
     babel-plugin-react-docgen: "npm:^4.2.1"
+    es-toolkit: "npm:^1.22.0"
     escodegen: "npm:^2.1.0"
     expect-type: "npm:^0.15.0"
     html-tags: "npm:^3.1.0"
-    lodash: "npm:^4.17.21"
     prop-types: "npm:^15.7.2"
     react-element-to-jsx-string: "npm:^15.0.0"
     require-from-string: "npm:^2.0.2"
     semver: "npm:^7.3.7"
     ts-dedent: "npm:^2.0.0"
     type-fest: "npm:~2.19"
-    util-deprecate: "npm:^1.0.2"
   peerDependencies:
     "@storybook/test": "workspace:*"
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
@@ -6789,12 +7030,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/root@workspace:."
   dependencies:
-    "@chromatic-com/storybook": "npm:^1.6.1"
+    "@chromatic-com/storybook": "npm:^3.2.2"
     "@happy-dom/global-registrator": "npm:^14.12.0"
-    "@nx/eslint": "npm:18.0.6"
-    "@nx/vite": "npm:18.0.6"
-    "@nx/workspace": "npm:18.0.6"
-    "@playwright/test": "npm:1.46.0"
+    "@nx/eslint": "npm:20.2.2"
+    "@nx/vite": "npm:20.2.2"
+    "@nx/workspace": "npm:20.2.2"
+    "@playwright/test": "npm:1.48.1"
     "@storybook/addon-a11y": "workspace:*"
     "@storybook/addon-actions": "workspace:*"
     "@storybook/addon-backgrounds": "workspace:*"
@@ -6822,7 +7063,7 @@ __metadata:
     "@storybook/codemod": "workspace:*"
     "@storybook/core": "workspace:*"
     "@storybook/core-webpack": "workspace:*"
-    "@storybook/csf": "npm:0.1.11"
+    "@storybook/csf": "npm:0.1.12"
     "@storybook/csf-plugin": "workspace:*"
     "@storybook/ember": "workspace:*"
     "@storybook/eslint-config-storybook": "npm:^4.0.0"
@@ -6867,29 +7108,30 @@ __metadata:
     "@testing-library/react": "npm:^16.0.0"
     "@testing-library/user-event": "npm:^14.5.2"
     "@trivago/prettier-plugin-sort-imports": "npm:^4.3.0"
-    "@types/express": "npm:^4.17.21"
-    "@types/lodash": "npm:^4.14.167"
     "@types/mock-require": "npm:^2.0.3"
     "@types/node": "npm:^22.0.0"
     "@types/react": "npm:^18.0.37"
     "@types/react-dom": "npm:^18.0.11"
     "@types/semver": "npm:^7.3.4"
     "@types/serve-static": "npm:^1.13.8"
-    "@typescript-eslint/experimental-utils": "npm:^5.62.0"
-    "@typescript-eslint/parser": "npm:^6.18.1"
-    "@vitejs/plugin-react": "npm:^3.0.1"
+    "@typescript-eslint/eslint-plugin": "npm:7.18.0"
+    "@typescript-eslint/parser": "npm:7.18.0"
+    "@vitejs/plugin-react": "npm:^4.3.2"
     "@vitejs/plugin-vue": "npm:^4.4.0"
-    "@vitest/browser": "npm:^2.0.5"
-    "@vitest/coverage-istanbul": "npm:^2.0.5"
-    "@vitest/coverage-v8": "npm:^2.0.5"
+    "@vitest/browser": "npm:^2.1.3"
+    "@vitest/coverage-istanbul": "npm:^2.1.3"
+    "@vitest/coverage-v8": "npm:^2.1.3"
     create-storybook: "workspace:*"
     cross-env: "npm:^7.0.3"
     danger: "npm:^12.3.3"
-    esbuild: "npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0"
+    es-toolkit: "npm:^1.22.0"
+    esbuild: "npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0"
     esbuild-loader: "npm:^4.2.0"
     esbuild-plugin-alias: "npm:^0.2.1"
-    eslint: "npm:^8.56.0"
+    eslint: "npm:8.57.1"
     eslint-import-resolver-typescript: "npm:^3.6.1"
+    eslint-plugin-depend: "npm:^0.11.0"
+    eslint-plugin-import: "npm:^2.29.1"
     eslint-plugin-local-rules: "portal:../scripts/eslint-plugin-local-rules"
     eslint-plugin-playwright: "npm:^1.6.2"
     eslint-plugin-storybook: "npm:^0.8.0"
@@ -6899,9 +7141,8 @@ __metadata:
     http-server: "npm:^14.1.1"
     husky: "npm:^4.3.7"
     lint-staged: "npm:^13.2.2"
-    lodash: "npm:^4.17.21"
     mock-require: "npm:^3.0.3"
-    nx: "npm:18.0.6"
+    nx: "npm:20.2.2"
     prettier: "npm:^3.1.1"
     prettier-plugin-brace-style: "npm:^0.6.2"
     prettier-plugin-css-order: "npm:^2.1.2"
@@ -6915,13 +7156,13 @@ __metadata:
     serve-static: "npm:^1.14.1"
     slash: "npm:^5.0.0"
     storybook: "workspace:^"
-    svelte: "npm:^5.0.0-next.65"
+    svelte: "npm:^5.0.0-next.268"
     ts-dedent: "npm:^2.0.0"
-    typescript: "npm:^5.4.3"
+    typescript: "npm:5.4.3"
     util: "npm:^0.12.4"
     vite: "npm:^4.0.0"
     vite-plugin-inspect: "npm:^0.8.5"
-    vitest: "npm:^2.0.5"
+    vitest: "npm:^2.1.3"
     wait-on: "npm:^7.0.1"
   dependenciesMeta:
     ejs:
@@ -6946,7 +7187,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/router@workspace:deprecated/router"
   peerDependencies:
-    storybook: "workspace:^"
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
   languageName: unknown
   linkType: soft
 
@@ -6968,12 +7209,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/server@workspace:renderers/server"
   dependencies:
-    "@storybook/components": "workspace:^"
-    "@storybook/csf": "npm:^0.1.11"
+    "@storybook/components": "workspace:*"
+    "@storybook/csf": "npm:0.1.12"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/manager-api": "workspace:^"
-    "@storybook/preview-api": "workspace:^"
-    "@storybook/theming": "workspace:^"
+    "@storybook/manager-api": "workspace:*"
+    "@storybook/preview-api": "workspace:*"
+    "@storybook/theming": "workspace:*"
     ts-dedent: "npm:^2.0.0"
     typescript: "npm:^5.3.2"
     yaml: "npm:^2.3.1"
@@ -6986,9 +7227,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/source-loader@workspace:lib/source-loader"
   dependencies:
-    "@storybook/csf": "npm:^0.1.11"
+    "@storybook/csf": "npm:0.1.12"
+    es-toolkit: "npm:^1.22.0"
     estraverse: "npm:^5.2.0"
-    lodash: "npm:^4.17.21"
     prettier: "npm:^3.1.1"
     typescript: "npm:^5.3.2"
   peerDependencies:
@@ -7002,20 +7243,21 @@ __metadata:
   dependencies:
     "@storybook/builder-vite": "workspace:*"
     "@storybook/svelte": "workspace:*"
-    "@sveltejs/vite-plugin-svelte": "npm:^3.0.1"
+    "@sveltejs/vite-plugin-svelte": "npm:^4.0.0"
     "@types/node": "npm:^22.0.0"
     magic-string: "npm:^0.30.0"
-    svelte: "npm:^5.0.0-next.65"
+    svelte: "npm:^5.0.5"
     svelte-preprocess: "npm:^5.1.1"
+    svelte2tsx: "npm:^0.7.13"
     sveltedoc-parser: "npm:^4.2.1"
     ts-dedent: "npm:^2.2.0"
     typescript: "npm:^5.3.2"
     vite: "npm:^4.0.0"
   peerDependencies:
-    "@sveltejs/vite-plugin-svelte": ^2.0.0 || ^3.0.0
+    "@sveltejs/vite-plugin-svelte": ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0
     storybook: "workspace:^"
-    svelte: ^4.0.0 || ^5.0.0-next.65
-    vite: ^4.0.0 || ^5.0.0
+    svelte: ^4.0.0 || ^5.0.0
+    vite: ^4.0.0 || ^5.0.0 || ^6.0.0
   languageName: unknown
   linkType: soft
 
@@ -7026,12 +7268,12 @@ __metadata:
     "@storybook/builder-webpack5": "workspace:*"
     "@storybook/preset-svelte-webpack": "workspace:*"
     "@storybook/svelte": "workspace:*"
-    svelte: "npm:^4.0.0"
-    svelte-loader: "npm:^3.1.9"
+    svelte: "npm:^5.0.5"
+    svelte-loader: "npm:^3.2.4"
     typescript: "npm:^5.3.2"
   peerDependencies:
     storybook: "workspace:^"
-    svelte: ^4.0.0 || ^5.0.0-next.65
+    svelte: ^4.0.0 || ^5.0.0
     svelte-loader: "*"
   languageName: unknown
   linkType: soft
@@ -7040,23 +7282,23 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/svelte@workspace:renderers/svelte"
   dependencies:
-    "@storybook/components": "workspace:^"
+    "@storybook/components": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/manager-api": "workspace:^"
-    "@storybook/preview-api": "workspace:^"
-    "@storybook/theming": "workspace:^"
-    "@sveltejs/vite-plugin-svelte": "npm:^3.0.2"
-    "@testing-library/svelte": "patch:@testing-library/svelte@npm%3A4.1.0#~/.yarn/patches/@testing-library-svelte-npm-4.1.0-34b7037bc0.patch"
+    "@storybook/manager-api": "workspace:*"
+    "@storybook/preview-api": "workspace:*"
+    "@storybook/theming": "workspace:*"
+    "@sveltejs/vite-plugin-svelte": "npm:^4.0.0"
+    "@testing-library/svelte": "npm:^5.2.4"
     expect-type: "npm:^0.15.0"
-    svelte: "npm:^5.0.0-next.65"
-    svelte-check: "npm:^3.6.4"
+    svelte: "npm:^5.0.5"
+    svelte-check: "npm:^4.0.5"
     sveltedoc-parser: "npm:^4.2.1"
     ts-dedent: "npm:^2.0.0"
     type-fest: "npm:~2.19"
     typescript: "npm:^5.3.2"
   peerDependencies:
     storybook: "workspace:^"
-    svelte: ^4.0.0 || ^5.0.0-next.65
+    svelte: ^4.0.0 || ^5.0.0
   languageName: unknown
   linkType: soft
 
@@ -7073,8 +7315,8 @@ __metadata:
     vite: "npm:^4.0.0"
   peerDependencies:
     storybook: "workspace:^"
-    svelte: ^4.0.0 || ^5.0.0-next.65
-    vite: ^4.0.0 || ^5.0.0
+    svelte: ^4.0.0 || ^5.0.0
+    vite: ^4.0.0 || ^5.0.0 || ^6.0.0
   languageName: unknown
   linkType: soft
 
@@ -7082,7 +7324,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/telemetry@workspace:deprecated/telemetry"
   peerDependencies:
-    storybook: "workspace:^"
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
   languageName: unknown
   linkType: soft
 
@@ -7090,7 +7332,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/test@workspace:lib/test"
   dependencies:
-    "@storybook/csf": "npm:^0.1.11"
+    "@storybook/csf": "npm:0.1.12"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/instrumenter": "workspace:*"
     "@testing-library/dom": "npm:10.4.0"
@@ -7103,7 +7345,6 @@ __metadata:
     ts-dedent: "npm:^2.2.0"
     type-fest: "npm:~2.19"
     typescript: "npm:^5.3.2"
-    util: "npm:^0.12.4"
   peerDependencies:
     storybook: "workspace:^"
   languageName: unknown
@@ -7120,11 +7361,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/theming@workspace:*, @storybook/theming@workspace:^, @storybook/theming@workspace:deprecated/theming":
+"@storybook/theming@workspace:*, @storybook/theming@workspace:deprecated/theming":
   version: 0.0.0-use.local
   resolution: "@storybook/theming@workspace:deprecated/theming"
   peerDependencies:
-    storybook: "workspace:^"
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
   languageName: unknown
   linkType: soft
 
@@ -7132,7 +7373,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/types@workspace:deprecated/types"
   peerDependencies:
-    storybook: "workspace:^"
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
   languageName: unknown
   linkType: soft
 
@@ -7152,7 +7393,7 @@ __metadata:
     vue-docgen-api: "npm:^4.75.1"
   peerDependencies:
     storybook: "workspace:^"
-    vite: ^4.0.0 || ^5.0.0
+    vite: ^4.0.0 || ^5.0.0 || ^6.0.0
   languageName: unknown
   linkType: soft
 
@@ -7179,16 +7420,15 @@ __metadata:
   resolution: "@storybook/vue3@workspace:renderers/vue3"
   dependencies:
     "@digitak/esrun": "npm:^3.2.2"
-    "@storybook/components": "workspace:^"
+    "@storybook/components": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/manager-api": "workspace:^"
-    "@storybook/preview-api": "workspace:^"
-    "@storybook/theming": "workspace:^"
+    "@storybook/manager-api": "workspace:*"
+    "@storybook/preview-api": "workspace:*"
+    "@storybook/theming": "workspace:*"
     "@testing-library/vue": "npm:^8.0.0"
     "@types/prettier": "npm:^3.0.0"
     "@vitejs/plugin-vue": "npm:^4.4.0"
     "@vue/compiler-core": "npm:^3.0.0"
-    lodash: "npm:^4.17.21"
     ts-dedent: "npm:^2.0.0"
     type-fest: "npm:~2.19"
     typescript: "npm:^5.3.2"
@@ -7234,11 +7474,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/web-components@workspace:renderers/web-components"
   dependencies:
-    "@storybook/components": "workspace:^"
+    "@storybook/components": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/manager-api": "workspace:^"
-    "@storybook/preview-api": "workspace:^"
-    "@storybook/theming": "workspace:^"
+    "@storybook/manager-api": "workspace:*"
+    "@storybook/preview-api": "workspace:*"
+    "@storybook/theming": "workspace:*"
     "@types/cross-spawn": "npm:^6.0.2"
     "@types/node": "npm:^22.0.0"
     cross-spawn: "npm:^7.0.3"
@@ -7253,51 +7493,49 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@sveltejs/vite-plugin-svelte-inspector@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "@sveltejs/vite-plugin-svelte-inspector@npm:2.0.0"
+"@sveltejs/vite-plugin-svelte-inspector@npm:^3.0.0-next.0||^3.0.0":
+  version: 3.0.0
+  resolution: "@sveltejs/vite-plugin-svelte-inspector@npm:3.0.0"
   dependencies:
-    debug: "npm:^4.3.4"
+    debug: "npm:^4.3.7"
   peerDependencies:
-    "@sveltejs/vite-plugin-svelte": ^3.0.0
-    svelte: ^4.0.0 || ^5.0.0-next.0
+    "@sveltejs/vite-plugin-svelte": ^4.0.0-next.0||^4.0.0
+    svelte: ^5.0.0-next.96 || ^5.0.0
     vite: ^5.0.0
-  checksum: 10c0/7c3b8159b819485a54de726591bf89d53e641d6b3961ea2100b1908c6e68e08d887a07890d16daee9e63b4781c629469ef72d504351bc0d125b3720faf420920
+  checksum: 10c0/f400758f698394a8e0c6641454ffd85d5c61f8bf50626fddaa688172f3b910a4840882380782e844e54464a7491fcc61bf0e6b1b8f898cdfe3696bcf0e774159
   languageName: node
   linkType: hard
 
-"@sveltejs/vite-plugin-svelte@npm:^3.0.1, @sveltejs/vite-plugin-svelte@npm:^3.0.2":
-  version: 3.0.2
-  resolution: "@sveltejs/vite-plugin-svelte@npm:3.0.2"
+"@sveltejs/vite-plugin-svelte@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "@sveltejs/vite-plugin-svelte@npm:4.0.0"
   dependencies:
-    "@sveltejs/vite-plugin-svelte-inspector": "npm:^2.0.0"
-    debug: "npm:^4.3.4"
+    "@sveltejs/vite-plugin-svelte-inspector": "npm:^3.0.0-next.0||^3.0.0"
+    debug: "npm:^4.3.7"
     deepmerge: "npm:^4.3.1"
     kleur: "npm:^4.1.5"
-    magic-string: "npm:^0.30.5"
-    svelte-hmr: "npm:^0.15.3"
-    vitefu: "npm:^0.2.5"
+    magic-string: "npm:^0.30.12"
+    vitefu: "npm:^1.0.3"
   peerDependencies:
-    svelte: ^4.0.0 || ^5.0.0-next.0
+    svelte: ^5.0.0-next.96 || ^5.0.0
     vite: ^5.0.0
-  checksum: 10c0/7150877f61b65a51d55916fccacb7851859b0aab9c7e4f591c98b6775a7e55f5410cc854add4c427f99978f115a92ac75f116a813b67814cc7801daac1b78439
+  checksum: 10c0/6c8ea6bd3ccd567cb8e9e9ac75782f904fa8a5c238e5b1c748cb7d4b4213390f70ca9a41f0be0a49dc373bc648fed6cfa4eb1882793ece1e1cfec646e847b1b1
   languageName: node
   linkType: hard
 
-"@swc/counter@npm:^0.1.3":
+"@swc/counter@npm:0.1.3":
   version: 0.1.3
   resolution: "@swc/counter@npm:0.1.3"
   checksum: 10c0/8424f60f6bf8694cfd2a9bca45845bce29f26105cda8cf19cdb9fd3e78dc6338699e4db77a89ae449260bafa1cc6bec307e81e7fb96dbf7dcfce0eea55151356
   languageName: node
   linkType: hard
 
-"@swc/helpers@npm:0.5.5":
-  version: 0.5.5
-  resolution: "@swc/helpers@npm:0.5.5"
+"@swc/helpers@npm:0.5.13":
+  version: 0.5.13
+  resolution: "@swc/helpers@npm:0.5.13"
   dependencies:
-    "@swc/counter": "npm:^0.1.3"
     tslib: "npm:^2.4.0"
-  checksum: 10c0/21a9b9cfe7e00865f9c9f3eb4c1cc5b397143464f7abee76a2c5366e591e06b0155b5aac93fe8269ef8d548df253f6fd931e9ddfc0fd12efd405f90f45506e7d
+  checksum: 10c0/b9df578401fc62405da9a6c31e79e447a2fd90f68b25b1daee12f2caf2821991bb89106f0397bc1acb4c4d84a8ce079d04b60b65f534496952e3bf8c9a52f40f
   languageName: node
   linkType: hard
 
@@ -7329,7 +7567,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/dom@npm:10.4.0, @testing-library/dom@npm:^10.4.0":
+"@testing-library/dom@npm:10.4.0, @testing-library/dom@npm:^10.0.0, @testing-library/dom@npm:^10.4.0":
   version: 10.4.0
   resolution: "@testing-library/dom@npm:10.4.0"
   dependencies:
@@ -7345,7 +7583,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/dom@npm:^9.0.0, @testing-library/dom@npm:^9.3.1, @testing-library/dom@npm:^9.3.3":
+"@testing-library/dom@npm:^9.0.0, @testing-library/dom@npm:^9.3.3":
   version: 9.3.4
   resolution: "@testing-library/dom@npm:9.3.4"
   dependencies:
@@ -7410,25 +7648,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/svelte@npm:4.1.0":
-  version: 4.1.0
-  resolution: "@testing-library/svelte@npm:4.1.0"
+"@testing-library/svelte@npm:^5.2.4":
+  version: 5.2.4
+  resolution: "@testing-library/svelte@npm:5.2.4"
   dependencies:
-    "@testing-library/dom": "npm:^9.3.1"
+    "@testing-library/dom": "npm:^10.0.0"
   peerDependencies:
-    svelte: ^3 || ^4
-  checksum: 10c0/4335d8be01bd1e6475062be218577fa1d1b24e9dc97c33db523c5af6b044b97625f65a58bb5f73225064c5a2bf9ae9696948a2bcd2d82c1c25423014d635dce2
-  languageName: node
-  linkType: hard
-
-"@testing-library/svelte@patch:@testing-library/svelte@npm%3A4.1.0#~/.yarn/patches/@testing-library-svelte-npm-4.1.0-34b7037bc0.patch":
-  version: 4.1.0
-  resolution: "@testing-library/svelte@patch:@testing-library/svelte@npm%3A4.1.0#~/.yarn/patches/@testing-library-svelte-npm-4.1.0-34b7037bc0.patch::version=4.1.0&hash=490043"
-  dependencies:
-    "@testing-library/dom": "npm:^9.3.1"
-  peerDependencies:
-    svelte: ^3 || ^4
-  checksum: 10c0/95586fa05bb536fb538d01731a705121d71797a77ab7a8e1f255909e50dfe4fa09f3a6678a60b8a075332dd45940c0fa37d002d2f6c201400295fa3840c88821
+    svelte: ^3 || ^4 || ^5 || ^5.0.0-next.0
+    vite: "*"
+    vitest: "*"
+  peerDependenciesMeta:
+    vite:
+      optional: true
+    vitest:
+      optional: true
+  checksum: 10c0/c0fcefa208248187e6a0d8fb9d2d42e96eb9382119357099a0ff730db9f056e39ad306ccf8e25fac273228b52d2d02f1c5e5aa3f7782f3a86bb2f2b6ee897752
   languageName: node
   linkType: hard
 
@@ -7527,6 +7761,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tybys/wasm-util@npm:^0.9.0":
+  version: 0.9.0
+  resolution: "@tybys/wasm-util@npm:0.9.0"
+  dependencies:
+    tslib: "npm:^2.4.0"
+  checksum: 10c0/f9fde5c554455019f33af6c8215f1a1435028803dc2a2825b077d812bed4209a1a64444a4ca0ce2ea7e1175c8d88e2f9173a36a33c199e8a5c671aa31de8242d
+  languageName: node
+  linkType: hard
+
 "@types/acorn@npm:^4.0.0":
   version: 4.0.6
   resolution: "@types/acorn@npm:4.0.6"
@@ -7550,7 +7793,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/babel__core@npm:*, @types/babel__core@npm:^7, @types/babel__core@npm:^7.18.0":
+"@types/babel__core@npm:*, @types/babel__core@npm:^7, @types/babel__core@npm:^7.18.0, @types/babel__core@npm:^7.20.5":
   version: 7.20.5
   resolution: "@types/babel__core@npm:7.20.5"
   dependencies:
@@ -7649,15 +7892,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/compression@npm:^1.7.0":
-  version: 1.7.5
-  resolution: "@types/compression@npm:1.7.5"
-  dependencies:
-    "@types/express": "npm:*"
-  checksum: 10c0/3818f3d10cede38a835b40b80c341eae162aef1691f2e8f81178a77dbc109f04234cf760b6066eaa06ecbb1da143433c00db2fd9999198b76cd5a193e1d09675
-  languageName: node
-  linkType: hard
-
 "@types/concat-stream@npm:^2.0.0":
   version: 2.0.3
   resolution: "@types/concat-stream@npm:2.0.3"
@@ -7808,7 +8042,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/express@npm:*, @types/express@npm:^4.17.13, @types/express@npm:^4.17.21":
+"@types/express@npm:*, @types/express@npm:^4.17.13":
   version: 4.17.21
   resolution: "@types/express@npm:4.17.21"
   dependencies:
@@ -7845,16 +8079,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/fs-extra@npm:11.0.1":
-  version: 11.0.1
-  resolution: "@types/fs-extra@npm:11.0.1"
-  dependencies:
-    "@types/jsonfile": "npm:*"
-    "@types/node": "npm:*"
-  checksum: 10c0/a65f1fae47849fe1a17441dcabc9400390303405972ff3cbb3578746cea8916b23d5e7652bf57a87767f75a9b2f37caac499b78b5230ae08fef0ba58b34c3a85
-  languageName: node
-  linkType: hard
-
 "@types/fs-extra@npm:^5.0.5":
   version: 5.1.0
   resolution: "@types/fs-extra@npm:5.1.0"
@@ -7883,7 +8107,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/glob@npm:^7.1.1, @types/glob@npm:^7.1.3":
+"@types/glob@npm:^7.1.1":
   version: 7.2.0
   resolution: "@types/glob@npm:7.2.0"
   dependencies:
@@ -7951,6 +8175,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/istanbul-lib-coverage@npm:*":
+  version: 2.0.6
+  resolution: "@types/istanbul-lib-coverage@npm:2.0.6"
+  checksum: 10c0/3948088654f3eeb45363f1db158354fb013b362dba2a5c2c18c559484d5eb9f6fd85b23d66c0a7c2fcfab7308d0a585b14dadaca6cc8bf89ebfdc7f8f5102fb7
+  languageName: node
+  linkType: hard
+
 "@types/istanbul-lib-coverage@npm:^2.0.1":
   version: 2.0.4
   resolution: "@types/istanbul-lib-coverage@npm:2.0.4"
@@ -7958,6 +8189,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/istanbul-lib-report@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "@types/istanbul-lib-report@npm:3.0.3"
+  dependencies:
+    "@types/istanbul-lib-coverage": "npm:*"
+  checksum: 10c0/247e477bbc1a77248f3c6de5dadaae85ff86ac2d76c5fc6ab1776f54512a745ff2a5f791d22b942e3990ddbd40f3ef5289317c4fca5741bedfaa4f01df89051c
+  languageName: node
+  linkType: hard
+
 "@types/js-yaml@npm:^4.0.5":
   version: 4.0.9
   resolution: "@types/js-yaml@npm:4.0.9"
@@ -7989,15 +8229,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/jsonfile@npm:*":
-  version: 6.1.2
-  resolution: "@types/jsonfile@npm:6.1.2"
-  dependencies:
-    "@types/node": "npm:*"
-  checksum: 10c0/c2943f9bfa7867b33fb362b88a932efdc00e9e5f2762b6ef912617cb0a3e3221a98920f8976a4cf817aa576e03d28a25391236e9644e2ebe648081b08df62ef5
-  languageName: node
-  linkType: hard
-
 "@types/loader-utils@npm:^2.0.5":
   version: 2.0.6
   resolution: "@types/loader-utils@npm:2.0.6"
@@ -8008,13 +8239,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/lodash@npm:^4.14.167":
-  version: 4.14.202
-  resolution: "@types/lodash@npm:4.14.202"
-  checksum: 10c0/6064d43c8f454170841bd67c8266cc9069d9e570a72ca63f06bceb484cb4a3ee60c9c1f305c1b9e3a87826049fd41124b8ef265c4dd08b00f6766609c7fe9973
-  languageName: node
-  linkType: hard
-
 "@types/mdast@npm:^3.0.0":
   version: 3.0.15
   resolution: "@types/mdast@npm:3.0.15"
@@ -8165,22 +8389,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/qs@npm:*, @types/qs@npm:^6":
+"@types/qs@npm:*":
   version: 6.9.10
   resolution: "@types/qs@npm:6.9.10"
   checksum: 10c0/6be12e5f062d1b41eb037d59bf9cb65bc9410cedd5e6da832dfd7c8e2b3f4c91e81c9b90b51811140770e5052c6c4e8361181bd9437ddcd4515dc128b7c00353
   languageName: node
   linkType: hard
 
-"@types/ramda@npm:0.29.3":
-  version: 0.29.3
-  resolution: "@types/ramda@npm:0.29.3"
-  dependencies:
-    types-ramda: "npm:^0.29.4"
-  checksum: 10c0/9c62a4600f5df5e65a01ffe4a470500c98f7c0d093fde47e0d4257675f1ec50effe4696cb004a6b53227948db67ea26a2345dbc91819ecc868105c0f64cecd1e
-  languageName: node
-  linkType: hard
-
 "@types/range-parser@npm:*":
   version: 1.2.5
   resolution: "@types/range-parser@npm:1.2.5"
@@ -8481,6 +8696,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/eslint-plugin@npm:7.18.0":
+  version: 7.18.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:7.18.0"
+  dependencies:
+    "@eslint-community/regexpp": "npm:^4.10.0"
+    "@typescript-eslint/scope-manager": "npm:7.18.0"
+    "@typescript-eslint/type-utils": "npm:7.18.0"
+    "@typescript-eslint/utils": "npm:7.18.0"
+    "@typescript-eslint/visitor-keys": "npm:7.18.0"
+    graphemer: "npm:^1.4.0"
+    ignore: "npm:^5.3.1"
+    natural-compare: "npm:^1.4.0"
+    ts-api-utils: "npm:^1.3.0"
+  peerDependencies:
+    "@typescript-eslint/parser": ^7.0.0
+    eslint: ^8.56.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10c0/2b37948fa1b0dab77138909dabef242a4d49ab93e4019d4ef930626f0a7d96b03e696cd027fa0087881c20e73be7be77c942606b4a76fa599e6b37f6985304c3
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/eslint-plugin@npm:^6.18.1":
   version: 6.21.0
   resolution: "@typescript-eslint/eslint-plugin@npm:6.21.0"
@@ -8506,14 +8744,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/experimental-utils@npm:^5.62.0":
-  version: 5.62.0
-  resolution: "@typescript-eslint/experimental-utils@npm:5.62.0"
+"@typescript-eslint/parser@npm:7.18.0":
+  version: 7.18.0
+  resolution: "@typescript-eslint/parser@npm:7.18.0"
   dependencies:
-    "@typescript-eslint/utils": "npm:5.62.0"
+    "@typescript-eslint/scope-manager": "npm:7.18.0"
+    "@typescript-eslint/types": "npm:7.18.0"
+    "@typescript-eslint/typescript-estree": "npm:7.18.0"
+    "@typescript-eslint/visitor-keys": "npm:7.18.0"
+    debug: "npm:^4.3.4"
   peerDependencies:
-    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  checksum: 10c0/f7037977e00849cd8c03677a88b0659a4f0e0b1e0151aebb47c49c92b8e57408578142df598eac08b364623d926343c724f42494f87662e437b1c89f0b2e815b
+    eslint: ^8.56.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10c0/370e73fca4278091bc1b657f85e7d74cd52b24257ea20c927a8e17546107ce04fbf313fec99aed0cc2a145ddbae1d3b12e9cc2c1320117636dc1281bcfd08059
   languageName: node
   linkType: hard
 
@@ -8565,6 +8810,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/scope-manager@npm:7.18.0":
+  version: 7.18.0
+  resolution: "@typescript-eslint/scope-manager@npm:7.18.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:7.18.0"
+    "@typescript-eslint/visitor-keys": "npm:7.18.0"
+  checksum: 10c0/038cd58c2271de146b3a594afe2c99290034033326d57ff1f902976022c8b0138ffd3cb893ae439ae41003b5e4bcc00cabf6b244ce40e8668f9412cc96d97b8e
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/type-utils@npm:6.21.0":
   version: 6.21.0
   resolution: "@typescript-eslint/type-utils@npm:6.21.0"
@@ -8582,6 +8837,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/type-utils@npm:7.18.0":
+  version: 7.18.0
+  resolution: "@typescript-eslint/type-utils@npm:7.18.0"
+  dependencies:
+    "@typescript-eslint/typescript-estree": "npm:7.18.0"
+    "@typescript-eslint/utils": "npm:7.18.0"
+    debug: "npm:^4.3.4"
+    ts-api-utils: "npm:^1.3.0"
+  peerDependencies:
+    eslint: ^8.56.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10c0/ad92a38007be620f3f7036f10e234abdc2fdc518787b5a7227e55fd12896dacf56e8b34578723fbf9bea8128df2510ba8eb6739439a3879eda9519476d5783fd
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/types@npm:5.62.0":
   version: 5.62.0
   resolution: "@typescript-eslint/types@npm:5.62.0"
@@ -8603,6 +8875,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/types@npm:7.18.0":
+  version: 7.18.0
+  resolution: "@typescript-eslint/types@npm:7.18.0"
+  checksum: 10c0/eb7371ac55ca77db8e59ba0310b41a74523f17e06f485a0ef819491bc3dd8909bb930120ff7d30aaf54e888167e0005aa1337011f3663dc90fb19203ce478054
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/typescript-estree@npm:5.62.0":
   version: 5.62.0
   resolution: "@typescript-eslint/typescript-estree@npm:5.62.0"
@@ -8659,21 +8938,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:5.62.0, @typescript-eslint/utils@npm:^5.62.0":
-  version: 5.62.0
-  resolution: "@typescript-eslint/utils@npm:5.62.0"
+"@typescript-eslint/typescript-estree@npm:7.18.0":
+  version: 7.18.0
+  resolution: "@typescript-eslint/typescript-estree@npm:7.18.0"
   dependencies:
-    "@eslint-community/eslint-utils": "npm:^4.2.0"
-    "@types/json-schema": "npm:^7.0.9"
-    "@types/semver": "npm:^7.3.12"
-    "@typescript-eslint/scope-manager": "npm:5.62.0"
-    "@typescript-eslint/types": "npm:5.62.0"
-    "@typescript-eslint/typescript-estree": "npm:5.62.0"
-    eslint-scope: "npm:^5.1.1"
-    semver: "npm:^7.3.7"
-  peerDependencies:
-    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  checksum: 10c0/f09b7d9952e4a205eb1ced31d7684dd55cee40bf8c2d78e923aa8a255318d97279825733902742c09d8690f37a50243f4c4d383ab16bd7aefaf9c4b438f785e1
+    "@typescript-eslint/types": "npm:7.18.0"
+    "@typescript-eslint/visitor-keys": "npm:7.18.0"
+    debug: "npm:^4.3.4"
+    globby: "npm:^11.1.0"
+    is-glob: "npm:^4.0.3"
+    minimatch: "npm:^9.0.4"
+    semver: "npm:^7.6.0"
+    ts-api-utils: "npm:^1.3.0"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10c0/0c7f109a2e460ec8a1524339479cf78ff17814d23c83aa5112c77fb345e87b3642616291908dcddea1e671da63686403dfb712e4a4435104f92abdfddf9aba81
   languageName: node
   linkType: hard
 
@@ -8694,6 +8974,38 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/utils@npm:7.18.0":
+  version: 7.18.0
+  resolution: "@typescript-eslint/utils@npm:7.18.0"
+  dependencies:
+    "@eslint-community/eslint-utils": "npm:^4.4.0"
+    "@typescript-eslint/scope-manager": "npm:7.18.0"
+    "@typescript-eslint/types": "npm:7.18.0"
+    "@typescript-eslint/typescript-estree": "npm:7.18.0"
+  peerDependencies:
+    eslint: ^8.56.0
+  checksum: 10c0/a25a6d50eb45c514469a01ff01f215115a4725fb18401055a847ddf20d1b681409c4027f349033a95c4ff7138d28c3b0a70253dfe8262eb732df4b87c547bd1e
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/utils@npm:^5.62.0":
+  version: 5.62.0
+  resolution: "@typescript-eslint/utils@npm:5.62.0"
+  dependencies:
+    "@eslint-community/eslint-utils": "npm:^4.2.0"
+    "@types/json-schema": "npm:^7.0.9"
+    "@types/semver": "npm:^7.3.12"
+    "@typescript-eslint/scope-manager": "npm:5.62.0"
+    "@typescript-eslint/types": "npm:5.62.0"
+    "@typescript-eslint/typescript-estree": "npm:5.62.0"
+    eslint-scope: "npm:^5.1.1"
+    semver: "npm:^7.3.7"
+  peerDependencies:
+    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+  checksum: 10c0/f09b7d9952e4a205eb1ced31d7684dd55cee40bf8c2d78e923aa8a255318d97279825733902742c09d8690f37a50243f4c4d383ab16bd7aefaf9c4b438f785e1
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/visitor-keys@npm:5.62.0":
   version: 5.62.0
   resolution: "@typescript-eslint/visitor-keys@npm:5.62.0"
@@ -8724,6 +9036,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typescript-eslint/visitor-keys@npm:7.18.0":
+  version: 7.18.0
+  resolution: "@typescript-eslint/visitor-keys@npm:7.18.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:7.18.0"
+    eslint-visitor-keys: "npm:^3.4.3"
+  checksum: 10c0/538b645f8ff1d9debf264865c69a317074eaff0255e63d7407046176b0f6a6beba34a6c51d511f12444bae12a98c69891eb6f403c9f54c6c2e2849d1c1cb73c0
+  languageName: node
+  linkType: hard
+
 "@ungap/structured-clone@npm:^1.0.0, @ungap/structured-clone@npm:^1.2.0":
   version: 1.2.0
   resolution: "@ungap/structured-clone@npm:1.2.0"
@@ -8740,18 +9062,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitejs/plugin-react@npm:^3.0.1":
-  version: 3.1.0
-  resolution: "@vitejs/plugin-react@npm:3.1.0"
+"@vitejs/plugin-react@npm:^4.3.2":
+  version: 4.3.3
+  resolution: "@vitejs/plugin-react@npm:4.3.3"
   dependencies:
-    "@babel/core": "npm:^7.20.12"
-    "@babel/plugin-transform-react-jsx-self": "npm:^7.18.6"
-    "@babel/plugin-transform-react-jsx-source": "npm:^7.19.6"
-    magic-string: "npm:^0.27.0"
-    react-refresh: "npm:^0.14.0"
+    "@babel/core": "npm:^7.25.2"
+    "@babel/plugin-transform-react-jsx-self": "npm:^7.24.7"
+    "@babel/plugin-transform-react-jsx-source": "npm:^7.24.7"
+    "@types/babel__core": "npm:^7.20.5"
+    react-refresh: "npm:^0.14.2"
   peerDependencies:
-    vite: ^4.1.0-beta.0
-  checksum: 10c0/259a92a303cd736240dc0d3282d1261339e7bbcf51c5b326868c910b35d4bd22a360334b2dafa5bfc7f3e935f2cd0fdc7ccb6ec6b519b81017c4c4812cd05290
+    vite: ^4.2.0 || ^5.0.0
+  checksum: 10c0/b370c25fb47bb96f0cc51f3aadbbcfce54e40f95a4de67cf932e5ec526f139648da703725c6ea2c71a1b525eb3dd6e3e8ff877da143627cd2575de5ec4f00aa3
   languageName: node
   linkType: hard
 
@@ -8765,20 +9087,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitest/browser@npm:^2.0.0, @vitest/browser@npm:^2.0.5":
-  version: 2.0.5
-  resolution: "@vitest/browser@npm:2.0.5"
+"@vitest/browser@npm:^2.1.3":
+  version: 2.1.3
+  resolution: "@vitest/browser@npm:2.1.3"
   dependencies:
     "@testing-library/dom": "npm:^10.4.0"
     "@testing-library/user-event": "npm:^14.5.2"
-    "@vitest/utils": "npm:2.0.5"
-    magic-string: "npm:^0.30.10"
-    msw: "npm:^2.3.2"
+    "@vitest/mocker": "npm:2.1.3"
+    "@vitest/utils": "npm:2.1.3"
+    magic-string: "npm:^0.30.11"
+    msw: "npm:^2.3.5"
     sirv: "npm:^2.0.4"
+    tinyrainbow: "npm:^1.2.0"
     ws: "npm:^8.18.0"
   peerDependencies:
     playwright: "*"
-    vitest: 2.0.5
+    vitest: 2.1.3
     webdriverio: "*"
   peerDependenciesMeta:
     playwright:
@@ -8787,16 +9111,16 @@ __metadata:
       optional: true
     webdriverio:
       optional: true
-  checksum: 10c0/a2b0e6ddb16f679c72c79c8093164a27683f7658a9a05882f0d00f90923071f16e1176211d1851539d49d5011199da5f926410c251e4b4f06828355d2ca30c92
+  checksum: 10c0/428a8d62ffcc2d637363fc7eb986d6beaeda7681b032d785f2bc475f8d105a14c674610e22a0a0c74e4ee10774b3709b11bc359e0458c6867c3d4acdc3f190a6
   languageName: node
   linkType: hard
 
-"@vitest/coverage-istanbul@npm:^2.0.5":
-  version: 2.0.5
-  resolution: "@vitest/coverage-istanbul@npm:2.0.5"
+"@vitest/coverage-istanbul@npm:^2.1.3":
+  version: 2.1.3
+  resolution: "@vitest/coverage-istanbul@npm:2.1.3"
   dependencies:
     "@istanbuljs/schema": "npm:^0.1.3"
-    debug: "npm:^4.3.5"
+    debug: "npm:^4.3.6"
     istanbul-lib-coverage: "npm:^3.2.2"
     istanbul-lib-instrument: "npm:^6.0.3"
     istanbul-lib-report: "npm:^3.0.1"
@@ -8806,30 +9130,34 @@ __metadata:
     test-exclude: "npm:^7.0.1"
     tinyrainbow: "npm:^1.2.0"
   peerDependencies:
-    vitest: 2.0.5
-  checksum: 10c0/f19744e848f06f2ce3a6364caa3ffe701d571ff89c8de31ad753c2d48d46e24eab8d8670548997839c77ec41ebe69011b92df74ef196c070964fde9eaef1b1eb
+    vitest: 2.1.3
+  checksum: 10c0/6b21eb219f45dc0f3bfb35049280658687b6b2f4ba5e17dc2c7e2c221f5d37e60c6962c5cfd77bd5f2848bb56debd26f82e5684b293f5775a8a416a0173f1803
   languageName: node
   linkType: hard
 
-"@vitest/coverage-v8@npm:^2.0.5":
-  version: 2.0.5
-  resolution: "@vitest/coverage-v8@npm:2.0.5"
+"@vitest/coverage-v8@npm:^2.1.3":
+  version: 2.1.3
+  resolution: "@vitest/coverage-v8@npm:2.1.3"
   dependencies:
     "@ampproject/remapping": "npm:^2.3.0"
     "@bcoe/v8-coverage": "npm:^0.2.3"
-    debug: "npm:^4.3.5"
+    debug: "npm:^4.3.6"
     istanbul-lib-coverage: "npm:^3.2.2"
     istanbul-lib-report: "npm:^3.0.1"
     istanbul-lib-source-maps: "npm:^5.0.6"
     istanbul-reports: "npm:^3.1.7"
-    magic-string: "npm:^0.30.10"
+    magic-string: "npm:^0.30.11"
     magicast: "npm:^0.3.4"
     std-env: "npm:^3.7.0"
     test-exclude: "npm:^7.0.1"
     tinyrainbow: "npm:^1.2.0"
   peerDependencies:
-    vitest: 2.0.5
-  checksum: 10c0/a95eef744d2a541f5d9d0287243cbcb596802c04e0250404947e36a669c477abe86607afb8d8ddb3d31bf12633b3ffa3d9a313e489e4ab7998b3c1620ad60e00
+    "@vitest/browser": 2.1.3
+    vitest: 2.1.3
+  peerDependenciesMeta:
+    "@vitest/browser":
+      optional: true
+  checksum: 10c0/5fdff9e9dd8b8d2030c00a5273ba2b27441c0cb45d007b6671504745dac6d095c160a01433789e7ed1ca6cd234246f883c1d52c02cfb62f8ae81dda17dd56bc6
   languageName: node
   linkType: hard
 
@@ -8845,6 +9173,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vitest/expect@npm:2.1.3":
+  version: 2.1.3
+  resolution: "@vitest/expect@npm:2.1.3"
+  dependencies:
+    "@vitest/spy": "npm:2.1.3"
+    "@vitest/utils": "npm:2.1.3"
+    chai: "npm:^5.1.1"
+    tinyrainbow: "npm:^1.2.0"
+  checksum: 10c0/0837adcbb938feebcc083664afc5c4d12e42f1f2442b6f1bedc6b5650a8ff2448b1f10713b45afb099c839fb5cf766c971736267fa9b0fe2ac87f3e2d7f782c2
+  languageName: node
+  linkType: hard
+
 "@vitest/expect@patch:@vitest/expect@npm%3A2.0.5#~/.yarn/patches/@vitest-expect-npm-2.0.5-8933466cce.patch":
   version: 2.0.5
   resolution: "@vitest/expect@patch:@vitest/expect@npm%3A2.0.5#~/.yarn/patches/@vitest-expect-npm-2.0.5-8933466cce.patch::version=2.0.5&hash=368591"
@@ -8857,7 +9197,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitest/pretty-format@npm:2.0.5, @vitest/pretty-format@npm:^2.0.5":
+"@vitest/mocker@npm:2.1.3":
+  version: 2.1.3
+  resolution: "@vitest/mocker@npm:2.1.3"
+  dependencies:
+    "@vitest/spy": "npm:2.1.3"
+    estree-walker: "npm:^3.0.3"
+    magic-string: "npm:^0.30.11"
+  peerDependencies:
+    "@vitest/spy": 2.1.3
+    msw: ^2.3.5
+    vite: ^5.0.0
+  peerDependenciesMeta:
+    msw:
+      optional: true
+    vite:
+      optional: true
+  checksum: 10c0/03c80628d092244f21a0ba9041665fc75f987d0d11fab1ae0b7027ec21e503f65057e8c24b936602c5f852d83fbb183da13d05dba117c99785b41b3dafd105ce
+  languageName: node
+  linkType: hard
+
+"@vitest/pretty-format@npm:2.0.5":
   version: 2.0.5
   resolution: "@vitest/pretty-format@npm:2.0.5"
   dependencies:
@@ -8866,24 +9226,33 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitest/runner@npm:2.0.5":
-  version: 2.0.5
-  resolution: "@vitest/runner@npm:2.0.5"
+"@vitest/pretty-format@npm:2.1.3, @vitest/pretty-format@npm:^2.1.3":
+  version: 2.1.3
+  resolution: "@vitest/pretty-format@npm:2.1.3"
   dependencies:
-    "@vitest/utils": "npm:2.0.5"
+    tinyrainbow: "npm:^1.2.0"
+  checksum: 10c0/5a6ee872a8adf5e2764f2b5b2276d8a2199be4ef14777ab693428caf359481851400af10b59721d4972289c955ffe7277954a662b04cfb10233824574c7074ba
+  languageName: node
+  linkType: hard
+
+"@vitest/runner@npm:2.1.3, @vitest/runner@npm:^2.1.3":
+  version: 2.1.3
+  resolution: "@vitest/runner@npm:2.1.3"
+  dependencies:
+    "@vitest/utils": "npm:2.1.3"
     pathe: "npm:^1.1.2"
-  checksum: 10c0/d0ed3302a7e015bf44b7c0df9d8f7da163659e082d86f9406944b5a31a61ab9ddc1de530e06176d1f4ef0bde994b44bff4c7dab62aacdc235c8fc04b98e4a72a
+  checksum: 10c0/d5b077643265d10025e22fa64a0e54c3d4fddc23e05f9fcd143dbcc4080851b0df31985986e57890a974577a18d3af624758b6062801d7dd96f9b4f2eaf591f1
   languageName: node
   linkType: hard
 
-"@vitest/snapshot@npm:2.0.5":
-  version: 2.0.5
-  resolution: "@vitest/snapshot@npm:2.0.5"
+"@vitest/snapshot@npm:2.1.3":
+  version: 2.1.3
+  resolution: "@vitest/snapshot@npm:2.1.3"
   dependencies:
-    "@vitest/pretty-format": "npm:2.0.5"
-    magic-string: "npm:^0.30.10"
+    "@vitest/pretty-format": "npm:2.1.3"
+    magic-string: "npm:^0.30.11"
     pathe: "npm:^1.1.2"
-  checksum: 10c0/7bf38474248f5ae0aac6afad511785d2b7a023ac5158803c2868fd172b5b9c1a569fb1dd64a09a49e43fd342cab71ea485ada89b7f08d37b1622a5a0ac00271d
+  checksum: 10c0/a3dcea6a5f7581b6a34dc3bf5f7bd42a05e2ccf6e1171d9f1b759688aebe650e6412564d066aeaa45e83ac549d453b6a3edcf774a8ac728c0c639f8dc919039f
   languageName: node
   linkType: hard
 
@@ -8896,7 +9265,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitest/utils@npm:2.0.5, @vitest/utils@npm:^2.0.5":
+"@vitest/spy@npm:2.1.3":
+  version: 2.1.3
+  resolution: "@vitest/spy@npm:2.1.3"
+  dependencies:
+    tinyspy: "npm:^3.0.0"
+  checksum: 10c0/8d85a5c2848c5bd81892af989aebad65d0c7ae74094aa98ad4f35ecf80755259c7a748a8e7bf683b2906fac29a51fc0ffa82f8fc073b36dbd8a0418261fccdba
+  languageName: node
+  linkType: hard
+
+"@vitest/utils@npm:2.0.5":
   version: 2.0.5
   resolution: "@vitest/utils@npm:2.0.5"
   dependencies:
@@ -8908,6 +9286,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vitest/utils@npm:2.1.3, @vitest/utils@npm:^2.1.1":
+  version: 2.1.3
+  resolution: "@vitest/utils@npm:2.1.3"
+  dependencies:
+    "@vitest/pretty-format": "npm:2.1.3"
+    loupe: "npm:^3.1.1"
+    tinyrainbow: "npm:^1.2.0"
+  checksum: 10c0/55a044e43b84c0f8f573d8578107f26440678b6f506c8d9fee88b7ef120d19efd27c9be77985c107113b0f3f3db298dcee57074e1c1c214bee7a097fd08a209b
+  languageName: node
+  linkType: hard
+
 "@volar/language-core@npm:1.10.1, @volar/language-core@npm:~1.10.0":
   version: 1.10.1
   resolution: "@volar/language-core@npm:1.10.1"
@@ -9528,24 +9917,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@yarnpkg/parsers@npm:3.0.0-rc.46":
-  version: 3.0.0-rc.46
-  resolution: "@yarnpkg/parsers@npm:3.0.0-rc.46"
+"@yarnpkg/parsers@npm:3.0.2":
+  version: 3.0.2
+  resolution: "@yarnpkg/parsers@npm:3.0.2"
   dependencies:
     js-yaml: "npm:^3.10.0"
     tslib: "npm:^2.4.0"
-  checksum: 10c0/c7f421c6885142f351459031c093fb2e79abcce6f4a89765a10e600bb7ab122949c54bcea2b23de9572a2b34ba29f822b17831c1c43ba50373ceb8cb5b336667
+  checksum: 10c0/a0c340e13129643162423d7e666061c0b39b143bfad3fc5a74c7d92a30fd740f6665d41cd4e61832c20375889d793eea1d1d103cacb39ed68f7acd168add8c53
   languageName: node
   linkType: hard
 
-"@zkochan/js-yaml@npm:0.0.6":
-  version: 0.0.6
-  resolution: "@zkochan/js-yaml@npm:0.0.6"
+"@zkochan/js-yaml@npm:0.0.7":
+  version: 0.0.7
+  resolution: "@zkochan/js-yaml@npm:0.0.7"
   dependencies:
     argparse: "npm:^2.0.1"
   bin:
     js-yaml: bin/js-yaml.js
-  checksum: 10c0/5ce27ae75fb1db9657d4065bf6b380b4c0f756feb1bdf42bfde40551a74bcc0ec918f748cbdbd5d95b7107d00bc2f731ee731b5cfe93acb6f7da5639b16aa1f8
+  checksum: 10c0/c8b3525717912811f9422ed50e94c5751ed6f771eb1b7e5cde097f14835654931e2bdaecb1e5fc37b51cf8d822410a307f16dd1581d46149398c30215f3f9bac
   languageName: node
   linkType: hard
 
@@ -9632,7 +10021,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.0.0, acorn@npm:^8.10.0, acorn@npm:^8.11.2, acorn@npm:^8.11.3, acorn@npm:^8.12.1, acorn@npm:^8.4.1, acorn@npm:^8.6.0, acorn@npm:^8.7.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
+"acorn@npm:^8.0.0, acorn@npm:^8.11.2, acorn@npm:^8.12.1, acorn@npm:^8.4.1, acorn@npm:^8.6.0, acorn@npm:^8.7.1, acorn@npm:^8.8.2, acorn@npm:^8.9.0":
   version: 8.12.1
   resolution: "acorn@npm:8.12.1"
   bin:
@@ -9952,7 +10341,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aria-query@npm:5.3.0, aria-query@npm:^5.0.0, aria-query@npm:^5.3.0":
+"aria-query@npm:5.3.0":
   version: 5.3.0
   resolution: "aria-query@npm:5.3.0"
   dependencies:
@@ -9961,6 +10350,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"aria-query@npm:^5.0.0, aria-query@npm:^5.3.0, aria-query@npm:^5.3.1":
+  version: 5.3.2
+  resolution: "aria-query@npm:5.3.2"
+  checksum: 10c0/003c7e3e2cff5540bf7a7893775fc614de82b0c5dde8ae823d47b7a28a9d4da1f7ed85f340bdb93d5649caa927755f0e31ecc7ab63edfdfc00c8ef07e505e03e
+  languageName: node
+  linkType: hard
+
 "arr-diff@npm:^4.0.0":
   version: 4.0.0
   resolution: "arr-diff@npm:4.0.0"
@@ -10165,13 +10561,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"assertion-error@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "assertion-error@npm:1.1.0"
-  checksum: 10c0/25456b2aa333250f01143968e02e4884a34588a8538fbbf65c91a637f1dbfb8069249133cd2f4e530f10f624d206a664e7df30207830b659e9f5298b00a4099b
-  languageName: node
-  linkType: hard
-
 "assertion-error@npm:^2.0.1":
   version: 2.0.1
   resolution: "assertion-error@npm:2.0.1"
@@ -10343,14 +10732,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axios@npm:^1.6.0, axios@npm:^1.6.1":
-  version: 1.6.7
-  resolution: "axios@npm:1.6.7"
+"axe-core@npm:^4.4.2":
+  version: 4.10.2
+  resolution: "axe-core@npm:4.10.2"
+  checksum: 10c0/0e20169077de96946a547fce0df39d9aeebe0077f9d3eeff4896518b96fde857f80b98f0d4279274a7178791744dd5a54bb4f322de45b4f561ffa2586ff9a09d
+  languageName: node
+  linkType: hard
+
+"axios@npm:^1.6.1, axios@npm:^1.7.4":
+  version: 1.7.9
+  resolution: "axios@npm:1.7.9"
   dependencies:
-    follow-redirects: "npm:^1.15.4"
+    follow-redirects: "npm:^1.15.6"
     form-data: "npm:^4.0.0"
     proxy-from-env: "npm:^1.1.0"
-  checksum: 10c0/131bf8e62eee48ca4bd84e6101f211961bf6a21a33b95e5dfb3983d5a2fe50d9fffde0b57668d7ce6f65063d3dc10f2212cbcb554f75cfca99da1c73b210358d
+  checksum: 10c0/b7a41e24b59fee5f0f26c1fc844b45b17442832eb3a0fb42dd4f1430eb4abc571fe168e67913e8a1d91c993232bd1d1ab03e20e4d1fee8c6147649b576fc1b0b
   languageName: node
   linkType: hard
 
@@ -10363,12 +10759,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axobject-query@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "axobject-query@npm:4.0.0"
-  dependencies:
-    dequal: "npm:^2.0.3"
-  checksum: 10c0/4d756b5c2ff099f1c7f99e55a5de9b2066cb2a13a3170185ff34bfec2d7bcab81eb820a4e7340d35c251341b61ebee6e705b7ce64db78224df1df5a4d68448fe
+"axobject-query@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "axobject-query@npm:4.1.0"
+  checksum: 10c0/c470e4f95008f232eadd755b018cb55f16c03ccf39c027b941cd8820ac6b68707ce5d7368a46756db4256fbc91bb4ead368f84f7fb034b2b7932f082f6dc0775
   languageName: node
   linkType: hard
 
@@ -11184,7 +11578,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserslist@npm:^4.21.10, browserslist@npm:^4.21.5, browserslist@npm:^4.23.0, browserslist@npm:^4.23.1":
+"browserslist@npm:^4.21.10, browserslist@npm:^4.21.5, browserslist@npm:^4.23.0, browserslist@npm:^4.24.0":
+  version: 4.24.2
+  resolution: "browserslist@npm:4.24.2"
+  dependencies:
+    caniuse-lite: "npm:^1.0.30001669"
+    electron-to-chromium: "npm:^1.5.41"
+    node-releases: "npm:^2.0.18"
+    update-browserslist-db: "npm:^1.1.1"
+  bin:
+    browserslist: cli.js
+  checksum: 10c0/d747c9fb65ed7b4f1abcae4959405707ed9a7b835639f8a9ba0da2911995a6ab9b0648fd05baf2a4d4e3cf7f9fdbad56d3753f91881e365992c1d49c8d88ff7a
+  languageName: node
+  linkType: hard
+
+"browserslist@npm:^4.23.1":
   version: 4.23.3
   resolution: "browserslist@npm:4.23.3"
   dependencies:
@@ -11451,7 +11859,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.30001579, caniuse-lite@npm:^1.0.30001591, caniuse-lite@npm:^1.0.30001646":
+"caniuse-lite@npm:^1.0.30001579, caniuse-lite@npm:^1.0.30001591, caniuse-lite@npm:^1.0.30001669":
+  version: 1.0.30001677
+  resolution: "caniuse-lite@npm:1.0.30001677"
+  checksum: 10c0/22b4aa738b213b5d0bc820c26ba23fa265ca90a5c59776e1a686b9ab6fff9120d0825fd920c0a601a4b65056ef40d01548405feb95c8dd6083255f50c71a0864
+  languageName: node
+  linkType: hard
+
+"caniuse-lite@npm:^1.0.30001646":
   version: 1.0.30001650
   resolution: "caniuse-lite@npm:1.0.30001650"
   checksum: 10c0/81d271517f452321d4274d514dcbf4d57fc7ca6d2f82d4e273a850fc6d92d334d97bbec8359ce2237c7f2d128729037b82ca506c7213511dc8380b8ec24d9d45
@@ -11472,21 +11887,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chai@npm:^4.4.1":
-  version: 4.5.0
-  resolution: "chai@npm:4.5.0"
-  dependencies:
-    assertion-error: "npm:^1.1.0"
-    check-error: "npm:^1.0.3"
-    deep-eql: "npm:^4.1.3"
-    get-func-name: "npm:^2.0.2"
-    loupe: "npm:^2.3.6"
-    pathval: "npm:^1.1.1"
-    type-detect: "npm:^4.1.0"
-  checksum: 10c0/b8cb596bd1aece1aec659e41a6e479290c7d9bee5b3ad63d2898ad230064e5b47889a3bc367b20100a0853b62e026e2dc514acf25a3c9385f936aa3614d4ab4d
-  languageName: node
-  linkType: hard
-
 "chai@npm:^5.1.1":
   version: 5.1.1
   resolution: "chai@npm:5.1.1"
@@ -11500,7 +11900,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chalk@npm:5.3.0, chalk@npm:^5.0.0, chalk@npm:^5.2.0, chalk@npm:^5.3.0":
+"chalk@npm:5.3.0, chalk@npm:^5.0.0, chalk@npm:^5.0.1, chalk@npm:^5.2.0, chalk@npm:^5.3.0":
   version: 5.3.0
   resolution: "chalk@npm:5.3.0"
   checksum: 10c0/8297d436b2c0f95801103ff2ef67268d362021b8210daf8ddbe349695333eb3610a71122172ff3b0272f1ef2cf7cc2c41fdaa4715f52e49ffe04c56340feed09
@@ -11603,15 +12003,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"check-error@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "check-error@npm:1.0.3"
-  dependencies:
-    get-func-name: "npm:^2.0.2"
-  checksum: 10c0/94aa37a7315c0e8a83d0112b5bfb5a8624f7f0f81057c73e4707729cdd8077166c6aefb3d8e2b92c63ee130d4a2ff94bad46d547e12f3238cc1d78342a973841
-  languageName: node
-  linkType: hard
-
 "check-error@npm:^2.1.1":
   version: 2.1.1
   resolution: "check-error@npm:2.1.1"
@@ -11626,7 +12017,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.0.0, chokidar@npm:^3.4.1, chokidar@npm:^3.5.1, chokidar@npm:^3.5.3":
+"chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.0.0, chokidar@npm:^3.5.1, chokidar@npm:^3.5.3":
   version: 3.5.3
   resolution: "chokidar@npm:3.5.3"
   dependencies:
@@ -11645,6 +12036,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chokidar@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "chokidar@npm:4.0.1"
+  dependencies:
+    readdirp: "npm:^4.0.1"
+  checksum: 10c0/4bb7a3adc304059810bb6c420c43261a15bb44f610d77c35547addc84faa0374265c3adc67f25d06f363d9a4571962b02679268c40de07676d260de1986efea9
+  languageName: node
+  linkType: hard
+
 "chownr@npm:^1.1.1":
   version: 1.1.4
   resolution: "chownr@npm:1.1.4"
@@ -11659,9 +12059,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chromatic@npm:^11.4.0":
-  version: 11.5.5
-  resolution: "chromatic@npm:11.5.5"
+"chromatic@npm:^11.15.0":
+  version: 11.15.0
+  resolution: "chromatic@npm:11.15.0"
   peerDependencies:
     "@chromatic-com/cypress": ^0.*.* || ^1.0.0
     "@chromatic-com/playwright": ^0.*.* || ^1.0.0
@@ -11674,7 +12074,7 @@ __metadata:
     chroma: dist/bin.js
     chromatic: dist/bin.js
     chromatic-cli: dist/bin.js
-  checksum: 10c0/3d812122548f9c29ab7116f7054e03cbf523b30ddde7e3142017cd23c42b6b99b3023e0146ef3afcfe4245a8cbb2ed97cedecca4e2cf9e5f6e8666db84a827d4
+  checksum: 10c0/8add464ff39417c402b77d973300806a50bd5e3b8f95eeccd965787536b4273e6bfa6b6e0716417bf342cd5106e82e8f1e0dec4a290a89c00e7862f3833fff10
   languageName: node
   linkType: hard
 
@@ -11906,19 +12306,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"code-red@npm:^1.0.3":
-  version: 1.0.4
-  resolution: "code-red@npm:1.0.4"
-  dependencies:
-    "@jridgewell/sourcemap-codec": "npm:^1.4.15"
-    "@types/estree": "npm:^1.0.1"
-    acorn: "npm:^8.10.0"
-    estree-walker: "npm:^3.0.3"
-    periscopic: "npm:^3.1.0"
-  checksum: 10c0/1309f062369ae520c422d7f45b93190faea2cbc7e3fe3375918f36bb394030d0936d940601426564c30abc71b8aa8e6d1505cccd67a8620183fb01c84bcb7304
-  languageName: node
-  linkType: hard
-
 "collapse-white-space@npm:^2.0.0":
   version: 2.1.0
   resolution: "collapse-white-space@npm:2.1.0"
@@ -12473,12 +12860,12 @@ __metadata:
     "@types/semver": "npm:^7.3.4"
     "@types/util-deprecate": "npm:^1.0.0"
     boxen: "npm:^7.1.1"
-    chalk: "npm:^4.1.0"
     commander: "npm:^12.1.0"
     execa: "npm:^5.0.0"
     fd-package-json: "npm:^1.2.0"
     find-up: "npm:^5.0.0"
     ora: "npm:^5.4.1"
+    picocolors: "npm:^1.1.0"
     prettier: "npm:^3.1.1"
     prompts: "npm:^2.4.0"
     semver: "npm:^7.3.7"
@@ -12636,16 +13023,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-tree@npm:^2.3.1":
-  version: 2.3.1
-  resolution: "css-tree@npm:2.3.1"
-  dependencies:
-    mdn-data: "npm:2.0.30"
-    source-map-js: "npm:^1.0.1"
-  checksum: 10c0/6f8c1a11d5e9b14bf02d10717fc0351b66ba12594166f65abfbd8eb8b5b490dd367f5c7721db241a3c792d935fc6751fbc09f7e1598d421477ad9fadc30f4f24
-  languageName: node
-  linkType: hard
-
 "css-what@npm:^6.0.1, css-what@npm:^6.1.0":
   version: 6.1.0
   resolution: "css-what@npm:6.1.0"
@@ -12812,15 +13189,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4, debug@npm:^4.3.5":
-  version: 4.3.6
-  resolution: "debug@npm:4.3.6"
+"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4, debug@npm:^4.3.5, debug@npm:^4.3.6, debug@npm:^4.3.7":
+  version: 4.3.7
+  resolution: "debug@npm:4.3.7"
   dependencies:
-    ms: "npm:2.1.2"
+    ms: "npm:^2.1.3"
   peerDependenciesMeta:
     supports-color:
       optional: true
-  checksum: 10c0/3293416bff072389c101697d4611c402a6bacd1900ac20c0492f61a9cdd6b3b29750fc7f5e299f8058469ef60ff8fb79b86395a30374fbd2490113c1c7112285
+  checksum: 10c0/1471db19c3b06d485a622d62f65947a19a23fbd0dd73f7fd3eafb697eec5360cde447fb075919987899b1a2096e85d35d4eb5a4de09a57600ac9cf7e6c8e768b
   languageName: node
   linkType: hard
 
@@ -12868,6 +13245,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dedent-js@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "dedent-js@npm:1.0.1"
+  checksum: 10c0/a8cff2e02d5a1ce64615c5c53c9789e7ef1abb9ae7bf2322dc991fcbaf08d901ace1a679c1e021de15a85db7787b8ccfb02011e1f394afef0f698fc857a47009
+  languageName: node
+  linkType: hard
+
 "dedent@npm:^0.7.0":
   version: 0.7.0
   resolution: "dedent@npm:0.7.0"
@@ -12882,15 +13266,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deep-eql@npm:^4.1.3":
-  version: 4.1.3
-  resolution: "deep-eql@npm:4.1.3"
-  dependencies:
-    type-detect: "npm:^4.0.0"
-  checksum: 10c0/ff34e8605d8253e1bf9fe48056e02c6f347b81d9b5df1c6650a1b0f6f847b4a86453b16dc226b34f853ef14b626e85d04e081b022e20b00cd7d54f079ce9bbdd
-  languageName: node
-  linkType: hard
-
 "deep-eql@npm:^5.0.1":
   version: 5.0.2
   resolution: "deep-eql@npm:5.0.2"
@@ -13289,7 +13664,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dom-accessibility-api@npm:^0.5.9":
+"dom-accessibility-api@npm:^0.5.14, dom-accessibility-api@npm:^0.5.9":
   version: 0.5.16
   resolution: "dom-accessibility-api@npm:0.5.16"
   checksum: 10c0/b2c2eda4fae568977cdac27a9f0c001edf4f95a6a6191dfa611e3721db2478d1badc01db5bb4fa8a848aeee13e442a6c2a4386d65ec65a1436f24715a2f8d053
@@ -13417,20 +13792,36 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dotenv-expand@npm:^10.0.0, dotenv-expand@npm:~10.0.0":
+"dotenv-expand@npm:^10.0.0":
   version: 10.0.0
   resolution: "dotenv-expand@npm:10.0.0"
   checksum: 10c0/298f5018e29cfdcb0b5f463ba8e8627749103fbcf6cf81c561119115754ed582deee37b49dfc7253028aaba875ab7aea5fa90e5dac88e511d009ab0e6677924e
   languageName: node
   linkType: hard
 
-"dotenv@npm:^16.0.0, dotenv@npm:~16.3.1":
+"dotenv-expand@npm:~11.0.6":
+  version: 11.0.7
+  resolution: "dotenv-expand@npm:11.0.7"
+  dependencies:
+    dotenv: "npm:^16.4.5"
+  checksum: 10c0/d80b8a7be085edf351270b96ac0e794bc3ddd7f36157912939577cb4d33ba6492ebee349d59798b71b90e36f498d24a2a564fb4aa00073b2ef4c2a3a49c467b1
+  languageName: node
+  linkType: hard
+
+"dotenv@npm:^16.0.0":
   version: 16.3.1
   resolution: "dotenv@npm:16.3.1"
   checksum: 10c0/b95ff1bbe624ead85a3cd70dbd827e8e06d5f05f716f2d0cbc476532d54c7c9469c3bc4dd93ea519f6ad711cb522c00ac9a62b6eb340d5affae8008facc3fbd7
   languageName: node
   linkType: hard
 
+"dotenv@npm:^16.4.5, dotenv@npm:~16.4.5":
+  version: 16.4.7
+  resolution: "dotenv@npm:16.4.7"
+  checksum: 10c0/be9f597e36a8daf834452daa1f4cc30e5375a5968f98f46d89b16b983c567398a330580c88395069a77473943c06b877d1ca25b4afafcdd6d4adb549e8293462
+  languageName: node
+  linkType: hard
+
 "downshift@npm:^9.0.4":
   version: 9.0.4
   resolution: "downshift@npm:9.0.4"
@@ -13457,13 +13848,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"duplexer@npm:^0.1.1":
-  version: 0.1.2
-  resolution: "duplexer@npm:0.1.2"
-  checksum: 10c0/c57bcd4bdf7e623abab2df43a7b5b23d18152154529d166c1e0da6bee341d84c432d157d7e97b32fecb1bf3a8b8857dd85ed81a915789f550637ed25b8e64fc2
-  languageName: node
-  linkType: hard
-
 "duplexify@npm:^3.5.0, duplexify@npm:^3.6.0":
   version: 3.7.1
   resolution: "duplexify@npm:3.7.1"
@@ -13550,6 +13934,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"electron-to-chromium@npm:^1.5.41":
+  version: 1.5.50
+  resolution: "electron-to-chromium@npm:1.5.50"
+  checksum: 10c0/8b77b18ae833bfe2173e346ac33b8d66b5b5acf0cf5de65df9799f4d482334c938aa0950e4d01391d5fab8994f46c0e9059f4517843e7b8d861f9b0c49eb4c5d
+  languageName: node
+  linkType: hard
+
 "elliptic@npm:^6.5.3, elliptic@npm:^6.5.4":
   version: 6.5.4
   resolution: "elliptic@npm:6.5.4"
@@ -13721,14 +14112,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"emoji-regex@npm:^10.2.1":
-  version: 10.3.0
-  resolution: "emoji-regex@npm:10.3.0"
-  checksum: 10c0/b4838e8dcdceb44cf47f59abe352c25ff4fe7857acaf5fb51097c427f6f75b44d052eb907a7a3b86f86bc4eae3a93f5c2b7460abe79c407307e6212d65c91163
-  languageName: node
-  linkType: hard
-
-"emoji-regex@npm:^10.3.0":
+"emoji-regex@npm:^10.2.1, emoji-regex@npm:^10.3.0":
   version: 10.4.0
   resolution: "emoji-regex@npm:10.4.0"
   checksum: 10c0/a3fcedfc58bfcce21a05a5f36a529d81e88d602100145fcca3dc6f795e3c8acc4fc18fe773fbf9b6d6e9371205edb3afa2668ec3473fa2aa7fd47d2a9d46482d
@@ -14079,6 +14463,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"es-toolkit@npm:^1.22.0":
+  version: 1.22.0
+  resolution: "es-toolkit@npm:1.22.0"
+  checksum: 10c0/a167789f727437d435071af74e22c0c4a5a557aa61a5013a1656d24b1c8636c88d6b74f12ad0c3966b74d3f56e432d8e8d1989e5c10c10fda8eba5752783af18
+  languageName: node
+  linkType: hard
+
 "es6-promise@npm:^3.1.2":
   version: 3.3.1
   resolution: "es6-promise@npm:3.3.1"
@@ -14127,34 +14518,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild@npm:^0.23.0":
-  version: 0.23.0
-  resolution: "esbuild@npm:0.23.0"
-  dependencies:
-    "@esbuild/aix-ppc64": "npm:0.23.0"
-    "@esbuild/android-arm": "npm:0.23.0"
-    "@esbuild/android-arm64": "npm:0.23.0"
-    "@esbuild/android-x64": "npm:0.23.0"
-    "@esbuild/darwin-arm64": "npm:0.23.0"
-    "@esbuild/darwin-x64": "npm:0.23.0"
-    "@esbuild/freebsd-arm64": "npm:0.23.0"
-    "@esbuild/freebsd-x64": "npm:0.23.0"
-    "@esbuild/linux-arm": "npm:0.23.0"
-    "@esbuild/linux-arm64": "npm:0.23.0"
-    "@esbuild/linux-ia32": "npm:0.23.0"
-    "@esbuild/linux-loong64": "npm:0.23.0"
-    "@esbuild/linux-mips64el": "npm:0.23.0"
-    "@esbuild/linux-ppc64": "npm:0.23.0"
-    "@esbuild/linux-riscv64": "npm:0.23.0"
-    "@esbuild/linux-s390x": "npm:0.23.0"
-    "@esbuild/linux-x64": "npm:0.23.0"
-    "@esbuild/netbsd-x64": "npm:0.23.0"
-    "@esbuild/openbsd-arm64": "npm:0.23.0"
-    "@esbuild/openbsd-x64": "npm:0.23.0"
-    "@esbuild/sunos-x64": "npm:0.23.0"
-    "@esbuild/win32-arm64": "npm:0.23.0"
-    "@esbuild/win32-ia32": "npm:0.23.0"
-    "@esbuild/win32-x64": "npm:0.23.0"
+"esbuild@npm:^0.24.0":
+  version: 0.24.0
+  resolution: "esbuild@npm:0.24.0"
+  dependencies:
+    "@esbuild/aix-ppc64": "npm:0.24.0"
+    "@esbuild/android-arm": "npm:0.24.0"
+    "@esbuild/android-arm64": "npm:0.24.0"
+    "@esbuild/android-x64": "npm:0.24.0"
+    "@esbuild/darwin-arm64": "npm:0.24.0"
+    "@esbuild/darwin-x64": "npm:0.24.0"
+    "@esbuild/freebsd-arm64": "npm:0.24.0"
+    "@esbuild/freebsd-x64": "npm:0.24.0"
+    "@esbuild/linux-arm": "npm:0.24.0"
+    "@esbuild/linux-arm64": "npm:0.24.0"
+    "@esbuild/linux-ia32": "npm:0.24.0"
+    "@esbuild/linux-loong64": "npm:0.24.0"
+    "@esbuild/linux-mips64el": "npm:0.24.0"
+    "@esbuild/linux-ppc64": "npm:0.24.0"
+    "@esbuild/linux-riscv64": "npm:0.24.0"
+    "@esbuild/linux-s390x": "npm:0.24.0"
+    "@esbuild/linux-x64": "npm:0.24.0"
+    "@esbuild/netbsd-x64": "npm:0.24.0"
+    "@esbuild/openbsd-arm64": "npm:0.24.0"
+    "@esbuild/openbsd-x64": "npm:0.24.0"
+    "@esbuild/sunos-x64": "npm:0.24.0"
+    "@esbuild/win32-arm64": "npm:0.24.0"
+    "@esbuild/win32-ia32": "npm:0.24.0"
+    "@esbuild/win32-x64": "npm:0.24.0"
   dependenciesMeta:
     "@esbuild/aix-ppc64":
       optional: true
@@ -14206,11 +14597,18 @@ __metadata:
       optional: true
   bin:
     esbuild: bin/esbuild
-  checksum: 10c0/08c148c067795165798c0467ce02d2d1ecedc096989bded5f0d795c61a1fcbec6c14d0a3c9f4ad6185cc29ec52087acaa335ed6d98be6ad57f7fa4264626bde0
+  checksum: 10c0/9f1aadd8d64f3bff422ae78387e66e51a5e09de6935a6f987b6e4e189ed00fdc2d1bc03d2e33633b094008529c8b6e06c7ad1a9782fb09fec223bf95998c0683
+  languageName: node
+  linkType: hard
+
+"escalade@npm:^3.1.1, escalade@npm:^3.2.0":
+  version: 3.2.0
+  resolution: "escalade@npm:3.2.0"
+  checksum: 10c0/ced4dd3a78e15897ed3be74e635110bbf3b08877b0a41be50dcb325ee0e0b5f65fc2d50e9845194d7c4633f327e2e1c6cce00a71b617c5673df0374201d67f65
   languageName: node
   linkType: hard
 
-"escalade@npm:^3.1.1, escalade@npm:^3.1.2":
+"escalade@npm:^3.1.2":
   version: 3.1.2
   resolution: "escalade@npm:3.1.2"
   checksum: 10c0/6b4adafecd0682f3aa1cd1106b8fff30e492c7015b178bc81b2d2f75106dabea6c6d6e8508fc491bd58e597c74abb0e8e2368f943ecb9393d4162e3c2f3cf287
@@ -14344,6 +14742,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-depend@npm:^0.11.0":
+  version: 0.11.0
+  resolution: "eslint-plugin-depend@npm:0.11.0"
+  dependencies:
+    fd-package-json: "npm:^1.2.0"
+    module-replacements: "npm:^2.1.0"
+    semver: "npm:^7.6.3"
+  checksum: 10c0/64baf4d4f5d406efa1f13bda723ff0eb5fe4cee0ae8c3679fcdfccb4d7ba3a9472416fa3c54d75f1bde3e0123e55a85774662484a5b0355812f21a8968ee784a
+  languageName: node
+  linkType: hard
+
 "eslint-plugin-eslint-comments@npm:^3.2.0":
   version: 3.2.0
   resolution: "eslint-plugin-eslint-comments@npm:3.2.0"
@@ -14638,15 +15047,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint@npm:^8.0.0, eslint@npm:^8.56.0":
-  version: 8.57.0
-  resolution: "eslint@npm:8.57.0"
+"eslint@npm:8.57.1":
+  version: 8.57.1
+  resolution: "eslint@npm:8.57.1"
   dependencies:
     "@eslint-community/eslint-utils": "npm:^4.2.0"
     "@eslint-community/regexpp": "npm:^4.6.1"
     "@eslint/eslintrc": "npm:^2.1.4"
-    "@eslint/js": "npm:8.57.0"
-    "@humanwhocodes/config-array": "npm:^0.11.14"
+    "@eslint/js": "npm:8.57.1"
+    "@humanwhocodes/config-array": "npm:^0.13.0"
     "@humanwhocodes/module-importer": "npm:^1.0.1"
     "@nodelib/fs.walk": "npm:^1.2.8"
     "@ungap/structured-clone": "npm:^1.2.0"
@@ -14682,7 +15091,7 @@ __metadata:
     text-table: "npm:^0.2.0"
   bin:
     eslint: bin/eslint.js
-  checksum: 10c0/00bb96fd2471039a312435a6776fe1fd557c056755eaa2b96093ef3a8508c92c8775d5f754768be6b1dddd09fdd3379ddb231eeb9b6c579ee17ea7d68000a529
+  checksum: 10c0/1fd31533086c1b72f86770a4d9d7058ee8b4643fd1cfd10c7aac1ecb8725698e88352a87805cf4b2ce890aa35947df4b4da9655fb7fdfa60dbb448a43f6ebcf1
   languageName: node
   linkType: hard
 
@@ -14741,13 +15150,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esrap@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "esrap@npm:1.2.1"
+"esrap@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "esrap@npm:1.2.2"
   dependencies:
     "@jridgewell/sourcemap-codec": "npm:^1.4.15"
     "@types/estree": "npm:^1.0.1"
-  checksum: 10c0/28d6e36adcf4342a844a938a736132269c33e9db6bbefc98c6af5ed06c14899afcc85391e7ce4824ce5066877fa10b0ed5c5007592cbc58012be95f13c66467f
+  checksum: 10c0/a3a0b665c034f604a162b910346309c64c42635c5d2e8704a27afcdf4e6d4c529e05475d1875d6b3e0d550f8470986116414097230ab3a7c565b85091ca5e177
   languageName: node
   linkType: hard
 
@@ -14834,6 +15243,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"estree-walker@npm:^0.6.1":
+  version: 0.6.1
+  resolution: "estree-walker@npm:0.6.1"
+  checksum: 10c0/6dabc855faa04a1ffb17b6a9121b6008ba75ab5a163ad9dc3d7fca05cfda374c5f5e91418d783496620ca75e99a73c40874d8b75f23b4117508cc8bde78e7b41
+  languageName: node
+  linkType: hard
+
 "estree-walker@npm:^2.0.1, estree-walker@npm:^2.0.2":
   version: 2.0.2
   resolution: "estree-walker@npm:2.0.2"
@@ -14969,6 +15385,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"execa@npm:^9.5.2":
+  version: 9.5.2
+  resolution: "execa@npm:9.5.2"
+  dependencies:
+    "@sindresorhus/merge-streams": "npm:^4.0.0"
+    cross-spawn: "npm:^7.0.3"
+    figures: "npm:^6.1.0"
+    get-stream: "npm:^9.0.0"
+    human-signals: "npm:^8.0.0"
+    is-plain-obj: "npm:^4.1.0"
+    is-stream: "npm:^4.0.1"
+    npm-run-path: "npm:^6.0.0"
+    pretty-ms: "npm:^9.0.0"
+    signal-exit: "npm:^4.1.0"
+    strip-final-newline: "npm:^4.0.0"
+    yoctocolors: "npm:^2.0.0"
+  checksum: 10c0/94782a6282e03253224406c29068d18f9095cc251a45d1f19ac3d8f2a9db2cbe32fb8ceb039db1451d8fce3531135a6c0c559f76d634f85416268fc4a6995365
+  languageName: node
+  linkType: hard
+
 "exectimer@npm:^2.2.2":
   version: 2.2.2
   resolution: "exectimer@npm:2.2.2"
@@ -15017,7 +15453,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"express@npm:^4.17.3, express@npm:^4.19.2":
+"express@npm:^4.17.3":
   version: 4.19.2
   resolution: "express@npm:4.19.2"
   dependencies:
@@ -15109,6 +15545,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-decode-uri-component@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "fast-decode-uri-component@npm:1.0.1"
+  checksum: 10c0/039d50c2e99d64f999c3f2126c23fbf75a04a4117e218a149ca0b1d2aeb8c834b7b19d643b9d35d4eabce357189a6a94085f78cf48869e6e26cc59b036284bc3
+  languageName: node
+  linkType: hard
+
 "fast-deep-equal@npm:^3.1.1, fast-deep-equal@npm:^3.1.3":
   version: 3.1.3
   resolution: "fast-deep-equal@npm:3.1.3"
@@ -15123,20 +15566,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:3.2.7":
-  version: 3.2.7
-  resolution: "fast-glob@npm:3.2.7"
-  dependencies:
-    "@nodelib/fs.stat": "npm:^2.0.2"
-    "@nodelib/fs.walk": "npm:^1.2.3"
-    glob-parent: "npm:^5.1.2"
-    merge2: "npm:^1.3.0"
-    micromatch: "npm:^4.0.4"
-  checksum: 10c0/cc820a9acbd99c51267d525ed3c0c368b57d273f8d34e2401eef824390ff38ff419af3c0308d4ec1aef3dae0e24d1ac1dfe3156e5c702d63416a4c877ab7e0c4
-  languageName: node
-  linkType: hard
-
-"fast-glob@npm:3.3.2, fast-glob@npm:^3.0.3, fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.2, fast-glob@npm:^3.2.7, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.1, fast-glob@npm:^3.3.2":
+"fast-glob@npm:3.3.2, fast-glob@npm:^3.0.3, fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.2, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.1, fast-glob@npm:^3.3.2":
   version: 3.3.2
   resolution: "fast-glob@npm:3.3.2"
   dependencies:
@@ -15244,6 +15674,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fdir@npm:^6.2.0, fdir@npm:^6.4.2":
+  version: 6.4.2
+  resolution: "fdir@npm:6.4.2"
+  peerDependencies:
+    picomatch: ^3 || ^4
+  peerDependenciesMeta:
+    picomatch:
+      optional: true
+  checksum: 10c0/34829886f34a3ca4170eca7c7180ec4de51a3abb4d380344063c0ae2e289b11d2ba8b724afee974598c83027fea363ff598caf2b51bc4e6b1e0d8b80cc530573
+  languageName: node
+  linkType: hard
+
 "fetch-retry@npm:^6.0.0":
   version: 6.0.0
   resolution: "fetch-retry@npm:6.0.0"
@@ -15260,6 +15702,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"figures@npm:^6.1.0":
+  version: 6.1.0
+  resolution: "figures@npm:6.1.0"
+  dependencies:
+    is-unicode-supported: "npm:^2.0.0"
+  checksum: 10c0/9159df4264d62ef447a3931537de92f5012210cf5135c35c010df50a2169377581378149abfe1eb238bd6acbba1c0d547b1f18e0af6eee49e30363cedaffcfe4
+  languageName: node
+  linkType: hard
+
 "file-entry-cache@npm:^6.0.1":
   version: 6.0.1
   resolution: "file-entry-cache@npm:6.0.1"
@@ -15269,18 +15720,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"file-system-cache@npm:^2.4.4":
-  version: 2.4.4
-  resolution: "file-system-cache@npm:2.4.4"
-  dependencies:
-    "@types/fs-extra": "npm:11.0.1"
-    "@types/ramda": "npm:0.29.3"
-    fs-extra: "npm:11.1.1"
-    ramda: "npm:0.29.0"
-  checksum: 10c0/274bd9c2f8f81d0c3b2cc0d077807c969b48cac4857ae77f87b4b480548252aa42d3a43b3e9d4bb54df567eb70f0c384782514fcea74b78765543e9496e27e2d
-  languageName: node
-  linkType: hard
-
 "filelist@npm:^1.0.4":
   version: 1.0.4
   resolution: "filelist@npm:1.0.4"
@@ -15538,6 +15977,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"flow-remove-types@npm:^2.158.0":
+  version: 2.255.0
+  resolution: "flow-remove-types@npm:2.255.0"
+  dependencies:
+    hermes-parser: "npm:0.25.1"
+    pirates: "npm:^3.0.2"
+    vlq: "npm:^0.2.1"
+  bin:
+    flow-node: flow-node
+    flow-remove-types: flow-remove-types
+  checksum: 10c0/080cfab76259e313ac77ebd911528fdc9423446d0c4503b95c9f0beb57fde1143657ac3388110382ddbfdb9b7e8ebc20fe903b14a7de374f53d44d6365e26ae1
+  languageName: node
+  linkType: hard
+
 "flush-promises@npm:^1.0.2":
   version: 1.0.2
   resolution: "flush-promises@npm:1.0.2"
@@ -15554,13 +16007,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.15.4":
-  version: 1.15.5
-  resolution: "follow-redirects@npm:1.15.5"
+"follow-redirects@npm:^1.0.0, follow-redirects@npm:^1.15.6":
+  version: 1.15.9
+  resolution: "follow-redirects@npm:1.15.9"
   peerDependenciesMeta:
     debug:
       optional: true
-  checksum: 10c0/418d71688ceaf109dfd6f85f747a0c75de30afe43a294caa211def77f02ef19865b547dfb73fde82b751e1cc507c06c754120b848fe5a7400b0a669766df7615
+  checksum: 10c0/5829165bd112c3c0e82be6c15b1a58fa9dcfaede3b3c54697a82fe4a62dd5ae5e8222956b448d2f98e331525f05d00404aba7d696de9e761ef6e42fdc780244f
   languageName: node
   linkType: hard
 
@@ -15710,6 +16163,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"front-matter@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "front-matter@npm:4.0.2"
+  dependencies:
+    js-yaml: "npm:^3.13.1"
+  checksum: 10c0/7a0df5ca37428dd563c057bc17a8940481fe53876609bcdc443a02ce463c70f1842c7cb4628b80916de46a253732794b36fb6a31105db0f185698a93acee4011
+  languageName: node
+  linkType: hard
+
 "fs-constants@npm:^1.0.0":
   version: 1.0.0
   resolution: "fs-constants@npm:1.0.0"
@@ -15724,17 +16186,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-extra@npm:11.1.1":
-  version: 11.1.1
-  resolution: "fs-extra@npm:11.1.1"
-  dependencies:
-    graceful-fs: "npm:^4.2.0"
-    jsonfile: "npm:^6.0.1"
-    universalify: "npm:^2.0.0"
-  checksum: 10c0/a2480243d7dcfa7d723c5f5b24cf4eba02a6ccece208f1524a2fbde1c629492cfb9a59e4b6d04faff6fbdf71db9fdc8ef7f396417a02884195a625f5d8dc9427
-  languageName: node
-  linkType: hard
-
 "fs-extra@npm:^10.0.0, fs-extra@npm:^10.1.0":
   version: 10.1.0
   resolution: "fs-extra@npm:10.1.0"
@@ -15746,7 +16197,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-extra@npm:^11.1.0, fs-extra@npm:^11.2.0":
+"fs-extra@npm:^11.2.0":
   version: 11.2.0
   resolution: "fs-extra@npm:11.2.0"
   dependencies:
@@ -16043,7 +16494,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-func-name@npm:^2.0.1, get-func-name@npm:^2.0.2":
+"get-func-name@npm:^2.0.1":
   version: 2.0.2
   resolution: "get-func-name@npm:2.0.2"
   checksum: 10c0/89830fd07623fa73429a711b9daecdb304386d237c71268007f788f113505ef1d4cc2d0b9680e072c5082490aec9df5d7758bf5ac6f1c37062855e8e3dc0b9df
@@ -16114,6 +16565,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-stream@npm:^9.0.0":
+  version: 9.0.1
+  resolution: "get-stream@npm:9.0.1"
+  dependencies:
+    "@sec-ant/readable-stream": "npm:^0.4.1"
+    is-stream: "npm:^4.0.1"
+  checksum: 10c0/d70e73857f2eea1826ac570c3a912757dcfbe8a718a033fa0c23e12ac8e7d633195b01710e0559af574cbb5af101009b42df7b6f6b29ceec8dbdf7291931b948
+  languageName: node
+  linkType: hard
+
 "get-symbol-description@npm:^1.0.2":
   version: 1.0.2
   resolution: "get-symbol-description@npm:1.0.2"
@@ -16213,17 +16674,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob-promise@npm:^4.2.0":
-  version: 4.2.2
-  resolution: "glob-promise@npm:4.2.2"
-  dependencies:
-    "@types/glob": "npm:^7.1.3"
-  peerDependencies:
-    glob: ^7.1.6
-  checksum: 10c0/3eb01bed2901539365df6a4d27800afb8788840647d01f9bf3500b3de756597f2ff4b8c823971ace34db228c83159beca459dc42a70968d4e9c8200ed2cc96bd
-  languageName: node
-  linkType: hard
-
 "glob-to-regexp@npm:^0.4.1":
   version: 0.4.1
   resolution: "glob-to-regexp@npm:0.4.1"
@@ -16260,7 +16710,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:^7.1.2, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.2.0":
+"glob@npm:^7.1.2, glob@npm:^7.1.3, glob@npm:^7.1.4":
   version: 7.2.3
   resolution: "glob@npm:7.2.3"
   dependencies:
@@ -16369,6 +16819,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globrex@npm:^0.1.2":
+  version: 0.1.2
+  resolution: "globrex@npm:0.1.2"
+  checksum: 10c0/a54c029520cf58bda1d8884f72bd49b4cd74e977883268d931fd83bcbd1a9eb96d57c7dbd4ad80148fb9247467ebfb9b215630b2ed7563b2a8de02e1ff7f89d1
+  languageName: node
+  linkType: hard
+
 "google-auth-library@npm:^7.14.0":
   version: 7.14.1
   resolution: "google-auth-library@npm:7.14.1"
@@ -16406,7 +16863,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"graceful-fs@npm:^4.1.11, graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.3, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.11, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9":
+"graceful-fs@npm:^4.1.11, graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.3, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9":
   version: 4.2.11
   resolution: "graceful-fs@npm:4.2.11"
   checksum: 10c0/386d011a553e02bc594ac2ca0bd6d9e4c22d7fa8cfbfc448a6d148c59ea881b092db9dbe3547ae4b88e55f1b01f7c4a2ecc53b310c042793e63aa44cf6c257f2
@@ -16477,24 +16934,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"handlebars@npm:^4.7.7":
-  version: 4.7.8
-  resolution: "handlebars@npm:4.7.8"
-  dependencies:
-    minimist: "npm:^1.2.5"
-    neo-async: "npm:^2.6.2"
-    source-map: "npm:^0.6.1"
-    uglify-js: "npm:^3.1.4"
-    wordwrap: "npm:^1.0.0"
-  dependenciesMeta:
-    uglify-js:
-      optional: true
-  bin:
-    handlebars: bin/handlebars
-  checksum: 10c0/7aff423ea38a14bb379316f3857fe0df3c5d66119270944247f155ba1f08e07a92b340c58edaa00cfe985c21508870ee5183e0634dcb53dd405f35c93ef7f10d
-  languageName: node
-  linkType: hard
-
 "happy-dom@npm:^14.12.0":
   version: 14.12.0
   resolution: "happy-dom@npm:14.12.0"
@@ -16801,6 +17240,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"hermes-estree@npm:0.25.1":
+  version: 0.25.1
+  resolution: "hermes-estree@npm:0.25.1"
+  checksum: 10c0/48be3b2fa37a0cbc77a112a89096fa212f25d06de92781b163d67853d210a8a5c3784fac23d7d48335058f7ed283115c87b4332c2a2abaaccc76d0ead1a282ac
+  languageName: node
+  linkType: hard
+
+"hermes-parser@npm:0.25.1":
+  version: 0.25.1
+  resolution: "hermes-parser@npm:0.25.1"
+  dependencies:
+    hermes-estree: "npm:0.25.1"
+  checksum: 10c0/3abaa4c6f1bcc25273f267297a89a4904963ea29af19b8e4f6eabe04f1c2c7e9abd7bfc4730ddb1d58f2ea04b6fee74053d8bddb5656ec6ebf6c79cc8d14202c
+  languageName: node
+  linkType: hard
+
 "highlight.js@npm:^10.4.1, highlight.js@npm:~10.7.0":
   version: 10.7.3
   resolution: "highlight.js@npm:10.7.3"
@@ -17156,6 +17611,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"human-signals@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "human-signals@npm:8.0.0"
+  checksum: 10c0/e4dac4f7d3eb791ed04129fc6a85bd454a9102d3e3b76c911d0db7057ebd60b2956b435b5b5712aec18960488ede3c21ef7c56e42cdd70760c0d84d3c05cd92e
+  languageName: node
+  linkType: hard
+
 "humanize-ms@npm:^1.2.1":
   version: 1.2.1
   resolution: "humanize-ms@npm:1.2.1"
@@ -17266,10 +17728,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ignore@npm:^5.0.0, ignore@npm:^5.0.4, ignore@npm:^5.0.5, ignore@npm:^5.1.1, ignore@npm:^5.2.0, ignore@npm:^5.2.4":
-  version: 5.3.1
-  resolution: "ignore@npm:5.3.1"
-  checksum: 10c0/703f7f45ffb2a27fb2c5a8db0c32e7dee66b33a225d28e8db4e1be6474795f606686a6e3bcc50e1aa12f2042db4c9d4a7d60af3250511de74620fbed052ea4cd
+"ignore@npm:^5.0.0, ignore@npm:^5.0.4, ignore@npm:^5.0.5, ignore@npm:^5.1.1, ignore@npm:^5.2.0, ignore@npm:^5.2.4, ignore@npm:^5.3.1":
+  version: 5.3.2
+  resolution: "ignore@npm:5.3.2"
+  checksum: 10c0/f9f652c957983634ded1e7f02da3b559a0d4cc210fca3792cb67f1b153623c9c42efdc1c4121af171e295444459fc4a9201101fb041b1104a3c000bccb188337
   languageName: node
   linkType: hard
 
@@ -17936,7 +18398,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-plain-obj@npm:^4.0.0":
+"is-plain-obj@npm:^4.0.0, is-plain-obj@npm:^4.1.0":
   version: 4.1.0
   resolution: "is-plain-obj@npm:4.1.0"
   checksum: 10c0/32130d651d71d9564dc88ba7e6fda0e91a1010a3694648e9f4f47bb6080438140696d3e3e15c741411d712e47ac9edc1a8a9de1fe76f3487b0d90be06ac9975e
@@ -17966,7 +18428,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-reference@npm:^3.0.0, is-reference@npm:^3.0.1, is-reference@npm:^3.0.2":
+"is-reference@npm:^3.0.0, is-reference@npm:^3.0.2":
   version: 3.0.2
   resolution: "is-reference@npm:3.0.2"
   dependencies:
@@ -18022,6 +18484,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-stream@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "is-stream@npm:4.0.1"
+  checksum: 10c0/2706c7f19b851327ba374687bc4a3940805e14ca496dc672b9629e744d143b1ad9c6f1b162dece81c7bfbc0f83b32b61ccc19ad2e05aad2dd7af347408f60c7f
+  languageName: node
+  linkType: hard
+
 "is-string@npm:^1.0.5, is-string@npm:^1.0.7":
   version: 1.0.7
   resolution: "is-string@npm:1.0.7"
@@ -18056,6 +18525,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-unicode-supported@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "is-unicode-supported@npm:2.1.0"
+  checksum: 10c0/a0f53e9a7c1fdbcf2d2ef6e40d4736fdffff1c9f8944c75e15425118ff3610172c87bf7bc6c34d3903b04be59790bb2212ddbe21ee65b5a97030fc50370545a5
+  languageName: node
+  linkType: hard
+
 "is-weakmap@npm:^2.0.1":
   version: 2.0.1
   resolution: "is-weakmap@npm:2.0.1"
@@ -18332,16 +18808,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jiti@npm:^1.20.0":
-  version: 1.21.0
-  resolution: "jiti@npm:1.21.0"
-  bin:
-    jiti: bin/jiti.js
-  checksum: 10c0/7f361219fe6c7a5e440d5f1dba4ab763a5538d2df8708cdc22561cf25ea3e44b837687931fca7cdd8cdd9f567300e90be989dd1321650045012d8f9ed6aab07f
-  languageName: node
-  linkType: hard
-
-"jiti@npm:^1.21.6":
+"jiti@npm:^1.20.0, jiti@npm:^1.21.6":
   version: 1.21.6
   resolution: "jiti@npm:1.21.6"
   bin:
@@ -18407,17 +18874,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"js-yaml@npm:4.1.0, js-yaml@npm:^4.1.0":
-  version: 4.1.0
-  resolution: "js-yaml@npm:4.1.0"
-  dependencies:
-    argparse: "npm:^2.0.1"
-  bin:
-    js-yaml: bin/js-yaml.js
-  checksum: 10c0/184a24b4eaacfce40ad9074c64fd42ac83cf74d8c8cd137718d456ced75051229e5061b8633c3366b8aada17945a7a356b337828c19da92b51ae62126575018f
-  languageName: node
-  linkType: hard
-
 "js-yaml@npm:^3.10.0, js-yaml@npm:^3.13.1":
   version: 3.14.1
   resolution: "js-yaml@npm:3.14.1"
@@ -18430,6 +18886,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"js-yaml@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "js-yaml@npm:4.1.0"
+  dependencies:
+    argparse: "npm:^2.0.1"
+  bin:
+    js-yaml: bin/js-yaml.js
+  checksum: 10c0/184a24b4eaacfce40ad9074c64fd42ac83cf74d8c8cd137718d456ced75051229e5061b8633c3366b8aada17945a7a356b337828c19da92b51ae62126575018f
+  languageName: node
+  linkType: hard
+
 "jscodeshift@npm:^0.13.1":
   version: 0.13.1
   resolution: "jscodeshift@npm:0.13.1"
@@ -18512,6 +18979,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jsesc@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "jsesc@npm:3.0.2"
+  bin:
+    jsesc: bin/jsesc
+  checksum: 10c0/ef22148f9e793180b14d8a145ee6f9f60f301abf443288117b4b6c53d0ecd58354898dc506ccbb553a5f7827965cd38bc5fb726575aae93c5e8915e2de8290e1
+  languageName: node
+  linkType: hard
+
 "jsesc@npm:~0.5.0":
   version: 0.5.0
   resolution: "jsesc@npm:0.5.0"
@@ -18832,6 +19308,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"knitwork@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "knitwork@npm:1.1.0"
+  checksum: 10c0/e23c679d4ded01890ab2669ccde2e85e4d7e6ba327b1395ff657f8067c7d73dc134fc8cd8188c653de4a687be7fa9c130bd36c3e2f76d8685e8b97ff8b30779c
+  languageName: node
+  linkType: hard
+
 "language-subtag-registry@npm:^0.3.20":
   version: 0.3.22
   resolution: "language-subtag-registry@npm:0.3.22"
@@ -18961,6 +19444,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lines-and-columns@npm:2.0.3":
+  version: 2.0.3
+  resolution: "lines-and-columns@npm:2.0.3"
+  checksum: 10c0/09525c10010a925b7efe858f1dd3184eeac34f0a9bc34993075ec490efad71e948147746b18e9540279cc87cd44085b038f986903db3de65ffe96d38a7b91c4c
+  languageName: node
+  linkType: hard
+
 "lines-and-columns@npm:^1.1.6":
   version: 1.2.4
   resolution: "lines-and-columns@npm:1.2.4"
@@ -18968,7 +19458,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lines-and-columns@npm:^2.0.3, lines-and-columns@npm:~2.0.3":
+"lines-and-columns@npm:^2.0.3":
   version: 2.0.4
   resolution: "lines-and-columns@npm:2.0.4"
   checksum: 10c0/4db28bf065cd7ad897c0700f22d3d0d7c5ed6777e138861c601c496d545340df3fc19e18bd04ff8d95a246a245eb55685b82ca2f8c2ca53a008e9c5316250379
@@ -19337,15 +19827,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loupe@npm:^2.3.6":
-  version: 2.3.7
-  resolution: "loupe@npm:2.3.7"
-  dependencies:
-    get-func-name: "npm:^2.0.1"
-  checksum: 10c0/71a781c8fc21527b99ed1062043f1f2bb30bdaf54fa4cf92463427e1718bc6567af2988300bc243c1f276e4f0876f29e3cbf7b58106fdc186915687456ce5bf4
-  languageName: node
-  linkType: hard
-
 "loupe@npm:^3.1.0, loupe@npm:^3.1.1":
   version: 3.1.1
   resolution: "loupe@npm:3.1.1"
@@ -19456,7 +19937,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"magic-string@npm:^0.30.0, magic-string@npm:^0.30.10, magic-string@npm:^0.30.11, magic-string@npm:^0.30.4, magic-string@npm:^0.30.5":
+"magic-string@npm:^0.30.0, magic-string@npm:^0.30.11, magic-string@npm:^0.30.5":
   version: 0.30.11
   resolution: "magic-string@npm:0.30.11"
   dependencies:
@@ -19465,6 +19946,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"magic-string@npm:^0.30.12":
+  version: 0.30.12
+  resolution: "magic-string@npm:0.30.12"
+  dependencies:
+    "@jridgewell/sourcemap-codec": "npm:^1.5.0"
+  checksum: 10c0/469f457d18af37dfcca8617086ea8a65bcd8b60ba8a1182cb024ce43e470ace3c9d1cb6bee58d3b311768fb16bc27bd50bdeebcaa63dadd0fd46cac4d2e11d5f
+  languageName: node
+  linkType: hard
+
 "magicast@npm:^0.3.4":
   version: 0.3.4
   resolution: "magicast@npm:0.3.4"
@@ -19945,13 +20435,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mdn-data@npm:2.0.30":
-  version: 2.0.30
-  resolution: "mdn-data@npm:2.0.30"
-  checksum: 10c0/a2c472ea16cee3911ae742593715aa4c634eb3d4b9f1e6ada0902aa90df13dcbb7285d19435f3ff213ebaa3b2e0c0265c1eb0e3fb278fda7f8919f046a410cd9
-  languageName: node
-  linkType: hard
-
 "media-typer@npm:0.3.0":
   version: 0.3.0
   resolution: "media-typer@npm:0.3.0"
@@ -20897,7 +21380,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimist@npm:^1.0.0, minimist@npm:^1.2.0, minimist@npm:^1.2.5, minimist@npm:^1.2.6, minimist@npm:^1.2.8":
+"minimist@npm:^1.0.0, minimist@npm:^1.2.0, minimist@npm:^1.2.6, minimist@npm:^1.2.8":
   version: 1.2.8
   resolution: "minimist@npm:1.2.8"
   checksum: 10c0/19d3fcdca050087b84c2029841a093691a91259a47def2f18222f41e7645a0b7c44ef4b40e88a1e58a40c84d2ef0ee6047c55594d298146d0eb3f6b737c20ce6
@@ -21068,6 +21551,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"module-replacements@npm:^2.1.0":
+  version: 2.5.0
+  resolution: "module-replacements@npm:2.5.0"
+  checksum: 10c0/7fcbcb19151778a2f2fa70b7bffb134bb8922b2306e2a0d7b4a863467a9d6d9d5fed537763c43272e22b69dbddaf1610746b42a68b4663aa225e85f9ae9b03c8
+  languageName: node
+  linkType: hard
+
 "mri@npm:^1.1.0, mri@npm:^1.2.0":
   version: 1.2.0
   resolution: "mri@npm:1.2.0"
@@ -21096,22 +21586,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ms@npm:2.1.3, ms@npm:^2.0.0, ms@npm:^2.1.1":
+"ms@npm:2.1.3, ms@npm:^2.0.0, ms@npm:^2.1.1, ms@npm:^2.1.3":
   version: 2.1.3
   resolution: "ms@npm:2.1.3"
   checksum: 10c0/d924b57e7312b3b63ad21fc5b3dc0af5e78d61a1fc7cfb5457edaf26326bf62be5307cc87ffb6862ef1c2b33b0233cdb5d4f01c4c958cc0d660948b65a287a48
   languageName: node
   linkType: hard
 
-"msw@npm:^2.3.2":
-  version: 2.3.5
-  resolution: "msw@npm:2.3.5"
+"msw@npm:^2.3.5":
+  version: 2.4.8
+  resolution: "msw@npm:2.4.8"
   dependencies:
     "@bundled-es-modules/cookie": "npm:^2.0.0"
     "@bundled-es-modules/statuses": "npm:^1.0.1"
     "@bundled-es-modules/tough-cookie": "npm:^0.1.6"
     "@inquirer/confirm": "npm:^3.0.0"
-    "@mswjs/interceptors": "npm:^0.29.0"
+    "@mswjs/interceptors": "npm:^0.35.6"
     "@open-draft/until": "npm:^2.1.0"
     "@types/cookie": "npm:^0.6.0"
     "@types/statuses": "npm:^2.0.4"
@@ -21120,18 +21610,18 @@ __metadata:
     headers-polyfill: "npm:^4.0.2"
     is-node-process: "npm:^1.2.0"
     outvariant: "npm:^1.4.2"
-    path-to-regexp: "npm:^6.2.0"
+    path-to-regexp: "npm:^6.3.0"
     strict-event-emitter: "npm:^0.5.1"
     type-fest: "npm:^4.9.0"
     yargs: "npm:^17.7.2"
   peerDependencies:
-    typescript: ">= 4.7.x"
+    typescript: ">= 4.8.x"
   peerDependenciesMeta:
     typescript:
       optional: true
   bin:
     msw: cli/index.js
-  checksum: 10c0/f944d8eb67ccdcf74aba0ce433395a9616420b8b36d43f033635817ef7535553c7bf6854392a95b093546e3481ca99e9017525b6c0bd02f51528b669e672214d
+  checksum: 10c0/33a8c5697f7cb003a2af33ff6b259eaf7babf180fadf0697d107d0856ab0d2ff1a80d319e788d9127f289ff091334bee589f348180a1fdd0914bf8c4725830dc
   languageName: node
   linkType: hard
 
@@ -21239,31 +21729,32 @@ __metadata:
   languageName: node
   linkType: hard
 
-"next@npm:^14.1.0, next@npm:^14.2.5":
-  version: 14.2.5
-  resolution: "next@npm:14.2.5"
+"next@npm:^15.0.3":
+  version: 15.0.3
+  resolution: "next@npm:15.0.3"
   dependencies:
-    "@next/env": "npm:14.2.5"
-    "@next/swc-darwin-arm64": "npm:14.2.5"
-    "@next/swc-darwin-x64": "npm:14.2.5"
-    "@next/swc-linux-arm64-gnu": "npm:14.2.5"
-    "@next/swc-linux-arm64-musl": "npm:14.2.5"
-    "@next/swc-linux-x64-gnu": "npm:14.2.5"
-    "@next/swc-linux-x64-musl": "npm:14.2.5"
-    "@next/swc-win32-arm64-msvc": "npm:14.2.5"
-    "@next/swc-win32-ia32-msvc": "npm:14.2.5"
-    "@next/swc-win32-x64-msvc": "npm:14.2.5"
-    "@swc/helpers": "npm:0.5.5"
+    "@next/env": "npm:15.0.3"
+    "@next/swc-darwin-arm64": "npm:15.0.3"
+    "@next/swc-darwin-x64": "npm:15.0.3"
+    "@next/swc-linux-arm64-gnu": "npm:15.0.3"
+    "@next/swc-linux-arm64-musl": "npm:15.0.3"
+    "@next/swc-linux-x64-gnu": "npm:15.0.3"
+    "@next/swc-linux-x64-musl": "npm:15.0.3"
+    "@next/swc-win32-arm64-msvc": "npm:15.0.3"
+    "@next/swc-win32-x64-msvc": "npm:15.0.3"
+    "@swc/counter": "npm:0.1.3"
+    "@swc/helpers": "npm:0.5.13"
     busboy: "npm:1.6.0"
     caniuse-lite: "npm:^1.0.30001579"
-    graceful-fs: "npm:^4.2.11"
     postcss: "npm:8.4.31"
-    styled-jsx: "npm:5.1.1"
+    sharp: "npm:^0.33.5"
+    styled-jsx: "npm:5.1.6"
   peerDependencies:
     "@opentelemetry/api": ^1.1.0
     "@playwright/test": ^1.41.2
-    react: ^18.2.0
-    react-dom: ^18.2.0
+    babel-plugin-react-compiler: "*"
+    react: ^18.2.0 || 19.0.0-rc-66855b96-20241106
+    react-dom: ^18.2.0 || 19.0.0-rc-66855b96-20241106
     sass: ^1.3.0
   dependenciesMeta:
     "@next/swc-darwin-arm64":
@@ -21280,20 +21771,22 @@ __metadata:
       optional: true
     "@next/swc-win32-arm64-msvc":
       optional: true
-    "@next/swc-win32-ia32-msvc":
-      optional: true
     "@next/swc-win32-x64-msvc":
       optional: true
+    sharp:
+      optional: true
   peerDependenciesMeta:
     "@opentelemetry/api":
       optional: true
     "@playwright/test":
       optional: true
+    babel-plugin-react-compiler:
+      optional: true
     sass:
       optional: true
   bin:
     next: dist/bin/next
-  checksum: 10c0/8df7d8ccc1a5bab03fa50dd6656c8a6f3750e81ef0b087dc329fea9346847c3094a933a890a8e87151dc32f0bc55020b8f6386d4565856d83bcc10895d29ec08
+  checksum: 10c0/c5f6a57acb5f29063abc82d4d4417a048d0c2d5216d6ded6aa3fe32d60bb4835ed57dd34e2ef8fdda15579e97205820dc25bf34556b1d942a01a33d9ae7f88db
   languageName: node
   linkType: hard
 
@@ -21444,6 +21937,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-modules-regexp@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "node-modules-regexp@npm:1.0.0"
+  checksum: 10c0/d4a9b6425a18e9fadd38f21a7f7820b3bfda4663c7d3b9f80043e3f5f7e27a0a1e04f524077b00a15ae77148cd81319da5772900229d89541062f7e876b36763
+  languageName: node
+  linkType: hard
+
 "node-polyfill-webpack-plugin@npm:^2.0.1":
   version: 2.0.1
   resolution: "node-polyfill-webpack-plugin@npm:2.0.1"
@@ -21643,6 +22143,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"npm-run-path@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "npm-run-path@npm:6.0.0"
+  dependencies:
+    path-key: "npm:^4.0.0"
+    unicorn-magic: "npm:^0.3.0"
+  checksum: 10c0/b223c8a0dcd608abf95363ea5c3c0ccc3cd877daf0102eaf1b0f2390d6858d8337fbb7c443af2403b067a7d2c116d10691ecd22ab3c5273c44da1ff8d07753bd
+  languageName: node
+  linkType: hard
+
 "npmlog@npm:^6.0.0":
   version: 6.0.2
   resolution: "npmlog@npm:6.0.2"
@@ -21676,40 +22186,39 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nx@npm:18.0.6":
-  version: 18.0.6
-  resolution: "nx@npm:18.0.6"
+"nx@npm:20.2.2":
+  version: 20.2.2
+  resolution: "nx@npm:20.2.2"
   dependencies:
-    "@nrwl/tao": "npm:18.0.6"
-    "@nx/nx-darwin-arm64": "npm:18.0.6"
-    "@nx/nx-darwin-x64": "npm:18.0.6"
-    "@nx/nx-freebsd-x64": "npm:18.0.6"
-    "@nx/nx-linux-arm-gnueabihf": "npm:18.0.6"
-    "@nx/nx-linux-arm64-gnu": "npm:18.0.6"
-    "@nx/nx-linux-arm64-musl": "npm:18.0.6"
-    "@nx/nx-linux-x64-gnu": "npm:18.0.6"
-    "@nx/nx-linux-x64-musl": "npm:18.0.6"
-    "@nx/nx-win32-arm64-msvc": "npm:18.0.6"
-    "@nx/nx-win32-x64-msvc": "npm:18.0.6"
+    "@napi-rs/wasm-runtime": "npm:0.2.4"
+    "@nx/nx-darwin-arm64": "npm:20.2.2"
+    "@nx/nx-darwin-x64": "npm:20.2.2"
+    "@nx/nx-freebsd-x64": "npm:20.2.2"
+    "@nx/nx-linux-arm-gnueabihf": "npm:20.2.2"
+    "@nx/nx-linux-arm64-gnu": "npm:20.2.2"
+    "@nx/nx-linux-arm64-musl": "npm:20.2.2"
+    "@nx/nx-linux-x64-gnu": "npm:20.2.2"
+    "@nx/nx-linux-x64-musl": "npm:20.2.2"
+    "@nx/nx-win32-arm64-msvc": "npm:20.2.2"
+    "@nx/nx-win32-x64-msvc": "npm:20.2.2"
     "@yarnpkg/lockfile": "npm:^1.1.0"
-    "@yarnpkg/parsers": "npm:3.0.0-rc.46"
-    "@zkochan/js-yaml": "npm:0.0.6"
-    axios: "npm:^1.6.0"
+    "@yarnpkg/parsers": "npm:3.0.2"
+    "@zkochan/js-yaml": "npm:0.0.7"
+    axios: "npm:^1.7.4"
     chalk: "npm:^4.1.0"
     cli-cursor: "npm:3.1.0"
     cli-spinners: "npm:2.6.1"
     cliui: "npm:^8.0.1"
-    dotenv: "npm:~16.3.1"
-    dotenv-expand: "npm:~10.0.0"
+    dotenv: "npm:~16.4.5"
+    dotenv-expand: "npm:~11.0.6"
     enquirer: "npm:~2.3.6"
     figures: "npm:3.2.0"
     flat: "npm:^5.0.2"
-    fs-extra: "npm:^11.1.0"
+    front-matter: "npm:^4.0.2"
     ignore: "npm:^5.0.4"
     jest-diff: "npm:^29.4.1"
-    js-yaml: "npm:4.1.0"
     jsonc-parser: "npm:3.2.0"
-    lines-and-columns: "npm:~2.0.3"
+    lines-and-columns: "npm:2.0.3"
     minimatch: "npm:9.0.3"
     node-machine-id: "npm:1.1.12"
     npm-run-path: "npm:^4.0.1"
@@ -21717,11 +22226,11 @@ __metadata:
     ora: "npm:5.3.0"
     semver: "npm:^7.5.3"
     string-width: "npm:^4.2.3"
-    strong-log-transformer: "npm:^2.1.0"
     tar-stream: "npm:~2.2.0"
     tmp: "npm:~0.2.1"
     tsconfig-paths: "npm:^4.1.2"
     tslib: "npm:^2.3.0"
+    yaml: "npm:^2.6.0"
     yargs: "npm:^17.6.2"
     yargs-parser: "npm:21.1.1"
   peerDependencies:
@@ -21756,7 +22265,7 @@ __metadata:
   bin:
     nx: bin/nx.js
     nx-cloud: bin/nx-cloud.js
-  checksum: 10c0/608ffda300706d8cf067428921a76d62157b20131796c006258d96b493efba7618572c7dfa8cdab4b7dfb47a8adbcacd65fb69d03dc7480d8229236a1f2cc881
+  checksum: 10c0/2046068295be6d33fe11505978ec1a770af272c959ef9aba5341c343f590dbed634958a07dc365d90e9feb0b62b9a06289c7cf3d88090e13062ece13e187b6f3
   languageName: node
   linkType: hard
 
@@ -22064,7 +22573,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"outvariant@npm:^1.2.1, outvariant@npm:^1.4.0, outvariant@npm:^1.4.2":
+"outvariant@npm:^1.4.0, outvariant@npm:^1.4.2, outvariant@npm:^1.4.3":
   version: 1.4.3
   resolution: "outvariant@npm:1.4.3"
   checksum: 10c0/5976ca7740349cb8c71bd3382e2a762b1aeca6f33dc984d9d896acdf3c61f78c3afcf1bfe9cc633a7b3c4b295ec94d292048f83ea2b2594fae4496656eba992c
@@ -22389,6 +22898,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"parse-ms@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "parse-ms@npm:4.0.0"
+  checksum: 10c0/a7900f4f1ebac24cbf5e9708c16fb2fd482517fad353aecd7aefb8c2ba2f85ce017913ccb8925d231770404780df46244ea6fec598b3bde6490882358b4d2d16
+  languageName: node
+  linkType: hard
+
 "parse-node-version@npm:^1.0.1":
   version: 1.0.1
   resolution: "parse-node-version@npm:1.0.1"
@@ -22446,7 +22962,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pascal-case@npm:^3.1.2":
+"pascal-case@npm:^3.1.1, pascal-case@npm:^3.1.2":
   version: 3.1.2
   resolution: "pascal-case@npm:3.1.2"
   dependencies:
@@ -22566,10 +23082,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"path-to-regexp@npm:^6.2.0":
-  version: 6.2.2
-  resolution: "path-to-regexp@npm:6.2.2"
-  checksum: 10c0/4b60852d3501fd05ca9dd08c70033d73844e5eca14e41f499f069afa8364f780f15c5098002f93bd42af8b3514de62ac6e82a53b5662de881d2b08c9ef21ea6b
+"path-to-regexp@npm:^6.3.0":
+  version: 6.3.0
+  resolution: "path-to-regexp@npm:6.3.0"
+  checksum: 10c0/73b67f4638b41cde56254e6354e46ae3a2ebc08279583f6af3d96fe4664fc75788f74ed0d18ca44fa4a98491b69434f9eee73b97bb5314bd1b5adb700f5c18d6
   languageName: node
   linkType: hard
 
@@ -22594,13 +23110,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pathval@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "pathval@npm:1.1.1"
-  checksum: 10c0/f63e1bc1b33593cdf094ed6ff5c49c1c0dc5dc20a646ca9725cc7fe7cd9995002d51d5685b9b2ec6814342935748b711bafa840f84c0bb04e38ff40a335c94dc
-  languageName: node
-  linkType: hard
-
 "pathval@npm:^2.0.0":
   version: 2.0.0
   resolution: "pathval@npm:2.0.0"
@@ -22639,7 +23148,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"periscopic@npm:^3.0.0, periscopic@npm:^3.1.0":
+"periscopic@npm:^3.0.0":
   version: 3.1.0
   resolution: "periscopic@npm:3.1.0"
   dependencies:
@@ -22657,10 +23166,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picocolors@npm:^1.0.0, picocolors@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "picocolors@npm:1.0.1"
-  checksum: 10c0/c63cdad2bf812ef0d66c8db29583802355d4ca67b9285d846f390cc15c2f6ccb94e8cb7eb6a6e97fc5990a6d3ad4ae42d86c84d3146e667c739a4234ed50d400
+"picocolors@npm:^1.0.0, picocolors@npm:^1.0.1, picocolors@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "picocolors@npm:1.1.0"
+  checksum: 10c0/86946f6032148801ef09c051c6fb13b5cf942eaf147e30ea79edb91dd32d700934edebe782a1078ff859fb2b816792e97ef4dab03d7f0b804f6b01a0df35e023
   languageName: node
   linkType: hard
 
@@ -22678,6 +23187,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"picomatch@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "picomatch@npm:4.0.2"
+  checksum: 10c0/7c51f3ad2bb42c776f49ebf964c644958158be30d0a510efd5a395e8d49cb5acfed5b82c0c5b365523ce18e6ab85013c9ebe574f60305892ec3fa8eee8304ccc
+  languageName: node
+  linkType: hard
+
+"picoquery@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "picoquery@npm:1.4.0"
+  dependencies:
+    fast-decode-uri-component: "npm:^1.0.1"
+  checksum: 10c0/8c2bdb85eabb51ce1534d0a70ac288dac8d241a32e5d1ee960ee1ed7c5f522752db23cdc63318ac69ce892bdbcc465f4e2d25a5b970b7a29ffa36455cc2d022c
+  languageName: node
+  linkType: hard
+
 "pidtree@npm:0.6.0":
   version: 0.6.0
   resolution: "pidtree@npm:0.6.0"
@@ -22701,6 +23226,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pirates@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "pirates@npm:3.0.2"
+  dependencies:
+    node-modules-regexp: "npm:^1.0.0"
+  checksum: 10c0/f71519f64abff750ad00398e7a0f724e7d3af0ce14c0cf149a47dd9e1fae5e9aea24cb3a63b4ce8dce8b051f7d44531af6743078e33f72cb8602c5a7365185d1
+  languageName: node
+  linkType: hard
+
 "pirates@npm:^4.0.5":
   version: 4.0.6
   resolution: "pirates@npm:4.0.6"
@@ -22765,27 +23299,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"playwright-core@npm:1.46.0":
-  version: 1.46.0
-  resolution: "playwright-core@npm:1.46.0"
+"playwright-core@npm:1.48.1":
+  version: 1.48.1
+  resolution: "playwright-core@npm:1.48.1"
   bin:
     playwright-core: cli.js
-  checksum: 10c0/2d2d163dc22a424a86765b25c5523e932748f38d071f49ac6c41f14c8c10c0874b3854a290057e9988c5e876bb8be8aa52fe40ee8c57b3390b9c01593074e3df
+  checksum: 10c0/2f75532b9b7dfa0e586f5660ac1d8ea729bbdbd28dd2c0711e7cfc1adfe5cf7448d7f15a018ec9851a8f50c0743c3990cb9df23064bed603627baeac4dce3915
   languageName: node
   linkType: hard
 
-"playwright@npm:1.46.0":
-  version: 1.46.0
-  resolution: "playwright@npm:1.46.0"
+"playwright@npm:1.48.1":
+  version: 1.48.1
+  resolution: "playwright@npm:1.48.1"
   dependencies:
     fsevents: "npm:2.3.2"
-    playwright-core: "npm:1.46.0"
+    playwright-core: "npm:1.48.1"
   dependenciesMeta:
     fsevents:
       optional: true
   bin:
     playwright: cli.js
-  checksum: 10c0/fa4192af99908c2c02ae20880e27f51efa6694348c2496d1c2818908eb394c4b21947edd0c5ce2a83f471f5399ac3f0cee8a7be8a35cd80d32d32875184962c7
+  checksum: 10c0/96280ae656226e52015c0c69c4c19e9f594c19353a79012a19bd7b7175d7b409c1aed289a629df49ef897a57ccd24668ad15b86c283db10f76212a4db90a94ac
   languageName: node
   linkType: hard
 
@@ -22823,6 +23357,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"polka@npm:^1.0.0-next.28":
+  version: 1.0.0-next.28
+  resolution: "polka@npm:1.0.0-next.28"
+  dependencies:
+    "@polka/url": "npm:^1.0.0-next.21"
+    trouter: "npm:^4.0.0"
+  checksum: 10c0/206bab3eb1c3c44c2fba9704d998b144ec36c4852b0b97192a1fd3953f215b739e2286852492c13dcc9faecea0f7825a76356d6eef7e02afd6a800d1dbb84ead
+  languageName: node
+  linkType: hard
+
 "popper.js@npm:^1.16.0":
   version: 1.16.1
   resolution: "popper.js@npm:1.16.1"
@@ -23148,16 +23692,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:*, prettier@npm:^3.1.1":
-  version: 3.2.5
-  resolution: "prettier@npm:3.2.5"
-  bin:
-    prettier: bin/prettier.cjs
-  checksum: 10c0/ea327f37a7d46f2324a34ad35292af2ad4c4c3c3355da07313339d7e554320f66f65f91e856add8530157a733c6c4a897dc41b577056be5c24c40f739f5ee8c6
-  languageName: node
-  linkType: hard
-
-"prettier@npm:^3.2.5":
+"prettier@npm:*, prettier@npm:^3.1.1, prettier@npm:^3.2.5":
   version: 3.3.3
   resolution: "prettier@npm:3.3.3"
   bin:
@@ -23212,6 +23747,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pretty-ms@npm:^9.0.0":
+  version: 9.2.0
+  resolution: "pretty-ms@npm:9.2.0"
+  dependencies:
+    parse-ms: "npm:^4.0.0"
+  checksum: 10c0/ab6d066f90e9f77020426986e1b018369f41575674544c539aabec2e63a20fec01166d8cf6571d0e165ad11cfe5a8134a2a48a36d42ab291c59c6deca5264cbb
+  languageName: node
+  linkType: hard
+
 "prettyjson@npm:^1.2.1":
   version: 1.2.5
   resolution: "prettyjson@npm:1.2.5"
@@ -23585,7 +24129,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"qs@npm:^6.10.0, qs@npm:^6.11.1, qs@npm:^6.11.2, qs@npm:^6.4.0":
+"qs@npm:^6.11.1, qs@npm:^6.11.2, qs@npm:^6.4.0":
   version: 6.12.3
   resolution: "qs@npm:6.12.3"
   dependencies:
@@ -23642,13 +24186,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ramda@npm:0.29.0":
-  version: 0.29.0
-  resolution: "ramda@npm:0.29.0"
-  checksum: 10c0/b00eaaf1c62b06a99affa1d583e256bd65ad27ab9d0ef512f55d7d93b842e7cd244a4a09179f61fdd8548362e409323867a2b0477cbd0626b5644eb6ac7c53da
-  languageName: node
-  linkType: hard
-
 "randombytes@npm:^2.0.0, randombytes@npm:^2.0.1, randombytes@npm:^2.0.5, randombytes@npm:^2.1.0":
   version: 2.1.0
   resolution: "randombytes@npm:2.1.0"
@@ -23944,10 +24481,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-refresh@npm:^0.14.0":
-  version: 0.14.0
-  resolution: "react-refresh@npm:0.14.0"
-  checksum: 10c0/b8ae07ad153357d77830928a7f1fc2df837aabefee907fa273ba04c7643f3b860e986f1d4b7ada9b721c8d79b8c24b5b911a314a1a2398b105f1b13d19ea2b8d
+"react-refresh@npm:^0.14.0, react-refresh@npm:^0.14.2":
+  version: 0.14.2
+  resolution: "react-refresh@npm:0.14.2"
+  checksum: 10c0/875b72ef56b147a131e33f2abd6ec059d1989854b3ff438898e4f9310bfcc73acff709445b7ba843318a953cb9424bcc2c05af2b3d80011cee28f25aef3e2ebb
   languageName: node
   linkType: hard
 
@@ -24176,6 +24713,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"readdirp@npm:^4.0.1":
+  version: 4.0.2
+  resolution: "readdirp@npm:4.0.2"
+  checksum: 10c0/a16ecd8ef3286dcd90648c3b103e3826db2b766cdb4a988752c43a83f683d01c7059158d623cbcd8bdfb39e65d302d285be2d208e7d9f34d022d912b929217dd
+  languageName: node
+  linkType: hard
+
 "readdirp@npm:~3.6.0":
   version: 3.6.0
   resolution: "readdirp@npm:3.6.0"
@@ -24350,6 +24894,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"regexparam@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "regexparam@npm:3.0.0"
+  checksum: 10c0/a6430d7b97d5a7d5518f37a850b6b73aab479029d02f46af4fa0e8e4a1d7aad05b7a0d2d10c86ded21a14d5f0fa4c68525f873a5fca2efeefcccd93c36627459
+  languageName: node
+  linkType: hard
+
 "regexpp@npm:^3.2.0":
   version: 3.2.0
   resolution: "regexpp@npm:3.2.0"
@@ -25062,6 +25613,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rollup-pluginutils@npm:^2.8.2":
+  version: 2.8.2
+  resolution: "rollup-pluginutils@npm:2.8.2"
+  dependencies:
+    estree-walker: "npm:^0.6.1"
+  checksum: 10c0/20947bec5a5dd68b5c5c8423911e6e7c0ad834c451f1a929b1f4e2bc08836ad3f1a722ef2bfcbeca921870a0a283f13f064a317dc7a6768496e98c9a641ba290
+  languageName: node
+  linkType: hard
+
 "rollup@npm:^3.27.1":
   version: 3.29.4
   resolution: "rollup@npm:3.29.4"
@@ -25289,19 +25849,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sass-loader@npm:^13.2.0":
-  version: 13.3.3
-  resolution: "sass-loader@npm:13.3.3"
+"sass-loader@npm:^14.2.1":
+  version: 14.2.1
+  resolution: "sass-loader@npm:14.2.1"
   dependencies:
     neo-async: "npm:^2.6.2"
   peerDependencies:
-    fibers: ">= 3.1.0"
+    "@rspack/core": 0.x || 1.x
     node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
     sass: ^1.3.0
     sass-embedded: "*"
     webpack: ^5.0.0
   peerDependenciesMeta:
-    fibers:
+    "@rspack/core":
       optional: true
     node-sass:
       optional: true
@@ -25309,7 +25869,9 @@ __metadata:
       optional: true
     sass-embedded:
       optional: true
-  checksum: 10c0/5e955a4ffce35ee0a46fce677ce51eaa69587fb5371978588c83af00f49e7edc36dcf3bb559cbae27681c5e24a71284463ebe03a1fb65e6ecafa1db0620e3fc8
+    webpack:
+      optional: true
+  checksum: 10c0/9a48d454584d96d6c562eb323bb9e3c6808e930eeaaa916975b97d45831e0b87936a8655cdb3a4512a25abc9587dea65a9616e42396be0d7e7c507a4795a8146
   languageName: node
   linkType: hard
 
@@ -25455,16 +26017,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^7.0.0, semver@npm:^7.1.1, semver@npm:^7.2.1, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.3.8, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.6.2":
-  version: 7.6.2
-  resolution: "semver@npm:7.6.2"
-  bin:
-    semver: bin/semver.js
-  checksum: 10c0/97d3441e97ace8be4b1976433d1c32658f6afaff09f143e52c593bae7eef33de19e3e369c88bd985ce1042c6f441c80c6803078d1de2a9988080b66684cbb30c
-  languageName: node
-  linkType: hard
-
-"semver@npm:^7.6.3":
+"semver@npm:^7.0.0, semver@npm:^7.1.1, semver@npm:^7.2.1, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.3.8, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.6.2, semver@npm:^7.6.3":
   version: 7.6.3
   resolution: "semver@npm:7.6.3"
   bin:
@@ -25624,32 +26177,32 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sharp@npm:^0.33.3, sharp@npm:^0.33.4":
-  version: 0.33.4
-  resolution: "sharp@npm:0.33.4"
-  dependencies:
-    "@img/sharp-darwin-arm64": "npm:0.33.4"
-    "@img/sharp-darwin-x64": "npm:0.33.4"
-    "@img/sharp-libvips-darwin-arm64": "npm:1.0.2"
-    "@img/sharp-libvips-darwin-x64": "npm:1.0.2"
-    "@img/sharp-libvips-linux-arm": "npm:1.0.2"
-    "@img/sharp-libvips-linux-arm64": "npm:1.0.2"
-    "@img/sharp-libvips-linux-s390x": "npm:1.0.2"
-    "@img/sharp-libvips-linux-x64": "npm:1.0.2"
-    "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.2"
-    "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.2"
-    "@img/sharp-linux-arm": "npm:0.33.4"
-    "@img/sharp-linux-arm64": "npm:0.33.4"
-    "@img/sharp-linux-s390x": "npm:0.33.4"
-    "@img/sharp-linux-x64": "npm:0.33.4"
-    "@img/sharp-linuxmusl-arm64": "npm:0.33.4"
-    "@img/sharp-linuxmusl-x64": "npm:0.33.4"
-    "@img/sharp-wasm32": "npm:0.33.4"
-    "@img/sharp-win32-ia32": "npm:0.33.4"
-    "@img/sharp-win32-x64": "npm:0.33.4"
+"sharp@npm:^0.33.3, sharp@npm:^0.33.4, sharp@npm:^0.33.5":
+  version: 0.33.5
+  resolution: "sharp@npm:0.33.5"
+  dependencies:
+    "@img/sharp-darwin-arm64": "npm:0.33.5"
+    "@img/sharp-darwin-x64": "npm:0.33.5"
+    "@img/sharp-libvips-darwin-arm64": "npm:1.0.4"
+    "@img/sharp-libvips-darwin-x64": "npm:1.0.4"
+    "@img/sharp-libvips-linux-arm": "npm:1.0.5"
+    "@img/sharp-libvips-linux-arm64": "npm:1.0.4"
+    "@img/sharp-libvips-linux-s390x": "npm:1.0.4"
+    "@img/sharp-libvips-linux-x64": "npm:1.0.4"
+    "@img/sharp-libvips-linuxmusl-arm64": "npm:1.0.4"
+    "@img/sharp-libvips-linuxmusl-x64": "npm:1.0.4"
+    "@img/sharp-linux-arm": "npm:0.33.5"
+    "@img/sharp-linux-arm64": "npm:0.33.5"
+    "@img/sharp-linux-s390x": "npm:0.33.5"
+    "@img/sharp-linux-x64": "npm:0.33.5"
+    "@img/sharp-linuxmusl-arm64": "npm:0.33.5"
+    "@img/sharp-linuxmusl-x64": "npm:0.33.5"
+    "@img/sharp-wasm32": "npm:0.33.5"
+    "@img/sharp-win32-ia32": "npm:0.33.5"
+    "@img/sharp-win32-x64": "npm:0.33.5"
     color: "npm:^4.2.3"
     detect-libc: "npm:^2.0.3"
-    semver: "npm:^7.6.0"
+    semver: "npm:^7.6.3"
   dependenciesMeta:
     "@img/sharp-darwin-arm64":
       optional: true
@@ -25689,7 +26242,7 @@ __metadata:
       optional: true
     "@img/sharp-win32-x64":
       optional: true
-  checksum: 10c0/428c5c6a84ff8968effe50c2de931002f5f30b9f263e1c026d0384e581673c13088a49322f7748114d3d9be4ae9476a74bf003a3af34743e97ef2f880d1cfe45
+  checksum: 10c0/6b81421ddfe6ee524d8d77e325c5e147fef22884e1c7b1656dfd89a88d7025894115da02d5f984261bf2e6daa16f98cadd1721c4ba408b4212b1d2a60f233484
   languageName: node
   linkType: hard
 
@@ -25976,7 +26529,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2, source-map-js@npm:^1.2.0":
+"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.2, source-map-js@npm:^1.2.0":
   version: 1.2.0
   resolution: "source-map-js@npm:1.2.0"
   checksum: 10c0/7e5f896ac10a3a50fe2898e5009c58ff0dc102dcb056ed27a354623a0ece8954d4b2649e1a1b2b52ef2e161d26f8859c7710350930751640e71e374fe2d321a4
@@ -26235,9 +26788,9 @@ __metadata:
   linkType: hard
 
 "std-env@npm:^3.7.0":
-  version: 3.7.0
-  resolution: "std-env@npm:3.7.0"
-  checksum: 10c0/60edf2d130a4feb7002974af3d5a5f3343558d1ccf8d9b9934d225c638606884db4a20d2fe6440a09605bca282af6b042ae8070a10490c0800d69e82e478f41e
+  version: 3.8.0
+  resolution: "std-env@npm:3.8.0"
+  checksum: 10c0/f560a2902fd0fa3d648d7d0acecbd19d664006f7372c1fba197ed4c216b4c9e48db6e2769b5fe1616d42a9333c9f066c5011935035e85c59f45dc4f796272040
   languageName: node
   linkType: hard
 
@@ -26263,6 +26816,11 @@ __metadata:
   dependencies:
     "@storybook/core": "workspace:*"
     typescript: "npm:^5.3.2"
+  peerDependencies:
+    prettier: ^2 || ^3
+  peerDependenciesMeta:
+    prettier:
+      optional: true
   bin:
     getstorybook: ./bin/index.cjs
     sb: ./bin/index.cjs
@@ -26512,6 +27070,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"strip-final-newline@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "strip-final-newline@npm:4.0.0"
+  checksum: 10c0/b0cf2b62d597a1b0e3ebc42b88767f0a0d45601f89fd379a928a1812c8779440c81abba708082c946445af1d6b62d5f16e2a7cf4f30d9d6587b89425fae801ff
+  languageName: node
+  linkType: hard
+
 "strip-indent@npm:^3.0.0":
   version: 3.0.0
   resolution: "strip-indent@npm:3.0.0"
@@ -26544,19 +27109,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strong-log-transformer@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "strong-log-transformer@npm:2.1.0"
-  dependencies:
-    duplexer: "npm:^0.1.1"
-    minimist: "npm:^1.2.0"
-    through: "npm:^2.3.4"
-  bin:
-    sl-log-transformer: bin/sl-log-transformer.js
-  checksum: 10c0/3c3b8aa8f34d661910563ff996412e2f527fc814e699a376854b554d4a4294ab7e285b4e2c08a080a7b19c5600a9b93a98798d3ac600fe3de545ca6605c07829
-  languageName: node
-  linkType: hard
-
 "stubs@npm:^3.0.0":
   version: 3.0.0
   resolution: "stubs@npm:3.0.0"
@@ -26591,22 +27143,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"styled-jsx@npm:5.1.1":
-  version: 5.1.1
-  resolution: "styled-jsx@npm:5.1.1"
-  dependencies:
-    client-only: "npm:0.0.1"
-  peerDependencies:
-    react: ">= 16.8.0 || 17.x.x || ^18.0.0-0"
-  peerDependenciesMeta:
-    "@babel/core":
-      optional: true
-    babel-plugin-macros:
-      optional: true
-  checksum: 10c0/42655cdadfa5388f8a48bb282d6b450df7d7b8cf066ac37038bd0499d3c9f084815ebd9ff9dfa12a218fd4441338851db79603498d7557207009c1cf4d609835
-  languageName: node
-  linkType: hard
-
 "styled-jsx@npm:5.1.6, styled-jsx@npm:^5.1.6":
   version: 5.1.6
   resolution: "styled-jsx@npm:5.1.6"
@@ -26681,23 +27217,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"svelte-check@npm:^3.6.4":
-  version: 3.6.4
-  resolution: "svelte-check@npm:3.6.4"
+"svelte-check@npm:^4.0.5":
+  version: 4.0.5
+  resolution: "svelte-check@npm:4.0.5"
   dependencies:
-    "@jridgewell/trace-mapping": "npm:^0.3.17"
-    chokidar: "npm:^3.4.1"
-    fast-glob: "npm:^3.2.7"
-    import-fresh: "npm:^3.2.1"
+    "@jridgewell/trace-mapping": "npm:^0.3.25"
+    chokidar: "npm:^4.0.1"
+    fdir: "npm:^6.2.0"
     picocolors: "npm:^1.0.0"
     sade: "npm:^1.7.4"
-    svelte-preprocess: "npm:^5.1.0"
-    typescript: "npm:^5.0.3"
   peerDependencies:
-    svelte: ^3.55.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0
+    svelte: ^4.0.0 || ^5.0.0-next.0
+    typescript: ">=5.0.0"
   bin:
     svelte-check: bin/svelte-check
-  checksum: 10c0/acbcc04c8c6ab7baee7ccf36ca134dcabe49fae103aa92661e7f80e01216623363fb794fec9a3f794f7003d55629373567ff485925dc33272f48cea63e7b2452
+  checksum: 10c0/192ee83f83169408b5f0b819440349f53e256db868d59fdd2422e831ef581891f5f257632dd3e632b12518ca307e1f99ff97455f56c19c3d2a5ee7be6391a181
   languageName: node
   linkType: hard
 
@@ -26717,29 +27251,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"svelte-hmr@npm:^0.15.3":
-  version: 0.15.3
-  resolution: "svelte-hmr@npm:0.15.3"
-  peerDependencies:
-    svelte: ^3.19.0 || ^4.0.0
-  checksum: 10c0/80b6df78e4bc1dd8d1beb4cfc5c341a7839a444b41320cb1ff56c19741346ecc07ee7cc989d7083b02c40bad80d989d52b0defac4126cd0013eaac378f626d63
-  languageName: node
-  linkType: hard
-
-"svelte-loader@npm:^3.1.9":
-  version: 3.1.9
-  resolution: "svelte-loader@npm:3.1.9"
+"svelte-loader@npm:^3.2.4":
+  version: 3.2.4
+  resolution: "svelte-loader@npm:3.2.4"
   dependencies:
     loader-utils: "npm:^2.0.4"
     svelte-dev-helper: "npm:^1.1.9"
     svelte-hmr: "npm:^0.14.2"
   peerDependencies:
-    svelte: ^3.0.0 || ^4.0.0-next.0
-  checksum: 10c0/b71593c06756882f0d6e690d050af497dd4b51074699d33dbc7016c7ea21858619d55fc087c7a205178f92e0ded7b3c3f68ec1a7645847098199d40377afb1ef
+    svelte: ^3.0.0 || ^4.0.0-next.0 || ^5.0.0-next.1
+  checksum: 10c0/837f8e3c81f92c584f97f617ebf969249e0170509697ade502e65b5674b0623810b24d0058456115dd417247cd81df8fbedcb421ce9314f01f0cc8b66b2afef6
   languageName: node
   linkType: hard
 
-"svelte-preprocess@npm:^5.1.0, svelte-preprocess@npm:^5.1.1":
+"svelte-preprocess@npm:^5.1.1":
   version: 5.1.1
   resolution: "svelte-preprocess@npm:5.1.1"
   dependencies:
@@ -26785,45 +27310,58 @@ __metadata:
   languageName: node
   linkType: hard
 
-"svelte@npm:^4.0.0":
-  version: 4.2.8
-  resolution: "svelte@npm:4.2.8"
+"svelte2tsx@npm:^0.7.13":
+  version: 0.7.13
+  resolution: "svelte2tsx@npm:0.7.13"
   dependencies:
-    "@ampproject/remapping": "npm:^2.2.1"
-    "@jridgewell/sourcemap-codec": "npm:^1.4.15"
-    "@jridgewell/trace-mapping": "npm:^0.3.18"
-    acorn: "npm:^8.9.0"
-    aria-query: "npm:^5.3.0"
-    axobject-query: "npm:^3.2.1"
-    code-red: "npm:^1.0.3"
-    css-tree: "npm:^2.3.1"
-    estree-walker: "npm:^3.0.3"
-    is-reference: "npm:^3.0.1"
+    dedent-js: "npm:^1.0.1"
+    pascal-case: "npm:^3.1.1"
+  peerDependencies:
+    svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0
+    typescript: ^4.9.4 || ^5.0.0
+  checksum: 10c0/a6df2873e551d116bae8b4664b1838a52c6aa50ad50e30e41611e8bf390c525ceb97b53d034f2e0030a640e157e1f88ac33d52b6e4abb54861b3fc120aae82f7
+  languageName: node
+  linkType: hard
+
+"svelte@npm:^5.0.0, svelte@npm:^5.0.5":
+  version: 5.0.5
+  resolution: "svelte@npm:5.0.5"
+  dependencies:
+    "@ampproject/remapping": "npm:^2.3.0"
+    "@jridgewell/sourcemap-codec": "npm:^1.5.0"
+    "@types/estree": "npm:^1.0.5"
+    acorn: "npm:^8.12.1"
+    acorn-typescript: "npm:^1.4.13"
+    aria-query: "npm:^5.3.1"
+    axobject-query: "npm:^4.1.0"
+    esm-env: "npm:^1.0.0"
+    esrap: "npm:^1.2.2"
+    is-reference: "npm:^3.0.2"
     locate-character: "npm:^3.0.0"
-    magic-string: "npm:^0.30.4"
-    periscopic: "npm:^3.1.0"
-  checksum: 10c0/13673a6211cc38224398f4bda8e0ba93edfb1338aa4f28f614a31ac31b152479038761cfc57f1668554f5ab70effcd8023dcf549d75e7b2a7ae703d213b7e9da
+    magic-string: "npm:^0.30.11"
+    zimmerframe: "npm:^1.1.2"
+  checksum: 10c0/9600bc2901b11d8d50f55a4fcbf8499be7475e7adb51222e2ae1aaf18f39207f2f6ca02bbfde1d3d1c6bc84e9058242b42f471deddf8225820d5d11ee83c3029
   languageName: node
   linkType: hard
 
-"svelte@npm:^5.0.0-next.65":
-  version: 5.0.0-next.65
-  resolution: "svelte@npm:5.0.0-next.65"
+"svelte@npm:^5.0.0-next.268":
+  version: 5.0.0-next.268
+  resolution: "svelte@npm:5.0.0-next.268"
   dependencies:
-    "@ampproject/remapping": "npm:^2.2.1"
-    "@jridgewell/sourcemap-codec": "npm:^1.4.15"
+    "@ampproject/remapping": "npm:^2.3.0"
+    "@jridgewell/sourcemap-codec": "npm:^1.5.0"
     "@types/estree": "npm:^1.0.5"
-    acorn: "npm:^8.11.3"
+    acorn: "npm:^8.12.1"
     acorn-typescript: "npm:^1.4.13"
-    aria-query: "npm:^5.3.0"
-    axobject-query: "npm:^4.0.0"
+    aria-query: "npm:^5.3.1"
+    axobject-query: "npm:^4.1.0"
     esm-env: "npm:^1.0.0"
-    esrap: "npm:^1.2.1"
+    esrap: "npm:^1.2.2"
     is-reference: "npm:^3.0.2"
     locate-character: "npm:^3.0.0"
-    magic-string: "npm:^0.30.5"
+    magic-string: "npm:^0.30.11"
     zimmerframe: "npm:^1.1.2"
-  checksum: 10c0/6a686847f887d2871eabce4888916cba6aec5bae924a76fd01f4098db1c0053d4e5d6434070d0a048eac75eaddd4fd40e3fae625a0253464f7baa6b0f147f209
+  checksum: 10c0/74a954cffe2a70259a1d1d2a834e9615d3f393429ac8cc1e15bfdc66b8bbe5dc449a8289370631b29023bca51aa451d1906f570b3761de4c235ea731913ee1b2
   languageName: node
   linkType: hard
 
@@ -27043,13 +27581,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"through@npm:^2.3.4":
-  version: 2.3.8
-  resolution: "through@npm:2.3.8"
-  checksum: 10c0/4b09f3774099de0d4df26d95c5821a62faee32c7e96fb1f4ebd54a2d7c11c57fe88b0a0d49cf375de5fee5ae6bf4eb56dbbf29d07366864e2ee805349970d3cc
-  languageName: node
-  linkType: hard
-
 "thunky@npm:^1.0.2":
   version: 1.1.0
   resolution: "thunky@npm:1.1.0"
@@ -27080,10 +27611,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tinybench@npm:^2.8.0":
-  version: 2.8.0
-  resolution: "tinybench@npm:2.8.0"
-  checksum: 10c0/5a9a642351fa3e4955e0cbf38f5674be5f3ba6730fd872fd23a5c953ad6c914234d5aba6ea41ef88820180a81829ceece5bd8d3967c490c5171bca1141c2f24d
+"tinybench@npm:^2.9.0":
+  version: 2.9.0
+  resolution: "tinybench@npm:2.9.0"
+  checksum: 10c0/c3500b0f60d2eb8db65250afe750b66d51623057ee88720b7f064894a6cb7eb93360ca824a60a31ab16dab30c7b1f06efe0795b352e37914a9d4bad86386a20c
+  languageName: node
+  linkType: hard
+
+"tinyexec@npm:^0.3.0":
+  version: 0.3.0
+  resolution: "tinyexec@npm:0.3.0"
+  checksum: 10c0/138a4f4241aea6b6312559508468ab275a31955e66e2f57ed206e0aaabecee622624f208c5740345f0a66e33478fd065e359ed1eb1269eb6fd4fa25d44d0ba3b
+  languageName: node
+  linkType: hard
+
+"tinyglobby@npm:^0.2.10":
+  version: 0.2.10
+  resolution: "tinyglobby@npm:0.2.10"
+  dependencies:
+    fdir: "npm:^6.4.2"
+    picomatch: "npm:^4.0.2"
+  checksum: 10c0/ce946135d39b8c0e394e488ad59f4092e8c4ecd675ef1bcd4585c47de1b325e61ec6adfbfbe20c3c2bfa6fd674c5b06de2a2e65c433f752ae170aff11793e5ef
   languageName: node
   linkType: hard
 
@@ -27272,7 +27820,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tree-kill@npm:1.2.2":
+"tree-kill@npm:1.2.2, tree-kill@npm:^1.2.2":
   version: 1.2.2
   resolution: "tree-kill@npm:1.2.2"
   bin:
@@ -27308,6 +27856,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"trouter@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "trouter@npm:4.0.0"
+  dependencies:
+    regexparam: "npm:^3.0.0"
+  checksum: 10c0/e27326a831187c6a47a72b62212364e3f88247fa2a8723e5030e14a0002b69756fb51f97efbda2466deb05f4a78ecb83c2a1a7b343e9659cbfb3f370156f1e12
+  languageName: node
+  linkType: hard
+
 "try-catch@npm:^3.0.0":
   version: 3.0.1
   resolution: "try-catch@npm:3.0.1"
@@ -27315,12 +27872,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-api-utils@npm:^1.0.1":
-  version: 1.0.3
-  resolution: "ts-api-utils@npm:1.0.3"
+"ts-api-utils@npm:^1.0.1, ts-api-utils@npm:^1.3.0":
+  version: 1.4.3
+  resolution: "ts-api-utils@npm:1.4.3"
   peerDependencies:
     typescript: ">=4.2.0"
-  checksum: 10c0/9408338819c3aca2a709f0bc54e3f874227901506cacb1163612a6c8a43df224174feb965a5eafdae16f66fc68fd7bfee8d3275d0fa73fbb8699e03ed26520c9
+  checksum: 10c0/e65dc6e7e8141140c23e1dc94984bf995d4f6801919c71d6dc27cf0cd51b100a91ffcfe5217626193e5bea9d46831e8586febdc7e172df3f1091a7384299e23a
   languageName: node
   linkType: hard
 
@@ -27409,10 +27966,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-toolbelt@npm:^9.6.0":
-  version: 9.6.0
-  resolution: "ts-toolbelt@npm:9.6.0"
-  checksum: 10c0/838f9a2f0fe881d5065257a23b402c41315b33ff987b73db3e2b39fcb70640c4c7220e1ef118ed5676763543724fdbf4eda7b0e2c17acb667ed1401336af9f8c
+"tsconfck@npm:^3.0.3":
+  version: 3.1.4
+  resolution: "tsconfck@npm:3.1.4"
+  peerDependencies:
+    typescript: ^5.0.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  bin:
+    tsconfck: bin/tsconfck.js
+  checksum: 10c0/5120e91b3388574b449d57d08f45d05d9966cf4b9d6aa1018652c1fff6d7d37b1ed099b07e6ebf6099aa40b8a16968dd337198c55b7274892849112b942861ed
   languageName: node
   linkType: hard
 
@@ -27509,13 +28073,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"type-detect@npm:^4.0.0, type-detect@npm:^4.1.0":
-  version: 4.1.0
-  resolution: "type-detect@npm:4.1.0"
-  checksum: 10c0/df8157ca3f5d311edc22885abc134e18ff8ffbc93d6a9848af5b682730ca6a5a44499259750197250479c5331a8a75b5537529df5ec410622041650a7f293e2a
-  languageName: node
-  linkType: hard
-
 "type-fest@npm:~2.19":
   version: 2.19.0
   resolution: "type-fest@npm:2.19.0"
@@ -27599,12 +28156,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"types-ramda@npm:^0.29.4":
-  version: 0.29.10
-  resolution: "types-ramda@npm:0.29.10"
-  dependencies:
-    ts-toolbelt: "npm:^9.6.0"
-  checksum: 10c0/cc6439341a60a4f2b49e1ac447c8a0279f161464fd0a204abaa57e90e101772c0b1adc185a7c0715c3836c19594a9ec268c1e5c4394d0e409cb71d141def3963
+"typescript@npm:5.4.3":
+  version: 5.4.3
+  resolution: "typescript@npm:5.4.3"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10c0/22443a8760c3668e256c0b34b6b45c359ef6cecc10c42558806177a7d500ab1a7d7aac1f976d712e26989ddf6731d2fbdd3212b7c73290a45127c1c43ba2005a
   languageName: node
   linkType: hard
 
@@ -27618,62 +28176,63 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^5.0.3, typescript@npm:^5.3.2, typescript@npm:^5.4.3":
-  version: 5.4.3
-  resolution: "typescript@npm:5.4.3"
+"typescript@npm:^5.3.2":
+  version: 5.4.5
+  resolution: "typescript@npm:5.4.5"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/22443a8760c3668e256c0b34b6b45c359ef6cecc10c42558806177a7d500ab1a7d7aac1f976d712e26989ddf6731d2fbdd3212b7c73290a45127c1c43ba2005a
+  checksum: 10c0/2954022ada340fd3d6a9e2b8e534f65d57c92d5f3989a263754a78aba549f7e6529acc1921913560a4b816c46dce7df4a4d29f9f11a3dc0d4213bb76d043251e
   languageName: node
   linkType: hard
 
-"typescript@npm:~5.3.2":
-  version: 5.3.3
-  resolution: "typescript@npm:5.3.3"
+"typescript@npm:~5.6.2":
+  version: 5.6.3
+  resolution: "typescript@npm:5.6.3"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/e33cef99d82573624fc0f854a2980322714986bc35b9cb4d1ce736ed182aeab78e2cb32b385efa493b2a976ef52c53e20d6c6918312353a91850e2b76f1ea44f
+  checksum: 10c0/44f61d3fb15c35359bc60399cb8127c30bae554cd555b8e2b46d68fa79d680354b83320ad419ff1b81a0bdf324197b29affe6cc28988cd6a74d4ac60c94f9799
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A^3.8.3#optional!builtin<compat/typescript>":
-  version: 3.9.10
-  resolution: "typescript@patch:typescript@npm%3A3.9.10#optional!builtin<compat/typescript>::version=3.9.10&hash=3bd3d3"
+"typescript@patch:typescript@npm%3A5.4.3#optional!builtin<compat/typescript>":
+  version: 5.4.3
+  resolution: "typescript@patch:typescript@npm%3A5.4.3#optional!builtin<compat/typescript>::version=5.4.3&hash=5adc0c"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/9041fb3886e7d6a560f985227b8c941d17a750f2edccb5f9b3a15a2480574654d9be803ad4a14aabcc2f2553c4d272a25fd698a7c42692f03f66b009fb46883c
+  checksum: 10c0/6e51f8b7e6ec55b897b9e56b67e864fe8f44e30f4a14357aad5dc0f7432db2f01efc0522df0b6c36d361c51f2dc3dcac5c832efd96a404cfabf884e915d38828
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A^5.0.3#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.3.2#optional!builtin<compat/typescript>, typescript@patch:typescript@npm%3A^5.4.3#optional!builtin<compat/typescript>":
-  version: 5.4.3
-  resolution: "typescript@patch:typescript@npm%3A5.4.3#optional!builtin<compat/typescript>::version=5.4.3&hash=5adc0c"
+"typescript@patch:typescript@npm%3A^3.8.3#optional!builtin<compat/typescript>":
+  version: 3.9.10
+  resolution: "typescript@patch:typescript@npm%3A3.9.10#optional!builtin<compat/typescript>::version=3.9.10&hash=3bd3d3"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/6e51f8b7e6ec55b897b9e56b67e864fe8f44e30f4a14357aad5dc0f7432db2f01efc0522df0b6c36d361c51f2dc3dcac5c832efd96a404cfabf884e915d38828
+  checksum: 10c0/9041fb3886e7d6a560f985227b8c941d17a750f2edccb5f9b3a15a2480574654d9be803ad4a14aabcc2f2553c4d272a25fd698a7c42692f03f66b009fb46883c
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A~5.3.2#optional!builtin<compat/typescript>":
-  version: 5.3.3
-  resolution: "typescript@patch:typescript@npm%3A5.3.3#optional!builtin<compat/typescript>::version=5.3.3&hash=e012d7"
+"typescript@patch:typescript@npm%3A^5.3.2#optional!builtin<compat/typescript>":
+  version: 5.4.5
+  resolution: "typescript@patch:typescript@npm%3A5.4.5#optional!builtin<compat/typescript>::version=5.4.5&hash=5adc0c"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/1d0a5f4ce496c42caa9a30e659c467c5686eae15d54b027ee7866744952547f1be1262f2d40de911618c242b510029d51d43ff605dba8fb740ec85ca2d3f9500
+  checksum: 10c0/db2ad2a16ca829f50427eeb1da155e7a45e598eec7b086d8b4e8ba44e5a235f758e606d681c66992230d3fc3b8995865e5fd0b22a2c95486d0b3200f83072ec9
   languageName: node
   linkType: hard
 
-"uglify-js@npm:^3.1.4":
-  version: 3.17.4
-  resolution: "uglify-js@npm:3.17.4"
+"typescript@patch:typescript@npm%3A~5.6.2#optional!builtin<compat/typescript>":
+  version: 5.6.3
+  resolution: "typescript@patch:typescript@npm%3A5.6.3#optional!builtin<compat/typescript>::version=5.6.3&hash=b45daf"
   bin:
-    uglifyjs: bin/uglifyjs
-  checksum: 10c0/8b7fcdca69deb284fed7d2025b73eb747ce37f9aca6af53422844f46427152d5440601b6e2a033e77856a2f0591e4167153d5a21b68674ad11f662034ec13ced
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10c0/ac8307bb06bbfd08ae7137da740769b7d8c3ee5943188743bb622c621f8ad61d244767480f90fbd840277fbf152d8932aa20c33f867dea1bb5e79b187ca1a92f
   languageName: node
   linkType: hard
 
@@ -27751,6 +28310,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unicorn-magic@npm:^0.3.0":
+  version: 0.3.0
+  resolution: "unicorn-magic@npm:0.3.0"
+  checksum: 10c0/0a32a997d6c15f1c2a077a15b1c4ca6f268d574cf5b8975e778bb98e6f8db4ef4e86dfcae4e158cd4c7e38fb4dd383b93b13eefddc7f178dea13d3ac8a603271
+  languageName: node
+  linkType: hard
+
 "unified-args@npm:^11.0.0":
   version: 11.0.1
   resolution: "unified-args@npm:11.0.1"
@@ -28160,6 +28726,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"update-browserslist-db@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "update-browserslist-db@npm:1.1.1"
+  dependencies:
+    escalade: "npm:^3.2.0"
+    picocolors: "npm:^1.1.0"
+  peerDependencies:
+    browserslist: ">= 4.21.0"
+  bin:
+    update-browserslist-db: cli.js
+  checksum: 10c0/536a2979adda2b4be81b07e311bd2f3ad5e978690987956bc5f514130ad50cac87cd22c710b686d79731e00fbee8ef43efe5fcd72baa241045209195d43dcc80
+  languageName: node
+  linkType: hard
+
 "uri-js@npm:^4.2.2":
   version: 4.4.1
   resolution: "uri-js@npm:4.4.1"
@@ -28501,18 +29081,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite-node@npm:2.0.5":
-  version: 2.0.5
-  resolution: "vite-node@npm:2.0.5"
+"vite-node@npm:2.1.3":
+  version: 2.1.3
+  resolution: "vite-node@npm:2.1.3"
   dependencies:
     cac: "npm:^6.7.14"
-    debug: "npm:^4.3.5"
+    debug: "npm:^4.3.6"
     pathe: "npm:^1.1.2"
-    tinyrainbow: "npm:^1.2.0"
     vite: "npm:^5.0.0"
   bin:
     vite-node: vite-node.mjs
-  checksum: 10c0/affcc58ae8d45bce3e8bc3b5767acd57c24441634e2cd967cf97f4e5ed2bcead1714b60150cdf7ee153ebad47659c5cd419883207e1a95b69790331e3243749f
+  checksum: 10c0/1b06139880a8170651e025e8c35aa92a917f8ec8f24507cda5bf4be09843f6447e1f494932a8d7eb98124f1c8c9fee02283ef318ddd57e2b861d2d85a409a206
   languageName: node
   linkType: hard
 
@@ -28538,25 +29117,41 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite-plugin-storybook-nextjs@npm:^1.0.11":
-  version: 1.0.11
-  resolution: "vite-plugin-storybook-nextjs@npm:1.0.11"
+"vite-plugin-storybook-nextjs@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "vite-plugin-storybook-nextjs@npm:1.1.0"
   dependencies:
-    "@next/env": "npm:^14.2.5"
+    "@next/env": "npm:^15.0.3"
     image-size: "npm:^1.1.1"
     magic-string: "npm:^0.30.11"
     module-alias: "npm:^2.2.3"
     sharp: "npm:^0.33.4"
     ts-dedent: "npm:^2.2.0"
   peerDependencies:
-    "@storybook/test": ^8.3.0-alpha.3
-    next: ^14.1.0
-    storybook: ^8.3.0-alpha.3
+    "@storybook/test": ^8.3.0
+    next: ^14.1.0 || ^15.0.0
+    storybook: ^8.3.0
     vite: ^5.0.0
   dependenciesMeta:
     sharp:
       optional: true
-  checksum: 10c0/9652b76c13a682b688d9a4f617b1a66263f25f395a99af8e258bedef4f3b3ce1c856ec1ff66cc0359d6aedc96adee9750fd6b0432514dd575ad7896cd1de70df
+  checksum: 10c0/02761e1074e62a46b30fc5e13b1c7a3bf6047a5736ac17de8e33376a6cff2b1118a48a95d195ddfd37b1e7a55f6eb3385677da9b4d713189c2b68b9f9843906d
+  languageName: node
+  linkType: hard
+
+"vite-tsconfig-paths@npm:^5.1.4":
+  version: 5.1.4
+  resolution: "vite-tsconfig-paths@npm:5.1.4"
+  dependencies:
+    debug: "npm:^4.1.1"
+    globrex: "npm:^0.1.2"
+    tsconfck: "npm:^3.0.3"
+  peerDependencies:
+    vite: "*"
+  peerDependenciesMeta:
+    vite:
+      optional: true
+  checksum: 10c0/6228f23155ea25d92b1e1702284cf8dc52ad3c683c5ca691edd5a4c82d2913e7326d00708cef1cbfde9bb226261df0e0a12e03ef1d43b6a92d8f02b483ef37e3
   languageName: node
   linkType: hard
 
@@ -28640,46 +29235,62 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vitefu@npm:^0.2.5":
-  version: 0.2.5
-  resolution: "vitefu@npm:0.2.5"
+"vitefu@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "vitefu@npm:1.0.3"
   peerDependencies:
-    vite: ^3.0.0 || ^4.0.0 || ^5.0.0
+    vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0-beta.0
   peerDependenciesMeta:
     vite:
       optional: true
-  checksum: 10c0/5781ece3025b6be0eb87ee7d97760a7721b1c6c5ad60ede5f37c86393ece3c8fce4245472f62368eb192448034086e25bdcadf098eefc271277176ab9a430204
+  checksum: 10c0/0b41021767885d538d04bb0cdabd140a5397a780997533a3cc1a1ea3c0ffae0cac4bde3e67632440587cd0505c0b6e825dfd8ab7da6249a68076072bea6eada1
   languageName: node
   linkType: hard
 
-"vitest@npm:^2.0.0, vitest@npm:^2.0.5":
-  version: 2.0.5
-  resolution: "vitest@npm:2.0.5"
+"vitest-axe@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "vitest-axe@npm:0.1.0"
   dependencies:
-    "@ampproject/remapping": "npm:^2.3.0"
-    "@vitest/expect": "npm:2.0.5"
-    "@vitest/pretty-format": "npm:^2.0.5"
-    "@vitest/runner": "npm:2.0.5"
-    "@vitest/snapshot": "npm:2.0.5"
-    "@vitest/spy": "npm:2.0.5"
-    "@vitest/utils": "npm:2.0.5"
+    aria-query: "npm:^5.0.0"
+    axe-core: "npm:^4.4.2"
+    chalk: "npm:^5.0.1"
+    dom-accessibility-api: "npm:^0.5.14"
+    lodash-es: "npm:^4.17.21"
+    redent: "npm:^3.0.0"
+  peerDependencies:
+    vitest: ">=0.16.0"
+  checksum: 10c0/ad523ad3115f66b1605c3c0ea6a9932867c4273f8ad73b717afc5fe496159b5e11d50a8babf05ce4990c612558ee24579cf14258304ce6b32a77d15be9e98aa6
+  languageName: node
+  linkType: hard
+
+"vitest@npm:^2.1.3":
+  version: 2.1.3
+  resolution: "vitest@npm:2.1.3"
+  dependencies:
+    "@vitest/expect": "npm:2.1.3"
+    "@vitest/mocker": "npm:2.1.3"
+    "@vitest/pretty-format": "npm:^2.1.3"
+    "@vitest/runner": "npm:2.1.3"
+    "@vitest/snapshot": "npm:2.1.3"
+    "@vitest/spy": "npm:2.1.3"
+    "@vitest/utils": "npm:2.1.3"
     chai: "npm:^5.1.1"
-    debug: "npm:^4.3.5"
-    execa: "npm:^8.0.1"
-    magic-string: "npm:^0.30.10"
+    debug: "npm:^4.3.6"
+    magic-string: "npm:^0.30.11"
     pathe: "npm:^1.1.2"
     std-env: "npm:^3.7.0"
-    tinybench: "npm:^2.8.0"
+    tinybench: "npm:^2.9.0"
+    tinyexec: "npm:^0.3.0"
     tinypool: "npm:^1.0.0"
     tinyrainbow: "npm:^1.2.0"
     vite: "npm:^5.0.0"
-    vite-node: "npm:2.0.5"
+    vite-node: "npm:2.1.3"
     why-is-node-running: "npm:^2.3.0"
   peerDependencies:
     "@edge-runtime/vm": "*"
     "@types/node": ^18.0.0 || >=20.0.0
-    "@vitest/browser": 2.0.5
-    "@vitest/ui": 2.0.5
+    "@vitest/browser": 2.1.3
+    "@vitest/ui": 2.1.3
     happy-dom: "*"
     jsdom: "*"
   peerDependenciesMeta:
@@ -28697,7 +29308,14 @@ __metadata:
       optional: true
   bin:
     vitest: vitest.mjs
-  checksum: 10c0/b4e6cca00816bf967a8589111ded72faa12f92f94ccdd0dcd0698ffcfdfc52ec662753f66b387549c600ac699b993fd952efbd99dc57fcf4d1c69a2f1022b259
+  checksum: 10c0/7688fdce37205e7f3b448039df216e103e3a52994af0201993e22decbb558d129a734001b991f3c3d80bf4a4ef91ca6a5665a7395d5b051249da60a0016eda36
+  languageName: node
+  linkType: hard
+
+"vlq@npm:^0.2.1":
+  version: 0.2.3
+  resolution: "vlq@npm:0.2.3"
+  checksum: 10c0/d1557b404353ca75c7affaaf403d245a3273a7d1c6b3380ed7f04ae3f080e4658f41ac700d6f48acb3cd4875fe7bc7da4924b3572cd5584a5de83b35b1de5e12
   languageName: node
   linkType: hard
 
@@ -29440,13 +30058,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"wordwrap@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "wordwrap@npm:1.0.0"
-  checksum: 10c0/7ed2e44f3c33c5c3e3771134d2b0aee4314c9e49c749e37f464bf69f2bcdf0cbf9419ca638098e2717cff4875c47f56a007532f6111c3319f557a2ca91278e92
-  languageName: node
-  linkType: hard
-
 "workerpool@npm:^3.1.1":
   version: 3.1.2
   resolution: "workerpool@npm:3.1.2"
@@ -29609,6 +30220,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yaml@npm:^2.6.0":
+  version: 2.6.1
+  resolution: "yaml@npm:2.6.1"
+  bin:
+    yaml: bin.mjs
+  checksum: 10c0/aebf07f61c72b38c74d2b60c3a3ccf89ee4da45bcd94b2bfb7899ba07a5257625a7c9f717c65a6fc511563d48001e01deb1d9e55f0133f3e2edf86039c8c1be7
+  languageName: node
+  linkType: hard
+
 "yargs-parser@npm:21.1.1, yargs-parser@npm:^21.1.1":
   version: 21.1.1
   resolution: "yargs-parser@npm:21.1.1"
@@ -29710,6 +30330,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yoctocolors@npm:^2.0.0":
+  version: 2.1.1
+  resolution: "yoctocolors@npm:2.1.1"
+  checksum: 10c0/85903f7fa96f1c70badee94789fade709f9d83dab2ec92753d612d84fcea6d34c772337a9f8914c6bed2f5fc03a428ac5d893e76fab636da5f1236ab725486d0
+  languageName: node
+  linkType: hard
+
 "zimmerframe@npm:^1.1.2":
   version: 1.1.2
   resolution: "zimmerframe@npm:1.1.2"
diff --git a/docs/_assets/contribute/local-storybook-website-dropdown-optimized.mp4 b/docs/_assets/contribute/local-storybook-website-dropdown-optimized.mp4
new file mode 100644
index 000000000000..b165b199c31b
Binary files /dev/null and b/docs/_assets/contribute/local-storybook-website-dropdown-optimized.mp4 differ
diff --git a/docs/_assets/contribute/local-storybook-website-dropdown-optimized.png b/docs/_assets/contribute/local-storybook-website-dropdown-optimized.png
deleted file mode 100644
index 229efa469abf..000000000000
Binary files a/docs/_assets/contribute/local-storybook-website-dropdown-optimized.png and /dev/null differ
diff --git a/docs/_assets/writing-stories/custom-tag-filter.png b/docs/_assets/writing-stories/custom-tag-filter.png
new file mode 100644
index 000000000000..3579f994da12
Binary files /dev/null and b/docs/_assets/writing-stories/custom-tag-filter.png differ
diff --git a/docs/_assets/writing-tests/addon-a11y-with-addon-test.png b/docs/_assets/writing-tests/addon-a11y-with-addon-test.png
new file mode 100644
index 000000000000..a8656ac25d1d
Binary files /dev/null and b/docs/_assets/writing-tests/addon-a11y-with-addon-test.png differ
diff --git a/docs/_assets/writing-tests/addon-test-filter-sidebar.mp4 b/docs/_assets/writing-tests/addon-test-filter-sidebar.mp4
new file mode 100644
index 000000000000..f5ebbcca5196
Binary files /dev/null and b/docs/_assets/writing-tests/addon-test-filter-sidebar.mp4 differ
diff --git a/docs/_assets/writing-tests/addon-test-module-coverage-summary.png b/docs/_assets/writing-tests/addon-test-module-coverage-summary.png
new file mode 100644
index 000000000000..99aa10a0055f
Binary files /dev/null and b/docs/_assets/writing-tests/addon-test-module-coverage-summary.png differ
diff --git a/docs/_assets/writing-tests/addon-test-module-edit-coverage.png b/docs/_assets/writing-tests/addon-test-module-edit-coverage.png
new file mode 100644
index 000000000000..9e783a324380
Binary files /dev/null and b/docs/_assets/writing-tests/addon-test-module-edit-coverage.png differ
diff --git a/docs/_assets/writing-tests/addon-test-module-edit.png b/docs/_assets/writing-tests/addon-test-module-edit.png
new file mode 100644
index 000000000000..8634fa9e5bb7
Binary files /dev/null and b/docs/_assets/writing-tests/addon-test-module-edit.png differ
diff --git a/docs/_assets/writing-tests/addon-test-module-expanded-with-vta.png b/docs/_assets/writing-tests/addon-test-module-expanded-with-vta.png
new file mode 100644
index 000000000000..2debcbd05e46
Binary files /dev/null and b/docs/_assets/writing-tests/addon-test-module-expanded-with-vta.png differ
diff --git a/docs/_assets/writing-tests/addon-test-module-expanded.png b/docs/_assets/writing-tests/addon-test-module-expanded.png
new file mode 100644
index 000000000000..7ed6e20858b0
Binary files /dev/null and b/docs/_assets/writing-tests/addon-test-module-expanded.png differ
diff --git a/docs/_assets/writing-tests/addon-test-overview.mp4 b/docs/_assets/writing-tests/addon-test-overview.mp4
new file mode 100644
index 000000000000..19afb7c3d1dc
Binary files /dev/null and b/docs/_assets/writing-tests/addon-test-overview.mp4 differ
diff --git a/docs/_assets/writing-tests/addon-test-run-all-tests.mp4 b/docs/_assets/writing-tests/addon-test-run-all-tests.mp4
new file mode 100644
index 000000000000..79828b2e402a
Binary files /dev/null and b/docs/_assets/writing-tests/addon-test-run-all-tests.mp4 differ
diff --git a/docs/_assets/writing-tests/addon-test-sidebar-item-menu-edit.png b/docs/_assets/writing-tests/addon-test-sidebar-item-menu-edit.png
new file mode 100644
index 000000000000..0734d73c2f23
Binary files /dev/null and b/docs/_assets/writing-tests/addon-test-sidebar-item-menu-edit.png differ
diff --git a/docs/_assets/writing-tests/addon-test-sidebar-item-menu.png b/docs/_assets/writing-tests/addon-test-sidebar-item-menu.png
new file mode 100644
index 000000000000..42939fa197af
Binary files /dev/null and b/docs/_assets/writing-tests/addon-test-sidebar-item-menu.png differ
diff --git a/docs/_assets/writing-tests/addon-test-vitest-error.png b/docs/_assets/writing-tests/addon-test-vitest-error.png
new file mode 100644
index 000000000000..feaad36ab1d7
Binary files /dev/null and b/docs/_assets/writing-tests/addon-test-vitest-error.png differ
diff --git a/docs/_assets/writing-tests/vitest-plugin-vscode-coverage.png b/docs/_assets/writing-tests/vitest-plugin-vscode-coverage.png
new file mode 100644
index 000000000000..1442d1c1242f
Binary files /dev/null and b/docs/_assets/writing-tests/vitest-plugin-vscode-coverage.png differ
diff --git a/docs/_snippets/add-localize-package-to-polyfills.md b/docs/_snippets/add-localize-package-to-polyfills.md
deleted file mode 100644
index 109a146cb5d3..000000000000
--- a/docs/_snippets/add-localize-package-to-polyfills.md
+++ /dev/null
@@ -1,4 +0,0 @@
-```ts filename="src/polyfills.ts" renderer="angular" language="ts"
-import '@angular/localize/init';
-```
-
diff --git a/docs/_snippets/addon-a11y-meta-tag.md b/docs/_snippets/addon-a11y-meta-tag.md
new file mode 100644
index 000000000000..3ef18124964e
--- /dev/null
+++ b/docs/_snippets/addon-a11y-meta-tag.md
@@ -0,0 +1,236 @@
+```ts filename="Button.stories.ts" renderer="angular" language="ts"
+import type { Meta } from '@storybook/angular/';
+
+import { Button } from './button.component';
+
+const meta: Meta<Button> = {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+
+export default meta;
+```
+
+```js filename="Button.stories.js" renderer="html" language="js"
+export default {
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+```
+
+```js filename="Button.stories.js|jsx" renderer="common" language="js"
+import { Button } from './Button';
+
+export default {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
+// Replace your-renderer with the renderer you are using (e.g., react, vue3)
+import { Meta } from '@storybook/your-renderer';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
+// Replace your-renderer with the renderer you are using (e.g., react, vue3)
+import { Meta } from '@storybook/your-renderer';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+
+export default meta;
+```
+
+```js filename="Button.stories.js|jsx" renderer="solid" language="js"
+import { Button } from './Button';
+
+export default {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+```
+
+```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts-4-9"
+import type { Meta } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
+
+```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts"
+import type { Meta } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+
+export default meta;
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    // 👇 Re-apply the a11ytest tag for this component's stories
+    tags: ['a11ytest'],
+  });
+</script>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    // 👇 Re-apply the a11ytest tag for this component's stories
+    tags: ['a11ytest'],
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    // 👇 Re-apply the a11ytest tag for this component's stories
+    tags: ['a11ytest'],
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+
+export default meta;
+```
+
+```js filename="Button.stories.js" renderer="vue" language="js"
+import Button from './Button.vue';
+
+export default {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts-4-9"
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Button from './Button.vue';
+
+const meta = {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts"
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Button from './Button.vue';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+
+export default meta;
+```
+
+```js filename="Button.stories.js" renderer="web-components" language="js"
+export default {
+  component: 'demo-button',
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+```
+
+```ts filename="Button.stories.ts" renderer="web-components" language="ts"
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+const meta: Meta = {
+  component: 'demo-button',
+  // 👇 Re-apply the a11ytest tag for this component's stories
+  tags: ['a11ytest'],
+};
+
+export default meta;
+```
diff --git a/docs/_snippets/addon-actions-action-function.md b/docs/_snippets/addon-actions-action-function.md
index 2bfa724a201b..ac2c1cd93a7d 100644
--- a/docs/_snippets/addon-actions-action-function.md
+++ b/docs/_snippets/addon-actions-action-function.md
@@ -91,4 +91,3 @@ const meta: Meta {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/addon-backgrounds-grid.md b/docs/_snippets/addon-backgrounds-grid.md
index 03c3b7559735..266d4e39d520 100644
--- a/docs/_snippets/addon-backgrounds-grid.md
+++ b/docs/_snippets/addon-backgrounds-grid.md
@@ -131,4 +131,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/addon-consume-and-update-globaltype.md b/docs/_snippets/addon-consume-and-update-globaltype.md
index d2e163551ea6..08eed8c3a8bd 100644
--- a/docs/_snippets/addon-consume-and-update-globaltype.md
+++ b/docs/_snippets/addon-consume-and-update-globaltype.md
@@ -38,4 +38,3 @@ const ExampleToolbar = () => {
   );
 };
 ```
-
diff --git a/docs/_snippets/addon-consume-globaltype.md b/docs/_snippets/addon-consume-globaltype.md
index cbebb92a408d..6a53af2bdc55 100644
--- a/docs/_snippets/addon-consume-globaltype.md
+++ b/docs/_snippets/addon-consume-globaltype.md
@@ -38,4 +38,3 @@ const ThemePanel = (props) => {
   );
 };
 ```
-
diff --git a/docs/_snippets/addon-highlight-reset.md b/docs/_snippets/addon-highlight-reset.md
index 5cd0e675b9f0..72a5f296a996 100644
--- a/docs/_snippets/addon-highlight-reset.md
+++ b/docs/_snippets/addon-highlight-reset.md
@@ -240,4 +240,3 @@ export const ResetHighlight: Story = {
   ],
 };
 ```
-
diff --git a/docs/_snippets/addon-test-install.md b/docs/_snippets/addon-test-install.md
index b516f291b85f..482a6c00793e 100644
--- a/docs/_snippets/addon-test-install.md
+++ b/docs/_snippets/addon-test-install.md
@@ -1,4 +1,4 @@
-```shell renderer="common" language="js" packageManager="npx"
+```shell renderer="common" language="js" packageManager="npm"
 npx storybook add @storybook/experimental-addon-test
 ```
 
diff --git a/docs/_snippets/addon-viewport-options-in-preview.md b/docs/_snippets/addon-viewport-options-in-preview.md
index 332b1e171235..c342682af443 100644
--- a/docs/_snippets/addon-viewport-options-in-preview.md
+++ b/docs/_snippets/addon-viewport-options-in-preview.md
@@ -4,7 +4,7 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 export default {
   parameters: {
     viewport: {
-      viewports: INITIAL_VIEWPORTS,
+      options: INITIAL_VIEWPORTS,
     },
   },
   initialGlobals: {
@@ -20,7 +20,7 @@ import { Preview } from '@storybook/your-renderer';
 const preview: Preview = {
   parameters: {
     viewport: {
-      viewports: INITIAL_VIEWPORTS,
+      options: INITIAL_VIEWPORTS,
     },
   },
   initialGlobals: {
diff --git a/docs/_snippets/angular-add-framework.md b/docs/_snippets/angular-add-framework.md
index 353dd4006dbb..c95d6d67eb16 100644
--- a/docs/_snippets/angular-add-framework.md
+++ b/docs/_snippets/angular-add-framework.md
@@ -15,4 +15,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/angular-install.md b/docs/_snippets/angular-install.md
index 25add9054a0d..5333417d45d9 100644
--- a/docs/_snippets/angular-install.md
+++ b/docs/_snippets/angular-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/angular
 ```shell renderer="angular" language="js" packageManager="yarn"
 yarn add --dev @storybook/angular
 ```
-
diff --git a/docs/_snippets/angular-project-compodoc-config.md b/docs/_snippets/angular-project-compodoc-config.md
index 161f5cfce106..3dc124a7bb08 100644
--- a/docs/_snippets/angular-project-compodoc-config.md
+++ b/docs/_snippets/angular-project-compodoc-config.md
@@ -21,10 +21,10 @@
               "-e",
               "json",
               "-d",
-              "." // Add this line to introspect the relevant files starting from the root directory of your project.
+              ".", // Add this line to introspect the relevant files starting from the root directory of your project.
             ],
-            "port": 6006
-          }
+            "port": 6006,
+          },
         },
         "build-storybook": {
           "builder": "@storybook/angular:build-storybook",
@@ -36,14 +36,13 @@
               "-e",
               "json",
               "-d",
-              "." // Add this line to introspect the relevant files starting from the root directory of your project.
+              ".", // Add this line to introspect the relevant files starting from the root directory of your project.
             ],
-            "outputDir": "storybook-static"
-          }
-        }
-      }
-    }
-  }
+            "outputDir": "storybook-static",
+          },
+        },
+      },
+    },
+  },
 }
 ```
-
diff --git a/docs/_snippets/api-doc-block-argtypes-parameter.md b/docs/_snippets/api-doc-block-argtypes-parameter.md
index f0f64183d994..abd54038f549 100644
--- a/docs/_snippets/api-doc-block-argtypes-parameter.md
+++ b/docs/_snippets/api-doc-block-argtypes-parameter.md
@@ -63,4 +63,3 @@ const meta: Meta<typeof Button> = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/api-doc-block-canvas-parameter.md b/docs/_snippets/api-doc-block-canvas-parameter.md
index 64c77770d0d2..f49d31200bde 100644
--- a/docs/_snippets/api-doc-block-canvas-parameter.md
+++ b/docs/_snippets/api-doc-block-canvas-parameter.md
@@ -107,4 +107,3 @@ export const Basic: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/api-doc-block-controls-parameter.md b/docs/_snippets/api-doc-block-controls-parameter.md
index 229051ffabb8..03f33b83c7ed 100644
--- a/docs/_snippets/api-doc-block-controls-parameter.md
+++ b/docs/_snippets/api-doc-block-controls-parameter.md
@@ -94,4 +94,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/api-doc-block-description-example.md b/docs/_snippets/api-doc-block-description-example.md
index 8ae271fdb0af..63221a8078fc 100644
--- a/docs/_snippets/api-doc-block-description-example.md
+++ b/docs/_snippets/api-doc-block-description-example.md
@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 import { Button } from './button.component';
 
 /**
- * # Button stories
+ * Button stories
  * These stories showcase the button
  */
 const meta: Meta<Button> = {
@@ -22,7 +22,7 @@ export default meta;
 type Story = StoryObj<Button>;
 
 /**
- * # Primary Button
+ * Primary Button
  * This is the primary button
  */
 export const Primary: Story = {
@@ -40,7 +40,7 @@ export const Primary: Story = {
 import { Button } from './Button';
 
 /**
- * # Button stories
+ * Button stories
  * These stories showcase the button
  */
 export default {
@@ -55,7 +55,7 @@ export default {
 }
 
 /**
- * # Primary Button
+ * Primary Button
  * This is the primary button
  */
 export const Primary = {
@@ -76,7 +76,7 @@ import type { Meta, StoryObj } from '@storybook/your-framework';
 import { Button } from './Button';
 
 /**
- * # Button stories
+ * Button stories
  * These stories showcase the button
  */
 const meta = {
@@ -94,7 +94,7 @@ export default meta;
 type Story = StoryObj<typeof meta>
 
 /**
- * # Primary Button
+ * Primary Button
  * This is the primary button
  */
 export const Primary: Story = {
@@ -115,7 +115,7 @@ import type { Meta, StoryObj } from '@storybook/your-framework';
 import { Button } from './Button';
 
 /**
- * # Button stories
+ * Button stories
  * These stories showcase the button
  */
 const meta: Meta<typeof Button> = {
@@ -133,7 +133,7 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 
 /**
- * # Primary Button
+ * Primary Button
  * This is the primary button
  */
 export const Primary: Story = {
@@ -148,6 +148,10 @@ export const Primary: Story = {
 ```
 
 ```js filename="Button.stories.js" renderer="web-components" language="js"
+/**
+ * Button stories
+ * These stories showcase the button
+ */
 export default {
   title: 'Button',
   component: 'demo-button',
@@ -179,7 +183,7 @@ export const Primary = {
 import type { Meta, StoryObj } from '@storybook/web-components';
 
 /**
- * # Button stories
+ * Button stories
  * These stories showcase the button
  */
 const meta: Meta = {
@@ -198,7 +202,7 @@ export default meta;
 type Story = StoryObj;
 
 /**
- * # Primary Button
+ * Primary Button
  * This is the primary button
  */
 export const Primary: Story = {
@@ -211,4 +215,3 @@ export const Primary: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/api-doc-block-source-parameter.md b/docs/_snippets/api-doc-block-source-parameter.md
index 3f9b48757f67..8b1293180248 100644
--- a/docs/_snippets/api-doc-block-source-parameter.md
+++ b/docs/_snippets/api-doc-block-source-parameter.md
@@ -107,4 +107,3 @@ export const Basic: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/api-doc-block-story-parameter.md b/docs/_snippets/api-doc-block-story-parameter.md
index 681649f5b5c8..1054cf6d1620 100644
--- a/docs/_snippets/api-doc-block-story-parameter.md
+++ b/docs/_snippets/api-doc-block-story-parameter.md
@@ -107,4 +107,3 @@ export const Basic: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/apollo-module.md b/docs/_snippets/apollo-module.md
deleted file mode 100644
index 9412daad09df..000000000000
--- a/docs/_snippets/apollo-module.md
+++ /dev/null
@@ -1,38 +0,0 @@
-```ts filename="mock-graphql.module.ts" renderer="angular" language="ts" tabTitle="mock-apollo-module"
-import { NgModule } from '@angular/core';
-import { APOLLO_OPTIONS } from 'apollo-angular';
-import { ApolloClientOptions, InMemoryCache } from '@apollo/client/core';
-import { HttpLink } from 'apollo-angular/http';
-
-// See here for docs https://apollo-angular.com/docs/get-started
-
-const uri = 'https://your-graphql-endpoint';
-export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
-  return {
-    link: httpLink.create({ uri }),
-    cache: new InMemoryCache(),
-    defaultOptions: {
-      watchQuery: {
-        fetchPolicy: 'no-cache',
-        errorPolicy: 'all',
-      },
-      query: {
-        fetchPolicy: 'no-cache',
-        errorPolicy: 'all',
-      },
-    },
-  };
-}
-
-@NgModule({
-  providers: [
-    {
-      provide: APOLLO_OPTIONS,
-      useFactory: createApollo,
-      deps: [HttpLink],
-    },
-  ],
-})
-export class MockGraphQLModule {}
-```
-
diff --git a/docs/_snippets/apollo-wrapper-component.md b/docs/_snippets/apollo-wrapper-component.md
deleted file mode 100644
index bafb8de364d2..000000000000
--- a/docs/_snippets/apollo-wrapper-component.md
+++ /dev/null
@@ -1,98 +0,0 @@
-```html renderer="svelte" language="js" tabTitle="with-mock-implementation"
-{/* MockApolloWrapperClient.svelte */}
-
-<script>
-  import { ApolloClient, InMemoryCache } from '@apollo/client';
-
-  import { setClient } from 'svelte-apollo';
-
-  const mockedClient = new ApolloClient({
-    uri: 'https://your-graphql-endpoint',
-    cache: new InMemoryCache(),
-    defaultOptions: {
-      watchQuery: {
-        fetchPolicy: 'no-cache',
-        errorPolicy: 'all',
-      },
-      query: {
-        fetchPolicy: 'no-cache',
-        errorPolicy: 'all',
-      },
-    },
-  });
-  setClient(mockedClient);
-</script>
-
-<slot />
-```
-
-```html renderer="svelte" language="ts" tabTitle="with-mock-implementation"
-{/* MockApolloWrapperClient.svelte */}
-
-<script lang="ts">
-  import { ApolloClient, InMemoryCache } from '@apollo/client';
-
-  import { setClient } from 'svelte-apollo';
-
-  const mockedClient = new ApolloClient({
-    uri: 'https://your-graphql-endpoint',
-    cache: new InMemoryCache(),
-    defaultOptions: {
-      watchQuery: {
-        fetchPolicy: 'no-cache',
-        errorPolicy: 'all',
-      },
-      query: {
-        fetchPolicy: 'no-cache',
-        errorPolicy: 'all',
-      },
-    },
-  });
-  setClient(mockedClient);
-</script>
-
-<slot />
-```
-
-```html renderer="vue" language="js" tabTitle="with-mock-implementation-3"
-{/* ApolloWrapperClient.vue */}
-
-<template>
-  <div><slot /></div>
-</template>
-
-<script>
-  import { defineComponent, provide } from 'vue';
-  import { DefaultApolloClient } from '@vue/apollo-composable';
-  import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core';
-
-  // Apollo client wrapper component that can be used within your app and Storybook
-  export default defineComponent({
-    name: 'WrapperComponent',
-    setup() {
-      const httpLink = createHttpLink({
-        // You should use an absolute URL here
-        uri: 'https://your-graphql-endpoint',
-      });
-      const cache = new InMemoryCache();
-
-      const mockedClient = new ApolloClient({
-        link: httpLink,
-        cache,
-        defaultOptions: {
-          watchQuery: {
-            fetchPolicy: 'no-cache',
-            errorPolicy: 'all',
-          },
-          query: {
-            fetchPolicy: 'no-cache',
-            errorPolicy: 'all',
-          },
-        },
-      });
-      provide(DefaultApolloClient, mockedClient);
-    },
-  });
-</script>
-```
-
diff --git a/docs/_snippets/arg-types-control.md b/docs/_snippets/arg-types-control.md
index 243e52f4056d..4cbca48ac3db 100644
--- a/docs/_snippets/arg-types-control.md
+++ b/docs/_snippets/arg-types-control.md
@@ -119,4 +119,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/arg-types-default-value.md b/docs/_snippets/arg-types-default-value.md
index 9373e3301604..bc866a132112 100644
--- a/docs/_snippets/arg-types-default-value.md
+++ b/docs/_snippets/arg-types-default-value.md
@@ -119,4 +119,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/arg-types-description.md b/docs/_snippets/arg-types-description.md
index c28da88b53f5..8ba11bbdc06f 100644
--- a/docs/_snippets/arg-types-description.md
+++ b/docs/_snippets/arg-types-description.md
@@ -89,4 +89,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/arg-types-if.md b/docs/_snippets/arg-types-if.md
index 2844fd7896e6..73979e5bc378 100644
--- a/docs/_snippets/arg-types-if.md
+++ b/docs/_snippets/arg-types-if.md
@@ -221,4 +221,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/arg-types-in-meta.md b/docs/_snippets/arg-types-in-meta.md
index 34ddd566c374..fe333056e15a 100644
--- a/docs/_snippets/arg-types-in-meta.md
+++ b/docs/_snippets/arg-types-in-meta.md
@@ -101,4 +101,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/arg-types-in-preview.md b/docs/_snippets/arg-types-in-preview.md
index f382c50956c8..73c7b6bf4c5d 100644
--- a/docs/_snippets/arg-types-in-preview.md
+++ b/docs/_snippets/arg-types-in-preview.md
@@ -43,4 +43,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/arg-types-in-story.md b/docs/_snippets/arg-types-in-story.md
index 41508f9a65df..43ce951c112c 100644
--- a/docs/_snippets/arg-types-in-story.md
+++ b/docs/_snippets/arg-types-in-story.md
@@ -52,7 +52,7 @@ const meta = {
 
 export default meta;
 
-type Story = StoryObj<typeof Meta>;
+type Story = StoryObj<typeof meta>;
 
 export const Basic = {
   argTypes: {
@@ -126,4 +126,3 @@ export const Basic: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/arg-types-mapping.md b/docs/_snippets/arg-types-mapping.md
index 88652f526512..7993754b63d0 100644
--- a/docs/_snippets/arg-types-mapping.md
+++ b/docs/_snippets/arg-types-mapping.md
@@ -117,4 +117,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/arg-types-name.md b/docs/_snippets/arg-types-name.md
index 6e9237bbfd80..8053c80de77c 100644
--- a/docs/_snippets/arg-types-name.md
+++ b/docs/_snippets/arg-types-name.md
@@ -89,4 +89,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/arg-types-options.md b/docs/_snippets/arg-types-options.md
index 3ca62ed1a603..730332d7f449 100644
--- a/docs/_snippets/arg-types-options.md
+++ b/docs/_snippets/arg-types-options.md
@@ -89,4 +89,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/arg-types-table.md b/docs/_snippets/arg-types-table.md
index cbf0121445c8..231a02b9fc86 100644
--- a/docs/_snippets/arg-types-table.md
+++ b/docs/_snippets/arg-types-table.md
@@ -107,4 +107,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/arg-types-type.md b/docs/_snippets/arg-types-type.md
index f51719f5a640..d1950ece31d4 100644
--- a/docs/_snippets/arg-types-type.md
+++ b/docs/_snippets/arg-types-type.md
@@ -77,4 +77,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/args-in-preview.md b/docs/_snippets/args-in-preview.md
index d66d35c7a330..d0dd6acb435f 100644
--- a/docs/_snippets/args-in-preview.md
+++ b/docs/_snippets/args-in-preview.md
@@ -28,4 +28,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/args-usage-with-addons.md b/docs/_snippets/args-usage-with-addons.md
index 58b3f7f22cad..59929a410957 100644
--- a/docs/_snippets/args-usage-with-addons.md
+++ b/docs/_snippets/args-usage-with-addons.md
@@ -12,4 +12,3 @@ resetArgs((argNames: ['key']));
 // To reset all args
 resetArgs();
 ```
-
diff --git a/docs/_snippets/before-each-in-meta-mock-date.md b/docs/_snippets/before-each-in-meta-mock-date.md
index 9cceae05b42f..4731818ac9cb 100644
--- a/docs/_snippets/before-each-in-meta-mock-date.md
+++ b/docs/_snippets/before-each-in-meta-mock-date.md
@@ -173,4 +173,3 @@ export const Default: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/before-each-in-preview.md b/docs/_snippets/before-each-in-preview.md
index 47abe76c5057..d8e79641135b 100644
--- a/docs/_snippets/before-each-in-preview.md
+++ b/docs/_snippets/before-each-in-preview.md
@@ -3,8 +3,8 @@ import MockDate from 'mockdate';
 
 export default {
   async beforeEach() {
-    MockDate.reset()
-  }
+    MockDate.reset();
+  },
 };
 ```
 
@@ -15,10 +15,9 @@ import MockDate from 'mockdate';
 
 const preview: Preview = {
   async beforeEach() {
-    MockDate.reset()
-  }
+    MockDate.reset();
+  },
 };
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/build-storybook-production-mode.md b/docs/_snippets/build-storybook-production-mode.md
index 27b75f36ca31..ca247450716e 100644
--- a/docs/_snippets/build-storybook-production-mode.md
+++ b/docs/_snippets/build-storybook-production-mode.md
@@ -16,4 +16,3 @@ pnpm run build-storybook
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn build-storybook
 ```
-
diff --git a/docs/_snippets/button-component-with-proptypes.md b/docs/_snippets/button-component-with-proptypes.md
index 4a36ccb3e890..253586174075 100644
--- a/docs/_snippets/button-component-with-proptypes.md
+++ b/docs/_snippets/button-component-with-proptypes.md
@@ -69,7 +69,7 @@ export const Button: React.FC<ButtonProps> = ({ isDisabled = false, content = ''
 };
 ```
 
-```html filename="Button.svelte" renderer="svelte" language="js"
+```svelte filename="Button.svelte" renderer="svelte" language="js"
 <script>
   /**
    * A Button Component
@@ -92,9 +92,7 @@ export const Button: React.FC<ButtonProps> = ({ isDisabled = false, content = ''
 <button type="button" {disabled}>{content}</button>
 ```
 
-```html renderer="vue" language="js" tabTitle="3"
-{/* Button.vue */}
-
+```html filename="Button.vue" renderer="vue" language="js"
 <template>
   <button type="button" :disabled="isDisabled">{{ label }}</button>
 </template>
@@ -136,9 +134,7 @@ export const Button: React.FC<ButtonProps> = ({ isDisabled = false, content = ''
 </script>
 ```
 
-```html renderer="vue" language="ts" tabTitle="3"
-{/* Button.vue */}
-
+```html filename="Button.vue" renderer="vue" language="ts"
 <template>
   <button type="button" :disabled="isDisabled">{{ label }}</button>
 </template>
@@ -230,4 +226,3 @@ export class CustomButton extends LitElement {
   }
 }
 ```
-
diff --git a/docs/_snippets/button-group-story.md b/docs/_snippets/button-group-story.md
index e7695e6334a4..9fd1b5efaa1d 100644
--- a/docs/_snippets/button-group-story.md
+++ b/docs/_snippets/button-group-story.md
@@ -160,7 +160,30 @@ export const Pair: Story = {
 };
 ```
 
-```js filename="ButtonGroup.stories.js" renderer="svelte" language="js"
+```svelte filename="ButtonGroup.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import ButtonGroup from './ButtonGroup.svelte';
+
+  //👇 Imports the Button stories
+  import * as ButtonStories from './Button.stories.svelte';
+
+  const { Story } = defineMeta({
+    component: ButtonGroup,
+  });
+</script>
+
+<Story
+  name="Pair"
+  args={{
+    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+    orientation: 'horizontal',
+  }}
+/>
+```
+
+```js filename="ButtonGroup.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import ButtonGroup from '../ButtonGroup.svelte';
 
 //👇 Imports the Button stories
@@ -178,7 +201,30 @@ export const Pair = {
 };
 ```
 
-```ts filename="ButtonGroup.stories.ts" renderer="svelte" language="ts-4-9"
+```svelte filename="ButtonGroup.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import ButtonGroup from './ButtonGroup.svelte';
+
+  //👇 Imports the Button stories
+  import * as ButtonStories from './Button.stories.svelte';
+
+  const { Story } = defineMeta({
+    component: ButtonGroup,
+  });
+</script>
+
+<Story
+  name="Pair"
+  args={{
+    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+    orientation: 'horizontal',
+  }}
+/>
+```
+
+```ts filename="ButtonGroup.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import ButtonGroup from './ButtonGroup.svelte';
@@ -201,7 +247,30 @@ export const Pair: Story = {
 };
 ```
 
-```ts filename="ButtonGroup.stories.ts" renderer="svelte" language="ts"
+```svelte filename="ButtonGroup.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import ButtonGroup from './ButtonGroup.svelte';
+
+  //👇 Imports the Button stories
+  import * as ButtonStories from './Button.stories.svelte';
+
+  const { Story } = defineMeta({
+    component: ButtonGroup,
+  });
+</script>
+
+<Story
+  name="Pair"
+  args={{
+    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+    orientation: 'horizontal',
+  }}
+/>
+```
+
+```ts filename="ButtonGroup.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import ButtonGroup from './ButtonGroup.svelte';
@@ -224,7 +293,7 @@ export const Pair: Story = {
 };
 ```
 
-```js filename="ButtonGroup.stories.js" renderer="vue" language="js" tabTitle="3"
+```js filename="ButtonGroup.stories.js" renderer="vue" language="js"
 import ButtonGroup from './ButtonGroup.vue';
 
 //👇 Imports the Button stories
@@ -254,7 +323,7 @@ export const Pair = {
 };
 ```
 
-```ts filename="ButtonGroup.stories.ts" renderer="vue" language="ts-4-9" tabTitle="3"
+```ts filename="ButtonGroup.stories.ts" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import ButtonGroup from './ButtonGroup.vue';
@@ -284,7 +353,7 @@ export const Pair: Story = {
 };
 ```
 
-```ts filename="ButtonGroup.stories.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="ButtonGroup.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import ButtonGroup from './ButtonGroup.vue';
@@ -350,4 +419,3 @@ export const Pair: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/button-implementation.md b/docs/_snippets/button-implementation.md
index 333017bf79dd..9e9c3ee4cc70 100644
--- a/docs/_snippets/button-implementation.md
+++ b/docs/_snippets/button-implementation.md
@@ -114,9 +114,7 @@ export const Button: React.FC<ButtonProps> = ({
 };
 ```
 
-```html renderer="svelte" language="js"
-{/* Button.svelte */}
-
+```svelte filename="Button.svelte" renderer="svelte" language="js"
 <script>
   import { createEventDispatcher } from 'svelte';
   /**
@@ -152,12 +150,8 @@ export const Button: React.FC<ButtonProps> = ({
 <button type="button" {style} on:click="{onClick}">{label}</button>
 ```
 
-```html renderer="vue" language="js" tabTitle="3"
-{/* Button.vue */}
-
-<template>
-  {/* the component markup implementation */}
-</template>
+```html filename="Button.vue" renderer="vue" language="js"
+<template> <!-- The component markup implementation --> </template>
 
 <script>
   export default {
@@ -210,12 +204,8 @@ export const Button: React.FC<ButtonProps> = ({
 </script>
 ```
 
-```html renderer="vue" language="ts" tabTitle="3"
-{/* Button.vue */}
-
-<template>
-  {/* the component markup implementation */}
-</template>
+```html filename="Button.vue" renderer="vue" language="ts"
+<template> <!-- The component markup implementation --> </template>
 
 <script lang="ts">
   import { defineComponent, reactive } from 'vue';
@@ -270,4 +260,3 @@ export const Button: React.FC<ButtonProps> = ({
   });
 </script>
 ```
-
diff --git a/docs/_snippets/button-story-action-event-handle.md b/docs/_snippets/button-story-action-event-handle.md
index 32c31b10ffdb..a574de6e82b6 100644
--- a/docs/_snippets/button-story-action-event-handle.md
+++ b/docs/_snippets/button-story-action-event-handle.md
@@ -106,4 +106,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/button-story-argtypes-with-categories.md b/docs/_snippets/button-story-argtypes-with-categories.md
index d4b36cbb7d9a..b1278748f55d 100644
--- a/docs/_snippets/button-story-argtypes-with-categories.md
+++ b/docs/_snippets/button-story-argtypes-with-categories.md
@@ -251,4 +251,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/button-story-argtypes-with-subcategories.md b/docs/_snippets/button-story-argtypes-with-subcategories.md
index 318ef14eed1d..818fa19b0e78 100644
--- a/docs/_snippets/button-story-argtypes-with-subcategories.md
+++ b/docs/_snippets/button-story-argtypes-with-subcategories.md
@@ -275,4 +275,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/button-story-baseline-with-satisfies-story-level.md b/docs/_snippets/button-story-baseline-with-satisfies-story-level.md
index 61da26569ef2..d95245125c81 100644
--- a/docs/_snippets/button-story-baseline-with-satisfies-story-level.md
+++ b/docs/_snippets/button-story-baseline-with-satisfies-story-level.md
@@ -18,4 +18,3 @@ export const Example = {
   },
 } satisfies Story;
 ```
-
diff --git a/docs/_snippets/button-story-baseline-with-satisfies.md b/docs/_snippets/button-story-baseline-with-satisfies.md
index 5ac57b99484f..c1cfe8ddec81 100644
--- a/docs/_snippets/button-story-baseline-with-satisfies.md
+++ b/docs/_snippets/button-story-baseline-with-satisfies.md
@@ -10,4 +10,3 @@ const meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/button-story-click-handler-args.md b/docs/_snippets/button-story-click-handler-args.md
index 03f55f914183..1feaa43722d1 100644
--- a/docs/_snippets/button-story-click-handler-args.md
+++ b/docs/_snippets/button-story-click-handler-args.md
@@ -245,7 +245,7 @@ export const Text: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="3"
+```js filename="Button.stories.js" renderer="vue" language="js"
 import Button from './Button.vue';
 
 import { action } from '@storybook/addon-actions';
@@ -271,7 +271,7 @@ export const Text = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts-4-9" tabTitle="3"
+```ts filename="Button.stories.ts" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
@@ -302,7 +302,7 @@ export const Primary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="Button.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
@@ -374,4 +374,3 @@ export const Text: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/button-story-click-handler-simple-docs.md b/docs/_snippets/button-story-click-handler-simple-docs.md
deleted file mode 100644
index 20dfff72f628..000000000000
--- a/docs/_snippets/button-story-click-handler-simple-docs.md
+++ /dev/null
@@ -1,14 +0,0 @@
-```js filename="Button.stories.js|jsx" renderer="react" language="js"
-import { action } from '@storybook/addon-actions';
-
-import { Button } from './Button';
-
-export default {
-  component: Button,
-};
-
-export const Text = {
-  render: ({ label, onClick }) => <Button label={label} onClick={onClick} />,
-};
-```
-
diff --git a/docs/_snippets/button-story-click-handler-simplificated.md b/docs/_snippets/button-story-click-handler-simplificated.md
index 7c15bd02541b..983d07c5a843 100644
--- a/docs/_snippets/button-story-click-handler-simplificated.md
+++ b/docs/_snippets/button-story-click-handler-simplificated.md
@@ -119,28 +119,6 @@ export const Text = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* Button.stories.svelte */}
-
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-  import Button from './Button.svelte';
-</script>
-
-{/*
-  See https://storybook.js.org/docs/essentials/actions#action-argtype-annotation
-  to learn how to set up argTypes for actions
-*/}
-
-<Meta title="Button" component={Button} argTypes={{ onClick: { action: "onClick" }, }} />
-
-<template let:args>
-  <button {...args} on:click="{args.onClick}" />
-</template>
-
-<Story name="Text" args={{ label: 'Hello' }}/>
-```
-
 ```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
@@ -262,4 +240,3 @@ export const Text: Story = {
   args: {},
 };
 ```
-
diff --git a/docs/_snippets/button-story-click-handler.md b/docs/_snippets/button-story-click-handler.md
index c9b2e1a206d1..72ceb73b21c7 100644
--- a/docs/_snippets/button-story-click-handler.md
+++ b/docs/_snippets/button-story-click-handler.md
@@ -149,22 +149,6 @@ export const Text = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* Button.stories.svelte */}
-
-<script>
-  import { Meta, Story } from '@storybook/addon-svelte-csf';
-
-  import { action } from '@storybook/addon-actions';
-
-  import Button from './Button.svelte';
-</script>
-
-<meta title="Button" component="{Button}" />
-
-<Story name="Text"> <Button text="Hello" on:click={action('clicked')}/> </Story>
-```
-
 ```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/svelte';
 import { action } from '@storybook/addon-actions';
@@ -216,7 +200,7 @@ export const Text: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="3"
+```js filename="Button.stories.js" renderer="vue" language="js"
 import Button from './Button.vue';
 
 import { action } from '@storybook/addon-actions';
@@ -238,7 +222,7 @@ export const Text = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts-4-9" tabTitle="3"
+```ts filename="Button.stories.ts" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
@@ -265,7 +249,7 @@ export const Text: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="Button.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
@@ -323,4 +307,3 @@ export const Text: Story = {
   render: () => html`<custom-button label="Hello" @click=${action('clicked')}></custom-button>`,
 };
 ```
-
diff --git a/docs/_snippets/button-story-component-args-primary.md b/docs/_snippets/button-story-component-args-primary.md
index 81b292e7a885..16519e18cd48 100644
--- a/docs/_snippets/button-story-component-args-primary.md
+++ b/docs/_snippets/button-story-component-args-primary.md
@@ -52,7 +52,6 @@ const meta = {
 } satisfies Meta<typeof Button>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 ```
 
 ```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
@@ -93,7 +92,7 @@ export default {
 ```
 
 ```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts-4-9"
-import type { Meta, StoryObj } from 'storybook-solidjs';
+import type { Meta } from 'storybook-solidjs';
 
 import { Button } from './Button';
 
@@ -110,7 +109,6 @@ const meta = {
 } satisfies Meta<typeof Button>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
 ```
 
 ```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts"
@@ -134,7 +132,27 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    //👇 Creates specific argTypes
+    argTypes: {
+      backgroundColor: { control: 'color' },
+    },
+    args: {
+      //👇 Now all Button stories will be primary.
+      primary: true,
+    },
+  });
+</script>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import Button from './Button.svelte';
 
 export default {
@@ -150,19 +168,27 @@ export default {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* Button.stories.svelte */}
-
-<script>
-  import { Meta } from '@storybook/addon-svelte-csf';
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';
-</script>
 
-<Meta title="Button" component={Button} args={{ primary: true, }} />
+  const { Story } = defineMeta({
+    component: Button,
+    //👇 Creates specific argTypes
+    argTypes: {
+      backgroundColor: { control: 'color' },
+    },
+    args: {
+      //👇 Now all Button stories will be primary.
+      primary: true,
+    },
+  });
+</script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -182,7 +208,27 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    //👇 Creates specific argTypes
+    argTypes: {
+      backgroundColor: { control: 'color' },
+    },
+    args: {
+      //👇 Now all Button stories will be primary.
+      primary: true,
+    },
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -289,4 +335,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/button-story-component-decorator.md b/docs/_snippets/button-story-component-decorator.md
index a50f6e1e6034..85ef46ff097f 100644
--- a/docs/_snippets/button-story-component-decorator.md
+++ b/docs/_snippets/button-story-component-decorator.md
@@ -190,7 +190,21 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+  import MarginDecorator from './MarginDecorator.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    decorators: [() => MarginDecorator],
+  });
+</script>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import Button from './Button.svelte';
 import MarginDecorator from './MarginDecorator.svelte';
 
@@ -200,27 +214,21 @@ export default {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* Button.stories.svelte */}
-
-<script>
-  import { Meta, Template } from '@storybook/addon-svelte-csf';
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
+  import Button from './Button.svelte';
   import MarginDecorator from './MarginDecorator.svelte';
 
-  import Button from './Button.svelte';
+  const { Story } = defineMeta({
+    component: Button,
+    decorators: [() => MarginDecorator],
+  });
 </script>
-
-<meta title="Button" component="{Button}" />
-
-<template let:args>
-  <MarginDecorator>
-    {/*👇 Your component here */}
-  </MarginDecorator>
-</template>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -229,12 +237,26 @@ import MarginDecorator from './MarginDecorator.svelte';
 const meta = {
   component: Button,
   decorators: [() => MarginDecorator],
-};
+} satisfies Meta<typeof Button>;
 
 export default meta;
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+  import MarginDecorator from './MarginDecorator.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    decorators: [() => MarginDecorator],
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -309,4 +331,3 @@ type Story = StoryObj;
 
 export const Example: Story = {};
 ```
-
diff --git a/docs/_snippets/button-story-controls-primary-variant.md b/docs/_snippets/button-story-controls-primary-variant.md
index c3b6dc562ca1..bec2cf1b1044 100644
--- a/docs/_snippets/button-story-controls-primary-variant.md
+++ b/docs/_snippets/button-story-controls-primary-variant.md
@@ -17,6 +17,34 @@ export const Primary: Story = {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<Story name="Primary" args={{ variant: 'primary' }} />
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+};
+
+export const Primary = {
+  args: {
+    variant: 'primary',
+  },
+};
+```
+
 ```js filename="Button.stories.js|jsx" renderer="common" language="js"
 import { Button } from './Button';
 
@@ -31,6 +59,39 @@ export const Primary = {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<Story name="Primary" args={{ variant: 'primary' }} />
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+  },
+};
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -51,6 +112,39 @@ export const Primary: Story = {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<Story name="Primary" args={{ variant: 'primary' }} />
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+  },
+};
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -99,4 +193,3 @@ export const Primary: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/button-story-controls-radio-group.md b/docs/_snippets/button-story-controls-radio-group.md
index 7a548bee60a4..19a3386680f4 100644
--- a/docs/_snippets/button-story-controls-radio-group.md
+++ b/docs/_snippets/button-story-controls-radio-group.md
@@ -16,6 +16,38 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      variant: {
+        options: ['primary', 'secondary'],
+        control: { type: 'radio' },
+      },
+    },
+  });
+</script>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+  argTypes: {
+    variant: {
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+    },
+  },
+};
+```
+
 ```js filename="Button.stories.js|jsx" renderer="common" language="js"
 import { Button } from './Button';
 
@@ -30,6 +62,42 @@ export default {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      variant: {
+        options: ['primary', 'secondary'],
+        control: { type: 'radio' },
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+  argTypes: {
+    variant: {
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -49,6 +117,42 @@ const meta = {
 export default meta;
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      variant: {
+        options: ['primary', 'secondary'],
+        control: { type: 'radio' },
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  argTypes: {
+    variant: {
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+    },
+  },
+};
+
+export default meta;
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -95,4 +199,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/button-story-decorator.md b/docs/_snippets/button-story-decorator.md
index e0611b5e6458..e53848edf6fa 100644
--- a/docs/_snippets/button-story-decorator.md
+++ b/docs/_snippets/button-story-decorator.md
@@ -159,7 +159,27 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+  import MarginDecorator from './MarginDecorator.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<Story
+  name="Primary"
+  decorators={[
+    () => MarginDecorator
+  ]}
+/>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import Button from './Button.svelte';
 import MarginDecorator from './MarginDecorator.svelte';
 
@@ -172,7 +192,27 @@ export const Primary = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+  import MarginDecorator from './MarginDecorator.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<Story
+  name="Primary"
+  decorators={[
+    () => MarginDecorator
+  ]}
+/>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -190,7 +230,27 @@ export const Primary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+  import MarginDecorator from './MarginDecorator.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<Story
+  name="Primary"
+  decorators={[
+    () => MarginDecorator
+  ]}
+/>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -307,4 +367,3 @@ export const Primary: Story = {
   decorators: [(story) => html`<div style="margin: 3em">${story()}</div>`],
 };
 ```
-
diff --git a/docs/_snippets/button-story-default-docs-code.md b/docs/_snippets/button-story-default-docs-code.md
deleted file mode 100644
index 65c72cab6b18..000000000000
--- a/docs/_snippets/button-story-default-docs-code.md
+++ /dev/null
@@ -1,67 +0,0 @@
-```js filename="Button.stories.js" renderer="svelte" language="js"
-import Button from './Button.svelte';
-
-export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'Button',
-  component: Button,
-  //👇 Creates specific argTypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-};
-
-//👇 Some function to demonstrate the behavior
-const someFunction = (someValue) => {
-  return `i am a ${someValue}`;
-};
-
-export const ExampleStory = (args) => {
-  //👇 Destructure the label from the args object
-  const { label } = args;
-
-  //👇 Assigns the function result to a variable and pass it as a prop into the component
-  const functionResult = someFunction(label);
-  return {
-    Component: Button,
-    props: {
-      ...args,
-      label: functionResult,
-    },
-  };
-};
-ExampleStory.args = {
-  primary: true,
-  size: 'small',
-  label: 'button',
-};
-```
-
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* Button.stories.svelte */}
-
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
-  import Button from './Button.svelte';
-
-  //👇 Some function to demonstrate the behavior
-  function someFunction(someValue) {
-    return `i am a ${someValue}`;
-  }
-</script>
-
-{/*👇 Creates specific argTypes */}
-<Meta title="Button" component={Button} argTypes={{ backgroundColor: { control: 'color' }, }} />
-
-{/* 👇 Assigns the function result to a variable and pass it as a prop into the component */}
-<template let:args>
-  <button {...args} label="{someFunction(args.label)}" />
-</template>
-
-<Story name="ExampleStory" args={{ primary: true, size:'small', label: 'Button', }} />
-```
-
diff --git a/docs/_snippets/button-story-default-export-with-component.md b/docs/_snippets/button-story-default-export-with-component.md
index 11b2d8aa7039..e4e58c13a619 100644
--- a/docs/_snippets/button-story-default-export-with-component.md
+++ b/docs/_snippets/button-story-default-export-with-component.md
@@ -88,7 +88,19 @@ const meta: Meta<typeof Button> = {
 export default meta;
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import Button from './Button.svelte';
 
 export default {
@@ -96,7 +108,19 @@ export default {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -108,7 +132,19 @@ const meta = {
 export default meta;
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -168,4 +204,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/button-story-default-export.md b/docs/_snippets/button-story-default-export.md
index cfd0cbae6bc0..1cf14b769a66 100644
--- a/docs/_snippets/button-story-default-export.md
+++ b/docs/_snippets/button-story-default-export.md
@@ -109,4 +109,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/button-story-disable-addon.md b/docs/_snippets/button-story-disable-addon.md
index a147b623f617..41ceff477219 100644
--- a/docs/_snippets/button-story-disable-addon.md
+++ b/docs/_snippets/button-story-disable-addon.md
@@ -92,4 +92,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/button-story-grouped.md b/docs/_snippets/button-story-grouped.md
index ff931669c2de..0ff8b0086931 100644
--- a/docs/_snippets/button-story-grouped.md
+++ b/docs/_snippets/button-story-grouped.md
@@ -81,4 +81,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/button-story-hoisted.md b/docs/_snippets/button-story-hoisted.md
index 8072369576e5..8d61bb1f0990 100644
--- a/docs/_snippets/button-story-hoisted.md
+++ b/docs/_snippets/button-story-hoisted.md
@@ -103,4 +103,3 @@ type Story = StoryObj;
 // This is the only named export in the file, and it matches the component name
 export const Button: Story = {};
 ```
-
diff --git a/docs/_snippets/button-story-hypothetical-example.md b/docs/_snippets/button-story-hypothetical-example.md
index 055e451d8eb6..ed974f40b2c4 100644
--- a/docs/_snippets/button-story-hypothetical-example.md
+++ b/docs/_snippets/button-story-hypothetical-example.md
@@ -60,4 +60,3 @@ export const Sample: Story = {
   }),
 };
 ```
-
diff --git a/docs/_snippets/button-story-matching-argtypes.md b/docs/_snippets/button-story-matching-argtypes.md
index f1f373ba323d..080f78c84e77 100644
--- a/docs/_snippets/button-story-matching-argtypes.md
+++ b/docs/_snippets/button-story-matching-argtypes.md
@@ -65,4 +65,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/button-story-onclick-action-spy.md b/docs/_snippets/button-story-onclick-action-spy.md
index 67e85c1e778c..d868c21456ea 100644
--- a/docs/_snippets/button-story-onclick-action-spy.md
+++ b/docs/_snippets/button-story-onclick-action-spy.md
@@ -55,4 +55,3 @@ const meta: Meta<typeof Button> = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/button-story-primary-composition.md b/docs/_snippets/button-story-primary-composition.md
index 15a9897a0427..f04787b86ae4 100644
--- a/docs/_snippets/button-story-primary-composition.md
+++ b/docs/_snippets/button-story-primary-composition.md
@@ -25,6 +25,49 @@ export const Secondary: Story = {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+
+  const primaryArgs = {
+    primary: true,
+    label: 'Button',
+  }
+</script>
+
+<Story name="Primary" args={primaryArgs} />
+
+<Story name="Secondary" args={{...primaryArgs, primary: false}} />
+```
+
+```js filename="Button.stories.js|jsx" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+};
+
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    ...Primary.args,
+    primary: false,
+  },
+};
+```
+
 ```js filename="Button.stories.js|jsx" renderer="common" language="js"
 import { Button } from './Button';
 
@@ -47,6 +90,54 @@ export const Secondary = {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+
+  const primaryArgs = {
+    primary: true,
+    label: 'Button',
+  }
+</script>
+
+<Story name="Primary" args={primaryArgs} />
+
+<Story name="Secondary" args={{...primaryArgs, primary: false}} />
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    ...Primary.args,
+    primary: false,
+  },
+};
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -75,6 +166,54 @@ export const Secondary: Story = {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+
+  const primaryArgs = {
+    primary: true,
+    label: 'Button',
+  }
+</script>
+
+<Story name="Primary" args={primaryArgs} />
+
+<Story name="Secondary" args={{...primaryArgs, primary: false}} />
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    ...Primary.args,
+    primary: false,
+  },
+};
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -147,4 +286,3 @@ export const Secondary: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/button-story-primary-long-name.md b/docs/_snippets/button-story-primary-long-name.md
index 0bf7d82e78d1..ae477a342a28 100644
--- a/docs/_snippets/button-story-primary-long-name.md
+++ b/docs/_snippets/button-story-primary-long-name.md
@@ -25,6 +25,53 @@ export const PrimaryLongName: Story = {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+
+  const primaryArgs = {
+    primary: true,
+    label: 'Button',
+  }
+</script>
+
+<Story name="Primary" args={primaryArgs} />
+
+<Story name="PrimaryLongName"
+  args={{
+    ...primaryArgs,
+    label: 'Primary with a really long name'
+  }} />
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+};
+
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const PrimaryLongName = {
+  args: {
+    ...Primary.args,
+    label: 'Primary with a really long name',
+  },
+};
+```
+
 ```js filename="Button.stories.js|jsx" renderer="common" language="js"
 import { Button } from './Button';
 
@@ -47,6 +94,58 @@ export const PrimaryLongName = {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+
+  const primaryArgs = {
+    primary: true,
+    label: 'Button',
+  }
+</script>
+
+<Story name="Primary" args={primaryArgs} />
+
+<Story name="PrimaryLongName"
+  args={{
+    ...primaryArgs,
+    label: 'Primary with a really long name'
+  }} />
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const PrimaryLongName: Story = {
+  args: {
+    ...Primary.args,
+    label: 'Primary with a really long name',
+  },
+};
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -75,6 +174,58 @@ export const PrimaryLongName: Story = {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+
+  const primaryArgs = {
+    primary: true,
+    label: 'Button',
+  }
+</script>
+
+<Story name="Primary" args={primaryArgs} />
+
+<Story name="PrimaryLongName"
+  args={{
+    ...primaryArgs,
+    label: 'Primary with a really long name'
+  }} />
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const PrimaryLongName: Story = {
+  args: {
+    ...Primary.args,
+    label: 'Primary with a really long name',
+  },
+};
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -147,4 +298,3 @@ export const PrimaryLongName: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/button-story-rename-story.md b/docs/_snippets/button-story-rename-story.md
index 23e6f25a0918..e1c114962351 100644
--- a/docs/_snippets/button-story-rename-story.md
+++ b/docs/_snippets/button-story-rename-story.md
@@ -188,7 +188,7 @@ export default {
   component: Button,
 };
 
-export const Primary = ({
+export const Primary = {
   // 👇 Rename this story
   name: 'I am the primary',
   args: {
@@ -210,7 +210,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = ({
+export const Primary: Story = {
   // 👇 Rename this story
   name: 'I am the primary',
   args: {
@@ -232,7 +232,7 @@ const meta: Meta<typeof Button> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Primary: Story = ({
+export const Primary: Story = {
   // 👇 Rename this story
   name: 'I am the primary',
   args: {
@@ -337,4 +337,3 @@ export const Primary: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/button-story-using-args.md b/docs/_snippets/button-story-using-args.md
index aa8610f4d991..848448d8a6cd 100644
--- a/docs/_snippets/button-story-using-args.md
+++ b/docs/_snippets/button-story-using-args.md
@@ -12,8 +12,8 @@ type Story = StoryObj<Button>;
 
 export const Primary: Story = {
   args: {
-    label: 'Button',
     backgroundColor: '#ff0',
+    label: 'Button',
   },
 };
 
@@ -51,7 +51,7 @@ export default {
 export const Primary = {
   render: (args) => createButton(args),
   args: {
-    primary: true,
+    backgroundColor: '#ff0',
     label: 'Button',
   },
 };
@@ -96,7 +96,7 @@ type Story = StoryObj<ButtonArgs>;
 export const Primary: Story = {
   render: (args) => createButton(args),
   args: {
-    primary: true,
+    backgroundColor: '#ff0',
     label: 'Button',
   },
 };
@@ -312,7 +312,43 @@ export const Tertiary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<Story
+  name="Primary"
+  args={{
+    backgroundColor: '#ff0',
+    label: 'Button',
+  }}
+/>
+
+<Story
+  name="Secondary"
+  args={{
+    backgroundColor: '#ff0',
+    label: '😄👍😍💯',
+  }}
+/>
+
+<Story
+  name="Tertiary"
+  args={{
+    backgroundColor:'#ff0',
+    label: '📚📕📈🤓',
+  }}
+/>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import Button from './Button.svelte';
 
 export default {
@@ -341,35 +377,47 @@ export const Tertiary = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* Button.stories.svelte */}
-
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
 </script>
 
-<Meta title="Button" component={Button} argTypes={{ label: { control: 'text' }, primary: { control:
-'boolean' }, }} />
+<Story
+  name="Primary"
+  args={{
+    backgroundColor: '#ff0',
+    label: 'Button',
+  }}
+/>
 
-{/* 👇 We create a “template” of how args map to rendering */}
-<template let:args>
-  <button {...args} />
-</template>
+<Story
+  name="Secondary"
+  args={{
+    backgroundColor: '#ff0',
+    label: '😄👍😍💯',
+  }}
+/>
 
-{/* 👇 Each story then reuses that template */}
-<Story name="Primary" args={{ background: '#ff0', label: 'Button' }} /> <Story name="Secondary"
-args={{ background: '#ff0', label: '😄👍😍💯' }} /> <Story name="Tertiary" args={{ background:
-'#ff0', label: '📚📕📈🤓' }} />
+<Story
+  name="Tertiary"
+  args={{
+    backgroundColor:'#ff0',
+    label: '📚📕📈🤓',
+  }}
+/>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
 
-//👇This default export determines where your story goes in the story list
 const meta = {
   component: Button,
 } satisfies Meta<typeof Button>;
@@ -399,12 +447,47 @@ export const Tertiary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<Story
+  name="Primary"
+  args={{
+    backgroundColor: '#ff0',
+    label: 'Button',
+  }}
+/>
+
+<Story
+  name="Secondary"
+  args={{
+    backgroundColor: '#ff0',
+    label: '😄👍😍💯',
+  }}
+/>
+
+<Story
+  name="Tertiary"
+  args={{
+    backgroundColor:'#ff0',
+    label: '📚📕📈🤓',
+  }}
+/>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
 
-//👇This default export determines where your story goes in the story list
 const meta: Meta<typeof Button> = {
   component: Button,
 };
@@ -434,7 +517,7 @@ export const Tertiary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="3"
+```js filename="Button.stories.js" renderer="vue" language="js"
 import Button from './Button.vue';
 
 export default {
@@ -489,7 +572,7 @@ export const Tertiary = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts-4-9" tabTitle="3"
+```ts filename="Button.stories.ts" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
@@ -549,7 +632,7 @@ export const Tertiary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="Button.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
@@ -575,7 +658,7 @@ export const Primary: Story = {
     template: '<Button v-bind="args" />',
   }),
   args: {
-    background: '#ff0',
+    backgroundColor: '#ff0',
     label: 'Button',
   },
 };
@@ -616,7 +699,7 @@ export default {
 
 export const Primary = {
   args: {
-    background: '#ff0',
+    backgroundColor: '#ff0',
     label: 'Button',
   },
 };
@@ -648,7 +731,7 @@ type Story = StoryObj;
 
 export const Primary: Story = {
   args: {
-    background: '#ff0',
+    backgroundColor: '#ff0',
     label: 'Button',
   },
 };
@@ -667,4 +750,3 @@ export const Tertiary: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/button-story-with-addon-example.md b/docs/_snippets/button-story-with-addon-example.md
index 211a987fcbec..352ed0817f75 100644
--- a/docs/_snippets/button-story-with-addon-example.md
+++ b/docs/_snippets/button-story-with-addon-example.md
@@ -213,7 +213,31 @@ export const Basic: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    /* 👇 The title prop is optional.
+     * See https://storybook.js.org/docs/configure/#configure-story-loading
+     * to learn how to generate automatic titles
+    */
+    title: 'Button',
+    component: Button,
+    parameters: {
+      myAddon: {
+        data: 'This data is passed to the addon',
+      },
+    },
+  });
+</script>
+
+<Story name="Basic"/>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import Button from './Button.svelte';
 
 export default {
@@ -234,24 +258,31 @@ export default {
 export const Basic = {};
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* Button.stories.svelte */}
-
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';
-</script>
 
-<Meta title="Button" component={Button} parameters={{ myAddon: { data: 'this data is passed to the
-addon', }, }} />
+  const { Story } = defineMeta({
+    /* 👇 The title prop is optional.
+     * See https://storybook.js.org/docs/configure/#configure-story-loading
+     * to learn how to generate automatic titles
+    */
+    title: 'Button',
+    component: Button,
+    parameters: {
+      myAddon: {
+        data: 'This data is passed to the addon',
+      },
+    },
+  });
+</script>
 
-<template let:args>
-  <button {...args} />
-</template>
+<Story name="Basic"/>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -277,7 +308,31 @@ type Story = StoryObj<typeof meta>;
 export const Basic: Story = {};
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    /* 👇 The title prop is optional.
+     * See https://storybook.js.org/docs/configure/#configure-story-loading
+     * to learn how to generate automatic titles
+    */
+    title: 'Button',
+    component: Button,
+    parameters: {
+      myAddon: {
+        data: 'This data is passed to the addon',
+      },
+    },
+  });
+</script>
+
+<Story name="Basic"/>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -453,4 +508,3 @@ export const Basic: Story = {
   render: () => html`<custom-button label="Hello"></custom-button>`,
 };
 ```
-
diff --git a/docs/_snippets/button-story-with-args.md b/docs/_snippets/button-story-with-args.md
index 2c0e9701c35f..3ff2014ecd91 100644
--- a/docs/_snippets/button-story-with-args.md
+++ b/docs/_snippets/button-story-with-args.md
@@ -224,7 +224,27 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<Story
+  name="Primary"
+  args={{
+    primary: true,
+    label: 'Button'
+  }}
+/>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import Button from './Button.svelte';
 
 export default {
@@ -239,30 +259,27 @@ export const Primary = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* Button.stories.svelte */}
-
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';
-</script>
-
-<Meta title="Button" component={Button} argTypes={{ label: { control: 'text' }, primary: { control:
-'boolean' }, }} />
-
-{/*👇 We create a “template” of how args map to rendering */}
 
-<template let:args>
-  <button {...args} />
-</template>
-
-{/* 👇 Each story then reuses that template */}
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
 
-<Story name='Primary' args={{ primary: true, label: 'Button' }} />
+<Story
+  name="Primary"
+  args={{
+    primary: true,
+    label: 'Button'
+  }}
+/>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -282,7 +299,27 @@ export const Primary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<Story
+  name="Primary"
+  args={{
+    primary: true,
+    label: 'Button'
+  }}
+/>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -302,7 +339,7 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="3"
+```js filename="Button.stories.js" renderer="vue" language="js"
 import Button from './Button.vue';
 
 export default {
@@ -329,7 +366,7 @@ export const Primary = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts-4-9" tabTitle="3"
+```ts filename="Button.stories.ts" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
@@ -361,7 +398,7 @@ export const Primary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="Button.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
@@ -423,4 +460,3 @@ export const Primary: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/button-story-with-emojis.md b/docs/_snippets/button-story-with-emojis.md
index f59e8067860f..0588748d9039 100644
--- a/docs/_snippets/button-story-with-emojis.md
+++ b/docs/_snippets/button-story-with-emojis.md
@@ -275,7 +275,31 @@ export const Tertiary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+	const { Story } = defineMeta({
+		component: Button,
+	});
+</script>
+
+<Story name="Primary">
+  <Button backgroundColor="#ff0" label="Button" />
+</Story>
+
+<Story name="Secondary">
+  <Button backgroundColor="#ff0" label="😄👍😍💯" />
+</Story>
+
+<Story name="Tertiary">
+  <Button backgroundColor="#ff0" label="📚📕📈🤓" />
+</Story>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import Button from './Button.svelte';
 
 export default {
@@ -318,29 +342,31 @@ export const Tertiary = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-<script>
-  import { Meta, Story } from '@storybook/addon-svelte-csf';
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';
-</script>
 
-<meta title="Button" component="{Button}" />
+	const { Story } = defineMeta({
+		component: Button,
+	});
+</script>
 
 <Story name="Primary">
-  <button background="#ff0" label="Button" />
+  <Button backgroundColor="#ff0" label="Button" />
 </Story>
 
 <Story name="Secondary">
-  <button background="#ff0" label="😄👍😍💯" />
+  <Button backgroundColor="#ff0" label="😄👍😍💯" />
 </Story>
 
 <Story name="Tertiary">
-  <button background="#ff0" label="📚📕📈🤓" />
+  <Button backgroundColor="#ff0" label="📚📕📈🤓" />
 </Story>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -388,7 +414,31 @@ export const Tertiary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+	const { Story } = defineMeta({
+		component: Button,
+	});
+</script>
+
+<Story name="Primary">
+  <Button backgroundColor="#ff0" label="Button" />
+</Story>
+
+<Story name="Secondary">
+  <Button backgroundColor="#ff0" label="😄👍😍💯" />
+</Story>
+
+<Story name="Tertiary">
+  <Button backgroundColor="#ff0" label="📚📕📈🤓" />
+</Story>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -489,21 +539,21 @@ type Story = StoryObj<typeof Button>;
 export const Primary: Story = {
   render: () => ({
     components: { Button },
-    template: '<Button background="#ff0" label="Button" />',
+    template: '<Button backgroundColor="#ff0" label="Button" />',
   }),
 };
 
 export const Secondary: Story = {
   render: () => ({
     components: { Button },
-    template: '<Button background="#ff0" label="😄👍😍💯" />',
+    template: '<Button backgroundColor="#ff0" label="😄👍😍💯" />',
   }),
 };
 
 export const Tertiary: Story = {
   render: () => ({
     components: { Button },
-    template: '<Button background="#ff0" label="📚📕📈🤓" />',
+    template: '<Button backgroundColor="#ff0" label="📚📕📈🤓" />',
   }),
 };
 ```
@@ -528,21 +578,21 @@ type Story = StoryObj<typeof Button>;
 export const Primary: Story = {
   render: () => ({
     components: { Button },
-    template: '<Button background="#ff0" label="Button" />',
+    template: '<Button backgroundColor="#ff0" label="Button" />',
   }),
 };
 
 export const Secondary: Story = {
   render: () => ({
     components: { Button },
-    template: '<Button background="#ff0" label="😄👍😍💯" />',
+    template: '<Button backgroundColor="#ff0" label="😄👍😍💯" />',
   }),
 };
 
 export const Tertiary: Story = {
   render: () => ({
     components: { Button },
-    template: '<Button background="#ff0" label="📚📕📈🤓" />',
+    template: '<Button backgroundColor="#ff0" label="📚📕📈🤓" />',
   }),
 };
 ```
@@ -560,15 +610,15 @@ export default {
  * to learn how to use render functions.
  */
 export const Primary = {
-  render: () => html`<demo-button .background="#ff0" .label="Button"></demo-button>`,
+  render: () => html`<demo-button .backgroundColor="#ff0" .label="Button"></demo-button>`,
 };
 
 export const Secondary = {
-  render: () => html`<demo-button .background="#ff0" .label="😄👍😍💯"></demo-button>`,
+  render: () => html`<demo-button .backgroundColor="#ff0" .label="😄👍😍💯"></demo-button>`,
 };
 
 export const Tertiary = {
-  render: () => html`<demo-button .background="#ff0" .label="📚📕📈🤓"></demo-button>`,
+  render: () => html`<demo-button .backgroundColor="#ff0" .label="📚📕📈🤓"></demo-button>`,
 };
 ```
 
@@ -590,15 +640,14 @@ type Story = StoryObj;
  * to learn how to use render functions.
  */
 export const Primary: Story = {
-  render: () => html`<demo-button .background="#ff0" .label="Button"></demo-button>`,
+  render: () => html`<demo-button .backgroundColor="#ff0" .label="Button"></demo-button>`,
 };
 
 export const Secondary: Story = {
-  render: () => html`<demo-button .background="#ff0" .label="😄👍😍💯"></demo-button>`,
+  render: () => html`<demo-button .backgroundColor="#ff0" .label="😄👍😍💯"></demo-button>`,
 };
 
 export const Tertiary: Story = {
-  render: () => html`<demo-button .background="#ff0" .label="📚📕📈🤓"></demo-button>`,
+  render: () => html`<demo-button .backgroundColor="#ff0" .label="📚📕📈🤓"></demo-button>`,
 };
 ```
-
diff --git a/docs/_snippets/button-story-with-parameters.md b/docs/_snippets/button-story-with-parameters.md
index da16a27e21ff..ee308f651d33 100644
--- a/docs/_snippets/button-story-with-parameters.md
+++ b/docs/_snippets/button-story-with-parameters.md
@@ -126,4 +126,3 @@ const meta: Meta<typeof Button> = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/button-story-with-sample.md b/docs/_snippets/button-story-with-sample.md
index 5876bf16d4ae..92480d5059a9 100644
--- a/docs/_snippets/button-story-with-sample.md
+++ b/docs/_snippets/button-story-with-sample.md
@@ -21,4 +21,3 @@ export const Sample = {
   render: () => <Button label="hello button" />,
 };
 ```
-
diff --git a/docs/_snippets/button-story.md b/docs/_snippets/button-story.md
index 3b9b10ac020a..fef764603915 100644
--- a/docs/_snippets/button-story.md
+++ b/docs/_snippets/button-story.md
@@ -449,46 +449,35 @@ export const Primary: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js"
-import Button from './Button.svelte';
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-export default {
-  component: Button,
-};
+  import Button from './Button.svelte';
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary = {
-  render: () => ({
-    Component: Button,
-    props: {
-      primary: true,
-      label: 'Button',
-    },
-  }),
-};
-```
+	const { Story } = defineMeta({
+		component: Button,
+	});
+</script>
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* Button.stories.svelte */}
+<Story name="Primary" args={{ primary: true, label: 'Button' }} />
+```
 
-<script>
-  import { Meta, Story } from '@storybook/addon-svelte-csf';
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Button from './Button.svelte';
-</script>
 
-<meta title="Button" component="{Button}" />
+	const { Story } = defineMeta({
+		component: Button,
+	});
+</script>
 
-<Story name="Primary">
-  <button primary="true" label="Button" />
-</Story>
+<Story name="Primary" args={{ primary: true, label: 'Button' }} />
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -516,7 +505,21 @@ export const Primary: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+	const { Story } = defineMeta({
+		component: Button,
+	});
+</script>
+
+<Story name="Primary" args={{ primary: true, label: 'Button' }} />
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -642,4 +645,3 @@ export const Primary: Story = {
   render: () => html`<demo-button primary></demo-button>`,
 };
 ```
-
diff --git a/docs/_snippets/checkbox-story-csf.md b/docs/_snippets/checkbox-story-csf.md
index 579a92497eab..b277479d0b13 100644
--- a/docs/_snippets/checkbox-story-csf.md
+++ b/docs/_snippets/checkbox-story-csf.md
@@ -17,6 +17,39 @@ export const Unchecked: Story = {
 };
 ```
 
+```svelte filename="Checkbox.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Checkbox from './Checkbox.svelte';
+
+  const { Story } = defineMeta({
+    component: Checkbox,
+  });
+</script>
+
+<Story
+  name="Unchecked"
+  args={{
+    label: 'Unchecked',
+  }}
+/>
+```
+
+```js filename="Checkbox.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Checkbox from './Checkbox.svelte';
+
+export default {
+  component: Checkbox,
+};
+
+export const Unchecked = {
+  args: {
+    label: 'Unchecked',
+  },
+};
+```
+
 ```js filename="Checkbox.stories.js|jsx" renderer="common" language="js"
 import { Checkbox } from './Checkbox';
 
@@ -31,6 +64,44 @@ export const Unchecked = {
 };
 ```
 
+```svelte filename="Checkbox.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Checkbox from './Checkbox.svelte';
+
+  const { Story } = defineMeta({
+    component: Checkbox,
+  });
+</script>
+
+<Story
+  name="Unchecked"
+  args={{
+    label: 'Unchecked',
+  }}
+/>
+```
+
+```ts filename="Checkbox.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Checkbox from './Checkbox.svelte';
+
+const meta = {
+  component: Checkbox,
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Unchecked: Story = {
+  args: {
+    label: 'Unchecked',
+  },
+};
+```
+
 ```ts filename="Checkbox.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -51,11 +122,29 @@ export const Unchecked: Story = {
 };
 ```
 
-```ts filename="Checkbox.stories.ts|tsx" renderer="common" language="ts"
-// Replace your-framework with the name of your framework
-import type { Meta, StoryObj } from '@storybook/your-framework';
+```svelte filename="Checkbox.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-import { Checkbox } from './Checkbox';
+  import Checkbox from './Checkbox.svelte';
+
+  const { Story } = defineMeta({
+    component: Checkbox,
+  });
+</script>
+
+<Story
+  name="Unchecked"
+  args={{
+    label: 'Unchecked',
+  }}
+/>
+```
+
+```ts filename="Checkbox.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Checkbox from './Checkbox.svelte';
 
 const meta: Meta<typeof Checkbox> = {
   component: Checkbox,
@@ -71,24 +160,24 @@ export const Unchecked: Story = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* Checkbox.stories.svelte */}
+```ts filename="Checkbox.stories.ts|tsx" renderer="common" language="ts"
+// Replace your-framework with the name of your framework
+import type { Meta, StoryObj } from '@storybook/your-framework';
 
-<script>
-  import { Meta, Story } from '@storybook/addon-svelte-csf';
+import { Checkbox } from './Checkbox';
 
-  import Checkbox from './Checkbox.svelte';
-</script>
+const meta: Meta<typeof Checkbox> = {
+  component: Checkbox,
+};
 
-<meta title="MDX/Checkbox" component="{Checkbox}" />
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
 
-<Story name="allCheckboxes">
-  <form>
-    <Checkbox id="Unchecked" label="Unchecked" />
-    <Checkbox id="Checked" label="Checked" {checked} />
-    <Checkbox appearance="secondary" id="second" label="Secondary" {checked} />
-  </form>
-</Story>
+export const Unchecked: Story = {
+  args: {
+    label: 'Unchecked',
+  },
+};
 ```
 
 ```js filename="Checkbox.stories.js" renderer="web-components" language="js"
@@ -120,4 +209,3 @@ export const Unchecked: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/checkbox-story-grouped.md b/docs/_snippets/checkbox-story-grouped.md
index 4183e90af9ec..209d25373a76 100644
--- a/docs/_snippets/checkbox-story-grouped.md
+++ b/docs/_snippets/checkbox-story-grouped.md
@@ -81,4 +81,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/checkbox-story.md b/docs/_snippets/checkbox-story.md
index 6abf4e1c3017..a1343b992a0a 100644
--- a/docs/_snippets/checkbox-story.md
+++ b/docs/_snippets/checkbox-story.md
@@ -1,6 +1,5 @@
-```mdx renderer="common" language="mdx"
-{/* Checkbox.mdx */}
-
+<!-- prettier-ignore -->
+```mdx filename="Checkbox.mdx" renderer="common" language="mdx"
 import { Canvas, Meta } from '@storybook/blocks';
 
 import * as CheckboxStories from './Checkbox.stories';
@@ -9,27 +8,43 @@ import * as CheckboxStories from './Checkbox.stories';
 
 # Checkbox
 
-A checkbox is a square box that can be activated or deactivated when ticked. 
+A checkbox is a square box that can be activated or deactivated when ticked.
 
 Use checkboxes to select one or more options from a list of choices.
 
 <Canvas of={CheckboxStories.Unchecked} />
-````
+```
 
-```md renderer="react" language="mdx"
-{/* Checkbox.mdx */}
+<!-- prettier-ignore -->
+```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="Svelte CSF"
+import { Canvas, Meta } from '@storybook/blocks';
 
-import { Canvas, Meta, Story } from '@storybook/blocks';
-import * as CheckboxStories from './Checkbox.stories';
+import * as CheckboxStories from './Checkbox.stories.svelte';
 
 <Meta of={CheckboxStories} />
 
 # Checkbox
 
-With `MDX` we can compose Markdown documentation with `Checkbox` stories and interactive controls.
+A checkbox is a square box that can be activated or deactivated when ticked.
+
+Use checkboxes to select one or more options from a list of choices.
 
-<Canvas>
-  <Story of={CheckboxStories.Unchecked} />
-</Canvas>
+<Canvas of={CheckboxStories.Unchecked} />
 ```
 
+<!-- prettier-ignore -->
+```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as CheckboxStories from './Checkbox.stories';
+
+<Meta of={CheckboxStories} />
+
+# Checkbox
+
+A checkbox is a square box that can be activated or deactivated when ticked.
+
+Use checkboxes to select one or more options from a list of choices.
+
+<Canvas of={CheckboxStories.Unchecked} />
+```
diff --git a/docs/_snippets/chromatic-github-action.md b/docs/_snippets/chromatic-github-action.md
index 47bb6d65d2c9..ab5bb8523cc5 100644
--- a/docs/_snippets/chromatic-github-action.md
+++ b/docs/_snippets/chromatic-github-action.md
@@ -1,6 +1,4 @@
-```shell renderer="common" language="js"
-# .github/workflows/chromatic.yml
-
+```yml filename=".github/workflows/chromatic.yml" renderer="common" language="js"
 # Workflow name
 name: 'Chromatic Publish'
 
@@ -19,15 +17,14 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: 'yarn'
       - run: yarn
       #👇 Adds Chromatic as a step in the workflow
-      - uses: chromaui/action@v1
+      - uses: chromaui/action@latest
         # Options required for Chromatic's GitHub Action
         with:
           #👇 Chromatic projectToken,
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           token: ${{ secrets.GITHUB_TOKEN }}
 ```
-
diff --git a/docs/_snippets/chromatic-install.md b/docs/_snippets/chromatic-install.md
index f04d6b4c7470..b868ad7b2730 100644
--- a/docs/_snippets/chromatic-install.md
+++ b/docs/_snippets/chromatic-install.md
@@ -2,7 +2,10 @@
 npm install chromatic --save-dev
 ```
 
+```shell renderer="common" language="js" packageManager="pnpm"
+pnpm add --save-dev chromatic
+```
+
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn add --dev chromatic
 ```
-
diff --git a/docs/_snippets/chromatic-storybook-add.md b/docs/_snippets/chromatic-storybook-add.md
index aea0b17aa5f5..84756a1ae1b8 100644
--- a/docs/_snippets/chromatic-storybook-add.md
+++ b/docs/_snippets/chromatic-storybook-add.md
@@ -9,4 +9,3 @@ pnpm dlx storybook@latest add @chromatic-com/storybook
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@latest add @chromatic-com/storybook
 ```
-
diff --git a/docs/_snippets/compodoc-install.md b/docs/_snippets/compodoc-install.md
index 2db606064ae7..7319f09a66b4 100644
--- a/docs/_snippets/compodoc-install.md
+++ b/docs/_snippets/compodoc-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @compodoc/compodoc
 ```shell renderer="angular" language="js" packageManager="yarn"
 yarn add --dev @compodoc/compodoc
 ```
-
diff --git a/docs/_snippets/component-cypress-test.md b/docs/_snippets/component-cypress-test.md
index ef5562daf806..3346798edfad 100644
--- a/docs/_snippets/component-cypress-test.md
+++ b/docs/_snippets/component-cypress-test.md
@@ -13,4 +13,3 @@ describe('Login Form', () => {
   });
 });
 ```
-
diff --git a/docs/_snippets/component-playwright-test.md b/docs/_snippets/component-playwright-test.md
index faa1ce9728c1..91b6705612e7 100644
--- a/docs/_snippets/component-playwright-test.md
+++ b/docs/_snippets/component-playwright-test.md
@@ -9,4 +9,3 @@ test('Login Form inputs', async ({ page }) => {
   await expect(password).toBe('a-random-password');
 });
 ```
-
diff --git a/docs/_snippets/component-story-auto-title.md b/docs/_snippets/component-story-auto-title.md
index b89bb194b176..92ba228a4f75 100644
--- a/docs/_snippets/component-story-auto-title.md
+++ b/docs/_snippets/component-story-auto-title.md
@@ -80,4 +80,3 @@ export const Default = {
   args: { message: 'Hello world!' },
 };
 ```
-
diff --git a/docs/_snippets/component-story-conditional-controls-mutual-exclusion.md b/docs/_snippets/component-story-conditional-controls-mutual-exclusion.md
index 41a16c128408..cf09815088d7 100644
--- a/docs/_snippets/component-story-conditional-controls-mutual-exclusion.md
+++ b/docs/_snippets/component-story-conditional-controls-mutual-exclusion.md
@@ -21,6 +21,48 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      // Button can be passed a label or an image, not both
+      label: {
+        control: 'text',
+        if: { arg: 'image', truthy: false },
+      },
+      image: {
+        control: { type: 'select', options: ['foo.jpg', 'bar.jpg'] },
+        if: { arg: 'label', truthy: false },
+      },
+    },
+  });
+</script>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+  argTypes: {
+    // Button can be passed a label or an image, not both
+    label: {
+      control: 'text',
+      if: { arg: 'image', truthy: false },
+    },
+    image: {
+      control: { type: 'select', options: ['foo.jpg', 'bar.jpg'] },
+      if: { arg: 'label', truthy: false },
+    },
+  },
+};
+```
+
 ```js filename="Button.stories.js|jsx" renderer="common" language="js"
 import { Button } from './Button';
 
@@ -40,6 +82,52 @@ export default {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      // Button can be passed a label or an image, not both
+      label: {
+        control: 'text',
+        if: { arg: 'image', truthy: false },
+      },
+      image: {
+        control: { type: 'select', options: ['foo.jpg', 'bar.jpg'] },
+        if: { arg: 'label', truthy: false },
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+  argTypes: {
+    // Button can be passed a label or an image, not both
+    label: {
+      control: 'text',
+      if: { arg: 'image', truthy: false },
+    },
+    image: {
+      control: { type: 'select', options: ['foo.jpg', 'bar.jpg'] },
+      if: { arg: 'label', truthy: false },
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -64,6 +152,52 @@ const meta = {
 export default meta;
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      // Button can be passed a label or an image, not both
+      label: {
+        control: 'text',
+        if: { arg: 'image', truthy: false },
+      },
+      image: {
+        control: { type: 'select', options: ['foo.jpg', 'bar.jpg'] },
+        if: { arg: 'label', truthy: false },
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  argTypes: {
+    // Button can be passed a label or an image, not both
+    label: {
+      control: 'text',
+      if: { arg: 'image', truthy: false },
+    },
+    image: {
+      control: { type: 'select', options: ['foo.jpg', 'bar.jpg'] },
+      if: { arg: 'label', truthy: false },
+    },
+  },
+};
+
+export default meta;
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -125,4 +259,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/component-story-conditional-controls-toggle.md b/docs/_snippets/component-story-conditional-controls-toggle.md
index fa14d79829c9..5a5f0ededa8f 100644
--- a/docs/_snippets/component-story-conditional-controls-toggle.md
+++ b/docs/_snippets/component-story-conditional-controls-toggle.md
@@ -18,6 +18,42 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      label: { control: 'text' }, // Always shows the control
+      advanced: { control: 'boolean' },
+      // Only enabled if advanced is true
+      margin: { control: 'number', if: { arg: 'advanced' } },
+      padding: { control: 'number', if: { arg: 'advanced' } },
+      cornerRadius: { control: 'number', if: { arg: 'advanced' } },
+    },
+  });
+</script>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+  argTypes: {
+    label: { control: 'text' }, // Always shows the control
+    advanced: { control: 'boolean' },
+    // Only enabled if advanced is true
+    margin: { control: 'number', if: { arg: 'advanced' } },
+    padding: { control: 'number', if: { arg: 'advanced' } },
+    cornerRadius: { control: 'number', if: { arg: 'advanced' } },
+  },
+};
+```
+
 ```js filename="Button.stories.js|jsx" renderer="common" language="js"
 import { Button } from './Button';
 
@@ -34,6 +70,46 @@ export default {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      label: { control: 'text' }, // Always shows the control
+      advanced: { control: 'boolean' },
+      // Only enabled if advanced is true
+      margin: { control: 'number', if: { arg: 'advanced' } },
+      padding: { control: 'number', if: { arg: 'advanced' } },
+      cornerRadius: { control: 'number', if: { arg: 'advanced' } },
+    },
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+  argTypes: {
+    label: { control: 'text' }, // Always shows the control
+    advanced: { control: 'boolean' },
+    // Only enabled if advanced is true
+    margin: { control: 'number', if: { arg: 'advanced' } },
+    padding: { control: 'number', if: { arg: 'advanced' } },
+    cornerRadius: { control: 'number', if: { arg: 'advanced' } },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -55,6 +131,46 @@ const meta = {
 export default meta;
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      label: { control: 'text' }, // Always shows the control
+      advanced: { control: 'boolean' },
+      // Only enabled if advanced is true
+      margin: { control: 'number', if: { arg: 'advanced' } },
+      padding: { control: 'number', if: { arg: 'advanced' } },
+      cornerRadius: { control: 'number', if: { arg: 'advanced' } },
+    },
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  argTypes: {
+    label: { control: 'text' }, // Always shows the control
+    advanced: { control: 'boolean' },
+    // Only enabled if advanced is true
+    margin: { control: 'number', if: { arg: 'advanced' } },
+    padding: { control: 'number', if: { arg: 'advanced' } },
+    cornerRadius: { control: 'number', if: { arg: 'advanced' } },
+  },
+};
+
+export default meta;
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -107,4 +223,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/component-story-custom-args-complex.md b/docs/_snippets/component-story-custom-args-complex.md
index f3a5b1793fa6..de88849bca7e 100644
--- a/docs/_snippets/component-story-custom-args-complex.md
+++ b/docs/_snippets/component-story-custom-args-complex.md
@@ -288,7 +288,46 @@ export const ExampleStory: Story = {
 };
 ```
 
-```js filename="YourComponent.stories.js" renderer="svelte" language="js"
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  const { Story } = defineMeta({
+      component: YourComponent,
+      //👇 Creates specific argTypes
+      argTypes: {
+        propertyA: {
+          options: ['Item One', 'Item Two', 'Item Three'],
+          control: { type: 'select' }, // Automatically inferred when 'options' is defined
+        },
+        propertyB: {
+          options: ['Another Item One', 'Another Item Two', 'Another Item Three'],
+        },
+      },
+  });
+
+  const someFunction = (valuePropertyA, valuePropertyB) => {
+    // Do some logic here
+  };
+</script>
+
+<Story
+  name="ExampleStory"
+  args={{
+    propertyA: 'Item One',
+    propertyB: 'Another Item One',
+  }}
+>
+  {#snippet children(args)}
+    <YourComponent
+      {...args}
+      someProperty={someFunction(args.propertyA, args.propertyB)}
+    />
+  {/snippet}
+</Story>
+```
+
+```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import YourComponent from './YourComponent.svelte';
 
 export default {
@@ -310,9 +349,9 @@ const someFunction = (valuePropertyA, valuePropertyB) => {
 };
 
 export const ExampleStory = {
-  render: ({ propertyA, propertyB }) => {
+  render: (args) => {
     //👇 Assigns the function result to a variable
-    const someFunctionResult = someFunction(propertyA, propertyB);
+    const someFunctionResult = someFunction(args.propertyA, args.propertyB);
     return {
       Component: YourComponent,
       props: {
@@ -328,32 +367,46 @@ export const ExampleStory = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* YourComponent.stories.svelte */}
-
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
-  import YourComponent from './YourComponent.svelte';
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  const { Story } = defineMeta({
+      component: YourComponent,
+      //👇 Creates specific argTypes
+      argTypes: {
+        propertyA: {
+          options: ['Item One', 'Item Two', 'Item Three'],
+          control: { type: 'select' }, // Automatically inferred when 'options' is defined
+        },
+        propertyB: {
+          options: ['Another Item One', 'Another Item Two', 'Another Item Three'],
+        },
+      },
+  });
 
-  //👇 Some function to demonstrate the behavior
-  function someFunction(valuePropertyA, valuePropertyB) {
-    // Makes some computations and returns something
-  }
+  const someFunction = (valuePropertyA, valuePropertyB) => {
+    // Do some logic here
+  };
 </script>
 
-{/*👇 Creates specific argTypes and automatically infers them when 'options' is defined */}
-
-<Meta title="YourComponent" component={YourComponent} argTypes={{ propertyA: { options: ['Item One',
-'Item Two', 'Item Three'], control: { type: 'select' }, }, propertyB: { options: ['Another Item
-One', 'Another Item Two', 'Another Item Three'], }, }} />
-
-<template let:args>
-  <YourComponent {...args} someProperty="{someFunction(args.propertyA," args.propertyB)} />
-</template>
+<Story
+  name="ExampleStory"
+  args={{
+    propertyA: 'Item One',
+    propertyB: 'Another Item One',
+  }}
+>
+  {#snippet children(args)}
+    <YourComponent
+      {...args}
+      someProperty={someFunction(args.propertyA, args.propertyB)}
+    />
+  {/snippet}
+</Story>
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import YourComponent from './YourComponent.svelte';
@@ -380,9 +433,9 @@ const someFunction = (valuePropertyA, valuePropertyB) => {
 };
 
 export const ExampleStory: Story = {
-  render: ({ propertyA, propertyB }) => {
+  render: (args) => {
     //👇 Assigns the function result to a variable
-    const someFunctionResult = someFunction(propertyA, propertyB);
+    const someFunctionResult = someFunction(args.propertyA, args.propertyB);
     return {
       Component: YourComponent,
       props: {
@@ -398,7 +451,46 @@ export const ExampleStory: Story = {
 };
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts"
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  const { Story } = defineMeta({
+      component: YourComponent,
+      //👇 Creates specific argTypes
+      argTypes: {
+        propertyA: {
+          options: ['Item One', 'Item Two', 'Item Three'],
+          control: { type: 'select' }, // Automatically inferred when 'options' is defined
+        },
+        propertyB: {
+          options: ['Another Item One', 'Another Item Two', 'Another Item Three'],
+        },
+      },
+  });
+
+  const someFunction = (valuePropertyA, valuePropertyB) => {
+    // Do some logic here
+  };
+</script>
+
+<Story
+  name="ExampleStory"
+  args={{
+    propertyA: 'Item One',
+    propertyB: 'Another Item One',
+  }}
+>
+  {#snippet children(args)}
+    <YourComponent
+      {...args}
+      someProperty={someFunction(args.propertyA, args.propertyB)}
+    />
+  {/snippet}
+</Story>
+```
+
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import YourComponent from './YourComponent.svelte';
@@ -425,9 +517,9 @@ const someFunction = (valuePropertyA, valuePropertyB) => {
 };
 
 export const ExampleStory: Story = {
-  render: ({ propertyA, propertyB }) => {
+  render: (args) => {
     //👇 Assigns the function result to a variable
-    const someFunctionResult = someFunction(propertyA, propertyB);
+    const someFunctionResult = someFunction(args.propertyA, args.propertyB);
     return {
       Component: YourComponent,
       props: {
@@ -677,4 +769,3 @@ export const ExampleStory: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/component-story-custom-args-icons.md b/docs/_snippets/component-story-custom-args-icons.md
index ff60cab028f8..fdae31c4b277 100644
--- a/docs/_snippets/component-story-custom-args-icons.md
+++ b/docs/_snippets/component-story-custom-args-icons.md
@@ -34,4 +34,3 @@ const Template: Story = (args) => {
   };
 };
 ```
-
diff --git a/docs/_snippets/component-story-custom-args-mapping.md b/docs/_snippets/component-story-custom-args-mapping.md
index 606e2e82f51d..f6df7d66211b 100644
--- a/docs/_snippets/component-story-custom-args-mapping.md
+++ b/docs/_snippets/component-story-custom-args-mapping.md
@@ -30,6 +30,66 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
+
+  const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      arrow: {
+        options: Object.keys(arrows), // An array of serializable values
+        mapping: arrows, // Maps serializable option values to complex arg values
+        control: {
+          type: 'select', // Type 'select' is automatically inferred when 'options' is defined
+          labels: {
+            // 'labels' maps option values to string labels
+            ArrowUp: 'Up',
+            ArrowDown: 'Down',
+            ArrowLeft: 'Left',
+            ArrowRight: 'Right',
+          },
+        },
+      },
+    },
+  });
+</script>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
+
+const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
+
+export default {
+  component: Button,
+  argTypes: {
+    arrow: {
+      options: Object.keys(arrows), // An array of serializable values
+      mapping: arrows, // Maps serializable option values to complex arg values
+      control: {
+        type: 'select', // Type 'select' is automatically inferred when 'options' is defined
+        labels: {
+          // 'labels' maps option values to string labels
+          ArrowUp: 'Up',
+          ArrowDown: 'Down',
+          ArrowLeft: 'Left',
+          ArrowRight: 'Right',
+        },
+      },
+    },
+  },
+};
+```
+
 ```js filename="Button.stories.js|jsx" renderer="common" language="js"
 import { Button } from './Button';
 
@@ -58,6 +118,70 @@ export default {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
+
+  const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      arrow: {
+        options: Object.keys(arrows), // An array of serializable values
+        mapping: arrows, // Maps serializable option values to complex arg values
+        control: {
+          type: 'select', // Type 'select' is automatically inferred when 'options' is defined
+          labels: {
+            // 'labels' maps option values to string labels
+            ArrowUp: 'Up',
+            ArrowDown: 'Down',
+            ArrowLeft: 'Left',
+            ArrowRight: 'Right',
+          },
+        },
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
+
+const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
+
+const meta = {
+  component: Button,
+  argTypes: {
+    arrow: {
+      options: Object.keys(arrows), // An array of serializable values
+      mapping: arrows, // Maps serializable option values to complex arg values
+      control: {
+        type: 'select', // Type 'select' is automatically inferred when 'options' is defined
+        labels: {
+          // 'labels' maps option values to string labels
+          ArrowUp: 'Up',
+          ArrowDown: 'Down',
+          ArrowLeft: 'Left',
+          ArrowRight: 'Right',
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -91,6 +215,70 @@ const meta = {
 export default meta;
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
+
+  const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      arrow: {
+        options: Object.keys(arrows), // An array of serializable values
+        mapping: arrows, // Maps serializable option values to complex arg values
+        control: {
+          type: 'select', // Type 'select' is automatically inferred when 'options' is defined
+          labels: {
+            // 'labels' maps option values to string labels
+            ArrowUp: 'Up',
+            ArrowDown: 'Down',
+            ArrowLeft: 'Left',
+            ArrowRight: 'Right',
+          },
+        },
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from './icons';
+
+const arrows = { ArrowUp, ArrowDown, ArrowLeft, ArrowRight };
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  argTypes: {
+    arrow: {
+      options: Object.keys(arrows), // An array of serializable values
+      mapping: arrows, // Maps serializable option values to complex arg values
+      control: {
+        type: 'select', // Type 'select' is automatically inferred when 'options' is defined
+        labels: {
+          // 'labels' maps option values to string labels
+          ArrowUp: 'Up',
+          ArrowDown: 'Down',
+          ArrowLeft: 'Left',
+          ArrowRight: 'Right',
+        },
+      },
+    },
+  },
+};
+
+export default meta;
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -179,4 +367,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/component-story-disable-controls-alt.md b/docs/_snippets/component-story-disable-controls-alt.md
index 2bec9b308315..b4b593505bcb 100644
--- a/docs/_snippets/component-story-disable-controls-alt.md
+++ b/docs/_snippets/component-story-disable-controls-alt.md
@@ -16,6 +16,38 @@ const meta: Meta<YourComponent> = {
 export default meta;
 ```
 
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: YourComponent,
+    argTypes: {
+      // foo is the property we want to remove from the UI
+      foo: {
+        control: false,
+      },
+    },
+  });
+</script>
+```
+
+```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import YourComponent from './YourComponent.svelte';
+
+export default {
+  component: YourComponent,
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      control: false,
+    },
+  },
+};
+```
+
 ```js filename="YourComponent.stories.js|jsx" renderer="common" language="js"
 import { YourComponent } from './YourComponent';
 
@@ -30,6 +62,42 @@ export default {
 };
 ```
 
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: YourComponent,
+    argTypes: {
+      // foo is the property we want to remove from the UI
+      foo: {
+        control: false,
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import YourComponent from './YourComponent.svelte';
+
+const meta = {
+  component: YourComponent,
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      control: false,
+    },
+  },
+} satisfies Meta<typeof YourComponent>;
+
+export default meta;
+```
+
 ```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -49,6 +117,42 @@ const meta = {
 export default meta;
 ```
 
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: YourComponent,
+    argTypes: {
+      // foo is the property we want to remove from the UI
+      foo: {
+        control: false,
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import YourComponent from './YourComponent.svelte';
+
+const meta: Meta<typeof YourComponent> = {
+  component: YourComponent,
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      control: false,
+    },
+  },
+};
+
+export default meta;
+```
+
 ```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -95,4 +199,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/component-story-disable-controls-regex.md b/docs/_snippets/component-story-disable-controls-regex.md
index 13c6d4e56d7b..69309e6b7720 100644
--- a/docs/_snippets/component-story-disable-controls-regex.md
+++ b/docs/_snippets/component-story-disable-controls-regex.md
@@ -35,6 +35,78 @@ export const RegexExclude: Story = {
 };
 ```
 
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: YourComponent,
+  });
+</script>
+
+<Story
+  name="ArrayInclude"
+  parameters={{
+    controls: { include: ['foo', 'bar'] },
+  }}
+/>
+
+<Story
+  name="RegexInclude"
+  parameters={{
+    controls: { include: /^hello*/ },
+  }}
+/>
+
+<Story
+  name="ArrayExclude"
+  parameters={{
+    controls: { exclude: ['foo', 'bar'] },
+  }}
+/>
+
+<Story
+  name="RegexExclude"
+  parameters={{
+    controls: { exclude: /^hello*/ },
+  }}
+/>
+```
+
+```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import YourComponent from './YourComponent.svelte';
+
+export default {
+  component: YourComponent,
+};
+
+export const ArrayInclude = {
+  parameters: {
+    controls: { include: ['foo', 'bar'] },
+  },
+};
+
+export const RegexInclude = {
+  parameters: {
+    controls: { include: /^hello*/ },
+  },
+};
+
+export const ArrayExclude = {
+  parameters: {
+    controls: { exclude: ['foo', 'bar'] },
+  },
+};
+
+export const RegexExclude = {
+  parameters: {
+    controls: { exclude: /^hello*/ },
+  },
+};
+```
+
 ```js filename="YourComponent.stories.js|jsx" renderer="common" language="js"
 import { YourComponent } from './YourComponent';
 
@@ -67,6 +139,83 @@ export const RegexExclude = {
 };
 ```
 
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: YourComponent,
+  });
+</script>
+
+<Story
+  name="ArrayInclude"
+  parameters={{
+    controls: { include: ['foo', 'bar'] },
+  }}
+/>
+
+<Story
+  name="RegexInclude"
+  parameters={{
+    controls: { include: /^hello*/ },
+  }}
+/>
+
+<Story
+  name="ArrayExclude"
+  parameters={{
+    controls: { exclude: ['foo', 'bar'] },
+  }}
+/>
+
+<Story
+  name="RegexExclude"
+  parameters={{
+    controls: { exclude: /^hello*/ },
+  }}
+/>
+```
+
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import YourComponent from './YourComponent.svelte';
+
+const meta = {
+  component: YourComponent,
+} satisfies Meta<typeof YourComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ArrayInclude: Story = {
+  parameters: {
+    controls: { include: ['foo', 'bar'] },
+  },
+};
+
+export const RegexInclude: Story = {
+  parameters: {
+    controls: { include: /^hello*/ },
+  },
+};
+
+export const ArrayExclude: Story = {
+  parameters: {
+    controls: { exclude: ['foo', 'bar'] },
+  },
+};
+
+export const RegexExclude: Story = {
+  parameters: {
+    controls: { exclude: /^hello*/ },
+  },
+};
+```
+
 ```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -105,6 +254,83 @@ export const RegexExclude: Story = {
 };
 ```
 
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: YourComponent,
+  });
+</script>
+
+<Story
+  name="ArrayInclude"
+  parameters={{
+    controls: { include: ['foo', 'bar'] },
+  }}
+/>
+
+<Story
+  name="RegexInclude"
+  parameters={{
+    controls: { include: /^hello*/ },
+  }}
+/>
+
+<Story
+  name="ArrayExclude"
+  parameters={{
+    controls: { exclude: ['foo', 'bar'] },
+  }}
+/>
+
+<Story
+  name="RegexExclude"
+  parameters={{
+    controls: { exclude: /^hello*/ },
+  }}
+/>
+```
+
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import YourComponent from './YourComponent.svelte';
+
+const meta: Meta<typeof YourComponent> = {
+  component: YourComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof YourComponent>;
+
+export const ArrayInclude: Story = {
+  parameters: {
+    controls: { include: ['foo', 'bar'] },
+  },
+};
+
+export const RegexInclude: Story = {
+  parameters: {
+    controls: { include: /^hello*/ },
+  },
+};
+
+export const ArrayExclude: Story = {
+  parameters: {
+    controls: { exclude: ['foo', 'bar'] },
+  },
+};
+
+export const RegexExclude: Story = {
+  parameters: {
+    controls: { exclude: /^hello*/ },
+  },
+};
+```
+
 ```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -207,4 +433,3 @@ export const RegexExclude: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/component-story-disable-controls.md b/docs/_snippets/component-story-disable-controls.md
index 60af7727dd6d..ba68941855f4 100644
--- a/docs/_snippets/component-story-disable-controls.md
+++ b/docs/_snippets/component-story-disable-controls.md
@@ -18,6 +18,42 @@ const meta: Meta<YourComponent> = {
 export default meta;
 ```
 
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: YourComponent,
+    argTypes: {
+      // foo is the property we want to remove from the UI
+      foo: {
+        table: {
+          disable: true,
+        },
+      },
+    },
+  });
+</script>
+```
+
+```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import YourComponent from './YourComponent.svelte';
+
+export default {
+  component: YourComponent,
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+```
+
 ```js filename="YourComponent.stories.js|jsx" renderer="common" language="js"
 import { YourComponent } from './YourComponent';
 
@@ -34,6 +70,46 @@ export default {
 };
 ```
 
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: YourComponent,
+    argTypes: {
+      // foo is the property we want to remove from the UI
+      foo: {
+        table: {
+          disable: true,
+        },
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import YourComponent from './YourComponent.svelte';
+
+const meta = {
+  component: YourComponent,
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+} satisfies Meta<typeof YourComponent>;
+
+export default meta;
+```
+
 ```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -55,6 +131,46 @@ const meta = {
 export default meta;
 ```
 
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: YourComponent,
+    argTypes: {
+      // foo is the property we want to remove from the UI
+      foo: {
+        table: {
+          disable: true,
+        },
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import YourComponent from './YourComponent.svelte';
+
+const meta: Meta<typeof YourComponent> = {
+  component: YourComponent,
+  argTypes: {
+    // foo is the property we want to remove from the UI
+    foo: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export default meta;
+```
+
 ```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -107,4 +223,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/component-story-figma-integration.md b/docs/_snippets/component-story-figma-integration.md
index afd0a641a762..d417ce880537 100644
--- a/docs/_snippets/component-story-figma-integration.md
+++ b/docs/_snippets/component-story-figma-integration.md
@@ -308,4 +308,3 @@ export const Example: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/component-story-highlight-addon.md b/docs/_snippets/component-story-highlight-addon.md
index 942ac7c524a7..03d1a8e0ba52 100644
--- a/docs/_snippets/component-story-highlight-addon.md
+++ b/docs/_snippets/component-story-highlight-addon.md
@@ -231,4 +231,3 @@ export const Highlighted: Story = {
   ],
 };
 ```
-
diff --git a/docs/_snippets/component-story-sort-controls.md b/docs/_snippets/component-story-sort-controls.md
index 0af15d4f2125..5c152e4312a7 100644
--- a/docs/_snippets/component-story-sort-controls.md
+++ b/docs/_snippets/component-story-sort-controls.md
@@ -11,8 +11,30 @@ const meta: Meta<YourComponent> = {
 export default meta;
 ```
 
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: YourComponent,
+    parameters: { controls: { sort: 'requiredFirst' } },
+  });
+</script>
+```
+
+```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import YourComponent from './YourComponent.svelte';
+
+export default {
+  component: YourComponent,
+  parameters: { controls: { sort: 'requiredFirst' } },
+};
+```
+
 ```js filename="YourComponent.stories.js|jsx" renderer="common" language="js"
-import { YourComponent } from './your-component';
+import { YourComponent } from './YourComponent';
 
 export default {
   component: YourComponent,
@@ -20,6 +42,32 @@ export default {
 };
 ```
 
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: YourComponent,
+    parameters: { controls: { sort: 'requiredFirst' } },
+  });
+</script>
+```
+
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import YourComponent from './YourComponent.svelte';
+
+const meta = {
+  component: YourComponent,
+  parameters: { controls: { sort: 'requiredFirst' } },
+} satisfies Meta<typeof YourComponent>;
+
+export default meta;
+```
+
 ```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -34,6 +82,32 @@ const meta = {
 export default meta;
 ```
 
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: YourComponent,
+    parameters: { controls: { sort: 'requiredFirst' } },
+  });
+</script>
+```
+
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import YourComponent from './YourComponent.svelte';
+
+const meta: Meta<typeof YourComponent> = {
+  component: YourComponent,
+  parameters: { controls: { sort: 'requiredFirst' } },
+};
+
+export default meta;
+```
+
 ```ts filename="YourComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -65,4 +139,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/component-story-static-asset-cdn.md b/docs/_snippets/component-story-static-asset-cdn.md
index 11802b03e0e2..b75ef7a9187e 100644
--- a/docs/_snippets/component-story-static-asset-cdn.md
+++ b/docs/_snippets/component-story-static-asset-cdn.md
@@ -34,7 +34,7 @@ export const WithAnImage = {
 };
 ```
 
-```ts filename=" MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9"
+```ts filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
@@ -53,7 +53,7 @@ export const WithAnImage: Story = {
 };
 ```
 
-```tsx filename=" MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
@@ -86,7 +86,7 @@ export const WithAnImage = {
 };
 ```
 
-```tsx filename=" MyComponent.stories.ts|tsx" renderer="solid" language="ts-4-9"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="solid" language="ts-4-9"
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { MyComponent } from './MyComponent';
@@ -105,7 +105,7 @@ export const WithAnImage: Story = {
 };
 ```
 
-```tsx filename=" MyComponent.stories.ts|tsx" renderer="solid" language="ts"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="solid" language="ts"
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { MyComponent } from './MyComponent';
@@ -124,7 +124,26 @@ export const WithAnImage: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+	const { Story } = defineMeta({
+		component: MyComponent,
+	});
+</script>
+
+<Story name="WithAnImage">
+  <MyComponent
+    src="https://storybook.js.org/images/placeholders/350x150.png"
+    alt="My CDN placeholder"
+  />
+</Story>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import MyComponent from './MyComponent.svelte';
 
 export default {
@@ -142,28 +161,26 @@ export const WithAnImage = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* MyComponent.stories.svelte */}
-
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
-</script>
 
-<meta title="img" component="{MyComponent}" />
+	const { Story } = defineMeta({
+		component: MyComponent,
+	});
+</script>
 
-<template>
+<Story name="WithAnImage">
   <MyComponent
     src="https://storybook.js.org/images/placeholders/350x150.png"
     alt="My CDN placeholder"
   />
-</template>
-
-<Story name="WithAnImage" />
+</Story>
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import MyComponent from './MyComponent.svelte';
@@ -186,7 +203,26 @@ export const WithAnImage: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+	const { Story } = defineMeta({
+		component: MyComponent,
+	});
+</script>
+
+<Story name="WithAnImage">
+  <MyComponent
+    src="https://storybook.js.org/images/placeholders/350x150.png"
+    alt="My CDN placeholder"
+  />
+</Story>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import MyComponent from './MyComponent.svelte';
@@ -300,4 +336,3 @@ export const WithAnImage: Story = {
     />`,
 };
 ```
-
diff --git a/docs/_snippets/component-story-static-asset-with-import.md b/docs/_snippets/component-story-static-asset-with-import.md
index 832e85099131..3301d3b03561 100644
--- a/docs/_snippets/component-story-static-asset-with-import.md
+++ b/docs/_snippets/component-story-static-asset-with-import.md
@@ -47,7 +47,7 @@ export const WithAnImage = {
 };
 ```
 
-```tsx filename=" MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import imageFile from './static/image.png';
@@ -71,7 +71,7 @@ export const WithAnImage: Story = {
 };
 ```
 
-```tsx filename=" MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import imageFile from './static/image.png';
@@ -114,7 +114,7 @@ export const WithAnImage = {
 };
 ```
 
-```tsx filename=" MyComponent.stories.ts|tsx" renderer="solid" language="ts-4-9"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="solid" language="ts-4-9"
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import imageFile from './static/image.png';
@@ -138,7 +138,7 @@ export const WithAnImage: Story = {
 };
 ```
 
-```tsx filename=" MyComponent.stories.ts|tsx" renderer="solid" language="ts"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="solid" language="ts"
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import imageFile from './static/image.png';
@@ -162,9 +162,30 @@ export const WithAnImage: Story = {
 };
 ```
 
-```js renderer="svelte" language="js"
-//MyComponent.stories.js
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
+  import MyComponent from './MyComponent.svelte';
+
+  import imageFile from './static/image.png';
+
+  let image = {
+    src: imageFile,
+    alt: 'my image',
+  };
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story name="WithAnImage">
+  <MyComponent {image} />
+</Story>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import MyComponent from './MyComponent.svelte';
 
 import imageFile from './static/image.png';
@@ -186,11 +207,9 @@ export const WithAnImage = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* MyComponent.stories.svelte */}
-
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
 
@@ -200,18 +219,18 @@ export const WithAnImage = {
     src: imageFile,
     alt: 'my image',
   };
-</script>
 
-<meta title="img" component="{MyComponent}" />
-
-<template>
-  <MyComponent {image} />
-</template>
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
 
-<Story name="WithAnImage" />
+<Story name="WithAnImage">
+	<MyComponent {image} />
+</Story>
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import MyComponent from './MyComponent.svelte';
@@ -238,7 +257,30 @@ export const WithAnImage: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  import imageFile from './static/image.png';
+
+  let image = {
+    src: imageFile,
+    alt: 'my image',
+  };
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story name="WithAnImage">
+  <MyComponent {image} />
+</Story>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import MyComponent from './MyComponent.svelte';
@@ -265,7 +307,7 @@ export const WithAnImage: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="vue" language="js" tabTitle="3"
+```js filename="MyComponent.stories.js" renderer="vue" language="js"
 import MyComponent from './MyComponent.vue';
 
 import imageFile from './static/image.png';
@@ -290,7 +332,7 @@ export const WithAnImage = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="vue" language="ts-4-9" tabTitle="3"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import MyComponent from './MyComponent.vue';
@@ -320,7 +362,7 @@ export const WithAnImage: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="MyComponent.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import MyComponent from './MyComponent.vue';
@@ -392,4 +434,3 @@ export const WithAnImage: Story = {
   render: () => html`<img src="${image.src}" alt="${image.alt}" />`,
 };
 ```
-
diff --git a/docs/_snippets/component-story-static-asset-without-import.md b/docs/_snippets/component-story-static-asset-without-import.md
index c0ab68f70118..99b0e2d32734 100644
--- a/docs/_snippets/component-story-static-asset-without-import.md
+++ b/docs/_snippets/component-story-static-asset-without-import.md
@@ -34,7 +34,7 @@ export const WithAnImage = {
 };
 ```
 
-```tsx filename=" MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
@@ -52,7 +52,7 @@ export const WithAnImage: Story = {
 };
 ```
 
-```tsx filename=" MyComponent.stories.ts|tsx" renderer="react" language="ts"
+```tsx filename="MyComponent.stories.ts|tsx" renderer="react" language="ts"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { MyComponent } from './MyComponent';
@@ -119,7 +119,23 @@ export const WithAnImage: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+	const { Story } = defineMeta({
+		component: MyComponent,
+	});
+</script>
+
+<Story name="WithAnImage">
+  <MyComponent src="/image.png" alt="my image" />
+</Story>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import MyComponent from './MyComponent.svelte';
 
 export default {
@@ -138,25 +154,23 @@ export const WithAnImage = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* MyComponent.stories.svelte */}
-
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import MyComponent from './MyComponent.svelte';
-</script>
 
-<meta title="img" component="{MyComponent}" />
+	const { Story } = defineMeta({
+		component: MyComponent,
+	});
+</script>
 
-<template>
+<Story name="WithAnImage">
   <MyComponent src="/image.png" alt="my image" />
-</template>
-
-<Story name="WithAnImage" />
+</Story>
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import MyComponent from './MyComponent.svelte';
@@ -180,7 +194,23 @@ export const WithAnImage: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+	const { Story } = defineMeta({
+		component: MyComponent,
+	});
+</script>
+
+<Story name="WithAnImage">
+  <MyComponent src="/image.png" alt="my image" />
+</Story>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import MyComponent from './MyComponent.svelte';
@@ -287,4 +317,3 @@ export const WithAnImage: Story = {
   render: () => html`<img src="/image.png" alt="image" />`,
 };
 ```
-
diff --git a/docs/_snippets/component-story-with-accessibility.md b/docs/_snippets/component-story-with-accessibility.md
index be41f9d28d46..173cbbf06018 100644
--- a/docs/_snippets/component-story-with-accessibility.md
+++ b/docs/_snippets/component-story-with-accessibility.md
@@ -211,7 +211,28 @@ export const Inaccessible: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      backgroundColor: { control: 'color' },
+    },
+  });
+</script>
+
+<!-- This is an accessible story -->
+<Story name="Accessible" args={{ primary: false, label: 'Button' }} />
+
+<!-- This is not -->
+<Story name="Inaccessible" args={{ primary: false, label: 'Button', backgroundColor: 'red' }} />
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import Button from './Button.svelte';
 
 export default {
@@ -223,10 +244,6 @@ export default {
 
 // This is an accessible story
 export const Accessible = {
-  render: (args) => ({
-    Component: Button,
-    props: args,
-  }),
   args: {
     primary: false,
     label: 'Button',
@@ -235,10 +252,6 @@ export const Accessible = {
 
 // This is not
 export const Inaccessible = {
-  render: (args) => ({
-    Component: Button,
-    props: args,
-  }),
   args: {
     ...Accessible.args,
     backgroundColor: 'red',
@@ -246,7 +259,28 @@ export const Inaccessible = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      backgroundColor: { control: 'color' },
+    },
+  });
+</script>
+
+<!-- This is an accessible story -->
+<Story name="Accessible" args={{ primary: false, label: 'Button' }} />
+
+<!-- This is not -->
+<Story name="Inaccessible" args={{ primary: false, label: 'Button', backgroundColor: 'red' }} />
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -278,7 +312,28 @@ export const Inaccessible: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    argTypes: {
+      backgroundColor: { control: 'color' },
+    },
+  });
+</script>
+
+<!-- This is an accessible story -->
+<Story name="Accessible" args={{ primary: false, label: 'Button' }} />
+
+<!-- This is not -->
+<Story name="Inaccessible" args={{ primary: false, label: 'Button', backgroundColor: 'red' }} />
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -310,7 +365,7 @@ export const Inaccessible: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="3"
+```js filename="Button.stories.js" renderer="vue" language="js"
 import Button from './Button.vue';
 
 export default {
@@ -337,7 +392,7 @@ export const Inaccessible = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts-4-9" tabTitle="3"
+```ts filename="Button.stories.ts" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
@@ -368,7 +423,7 @@ export const Inaccessible: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="Button.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
@@ -467,4 +522,3 @@ export const Inaccessible: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/component-story-with-custom-render-function.md b/docs/_snippets/component-story-with-custom-render-function.md
index 0fb274bc56d9..f09079e91e86 100644
--- a/docs/_snippets/component-story-with-custom-render-function.md
+++ b/docs/_snippets/component-story-with-custom-render-function.md
@@ -371,4 +371,3 @@ export const Example: Story = {
   `,
 };
 ```
-
diff --git a/docs/_snippets/component-styled-variables-object-notation.md b/docs/_snippets/component-styled-variables-object-notation.md
index 0253c4dbb2e4..bfff3a901641 100644
--- a/docs/_snippets/component-styled-variables-object-notation.md
+++ b/docs/_snippets/component-styled-variables-object-notation.md
@@ -4,4 +4,3 @@ const Component = styled.div(({ theme }) => ({
   width: 0,
 }));
 ```
-
diff --git a/docs/_snippets/component-styled-variables-template-literals.md b/docs/_snippets/component-styled-variables-template-literals.md
index 504fcf06c8f9..501e5211f2c4 100644
--- a/docs/_snippets/component-styled-variables-template-literals.md
+++ b/docs/_snippets/component-styled-variables-template-literals.md
@@ -4,4 +4,3 @@ const Component = styled.div`
   width: 0;
 `;
 ```
-
diff --git a/docs/_snippets/component-test-with-testing-library.md b/docs/_snippets/component-test-with-testing-library.md
index 0ac1e206d6b1..7688b694f45d 100644
--- a/docs/_snippets/component-test-with-testing-library.md
+++ b/docs/_snippets/component-test-with-testing-library.md
@@ -104,7 +104,7 @@ it('Checks if the form is valid', async () => {
 });
 ```
 
-```js filename="tests/Form.test.js" renderer="vue" language="js" tabTitle="3"
+```js filename="tests/Form.test.js" renderer="vue" language="js"
 import { fireEvent, render, screen } from '@testing-library/vue';
 
 import { composeStories } from '@storybook/vue3';
@@ -128,7 +128,7 @@ test('Checks if the form is valid', async () => {
 });
 ```
 
-```ts filename="tests/Form.test.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="tests/Form.test.ts" renderer="vue" language="ts"
 import { fireEvent, render, screen } from '@testing-library/vue';
 
 import { composeStories } from '@storybook/vue3';
diff --git a/docs/_snippets/configure-mock-provider-with-story-parameter.md b/docs/_snippets/configure-mock-provider-with-story-parameter.md
index f58b7b441096..a9b4b310b034 100644
--- a/docs/_snippets/configure-mock-provider-with-story-parameter.md
+++ b/docs/_snippets/configure-mock-provider-with-story-parameter.md
@@ -61,4 +61,3 @@ export const Dark: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/csf-2-example-primary-dark-story.md b/docs/_snippets/csf-2-example-primary-dark-story.md
index 5c0f1397e870..ea013974f52c 100644
--- a/docs/_snippets/csf-2-example-primary-dark-story.md
+++ b/docs/_snippets/csf-2-example-primary-dark-story.md
@@ -1,6 +1,5 @@
-```js filename="CSF 2" renderer="common" language="js"
+```js filename="CSF 2 - Button.stories.js|jsx|ts|tsx" renderer="common" language="js"
 export const PrimaryOnDark = Primary.bind({});
 PrimaryOnDark.args = Primary.args;
 PrimaryOnDark.parameters = { background: { default: 'dark' } };
 ```
-
diff --git a/docs/_snippets/csf-2-example-starter.md b/docs/_snippets/csf-2-example-starter.md
index e56d985beede..ba9340e6cd89 100644
--- a/docs/_snippets/csf-2-example-starter.md
+++ b/docs/_snippets/csf-2-example-starter.md
@@ -1,4 +1,4 @@
-```ts filename="CSF 2" renderer="angular" language="ts"
+```ts filename="CSF 2 - Button.stories.ts" renderer="angular" language="ts"
 import { Meta, Story } from '@storybook/angular';
 
 import { Button } from './button.component';
@@ -14,7 +14,7 @@ export const Primary: Story = (args) => ({
 Primary.args = { primary: true };
 ```
 
-```js filename="CSF 2" renderer="react" language="js"
+```js filename="CSF 2 - Button.stories.js|jsx" renderer="react" language="js"
 import { Button } from './Button';
 
 export default {
@@ -26,7 +26,7 @@ export const Primary = (args) => <Button {...args} />;
 Primary.args = { primary: true };
 ```
 
-```tsx filename="CSF 2" renderer="react" language="ts"
+```tsx filename="CSF 2 - Button.stories.ts|tsx" renderer="react" language="ts"
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
 import { Button } from './Button';
@@ -40,7 +40,7 @@ export const Primary: ComponentStory<typeof Button> = (args) => <Button {...args
 Primary.args = { primary: true };
 ```
 
-```js filename="CSF 2" renderer="solid" language="js"
+```js filename="CSF 2 - Button.stories.js|jsx" renderer="solid" language="js"
 import { Button } from './Button';
 
 export default {
@@ -52,7 +52,7 @@ export const Primary = (args) => <Button {...args} />;
 Primary.args = { primary: true };
 ```
 
-```tsx filename="CSF 2" renderer="solid" language="ts"
+```tsx filename="CSF 2 - Button.stories.ts|tsx" renderer="solid" language="ts"
 import { ComponentStory, ComponentMeta } from 'storybook-solidjs';
 
 import { Button } from './Button';
@@ -66,7 +66,7 @@ export const Primary: ComponentStory<typeof Button> = (args) => <Button {...args
 Primary.args = { primary: true };
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js"
+```js filename="CSF 2 - Button.stories.js" renderer="svelte" language="js"
 import Button from './Button.svelte';
 
 export default {
@@ -81,7 +81,7 @@ export const Primary = (args) => ({
 Primary.args = { primary: true };
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts"
+```ts filename="CSF 2 - Button.stories.ts" renderer="svelte" language="ts"
 import type { Meta, StoryFn } from '@storybook/svelte';
 
 import Button from './Button.svelte';
@@ -98,7 +98,7 @@ export const Primary: StoryFn<typeof Button> = (args) => ({
 Primary.args = { primary: true };
 ```
 
-```js filename="CSF 2" renderer="vue" language="js" tabTitle="3"
+```js filename="CSF 2 - Button.stories.js" renderer="vue" language="js"
 import Button from './Button.vue';
 
 export default {
@@ -116,7 +116,7 @@ export const Primary = (args) => ({
 Primary.args = { primary: true };
 ```
 
-```ts filename="CSF 2" renderer="vue" language="ts" tabTitle="3"
+```ts filename="CSF 2 - Button.stories.ts" renderer="vue" language="ts"
 import { Meta, StoryFn } from '@storybook/vue3';
 
 import Button from './Button.vue';
@@ -136,7 +136,7 @@ export const Primary: StoryFn<typeof Button> = (args) => ({
 Primary.args = { primary: true };
 ```
 
-```js filename="CSF 2" renderer="web-components" language="js"
+```js filename="CSF 2 - Button.stories.js" renderer="web-components" language="js"
 import { html } from 'lit';
 
 export default {
@@ -150,7 +150,7 @@ Primary.args = {
 };
 ```
 
-```ts filename="CSF 2" renderer="web-components" language="ts"
+```ts filename="CSF 2 - Button.stories.ts" renderer="web-components" language="ts"
 import type { Meta, Story } from '@storybook/web-components';
 
 import { html } from 'lit';
@@ -166,4 +166,3 @@ Primary.args = {
   primary: true,
 };
 ```
-
diff --git a/docs/_snippets/csf-2-example-story.md b/docs/_snippets/csf-2-example-story.md
index fe9a90055ecd..5126e303f653 100644
--- a/docs/_snippets/csf-2-example-story.md
+++ b/docs/_snippets/csf-2-example-story.md
@@ -1,31 +1,31 @@
-```ts filename="CSF 2" renderer="angular" language="ts"
+```ts filename="CSF 2 - Button.stories.ts" renderer="angular" language="ts"
 // Other imports and story implementation
 export const Default: Story = (args) => ({
   props: args,
 });
 ```
 
-```js filename="CSF 2" renderer="react" language="js"
+```js filename="CSF 2 - Button.stories.js|jsx" renderer="react" language="js"
 // Other imports and story implementation
 export const Default = (args) => <Button {...args} />;
 ```
 
-```ts filename="CSF 2" renderer="react" language="ts"
+```ts filename="CSF 2 - Button.stories.ts|tsx" renderer="react" language="ts"
 // Other imports and story implementation
 export const Default: ComponentStory<typeof Button> = (args) => <Button {...args} />;
 ```
 
-```js filename="CSF 2" renderer="solid" language="js"
+```js filename="CSF 2 - Button.stories.js|jsx" renderer="solid" language="js"
 // Other imports and story implementation
 export const Default = (args) => <Button {...args} />;
 ```
 
-```ts filename="CSF 2" renderer="solid" language="ts"
+```ts filename="CSF 2 - Button.stories.ts|tsx" renderer="solid" language="ts"
 // Other imports and story implementation
 export const Default: ComponentStory<typeof Button> = (args) => <Button {...args} />;
 ```
 
-```js filename="CSF 2" renderer="svelte" language="js"
+```js filename="CSF 2 - Button.stories.js" renderer="svelte" language="js"
 // Other imports and story implementation
 export const Default = (args) => ({
   Component: Button,
@@ -33,15 +33,15 @@ export const Default = (args) => ({
 });
 ```
 
-```ts filename="CSF 2" renderer="svelte" language="ts"
+```ts filename="CSF 2 - Button.stories.ts" renderer="svelte" language="ts"
 // Other imports and story implementation
-export const Primary: StoryFn<typeof Button> = (args) => ({
+export const Default: StoryFn<typeof Button> = (args) => ({
   Component: Button,
   props: args,
 });
 ```
 
-```js filename="CSF 2" renderer="vue" language="js" tabTitle="3"
+```js filename="CSF 2 - Button.stories.js" renderer="vue" language="js"
 // Other imports and story implementation
 export const Default = (args) => ({
   components: { Button },
@@ -52,7 +52,7 @@ export const Default = (args) => ({
 });
 ```
 
-```ts filename="CSF 2" renderer="vue" language="ts" tabTitle="3"
+```ts filename="CSF 2 - Button.stories.ts" renderer="vue" language="ts"
 // Other imports and story implementation
 export const Default: StoryFn<typeof Button> = (args) => ({
   components: { Button },
@@ -63,17 +63,16 @@ export const Default: StoryFn<typeof Button> = (args) => ({
 });
 ```
 
-```js filename="CSF 2" renderer="web-components" language="js"
+```js filename="CSF 2 - Button.stories.js" renderer="web-components" language="js"
 // Other imports and story implementation
 
-export const Default = ({ primary, backgroundColor, size, label }) =>
+export const Default = ({ primary, size, label }) =>
   html`<custom-button ?primary="${primary}" size="${size}" label="${label}"></custom-button>`;
 ```
 
-```ts filename="CSF 2" renderer="web-components" language="ts"
+```ts filename="CSF 2 - Button.stories.ts" renderer="web-components" language="ts"
 // Other imports and story implementation
 
 export const Default: Story = ({ primary, backgroundColor, size, label }) =>
   html`<custom-button ?primary="${primary}" size="${size}" label="${label}"></custom-button>`;
 ```
-
diff --git a/docs/_snippets/csf-2-example-title.md b/docs/_snippets/csf-2-example-title.md
index 9c55eac4fa2f..3574e82822a1 100644
--- a/docs/_snippets/csf-2-example-title.md
+++ b/docs/_snippets/csf-2-example-title.md
@@ -1,7 +1,6 @@
-```js filename="CSF 2" renderer="common" language="js"
+```js filename="CSF 2 - Button.stories.js|jsx|ts|tsx" renderer="common" language="js"
 export default {
   title: 'components/Button',
   component: Button,
 };
 ```
-
diff --git a/docs/_snippets/csf-3-example-auto-title.md b/docs/_snippets/csf-3-example-auto-title.md
index 18d9531d5281..d98dfea7bbd1 100644
--- a/docs/_snippets/csf-3-example-auto-title.md
+++ b/docs/_snippets/csf-3-example-auto-title.md
@@ -1,4 +1,3 @@
-```js filename="CSF 3" renderer="common" language="js"
+```js filename="CSF 3 - Button.stories.js|jsx|ts|tsx" renderer="common" language="js"
 export default { component: Button };
 ```
-
diff --git a/docs/_snippets/csf-3-example-default-render.md b/docs/_snippets/csf-3-example-default-render.md
index 3382a97654cd..87fb0d060c3d 100644
--- a/docs/_snippets/csf-3-example-default-render.md
+++ b/docs/_snippets/csf-3-example-default-render.md
@@ -1,4 +1,3 @@
-```js filename="CSF 3 - default render function" renderer="common" language="js"
+```js filename="CSF 3 - Button.stories.js|jsx|ts|tsx" renderer="common" language="js"
 export const Default = {};
 ```
-
diff --git a/docs/_snippets/csf-3-example-primary-dark-story.md b/docs/_snippets/csf-3-example-primary-dark-story.md
index a4dea05d3606..850fd8bd21de 100644
--- a/docs/_snippets/csf-3-example-primary-dark-story.md
+++ b/docs/_snippets/csf-3-example-primary-dark-story.md
@@ -1,14 +1,13 @@
-```js filename="CSF 3" renderer="common" language="js"
+```js filename="CSF 3 - Button.stories.js|jsx" renderer="common" language="js"
 export const PrimaryOnDark = {
   ...Primary,
   parameters: { background: { default: 'dark' } },
 };
 ```
 
-```ts filename="CSF 3" renderer="common" language="ts"
+```ts filename="CSF 3 - Button.stories.ts|tsx" renderer="common" language="ts"
 export const PrimaryOnDark: Story = {
   ...Primary,
   parameters: { background: { default: 'dark' } },
 };
 ```
-
diff --git a/docs/_snippets/csf-3-example-render.md b/docs/_snippets/csf-3-example-render.md
index 4f41716a33eb..0eba075462f4 100644
--- a/docs/_snippets/csf-3-example-render.md
+++ b/docs/_snippets/csf-3-example-render.md
@@ -1,4 +1,4 @@
-```ts filename="CSF 3 - explicit render function" renderer="angular" language="ts"
+```ts filename="CSF 3 - Button.stories.ts" renderer="angular" language="ts"
 // Other imports and story implementation
 export const Default: Story = {
   render: (args) => ({
@@ -7,35 +7,35 @@ export const Default: Story = {
 };
 ```
 
-```js filename="CSF 3 - explicit render function" renderer="react" language="js"
+```js filename="CSF 3 - Button.stories.js|jsx" renderer="react" language="js"
 // Other imports and story implementation
 export const Default = {
   render: (args) => <Button {...args} />,
 };
 ```
 
-```ts filename="CSF 3 - explicit render function" renderer="react" language="ts"
+```ts filename="CSF 3 - Button.stories.ts|tsx" renderer="react" language="ts"
 // Other imports and story implementation
 export const Default: Story = {
   render: (args) => <Button {...args} />,
 };
 ```
 
-```js filename="CSF 3 - explicit render function" renderer="solid" language="js"
+```js filename="CSF 3 - Button.stories.js|jsx" renderer="solid" language="js"
 // Other imports and story implementation
 export const Default = {
   render: (args) => <Button {...args} />,
 };
 ```
 
-```ts filename="CSF 3 - explicit render function" renderer="solid" language="ts"
+```ts filename="CSF 3 - Button.stories.ts|tsx" renderer="solid" language="ts"
 // Other imports and story implementation
 export const Default: Story = {
   render: (args) => <Button {...args} />,
 };
 ```
 
-```js filename="CSF 3 - explicit render function" renderer="svelte" language="js"
+```js filename="CSF 3 - Button.stories.js" renderer="svelte" language="js"
 // Other imports and story implementation
 export const Default = {
   render: (args) => ({
@@ -45,7 +45,7 @@ export const Default = {
 };
 ```
 
-```ts filename="CSF 3 - explicit render function" renderer="svelte" language="ts"
+```ts filename="CSF 3 - Button.stories.ts" renderer="svelte" language="ts"
 // Other imports and story implementation
 export const Default: Story = {
   render: (args) => ({
@@ -55,7 +55,7 @@ export const Default: Story = {
 };
 ```
 
-```js filename="CSF 3 - explicit render function" renderer="vue" language="js" tabTitle="3"
+```js filename="CSF 3 - Button.stories.js" renderer="vue" language="js"
 // Other imports and story implementation
 export const Default = {
   render: (args) => ({
@@ -68,7 +68,7 @@ export const Default = {
 };
 ```
 
-```ts filename="CSF 3 - explicit render function" renderer="vue" language="ts" tabTitle="3"
+```ts filename="CSF 3 - Button.stories.ts" renderer="vue" language="ts"
 // Other imports and story implementation
 export const Default: Story = {
   render: (args) => ({
@@ -81,19 +81,18 @@ export const Default: Story = {
 };
 ```
 
-```js filename="CSF 3" renderer="web-components" language="js"
+```js filename="CSF 3 - Button.stories.js" renderer="web-components" language="js"
 // Other imports and story implementation
 
 export const Default = {
-  render: (args) => html`<demo-button label="Hello" @click=${action('clicked')}></custom-button>`,
+  render: (args) => html`<demo-button label="Hello" @click=${action('clicked')}></demo-button>`,
 };
 ```
 
-```js filename="CSF 3" renderer="web-components" language="ts"
+```js filename="CSF 3 - Button.stories.ts" renderer="web-components" language="ts"
 // Other imports and story implementation
 
 export const Default: Story = {
   render: (args) => html`<custom-button label="Hello" @click=${action('clicked')}></custom-button>`,
 };
 ```
-
diff --git a/docs/_snippets/csf-3-example-starter.md b/docs/_snippets/csf-3-example-starter.md
index 262cf7e4f454..2740454daba0 100644
--- a/docs/_snippets/csf-3-example-starter.md
+++ b/docs/_snippets/csf-3-example-starter.md
@@ -1,17 +1,17 @@
-```ts filename="CSF 3" renderer="angular" language="ts"
+```ts filename="CSF 3 - Button.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Button } from './button.component';
 
 const meta: Meta<Button> = { component: Button };
-export default meta;
 
+export default meta;
 type Story = StoryObj<Button>;
 
 export const Primary: Story = { args: { primary: true } };
 ```
 
-```js filename="CSF 3" renderer="common" language="js"
+```js filename="CSF 3 - Button.stories.js|jsx" renderer="react" language="js"
 import { Button } from './Button';
 
 export default { component: Button };
@@ -19,7 +19,7 @@ export default { component: Button };
 export const Primary = { args: { primary: true } };
 ```
 
-```ts filename="CSF 3" renderer="react" language="ts-4-9"
+```ts filename="CSF 3 - Button.stories.ts|tsx" renderer="react" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
@@ -27,27 +27,27 @@ import { Button } from './Button';
 const meta = {
   component: Button,
 } satisfies Meta<typeof Button>;
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = { args: { primary: true } };
 ```
 
-```ts filename="CSF 3" renderer="react" language="ts"
+```ts filename="CSF 3 - Button.stories.ts|tsx" renderer="react" language="ts"
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
 
 const meta: Meta<typeof Button> = { component: Button };
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof Button>;
 
 export const Primary: Story = { args: { primary: true } };
 ```
 
-```tsx filename="CSF 3" renderer="solid" language="ts-4-9"
+```ts filename="CSF 3 - Button.stories.ts|tsx" renderer="solid" language="ts-4-9"
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { Button } from './Button';
@@ -55,40 +55,64 @@ import { Button } from './Button';
 const meta = {
   component: Button,
 } satisfies Meta<typeof Button>;
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = { args: { primary: true } };
 ```
 
-```ts filename="CSF 3" renderer="solid" language="ts"
+```js filename="CSF 3 - Button.stories.js|jsx" renderer="solid" language="js"
+import { Button } from './Button';
+
+export default { component: Button };
+
+export const Primary = { args: { primary: true } };
+```
+
+```ts filename="CSF 3 - Button.stories.ts|tsx" renderer="solid" language="ts"
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { Button } from './Button';
 
 const meta: Meta<typeof Button> = { component: Button };
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof Button>;
 
 export const Primary: Story = { args: { primary: true } };
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts"
+```js filename="CSF 3 - Button.stories.js" renderer="svelte" language="js"
+import Button from './Button.svelte';
+
+export default { component: Button };
+
+export const Primary = { args: { primary: true } };
+```
+
+```ts filename="CSF 3 - Button.stories.ts" renderer="svelte" language="ts"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Button from './Button.svelte';
 
 const meta: Meta<typeof Button> = { component: Button };
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = { args: { primary: true } };
 ```
 
-```ts filename="CSF 3" renderer="vue" language="ts-4-9"
+```js filename="CSF 3 - Button.stories.js" renderer="vue" language="js"
+import Button from './Button.vue';
+
+export default { component: Button };
+
+export const Primary = { args: { primary: true } };
+```
+
+```ts filename="CSF 3 - Button.stories.ts" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
@@ -101,7 +125,7 @@ type Story = StoryObj<typeof meta>;
 export const Primary: Story = { args: { primary: true } };
 ```
 
-```ts filename="CSF 3" renderer="vue" language="ts"
+```ts filename="CSF 3 - Button.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Button from './Button.vue';
@@ -114,7 +138,7 @@ type Story = StoryObj<typeof Button>;
 export const Primary: Story = { args: { primary: true } };
 ```
 
-```js filename="CSF 3" renderer="web-components" language="js"
+```js filename="CSF 3 - Button.stories.js" renderer="web-components" language="js"
 export default {
   title: 'components/Button',
   component: 'demo-button',
@@ -123,7 +147,7 @@ export default {
 export const Primary = { args: { primary: true } };
 ```
 
-```ts filename="CSF 3" renderer="web-components" language="ts"
+```ts filename="CSF 3 - Button.stories.ts" renderer="web-components" language="ts"
 import type { Meta, StoryObj } from '@storybook/web-components';
 
 const meta: Meta = {
@@ -136,4 +160,3 @@ type Story = StoryObj;
 
 export const Primary: Story = { args: { primary: true } };
 ```
-
diff --git a/docs/_snippets/csf-3-example-title.md b/docs/_snippets/csf-3-example-title.md
index 66a2d9d8f215..5d20e6dfd429 100644
--- a/docs/_snippets/csf-3-example-title.md
+++ b/docs/_snippets/csf-3-example-title.md
@@ -1,19 +1,40 @@
-```mdx renderer="common" language="mdx"
-{/* src/components/Button/Button.mdx */}
-
-import { Meta } from '@storybook/blocks';
+<!-- prettier-ignore -->
+```mdx filename="src/components/Button/Button.mdx" renderer="common" language="mdx"
+import { Meta, Story } from '@storybook/blocks';
 
 {/* 👇 Documentation-only page */}
-<Meta title="Documentation" />
 
+<Meta title="Documentation" />
 
 {/* 👇 Component documentation page */}
-import * as ExampleComponentStories from './ExampleComponent.stories';
+import * as ButtonStories from './Button.stories';
+
+<Meta of={ButtonStories} />
+
+<Story of={ButtonStories.Primary} />
+```
+
+```js filename="src/components/Button/Button.stories.js|jsx" renderer="common" language="js"
+import { Button } from './Button';
+
+export default {
+  // Sets the name for the stories container
+  title: 'components/Button',
+  // The component name will be used if `title` is not set
+  component: Button,
+};
 
-<Meta of={ExampleComponentStories} /> 
+// The story variable name will be used if `name` is not set
+const Primary = {
+  // Sets the name for that particular story
+  name: 'Primary',
+  args: {
+    label: 'Button',
+  },
+};
 ```
 
-```ts filename="src/components/Button/Button.stories.tsx" renderer="common" language="ts-4-9"
+```ts filename="src/components/Button/Button.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -39,7 +60,7 @@ const Primary: Story = {
 };
 ```
 
-```ts filename="src/components/Button/Button.stories.tsx" renderer="common" language="ts"
+```ts filename="src/components/Button/Button.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -64,4 +85,3 @@ const Primary: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/custom-docs-page.md b/docs/_snippets/custom-docs-page.md
index 80fb45bcb7e6..32e344dfc44f 100644
--- a/docs/_snippets/custom-docs-page.md
+++ b/docs/_snippets/custom-docs-page.md
@@ -14,9 +14,8 @@ export function CustomDocumentationComponent() {
 }
 ```
 
-```md renderer="common" language="mdx"
-{/* Custom-MDX-Documentation.mdx */}
-
+<!-- prettier-ignore -->
+```mdx filename="Custom-MDX-Documentation.mdx" renderer="common" language="mdx"
 # Replacing DocsPage with custom `MDX` content
 
 This file is a documentation-only `MDX`file to customize Storybook's [DocsPage](https://storybook.js.org/docs/writing-docs/docs-page#replacing-docspage).
@@ -76,6 +75,7 @@ If you didn't include the title in the story's default export, use this approach
 
 <Story id="your-directory-button--small" />
 ```
+
 ```ts filename="CustomDocumentationComponent.ts|tsx" renderer="common" language="ts" tabTitle="ts-component"
 export const CustomDocumentationComponent: React.FC = () => {
   return (
@@ -89,4 +89,3 @@ export const CustomDocumentationComponent: React.FC = () => {
   );
 };
 ```
-
diff --git a/docs/_snippets/decorator-parameterized-in-preview.md b/docs/_snippets/decorator-parameterized-in-preview.md
index f600132196bd..264c58243ed5 100644
--- a/docs/_snippets/decorator-parameterized-in-preview.md
+++ b/docs/_snippets/decorator-parameterized-in-preview.md
@@ -38,11 +38,15 @@ export default {
         case 'page':
           return (
             // Your page layout is probably a little more complex than this ;)
-            <div className="page-layout"><Story /></div>
+            <div className="page-layout">
+              <Story />
+            </div>
           );
         case 'page-mobile':
           return (
-            <div className="page-mobile-layout"><Story /></div>
+            <div className="page-mobile-layout">
+              <Story />
+            </div>
           );
         default:
           // In the default case, don't apply a layout
@@ -68,11 +72,15 @@ const preview: Preview = {
         case 'page':
           return (
             // Your page layout is probably a little more complex than this ;)
-            <div className="page-layout"><Story /></div>
+            <div className="page-layout">
+              <Story />
+            </div>
           );
         case 'page-mobile':
           return (
-            <div className="page-mobile-layout"><Story /></div>
+            <div className="page-mobile-layout">
+              <Story />
+            </div>
           );
         default:
           // In the default case, don't apply a layout
@@ -96,11 +104,15 @@ export default {
         case 'page':
           return (
             // Your page layout is probably a little more complex than this ;)
-            <div className="page-layout"><Story /></div>
+            <div className="page-layout">
+              <Story />
+            </div>
           );
         case 'page-mobile':
           return (
-            <div className="page-mobile-layout"><Story /></div>
+            <div className="page-mobile-layout">
+              <Story />
+            </div>
           );
         default:
           // In the default case, don't apply a layout
@@ -124,11 +136,15 @@ const preview: Preview = {
         case 'page':
           return (
             // Your page layout is probably a little more complex than this ;)
-            <div className="page-layout"><Story /></div>
+            <div className="page-layout">
+              <Story />
+            </div>
           );
         case 'page-mobile':
           return (
-            <div className="page-mobile-layout"><Story /></div>
+            <div className="page-mobile-layout">
+              <Story />
+            </div>
           );
         default:
           // In the default case, don't apply a layout
@@ -188,4 +204,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/document-screen-fetch.md b/docs/_snippets/document-screen-fetch.md
index a80c7ec9035f..8c49340ffacb 100644
--- a/docs/_snippets/document-screen-fetch.md
+++ b/docs/_snippets/document-screen-fetch.md
@@ -45,7 +45,7 @@ export class DocumentScreen implements OnInit {
 }
 ```
 
-```js filename="YourPage.js|jsx|mjs|ts|tsx" renderer="react" language="js"
+```js filename="YourPage.jsx" renderer="react" language="js"
 import React, { useState, useEffect } from 'react';
 
 import { PageLayout } from './PageLayout';
@@ -155,7 +155,7 @@ export function DocumentScreen() {
 }
 ```
 
-```js filename="YourPage.js|jsx|mjs|ts|tsx" renderer="solid" language="js"
+```js filename="YourPage.jsx" renderer="solid" language="js"
 import { createSignal, Match, Switch } from 'solid-js';
 
 import { PageLayout } from './PageLayout';
@@ -211,9 +211,7 @@ export function DocumentScreen() {
 }
 ```
 
-```html renderer="svelte" language="js"
-{/* YourPage.svelte */}
-
+```svelte filename="YourPage.svelte" renderer="svelte" language="js"
 <script>
   import { onMount } from 'svelte';
 
@@ -259,9 +257,7 @@ export function DocumentScreen() {
 {/if}
 ```
 
-```html renderer="svelte" language="ts"
-{/* YourPage.svelte */}
-
+```svelte filename="YourPage.svelte" renderer="svelte" language="ts"
 <script lang="ts">
   import { onMount } from 'svelte';
 
@@ -307,9 +303,7 @@ export function DocumentScreen() {
 {/if}
 ```
 
-```html renderer="vue" language="js" tabTitle="3"
-{/* YourPage.vue */}
-
+```html filename="YourPage.vue" renderer="vue" language="js"
 <template>
   <div v-if="!loading && data && data.subdocuments.length">
     <PageLayout :user="data.user">
@@ -358,9 +352,7 @@ export function DocumentScreen() {
 </script>
 ```
 
-```html renderer="vue" language="ts" tabTitle="3"
-{/* YourPage.vue */}
-
+```html filename="YourPage.vue" renderer="vue" language="ts"
 <template>
   <div v-if="!loading && data && data.subdocuments.length">
     <PageLayout :user="data.user">
@@ -474,4 +466,3 @@ class DocumentScreen extends LitElement {
 
 customElements.define('demo-document-screen', DocumentScreen);
 ```
-
diff --git a/docs/_snippets/document-screen-with-graphql.md b/docs/_snippets/document-screen-with-graphql.md
index d0368e4d3a82..07421281063a 100644
--- a/docs/_snippets/document-screen-with-graphql.md
+++ b/docs/_snippets/document-screen-with-graphql.md
@@ -66,7 +66,7 @@ export class SampleGraphqlComponent implements OnInit {
 }
 ```
 
-```js filename="YourPage.js|jsx" renderer="react" language="js"
+```js filename="YourPage.jsx" renderer="react" language="js"
 import { useQuery, gql } from '@apollo/client';
 
 import { PageLayout } from './PageLayout';
@@ -122,7 +122,7 @@ export function DocumentScreen() {
 }
 ```
 
-```ts filename="YourPage.ts|tsx" renderer="react" language="ts"
+```ts filename="YourPage.tsx" renderer="react" language="ts"
 import { useQuery, gql } from '@apollo/client';
 
 import { PageLayout } from './PageLayout';
@@ -202,7 +202,7 @@ export function DocumentScreen() {
 }
 ```
 
-```js filename="YourPage.js|jsx" renderer="solid" language="js"
+```js filename="YourPage.jsx" renderer="solid" language="js"
 import { Match, Switch } from 'solid-js';
 import { createGraphQLClient, gql } from '@solid-primitives/graphql';
 
@@ -263,7 +263,7 @@ export function DocumentScreen() {
 }
 ```
 
-```ts filename="YourPage.ts|tsx" renderer="solid" language="ts"
+```ts filename="YourPage.tsx" renderer="solid" language="ts"
 import { createGraphQLClient, gql } from '@solid-primitives/graphql';
 
 import { PageLayout } from './PageLayout';
@@ -347,9 +347,7 @@ export function DocumentScreen() {
 }
 ```
 
-```html renderer="vue" language="js" tabTitle="3"
-{/* YourPage.vue */}
-
+```html filename="YourPage.vue" renderer="vue" language="js"
 <template>
   <div v-if="loading">Loading...</div>
 
@@ -406,9 +404,7 @@ export function DocumentScreen() {
 </script>
 ```
 
-```html renderer="vue" language="ts" tabTitle="3"
-{/* YourPage.vue */}
-
+```html filename="YourPage.vue" renderer="vue" language="ts"
 <template>
   <div v-if="loading">Loading...</div>
 
@@ -467,3 +463,92 @@ export function DocumentScreen() {
 </script>
 ```
 
+```svelte filename="YourPage.svelte" renderer="svelte" language="js"
+<script>
+  import gql from 'graphql-tag';
+  import { query } from 'svelte-apollo';
+  import PageLayout from './PageLayout.svelte';
+  import DocumentHeader from './DocumentHeader.svelte';
+  import DocumentList from './DocumentList.svelte';
+
+  const AllInfoQuery = gql`
+    query AllInfoQuery {
+      user {
+        userID
+        name
+      }
+      document {
+        id
+        userID
+        title
+        brief
+        status
+      }
+      subdocuments {
+        id
+        userID
+        title
+        content
+        status
+      }
+    }
+  `;
+  const infoResult = query(AllInfoQuery);
+</script>
+
+{#if $infoResult.loading}
+<p>Loading...</p>
+{:else if $infoResult.error}
+<p>There was an error fetching the data!</p>
+{:else}
+<PageLayout {$infoResult.data.user}>
+  <DocumentHeader {$infoResult.data.document} />
+  <DocumentList {$infoResult.data.subdocuments} />
+</PageLayout>
+{/if}
+```
+
+```svelte filename="YourPage.svelte" renderer="svelte" language="ts"
+<script lang="ts">
+  import gql from 'graphql-tag';
+  import { query } from 'svelte-apollo';
+  import PageLayout from './PageLayout.svelte';
+  import DocumentHeader from './DocumentHeader.svelte';
+  import DocumentList from './DocumentList.svelte';
+
+  const AllInfoQuery = gql`
+    query AllInfoQuery {
+      user {
+        userID
+        name
+      }
+      document {
+        id
+        userID
+        title
+        brief
+        status
+      }
+      subdocuments {
+        id
+        userID
+        title
+        content
+        status
+      }
+    }
+  `;
+  const infoResult = query(AllInfoQuery);
+</script>
+
+{#if $infoResult.loading}
+<p>Loading...</p>
+{:else if $infoResult.error}
+<p>There was an error fetching the data!</p>
+{:else}
+<PageLayout {$infoResult.data.user}>
+  <DocumentHeader {$infoResult.data.document} />
+  <DocumentList {$infoResult.data.subdocuments} />
+</PageLayout>
+{/if}
+```
diff --git a/docs/_snippets/document-screen-with-grapqhl.md b/docs/_snippets/document-screen-with-grapqhl.md
deleted file mode 100644
index d5642453b112..000000000000
--- a/docs/_snippets/document-screen-with-grapqhl.md
+++ /dev/null
@@ -1,94 +0,0 @@
-```html renderer="svelte" language="js"
-{/* YourPage.svelte */}
-
-<script>
-  import gql from 'graphql-tag';
-  import { query } from 'svelte-apollo';
-  import PageLayout from './PageLayout.svelte';
-  import DocumentHeader from './DocumentHeader.svelte';
-  import DocumentList from './DocumentList.svelte';
-
-  const AllInfoQuery = gql`
-    query AllInfoQuery {
-      user {
-        userID
-        name
-      }
-      document {
-        id
-        userID
-        title
-        brief
-        status
-      }
-      subdocuments {
-        id
-        userID
-        title
-        content
-        status
-      }
-    }
-  `;
-  const infoResult = query(AllInfoQuery);
-</script>
-
-{#if $infoResult.loading}
-<p>Loading...</p>
-{:else if $infoResult.error}
-<p>There was an error fetching the data!</p>
-{:else}
-<PageLayout {$infoResult.data.user}>
-  <DocumentHeader {$infoResult.data.document} />
-  <DocumentList {$infoResult.data.subdocuments} />
-</PageLayout>
-{/if}
-```
-
-```html renderer="svelte" language="ts"
-{/* YourPage.svelte */}
-
-<script lang="ts">
-  import gql from 'graphql-tag';
-  import { query } from 'svelte-apollo';
-  import PageLayout from './PageLayout.svelte';
-  import DocumentHeader from './DocumentHeader.svelte';
-  import DocumentList from './DocumentList.svelte';
-
-  const AllInfoQuery = gql`
-    query AllInfoQuery {
-      user {
-        userID
-        name
-      }
-      document {
-        id
-        userID
-        title
-        brief
-        status
-      }
-      subdocuments {
-        id
-        userID
-        title
-        content
-        status
-      }
-    }
-  `;
-  const infoResult = query(AllInfoQuery);
-</script>
-
-{#if $infoResult.loading}
-<p>Loading...</p>
-{:else if $infoResult.error}
-<p>There was an error fetching the data!</p>
-{:else}
-<PageLayout {$infoResult.data.user}>
-  <DocumentHeader {$infoResult.data.document} />
-  <DocumentList {$infoResult.data.subdocuments} />
-</PageLayout>
-{/if}
-```
-
diff --git a/docs/_snippets/foo-bar-baz-story.md b/docs/_snippets/foo-bar-baz-story.md
index bf54630002f1..c510d93af9bf 100644
--- a/docs/_snippets/foo-bar-baz-story.md
+++ b/docs/_snippets/foo-bar-baz-story.md
@@ -74,4 +74,3 @@ type Story = StoryObj<typeof Foo>;
 
 export const Baz: Story = {};
 ```
-
diff --git a/docs/_snippets/ghp-github-action.md b/docs/_snippets/ghp-github-action.md
index 1d02c60a0827..975f2af2a473 100644
--- a/docs/_snippets/ghp-github-action.md
+++ b/docs/_snippets/ghp-github-action.md
@@ -1,6 +1,4 @@
-```yml renderer="common" language="ts" tabTitle="yml"
-# .github/workflows/deploy-github-pages.yaml
-
+```yml filename=".github/workflows/deploy-github-pages.yml" renderer="common" language="js"
 # Workflow name
 name: Build and Publish Storybook to GitHub Pages
 
@@ -23,12 +21,12 @@ jobs:
     steps:
       # Manual Checkout
       - uses: actions/checkout@v4
-
+        with:
+          fetch-depth: 0
       # Set up Node
       - uses: actions/setup-node@v4
         with:
-          node-version: '16.x'
-
+          node-version: '20'
       #👇 Add Storybook build and deploy to GitHub Pages as a step in the workflow
       - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
         with:
@@ -37,4 +35,3 @@ jobs:
           path: storybook-static # default: dist/storybook
           checkout: false # default: true
 ```
-
diff --git a/docs/_snippets/gizmo-story-controls-customization.md b/docs/_snippets/gizmo-story-controls-customization.md
index 66b09953a883..62d00837517c 100644
--- a/docs/_snippets/gizmo-story-controls-customization.md
+++ b/docs/_snippets/gizmo-story-controls-customization.md
@@ -57,6 +57,120 @@ const meta: Meta<Gizmo> = {
 export default meta;
 ```
 
+```svelte filename="Gizmo.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Gizmo from './Gizmo.svelte';
+
+  const { Story } = defineMeta({
+    component: Gizmo,
+    argTypes: {
+      canRotate: {
+        control: 'boolean',
+      },
+      width: {
+        control: { type: 'number', min: 400, max: 1200, step: 50 },
+      },
+      height: {
+        control: { type: 'range', min: 200, max: 1500, step: 50 },
+      },
+      rawData: {
+        control: 'object',
+      },
+      coordinates: {
+        control: 'object',
+      },
+      texture: {
+        control: {
+          type: 'file',
+          accept: '.png',
+        },
+      },
+      position: {
+        control: 'radio',
+        options: ['left', 'right', 'center'],
+      },
+      rotationAxis: {
+        control: 'check',
+        options: ['x', 'y', 'z'],
+      },
+      scaling: {
+        control: 'select',
+        options: [10, 50, 75, 100, 200],
+      },
+      label: {
+        control: 'text',
+      },
+      meshColors: {
+        control: {
+          type: 'color',
+          presetColors: ['#ff0000', '#00ff00', '#0000ff'],
+        },
+      },
+      revisionDate: {
+        control: 'date',
+      },
+    },
+  });
+</script>
+```
+
+```js filename="Gizmo.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Gizmo from './Gizmo.svelte';
+
+export default {
+  component: Gizmo,
+  argTypes: {
+    canRotate: {
+      control: 'boolean',
+    },
+    width: {
+      control: { type: 'number', min: 400, max: 1200, step: 50 },
+    },
+    height: {
+      control: { type: 'range', min: 200, max: 1500, step: 50 },
+    },
+    rawData: {
+      control: 'object',
+    },
+    coordinates: {
+      control: 'object',
+    },
+    texture: {
+      control: {
+        type: 'file',
+        accept: '.png',
+      },
+    },
+    position: {
+      control: 'radio',
+      options: ['left', 'right', 'center'],
+    },
+    rotationAxis: {
+      control: 'check',
+      options: ['x', 'y', 'z'],
+    },
+    scaling: {
+      control: 'select',
+      options: [10, 50, 75, 100, 200],
+    },
+    label: {
+      control: 'text',
+    },
+    meshColors: {
+      control: {
+        type: 'color',
+        presetColors: ['#ff0000', '#00ff00', '#0000ff'],
+      },
+    },
+    revisionDate: {
+      control: 'date',
+    },
+  },
+};
+```
+
 ```js filename="Gizmo.stories.js|jsx" renderer="common" language="js"
 import { Gizmo } from './Gizmo';
 
@@ -112,6 +226,124 @@ export default {
 };
 ```
 
+```svelte filename="Gizmo.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Gizmo from './Gizmo.svelte';
+
+  const { Story } = defineMeta({
+    component: Gizmo,
+    argTypes: {
+      canRotate: {
+        control: 'boolean',
+      },
+      width: {
+        control: { type: 'number', min: 400, max: 1200, step: 50 },
+      },
+      height: {
+        control: { type: 'range', min: 200, max: 1500, step: 50 },
+      },
+      rawData: {
+        control: 'object',
+      },
+      coordinates: {
+        control: 'object',
+      },
+      texture: {
+        control: {
+          type: 'file',
+          accept: '.png',
+        },
+      },
+      position: {
+        control: 'radio',
+        options: ['left', 'right', 'center'],
+      },
+      rotationAxis: {
+        control: 'check',
+        options: ['x', 'y', 'z'],
+      },
+      scaling: {
+        control: 'select',
+        options: [10, 50, 75, 100, 200],
+      },
+      label: {
+        control: 'text',
+      },
+      meshColors: {
+        control: {
+          type: 'color',
+          presetColors: ['#ff0000', '#00ff00', '#0000ff'],
+        },
+      },
+      revisionDate: {
+        control: 'date',
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="Gizmo.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Gizmo from './Gizmo.svelte';
+
+const meta = {
+  component: Gizmo,
+  argTypes: {
+    canRotate: {
+      control: 'boolean',
+    },
+    width: {
+      control: { type: 'number', min: 400, max: 1200, step: 50 },
+    },
+    height: {
+      control: { type: 'range', min: 200, max: 1500, step: 50 },
+    },
+    rawData: {
+      control: 'object',
+    },
+    coordinates: {
+      control: 'object',
+    },
+    texture: {
+      control: {
+        type: 'file',
+        accept: '.png',
+      },
+    },
+    position: {
+      control: 'radio',
+      options: ['left', 'right', 'center'],
+    },
+    rotationAxis: {
+      control: 'check',
+      options: ['x', 'y', 'z'],
+    },
+    scaling: {
+      control: 'select',
+      options: [10, 50, 75, 100, 200],
+    },
+    label: {
+      control: 'text',
+    },
+    meshColors: {
+      control: {
+        type: 'color',
+        presetColors: ['#ff0000', '#00ff00', '#0000ff'],
+      },
+    },
+    revisionDate: {
+      control: 'date',
+    },
+  },
+} satisfies Meta<typeof Gizmo>;
+
+export default meta;
+```
+
 ```ts filename="Gizmo.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -172,6 +404,124 @@ const meta = {
 export default meta;
 ```
 
+```svelte filename="Gizmo.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Gizmo from './Gizmo.svelte';
+
+  const { Story } = defineMeta({
+    component: Gizmo,
+    argTypes: {
+      canRotate: {
+        control: 'boolean',
+      },
+      width: {
+        control: { type: 'number', min: 400, max: 1200, step: 50 },
+      },
+      height: {
+        control: { type: 'range', min: 200, max: 1500, step: 50 },
+      },
+      rawData: {
+        control: 'object',
+      },
+      coordinates: {
+        control: 'object',
+      },
+      texture: {
+        control: {
+          type: 'file',
+          accept: '.png',
+        },
+      },
+      position: {
+        control: 'radio',
+        options: ['left', 'right', 'center'],
+      },
+      rotationAxis: {
+        control: 'check',
+        options: ['x', 'y', 'z'],
+      },
+      scaling: {
+        control: 'select',
+        options: [10, 50, 75, 100, 200],
+      },
+      label: {
+        control: 'text',
+      },
+      meshColors: {
+        control: {
+          type: 'color',
+          presetColors: ['#ff0000', '#00ff00', '#0000ff'],
+        },
+      },
+      revisionDate: {
+        control: 'date',
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="Gizmo.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Gizmo from './Gizmo.svelte';
+
+const meta: Meta<typeof Gizmo> = {
+  component: Gizmo,
+  argTypes: {
+    canRotate: {
+      control: 'boolean',
+    },
+    width: {
+      control: { type: 'number', min: 400, max: 1200, step: 50 },
+    },
+    height: {
+      control: { type: 'range', min: 200, max: 1500, step: 50 },
+    },
+    rawData: {
+      control: 'object',
+    },
+    coordinates: {
+      control: 'object',
+    },
+    texture: {
+      control: {
+        type: 'file',
+        accept: '.png',
+      },
+    },
+    position: {
+      control: 'radio',
+      options: ['left', 'right', 'center'],
+    },
+    rotationAxis: {
+      control: 'check',
+      options: ['x', 'y', 'z'],
+    },
+    scaling: {
+      control: 'select',
+      options: [10, 50, 75, 100, 200],
+    },
+    label: {
+      control: 'text',
+    },
+    meshColors: {
+      control: {
+        type: 'color',
+        presetColors: ['#ff0000', '#00ff00', '#0000ff'],
+      },
+    },
+    revisionDate: {
+      control: 'date',
+    },
+  },
+};
+
+export default meta;
+```
+
 ```ts filename="Gizmo.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -341,4 +691,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/highlight-addon-custom-style.md b/docs/_snippets/highlight-addon-custom-style.md
index 835ea2f966ef..05c3e9603180 100644
--- a/docs/_snippets/highlight-addon-custom-style.md
+++ b/docs/_snippets/highlight-addon-custom-style.md
@@ -249,4 +249,3 @@ export const StyledHighlight: Story = {
   ],
 };
 ```
-
diff --git a/docs/_snippets/histogram-story.md b/docs/_snippets/histogram-story.md
index 7571d7ad7e78..fd6464be9432 100644
--- a/docs/_snippets/histogram-story.md
+++ b/docs/_snippets/histogram-story.md
@@ -227,23 +227,36 @@ export const Default: Story = {
 };
 ```
 
-```js filename="Histogram.stories.js" renderer="svelte" language="js"
+```svelte filename="Histogram.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Histogram from './Histogram.svelte';
+
+  const { Story } = defineMeta({
+    component: Histogram,
+  });
+</script>
+
+<Story
+  name="Default"
+  args={{
+    dataType: 'latency',
+    showHistogramLabels: true,
+    histogramAccentColor: '#1EA7FD',
+    label: 'Latency distribution',
+  }}
+/>
+```
+
+```js filename="Histogram.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import Histogram from './Histogram.svelte';
 
 export default {
   component: Histogram,
 };
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const Default = {
-  render: (args) => ({
-    Component: Histogram,
-    props: args,
-  }),
   args: {
     dataType: 'latency',
     showHistogramLabels: true,
@@ -253,7 +266,29 @@ export const Default = {
 };
 ```
 
-```ts filename="Histogram.stories.ts" renderer="svelte" language="ts-4-9"
+```svelte filename="Histogram.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Histogram from './Histogram.svelte';
+
+  const { Story } = defineMeta({
+    component: Histogram,
+  });
+</script>
+
+<Story
+  name="Default"
+  args={{
+    dataType: 'latency',
+    showHistogramLabels: true,
+    histogramAccentColor: '#1EA7FD',
+    label: 'Latency distribution',
+  }}
+/>
+```
+
+```ts filename="Histogram.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Histogram from './Histogram.svelte';
@@ -265,16 +300,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const Default: Story = {
-  render: (args) => ({
-    Component: Histogram,
-    props: args,
-  }),
   args: {
     dataType: 'latency',
     showHistogramLabels: true,
@@ -284,7 +310,29 @@ export const Default: Story = {
 };
 ```
 
-```ts filename="Histogram.stories.ts" renderer="svelte" language="ts"
+```svelte filename="Histogram.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Histogram from './Histogram.svelte';
+
+  const { Story } = defineMeta({
+    component: Histogram,
+  });
+</script>
+
+<Story
+  name="Default"
+  args={{
+    dataType: 'latency',
+    showHistogramLabels: true,
+    histogramAccentColor: '#1EA7FD',
+    label: 'Latency distribution',
+  }}
+/>
+```
+
+```ts filename="Histogram.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Histogram from './Histogram.svelte';
@@ -296,16 +344,7 @@ const meta: Meta<typeof Histogram> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const Default: Story = {
-  render: (args) => ({
-    Component: Histogram,
-    props: args,
-  }),
   args: {
     dataType: 'latency',
     showHistogramLabels: true,
@@ -315,7 +354,7 @@ export const Default: Story = {
 };
 ```
 
-```js filename="Histogram.stories.js" renderer="vue" language="js" tabTitle="3"
+```js filename="Histogram.stories.js" renderer="vue" language="js"
 import Histogram from './Histogram.vue';
 
 export default {
@@ -344,7 +383,7 @@ export const Default = {
 };
 ```
 
-```ts filename="Histogram.stories.ts" renderer="vue" language="ts-4-9" tabTitle="3"
+```ts filename="Histogram.stories.ts" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Histogram from './Histogram.vue';
@@ -378,7 +417,7 @@ export const Default: Story = {
 };
 ```
 
-```ts filename="Histogram.stories.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="Histogram.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Histogram from './Histogram.vue';
@@ -446,4 +485,3 @@ export const Default: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/individual-snapshot-tests-portable-stories.md b/docs/_snippets/individual-snapshot-tests-portable-stories.md
index 14490c429f15..8b2d518fc907 100644
--- a/docs/_snippets/individual-snapshot-tests-portable-stories.md
+++ b/docs/_snippets/individual-snapshot-tests-portable-stories.md
@@ -15,7 +15,7 @@ const compose = (entry) => {
     return composeStories(entry);
   } catch (e) {
     throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`
+      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`,
     );
   }
 };
@@ -23,7 +23,7 @@ const compose = (entry) => {
 function getAllStoryFiles() {
   // Place the glob you want to match your stories files
   const storyFiles = glob.sync(
-    path.join(__dirname, 'stories/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}')
+    path.join(__dirname, 'stories/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}'),
   );
 
   return storyFiles.map((filePath) => {
@@ -45,7 +45,7 @@ describe('Stories Snapshots', () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`,
         );
       }
 
@@ -157,7 +157,7 @@ const compose = (entry) => {
     return composeStories(entry);
   } catch (error) {
     throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${error}`
+      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${error}`,
     );
   }
 };
@@ -166,7 +166,7 @@ function getAllStoryFiles() {
   const storyFiles = Object.entries(
     import.meta.glob('./stories/**/*.(stories|story).@(js|jsx|mjs|ts|tsx)', {
       eager: true,
-    })
+    }),
   );
 
   return storyFiles.map(([filePath, storyFile]) => {
@@ -185,7 +185,7 @@ describe('Stories Snapshots', () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`,
         );
       }
 
@@ -226,7 +226,7 @@ const compose = (entry: StoryFile): ReturnType<typeof composeStories<StoryFile>>
     return composeStories(entry);
   } catch (e) {
     throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`
+      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`,
     );
   }
 };
@@ -236,7 +236,7 @@ function getAllStoryFiles() {
   const storyFiles = Object.entries(
     import.meta.glob<StoryFile>('./stories/**/*.(stories|story).@(js|jsx|mjs|ts|tsx)', {
       eager: true,
-    })
+    }),
   );
 
   return storyFiles.map(([filePath, storyFile]) => {
@@ -256,7 +256,7 @@ describe('Stories Snapshots', () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`,
         );
       }
 
diff --git a/docs/_snippets/init-command-custom-package-manager.md b/docs/_snippets/init-command-custom-package-manager.md
index da6d52b3b49b..d7729e174ecd 100644
--- a/docs/_snippets/init-command-custom-package-manager.md
+++ b/docs/_snippets/init-command-custom-package-manager.md
@@ -1,4 +1,4 @@
-```shell renderer="common" language="js" packageManager="npx"
+```shell renderer="common" language="js" packageManager="npm"
 npx storybook@latest init --package-manager=npm
 ```
 
@@ -9,4 +9,3 @@ pnpm dlx storybook@latest init --package-manager=npm
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@latest init --package-manager=npm
 ```
-
diff --git a/docs/_snippets/init-command-manual-framework.md b/docs/_snippets/init-command-manual-framework.md
index f20a762ab79f..6818860a456d 100644
--- a/docs/_snippets/init-command-manual-framework.md
+++ b/docs/_snippets/init-command-manual-framework.md
@@ -1,4 +1,4 @@
-```shell renderer="common" language="js" packageManager="npx"
+```shell renderer="common" language="js" packageManager="npm"
 npx storybook@latest init --type solid
 ```
 
@@ -9,4 +9,3 @@ pnpm dlx storybook@latest init --type solid
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@latest init --type solid
 ```
-
diff --git a/docs/_snippets/init-command.md b/docs/_snippets/init-command.md
index 4d6563e2ef84..db2da5924dfd 100644
--- a/docs/_snippets/init-command.md
+++ b/docs/_snippets/init-command.md
@@ -1,12 +1,11 @@
-```shell renderer="common" language="js" packageManager="npx"
-npx storybook@latest init
+```shell renderer="common" language="js" packageManager="npm"
+npx storybook@next init
 ```
 
 ```shell renderer="common" language="js" packageManager="pnpm"
-pnpm dlx storybook@latest init
+pnpm dlx storybook@next init
 ```
 
 ```shell renderer="common" language="js" packageManager="yarn"
-yarn dlx storybook@latest init
+yarn dlx storybook@next init
 ```
-
diff --git a/docs/_snippets/list-story-expanded.md b/docs/_snippets/list-story-expanded.md
index d7a86fb93a14..f1c321b828d2 100644
--- a/docs/_snippets/list-story-expanded.md
+++ b/docs/_snippets/list-story-expanded.md
@@ -358,42 +358,103 @@ export const ManyItems: Story = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* List.stories.svelte */}
-
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+```svelte filename="List.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import List from './List.svelte';
+  import ListItem from './ListItem.svelte';
+
+  const { Story } = defineMeta({
+    component: List,
+  });
+</script>
+
+<Story name="Empty" />
+
+<Story name="One Item">
+  {#snippet children(args)}
+    <List {...args} >
+      <ListItem />
+    </List>
+  {/snippet}
+</Story>
+
+<Story name="Many Items">
+  {#snippet children(args)}
+    <List {...args} >
+      <ListItem />
+      <ListItem />
+      <ListItem />
+    </List>
+  {/snippet}
+</Story>
+```
 
+```svelte filename="List.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import List from './List.svelte';
   import ListItem from './ListItem.svelte';
+
+  const { Story } = defineMeta({
+    component: List,
+  });
 </script>
 
-<meta title="List" component="{List}" />
+<Story name="Empty" />
+
+<Story name="One Item">
+  {#snippet children(args)}
+    <List {...args} >
+      <ListItem />
+    </List>
+  {/snippet}
+</Story>
 
-<template let:args id="Empty">
-  <List {...args} />
-</template>
+<Story name="Many Items">
+  {#snippet children(args)}
+    <List {...args} >
+      <ListItem />
+      <ListItem />
+      <ListItem />
+    </List>
+  {/snippet}
+</Story>
+```
 
-<template let:args id="OneItem">
-  <List {...args}>
-    <ListItem />
-  </List>
-</template>
+```svelte filename="List.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import List from './List.svelte';
+  import ListItem from './ListItem.svelte';
 
-<template let:args id="ManyItems">
-  <List {...args}>
-    <ListItem />
-    <ListItem />
-    <ListItem />
-  </List>
-</template>
+  const { Story } = defineMeta({
+    component: List,
+  });
+</script>
 
-<Story name="Empty" template="Empty" />
+<Story name="Empty" />
 
-<Story name="OneItem" template="OneItem" />
+<Story name="One Item">
+  {#snippet children(args)}
+    <List {...args} >
+      <ListItem />
+    </List>
+  {/snippet}
+</Story>
 
-<Story name="MultipleItems" template="ManyItems" />
+<Story name="Many Items">
+  {#snippet children(args)}
+    <List {...args} >
+      <ListItem />
+      <ListItem />
+      <ListItem />
+    </List>
+  {/snippet}
+</Story>
 ```
 
 ```js filename="List.stories.js" renderer="vue" language="js"
@@ -599,4 +660,3 @@ export const ManyItems: Story = {
   `,
 };
 ```
-
diff --git a/docs/_snippets/list-story-reuse-data.md b/docs/_snippets/list-story-reuse-data.md
index aae3098c609c..7de27f68a2e0 100644
--- a/docs/_snippets/list-story-reuse-data.md
+++ b/docs/_snippets/list-story-reuse-data.md
@@ -245,7 +245,7 @@ export const ManyItems: Story = {
 };
 ```
 
-```js filename="List.stories.js" renderer="vue" language="js" tabTitle="3"
+```js filename="List.stories.js" renderer="vue" language="js"
 import List from './ListComponent.vue';
 import ListItem from './ListItem.vue';
 
@@ -276,7 +276,7 @@ export const ManyItems = {
 };
 ```
 
-```ts filename="List.stories.ts" renderer="vue" language="ts-4-9" tabTitle="3"
+```ts filename="List.stories.ts" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import List from './ListComponent.vue';
@@ -312,7 +312,7 @@ export const ManyItems: Story = {
 };
 ```
 
-```ts filename="List.stories.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="List.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import List from './ListComponent.vue';
@@ -392,4 +392,3 @@ export const ManyItems: Story = {
   `,
 };
 ```
-
diff --git a/docs/_snippets/list-story-starter.md b/docs/_snippets/list-story-starter.md
index e5111efdf5f4..09215a1d1dea 100644
--- a/docs/_snippets/list-story-starter.md
+++ b/docs/_snippets/list-story-starter.md
@@ -76,7 +76,6 @@ export default {
 };
 
 // Always an empty list, not super interesting
-
 export const Empty = {};
 ```
 
@@ -92,7 +91,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-//👇 Always an empty list, not super interesting
+// Always an empty list, not super interesting
 export const Empty: Story = {};
 ```
 
@@ -108,7 +107,7 @@ const meta: Meta<typeof List> = {
 export default meta;
 type Story = StoryObj<typeof List>;
 
-//👇 Always an empty list, not super interesting
+// Always an empty list, not super interesting
 export const Empty: Story = {};
 ```
 
@@ -120,7 +119,6 @@ export default {
 };
 
 // Always an empty list, not super interesting
-
 export const Empty = {};
 ```
 
@@ -136,7 +134,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-//👇 Always an empty list, not super interesting
+// Always an empty list, not super interesting
 export const Empty: Story = {};
 ```
 
@@ -152,28 +150,96 @@ const meta: Meta<typeof List> = {
 export default meta;
 type Story = StoryObj<typeof List>;
 
-//👇 Always an empty list, not super interesting
+// Always an empty list, not super interesting
 export const Empty: Story = {};
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* List.stories.svelte */}
+```svelte filename="List.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import List from './List.svelte';
+
+  const { Story } = defineMeta({
+    component: List,
+  });
+</script>
+
+<!-- Always an empty list, not super interesting -->
+<Story name="Empty" />
+```
+
+```js filename="List.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import List from './List.svelte';
+
+export default {
+  component: List,
+};
+
+// Always an empty list, not super interesting
+export const Empty = {};
+```
+
+```svelte filename="List.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import List from './List.svelte';
+
+  const { Story } = defineMeta({
+    component: List,
+  });
+</script>
+
+<!-- Always an empty list, not super interesting -->
+<Story name="Empty" />
+```
+
+```ts filename="List.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import List from './List.svelte';
+
+const meta = {
+  component: List,
+} satisfies Meta<typeof List>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Always an empty list, not super interesting
+export const Empty: Story = {};
+```
 
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+```svelte filename="List.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import List from './List.svelte';
+
+  const { Story } = defineMeta({
+    component: List,
+  });
 </script>
 
-<meta title="List" component="{List}" />
+<!-- Always an empty list, not super interesting -->
+<Story name="Empty" />
+```
+
+```ts filename="List.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import List from './List.svelte';
 
-<template let:args>
-  <List {...args} />
-</template>
+const meta: Meta<typeof List> = {
+  component: List,
+};
 
-<Story name="Empty">
-  <List {...args} />
-</Story>
+export default meta;
+type Story = StoryObj<typeof List>;
+
+// Always an empty list, not super interesting
+export const Empty: Story = {};
 ```
 
 ```js filename="List.stories.js" renderer="vue" language="js"
@@ -262,4 +328,3 @@ export const Empty: Story = {
   render: () => html`<demo-list></demo-list>`,
 };
 ```
-
diff --git a/docs/_snippets/list-story-template.md b/docs/_snippets/list-story-template.md
index b92ee09399ff..31c6ca75d8cc 100644
--- a/docs/_snippets/list-story-template.md
+++ b/docs/_snippets/list-story-template.md
@@ -352,7 +352,7 @@ export const OneItem = {
 };
 ```
 
-```js filename="List.stories.js" renderer="vue" language="js" tabTitle="3"
+```js filename="List.stories.js" renderer="vue" language="js"
 import List from './List.vue';
 import ListItem from './ListItem.vue';
 
@@ -403,7 +403,7 @@ export const OneItem = {
 };
 ```
 
-```ts filename="List.stories.ts" renderer="vue" language="ts-4-9" tabTitle="3"
+```ts filename="List.stories.ts" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import List from './List.vue';
@@ -459,7 +459,7 @@ export const OneItem: Story = {
 };
 ```
 
-```ts filename="List.stories.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="List.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import List from './List.vue';
@@ -598,4 +598,3 @@ export const OneItem: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/list-story-unchecked.md b/docs/_snippets/list-story-unchecked.md
index fd51261b9f1c..5fe08eeffdfb 100644
--- a/docs/_snippets/list-story-unchecked.md
+++ b/docs/_snippets/list-story-unchecked.md
@@ -213,7 +213,7 @@ export const OneItem: Story = {
 };
 ```
 
-```js filename="List.stories.js" renderer="vue" language="js" tabTitle="3"
+```js filename="List.stories.js" renderer="vue" language="js"
 import List from './List.vue';
 import ListItem from './ListItem.vue';
 
@@ -249,7 +249,7 @@ export const OneItem = {
 };
 ```
 
-```ts filename="List.stories.js" renderer="vue" language="ts-4-9" tabTitle="3"
+```ts filename="List.stories.js" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import List from './List.vue';
@@ -290,7 +290,7 @@ export const OneItem: Story = {
 };
 ```
 
-```ts filename="List.stories.js" renderer="vue" language="ts" tabTitle="3"
+```ts filename="List.stories.js" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import List from './List.vue';
@@ -367,4 +367,3 @@ export const OneItem: Story = {
   render: () => html` <List> ${Unchecked({ ...Unchecked.args })} </List> `,
 };
 ```
-
diff --git a/docs/_snippets/list-story-with-sub-components.md b/docs/_snippets/list-story-with-sub-components.md
deleted file mode 100644
index 27b866230d51..000000000000
--- a/docs/_snippets/list-story-with-sub-components.md
+++ /dev/null
@@ -1,91 +0,0 @@
-```js filename="List.stories.js" renderer="vue" language="js"
-import List from './List.vue';
-import ListItem from './ListItem.vue';
-
-export default {
-  component: List,
-  subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
-};
-
-export const Empty = {
-  render: () => ({
-    components: { List },
-    template: '<List/>',
-  }),
-};
-
-export const OneItem = {
-  render: (args) => ({
-    components: { List, ListItem },
-    setup() {
-      return { args }
-    }
-    template: '<List v-bind="args"><ListItem /></List>',
-  }),
-};
-```
-
-```ts filename="List.stories.ts" renderer="vue" language="ts-4-9"
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import List from './List.vue';
-import ListItem from './ListItem.vue';
-
-const meta = {
-  component: List,
-  subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
-} satisfies Meta<typeof List>;
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Empty: Story = {
-  render: () => ({
-    components: { List },
-    template: '<List />',
-  }),
-};
-
-export const OneItem: Story = {
-  render: (args) => ({
-    components: { List, ListItem },
-    setup() {
-      return { args }
-    }
-    template: '<List v-bind="args"><ListItem /></List>',
-  }),
-};
-```
-
-```ts filename="List.stories.ts" renderer="vue" language="ts"
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import List from './List.vue';
-import ListItem from './ListItem.vue';
-
-const meta: Meta<typeof List> = {
-  component: List,
-  subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
-};
-export default meta;
-
-type Story = StoryObj<typeof List>;
-
-export const Empty: Story = {
-  render: () => ({
-    components: { List },
-    template: '<List />',
-  }),
-};
-
-export const OneItem: Story = {
-  render: (args) => ({
-    components: { List, ListItem },
-    setup() {
-      return { args }
-    }
-    template: '<List v-bind="args"><ListItem /></List>',
-  }),
-};
-```
-
diff --git a/docs/_snippets/list-story-with-subcomponents.md b/docs/_snippets/list-story-with-subcomponents.md
index e0a7fdf53a7d..44a05aade665 100644
--- a/docs/_snippets/list-story-with-subcomponents.md
+++ b/docs/_snippets/list-story-with-subcomponents.md
@@ -242,3 +242,93 @@ export const OneItem: Story = {
 };
 ```
 
+```js filename="List.stories.js" renderer="vue" language="js"
+import List from './List.vue';
+import ListItem from './ListItem.vue';
+
+export default {
+  component: List,
+  subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
+};
+
+export const Empty = {
+  render: () => ({
+    components: { List },
+    template: '<List/>',
+  }),
+};
+
+export const OneItem = {
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      return { args }
+    }
+    template: '<List v-bind="args"><ListItem /></List>',
+  }),
+};
+```
+
+```ts filename="List.stories.ts" renderer="vue" language="ts-4-9"
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import List from './List.vue';
+import ListItem from './ListItem.vue';
+
+const meta = {
+  component: List,
+  subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
+} satisfies Meta<typeof List>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Empty: Story = {
+  render: () => ({
+    components: { List },
+    template: '<List />',
+  }),
+};
+
+export const OneItem: Story = {
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      return { args }
+    }
+    template: '<List v-bind="args"><ListItem /></List>',
+  }),
+};
+```
+
+```ts filename="List.stories.ts" renderer="vue" language="ts"
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import List from './List.vue';
+import ListItem from './ListItem.vue';
+
+const meta: Meta<typeof List> = {
+  component: List,
+  subcomponents: { ListItem }, //👈 Adds the ListItem component as a subcomponent
+};
+export default meta;
+
+type Story = StoryObj<typeof List>;
+
+export const Empty: Story = {
+  render: () => ({
+    components: { List },
+    template: '<List />',
+  }),
+};
+
+export const OneItem: Story = {
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      return { args }
+    }
+    template: '<List v-bind="args"><ListItem /></List>',
+  }),
+};
+```
diff --git a/docs/_snippets/list-story-with-unchecked-children.md b/docs/_snippets/list-story-with-unchecked-children.md
index 7f2843705a94..695ec926432a 100644
--- a/docs/_snippets/list-story-with-unchecked-children.md
+++ b/docs/_snippets/list-story-with-unchecked-children.md
@@ -149,4 +149,3 @@ export const OneItem: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/loader-story.md b/docs/_snippets/loader-story.md
index d0b4706e0095..a777c0e2e922 100644
--- a/docs/_snippets/loader-story.md
+++ b/docs/_snippets/loader-story.md
@@ -424,4 +424,3 @@ export const Primary: Story = {
   ],
 };
 ```
-
diff --git a/docs/_snippets/login-form-with-play-function.md b/docs/_snippets/login-form-with-play-function.md
index 12a24031604f..4488f94009e3 100644
--- a/docs/_snippets/login-form-with-play-function.md
+++ b/docs/_snippets/login-form-with-play-function.md
@@ -286,7 +286,48 @@ export const FilledForm: Story = {
 };
 ```
 
-```js filename="LoginForm.stories.js" renderer="svelte" language="js"
+```svelte filename="LoginForm.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { expect, userEvent, within } from '@storybook/test';
+
+  import LoginForm from './LoginForm.svelte';
+
+  const { Story } = defineMeta({
+    component: LoginForm,
+  });
+</script>
+
+<Story name="EmptyForm" />
+
+<!--
+  See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+  to learn more about using the canvasElement to query the DOM
+-->
+<Story
+  name="FilledForm"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // 👇 Simulate interactions with the component
+    await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+    await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button'));
+
+    // 👇 Assert DOM structure
+    await expect(
+      canvas.getByText(
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
+    ).toBeInTheDocument();
+  }}
+/>
+```
+
+```js filename="LoginForm.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import { expect, userEvent, within } from '@storybook/test';
 
 import LoginForm from './LoginForm.svelte';
@@ -323,7 +364,48 @@ export const FilledForm = {
 };
 ```
 
-```ts filename="LoginForm.stories.ts" renderer="svelte" language="ts-4-9"
+```svelte filename="LoginForm.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { expect, userEvent, within } from '@storybook/test';
+
+  import LoginForm from './LoginForm.svelte';
+
+  const { Story } = defineMeta({
+    component: LoginForm,
+  });
+</script>
+
+<Story name="EmptyForm" />
+
+<!--
+  See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+  to learn more about using the canvasElement to query the DOM
+-->
+<Story
+  name="FilledForm"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // 👇 Simulate interactions with the component
+    await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+    await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button'));
+
+    // 👇 Assert DOM structure
+    await expect(
+      canvas.getByText(
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
+    ).toBeInTheDocument();
+  }}
+/>
+```
+
+```ts filename="LoginForm.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 import { expect, userEvent, within } from '@storybook/test';
 
@@ -364,7 +446,49 @@ export const FilledForm: Story = {
 };
 ```
 
-```ts filename="LoginForm.stories.ts" renderer="svelte" language="ts"
+```svelte filename="LoginForm.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { expect, userEvent, within } from '@storybook/test';
+
+  import LoginForm from './LoginForm.svelte';
+
+  const { Story } = defineMeta({
+    component: LoginForm,
+  });
+
+</script>
+
+<Story name="EmptyForm" />
+
+<!--
+  See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+  to learn more about using the canvasElement to query the DOM
+-->
+<Story
+  name="FilledForm"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // 👇 Simulate interactions with the component
+    await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+    await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button'));
+
+    // 👇 Assert DOM structure
+    await expect(
+      canvas.getByText(
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
+    ).toBeInTheDocument();
+  }}
+/>
+```
+
+```ts filename="LoginForm.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 import { expect, userEvent, within } from '@storybook/test';
 
@@ -626,4 +750,3 @@ export const FilledForm: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/main-config-addons.md b/docs/_snippets/main-config-addons.md
index d7a0ee94fd90..497402137c04 100644
--- a/docs/_snippets/main-config-addons.md
+++ b/docs/_snippets/main-config-addons.md
@@ -63,4 +63,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-babel.md b/docs/_snippets/main-config-babel.md
index a84c1b8e7fbf..461b07c96f80 100644
--- a/docs/_snippets/main-config-babel.md
+++ b/docs/_snippets/main-config-babel.md
@@ -35,4 +35,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-builder-custom-config.md b/docs/_snippets/main-config-builder-custom-config.md
index d7e77531b4b2..42ee9456cb46 100644
--- a/docs/_snippets/main-config-builder-custom-config.md
+++ b/docs/_snippets/main-config-builder-custom-config.md
@@ -11,4 +11,3 @@ export default {
   },
 };
 ```
-
diff --git a/docs/_snippets/main-config-core-builder.md b/docs/_snippets/main-config-core-builder.md
index 3f99dd9a7854..59bac17fdfe6 100644
--- a/docs/_snippets/main-config-core-builder.md
+++ b/docs/_snippets/main-config-core-builder.md
@@ -53,4 +53,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-core-cross-origin-isolated.md b/docs/_snippets/main-config-core-cross-origin-isolated.md
index 0220b9279e86..9dd3de4a0c14 100644
--- a/docs/_snippets/main-config-core-cross-origin-isolated.md
+++ b/docs/_snippets/main-config-core-cross-origin-isolated.md
@@ -23,4 +23,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-core-disable-project-json.md b/docs/_snippets/main-config-core-disable-project-json.md
index ec0479ff729d..a3ee05092236 100644
--- a/docs/_snippets/main-config-core-disable-project-json.md
+++ b/docs/_snippets/main-config-core-disable-project-json.md
@@ -23,4 +23,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-core-disable-telemetry.md b/docs/_snippets/main-config-core-disable-telemetry.md
index da71438e89ad..7ae7d19ce9ad 100644
--- a/docs/_snippets/main-config-core-disable-telemetry.md
+++ b/docs/_snippets/main-config-core-disable-telemetry.md
@@ -23,4 +23,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-core-disable-update-notifications.md b/docs/_snippets/main-config-core-disable-update-notifications.md
index 79f13ab69fbd..4690f91dff3b 100644
--- a/docs/_snippets/main-config-core-disable-update-notifications.md
+++ b/docs/_snippets/main-config-core-disable-update-notifications.md
@@ -23,4 +23,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-core-disable-webpack-defaults.md b/docs/_snippets/main-config-core-disable-webpack-defaults.md
index 9de06b3e3e49..872865235bb7 100644
--- a/docs/_snippets/main-config-core-disable-webpack-defaults.md
+++ b/docs/_snippets/main-config-core-disable-webpack-defaults.md
@@ -23,4 +23,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-core-enable-crash-reports.md b/docs/_snippets/main-config-core-enable-crash-reports.md
index 50d44d8a7c31..32f436b273ae 100644
--- a/docs/_snippets/main-config-core-enable-crash-reports.md
+++ b/docs/_snippets/main-config-core-enable-crash-reports.md
@@ -23,4 +23,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-csf-addon-register.md b/docs/_snippets/main-config-csf-addon-register.md
deleted file mode 100644
index d38fecb2ffa1..000000000000
--- a/docs/_snippets/main-config-csf-addon-register.md
+++ /dev/null
@@ -1,28 +0,0 @@
-```js filename=".storybook/main.js" renderer="svelte" language="js"
-export default {
-  // Replace sveltekit with svelte-vite if you are not working with SvelteKit
-  framework: '@storybook/sveltekit',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
-  addons: [
-    // Other Storybook addons
-    '@storybook/addon-svelte-csf', //👈 The Svelte CSF addon goes here
-  ],
-};
-```
-
-```ts filename=".storybook/main.ts" renderer="svelte" language="ts"
-// Replace sveltekit with svelte-vite if you are not working with SvelteKit
-import type { StorybookConfig } from '@storybook/sveltekit';
-
-const config: StorybookConfig = {
-  framework: '@storybook/sveltekit',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
-  addons: [
-    // Other Storybook addons
-    '@storybook/addon-svelte-csf', //👈 The Svelte CSF addon goes here
-  ],
-};
-
-export default config;
-```
-
diff --git a/docs/_snippets/main-config-docs-autodocs.md b/docs/_snippets/main-config-docs-autodocs.md
index eab7ca0e6959..7fef4184f37e 100644
--- a/docs/_snippets/main-config-docs-autodocs.md
+++ b/docs/_snippets/main-config-docs-autodocs.md
@@ -23,4 +23,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-docs-default-name.md b/docs/_snippets/main-config-docs-default-name.md
index 7f37237c76ec..181354867f7e 100644
--- a/docs/_snippets/main-config-docs-default-name.md
+++ b/docs/_snippets/main-config-docs-default-name.md
@@ -23,4 +23,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-docs-docs-mode.md b/docs/_snippets/main-config-docs-docs-mode.md
index 7b93d17627ed..8e90c952e9b2 100644
--- a/docs/_snippets/main-config-docs-docs-mode.md
+++ b/docs/_snippets/main-config-docs-docs-mode.md
@@ -23,4 +23,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-env.md b/docs/_snippets/main-config-env.md
index 19d4f7e8f7a6..677be576fa72 100644
--- a/docs/_snippets/main-config-env.md
+++ b/docs/_snippets/main-config-env.md
@@ -33,4 +33,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-features-arg-type-targets-v7.md b/docs/_snippets/main-config-features-arg-type-targets-v7.md
index 72cb3cfce324..5b03ccd0090f 100644
--- a/docs/_snippets/main-config-features-arg-type-targets-v7.md
+++ b/docs/_snippets/main-config-features-arg-type-targets-v7.md
@@ -23,4 +23,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-figma-addon-register.md b/docs/_snippets/main-config-features-development-mode-for-build.md
similarity index 70%
rename from docs/_snippets/storybook-main-figma-addon-register.md
rename to docs/_snippets/main-config-features-development-mode-for-build.md
index bd02a21c1cb5..2650c75c39ab 100644
--- a/docs/_snippets/storybook-main-figma-addon-register.md
+++ b/docs/_snippets/main-config-features-development-mode-for-build.md
@@ -1,10 +1,11 @@
 ```js filename=".storybook/main.js" renderer="common" language="js"
 export default {
+  // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
+  framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    // Other Storybook addons
-    '@storybook/addon-designs', // 👈 Addon is registered here
-  ],
+  features: {
+    developmentModeForBuild: true,
+  },
 };
 ```
 
@@ -15,12 +16,10 @@ import type { StorybookConfig } from '@storybook/your-framework';
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    // Other Storybook addons
-    '@storybook/addon-designs', // 👈 Addon is registered here
-  ],
+  features: {
+    developmentModeForBuild: true,
+  },
 };
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-features-legacy-decorator-file-order.md b/docs/_snippets/main-config-features-legacy-decorator-file-order.md
index fc16fd76a9a0..f44c53f53220 100644
--- a/docs/_snippets/main-config-features-legacy-decorator-file-order.md
+++ b/docs/_snippets/main-config-features-legacy-decorator-file-order.md
@@ -23,4 +23,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-framework.md b/docs/_snippets/main-config-framework.md
index 4b7e64958921..b2701eeb52a2 100644
--- a/docs/_snippets/main-config-framework.md
+++ b/docs/_snippets/main-config-framework.md
@@ -27,4 +27,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-indexers-jsonstories.md b/docs/_snippets/main-config-indexers-jsonstories.md
index 1e279464c9d7..8d0ea9c1b7f4 100644
--- a/docs/_snippets/main-config-indexers-jsonstories.md
+++ b/docs/_snippets/main-config-indexers-jsonstories.md
@@ -101,4 +101,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-indexers-title.md b/docs/_snippets/main-config-indexers-title.md
index febd48d4c8d6..33f3ad714c30 100644
--- a/docs/_snippets/main-config-indexers-title.md
+++ b/docs/_snippets/main-config-indexers-title.md
@@ -89,4 +89,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-indexers.md b/docs/_snippets/main-config-indexers.md
index b86c0c7ddefa..544f8d2b98c9 100644
--- a/docs/_snippets/main-config-indexers.md
+++ b/docs/_snippets/main-config-indexers.md
@@ -65,4 +65,3 @@ const config: StorybookConfig = {
 
 export default config
 ```
-
diff --git a/docs/_snippets/main-config-log-level.md b/docs/_snippets/main-config-log-level.md
index 3f273bc15f7c..2d57e78eb994 100644
--- a/docs/_snippets/main-config-log-level.md
+++ b/docs/_snippets/main-config-log-level.md
@@ -19,4 +19,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-manager-head.md b/docs/_snippets/main-config-manager-head.md
index af295c0b1247..363e168040a8 100644
--- a/docs/_snippets/main-config-manager-head.md
+++ b/docs/_snippets/main-config-manager-head.md
@@ -25,4 +25,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-preview-body.md b/docs/_snippets/main-config-preview-body.md
index 5fbbcfac8e8f..0f8c36d65ebe 100644
--- a/docs/_snippets/main-config-preview-body.md
+++ b/docs/_snippets/main-config-preview-body.md
@@ -29,4 +29,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-preview-head.md b/docs/_snippets/main-config-preview-head.md
index 3a95e2a7fdc6..c892c84164af 100644
--- a/docs/_snippets/main-config-preview-head.md
+++ b/docs/_snippets/main-config-preview-head.md
@@ -29,4 +29,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-preview.md b/docs/_snippets/main-config-preview.md
index 706563a2ae96..2e849eabd534 100644
--- a/docs/_snippets/main-config-preview.md
+++ b/docs/_snippets/main-config-preview.md
@@ -55,4 +55,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-refs-disable.md b/docs/_snippets/main-config-refs-disable.md
index 8b99555794a1..40d9830d9943 100644
--- a/docs/_snippets/main-config-refs-disable.md
+++ b/docs/_snippets/main-config-refs-disable.md
@@ -23,4 +23,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-refs-with-function.md b/docs/_snippets/main-config-refs-with-function.md
index 5b48a9b60f16..b94608356b25 100644
--- a/docs/_snippets/main-config-refs-with-function.md
+++ b/docs/_snippets/main-config-refs-with-function.md
@@ -69,4 +69,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-static-dirs-with-object.md b/docs/_snippets/main-config-static-dirs-with-object.md
index 3a0aa7954bb9..ae6e78369d91 100644
--- a/docs/_snippets/main-config-static-dirs-with-object.md
+++ b/docs/_snippets/main-config-static-dirs-with-object.md
@@ -19,4 +19,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-static-dirs.md b/docs/_snippets/main-config-static-dirs.md
index 3d8514d18885..c4537d4f0e82 100644
--- a/docs/_snippets/main-config-static-dirs.md
+++ b/docs/_snippets/main-config-static-dirs.md
@@ -19,4 +19,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-stories-ordered.md b/docs/_snippets/main-config-stories-ordered.md
index 41902cb5b140..972589b0ab42 100644
--- a/docs/_snippets/main-config-stories-ordered.md
+++ b/docs/_snippets/main-config-stories-ordered.md
@@ -20,4 +20,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-stories-with-logic.md b/docs/_snippets/main-config-stories-with-logic.md
index 43021b00b526..2baa4ceb91a1 100644
--- a/docs/_snippets/main-config-stories-with-logic.md
+++ b/docs/_snippets/main-config-stories-with-logic.md
@@ -34,4 +34,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-stories-with-object.md b/docs/_snippets/main-config-stories-with-object.md
index a26aebd7f425..a08c476c79c0 100644
--- a/docs/_snippets/main-config-stories-with-object.md
+++ b/docs/_snippets/main-config-stories-with-object.md
@@ -35,4 +35,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-stories.md b/docs/_snippets/main-config-stories.md
index 5335c946d8aa..2d04f3a74d6f 100644
--- a/docs/_snippets/main-config-stories.md
+++ b/docs/_snippets/main-config-stories.md
@@ -17,4 +17,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-svelte-csf-register.md b/docs/_snippets/main-config-svelte-csf-register.md
new file mode 100644
index 000000000000..7676d4f05ec2
--- /dev/null
+++ b/docs/_snippets/main-config-svelte-csf-register.md
@@ -0,0 +1,24 @@
+```js filename=".storybook/main.js" renderer="svelte" language="js"
+export default {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
+  addons: [
+    // Other Storybook addons
+    '@storybook/addon-svelte-csf',
+  ],
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="svelte" language="ts"
+// Replace your-framework with the name of your Svelte framework
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
+  addons: [
+    // Other Storybook addons
+    '@storybook/addon-svelte-csf',
+  ],
+};
+
+export default config;
+```
diff --git a/docs/_snippets/main-config-swc-jsx-transform.md b/docs/_snippets/main-config-swc-jsx-transform.md
index b85848dcafd9..f942eee4e7fc 100644
--- a/docs/_snippets/main-config-swc-jsx-transform.md
+++ b/docs/_snippets/main-config-swc-jsx-transform.md
@@ -38,4 +38,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-swc.md b/docs/_snippets/main-config-swc.md
index 6690e30ce924..670bdb51b922 100644
--- a/docs/_snippets/main-config-swc.md
+++ b/docs/_snippets/main-config-swc.md
@@ -33,4 +33,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-test-disable-autodocs.md b/docs/_snippets/main-config-test-disable-autodocs.md
index 16df9af2dcfd..dab7b1ffb3cf 100644
--- a/docs/_snippets/main-config-test-disable-autodocs.md
+++ b/docs/_snippets/main-config-test-disable-autodocs.md
@@ -27,4 +27,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-test-disable-blocks.md b/docs/_snippets/main-config-test-disable-blocks.md
index bcc85cfbaafa..d48c5e54c19a 100644
--- a/docs/_snippets/main-config-test-disable-blocks.md
+++ b/docs/_snippets/main-config-test-disable-blocks.md
@@ -27,4 +27,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-test-disable-disableaddons.md b/docs/_snippets/main-config-test-disable-disableaddons.md
index ec4adfee235c..09f449b185b0 100644
--- a/docs/_snippets/main-config-test-disable-disableaddons.md
+++ b/docs/_snippets/main-config-test-disable-disableaddons.md
@@ -3,12 +3,7 @@ export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    '@storybook/addon-a11y',
-  ],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions', '@storybook/addon-a11y'],
   build: {
     test: {
       disabledAddons: ['@storybook/addon-a11y'],
@@ -24,12 +19,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
 const config: StorybookConfig = {
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    '@storybook/addon-a11y',
-  ],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions', '@storybook/addon-a11y'],
   build: {
     test: {
       disabledAddons: ['@storybook/addon-a11y'],
@@ -39,4 +29,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-test-disable-docgen.md b/docs/_snippets/main-config-test-disable-docgen.md
index c45c607fed59..029bece1e6fd 100644
--- a/docs/_snippets/main-config-test-disable-docgen.md
+++ b/docs/_snippets/main-config-test-disable-docgen.md
@@ -27,4 +27,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-test-disable-mdx.md b/docs/_snippets/main-config-test-disable-mdx.md
index ee708b0b2a7a..013a85ee6af3 100644
--- a/docs/_snippets/main-config-test-disable-mdx.md
+++ b/docs/_snippets/main-config-test-disable-mdx.md
@@ -27,4 +27,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-test-disable-sourcemaps.md b/docs/_snippets/main-config-test-disable-sourcemaps.md
index 8f581273dfbd..42da44e8fce8 100644
--- a/docs/_snippets/main-config-test-disable-sourcemaps.md
+++ b/docs/_snippets/main-config-test-disable-sourcemaps.md
@@ -27,4 +27,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-test-disable-treeshaking.md b/docs/_snippets/main-config-test-disable-treeshaking.md
index e5f65383fbd4..a328ce28de7c 100644
--- a/docs/_snippets/main-config-test-disable-treeshaking.md
+++ b/docs/_snippets/main-config-test-disable-treeshaking.md
@@ -27,4 +27,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-typescript-check-options.md b/docs/_snippets/main-config-typescript-check-options.md
index 2c41b5f53ad8..2850a3fb2f40 100644
--- a/docs/_snippets/main-config-typescript-check-options.md
+++ b/docs/_snippets/main-config-typescript-check-options.md
@@ -15,4 +15,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-typescript-check.md b/docs/_snippets/main-config-typescript-check.md
index 043e01e26bde..a1ef1bcec0af 100644
--- a/docs/_snippets/main-config-typescript-check.md
+++ b/docs/_snippets/main-config-typescript-check.md
@@ -12,4 +12,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-typescript-react-docgen-typescript-options.md b/docs/_snippets/main-config-typescript-react-docgen-typescript-options.md
index 47c800598e2e..57310d35a370 100644
--- a/docs/_snippets/main-config-typescript-react-docgen-typescript-options.md
+++ b/docs/_snippets/main-config-typescript-react-docgen-typescript-options.md
@@ -17,4 +17,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-typescript-react-docgen.md b/docs/_snippets/main-config-typescript-react-docgen.md
index a49ccfeda3a9..94a73916a1ff 100644
--- a/docs/_snippets/main-config-typescript-react-docgen.md
+++ b/docs/_snippets/main-config-typescript-react-docgen.md
@@ -12,4 +12,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-typescript-skip-compiler.md b/docs/_snippets/main-config-typescript-skip-compiler.md
index 3f338a05c724..57a0f21c359c 100644
--- a/docs/_snippets/main-config-typescript-skip-compiler.md
+++ b/docs/_snippets/main-config-typescript-skip-compiler.md
@@ -12,4 +12,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-typical.md b/docs/_snippets/main-config-typical.md
index 342de3698437..eb2230a71ba7 100644
--- a/docs/_snippets/main-config-typical.md
+++ b/docs/_snippets/main-config-typical.md
@@ -32,4 +32,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-vite-final-env.md b/docs/_snippets/main-config-vite-final-env.md
index b785329d0dbc..eaaed64eeef2 100644
--- a/docs/_snippets/main-config-vite-final-env.md
+++ b/docs/_snippets/main-config-vite-final-env.md
@@ -19,4 +19,3 @@ export default {
   },
 };
 ```
-
diff --git a/docs/_snippets/main-config-vite-final.md b/docs/_snippets/main-config-vite-final.md
index ca3566e5a91f..a6a1d2fd79f1 100644
--- a/docs/_snippets/main-config-vite-final.md
+++ b/docs/_snippets/main-config-vite-final.md
@@ -69,4 +69,3 @@ const config = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/main-config-webpack-final.md b/docs/_snippets/main-config-webpack-final.md
index 8ee96518d565..0d0c8b5e463c 100644
--- a/docs/_snippets/main-config-webpack-final.md
+++ b/docs/_snippets/main-config-webpack-final.md
@@ -35,4 +35,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/margindecorator.md b/docs/_snippets/margindecorator.md
index 4cf91687525f..82545e73b08b 100644
--- a/docs/_snippets/margindecorator.md
+++ b/docs/_snippets/margindecorator.md
@@ -1,6 +1,4 @@
-```html renderer="svelte" language="js" tabTitle="with-margin-component"
-{/* MarginDecorator.svelte */}
-
+```svelte filename="MarginDecorator.svelte" renderer="svelte" language="js" tabTitle="Svelte 4"
 <div>
   <slot />
 </div>
@@ -12,9 +10,23 @@
 </style>
 ```
 
-```html renderer="svelte" language="ts" tabTitle="with-margin-component"
-{/* MarginDecorator.svelte */}
+```svelte filename="MarginDecorator.svelte" renderer="svelte" language="js" tabTitle="Svelte 5"
+<script>
+  let { children } = $props();
+</script>
+
+<div>
+  {@render children()}
+</div>
+
+<style>
+  div {
+    margin: 3em;
+  }
+</style>
+```
 
+```svelte filename="MarginDecorator.svelte" renderer="svelte" language="ts" tabTitle="Svelte 4"
 <div>
   <slot />
 </div>
@@ -26,3 +38,20 @@
 </style>
 ```
 
+```svelte filename="MarginDecorator.svelte" renderer="svelte" language="ts" tabTitle="Svelte 5"
+<script>
+  import type { Snippet } from 'svelte';
+
+  let { children }: { children: Snippet } = $props();
+</script>
+
+<div>
+  {@render children()}
+</div>
+
+<style>
+  div {
+    margin: 3em;
+  }
+</style>
+```
diff --git a/docs/_snippets/mock-context-container-global.md b/docs/_snippets/mock-context-container-global.md
index ada262d52e1c..447d1cd44b84 100644
--- a/docs/_snippets/mock-context-container-global.md
+++ b/docs/_snippets/mock-context-container-global.md
@@ -62,9 +62,7 @@ const AppDecorator = (storyFn) => {
 export const decorators = [AppDecorator];
 ```
 
-```ts filename="Replace your-framework with the framework you are using (e.g., react, vue3)" renderer="solid" language="ts"
-import { Preview } from '@storybook/your-framework';
-
+```ts filename=".storybook/preview.ts" renderer="solid" language="ts"
 import { normal as NavigationNormal } from '../components/Navigation.stories';
 
 import GlobalContainerContext from '../components/lib/GlobalContainerContext';
@@ -85,4 +83,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/mock-context-container-provider.md b/docs/_snippets/mock-context-container-provider.md
index 81a3ce811fc1..533765ee4736 100644
--- a/docs/_snippets/mock-context-container-provider.md
+++ b/docs/_snippets/mock-context-container-provider.md
@@ -41,4 +41,3 @@ export const AppProfilePage = () => {
   );
 };
 ```
-
diff --git a/docs/_snippets/mock-context-container.md b/docs/_snippets/mock-context-container.md
index 2b3f1e92278b..716c68d31f26 100644
--- a/docs/_snippets/mock-context-container.md
+++ b/docs/_snippets/mock-context-container.md
@@ -71,4 +71,3 @@ export const Normal = {
   ),
 };
 ```
-
diff --git a/docs/_snippets/mock-context-create.md b/docs/_snippets/mock-context-create.md
index 7954b4f8d71a..7d4b419079db 100644
--- a/docs/_snippets/mock-context-create.md
+++ b/docs/_snippets/mock-context-create.md
@@ -13,4 +13,3 @@ const ProfilePageContext = createContext();
 
 export default ProfilePageContext;
 ```
-
diff --git a/docs/_snippets/mock-context-in-use.md b/docs/_snippets/mock-context-in-use.md
index 9176799db702..39fec5ba4a8c 100644
--- a/docs/_snippets/mock-context-in-use.md
+++ b/docs/_snippets/mock-context-in-use.md
@@ -33,4 +33,3 @@ export const ProfilePage = (props) => {
   );
 };
 ```
-
diff --git a/docs/_snippets/mock-provider-in-preview.md b/docs/_snippets/mock-provider-in-preview.md
index 2b13aa680e6d..31c0a23c9b91 100644
--- a/docs/_snippets/mock-provider-in-preview.md
+++ b/docs/_snippets/mock-provider-in-preview.md
@@ -48,4 +48,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/module-aliases-config.md b/docs/_snippets/module-aliases-config.md
index 354538305779..097285e63efd 100644
--- a/docs/_snippets/module-aliases-config.md
+++ b/docs/_snippets/module-aliases-config.md
@@ -101,4 +101,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/mount-advanced.md b/docs/_snippets/mount-advanced.md
index 7078b662914e..28059f865a20 100644
--- a/docs/_snippets/mount-advanced.md
+++ b/docs/_snippets/mount-advanced.md
@@ -8,7 +8,7 @@ export const Default: Story = {
     const canvas = await mount(
       // 👇 Pass data that is created inside of the play function to the component
       //   For example, a just-generated UUID
-      <Page {...args} params={{ id: String(note.id) }} />
+      <Page {...args} params={{ id: String(note.id) }} />,
     );
 
     await userEvent.click(await canvas.findByRole('menuitem', { name: /login to add/i }));
@@ -16,7 +16,7 @@ export const Default: Story = {
   argTypes: {
     // 👇 Make the params prop un-controllable, as the value is always overriden in the play function.
     params: { control: { disable: true } },
-  }
+  },
 };
 ```
 
@@ -30,7 +30,7 @@ export const Default = {
     const canvas = await mount(
       // 👇 Pass data that is created inside of the play function to the component
       //   For example, a just-generated UUID
-      <Page {...args} params={{ id: String(note.id) }} />
+      <Page {...args} params={{ id: String(note.id) }} />,
     );
 
     await userEvent.click(await canvas.findByRole('menuitem', { name: /login to add/i }));
@@ -38,7 +38,7 @@ export const Default = {
   argTypes: {
     // 👇 Make the params prop un-controllable, as the value is always overriden in the play function.
     params: { control: { disable: true } },
-  }
+  },
 };
 ```
 
@@ -53,7 +53,7 @@ export const Default: Story = {
       Page,
       // 👇 Pass data that is created inside of the play function to the component
       //   For example, a just-generated UUID
-      { props: { ...args, params: { id: String(note.id) } } }
+      { props: { ...args, params: { id: String(note.id) } } },
     );
 
     await userEvent.click(await canvas.findByRole('menuitem', { name: /login to add/i }));
@@ -61,7 +61,7 @@ export const Default: Story = {
   argTypes: {
     // 👇 Make the params prop un-controllable, as the value is always overriden in the play function.
     params: { control: { disable: true } },
-  }
+  },
 };
 ```
 
@@ -76,7 +76,7 @@ export const Default = {
       Page,
       // 👇 Pass data that is created inside of the play function to the component
       //   For example, a just-generated UUID
-      { props: { ...args, params: { id: String(note.id) } } }
+      { props: { ...args, params: { id: String(note.id) } } },
     );
 
     await userEvent.click(await canvas.findByRole('menuitem', { name: /login to add/i }));
@@ -84,7 +84,7 @@ export const Default = {
   argTypes: {
     // 👇 Make the params prop un-controllable, as the value is always overriden in the play function.
     params: { control: { disable: true } },
-  }
+  },
 };
 ```
 
@@ -99,7 +99,7 @@ export const Default: Story = {
       Page,
       // 👇 Pass data that is created inside of the play function to the component
       //   For example, a just-generated UUID
-      { props: { ...args, params: { id: String(note.id) } } }
+      { props: { ...args, params: { id: String(note.id) } } },
     );
 
     await userEvent.click(await canvas.findByRole('menuitem', { name: /login to add/i }));
@@ -107,7 +107,7 @@ export const Default: Story = {
   argTypes: {
     // 👇 Make the params prop un-controllable, as the value is always overriden in the play function.
     params: { control: { disable: true } },
-  }
+  },
 };
 ```
 
@@ -122,7 +122,7 @@ export const Default = {
       Page,
       // 👇 Pass data that is created inside of the play function to the component
       //   For example, a just-generated UUID
-      { props: { ...args, params: { id: String(note.id) } } }
+      { props: { ...args, params: { id: String(note.id) } } },
     );
 
     await userEvent.click(await canvas.findByRole('menuitem', { name: /login to add/i }));
@@ -130,6 +130,6 @@ export const Default = {
   argTypes: {
     // 👇 Make the params prop un-controllable, as the value is always overriden in the play function.
     params: { control: { disable: true } },
-  }
+  },
 };
 ```
diff --git a/docs/_snippets/msw-addon-configure-handlers-graphql.md b/docs/_snippets/msw-addon-configure-handlers-graphql.md
index e3a0b167f1fd..8d41807db3f2 100644
--- a/docs/_snippets/msw-addon-configure-handlers-graphql.md
+++ b/docs/_snippets/msw-addon-configure-handlers-graphql.md
@@ -1,4 +1,4 @@
-```ts filename="YourPage.stories.ts" renderer="angular" language="ts"
+```ts filename="YourPage.stories.ts" renderer="angular" language="ts" tabTitle="story"
 import type { Meta, StoryObj } from '@storybook/angular';
 import { moduleMetadata } from '@storybook/angular';
 
@@ -89,6 +89,45 @@ export const MockedError: Story = {
 };
 ```
 
+```ts filename="mock-graphql.module.ts" renderer="angular" language="ts" tabTitle="mock-apollo-module"
+import { NgModule } from '@angular/core';
+import { APOLLO_OPTIONS } from 'apollo-angular';
+
+import { ApolloClientOptions, InMemoryCache } from '@apollo/client/core';
+import { HttpLink } from 'apollo-angular/http';
+
+// See here for docs https://apollo-angular.com/docs/get-started
+
+const uri = 'https://your-graphql-endpoint';
+export function createApollo(httpLink: HttpLink): ApolloClientOptions<any> {
+  return {
+    link: httpLink.create({ uri }),
+    cache: new InMemoryCache(),
+    defaultOptions: {
+      watchQuery: {
+        fetchPolicy: 'no-cache',
+        errorPolicy: 'all',
+      },
+      query: {
+        fetchPolicy: 'no-cache',
+        errorPolicy: 'all',
+      },
+    },
+  };
+}
+
+@NgModule({
+  providers: [
+    {
+      provide: APOLLO_OPTIONS,
+      useFactory: createApollo,
+      deps: [HttpLink],
+    },
+  ],
+})
+export class MockGraphQLModule {}
+```
+
 ```js filename="YourPage.stories.js|jsx" renderer="react" language="js"
 import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
 import { graphql, HttpResponse, delay } from 'msw';
@@ -255,7 +294,7 @@ export const MockedSuccess: Story = {
               allInfo: {
                 ...TestData,
               },
-            }
+            },
           });
         }),
       ],
@@ -354,7 +393,7 @@ export const MockedSuccess: Story = {
               allInfo: {
                 ...TestData,
               },
-            }
+            },
           });
         }),
       ],
@@ -382,7 +421,7 @@ export const MockedError: Story = {
 };
 ```
 
-```js filename="YourPage.stories.js" renderer="svelte" language="js"
+```js filename="YourPage.stories.js" renderer="svelte" language="js" tabTitle="story"
 import { graphql, HttpResponse, delay } from 'msw';
 
 import MockApolloWrapperClient from './MockApolloWrapperClient.svelte';
@@ -456,7 +495,33 @@ export const MockedError = {
 };
 ```
 
-```ts filename="YourPage.stories.ts" renderer="svelte" language="ts-4-9"
+```svelte filename="MockApolloWrapperClient.svelte" renderer="svelte" language="js" tabTitle="apollo-wrapper-component"
+<script>
+  import { ApolloClient, InMemoryCache } from '@apollo/client';
+
+  import { setClient } from 'svelte-apollo';
+
+  const mockedClient = new ApolloClient({
+    uri: 'https://your-graphql-endpoint',
+    cache: new InMemoryCache(),
+    defaultOptions: {
+      watchQuery: {
+        fetchPolicy: 'no-cache',
+        errorPolicy: 'all',
+      },
+      query: {
+        fetchPolicy: 'no-cache',
+        errorPolicy: 'all',
+      },
+    },
+  });
+  setClient(mockedClient);
+</script>
+
+<slot />
+```
+
+```ts filename="YourPage.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="story"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import { graphql, HttpResponse, delay } from 'msw';
@@ -535,7 +600,33 @@ export const MockedError: Story = {
 };
 ```
 
-```ts filename="YourPage.stories.ts" renderer="svelte" language="ts"
+```svelte filename="MockApolloWrapperClient.svelte" renderer="svelte" language="ts-4-9" tabTitle="apollo-wrapper-component"
+<script lang="ts">
+  import { ApolloClient, InMemoryCache } from '@apollo/client';
+
+  import { setClient } from 'svelte-apollo';
+
+  const mockedClient = new ApolloClient({
+    uri: 'https://your-graphql-endpoint',
+    cache: new InMemoryCache(),
+    defaultOptions: {
+      watchQuery: {
+        fetchPolicy: 'no-cache',
+        errorPolicy: 'all',
+      },
+      query: {
+        fetchPolicy: 'no-cache',
+        errorPolicy: 'all',
+      },
+    },
+  });
+  setClient(mockedClient);
+</script>
+
+<slot />
+```
+
+```ts filename="YourPage.stories.ts" renderer="svelte" language="ts" tabTitle="story"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import { graphql, HttpResponse, delay } from 'msw';
@@ -614,7 +705,33 @@ export const MockedError: Story = {
 };
 ```
 
-```js filename="YourPage.stories.js" renderer="vue" language="js"
+```svelte filename="MockApolloWrapperClient.svelte" renderer="svelte" language="ts" tabTitle="apollo-wrapper-component"
+<script lang="ts">
+  import { ApolloClient, InMemoryCache } from '@apollo/client';
+
+  import { setClient } from 'svelte-apollo';
+
+  const mockedClient = new ApolloClient({
+    uri: 'https://your-graphql-endpoint',
+    cache: new InMemoryCache(),
+    defaultOptions: {
+      watchQuery: {
+        fetchPolicy: 'no-cache',
+        errorPolicy: 'all',
+      },
+      query: {
+        fetchPolicy: 'no-cache',
+        errorPolicy: 'all',
+      },
+    },
+  });
+  setClient(mockedClient);
+</script>
+
+<slot />
+```
+
+```js filename="YourPage.stories.js" renderer="vue" language="js" tabTitle="story"
 import { graphql, HttpResponse, delay } from 'msw';
 
 import WrapperComponent from './ApolloWrapperClient.vue';
@@ -691,7 +808,47 @@ export const MockedError = {
 };
 ```
 
-```ts filename="YourPage.stories.ts" renderer="vue" language="ts-4-9"
+```html filename="ApolloWrapperClient.vue" renderer="vue" language="js" tabTitle="apollo-wrapper-component"
+<template>
+  <div><slot /></div>
+</template>
+
+<script>
+  import { defineComponent, provide } from 'vue';
+  import { DefaultApolloClient } from '@vue/apollo-composable';
+  import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core';
+
+  // Apollo client wrapper component that can be used within your app and Storybook
+  export default defineComponent({
+    name: 'WrapperComponent',
+    setup() {
+      const httpLink = createHttpLink({
+        // You should use an absolute URL here
+        uri: 'https://your-graphql-endpoint',
+      });
+      const cache = new InMemoryCache();
+
+      const mockedClient = new ApolloClient({
+        link: httpLink,
+        cache,
+        defaultOptions: {
+          watchQuery: {
+            fetchPolicy: 'no-cache',
+            errorPolicy: 'all',
+          },
+          query: {
+            fetchPolicy: 'no-cache',
+            errorPolicy: 'all',
+          },
+        },
+      });
+      provide(DefaultApolloClient, mockedClient);
+    },
+  });
+</script>
+```
+
+```ts filename="YourPage.stories.ts" renderer="vue" language="ts-4-9" tabTitle="story"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import { graphql, HttpResponse, delay } from 'msw';
@@ -773,7 +930,47 @@ export const MockedError: Story = {
 };
 ```
 
-```ts filename="YourPage.stories.ts" renderer="vue" language="ts"
+```html filename="ApolloWrapperClient.vue" renderer="vue" language="ts-4-9" tabTitle="apollo-wrapper-component"
+<template>
+  <div><slot /></div>
+</template>
+
+<script>
+  import { defineComponent, provide } from 'vue';
+  import { DefaultApolloClient } from '@vue/apollo-composable';
+  import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core';
+
+  // Apollo client wrapper component that can be used within your app and Storybook
+  export default defineComponent({
+    name: 'WrapperComponent',
+    setup() {
+      const httpLink = createHttpLink({
+        // You should use an absolute URL here
+        uri: 'https://your-graphql-endpoint',
+      });
+      const cache = new InMemoryCache();
+
+      const mockedClient = new ApolloClient({
+        link: httpLink,
+        cache,
+        defaultOptions: {
+          watchQuery: {
+            fetchPolicy: 'no-cache',
+            errorPolicy: 'all',
+          },
+          query: {
+            fetchPolicy: 'no-cache',
+            errorPolicy: 'all',
+          },
+        },
+      });
+      provide(DefaultApolloClient, mockedClient);
+    },
+  });
+</script>
+```
+
+```ts filename="YourPage.stories.ts" renderer="vue" language="ts" tabTitle="story"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import { graphql, HttpResponse, delay } from 'msw';
@@ -855,3 +1052,42 @@ export const MockedError: Story = {
 };
 ```
 
+```html filename="ApolloWrapperClient.vue" renderer="vue" language="ts" tabTitle="apollo-wrapper-component"
+<template>
+  <div><slot /></div>
+</template>
+
+<script>
+  import { defineComponent, provide } from 'vue';
+  import { DefaultApolloClient } from '@vue/apollo-composable';
+  import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client/core';
+
+  // Apollo client wrapper component that can be used within your app and Storybook
+  export default defineComponent({
+    name: 'WrapperComponent',
+    setup() {
+      const httpLink = createHttpLink({
+        // You should use an absolute URL here
+        uri: 'https://your-graphql-endpoint',
+      });
+      const cache = new InMemoryCache();
+
+      const mockedClient = new ApolloClient({
+        link: httpLink,
+        cache,
+        defaultOptions: {
+          watchQuery: {
+            fetchPolicy: 'no-cache',
+            errorPolicy: 'all',
+          },
+          query: {
+            fetchPolicy: 'no-cache',
+            errorPolicy: 'all',
+          },
+        },
+      });
+      provide(DefaultApolloClient, mockedClient);
+    },
+  });
+</script>
+```
diff --git a/docs/_snippets/msw-addon-configure-handlers-http.md b/docs/_snippets/msw-addon-configure-handlers-http.md
index 91686558edbc..9065d22fe3d6 100644
--- a/docs/_snippets/msw-addon-configure-handlers-http.md
+++ b/docs/_snippets/msw-addon-configure-handlers-http.md
@@ -387,4 +387,3 @@ export const MockedError: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/msw-addon-initialize.md b/docs/_snippets/msw-addon-initialize.md
index 71889c968f8e..af8abd264fd0 100644
--- a/docs/_snippets/msw-addon-initialize.md
+++ b/docs/_snippets/msw-addon-initialize.md
@@ -34,4 +34,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/msw-addon-install.md b/docs/_snippets/msw-addon-install.md
index 72ee2a6fc2b0..2f9ce9a5f725 100644
--- a/docs/_snippets/msw-addon-install.md
+++ b/docs/_snippets/msw-addon-install.md
@@ -9,4 +9,3 @@ pnpm add msw msw-storybook-addon --save-dev
 ```sh renderer="common" language="js" packageManager="yarn"
 yarn add msw msw-storybook-addon --save-dev
 ```
-
diff --git a/docs/_snippets/msw-generate-service-worker.md b/docs/_snippets/msw-generate-service-worker.md
index 805ac7374b54..d8fdbeb6914d 100644
--- a/docs/_snippets/msw-generate-service-worker.md
+++ b/docs/_snippets/msw-generate-service-worker.md
@@ -1,8 +1,11 @@
-```shell renderer="common" language="js" packageManager="npx"
+```shell renderer="common" language="js" packageManager="npm"
 npx msw init public/
 ```
 
+```shell renderer="common" language="js" packageManager="yarn"
+yarn dlx msw init public/
+```
+
 ```shell renderer="common" language="js" packageManager="pnpm"
 pnpm dlx msw init public/
 ```
-
diff --git a/docs/_snippets/multiple-stories-test.md b/docs/_snippets/multiple-stories-test.md
index 5610d4c144cd..583b315863ef 100644
--- a/docs/_snippets/multiple-stories-test.md
+++ b/docs/_snippets/multiple-stories-test.md
@@ -70,7 +70,7 @@ test('Tests filled form', async () => {
 });
 ```
 
-```js filename="tests/Form.test.js" renderer="vue" language="js" tabTitle="3"
+```js filename="tests/Form.test.js" renderer="vue" language="js"
 import { fireEvent, screen } from '@testing-library/vue';
 
 import { composeStories } from '@storybook/vue3';
@@ -106,7 +106,7 @@ test('Tests filled form', async () => {
 });
 ```
 
-```ts filename="tests/Form.test.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="tests/Form.test.ts" renderer="vue" language="ts"
 import { fireEvent, screen } from '@testing-library/vue';
 
 import { composeStories } from '@storybook/vue3';
diff --git a/docs/_snippets/my-component-disable-toc.md b/docs/_snippets/my-component-disable-toc.md
index 57ce09e8074c..a9f684807f7c 100644
--- a/docs/_snippets/my-component-disable-toc.md
+++ b/docs/_snippets/my-component-disable-toc.md
@@ -18,7 +18,43 @@ const meta: Meta<MyComponent> = {
 export default meta;
 ```
 
-```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+    tags: ['autodocs'],
+    parameters: {
+      docs: {
+        toc: {
+          disable: true, // 👈 Disables the table of contents
+        },
+      },
+    },
+  });
+</script>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import MyComponent from './MyComponent.svelte';
+
+export default {
+  component: MyComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      toc: {
+        disable: true, // 👈 Disables the table of contents
+      },
+    },
+  },
+};
+```
+
+```js filename="MyComponent.stories.js" renderer="common" language="js"
 import { MyComponent } from './MyComponent';
 
 export default {
@@ -34,6 +70,46 @@ export default {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+    tags: ['autodocs'],
+    parameters: {
+      docs: {
+        toc: {
+          disable: true, // 👈 Disables the table of contents
+        },
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta = {
+  component: MyComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      toc: {
+        disable: true, // 👈 Disables the table of contents
+      },
+    },
+  },
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -55,6 +131,46 @@ const meta = {
 export default meta;
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+    tags: ['autodocs'],
+    parameters: {
+      docs: {
+        toc: {
+          disable: true, // 👈 Disables the table of contents
+        },
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      toc: {
+        disable: true, // 👈 Disables the table of contents
+      },
+    },
+  },
+};
+
+export default meta;
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -107,4 +223,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/my-component-env-var-config.md b/docs/_snippets/my-component-env-var-config.md
index 538423a21e2b..d5e9bcb77e11 100644
--- a/docs/_snippets/my-component-env-var-config.md
+++ b/docs/_snippets/my-component-env-var-config.md
@@ -100,4 +100,3 @@ export const Default: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/my-component-exclude-tags.md b/docs/_snippets/my-component-exclude-tags.md
index 3b0c9f6a007d..58768d7023bd 100644
--- a/docs/_snippets/my-component-exclude-tags.md
+++ b/docs/_snippets/my-component-exclude-tags.md
@@ -31,4 +31,3 @@ export const ExcludeStory: Story = {
   tags: ['no-tests'],
 };
 ```
-
diff --git a/docs/_snippets/my-component-include-tags.md b/docs/_snippets/my-component-include-tags.md
index c77da4a37f0c..29a3b0b1bf83 100644
--- a/docs/_snippets/my-component-include-tags.md
+++ b/docs/_snippets/my-component-include-tags.md
@@ -31,4 +31,3 @@ export const IncludeStory: Story = {
   tags: ['test-only'],
 };
 ```
-
diff --git a/docs/_snippets/my-component-play-function-alt-queries.md b/docs/_snippets/my-component-play-function-alt-queries.md
index 6a729e8f8d5e..4145c3cd2acc 100644
--- a/docs/_snippets/my-component-play-function-alt-queries.md
+++ b/docs/_snippets/my-component-play-function-alt-queries.md
@@ -26,6 +26,55 @@ export const ExampleWithRole: Story = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<!--
+  See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+  to learn more about using the canvasElement to query the DOM
+-->
+<Story
+  name="ExampleWithRole"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button', { name: / button label/i }));
+  }} />
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+export default {
+  component: MyComponent,
+};
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const ExampleWithRole = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button', { name: / button label/i }));
+  },
+};
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
 import { userEvent, within } from '@storybook/test';
 
@@ -48,6 +97,60 @@ export const ExampleWithRole = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<!--
+  See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+  to learn more about using the canvasElement to query the DOM
+-->
+<Story
+  name="ExampleWithRole"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button', { name: / button label/i }));
+  }} />
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const ExampleWithRole: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button', { name: / button label/i }));
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -76,6 +179,60 @@ export const ExampleWithRole: Story = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<!--
+  See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+  to learn more about using the canvasElement to query the DOM
+-->
+<Story
+  name="ExampleWithRole"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button', { name: / button label/i }));
+  }} />
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const ExampleWithRole: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button', { name: / button label/i }));
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -147,4 +304,3 @@ export const ExampleWithRole: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/my-component-play-function-composition.md b/docs/_snippets/my-component-play-function-composition.md
index e3239b113329..1a02d5dbaba4 100644
--- a/docs/_snippets/my-component-play-function-composition.md
+++ b/docs/_snippets/my-component-play-function-composition.md
@@ -260,4 +260,3 @@ export const CombinedStories: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/my-component-play-function-query-findby.md b/docs/_snippets/my-component-play-function-query-findby.md
index 8ea6145a24ea..b3835f17926e 100644
--- a/docs/_snippets/my-component-play-function-query-findby.md
+++ b/docs/_snippets/my-component-play-function-query-findby.md
@@ -28,6 +28,59 @@ export const AsyncExample: Story = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<!--
+  See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+  to learn more about using the canvasElement to query the DOM
+-->
+<Story
+  name="AsyncExample"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Other steps
+
+    // Waits for the component to be rendered before querying the element
+    await canvas.findByRole('button', { name: / button label/i });
+  }} />
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+export default {
+  component: MyComponent,
+};
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const AsyncExample = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Other steps
+
+    // Waits for the component to be rendered before querying the element
+    await canvas.findByRole('button', { name: / button label/i });
+  },
+};
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
 import { userEvent, within } from '@storybook/test';
 
@@ -47,7 +100,65 @@ export const AsyncExample = {
     // Other steps
 
     // Waits for the component to be rendered before querying the element
-    await canvas.findByRole('button', { name: / button label/i }));
+    await canvas.findByRole('button', { name: / button label/i });
+  },
+};
+```
+
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<!--
+  See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+  to learn more about using the canvasElement to query the DOM
+-->
+<Story
+  name="AsyncExample"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Other steps
+
+    // Waits for the component to be rendered before querying the element
+    await canvas.findByRole('button', { name: / button label/i });
+  }} />
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const AsyncExample: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Other steps
+
+    // Waits for the component to be rendered before querying the element
+    await canvas.findByRole('button', { name: / button label/i });
   },
 };
 ```
@@ -82,6 +193,64 @@ export const AsyncExample: Story = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<!--
+  See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+  to learn more about using the canvasElement to query the DOM
+-->
+<Story
+  name="AsyncExample"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Other steps
+
+    // Waits for the component to be rendered before querying the element
+    await canvas.findByRole('button', { name: / button label/i });
+  }} />
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const AsyncExample: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Other steps
+
+    // Waits for the component to be rendered before querying the element
+    await canvas.findByRole('button', { name: / button label/i });
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -129,7 +298,7 @@ export const AsyncExample = {
     // Other steps
 
     // Waits for the component to be rendered before querying the element
-    await canvas.findByRole('button', { name: / button label/i }));
+    await canvas.findByRole('button', { name: / button label/i });
   },
 };
 ```
@@ -159,4 +328,3 @@ export const AsyncExample: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/my-component-play-function-waitfor.md b/docs/_snippets/my-component-play-function-waitfor.md
index df40859aed4f..195096524fba 100644
--- a/docs/_snippets/my-component-play-function-waitfor.md
+++ b/docs/_snippets/my-component-play-function-waitfor.md
@@ -39,6 +39,81 @@ export const ExampleAsyncStory: Story = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, waitFor, within } from '@storybook/test';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<!--
+  See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+  to learn more about using the canvasElement to query the DOM
+-->
+<Story
+  name="ExampleAsyncStory"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const Input = canvas.getByLabelText('Username', {
+      selector: 'input',
+    });
+
+    await userEvent.type(Input, 'WrongInput', {
+      delay: 100,
+    });
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const Submit = canvas.getByRole('button');
+    await userEvent.click(Submit);
+
+    await waitFor(async () => {
+      await userEvent.hover(canvas.getByTestId('error'));
+    });
+  }} />
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import { userEvent, waitFor, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+export default {
+  component: MyComponent,
+};
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const ExampleAsyncStory = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const Input = canvas.getByLabelText('Username', {
+      selector: 'input',
+    });
+
+    await userEvent.type(Input, 'WrongInput', {
+      delay: 100,
+    });
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const Submit = canvas.getByRole('button');
+    await userEvent.click(Submit);
+
+    await waitFor(async () => {
+      await userEvent.hover(canvas.getByTestId('error'));
+    });
+  },
+};
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
 import { userEvent, waitFor, within } from '@storybook/test';
 
@@ -74,6 +149,86 @@ export const ExampleAsyncStory = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, waitFor, within } from '@storybook/test';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<!--
+  See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+  to learn more about using the canvasElement to query the DOM
+-->
+<Story
+  name="ExampleAsyncStory"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const Input = canvas.getByLabelText('Username', {
+      selector: 'input',
+    });
+
+    await userEvent.type(Input, 'WrongInput', {
+      delay: 100,
+    });
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const Submit = canvas.getByRole('button');
+    await userEvent.click(Submit);
+
+    await waitFor(async () => {
+      await userEvent.hover(canvas.getByTestId('error'));
+    });
+  }} />
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, waitFor, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const ExampleAsyncStory: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const Input = canvas.getByLabelText('Username', {
+      selector: 'input',
+    });
+
+    await userEvent.type(Input, 'WrongInput', {
+      delay: 100,
+    });
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const Submit = canvas.getByRole('button');
+    await userEvent.click(Submit);
+
+    await waitFor(async () => {
+      await userEvent.hover(canvas.getByTestId('error'));
+    });
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -115,6 +270,86 @@ export const ExampleAsyncStory: Story = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, waitFor, within } from '@storybook/test';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<!--
+  See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+  to learn more about using the canvasElement to query the DOM
+-->
+<Story
+  name="ExampleAsyncStory"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const Input = canvas.getByLabelText('Username', {
+      selector: 'input',
+    });
+
+    await userEvent.type(Input, 'WrongInput', {
+      delay: 100,
+    });
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const Submit = canvas.getByRole('button');
+    await userEvent.click(Submit);
+
+    await waitFor(async () => {
+      await userEvent.hover(canvas.getByTestId('error'));
+    });
+  }} />
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, waitFor, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const ExampleAsyncStory: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const Input = canvas.getByLabelText('Username', {
+      selector: 'input',
+    });
+
+    await userEvent.type(Input, 'WrongInput', {
+      delay: 100,
+    });
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const Submit = canvas.getByRole('button');
+    await userEvent.click(Submit);
+
+    await waitFor(async () => {
+      await userEvent.hover(canvas.getByTestId('error'));
+    });
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -225,4 +460,3 @@ export const ExampleAsyncStory: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/my-component-play-function-with-canvas.md b/docs/_snippets/my-component-play-function-with-canvas.md
index d37ff14e0301..7d44ad477a74 100644
--- a/docs/_snippets/my-component-play-function-with-canvas.md
+++ b/docs/_snippets/my-component-play-function-with-canvas.md
@@ -24,6 +24,56 @@ export const ExampleStory: Story = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<!--
+  See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+  to learn more about using the canvasElement to query the DOM
+-->
+<Story
+  name="ExampleStory"
+  play={async ({ canvasElement }) => {
+    // Assigns canvas to the component root element
+    const canvas = within(canvasElement);
+
+    // Starts querying from the component's root element
+    await userEvent.type(canvas.getByTestId('example-element'), 'something');
+    await userEvent.click(canvas.getByRole('another-element'));
+  }} />
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+export default {
+  component: MyComponent,
+};
+
+export const ExampleStory = {
+  play: async ({ canvasElement }) => {
+    // Assigns canvas to the component root element
+    const canvas = within(canvasElement);
+
+    // Starts querying from the component's root element
+    await userEvent.type(canvas.getByTestId('example-element'), 'something');
+    await userEvent.click(canvas.getByRole('another-element'));
+  },
+};
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
 import { userEvent, within } from '@storybook/test';
 
@@ -45,6 +95,57 @@ export const ExampleStory = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="ExampleStory"
+  play={async ({ canvasElement }) => {
+    // Assigns canvas to the component root element
+    const canvas = within(canvasElement);
+
+    // Starts querying from the component's root element
+    await userEvent.type(canvas.getByTestId('example-element'), 'something');
+    await userEvent.click(canvas.getByRole('another-element'));
+  }} />
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ExampleStory: Story = {
+  play: async ({ canvasElement }) => {
+    // Assigns canvas to the component root element
+    const canvas = within(canvasElement);
+
+    // Starts querying from the component's root element
+    await userEvent.type(canvas.getByTestId('example-element'), 'something');
+    await userEvent.click(canvas.getByRole('another-element'));
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -72,6 +173,56 @@ export const ExampleStory: Story = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { userEvent, within } from '@storybook/test';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="ExampleStory"
+  play={async ({ canvasElement }) => {
+    // Assigns canvas to the component root element
+    const canvas = within(canvasElement);
+
+    // Starts querying from the component's root element
+    await userEvent.type(canvas.getByTestId('example-element'), 'something');
+    await userEvent.click(canvas.getByRole('another-element'));
+  }} />
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+export const ExampleStory: Story = {
+  play: async ({ canvasElement }) => {
+    // Assigns canvas to the component root element
+    const canvas = within(canvasElement);
+
+    // Starts querying from the component's root element
+    await userEvent.type(canvas.getByTestId('example-element'), 'something');
+    await userEvent.click(canvas.getByRole('another-element'));
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -140,4 +291,3 @@ export const ExampleStory: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/my-component-play-function-with-clickevent.md b/docs/_snippets/my-component-play-function-with-clickevent.md
index af4f3789f540..bf4b5b8c47fa 100644
--- a/docs/_snippets/my-component-play-function-with-clickevent.md
+++ b/docs/_snippets/my-component-play-function-with-clickevent.md
@@ -35,6 +35,75 @@ export const FireEventExample: Story = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { fireEvent, userEvent, within } from '@storybook/test';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<!--
+  See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+  to learn more about using the canvasElement to query the DOM
+-->
+<Story
+  name="ClickExample"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button'));
+  }}
+/>
+
+<Story
+  name="FireEventExample"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await fireEvent.click(canvas.getByTestId('data-testid'));
+  }}
+/>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import { fireEvent, userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+export default {
+  component: MyComponent,
+};
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const ClickExample = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button'));
+  },
+};
+
+export const FireEventExample = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await fireEvent.click(canvas.getByTestId('data-testid'));
+  },
+};
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
 import { fireEvent, userEvent, within } from '@storybook/test';
 
@@ -66,6 +135,80 @@ export const FireEventExample = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { fireEvent, userEvent, within } from '@storybook/test';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<!--
+  See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+  to learn more about using the canvasElement to query the DOM
+-->
+<Story
+  name="ClickExample"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button'));
+  }}
+/>
+
+<Story
+  name="FireEventExample"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await fireEvent.click(canvas.getByTestId('data-testid'));
+  }}
+/>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { fireEvent, userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const ClickExample: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button'));
+  },
+};
+
+export const FireEventExample: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await fireEvent.click(canvas.getByTestId('data-testid'));
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -103,6 +246,80 @@ export const FireEventExample: Story = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { fireEvent, userEvent, within } from '@storybook/test';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<!--
+  See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+  to learn more about using the canvasElement to query the DOM
+-->
+<Story
+  name="ClickExample"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button'));
+  }}
+/>
+
+<Story
+  name="FireEventExample"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await fireEvent.click(canvas.getByTestId('data-testid'));
+  }}
+/>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { fireEvent, userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const ClickExample: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button'));
+  },
+};
+
+export const FireEventExample: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await fireEvent.click(canvas.getByTestId('data-testid'));
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -201,4 +418,3 @@ export const FireEventExample: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/my-component-play-function-with-delay.md b/docs/_snippets/my-component-play-function-with-delay.md
index 84b02a17e028..e4fd3ac06338 100644
--- a/docs/_snippets/my-component-play-function-with-delay.md
+++ b/docs/_snippets/my-component-play-function-with-delay.md
@@ -35,6 +35,74 @@ export const DelayedStory: Story = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<!--
+  See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+  to learn more about using the canvasElement to query the DOM
+-->
+<Story
+  name="DelayedStory"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const exampleElement = canvas.getByLabelText('example-element');
+
+    // The delay option sets the amount of milliseconds between characters being typed
+    await userEvent.type(exampleElement, 'random string', {
+      delay: 100,
+    });
+
+    const AnotherExampleElement = canvas.getByLabelText('another-example-element');
+    await userEvent.type(AnotherExampleElement, 'another random string', {
+      delay: 100,
+    });
+  }}
+/>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+export default {
+  component: MyComponent,
+};
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const DelayedStory = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const exampleElement = canvas.getByLabelText('example-element');
+
+    // The delay option sets the amount of milliseconds between characters being typed
+    await userEvent.type(exampleElement, 'random string', {
+      delay: 100,
+    });
+
+    const AnotherExampleElement = canvas.getByLabelText('another-example-element');
+    await userEvent.type(AnotherExampleElement, 'another random string', {
+      delay: 100,
+    });
+  },
+};
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
 import { userEvent, within } from '@storybook/test';
 
@@ -66,6 +134,79 @@ export const DelayedStory = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<!--
+  See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+  to learn more about using the canvasElement to query the DOM
+-->
+<Story
+  name="DelayedStory"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const exampleElement = canvas.getByLabelText('example-element');
+
+    // The delay option sets the amount of milliseconds between characters being typed
+    await userEvent.type(exampleElement, 'random string', {
+      delay: 100,
+    });
+
+    const AnotherExampleElement = canvas.getByLabelText('another-example-element');
+    await userEvent.type(AnotherExampleElement, 'another random string', {
+      delay: 100,
+    });
+  }}
+/>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const DelayedStory: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const exampleElement = canvas.getByLabelText('example-element');
+
+    // The delay option sets the amount of milliseconds between characters being typed
+    await userEvent.type(exampleElement, 'random string', {
+      delay: 100,
+    });
+
+    const AnotherExampleElement = canvas.getByLabelText('another-example-element');
+    await userEvent.type(AnotherExampleElement, 'another random string', {
+      delay: 100,
+    });
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -103,6 +244,79 @@ export const DelayedStory: Story = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<!--
+  See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+  to learn more about using the canvasElement to query the DOM
+-->
+<Story
+  name="DelayedStory"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const exampleElement = canvas.getByLabelText('example-element');
+
+    // The delay option sets the amount of milliseconds between characters being typed
+    await userEvent.type(exampleElement, 'random string', {
+      delay: 100,
+    });
+
+    const AnotherExampleElement = canvas.getByLabelText('another-example-element');
+    await userEvent.type(AnotherExampleElement, 'another random string', {
+      delay: 100,
+    });
+  }}
+/>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const DelayedStory: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const exampleElement = canvas.getByLabelText('example-element');
+
+    // The delay option sets the amount of milliseconds between characters being typed
+    await userEvent.type(exampleElement, 'random string', {
+      delay: 100,
+    });
+
+    const AnotherExampleElement = canvas.getByLabelText('another-example-element');
+    await userEvent.type(AnotherExampleElement, 'another random string', {
+      delay: 100,
+    });
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -201,4 +415,3 @@ export const DelayedStory: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/my-component-play-function-with-selectevent.md b/docs/_snippets/my-component-play-function-with-selectevent.md
index b8269e99687c..1892f1790d47 100644
--- a/docs/_snippets/my-component-play-function-with-selectevent.md
+++ b/docs/_snippets/my-component-play-function-with-selectevent.md
@@ -38,6 +38,79 @@ export const ExampleChangeEvent: Story = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+
+  function sleep(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+</script>
+
+<!--
+  See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+  to learn more about using the canvasElement to query the DOM
+-->
+<Story
+  name="ExampleChangeEvent"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByRole('listbox');
+
+    await userEvent.selectOptions(select, ['One Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Another Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Yet another item']);
+  }}
+/>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+export default {
+  component: MyComponent,
+};
+
+// Function to emulate pausing between interactions
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const ExampleChangeEvent = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByRole('listbox');
+
+    await userEvent.selectOptions(select, ['One Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Another Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Yet another item']);
+  },
+};
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
 import { userEvent, within } from '@storybook/test';
 
@@ -72,6 +145,84 @@ export const ExampleChangeEvent = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+
+  function sleep(ms: number) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+</script>
+
+<!--
+  See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+  to learn more about using the canvasElement to query the DOM
+-->
+<Story
+  name="ExampleChangeEvent"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByRole('listbox');
+
+    await userEvent.selectOptions(select, ['One Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Another Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Yet another item']);
+  }}
+/>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Function to emulate pausing between interactions
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const ExampleChangeEvent: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByRole('listbox');
+
+    await userEvent.selectOptions(select, ['One Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Another Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Yet another item']);
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -112,6 +263,85 @@ export const ExampleChangeEvent: Story = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+
+  function sleep(ms: number) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+</script>
+
+
+<!--
+  See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+  to learn more about using the canvasElement to query the DOM
+-->
+<Story
+  name="ExampleChangeEvent"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByRole('listbox');
+
+    await userEvent.selectOptions(select, ['One Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Another Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Yet another item']);
+  }}
+/>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, within } from '@storybook/test';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+// Function to emulate pausing between interactions
+function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/* See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const ExampleChangeEvent: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByRole('listbox');
+
+    await userEvent.selectOptions(select, ['One Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Another Item']);
+    await sleep(2000);
+
+    await userEvent.selectOptions(select, ['Yet another item']);
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -219,4 +449,3 @@ export const ExampleChangeEvent: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/my-component-skip-tags.md b/docs/_snippets/my-component-skip-tags.md
index 507cd09a91b4..5134cf9e0422 100644
--- a/docs/_snippets/my-component-skip-tags.md
+++ b/docs/_snippets/my-component-skip-tags.md
@@ -31,4 +31,3 @@ export const SkipStory: Story = {
   tags: ['skip-test'],
 };
 ```
-
diff --git a/docs/_snippets/my-component-story-basic-and-props.md b/docs/_snippets/my-component-story-basic-and-props.md
index 42ac3f0c5f1d..c4ad00503ea3 100644
--- a/docs/_snippets/my-component-story-basic-and-props.md
+++ b/docs/_snippets/my-component-story-basic-and-props.md
@@ -125,7 +125,27 @@ export const WithProp: Story = {
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story name="Basic">
+  <MyComponent />
+</Story>
+
+<Story name="WithProp">
+  <MyComponent prop="value" />
+</Story>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import MyComponent from './MyComponent.svelte';
 
 export default {
@@ -149,12 +169,15 @@ export const WithProp = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* MyComponent.stories.svelte */}
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-<script>
-  import { Meta, Story } from '@storybook/addon-svelte-csf';
   import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
 </script>
 
 <Story name="Basic">
@@ -166,7 +189,7 @@ export const WithProp = {
 </Story>
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import MyComponent from './MyComponent.svelte';
@@ -195,7 +218,27 @@ export const WithProp: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story name="Basic">
+  <MyComponent />
+</Story>
+
+<Story name="WithProp">
+  <MyComponent prop="value" />
+</Story>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import MyComponent from './MyComponent.svelte';
@@ -333,4 +376,3 @@ export const WithProp: Story = {
   render: () => html`<my-component prop="value" />`,
 };
 ```
-
diff --git a/docs/_snippets/my-component-story-import-json.md b/docs/_snippets/my-component-story-import-json.md
index c4efc85f6930..d2fa224234f3 100644
--- a/docs/_snippets/my-component-story-import-json.md
+++ b/docs/_snippets/my-component-story-import-json.md
@@ -2,4 +2,3 @@
 // This will automatically be parsed to the contents of `data.json`
 import data from './data.json';
 ```
-
diff --git a/docs/_snippets/my-component-story-import-static-asset.md b/docs/_snippets/my-component-story-import-static-asset.md
index 5137ad370627..07a392841c0f 100644
--- a/docs/_snippets/my-component-story-import-static-asset.md
+++ b/docs/_snippets/my-component-story-import-static-asset.md
@@ -3,4 +3,3 @@
 // And return a path to be included in a src attribute
 import imageFile from './static/image.png';
 ```
-
diff --git a/docs/_snippets/my-component-story-mandatory-export.md b/docs/_snippets/my-component-story-mandatory-export.md
index 0bc760cbec91..2e49f0c50359 100644
--- a/docs/_snippets/my-component-story-mandatory-export.md
+++ b/docs/_snippets/my-component-story-mandatory-export.md
@@ -93,4 +93,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/my-component-story-use-globaltype.md b/docs/_snippets/my-component-story-use-globaltype.md
index 91aeace22707..d1904249e559 100644
--- a/docs/_snippets/my-component-story-use-globaltype.md
+++ b/docs/_snippets/my-component-story-use-globaltype.md
@@ -523,4 +523,3 @@ export const StoryWithLocale: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/my-component-story-with-nonstory.md b/docs/_snippets/my-component-story-with-nonstory.md
index 0751ca526403..f581820552e4 100644
--- a/docs/_snippets/my-component-story-with-nonstory.md
+++ b/docs/_snippets/my-component-story-with-nonstory.md
@@ -445,4 +445,3 @@ export const ComplexStory: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/my-component-story-with-storyname.md b/docs/_snippets/my-component-story-with-storyname.md
index 8f14f67391bc..8a37ebaa137f 100644
--- a/docs/_snippets/my-component-story-with-storyname.md
+++ b/docs/_snippets/my-component-story-with-storyname.md
@@ -99,4 +99,3 @@ export const Simple: Story = {
   parameters: {},
 };
 ```
-
diff --git a/docs/_snippets/my-component-story.md b/docs/_snippets/my-component-story.md
index c3b2872582fc..ef4056b6c598 100644
--- a/docs/_snippets/my-component-story.md
+++ b/docs/_snippets/my-component-story.md
@@ -12,4 +12,3 @@ export default {
 
 // Your stories
 ```
-
diff --git a/docs/_snippets/my-component-vite-env-variables.md b/docs/_snippets/my-component-vite-env-variables.md
index 8b72972f0f83..d3b873cdac1d 100644
--- a/docs/_snippets/my-component-vite-env-variables.md
+++ b/docs/_snippets/my-component-vite-env-variables.md
@@ -1,3 +1,38 @@
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="ExampleStory"
+  args={{
+    propertyA: import.meta.env.STORYBOOK_DATA_KEY,
+    propertyB: import.meta.env.VITE_CUSTOM_VAR,
+  }}
+/>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import MyComponent from './MyComponent.svelte';
+
+export default {
+  component: MyComponent,
+};
+
+export const ExampleStory = {
+  args: {
+    propertyA: import.meta.env.STORYBOOK_DATA_KEY,
+    propertyB: import.meta.env.VITE_CUSTOM_VAR,
+  },
+};
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
 import { MyComponent } from './MyComponent';
 
@@ -13,6 +48,46 @@ export const ExampleStory = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="ExampleStory"
+  args={{
+    propertyA: import.meta.env.STORYBOOK_DATA_KEY,
+    propertyB: import.meta.env.VITE_CUSTOM_VAR,
+  }}
+/>
+```
+
+```tsx filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ExampleStory: Story = {
+  args: {
+    propertyA: import.meta.env.STORYBOOK_DATA_KEY,
+    propertyB: import.meta.env.VITE_CUSTOM_VAR,
+  },
+};
+```
+
 ```tsx filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -34,6 +109,46 @@ export const ExampleStory: Story = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="ExampleStory"
+  args={{
+    propertyA: import.meta.env.STORYBOOK_DATA_KEY,
+    propertyB: import.meta.env.VITE_CUSTOM_VAR,
+  }}
+/>
+```
+
+```tsx filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+export const ExampleStory: Story = {
+  args: {
+    propertyA: import.meta.env.STORYBOOK_DATA_KEY,
+    propertyB: import.meta.env.VITE_CUSTOM_VAR,
+  },
+};
+```
+
 ```tsx filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -85,4 +200,3 @@ export const ExampleStory: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/my-component-with-custom-syntax-highlight.md b/docs/_snippets/my-component-with-custom-syntax-highlight.md
index e660505bef6d..858a209eb202 100644
--- a/docs/_snippets/my-component-with-custom-syntax-highlight.md
+++ b/docs/_snippets/my-component-with-custom-syntax-highlight.md
@@ -1,6 +1,5 @@
-````md renderer="common" language="mdx"
-{/* MyComponent.mdx */}
-
+<!-- prettier-ignore -->
+```mdx filename="MyComponent.mdx" renderer="common" language="mdx"
 import { Meta } from '@storybook/blocks';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 
@@ -27,5 +26,4 @@ body {
 export const Component = () => {
   return <SyntaxHighlighter/>;
 };
-````
-
+```
diff --git a/docs/_snippets/my-component-with-env-variables.md b/docs/_snippets/my-component-with-env-variables.md
index 5becbe876f27..81f0ad36f505 100644
--- a/docs/_snippets/my-component-with-env-variables.md
+++ b/docs/_snippets/my-component-with-env-variables.md
@@ -17,6 +17,39 @@ export const ExampleStory: Story = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="ExampleStory"
+  args={{
+    propertyA: process.env.STORYBOOK_DATA_KEY
+  }}
+/>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import MyComponent from './MyComponent.svelte';
+
+export default {
+  component: MyComponent,
+};
+
+export const ExampleStory = {
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
+  },
+};
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
 import { MyComponent } from './MyComponent';
 
@@ -31,6 +64,44 @@ export const ExampleStory = {
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="ExampleStory"
+  args={{
+    propertyA: process.env.STORYBOOK_DATA_KEY
+  }}
+/>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta = {
+  component: MyComponent,
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ExampleStory: Story = {
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
+  },
+};
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -51,11 +122,29 @@ export const ExampleStory: Story = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
-// Replace your-framework with the name of your framework
-import type { Meta, StoryObj } from '@storybook/your-framework';
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-import { MyComponent } from './MyComponent';
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="ExampleStory"
+  args={{
+    propertyA: process.env.STORYBOOK_DATA_KEY
+  }}
+/>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import MyComponent from './MyComponent.svelte';
 
 const meta: Meta<typeof MyComponent> = {
   component: MyComponent,
@@ -71,22 +160,24 @@ export const ExampleStory: Story = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* MyComponent.stories.svelte */}
-
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
+// Replace your-framework with the name of your framework
+import type { Meta, StoryObj } from '@storybook/your-framework';
 
-  import MyComponent from './MyComponent.svelte';
-</script>
+import { MyComponent } from './MyComponent';
 
-<meta title="MyComponent" component="{MyComponent}" />
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+};
 
-<template let:args>
-  <MyComponent {...args} />
-</template>
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
 
-<Story name="ExampleStory" args={{ propertyA: process.env.STORYBOOK_DATA_KEY, }} />
+export const ExampleStory: Story = {
+  args: {
+    propertyA: process.env.STORYBOOK_DATA_KEY,
+  },
+};
 ```
 
 ```js filename="MyComponent.stories.js" renderer="web-components" language="js"
@@ -117,4 +208,3 @@ export const ExampleStory: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/my-component-with-global-syntax-highlight.md b/docs/_snippets/my-component-with-global-syntax-highlight.md
index abb60b8ab0ee..beffd37f13ca 100644
--- a/docs/_snippets/my-component-with-global-syntax-highlight.md
+++ b/docs/_snippets/my-component-with-global-syntax-highlight.md
@@ -1,6 +1,5 @@
-```md renderer="common" language="mdx"
-{/* MyComponent.mdx */}
-
+<!-- prettier-ignore -->
+```mdx filename="MyComponent.mdx" renderer="common" language="mdx"
 import { Meta } from '@storybook/blocks';
 
 <Meta title="A storybook story with syntax highlight registered globally" />
diff --git a/docs/_snippets/nextjs-add-framework.md b/docs/_snippets/nextjs-add-framework.md
index 0ee715bbedfe..bf9bb181c85e 100644
--- a/docs/_snippets/nextjs-add-framework.md
+++ b/docs/_snippets/nextjs-add-framework.md
@@ -17,4 +17,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/nextjs-app-directory-in-meta.md b/docs/_snippets/nextjs-app-directory-in-meta.md
index 47d283ae59fc..1613ce50d507 100644
--- a/docs/_snippets/nextjs-app-directory-in-meta.md
+++ b/docs/_snippets/nextjs-app-directory-in-meta.md
@@ -42,4 +42,3 @@ const meta: Meta<typeof NavigationBasedComponent> = {
 };
 export default meta;
 ```
-
diff --git a/docs/_snippets/nextjs-app-directory-in-preview.md b/docs/_snippets/nextjs-app-directory-in-preview.md
index 75652a5bcd72..44d0166b296b 100644
--- a/docs/_snippets/nextjs-app-directory-in-preview.md
+++ b/docs/_snippets/nextjs-app-directory-in-preview.md
@@ -25,4 +25,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/nextjs-cache-mock.md b/docs/_snippets/nextjs-cache-mock.md
index b404e1625809..8c310d086aca 100644
--- a/docs/_snippets/nextjs-cache-mock.md
+++ b/docs/_snippets/nextjs-cache-mock.md
@@ -75,4 +75,3 @@ export const Submitted: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/nextjs-configure-svgr.md b/docs/_snippets/nextjs-configure-svgr.md
index dcf45222c54e..18bb44b1b07a 100644
--- a/docs/_snippets/nextjs-configure-svgr.md
+++ b/docs/_snippets/nextjs-configure-svgr.md
@@ -51,4 +51,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/nextjs-headers-mock.md b/docs/_snippets/nextjs-headers-mock.md
index 4e7916f1417a..bbc0e7901d6c 100644
--- a/docs/_snippets/nextjs-headers-mock.md
+++ b/docs/_snippets/nextjs-headers-mock.md
@@ -87,4 +87,3 @@ export const LoggedInEurope: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/nextjs-image-static-dirs.md b/docs/_snippets/nextjs-image-static-dirs.md
index d70202edc512..7485f467397d 100644
--- a/docs/_snippets/nextjs-image-static-dirs.md
+++ b/docs/_snippets/nextjs-image-static-dirs.md
@@ -25,4 +25,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/nextjs-install.md b/docs/_snippets/nextjs-install.md
index 7779659a3e37..0e6cb2d09ecc 100644
--- a/docs/_snippets/nextjs-install.md
+++ b/docs/_snippets/nextjs-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/nextjs
 ```shell renderer="react" language="js" packageManager="yarn"
 yarn add --dev @storybook/nextjs
 ```
-
diff --git a/docs/_snippets/nextjs-navigation-mock.md b/docs/_snippets/nextjs-navigation-mock.md
index 635d822a883d..003fdee91a48 100644
--- a/docs/_snippets/nextjs-navigation-mock.md
+++ b/docs/_snippets/nextjs-navigation-mock.md
@@ -114,4 +114,3 @@ export const GoBack: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/nextjs-navigation-override-in-story.md b/docs/_snippets/nextjs-navigation-override-in-story.md
index 417f5c104c7c..a2afcfbfdd36 100644
--- a/docs/_snippets/nextjs-navigation-override-in-story.md
+++ b/docs/_snippets/nextjs-navigation-override-in-story.md
@@ -41,7 +41,7 @@ const meta = {
 } satisfies Meta<typeof NavigationBasedComponent>;
 export default meta;
 
-type Story = StoryObj<typeof Meta>;
+type Story = StoryObj<typeof meta>;
 
 // If you have the actions addon,
 // you can interact with the links and see the route change events there
@@ -91,4 +91,3 @@ export const Example: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/nextjs-navigation-segments-for-use-params-override-in-meta.md b/docs/_snippets/nextjs-navigation-segments-for-use-params-override-in-meta.md
index abd429265068..194ea482b5a5 100644
--- a/docs/_snippets/nextjs-navigation-segments-for-use-params-override-in-meta.md
+++ b/docs/_snippets/nextjs-navigation-segments-for-use-params-override-in-meta.md
@@ -60,4 +60,3 @@ const meta: Meta<typeof NavigationBasedComponent> = {
 };
 export default meta;
 ```
-
diff --git a/docs/_snippets/nextjs-navigation-segments-override-in-meta.md b/docs/_snippets/nextjs-navigation-segments-override-in-meta.md
index 3e494fb4dcf6..848f9530c164 100644
--- a/docs/_snippets/nextjs-navigation-segments-override-in-meta.md
+++ b/docs/_snippets/nextjs-navigation-segments-override-in-meta.md
@@ -51,4 +51,3 @@ const meta: Meta<typeof NavigationBasedComponent> = {
 };
 export default meta;
 ```
-
diff --git a/docs/_snippets/nextjs-remove-addons.md b/docs/_snippets/nextjs-remove-addons.md
index 8daf79ac7d95..007e6fe14733 100644
--- a/docs/_snippets/nextjs-remove-addons.md
+++ b/docs/_snippets/nextjs-remove-addons.md
@@ -25,4 +25,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/nextjs-router-mock.md b/docs/_snippets/nextjs-router-mock.md
index 4d3c35fba720..83e83aee5e02 100644
--- a/docs/_snippets/nextjs-router-mock.md
+++ b/docs/_snippets/nextjs-router-mock.md
@@ -76,4 +76,3 @@ export const GoBack: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/nextjs-router-override-in-story.md b/docs/_snippets/nextjs-router-override-in-story.md
index bdf1d0718209..cac0babd2688 100644
--- a/docs/_snippets/nextjs-router-override-in-story.md
+++ b/docs/_snippets/nextjs-router-override-in-story.md
@@ -32,7 +32,7 @@ const meta = {
 } satisfies Meta<typeof RouterBasedComponent>;
 export default meta;
 
-type Story = StoryObj<typeof Meta>;
+type Story = StoryObj<typeof meta>;
 
 // If you have the actions addon,
 // you can interact with the links and see the route change events there
@@ -79,4 +79,3 @@ export const Example: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/other-foo-bar-story.md b/docs/_snippets/other-foo-bar-story.md
index c2a5393ef7b7..eab030321c8e 100644
--- a/docs/_snippets/other-foo-bar-story.md
+++ b/docs/_snippets/other-foo-bar-story.md
@@ -115,4 +115,3 @@ export const Baz: Story = {
   name: 'Insert name here',
 };
 ```
-
diff --git a/docs/_snippets/page-story-args-within-story.md b/docs/_snippets/page-story-args-within-story.md
index 9a33cdefb1e2..a890b871ffbc 100644
--- a/docs/_snippets/page-story-args-within-story.md
+++ b/docs/_snippets/page-story-args-within-story.md
@@ -95,4 +95,3 @@ export const Example: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/page-story-slots.md b/docs/_snippets/page-story-slots.md
index bf8f8b3253c7..c32f96c7cd8e 100644
--- a/docs/_snippets/page-story-slots.md
+++ b/docs/_snippets/page-story-slots.md
@@ -171,27 +171,67 @@ export const CustomFooter: Story = {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* Page.stories.svelte */}
+```svelte filename="Page.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+  import Page from './Page.svelte';
+
+  const { Story } = defineMeta({
+    component: Page
+  });
+</script>
+
+<Story name="CustomFooter" args={{ footer: 'Built with Storybook' }}>
+  {#snippet children(args)}
+    <Page {...args} >
+      <footer>{args.footer}</footer>
+    </Page>
+  {/snippet}
+</Story>
+```
+
+```svelte filename="Page.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import Page from './Page.svelte';
+
+  const { Story } = defineMeta({
+    component: Page
+  });
 </script>
 
-<meta title="Page" component="{Page}" />
+<Story name="CustomFooter" args={{ footer: 'Built with Storybook' }}>
+  {#snippet children(args)}
+    <Page {...args} >
+      <footer>{args.footer}</footer>
+    </Page>
+  {/snippet}
+</Story>
+```
+
+```svelte filename="Page.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Page from './Page.svelte';
 
-<template let:args>
-  <Page {...args}>
-    <footer>{args.footer}</footer>
-  </Page>
-</template>
+  const { Story } = defineMeta({
+    component: Page
+  });
+</script>
 
-<Story name="CustomFooter" args={{ footer: 'Built with Storybook', }} />
+<Story name="CustomFooter" args={{ footer: 'Built with Storybook' }}>
+  {#snippet children(args)}
+    <Page {...args} >
+      <footer>{args.footer}</footer>
+    </Page>
+  {/snippet}
+</Story>
 ```
 
-```js filename="Page.stories.js" renderer="vue" language="js" tabTitle="3"
+```js filename="Page.stories.js" renderer="vue" language="js"
 import Page from './Page.vue';
 
 export default {
@@ -218,7 +258,7 @@ export const CustomFooter = {
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="vue" language="ts-4-9" tabTitle="3"
+```ts filename="Page.stories.ts" renderer="vue" language="ts-4-9"
 // https://www.npmjs.com/package/vue-component-type-helpers
 import type { ComponentProps } from 'vue-component-type-helpers';
 import type { Meta, StoryObj } from '@storybook/vue3';
@@ -254,7 +294,7 @@ export const Primary = {
 } satisfies Story;
 ```
 
-```ts filename="Page.stories.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="Page.stories.ts" renderer="vue" language="ts"
 // https://www.npmjs.com/package/vue-component-type-helpers
 import type { ComponentProps } from 'vue-component-type-helpers';
 import type { Meta, StoryObj } from '@storybook/vue3';
@@ -336,4 +376,3 @@ export const CustomFooter: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/page-story-with-args-composition.md b/docs/_snippets/page-story-with-args-composition.md
index de13cb80a08b..a12fc28740de 100644
--- a/docs/_snippets/page-story-with-args-composition.md
+++ b/docs/_snippets/page-story-with-args-composition.md
@@ -141,4 +141,3 @@ export const Simple: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/page-story.md b/docs/_snippets/page-story.md
index 3d3ff8c6bc92..24868f858f30 100644
--- a/docs/_snippets/page-story.md
+++ b/docs/_snippets/page-story.md
@@ -154,7 +154,23 @@ export const LoggedIn: Story = {
 };
 ```
 
-```js filename="Page.stories.js" renderer="svelte" language="js"
+```svelte filename="Page.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Page from './Page.svelte';
+  //👇 Imports all Header stories
+  import * as HeaderStories from './Header.stories.svelte';
+
+  const { Story } = defineMeta({
+    component: Page,
+  });
+</script>
+
+<Story name="LoggedIn" args={{ ...HeaderStories.LoggedIn.args }} />
+```
+
+```js filename="Page.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import Page from './Page.svelte';
 
 //👇 Imports all Header stories
@@ -171,7 +187,23 @@ export const LoggedIn = {
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="svelte" language="ts-4-9"
+```svelte filename="Page.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Page from './Page.svelte';
+  //👇 Imports all Header stories
+  import * as HeaderStories from './Header.stories.svelte';
+
+  const { Story } = defineMeta({
+    component: Page,
+  });
+</script>
+
+<Story name="LoggedIn" args={{ ...HeaderStories.LoggedIn.args }} />
+```
+
+```ts filename="Page.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Page from './Page.svelte';
@@ -193,7 +225,23 @@ export const LoggedIn: Story = {
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="svelte" language="ts"
+```svelte filename="Page.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Page from './Page.svelte';
+  //👇 Imports all Header stories
+  import * as HeaderStories from './Header.stories.svelte';
+
+  const { Story } = defineMeta({
+    component: Page,
+  });
+</script>
+
+<Story name="LoggedIn" args={{ ...HeaderStories.LoggedIn.args }} />
+```
+
+```ts filename="Page.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import Page from './Page.svelte';
@@ -215,7 +263,7 @@ export const LoggedIn: Story = {
 };
 ```
 
-```js filename="Page.stories.js" renderer="vue" language="js" tabTitle="3"
+```js filename="Page.stories.js" renderer="vue" language="js"
 import Page from './Page.vue';
 
 //👇 Imports all Header stories
@@ -244,7 +292,7 @@ export const LoggedIn = {
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="vue" language="ts-4-9" tabTitle="3"
+```ts filename="Page.stories.ts" renderer="vue" language="ts-4-9"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Page from './Page.vue';
@@ -278,7 +326,7 @@ export const Primary: Story = {
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="Page.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Page from './Page.vue';
@@ -346,4 +394,3 @@ export const LoggedIn: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/parameters-in-meta.md b/docs/_snippets/parameters-in-meta.md
index 7abf1b58804d..9037dc413549 100644
--- a/docs/_snippets/parameters-in-meta.md
+++ b/docs/_snippets/parameters-in-meta.md
@@ -5,14 +5,10 @@ import { Button } from './button.component';
 
 const meta: Meta<Button> = {
   component: Button,
-  //👇 Creates specific parameters for the story
+  //👇 Creates specific parameters at the component level
   parameters: {
     backgrounds: {
-      values: [
-        { name: 'red', value: '#f00' },
-        { name: 'green', value: '#0f0' },
-        { name: 'blue', value: '#00f' },
-      ],
+      default: 'dark',
     },
   },
 };
@@ -20,77 +16,169 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    //👇 Creates specific parameters at the component level
+    parameters: {
+      backgrounds: {
+        default: 'dark',
+      },
+    },
+  });
+</script>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+  //👇 Creates specific parameters at the component level
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+};
+```
+
 ```js filename="Button.stories.js|jsx" renderer="common" language="js"
 import { Button } from './Button';
 
 export default {
   component: Button,
-  // 👇 Meta-level parameters
+  //👇 Creates specific parameters at the component level
   parameters: {
     backgrounds: {
       default: 'dark',
     },
   },
 };
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-export const Basic = {};
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    //👇 Creates specific parameters at the component level
+    parameters: {
+      backgrounds: {
+        default: 'dark',
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+  //👇 Creates specific parameters at the component level
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
 ```
 
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
-import type { Meta, StoryObj } from '@storybook/your-framework';
+import type { Meta } from '@storybook/your-framework';
 
 import { Button } from './Button';
 
 const meta = {
   component: Button,
-  // 👇 Meta-level parameters
+  //👇 Creates specific parameters at the component level
   parameters: {
     backgrounds: {
       default: 'dark',
     },
   },
 } satisfies Meta<typeof Button>;
+
 export default meta;
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-type Story = StoryObj<typeof Meta>;
+  import Button from './Button.svelte';
 
-export const Basic: Story = {};
+  const { Story } = defineMeta({
+    component: Button,
+    //👇 Creates specific parameters at the component level
+    parameters: {
+      backgrounds: {
+        default: 'dark',
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  //👇 Creates specific parameters at the component level
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+};
+
+export default meta;
 ```
 
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
-import type { Meta, StoryObj } from '@storybook/your-framework';
+import type { Meta } from '@storybook/your-framework';
 
 import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   component: Button,
-  // 👇 Meta-level parameters
+  //👇 Creates specific parameters at the component level
   parameters: {
     backgrounds: {
       default: 'dark',
     },
   },
 };
-export default meta;
 
-type Story = StoryObj<typeof Button>;
-
-export const Basic: Story = {};
+export default meta;
 ```
 
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   component: 'demo-button',
-  //👇 Creates specific parameters for the story
+  //👇 Creates specific parameters at the component level
   parameters: {
     backgrounds: {
-      values: [
-        { name: 'red', value: '#f00' },
-        { name: 'green', value: '#0f0' },
-        { name: 'blue', value: '#00f' },
-      ],
+      default: 'dark',
     },
   },
 };
@@ -101,18 +189,13 @@ import type { Meta } from '@storybook/web-components';
 
 const meta: Meta = {
   component: 'demo-button',
-  //👇 Creates specific parameters for the story
+  //👇 Creates specific parameters at the component level
   parameters: {
     backgrounds: {
-      values: [
-        { name: 'red', value: '#f00' },
-        { name: 'green', value: '#0f0' },
-        { name: 'blue', value: '#00f' },
-      ],
+      default: 'dark',
     },
   },
 };
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/parameters-in-preview.md b/docs/_snippets/parameters-in-preview.md
index 06c35eae5a79..b017899e0316 100644
--- a/docs/_snippets/parameters-in-preview.md
+++ b/docs/_snippets/parameters-in-preview.md
@@ -28,4 +28,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/parameters-in-story.md b/docs/_snippets/parameters-in-story.md
index 277c2d5fc2c5..77dfdf57459c 100644
--- a/docs/_snippets/parameters-in-story.md
+++ b/docs/_snippets/parameters-in-story.md
@@ -23,6 +23,43 @@ export const Primary: Story = {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<!-- 👇 Story-level parameters-->
+<Story
+  name="OnDark"
+  parameters={{
+    backgrounds: { default: 'dark' }
+  }}
+/>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+};
+
+export const OnDark = {
+  // 👇 Story-level parameters
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+};
+```
+
 ```js filename="Button.stories.js|jsx" renderer="common" language="js"
 import { Button } from './Button';
 
@@ -40,6 +77,48 @@ export const OnDark = {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<!-- 👇 Story-level parameters-->
+<Story
+  name="OnDark"
+  parameters={{
+    backgrounds: { default: 'dark' }
+  }}
+/>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const OnDark: Story = {
+  // 👇 Story-level parameters
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+};
+```
+
 ```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -49,9 +128,51 @@ import { Button } from './Button';
 const meta = {
   component: Button,
 } satisfies Meta<typeof Button>;
+
 export default meta;
+type Story = StoryObj<typeof meta>;
 
-type Story = StoryObj<typeof Meta>;
+export const OnDark: Story = {
+  // 👇 Story-level parameters
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+    },
+  },
+};
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<!-- 👇 Story-level parameters-->
+<Story
+  name="OnDark"
+  parameters={{
+    backgrounds: { default: 'dark' }
+  }}
+/>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
 
 export const OnDark: Story = {
   // 👇 Story-level parameters
@@ -72,8 +193,8 @@ import { Button } from './Button';
 const meta: Meta<typeof Button> = {
   component: Button,
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof Button>;
 
 export const OnDark: Story = {
@@ -134,4 +255,3 @@ export const Primary: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/portable-stories-jest-compose-stories.md b/docs/_snippets/portable-stories-jest-compose-stories.md
index 044ff413695d..cce7ff58c1af 100644
--- a/docs/_snippets/portable-stories-jest-compose-stories.md
+++ b/docs/_snippets/portable-stories-jest-compose-stories.md
@@ -50,4 +50,3 @@ test('renders primary button with overridden props', () => {
   expect(buttonElement).not.toBeNull();
 });
 ```
-
diff --git a/docs/_snippets/portable-stories-jest-multi-snapshot-test.md b/docs/_snippets/portable-stories-jest-multi-snapshot-test.md
index 4845a1abd69e..afd045b2d6cc 100644
--- a/docs/_snippets/portable-stories-jest-multi-snapshot-test.md
+++ b/docs/_snippets/portable-stories-jest-multi-snapshot-test.md
@@ -21,7 +21,7 @@ describe(options.suite, () => {
           const snapshotPath = path.join(
             storyDir,
             options.snapshotsDirName,
-            `${componentName}${options.snapshotExtension}`
+            `${componentName}${options.snapshotExtension}`,
           );
           expect(document.body.firstChild).toMatchSpecificSnapshot(snapshotPath);
         });
diff --git a/docs/_snippets/portable-stories-jest-override-globals.md b/docs/_snippets/portable-stories-jest-override-globals.md
index 43da554fca82..d4fe5433a0a7 100644
--- a/docs/_snippets/portable-stories-jest-override-globals.md
+++ b/docs/_snippets/portable-stories-jest-override-globals.md
@@ -9,7 +9,7 @@ test('renders in English', async () => {
   const Primary = composeStory(
     PrimaryStory,
     meta,
-    { globals: { locale: 'en' } } // 👈 Project annotations to override the locale
+    { globals: { locale: 'en' } }, // 👈 Project annotations to override the locale
   );
 
   await Primary.run();
@@ -33,7 +33,7 @@ test('renders in English', async () => {
   const Primary = composeStory(
     PrimaryStory,
     meta,
-    { globals: { locale: 'en' } } // 👈 Project annotations to override the locale
+    { globals: { locale: 'en' } }, // 👈 Project annotations to override the locale
   );
 
   await Primary.run();
diff --git a/docs/_snippets/portable-stories-jest-set-project-annotations.md b/docs/_snippets/portable-stories-jest-set-project-annotations.md
index c17f1b25f2d3..022464514648 100644
--- a/docs/_snippets/portable-stories-jest-set-project-annotations.md
+++ b/docs/_snippets/portable-stories-jest-set-project-annotations.md
@@ -5,10 +5,7 @@ import { setProjectAnnotations } from '@storybook/react';
 import * as addonAnnotations from 'my-addon/preview';
 import * as previewAnnotations from './.storybook/preview';
 
-const annotations = setProjectAnnotations([
-  previewAnnotations,
-  addonAnnotations,
-]);
+const annotations = setProjectAnnotations([previewAnnotations, addonAnnotations]);
 
 // Supports beforeAll hook from Storybook
 beforeAll(annotations.beforeAll);
@@ -21,10 +18,7 @@ import { setProjectAnnotations } from '@storybook/vue3';
 import * as addonAnnotations from 'my-addon/preview';
 import * as previewAnnotations from './.storybook/preview';
 
-const annotations = setProjectAnnotations([
-  previewAnnotations,
-  addonAnnotations,
-]);
+const annotations = setProjectAnnotations([previewAnnotations, addonAnnotations]);
 
 // Supports beforeAll hook from Storybook
 beforeAll(annotations.beforeAll);
diff --git a/docs/_snippets/portable-stories-jest-snapshot-test.md b/docs/_snippets/portable-stories-jest-snapshot-test.md
index 20a146ab48e7..59d90c661069 100644
--- a/docs/_snippets/portable-stories-jest-snapshot-test.md
+++ b/docs/_snippets/portable-stories-jest-snapshot-test.md
@@ -12,7 +12,7 @@ const compose = (entry) => {
     return composeStories(entry);
   } catch (e) {
     throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`
+      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`,
     );
   }
 };
@@ -20,7 +20,7 @@ const compose = (entry) => {
 function getAllStoryFiles() {
   // Place the glob you want to match your stories files
   const storyFiles = glob.sync(
-    path.join(__dirname, 'stories/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}')
+    path.join(__dirname, 'stories/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}'),
   );
 
   return storyFiles.map((filePath) => {
@@ -58,7 +58,7 @@ describe(options.suite, () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module, without a disable parameter, or add parameters.storyshots.disable in the default export of this file.`
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module, without a disable parameter, or add parameters.storyshots.disable in the default export of this file.`,
         );
       }
 
@@ -100,7 +100,7 @@ const compose = (entry: StoryFile): ReturnType<typeof composeStories<StoryFile>>
     return composeStories(entry);
   } catch (e) {
     throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`
+      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`,
     );
   }
 };
@@ -108,7 +108,7 @@ const compose = (entry: StoryFile): ReturnType<typeof composeStories<StoryFile>>
 function getAllStoryFiles() {
   // Place the glob you want to match your stories files
   const storyFiles = glob.sync(
-    path.join(__dirname, 'stories/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}')
+    path.join(__dirname, 'stories/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}'),
   );
 
   return storyFiles.map((filePath) => {
@@ -146,7 +146,7 @@ describe(options.suite, () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module, without a disable parameter, or add parameters.storyshots.disable in the default export of this file.`
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module, without a disable parameter, or add parameters.storyshots.disable in the default export of this file.`,
         );
       }
 
diff --git a/docs/_snippets/portable-stories-playwright-ct-compose-stories.md b/docs/_snippets/portable-stories-playwright-ct-compose-stories.md
index 1ee5cb978740..d02ec426775b 100644
--- a/docs/_snippets/portable-stories-playwright-ct-compose-stories.md
+++ b/docs/_snippets/portable-stories-playwright-ct-compose-stories.md
@@ -5,10 +5,7 @@ import { setProjectAnnotations } from '@storybook/react';
 import * as addonAnnotations from 'my-addon/preview';
 import * as previewAnnotations from './.storybook/preview';
 
-const annotations = setProjectAnnotations([
-  previewAnnotations,
-  addonAnnotations,
-]);
+const annotations = setProjectAnnotations([previewAnnotations, addonAnnotations]);
 
 // Supports beforeAll hook from Storybook
 test.beforeAll(annotations.beforeAll);
@@ -21,10 +18,7 @@ import { setProjectAnnotations } from '@storybook/vue3';
 import * as addonAnnotations from 'my-addon/preview';
 import * as previewAnnotations from './.storybook/preview';
 
-const annotations = setProjectAnnotations([
-  previewAnnotations,
-  addonAnnotations,
-]);
+const annotations = setProjectAnnotations([previewAnnotations, addonAnnotations]);
 
 // Supports beforeAll hook from Storybook
 test.beforeAll(annotations.beforeAll);
diff --git a/docs/_snippets/portable-stories-playwright-ct-override-globals.md b/docs/_snippets/portable-stories-playwright-ct-override-globals.md
index edb963f1ff36..1d3ce4d3e4a5 100644
--- a/docs/_snippets/portable-stories-playwright-ct-override-globals.md
+++ b/docs/_snippets/portable-stories-playwright-ct-override-globals.md
@@ -6,7 +6,7 @@ import meta, { Primary } from './Button.stories';
 export const PrimaryEnglish = composeStory(
   Primary,
   meta,
-  { globals: { locale: 'en' } } // 👈 Project annotations to override the locale
+  { globals: { locale: 'en' } }, // 👈 Project annotations to override the locale
 );
 
 export const PrimarySpanish = composeStory(Primary, meta, { globals: { locale: 'es' } });
@@ -20,7 +20,7 @@ import meta, { Primary } from './Button.stories';
 export const PrimaryEnglish = composeStory(
   Primary,
   meta,
-  { globals: { locale: 'en' } } // 👈 Project annotations to override the locale
+  { globals: { locale: 'en' } }, // 👈 Project annotations to override the locale
 );
 
 export const PrimarySpanish = composeStory(Primary, meta, { globals: { locale: 'es' } });
diff --git a/docs/_snippets/portable-stories-playwright-ct.md b/docs/_snippets/portable-stories-playwright-ct.md
index c423a2ef1ff8..7f5b0eeb7589 100644
--- a/docs/_snippets/portable-stories-playwright-ct.md
+++ b/docs/_snippets/portable-stories-playwright-ct.md
@@ -45,4 +45,3 @@ test('renders primary button with overridden props', async ({ mount }) => {
   await expect(component.getByRole('button')).toHaveClass(/storybook-button--primary/);
 });
 ```
-
diff --git a/docs/_snippets/portable-stories-vitest-multi-snapshot-test.md b/docs/_snippets/portable-stories-vitest-multi-snapshot-test.md
index b2cece86e6f1..2dd1bd2b18f3 100644
--- a/docs/_snippets/portable-stories-vitest-multi-snapshot-test.md
+++ b/docs/_snippets/portable-stories-vitest-multi-snapshot-test.md
@@ -18,7 +18,7 @@ describe(options.suite, () => {
           const snapshotPath = path.join(
             storyDir,
             options.snapshotsDirName,
-            `${componentName}${options.snapshotExtension}`
+            `${componentName}${options.snapshotExtension}`,
           );
           expect(document.body.firstChild).toMatchFileSnapshot(snapshotPath);
         });
diff --git a/docs/_snippets/portable-stories-vitest-override-globals.md b/docs/_snippets/portable-stories-vitest-override-globals.md
index ae2a362b77ea..b954900b26a1 100644
--- a/docs/_snippets/portable-stories-vitest-override-globals.md
+++ b/docs/_snippets/portable-stories-vitest-override-globals.md
@@ -9,7 +9,7 @@ test('renders in English', async () => {
   const Primary = composeStory(
     PrimaryStory,
     meta,
-    { globals: { locale: 'en' } } // 👈 Project annotations to override the locale
+    { globals: { locale: 'en' } }, // 👈 Project annotations to override the locale
   );
 
   await Primary.run();
@@ -33,7 +33,7 @@ test('renders in English', async () => {
   const Primary = composeStory(
     PrimaryStory,
     meta,
-    { globals: { locale: 'en' } } // 👈 Project annotations to override the locale
+    { globals: { locale: 'en' } }, // 👈 Project annotations to override the locale
   );
 
   await Primary.run();
@@ -57,7 +57,7 @@ test('renders in English', async () => {
   const Primary = composeStory(
     PrimaryStory,
     meta,
-    { globals: { locale: 'en' } } // 👈 Project annotations to override the locale
+    { globals: { locale: 'en' } }, // 👈 Project annotations to override the locale
   );
 
   await Primary.run();
diff --git a/docs/_snippets/portable-stories-vitest-set-project-annotations-simple.md b/docs/_snippets/portable-stories-vitest-set-project-annotations-simple.md
index 0cd16ae92250..99b3522e0fae 100644
--- a/docs/_snippets/portable-stories-vitest-set-project-annotations-simple.md
+++ b/docs/_snippets/portable-stories-vitest-set-project-annotations-simple.md
@@ -1,9 +1,9 @@
-```tsx filename="setupTest.ts" renderer="react" language="ts"
+```tsx filename=".storybook/vitest.setup.ts" renderer="react" language="ts"
 import { beforeAll } from 'vitest';
 // 👇 If you're using Next.js, import from @storybook/nextjs
 //   If you're using Next.js with Vite, import from @storybook/experimental-nextjs-vite
 import { setProjectAnnotations } from '@storybook/react';
-import * as previewAnnotations from './.storybook/preview';
+import * as previewAnnotations from './preview';
 
 const annotations = setProjectAnnotations([previewAnnotations]);
 
@@ -11,11 +11,11 @@ const annotations = setProjectAnnotations([previewAnnotations]);
 beforeAll(annotations.beforeAll);
 ```
 
-```tsx filename="setupTest.ts" renderer="svelte" language="ts"
+```tsx filename=".storybook/vitest.setup.ts" renderer="svelte" language="ts"
 import { beforeAll } from 'vitest';
 // 👇 If you're using Sveltekit, import from @storybook/sveltekit
 import { setProjectAnnotations } from '@storybook/svelte';
-import * as previewAnnotations from './.storybook/preview';
+import * as previewAnnotations from './preview';
 
 const annotations = setProjectAnnotations([previewAnnotations]);
 
@@ -23,10 +23,10 @@ const annotations = setProjectAnnotations([previewAnnotations]);
 beforeAll(annotations.beforeAll);
 ```
 
-```tsx filename="setupTest.ts" renderer="vue" language="ts"
+```tsx filename=".storybook/vitest.setup.ts" renderer="vue" language="ts"
 import { beforeAll } from 'vitest';
 import { setProjectAnnotations } from '@storybook/vue3';
-import * as previewAnnotations from './.storybook/preview';
+import * as previewAnnotations from './preview';
 
 const annotations = setProjectAnnotations([previewAnnotations]);
 
diff --git a/docs/_snippets/portable-stories-vitest-snapshot-test.md b/docs/_snippets/portable-stories-vitest-snapshot-test.md
index 07b8cf4c7728..bf5f130c6367 100644
--- a/docs/_snippets/portable-stories-vitest-snapshot-test.md
+++ b/docs/_snippets/portable-stories-vitest-snapshot-test.md
@@ -11,7 +11,7 @@ const compose = (entry) => {
     return composeStories(entry);
   } catch (e) {
     throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`
+      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`,
     );
   }
 };
@@ -21,7 +21,7 @@ function getAllStoryFiles() {
   const storyFiles = Object.entries(
     import.meta.glob('./stories/**/*.(stories|story).@(js|jsx|mjs|ts|tsx)', {
       eager: true,
-    })
+    }),
   );
 
   return storyFiles.map(([filePath, storyFile]) => {
@@ -60,7 +60,7 @@ describe(options.suite, () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module, without a disable parameter, or add parameters.storyshots.disable in the default export of this file.`
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module, without a disable parameter, or add parameters.storyshots.disable in the default export of this file.`,
         );
       }
 
@@ -102,7 +102,7 @@ const compose = (entry: StoryFile): ReturnType<typeof composeStories<StoryFile>>
     return composeStories(entry);
   } catch (e) {
     throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`
+      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`,
     );
   }
 };
@@ -112,7 +112,7 @@ function getAllStoryFiles() {
   const storyFiles = Object.entries(
     import.meta.glob<StoryFile>('./stories/**/*.(stories|story).@(js|jsx|mjs|ts|tsx)', {
       eager: true,
-    })
+    }),
   );
 
   return storyFiles.map(([filePath, storyFile]) => {
@@ -151,7 +151,7 @@ describe(options.suite, () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module, without a disable parameter, or add parameters.storyshots.disable in the default export of this file.`
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module, without a disable parameter, or add parameters.storyshots.disable in the default export of this file.`,
         );
       }
 
diff --git a/docs/_snippets/preview-storybook-production-mode.md b/docs/_snippets/preview-storybook-production-mode.md
index 6ef4a93f6bef..e759fc366314 100644
--- a/docs/_snippets/preview-storybook-production-mode.md
+++ b/docs/_snippets/preview-storybook-production-mode.md
@@ -5,4 +5,3 @@ npx http-server ./path/to/build
 ```shell renderer="common" language="js" packageManager="pnpm"
 pnpm dlx http-server ./path/to/build
 ```
-
diff --git a/docs/_snippets/react-native-web-vite-add-framework.md b/docs/_snippets/react-native-web-vite-add-framework.md
new file mode 100644
index 000000000000..afe03d4844a6
--- /dev/null
+++ b/docs/_snippets/react-native-web-vite-add-framework.md
@@ -0,0 +1,23 @@
+```js filename=".storybook/main.js" renderer="react-native-web" language="js"
+export default {
+  addons: [
+    '@storybook/addon-react-native-web', // 👈 Remove the addon
+  ],
+  // Replace @storybook/react-webpack5 with the Vite framework
+  framework: '@storybook/react-native-web-vite',
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="react-native-web" language="ts"
+import { StorybookConfig } from '@storybook/react-native-web-vite';
+
+const config: StorybookConfig = {
+  addons: [
+    '@storybook/addon-react-native-web', // 👈 Remove the addon
+  ],
+  // Replace @storybook/react-webpack5 with the Vite framework
+  framework: '@storybook/react-native-web-vite',
+};
+
+export default config;
+```
diff --git a/docs/_snippets/react-native-web-vite-install.md b/docs/_snippets/react-native-web-vite-install.md
new file mode 100644
index 000000000000..719993c04e77
--- /dev/null
+++ b/docs/_snippets/react-native-web-vite-install.md
@@ -0,0 +1,11 @@
+```shell renderer="react-native-web" language="js" packageManager="npm"
+npm install --save-dev @storybook/react-native-web-vite vite
+```
+
+```shell renderer="react-native-web" language="js" packageManager="pnpm"
+pnpm add --save-dev @storybook/react-native-web-vite vite
+```
+
+```shell renderer="react-native-web" language="js" packageManager="yarn"
+yarn add --dev @storybook/react-native-web-vite vite
+```
diff --git a/docs/_snippets/react-test-scripts-optional-config-scripts.md b/docs/_snippets/react-test-scripts-optional-config-scripts.md
deleted file mode 100644
index a819f2dcce00..000000000000
--- a/docs/_snippets/react-test-scripts-optional-config-scripts.md
+++ /dev/null
@@ -1,8 +0,0 @@
-```json renderer="react" language="json"
-{
-  "scripts": {
-    "test": "react-scripts test --setupFiles ./setupFile.js"
-  }
-}
-```
-
diff --git a/docs/_snippets/react-vite-add-framework.md b/docs/_snippets/react-vite-add-framework.md
index e0989e989ed9..239b6c661bbd 100644
--- a/docs/_snippets/react-vite-add-framework.md
+++ b/docs/_snippets/react-vite-add-framework.md
@@ -17,4 +17,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/react-vite-framework-options.md b/docs/_snippets/react-vite-framework-options.md
new file mode 100644
index 000000000000..dc37a8dd5ecf
--- /dev/null
+++ b/docs/_snippets/react-vite-framework-options.md
@@ -0,0 +1,25 @@
+```js filename=".storybook/main.js" renderer="react" language="js"
+export default {
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      // ...
+    },
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts"
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      // ...
+    },
+  },
+};
+
+export default config;
+```
diff --git a/docs/_snippets/react-vite-install.md b/docs/_snippets/react-vite-install.md
index 1a9b6a3439b7..92880b1a4255 100644
--- a/docs/_snippets/react-vite-install.md
+++ b/docs/_snippets/react-vite-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/react-vite
 ```shell renderer="react" language="js" packageManager="yarn"
 yarn add --dev @storybook/react-vite
 ```
-
diff --git a/docs/_snippets/react-webpack5-add-framework.md b/docs/_snippets/react-webpack5-add-framework.md
index 14bd2e484f8a..9dea87af6bc6 100644
--- a/docs/_snippets/react-webpack5-add-framework.md
+++ b/docs/_snippets/react-webpack5-add-framework.md
@@ -15,4 +15,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/react-webpack5-framework-options.md b/docs/_snippets/react-webpack5-framework-options.md
new file mode 100644
index 000000000000..6a251f4d19ff
--- /dev/null
+++ b/docs/_snippets/react-webpack5-framework-options.md
@@ -0,0 +1,25 @@
+```js filename=".storybook/main.js" renderer="react" language="js"
+export default {
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      // ...
+    },
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts"
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      // ...
+    },
+  },
+};
+
+export default config;
+```
diff --git a/docs/_snippets/react-webpack5-install.md b/docs/_snippets/react-webpack5-install.md
index 999a6dd52824..05c4082f05df 100644
--- a/docs/_snippets/react-webpack5-install.md
+++ b/docs/_snippets/react-webpack5-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/react-webpack5
 ```shell renderer="react" language="js" packageManager="yarn"
 yarn add --dev @storybook/react-webpack5
 ```
-
diff --git a/docs/_snippets/register-component-with-play-function.md b/docs/_snippets/register-component-with-play-function.md
index a5851e727f61..177564a6205a 100644
--- a/docs/_snippets/register-component-with-play-function.md
+++ b/docs/_snippets/register-component-with-play-function.md
@@ -43,6 +43,92 @@ export const FilledForm: Story = {
 };
 ```
 
+```svelte filename="RegistrationForm.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import RegistrationForm from './RegistrationForm.svelte';
+
+  const { Story } = defineMeta({
+    component: RegistrationForm,
+  });
+</script>
+
+<!--
+  See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+  to learn more about using the canvasElement to query the DOM
+-->
+<Story
+  name="FilledForm"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const emailInput = canvas.getByLabelText('email', {
+      selector: 'input',
+    });
+
+    await userEvent.type(emailInput, 'example-email@email.com', {
+      delay: 100,
+    });
+
+    const passwordInput = canvas.getByLabelText('password', {
+      selector: 'input',
+    });
+
+    await userEvent.type(passwordInput, 'ExamplePassword', {
+      delay: 100,
+    });
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const submitButton = canvas.getByRole('button');
+
+    await userEvent.click(submitButton);
+  }}
+/>
+```
+
+```js filename="RegistrationForm.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import { userEvent, within } from '@storybook/test';
+
+import RegistrationForm from './RegistrationForm.svelte';
+
+export default {
+  component: RegistrationForm,
+};
+
+/*
+ * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const FilledForm = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const emailInput = canvas.getByLabelText('email', {
+      selector: 'input',
+    });
+
+    await userEvent.type(emailInput, 'example-email@email.com', {
+      delay: 100,
+    });
+
+    const passwordInput = canvas.getByLabelText('password', {
+      selector: 'input',
+    });
+
+    await userEvent.type(passwordInput, 'ExamplePassword', {
+      delay: 100,
+    });
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const submitButton = canvas.getByRole('button');
+
+    await userEvent.click(submitButton);
+  },
+};
+```
+
 ```js filename="RegistrationForm.stories.js|jsx" renderer="common" language="js"
 import { userEvent, within } from '@storybook/test';
 
@@ -83,6 +169,97 @@ export const FilledForm = {
 };
 ```
 
+```svelte filename="RegistrationForm.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import RegistrationForm from './RegistrationForm.svelte';
+
+  const { Story } = defineMeta({
+    component: RegistrationForm,
+  });
+</script>
+
+<!--
+  See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+  to learn more about using the canvasElement to query the DOM
+-->
+<Story
+  name="FilledForm"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const emailInput = canvas.getByLabelText('email', {
+      selector: 'input',
+    });
+
+    await userEvent.type(emailInput, 'example-email@email.com', {
+      delay: 100,
+    });
+
+    const passwordInput = canvas.getByLabelText('password', {
+      selector: 'input',
+    });
+
+    await userEvent.type(passwordInput, 'ExamplePassword', {
+      delay: 100,
+    });
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const submitButton = canvas.getByRole('button');
+
+    await userEvent.click(submitButton);
+  }}
+/>
+```
+
+```ts filename="RegistrationForm.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, within } from '@storybook/test';
+
+import RegistrationForm from './RegistrationForm.svelte';
+
+const meta = {
+  component: RegistrationForm,
+} satisfies Meta<typeof RegistrationForm>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/*
+ * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const FilledForm: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const emailInput = canvas.getByLabelText('email', {
+      selector: 'input',
+    });
+
+    await userEvent.type(emailInput, 'example-email@email.com', {
+      delay: 100,
+    });
+
+    const passwordInput = canvas.getByLabelText('password', {
+      selector: 'input',
+    });
+
+    await userEvent.type(passwordInput, 'ExamplePassword', {
+      delay: 100,
+    });
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const submitButton = canvas.getByRole('button');
+
+    await userEvent.click(submitButton);
+  },
+};
+```
+
 ```ts filename="RegistrationForm.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -129,6 +306,97 @@ export const FilledForm: Story = {
 };
 ```
 
+```svelte filename="RegistrationForm.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import { userEvent, within } from '@storybook/test';
+
+  import RegistrationForm from './RegistrationForm.svelte';
+
+  const { Story } = defineMeta({
+    component: RegistrationForm,
+  });
+</script>
+
+<!--
+  See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+  to learn more about using the canvasElement to query the DOM
+-->
+<Story
+  name="FilledForm"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const emailInput = canvas.getByLabelText('email', {
+      selector: 'input',
+    });
+
+    await userEvent.type(emailInput, 'example-email@email.com', {
+      delay: 100,
+    });
+
+    const passwordInput = canvas.getByLabelText('password', {
+      selector: 'input',
+    });
+
+    await userEvent.type(passwordInput, 'ExamplePassword', {
+      delay: 100,
+    });
+
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const submitButton = canvas.getByRole('button');
+
+    await userEvent.click(submitButton);
+  }}
+/>
+```
+
+```ts filename="RegistrationForm.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, within } from '@storybook/test';
+
+import RegistrationForm from './RegistrationForm.svelte';
+
+const meta: Meta<typeof RegistrationForm> = {
+  component: RegistrationForm,
+};
+
+export default meta;
+type Story = StoryObj<typeof RegistrationForm>;
+
+/*
+ * See https://storybook.js.org/docs/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const FilledForm: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const emailInput = canvas.getByLabelText('email', {
+      selector: 'input',
+    });
+
+    await userEvent.type(emailInput, 'example-email@email.com', {
+      delay: 100,
+    });
+
+    const passwordInput = canvas.getByLabelText('password', {
+      selector: 'input',
+    });
+
+    await userEvent.type(passwordInput, 'ExamplePassword', {
+      delay: 100,
+    });
+    // See https://storybook.js.org/docs/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    const submitButton = canvas.getByRole('button');
+
+    await userEvent.click(submitButton);
+  },
+};
+```
+
 ```ts filename="RegistrationForm.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -215,6 +483,7 @@ export const FilledForm = {
 
 ```ts filename="RegistrationForm.stories.ts" renderer="web-components" language="ts"
 import type { Meta, StoryObj } from '@storybook/web-components';
+
 import { userEvent, within } from '@storybook/test';
 
 const meta: Meta = {
@@ -254,4 +523,3 @@ export const FilledForm: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/reuse-args-test.md b/docs/_snippets/reuse-args-test.md
index 77784d643a8d..a394512e6eb5 100644
--- a/docs/_snippets/reuse-args-test.md
+++ b/docs/_snippets/reuse-args-test.md
@@ -34,7 +34,7 @@ test('reuses args from composed story', () => {
 });
 ```
 
-```js filename="tests/Button.test.js" renderer="vue" language="js" tabTitle="3"
+```js filename="tests/Button.test.js" renderer="vue" language="js"
 import { render, screen } from '@testing-library/vue';
 
 import { composeStories } from '@storybook/vue3';
@@ -52,7 +52,7 @@ test('reuses args from composed story', () => {
 });
 ```
 
-```ts filename="tests/Button.test.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="tests/Button.test.ts" renderer="vue" language="ts"
 import { render, screen } from '@testing-library/vue';
 
 import { composeStories } from '@storybook/vue3';
@@ -69,4 +69,3 @@ test('reuses args from composed story', () => {
   expect(buttonElement.textContent).toEqual(Primary.args.label);
 });
 ```
-
diff --git a/docs/_snippets/rsc-feature-flag.md b/docs/_snippets/rsc-feature-flag.md
index 4d0178c9ae03..9a2db0873a33 100644
--- a/docs/_snippets/rsc-feature-flag.md
+++ b/docs/_snippets/rsc-feature-flag.md
@@ -19,4 +19,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/rsc-parameter-in-meta.md b/docs/_snippets/rsc-parameter-in-meta.md
index cf593965f0f4..0820be0dd2ba 100644
--- a/docs/_snippets/rsc-parameter-in-meta.md
+++ b/docs/_snippets/rsc-parameter-in-meta.md
@@ -36,4 +36,3 @@ const meta: Meta<typeof MyServerComponent> = {
 };
 export default meta;
 ```
-
diff --git a/docs/_snippets/seo-description.md b/docs/_snippets/seo-description.md
index 04542626f0f6..ddb3af5fe47a 100644
--- a/docs/_snippets/seo-description.md
+++ b/docs/_snippets/seo-description.md
@@ -1,6 +1,3 @@
-```html renderer="common" language="ts" tabTitle="html"
-{/* .storybook/manager-head.html */}
-
+```html filename=".storybook/manager-head.html" renderer="common" language="js"
 <meta name="description" content="Components for my awesome project" key="desc" />
 ```
-
diff --git a/docs/_snippets/seo-noindex.md b/docs/_snippets/seo-noindex.md
index a373cb5d3bd1..2904002fef54 100644
--- a/docs/_snippets/seo-noindex.md
+++ b/docs/_snippets/seo-noindex.md
@@ -1,6 +1,3 @@
-```html renderer="common" language="ts" tabTitle="html"
-{/* .storybook/manager-head.html */}
-
+```html filename=".storybook/manager-head.html" renderer="common" language="js"
 <meta name="robots" content="noindex" />
 ```
-
diff --git a/docs/_snippets/simple-page-implementation.md b/docs/_snippets/simple-page-implementation.md
index 33b6dd0e246a..a44ac8ab1b16 100644
--- a/docs/_snippets/simple-page-implementation.md
+++ b/docs/_snippets/simple-page-implementation.md
@@ -100,9 +100,7 @@ function DocumentScreen({ user, document, subdocuments }) {
 }
 ```
 
-```html renderer="svelte" language="js"
-{/* YourPage.svelte */}
-
+```svelte filename="YourPage.svelte" renderer="svelte" language="js"
 <script>
   import PageLayout from './PageLayout.svelte';
   import DocumentHeader from './DocumentHeader.svelte';
@@ -121,9 +119,7 @@ function DocumentScreen({ user, document, subdocuments }) {
 </div>
 ```
 
-```html renderer="svelte" language="ts"
-{/* YourPage.svelte */}
-
+```svelte filename="YourPage.svelte" renderer="svelte" language="ts"
 <script lang="ts">
   import PageLayout from './PageLayout.svelte';
   import DocumentHeader from './DocumentHeader.svelte';
@@ -142,9 +138,7 @@ function DocumentScreen({ user, document, subdocuments }) {
 </div>
 ```
 
-```html renderer="vue" language="js" tabTitle="3"
-{/* YourPage.vue */}
-
+```html filename="YourPage.vue" renderer="vue" language="js"
 <template>
   <PageLayout :user="user">
     <DocumentHeader :document="document" />
@@ -254,4 +248,3 @@ declare global {
   }
 }
 ```
-
diff --git a/docs/_snippets/single-story-test.md b/docs/_snippets/single-story-test.md
index 5ba0de1dbef4..77466b35b67b 100644
--- a/docs/_snippets/single-story-test.md
+++ b/docs/_snippets/single-story-test.md
@@ -44,7 +44,7 @@ test('Validates form', async () => {
 });
 ```
 
-```js filename="tests/Form.test.js" renderer="vue" language="js" tabTitle="3"
+```js filename="tests/Form.test.js" renderer="vue" language="js"
 import { fireEvent, screen } from '@testing-library/vue';
 
 import { composeStory } from '@storybook/vue3';
@@ -67,7 +67,7 @@ test('Validates form', async () => {
 });
 ```
 
-```ts filename="tests/Form.test.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="tests/Form.test.ts" renderer="vue" language="ts"
 import { fireEvent, screen } from '@testing-library/vue';
 
 import { composeStory } from '@storybook/vue3';
diff --git a/docs/_snippets/snapshot-tests-portable-stories.md b/docs/_snippets/snapshot-tests-portable-stories.md
index dfbd20efbde9..98db81fb07e0 100644
--- a/docs/_snippets/snapshot-tests-portable-stories.md
+++ b/docs/_snippets/snapshot-tests-portable-stories.md
@@ -12,7 +12,7 @@ const compose = (entry) => {
     return composeStories(entry);
   } catch (e) {
     throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`
+      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`,
     );
   }
 };
@@ -20,7 +20,7 @@ const compose = (entry) => {
 function getAllStoryFiles() {
   // Place the glob you want to match your stories files
   const storyFiles = glob.sync(
-    path.join(__dirname, 'stories/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}')
+    path.join(__dirname, 'stories/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}'),
   );
 
   return storyFiles.map((filePath) => {
@@ -42,7 +42,7 @@ describe('Stories Snapshots', () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`,
         );
       }
 
@@ -81,7 +81,7 @@ const compose = (entry: StoryFile): ReturnType<typeof composeStories<StoryFile>>
     return composeStories(entry);
   } catch (e) {
     throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`
+      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`,
     );
   }
 };
@@ -89,7 +89,7 @@ const compose = (entry: StoryFile): ReturnType<typeof composeStories<StoryFile>>
 function getAllStoryFiles() {
   // Place the glob you want to match your stories files
   const storyFiles = glob.sync(
-    path.join(__dirname, 'stories/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}')
+    path.join(__dirname, 'stories/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}'),
   );
 
   return storyFiles.map((filePath) => {
@@ -111,7 +111,7 @@ describe('Stories Snapshots', () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`,
         );
       }
 
@@ -142,7 +142,7 @@ const compose = (entry) => {
     return composeStories(entry);
   } catch (error) {
     throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${error}`
+      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${error}`,
     );
   }
 };
@@ -151,7 +151,7 @@ function getAllStoryFiles() {
   const storyFiles = Object.entries(
     import.meta.glob('./stories/**/*.(stories|story).@(js|jsx|mjs|ts|tsx)', {
       eager: true,
-    })
+    }),
   );
 
   return storyFiles.map(([filePath, storyFile]) => {
@@ -170,7 +170,7 @@ describe('Stories Snapshots', () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`,
         );
       }
 
@@ -209,7 +209,7 @@ const compose = (entry: StoryFile): ReturnType<typeof composeStories<StoryFile>>
     return composeStories(entry);
   } catch (e) {
     throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`
+      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`,
     );
   }
 };
@@ -219,7 +219,7 @@ function getAllStoryFiles() {
   const storyFiles = Object.entries(
     import.meta.glob<StoryFile>('./stories/**/*.(stories|story).@(js|jsx|mjs|ts|tsx)', {
       eager: true,
-    })
+    }),
   );
 
   return storyFiles.map(([filePath, storyFile]) => {
@@ -239,7 +239,7 @@ describe('Stories Snapshots', () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`,
         );
       }
 
diff --git a/docs/_snippets/storybook-a11y-add.md b/docs/_snippets/storybook-a11y-add.md
new file mode 100644
index 000000000000..f95b3f3b5b66
--- /dev/null
+++ b/docs/_snippets/storybook-a11y-add.md
@@ -0,0 +1,11 @@
+```shell renderer="common" language="js" packageManager="npm"
+npx storybook add @storybook/addon-a11y
+```
+
+```shell renderer="common" language="js" packageManager="pnpm"
+pnpm exec storybook add @storybook/addon-a11y
+```
+
+```shell renderer="common" language="js" packageManager="yarn"
+yarn exec storybook add @storybook/addon-a11y
+```
diff --git a/docs/_snippets/storybook-a11y-install.md b/docs/_snippets/storybook-a11y-install.md
index 066faccd6c8f..5837429854f8 100644
--- a/docs/_snippets/storybook-a11y-install.md
+++ b/docs/_snippets/storybook-a11y-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/addon-a11y
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn add --dev @storybook/addon-a11y
 ```
-
diff --git a/docs/_snippets/storybook-a11y-register.md b/docs/_snippets/storybook-a11y-register.md
index e29f5c9bde9e..774d14622063 100644
--- a/docs/_snippets/storybook-a11y-register.md
+++ b/docs/_snippets/storybook-a11y-register.md
@@ -25,4 +25,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-add-command.md b/docs/_snippets/storybook-add-command.md
index b05aae7b3e19..efc1547b33ea 100644
--- a/docs/_snippets/storybook-add-command.md
+++ b/docs/_snippets/storybook-add-command.md
@@ -9,4 +9,3 @@ pnpm dlx storybook@latest add @storybook/addon-a11y
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@latest add @storybook/addon-a11y
 ```
-
diff --git a/docs/_snippets/storybook-addon-a11y-component-config.md b/docs/_snippets/storybook-addon-a11y-component-config.md
index 3b54d8d96e63..5d84203b21c8 100644
--- a/docs/_snippets/storybook-addon-a11y-component-config.md
+++ b/docs/_snippets/storybook-addon-a11y-component-config.md
@@ -24,6 +24,10 @@ const meta: Meta<MyComponent> = {
         ],
       },
       options: {},
+    },
+  },
+  globals: {
+    a11y: {
       manual: true,
     },
   },
@@ -32,6 +36,78 @@ const meta: Meta<MyComponent> = {
 export default meta;
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+    parameters: {
+      a11y: {
+        // Optional selector to inspect
+        element: '#storybook-root',
+        config: {
+          rules: [
+            {
+              // The autocomplete rule will not run based on the CSS selector provided
+              id: 'autocomplete-valid',
+              selector: '*:not([autocomplete="nope"])',
+            },
+            {
+              // Setting the enabled option to false will disable checks for this particular rule on all stories.
+              id: 'image-alt',
+              enabled: false,
+            },
+          ],
+        },
+        options: {}
+      },
+    },
+    globals: {
+      a11y: {
+        manual: true,
+      },
+    },
+  });
+</script>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import MyComponent from './MyComponent.svelte';
+
+export default {
+  component: MyComponent,
+  parameters: {
+    a11y: {
+      // Optional selector to inspect
+      element: '#storybook-root',
+      config: {
+        rules: [
+          {
+            // The autocomplete rule will not run based on the CSS selector provided
+            id: 'autocomplete-valid',
+            selector: '*:not([autocomplete="nope"])',
+          },
+          {
+            // Setting the enabled option to false will disable checks for this particular rule on all stories.
+            id: 'image-alt',
+            enabled: false,
+          },
+        ],
+      },
+      options: {},
+    },
+  },
+  globals: {
+    a11y: {
+      manual: true,
+    },
+  },
+};
+```
+
 ```js filename="MyComponent.stories.js|jsx" renderer="common" language="js"
 import { MyComponent } from './MyComponent';
 
@@ -56,12 +132,92 @@ export default {
         ],
       },
       options: {},
+    },
+  },
+  globals: {
+    a11y: {
       manual: true,
     },
   },
 };
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+    parameters: {
+      a11y: {
+        // Optional selector to inspect
+        element: '#storybook-root',
+        config: {
+          rules: [
+            {
+              // The autocomplete rule will not run based on the CSS selector provided
+              id: 'autocomplete-valid',
+              selector: '*:not([autocomplete="nope"])',
+            },
+            {
+              // Setting the enabled option to false will disable checks for this particular rule on all stories.
+              id: 'image-alt',
+              enabled: false,
+            },
+          ],
+        },
+        options: {},
+      },
+    },
+    globals: {
+      a11y: {
+        manual: true,
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta = {
+  component: MyComponent,
+  parameters: {
+    a11y: {
+      // Optional selector to inspect
+      element: '#storybook-root',
+      config: {
+        rules: [
+          {
+            // The autocomplete rule will not run based on the CSS selector provided
+            id: 'autocomplete-valid',
+            selector: '*:not([autocomplete="nope"])',
+          },
+          {
+            // Setting the enabled option to false will disable checks for this particular rule on all stories.
+            id: 'image-alt',
+            enabled: false,
+          },
+        ],
+      },
+      options: {},
+    },
+  },
+  globals: {
+    a11y: {
+      manual: true,
+    },
+  },
+} satisfies Meta<typeof MyComponent>;
+
+export default meta;
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts-4-9"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -89,6 +245,10 @@ const meta = {
         ],
       },
       options: {},
+    },
+  },
+  globals: {
+    a11y: {
       manual: true,
     },
   },
@@ -97,6 +257,82 @@ const meta = {
 export default meta;
 ```
 
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+    parameters: {
+      a11y: {
+        // Optional selector to inspect
+        element: '#storybook-root',
+        config: {
+          rules: [
+            {
+              // The autocomplete rule will not run based on the CSS selector provided
+              id: 'autocomplete-valid',
+              selector: '*:not([autocomplete="nope"])',
+            },
+            {
+              // Setting the enabled option to false will disable checks for this particular rule on all stories.
+              id: 'image-alt',
+              enabled: false,
+            },
+          ],
+        },
+        options: {},
+      },
+    },
+    globals: {
+      a11y: {
+        manual: true,
+      },
+    },
+  });
+</script>
+```
+
+```ts filename="MyComponent.stories.ts|tsx" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta: Meta<typeof MyComponent> = {
+  component: MyComponent,
+  parameters: {
+    a11y: {
+      // Optional selector to inspect
+      element: '#storybook-root',
+      config: {
+        rules: [
+          {
+            // The autocomplete rule will not run based on the CSS selector provided
+            id: 'autocomplete-valid',
+            selector: '*:not([autocomplete="nope"])',
+          },
+          {
+            // Setting the enabled option to false will disable checks for this particular rule on all stories.
+            id: 'image-alt',
+            enabled: false,
+          },
+        ],
+      },
+      options: {},
+    },
+  },
+  globals: {
+    a11y: {
+      manual: true,
+    },
+  },
+};
+
+export default meta;
+```
+
 ```ts filename="MyComponent.stories.ts|tsx" renderer="common" language="ts"
 // Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/your-framework';
@@ -124,6 +360,10 @@ const meta: Meta<typeof MyComponent> = {
         ],
       },
       options: {},
+    },
+  },
+  globals: {
+    a11y: {
       manual: true,
     },
   },
@@ -154,6 +394,10 @@ export default {
         ],
       },
       options: {},
+    },
+  },
+  globals: {
+    a11y: {
       manual: true,
     },
   },
@@ -184,6 +428,10 @@ const meta: Meta = {
         ],
       },
       options: {},
+    },
+  },
+  globals: {
+    a11y: {
       manual: true,
     },
   },
@@ -191,4 +439,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/storybook-addon-a11y-disable.md b/docs/_snippets/storybook-addon-a11y-disable.md
index 21df7df27a7f..998a1f91c0c2 100644
--- a/docs/_snippets/storybook-addon-a11y-disable.md
+++ b/docs/_snippets/storybook-addon-a11y-disable.md
@@ -11,10 +11,10 @@ export default meta;
 type Story = StoryObj<MyComponent>;
 
 export const NonA11yStory: Story = {
-  parameters: {
+  globals: {
     a11y: {
-      // This option disables all a11y checks on this story
-      disabled: true,
+      // This option disables all automatic a11y checks on this story
+      manual: true,
     },
   },
 };
@@ -28,10 +28,10 @@ export default {
 };
 
 export const NonA11yStory = {
-  parameters: {
+  globals: {
     a11y: {
-      // This option disables all a11y checks on this story
-      disable: true,
+      // This option disables all automatic a11y checks on this story
+      manual: true,
     },
   },
 };
@@ -50,10 +50,10 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const NonA11yStory: Story = {
-  parameters: {
+  globals: {
     a11y: {
-      // This option disables all a11y checks on this story
-      disable: true,
+      // This option disables all automatic a11y checks on this story
+      manual: true,
     },
   },
 };
@@ -72,16 +72,38 @@ export default meta;
 type Story = StoryObj<typeof MyComponent>;
 
 export const NonA11yStory: Story = {
-  parameters: {
+  globals: {
     a11y: {
-      // This option disables all a11y checks on this story
-      disable: true,
+      // This option disables all automatic a11y checks on this story
+      manual: true,
     },
   },
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="NonA11yStory"
+  globals={{
+    a11y: {
+      // This option disables all automatic a11y checks on this story
+      manual: true,
+    },
+  }}
+/>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import MyComponent from './MyComponent.svelte';
 
 export default {
@@ -89,16 +111,38 @@ export default {
 };
 
 export const NonA11yStory = {
-  parameters: {
+  globals: {
     a11y: {
-      // This option disables all a11y checks on this story
-      disable: true,
+      // This option disables all automatic a11y checks on this story
+      manual: true,
     },
   },
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="NonA11yStory"
+  globals={{
+    a11y: {
+      // This option disables all automatic a11y checks on this story
+      manual: true,
+    },
+  }}
+/>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import MyComponent from './MyComponent.svelte';
@@ -111,16 +155,38 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const NonA11yStory: Story = {
-  parameters: {
+  globals: {
     a11y: {
-      // This option disables all a11y checks on this story
-      disable: true,
+      // This option disables all automatic a11y checks on this story
+      manual: true,
     },
   },
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="NonA11yStory"
+  globals={{
+    a11y: {
+      // This option disables all automatic a11y checks on this story
+      manual: true,
+    },
+  }}
+/>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import MyComponent from './MyComponent.svelte';
@@ -133,10 +199,10 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const NonA11yStory: Story = {
-  parameters: {
+  globals: {
     a11y: {
-      // This option disables all a11y checks on this story
-      disable: true,
+      // This option disables all automatic a11y checks on this story
+      manual: true,
     },
   },
 };
@@ -150,10 +216,10 @@ export default {
 };
 
 export const NonA11yStory = {
-  parameters: {
+  globals: {
     a11y: {
-      // This option disables all a11y checks on this story
-      disable: true,
+      // This option disables all automatic a11y checks on this story
+      manual: true,
     },
   },
 };
@@ -172,10 +238,10 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const NonA11yStory: Story = {
-  parameters: {
+  globals: {
     a11y: {
-      // This option disables all a11y checks on this story
-      disable: true,
+      // This option disables all automatic a11y checks on this story
+      manual: true,
     },
   },
 };
@@ -194,10 +260,10 @@ export default meta;
 type Story = StoryObj<typeof MyComponent>;
 
 export const NonA11yStory: Story = {
-  parameters: {
+  globals: {
     a11y: {
-      // This option disables all a11y checks on this story
-      disable: true,
+      // This option disables all automatic a11y checks on this story
+      manual: true,
     },
   },
 };
@@ -209,10 +275,10 @@ export default {
 };
 
 export const ExampleStory = {
-  parameters: {
+  globals: {
     a11y: {
-      // This option disables all a11y checks on this story
-      disable: true,
+      // This option disables all automatic a11y checks on this story
+      manual: true,
     },
   },
 };
@@ -229,12 +295,11 @@ export default meta;
 type Story = StoryObj;
 
 export const ExampleStory: Story = {
-  parameters: {
+  globals: {
     a11y: {
-      // This option disables all a11y checks on this story
-      disable: true,
+      // This option disables all automatic a11y checks on this story
+      manual: true,
     },
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-addon-a11y-global-config.md b/docs/_snippets/storybook-addon-a11y-global-config.md
index aca1ec05390a..bd508791adc4 100644
--- a/docs/_snippets/storybook-addon-a11y-global-config.md
+++ b/docs/_snippets/storybook-addon-a11y-global-config.md
@@ -20,6 +20,10 @@ export default {
       },
       // Axe's options parameter
       options: {},
+    },
+  },
+  globals: {
+    a11y: {
       // Optional flag to prevent the automatic check
       manual: true,
     },
@@ -52,6 +56,10 @@ const preview: Preview = {
       },
       // Axe's options parameter
       options: {},
+    },
+  },
+  globals: {
+    a11y: {
       // Optional flag to prevent the automatic check
       manual: true,
     },
@@ -60,4 +68,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-addon-a11y-story-config.md b/docs/_snippets/storybook-addon-a11y-story-config.md
index 5d556fb37551..b20c4f3b4359 100644
--- a/docs/_snippets/storybook-addon-a11y-story-config.md
+++ b/docs/_snippets/storybook-addon-a11y-story-config.md
@@ -28,7 +28,13 @@ export const ExampleStory: Story = {
           },
         ],
       },
+      // Axe's options parameter
       options: {},
+    },
+  },
+  globals: {
+    a11y: {
+      // Optional flag to prevent the automatic check
       manual: true,
     },
   },
@@ -60,7 +66,13 @@ export const ExampleStory = {
           },
         ],
       },
+      // Axe's options parameter
       options: {},
+    },
+  },
+  globals: {
+    a11y: {
+      // Optional flag to prevent the automatic check
       manual: true,
     },
   },
@@ -97,7 +109,13 @@ export const ExampleStory: Story = {
           },
         ],
       },
+      // Axe's options parameter
       options: {},
+    },
+  },
+  globals: {
+    a11y: {
+      // Optional flag to prevent the automatic check
       manual: true,
     },
   },
@@ -134,14 +152,57 @@ export const ExampleStory: Story = {
           },
         ],
       },
+      // Axe's options parameter
       options: {},
+    },
+  },
+  globals: {
+    a11y: {
+      // Optional flag to prevent the automatic check
       manual: true,
     },
   },
 };
 ```
 
-```js filename="MyComponent.stories.js" renderer="svelte" language="js"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="ExampleStory"
+  parameters={{
+    a11y: {
+      element: '#storybook-root',
+      config: {
+        rules: [
+          {
+            // The autocomplete rule will not run based on the CSS selector provided
+            id: 'autocomplete-valid',
+            selector: '*:not([autocomplete="nope"])',
+          },
+          {
+            // Setting the enabled option to false will disable checks for this particular rule on all stories.
+            id: 'image-alt',
+            enabled: false,
+          },
+        ],
+      },
+      options: {},
+      manual: true,
+    },
+  }}
+/>
+```
+
+```js filename="MyComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import MyComponent from './MyComponent.svelte';
 
 export default {
@@ -173,7 +234,49 @@ export const ExampleStory = {
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="ExampleStory"
+  parameters={{
+    a11y: {
+      element: '#storybook-root',
+      config: {
+        rules: [
+          {
+            // The autocomplete rule will not run based on the CSS selector provided
+            id: 'autocomplete-valid',
+            selector: '*:not([autocomplete="nope"])',
+          },
+          {
+            // Setting the enabled option to false will disable checks for this particular rule on all stories.
+            id: 'image-alt',
+            enabled: false,
+          },
+        ],
+      },
+      options: {},
+    },
+  }}
+  globals={{
+    a11y: {
+      // Optional flag to prevent the automatic check
+      manual: true,
+    },
+  }}
+/>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import MyComponent from './MyComponent.svelte';
@@ -203,14 +306,62 @@ export const ExampleStory: Story = {
           },
         ],
       },
+      // Axe's options parameter
       options: {},
+    },
+  },
+  globals: {
+    a11y: {
+      // Optional flag to prevent the automatic check
       manual: true,
     },
   },
 };
 ```
 
-```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts"
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="ExampleStory"
+  parameters={{
+    a11y: {
+      element: '#storybook-root',
+      config: {
+        rules: [
+          {
+            // The autocomplete rule will not run based on the CSS selector provided
+            id: 'autocomplete-valid',
+            selector: '*:not([autocomplete="nope"])',
+          },
+          {
+            // Setting the enabled option to false will disable checks for this particular rule on all stories.
+            id: 'image-alt',
+            enabled: false,
+          },
+        ],
+      },
+      options: {},
+    },
+  }}
+  globals={{
+    a11y: {
+      // Optional flag to prevent the automatic check
+      manual: true,
+    },
+  }}
+/>
+```
+
+```ts filename="MyComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import MyComponent from './MyComponent.svelte';
@@ -240,7 +391,13 @@ export const ExampleStory: Story = {
           },
         ],
       },
+      // Axe's options parameter
       options: {},
+    },
+  },
+  globals: {
+    a11y: {
+      // Optional flag to prevent the automatic check
       manual: true,
     },
   },
@@ -272,7 +429,13 @@ export const ExampleStory = {
           },
         ],
       },
+      // Axe's options parameter
       options: {},
+    },
+  },
+  globals: {
+    a11y: {
+      // Optional flag to prevent the automatic check
       manual: true,
     },
   },
@@ -309,7 +472,13 @@ export const ExampleStory = {
           },
         ],
       },
+      // Axe's options parameter
       options: {},
+    },
+  },
+  globals: {
+    a11y: {
+      // Optional flag to prevent the automatic check
       manual: true,
     },
   },
@@ -346,7 +515,13 @@ export const ExampleStory = {
           },
         ],
       },
+      // Axe's options parameter
       options: {},
+    },
+  },
+  globals: {
+    a11y: {
+      // Optional flag to prevent the automatic check
       manual: true,
     },
   },
@@ -376,7 +551,13 @@ export const ExampleStory = {
           },
         ],
       },
+      // Axe's options parameter
       options: {},
+    },
+  },
+  globals: {
+    a11y: {
+      // Optional flag to prevent the automatic check
       manual: true,
     },
   },
@@ -411,10 +592,15 @@ export const ExampleStory: Story = {
           },
         ],
       },
+      // Axe's options parameter
       options: {},
+    },
+  },
+  globals: {
+    a11y: {
+      // Optional flag to prevent the automatic check
       manual: true,
     },
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-addon-a11y-test-setup.md b/docs/_snippets/storybook-addon-a11y-test-setup.md
new file mode 100644
index 000000000000..6419c6bf70aa
--- /dev/null
+++ b/docs/_snippets/storybook-addon-a11y-test-setup.md
@@ -0,0 +1,121 @@
+```ts filename=".storybook/vitest.setup.ts" renderer="react" language="ts"
+import { beforeAll } from 'vitest';
+
+import { setProjectAnnotations } from '@storybook/react';
+
+// Import the a11y addon annotations
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
+
+// Optionally import your own annotations
+import * as projectAnnotations from './preview';
+
+const project = setProjectAnnotations([
+  // Add the a11y addon annotations
+  a11yAddonAnnotations,
+  projectAnnotations,
+]);
+
+beforeAll(project.beforeAll);
+```
+
+```js filename=".storybook/vitest.setup.js" renderer="react" language="js"
+import { beforeAll } from 'vitest';
+
+import { setProjectAnnotations } from '@storybook/react';
+
+// Import the a11y addon annotations
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
+
+// Optionally import your own annotations
+import * as projectAnnotations from './preview';
+
+const project = setProjectAnnotations([
+  // Add the a11y addon annotations
+  a11yAddonAnnotations,
+  projectAnnotations,
+]);
+
+beforeAll(project.beforeAll);
+```
+
+```ts filename=".storybook/vitest.setup.ts" renderer="svelte" language="ts"
+import { beforeAll } from 'vitest';
+
+// Replace @storybook/svelte with @storybook/sveltekit if you are using SvelteKit
+import { setProjectAnnotations } from '@storybook/svelte';
+
+// Import the a11y addon annotations
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
+
+// Optionally import your own annotations
+import * as projectAnnotations from './preview';
+
+const project = setProjectAnnotations([
+  // Add the a11y addon annotations
+  a11yAddonAnnotations,
+  projectAnnotations,
+]);
+
+beforeAll(project.beforeAll);
+```
+
+```js filename=".storybook/vitest.setup.js" renderer="svelte" language="js"
+import { beforeAll } from 'vitest';
+
+// Replace @storybook/svelte with @storybook/sveltekit if you are using SvelteKit
+import { setProjectAnnotations } from '@storybook/svelte';
+
+// Import the a11y addon annotations
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
+
+// Optionally import your own annotations
+import * as projectAnnotations from './preview';
+
+const project = setProjectAnnotations([
+  // Add the a11y addon annotations
+  a11yAddonAnnotations,
+  projectAnnotations,
+]);
+
+beforeAll(project.beforeAll);
+```
+
+```ts filename=".storybook/vitest.setup.ts" renderer="vue" language="ts"
+import { beforeAll } from 'vitest';
+
+import { setProjectAnnotations } from '@storybook/vue3';
+
+// Import the a11y addon annotations
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
+
+// Optionally import your own annotations
+import * as projectAnnotations from './preview';
+
+const project = setProjectAnnotations([
+  // Add the a11y addon annotations
+  a11yAddonAnnotations,
+  projectAnnotations,
+]);
+
+beforeAll(project.beforeAll);
+```
+
+```js filename=".storybook/vitest.setup.js" renderer="vue" language="js"
+import { beforeAll } from 'vitest';
+
+import { setProjectAnnotations } from '@storybook/vue3';
+
+// Import the a11y addon annotations
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
+
+// Optionally import your own annotations
+import * as projectAnnotations from './preview';
+
+const project = setProjectAnnotations([
+  // Add the a11y addon annotations
+  a11yAddonAnnotations,
+  projectAnnotations,
+]);
+
+beforeAll(project.beforeAll);
+```
diff --git a/docs/_snippets/storybook-addon-actions-install.md b/docs/_snippets/storybook-addon-actions-install.md
index 65b3d1f57f51..67330880ee57 100644
--- a/docs/_snippets/storybook-addon-actions-install.md
+++ b/docs/_snippets/storybook-addon-actions-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/addon-actions
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn add --dev @storybook/addon-actions
 ```
-
diff --git a/docs/_snippets/storybook-addon-compiler-babel-auto-install.md b/docs/_snippets/storybook-addon-compiler-babel-auto-install.md
index 7b16b4eff4ac..21d3cac26c54 100644
--- a/docs/_snippets/storybook-addon-compiler-babel-auto-install.md
+++ b/docs/_snippets/storybook-addon-compiler-babel-auto-install.md
@@ -9,4 +9,3 @@ pnpm dlx storybook@latest add @storybook/addon-webpack5-compiler-babel
 ```sh renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@latest add @storybook/addon-webpack5-compiler-babel
 ```
-
diff --git a/docs/_snippets/storybook-addon-compiler-swc-auto-install.md b/docs/_snippets/storybook-addon-compiler-swc-auto-install.md
index 6514413071b4..eeb0fd91effd 100644
--- a/docs/_snippets/storybook-addon-compiler-swc-auto-install.md
+++ b/docs/_snippets/storybook-addon-compiler-swc-auto-install.md
@@ -9,4 +9,3 @@ pnpm dlx storybook@latest add @storybook/addon-webpack5-compiler-swc
 ```sh renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@latest add @storybook/addon-webpack5-compiler-swc
 ```
-
diff --git a/docs/_snippets/storybook-addon-controls-custom-matchers.md b/docs/_snippets/storybook-addon-controls-custom-matchers.md
index b3034ecc8fb4..80b0358eedc7 100644
--- a/docs/_snippets/storybook-addon-controls-custom-matchers.md
+++ b/docs/_snippets/storybook-addon-controls-custom-matchers.md
@@ -28,4 +28,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-addon-css-example.md b/docs/_snippets/storybook-addon-css-example.md
index aa1804c4345a..43717ddff9b7 100644
--- a/docs/_snippets/storybook-addon-css-example.md
+++ b/docs/_snippets/storybook-addon-css-example.md
@@ -400,4 +400,3 @@ export default function outlineCSS(selector: string) {
     }`;
 }
 ```
-
diff --git a/docs/_snippets/storybook-addon-css-helpers.md b/docs/_snippets/storybook-addon-css-helpers.md
index ca26b48c96aa..6042092b8a4d 100644
--- a/docs/_snippets/storybook-addon-css-helpers.md
+++ b/docs/_snippets/storybook-addon-css-helpers.md
@@ -28,4 +28,3 @@ export const addOutlineStyles = (selector: string, css: string) => {
   }
 };
 ```
-
diff --git a/docs/_snippets/storybook-addon-disable-addon.md b/docs/_snippets/storybook-addon-disable-addon.md
index ab13eb19dd0c..14425334d383 100644
--- a/docs/_snippets/storybook-addon-disable-addon.md
+++ b/docs/_snippets/storybook-addon-disable-addon.md
@@ -8,4 +8,3 @@ addons.register(ADDON_ID, () => {
   });
 });
 ```
-
diff --git a/docs/_snippets/storybook-addon-essentials-install.md b/docs/_snippets/storybook-addon-essentials-install.md
index 9356730d029f..bdae3e81827d 100644
--- a/docs/_snippets/storybook-addon-essentials-install.md
+++ b/docs/_snippets/storybook-addon-essentials-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/addon-essentials
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn add --dev @storybook/addon-essentials
 ```
-
diff --git a/docs/_snippets/storybook-addon-interactions-addon-full-install.md b/docs/_snippets/storybook-addon-interactions-addon-full-install.md
index 52fee5c9399c..7b1fdf2b596c 100644
--- a/docs/_snippets/storybook-addon-interactions-addon-full-install.md
+++ b/docs/_snippets/storybook-addon-interactions-addon-full-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/test @storybook/addon-interactions
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn add --dev @storybook/test @storybook/addon-interactions
 ```
-
diff --git a/docs/_snippets/storybook-addon-load-external-addons-preset.md b/docs/_snippets/storybook-addon-load-external-addons-preset.md
index c5ab753a784e..2f269cc80d89 100644
--- a/docs/_snippets/storybook-addon-load-external-addons-preset.md
+++ b/docs/_snippets/storybook-addon-load-external-addons-preset.md
@@ -12,4 +12,3 @@ export default {
   config,
 };
 ```
-
diff --git a/docs/_snippets/storybook-addon-manager-initial-state.md b/docs/_snippets/storybook-addon-manager-initial-state.md
index edfc8c4cebad..71d9fed8fc99 100644
--- a/docs/_snippets/storybook-addon-manager-initial-state.md
+++ b/docs/_snippets/storybook-addon-manager-initial-state.md
@@ -14,4 +14,3 @@ addons.register(ADDON_ID, () => {
   });
 });
 ```
-
diff --git a/docs/_snippets/storybook-addon-panel-example.md b/docs/_snippets/storybook-addon-panel-example.md
index d4a238b56d29..d3ad9292c3c9 100644
--- a/docs/_snippets/storybook-addon-panel-example.md
+++ b/docs/_snippets/storybook-addon-panel-example.md
@@ -18,4 +18,3 @@ addons.register('my/panel', () => {
   });
 });
 ```
-
diff --git a/docs/_snippets/storybook-addon-panel-initial.md b/docs/_snippets/storybook-addon-panel-initial.md
index db5a41c043d3..cf333e77f909 100644
--- a/docs/_snippets/storybook-addon-panel-initial.md
+++ b/docs/_snippets/storybook-addon-panel-initial.md
@@ -20,4 +20,3 @@ addons.register(ADDON_ID, (api) => {
   });
 });
 ```
-
diff --git a/docs/_snippets/storybook-addon-preset-example.md b/docs/_snippets/storybook-addon-preset-example.md
index a3d1576ff187..15e574b8afdc 100644
--- a/docs/_snippets/storybook-addon-preset-example.md
+++ b/docs/_snippets/storybook-addon-preset-example.md
@@ -18,4 +18,3 @@ export default {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-addon-release.md b/docs/_snippets/storybook-addon-release.md
index 9f259853945a..ec5283958eb2 100644
--- a/docs/_snippets/storybook-addon-release.md
+++ b/docs/_snippets/storybook-addon-release.md
@@ -9,4 +9,3 @@ pnpm run release
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn release
 ```
-
diff --git a/docs/_snippets/storybook-addon-run-dev-mode.md b/docs/_snippets/storybook-addon-run-dev-mode.md
index 5d42f499948f..5970f3f10942 100644
--- a/docs/_snippets/storybook-addon-run-dev-mode.md
+++ b/docs/_snippets/storybook-addon-run-dev-mode.md
@@ -9,4 +9,3 @@ pnpm run start
 ```sh renderer="common" language="js" packageManager="yarn"
 yarn start
 ```
-
diff --git a/docs/_snippets/storybook-addon-tab-example.md b/docs/_snippets/storybook-addon-tab-example.md
index 3a8bfe4e8c99..018512d70638 100644
--- a/docs/_snippets/storybook-addon-tab-example.md
+++ b/docs/_snippets/storybook-addon-tab-example.md
@@ -15,4 +15,3 @@ addons.register('my-addon', () => {
   });
 });
 ```
-
diff --git a/docs/_snippets/storybook-addon-themes-classname-decorator.md b/docs/_snippets/storybook-addon-themes-classname-decorator.md
index e631a59d6018..9537c10e27fe 100644
--- a/docs/_snippets/storybook-addon-themes-classname-decorator.md
+++ b/docs/_snippets/storybook-addon-themes-classname-decorator.md
@@ -61,4 +61,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-addon-themes-data-attribute-decorator.md b/docs/_snippets/storybook-addon-themes-data-attribute-decorator.md
index df1c98a1ba4a..80f962858e22 100644
--- a/docs/_snippets/storybook-addon-themes-data-attribute-decorator.md
+++ b/docs/_snippets/storybook-addon-themes-data-attribute-decorator.md
@@ -64,4 +64,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-addon-themes-jsx-provider-decorator.md b/docs/_snippets/storybook-addon-themes-jsx-provider-decorator.md
index d1410d95fff9..2a6fa61d7e4a 100644
--- a/docs/_snippets/storybook-addon-themes-jsx-provider-decorator.md
+++ b/docs/_snippets/storybook-addon-themes-jsx-provider-decorator.md
@@ -87,4 +87,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-addon-tool-initial-setup.md b/docs/_snippets/storybook-addon-tool-initial-setup.md
index 41d49160894f..c022750dbf69 100644
--- a/docs/_snippets/storybook-addon-tool-initial-setup.md
+++ b/docs/_snippets/storybook-addon-tool-initial-setup.md
@@ -36,4 +36,3 @@ export const Tool = memo(function MyAddonSelector() {
   );
 });
 ```
-
diff --git a/docs/_snippets/storybook-addon-toolbar-example.md b/docs/_snippets/storybook-addon-toolbar-example.md
index 07085331198e..1909cd698b03 100644
--- a/docs/_snippets/storybook-addon-toolbar-example.md
+++ b/docs/_snippets/storybook-addon-toolbar-example.md
@@ -20,4 +20,3 @@ addons.register('my-addon', () => {
   });
 });
 ```
-
diff --git a/docs/_snippets/storybook-addon-toolkit-panel-example.md b/docs/_snippets/storybook-addon-toolkit-panel-example.md
deleted file mode 100644
index 9a4a9f3ebd01..000000000000
--- a/docs/_snippets/storybook-addon-toolkit-panel-example.md
+++ /dev/null
@@ -1,42 +0,0 @@
-```tsx filename="src/Panel.tsx" renderer="common" language="ts" tabTitle="panel"
-import React from 'react';
-
-import { useAddonState, useChannel } from '@storybook/manager-api';
-import { AddonPanel } from '@storybook/components';
-import { ADDON_ID, EVENTS } from './constants';
-
-// See https://github.com/storybookjs/addon-kit/blob/main/src/components/PanelContent.tsx for an example of a PanelContent component
-import { PanelContent } from './components/PanelContent';
-
-interface PanelProps {
-  active: boolean;
-}
-
-export const Panel: React.FC<PanelProps> = (props) => {
-  // https://storybook.js.org/docs/addons/addons-api#useaddonstate
-  const [results, setState] = useAddonState(ADDON_ID, {
-    danger: [],
-    warning: [],
-  });
-
-  // https://storybook.js.org/docs/addons/addons-api#usechannel
-  const emit = useChannel({
-    [EVENTS.RESULT]: (newResults) => setState(newResults),
-  });
-
-  return (
-    <AddonPanel {...props}>
-      <PanelContent
-        results={results}
-        fetchData={() => {
-          emit(EVENTS.REQUEST);
-        }}
-        clearData={() => {
-          emit(EVENTS.CLEAR);
-        }}
-      />
-    </AddonPanel>
-  );
-};
-```
-
diff --git a/docs/_snippets/storybook-addon-toolkit-tab-example.md b/docs/_snippets/storybook-addon-toolkit-tab-example.md
deleted file mode 100644
index 414873d12743..000000000000
--- a/docs/_snippets/storybook-addon-toolkit-tab-example.md
+++ /dev/null
@@ -1,21 +0,0 @@
-```tsx filename="src/Tab.tsx" renderer="common" language="ts" tabTitle="tab"
-import React from 'react';
-
-import { useParameter } from '@storybook/manager-api';
-import { PARAM_KEY } from './constants';
-
-// See https://github.com/storybookjs/addon-kit/blob/main/src/components/TabContent.tsx for an example of a TabContent component
-import { TabContent } from './components/TabContent';
-
-interface TabProps {
-  active: boolean;
-}
-
-export const Tab: React.FC<TabProps> = ({ active }) => {
-  // https://storybook.js.org/docs/addons/addons-api#useparameter
-  const paramData = useParameter<string>(PARAM_KEY, '');
-
-  return active ? <TabContent code={paramData} /> : null;
-};
-```
-
diff --git a/docs/_snippets/storybook-addon-toolkit-toolbar-example.md b/docs/_snippets/storybook-addon-toolkit-toolbar-example.md
deleted file mode 100644
index 6b1cbb481cf1..000000000000
--- a/docs/_snippets/storybook-addon-toolkit-toolbar-example.md
+++ /dev/null
@@ -1,39 +0,0 @@
-```tsx filename="src/Tool.tsx" renderer="common" language="ts" tabTitle="toolbar"
-import React, { memo, useCallback, useEffect } from 'react';
-
-import { useGlobals, useStorybookApi } from '@storybook/manager-api';
-import { IconButton } from '@storybook/components';
-import { LightningIcon } from '@storybook/icons';
-
-import { ADDON_ID, PARAM_KEY, TOOL_ID } from './constants';
-
-export const Tool = memo(function MyAddonSelector() {
-  const [globals, updateGlobals] = useGlobals();
-  const api = useStorybookApi();
-
-  const isActive = [true, 'true'].includes(globals[PARAM_KEY]);
-
-  const toggleMyTool = useCallback(() => {
-    updateGlobals({
-      [PARAM_KEY]: !isActive,
-    });
-  }, [isActive]);
-
-  useEffect(() => {
-    api.setAddonShortcut(ADDON_ID, {
-      label: 'Toggle Measure [O]',
-      defaultShortcut: ['O'],
-      actionName: 'outline',
-      showInMenu: false,
-      action: toggleMyTool,
-    });
-  }, [toggleMyTool, api]);
-
-  return (
-    <IconButton key={TOOL_ID} active={isActive} title="Enable my addon" onClick={toggleMyTool}>
-      <LightningIcon />
-    </IconButton>
-  );
-});
-```
-
diff --git a/docs/_snippets/storybook-addon-toolkit-types.md b/docs/_snippets/storybook-addon-toolkit-types.md
new file mode 100644
index 000000000000..8f125c6384bd
--- /dev/null
+++ b/docs/_snippets/storybook-addon-toolkit-types.md
@@ -0,0 +1,103 @@
+```tsx filename="src/Tool.tsx" renderer="common" language="ts" tabTitle="Toolbar"
+import React, { memo, useCallback, useEffect } from 'react';
+
+import { useGlobals, useStorybookApi } from '@storybook/manager-api';
+import { IconButton } from '@storybook/components';
+import { LightningIcon } from '@storybook/icons';
+
+import { ADDON_ID, PARAM_KEY, TOOL_ID } from './constants';
+
+export const Tool = memo(function MyAddonSelector() {
+  const [globals, updateGlobals] = useGlobals();
+  const api = useStorybookApi();
+
+  const isActive = [true, 'true'].includes(globals[PARAM_KEY]);
+
+  const toggleMyTool = useCallback(() => {
+    updateGlobals({
+      [PARAM_KEY]: !isActive,
+    });
+  }, [isActive]);
+
+  useEffect(() => {
+    api.setAddonShortcut(ADDON_ID, {
+      label: 'Toggle Measure [O]',
+      defaultShortcut: ['O'],
+      actionName: 'outline',
+      showInMenu: false,
+      action: toggleMyTool,
+    });
+  }, [toggleMyTool, api]);
+
+  return (
+    <IconButton key={TOOL_ID} active={isActive} title="Enable my addon" onClick={toggleMyTool}>
+      <LightningIcon />
+    </IconButton>
+  );
+});
+```
+
+```tsx filename="src/Panel.tsx" renderer="common" language="ts" tabTitle="Panel"
+import React from 'react';
+
+import { useAddonState, useChannel } from '@storybook/manager-api';
+import { AddonPanel } from '@storybook/components';
+
+import { ADDON_ID, EVENTS } from './constants';
+
+// See https://github.com/storybookjs/addon-kit/blob/main/src/components/PanelContent.tsx for an example of a PanelContent component
+import { PanelContent } from './components/PanelContent';
+
+interface PanelProps {
+  active: boolean;
+}
+
+export const Panel: React.FC<PanelProps> = (props) => {
+  // https://storybook.js.org/docs/addons/addons-api#useaddonstate
+  const [results, setState] = useAddonState(ADDON_ID, {
+    danger: [],
+    warning: [],
+  });
+
+  // https://storybook.js.org/docs/addons/addons-api#usechannel
+  const emit = useChannel({
+    [EVENTS.RESULT]: (newResults) => setState(newResults),
+  });
+
+  return (
+    <AddonPanel {...props}>
+      <PanelContent
+        results={results}
+        fetchData={() => {
+          emit(EVENTS.REQUEST);
+        }}
+        clearData={() => {
+          emit(EVENTS.CLEAR);
+        }}
+      />
+    </AddonPanel>
+  );
+};
+```
+
+```tsx filename="src/Tab.tsx" renderer="common" language="ts" tabTitle="Tab"
+import React from 'react';
+
+import { useParameter } from '@storybook/manager-api';
+
+import { PARAM_KEY } from './constants';
+
+// See https://github.com/storybookjs/addon-kit/blob/main/src/components/TabContent.tsx for an example of a TabContent component
+import { TabContent } from './components/TabContent';
+
+interface TabProps {
+  active: boolean;
+}
+
+export const Tab: React.FC<TabProps> = ({ active }) => {
+  // https://storybook.js.org/docs/addons/addons-api#useparameter
+  const paramData = useParameter<string>(PARAM_KEY, '');
+
+  return active ? <TabContent code={paramData} /> : null;
+};
+```
diff --git a/docs/_snippets/storybook-addon-use-global.md b/docs/_snippets/storybook-addon-use-global.md
index d76efaa58d02..013cdc2424c0 100644
--- a/docs/_snippets/storybook-addon-use-global.md
+++ b/docs/_snippets/storybook-addon-use-global.md
@@ -39,4 +39,3 @@ export const withGlobals = (StoryFn: StoryFunction<Renderer>, context: StoryCont
   return StoryFn();
 };
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-disablequeryparams.md b/docs/_snippets/storybook-addons-api-disablequeryparams.md
index 8821abe7b9bc..c4751243c004 100644
--- a/docs/_snippets/storybook-addons-api-disablequeryparams.md
+++ b/docs/_snippets/storybook-addons-api-disablequeryparams.md
@@ -5,4 +5,3 @@ addons.register('my-organisation/my-addon', (api) => {
   });
 });
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-getchannel.md b/docs/_snippets/storybook-addons-api-getchannel.md
index 1ede828b92b4..6fcaa6fe7441 100644
--- a/docs/_snippets/storybook-addons-api-getchannel.md
+++ b/docs/_snippets/storybook-addons-api-getchannel.md
@@ -35,4 +35,3 @@ const ExampleToolbar = () => {
   );
 };
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-getqueryparam.md b/docs/_snippets/storybook-addons-api-getqueryparam.md
index fa8f7851a408..3ef6b29445d3 100644
--- a/docs/_snippets/storybook-addons-api-getqueryparam.md
+++ b/docs/_snippets/storybook-addons-api-getqueryparam.md
@@ -3,4 +3,3 @@ addons.register('my-organisation/my-addon', (api) => {
   api.getQueryParam('exampleParameter');
 });
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-geturlstate.md b/docs/_snippets/storybook-addons-api-geturlstate.md
index f0cc2cad0298..4b4c499a91a5 100644
--- a/docs/_snippets/storybook-addons-api-geturlstate.md
+++ b/docs/_snippets/storybook-addons-api-geturlstate.md
@@ -6,4 +6,3 @@ addons.register('my-organisation/my-addon', (api) => {
   }).url;
 });
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-imports.md b/docs/_snippets/storybook-addons-api-imports.md
index 8781eb4e3294..8583f2557df1 100644
--- a/docs/_snippets/storybook-addons-api-imports.md
+++ b/docs/_snippets/storybook-addons-api-imports.md
@@ -3,4 +3,3 @@ import { addons } from '@storybook/preview-api';
 
 import { useStorybookApi } from '@storybook/manager-api';
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-makedecorator.md b/docs/_snippets/storybook-addons-api-makedecorator.md
index cf81e50a500a..253c85674afa 100644
--- a/docs/_snippets/storybook-addons-api-makedecorator.md
+++ b/docs/_snippets/storybook-addons-api-makedecorator.md
@@ -14,4 +14,3 @@ export const withAddonDecorator = makeDecorator({
   },
 });
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-on.md b/docs/_snippets/storybook-addons-api-on.md
index 2aeb8704466e..da4d48dfe1a2 100644
--- a/docs/_snippets/storybook-addons-api-on.md
+++ b/docs/_snippets/storybook-addons-api-on.md
@@ -4,4 +4,3 @@ addons.register('my-organisation/my-addon', (api) => {
   api.on('custom-addon-event', (eventData) => console.log(eventData));
 });
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-register.md b/docs/_snippets/storybook-addons-api-register.md
index 24dc8753428f..a1d007bf85da 100644
--- a/docs/_snippets/storybook-addons-api-register.md
+++ b/docs/_snippets/storybook-addons-api-register.md
@@ -4,4 +4,3 @@ import { addons } from '@storybook/preview-api';
 // Register the addon with a unique name.
 addons.register('my-organisation/my-addon', (api) => {});
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-selectincurrentkind.md b/docs/_snippets/storybook-addons-api-selectincurrentkind.md
index ade4ddb672ba..81c2666b11e4 100644
--- a/docs/_snippets/storybook-addons-api-selectincurrentkind.md
+++ b/docs/_snippets/storybook-addons-api-selectincurrentkind.md
@@ -3,4 +3,3 @@ addons.register('my-organisation/my-addon', (api) => {
   api.selectInCurrentKind('Default');
 });
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-selectstory.md b/docs/_snippets/storybook-addons-api-selectstory.md
index 82f9189e9fac..7527b6a414f2 100644
--- a/docs/_snippets/storybook-addons-api-selectstory.md
+++ b/docs/_snippets/storybook-addons-api-selectstory.md
@@ -3,4 +3,3 @@ addons.register('my-organisation/my-addon', (api) => {
   api.selectStory('Button', 'Default');
 });
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-setqueryparams.md b/docs/_snippets/storybook-addons-api-setqueryparams.md
index 6bcff839dcd6..0bada2cc3872 100644
--- a/docs/_snippets/storybook-addons-api-setqueryparams.md
+++ b/docs/_snippets/storybook-addons-api-setqueryparams.md
@@ -6,4 +6,3 @@ addons.register('my-organisation/my-addon', (api) => {
   });
 });
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-useaddonstate.md b/docs/_snippets/storybook-addons-api-useaddonstate.md
index 1937c7430978..e93b21ab9555 100644
--- a/docs/_snippets/storybook-addons-api-useaddonstate.md
+++ b/docs/_snippets/storybook-addons-api-useaddonstate.md
@@ -31,4 +31,3 @@ export const Tool = () => {
   );
 };
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-useapi.md b/docs/_snippets/storybook-addons-api-useapi.md
index ebb6ae16514f..4a814e88637a 100644
--- a/docs/_snippets/storybook-addons-api-useapi.md
+++ b/docs/_snippets/storybook-addons-api-useapi.md
@@ -29,4 +29,3 @@ export const Panel = () => {
   );
 };
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-usechannel.md b/docs/_snippets/storybook-addons-api-usechannel.md
index d937a578f9b5..41d62c63362a 100644
--- a/docs/_snippets/storybook-addons-api-usechannel.md
+++ b/docs/_snippets/storybook-addons-api-usechannel.md
@@ -22,4 +22,3 @@ export const Panel = () => {
   );
 };
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-useglobal.md b/docs/_snippets/storybook-addons-api-useglobal.md
index d38006e0c6d7..c865aa0c77a5 100644
--- a/docs/_snippets/storybook-addons-api-useglobal.md
+++ b/docs/_snippets/storybook-addons-api-useglobal.md
@@ -19,4 +19,3 @@ export const Panel = () => {
   );
 };
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-useparameter.md b/docs/_snippets/storybook-addons-api-useparameter.md
index 0ec10728e7a4..589da852e380 100644
--- a/docs/_snippets/storybook-addons-api-useparameter.md
+++ b/docs/_snippets/storybook-addons-api-useparameter.md
@@ -20,4 +20,3 @@ export const Panel = () => {
   );
 };
 ```
-
diff --git a/docs/_snippets/storybook-addons-api-usestorybookstate.md b/docs/_snippets/storybook-addons-api-usestorybookstate.md
index 33de5d43a452..81b58b77e276 100644
--- a/docs/_snippets/storybook-addons-api-usestorybookstate.md
+++ b/docs/_snippets/storybook-addons-api-usestorybookstate.md
@@ -18,4 +18,3 @@ export const Panel = () => {
   );
 };
 ```
-
diff --git a/docs/_snippets/storybook-addons-local-preset.md b/docs/_snippets/storybook-addons-local-preset.md
index 9b550fac5beb..63f298ae2da6 100644
--- a/docs/_snippets/storybook-addons-local-preset.md
+++ b/docs/_snippets/storybook-addons-local-preset.md
@@ -21,4 +21,3 @@ export const viteFinal = vite as any;
 
 export const babelDefault = babel as any;
 ```
-
diff --git a/docs/_snippets/storybook-addons-preset-babelDefault.md b/docs/_snippets/storybook-addons-preset-babelDefault.md
index afb8140b74a7..b353cf4ff3d0 100644
--- a/docs/_snippets/storybook-addons-preset-babelDefault.md
+++ b/docs/_snippets/storybook-addons-preset-babelDefault.md
@@ -23,4 +23,3 @@ export function babelDefault(config: TransformOptions) {
   };
 }
 ```
-
diff --git a/docs/_snippets/storybook-addons-preset-preview.md b/docs/_snippets/storybook-addons-preset-preview.md
index 427ba4b3e27a..7c76b2b544de 100644
--- a/docs/_snippets/storybook-addons-preset-preview.md
+++ b/docs/_snippets/storybook-addons-preset-preview.md
@@ -27,4 +27,3 @@ const preview: ProjectAnnotations<Renderer> = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-addons-preset-viteFinal.md b/docs/_snippets/storybook-addons-preset-viteFinal.md
index 1bd9a2b364e7..7d44c95edf83 100644
--- a/docs/_snippets/storybook-addons-preset-viteFinal.md
+++ b/docs/_snippets/storybook-addons-preset-viteFinal.md
@@ -21,4 +21,3 @@ export function ViteFinal(config: any, options: any = {}) {
   return config;
 }
 ```
-
diff --git a/docs/_snippets/storybook-addons-preset-webpackFinal.md b/docs/_snippets/storybook-addons-preset-webpackFinal.md
index 7b9f572720fa..f9bc01b4cd48 100644
--- a/docs/_snippets/storybook-addons-preset-webpackFinal.md
+++ b/docs/_snippets/storybook-addons-preset-webpackFinal.md
@@ -29,4 +29,3 @@ export function webpackFinal(config: WebpackConfig, options: any = {}) {
   return config;
 }
 ```
-
diff --git a/docs/_snippets/storybook-addons-preset.md b/docs/_snippets/storybook-addons-preset.md
index ce5b88059d76..5520d1601cdb 100644
--- a/docs/_snippets/storybook-addons-preset.md
+++ b/docs/_snippets/storybook-addons-preset.md
@@ -9,4 +9,3 @@ export const previewAnnotations = (entry = [], options) => {
   return [...entry, require.resolve('./dist/preview')];
 };
 ```
-
diff --git a/docs/_snippets/storybook-addons-root-preset-manager-entries.md b/docs/_snippets/storybook-addons-root-preset-manager-entries.md
index 69b6fb88d02d..4fcba6772427 100644
--- a/docs/_snippets/storybook-addons-root-preset-manager-entries.md
+++ b/docs/_snippets/storybook-addons-root-preset-manager-entries.md
@@ -1,8 +1,5 @@
-```js renderer="common" language="js"
-//example-addon/preset.js
-
+```js filename="example-addon/preset.js" renderer="common" language="js"
 export const managerEntries = (entry = []) => {
   return [...entry, require.resolve('path-to-third-party-addon')];
 };
 ```
-
diff --git a/docs/_snippets/storybook-addons-root-preset-preview-annotations.md b/docs/_snippets/storybook-addons-root-preset-preview-annotations.md
index af473955e722..e4cda76b90c1 100644
--- a/docs/_snippets/storybook-addons-root-preset-preview-annotations.md
+++ b/docs/_snippets/storybook-addons-root-preset-preview-annotations.md
@@ -3,4 +3,3 @@ export const previewAnnotations = (entry = [], options) => {
   return [...entry, require.resolve('./dist/preview')];
 };
 ```
-
diff --git a/docs/_snippets/storybook-addons-root-preset.md b/docs/_snippets/storybook-addons-root-preset.md
index 8ac301891c48..2abfc784b82a 100644
--- a/docs/_snippets/storybook-addons-root-preset.md
+++ b/docs/_snippets/storybook-addons-root-preset.md
@@ -5,4 +5,3 @@ export const managerEntries = [require.resolve('./dist/manager')];
 
 export * from './dist/preset';
 ```
-
diff --git a/docs/_snippets/storybook-args-url-params-converted.md b/docs/_snippets/storybook-args-url-params-converted.md
index 1d42e5267ef1..5a8ec7a715bb 100644
--- a/docs/_snippets/storybook-args-url-params-converted.md
+++ b/docs/_snippets/storybook-args-url-params-converted.md
@@ -5,4 +5,3 @@
   nil: null
 }
 ```
-
diff --git a/docs/_snippets/storybook-argtypes-with-addon.md b/docs/_snippets/storybook-argtypes-with-addon.md
index c7657e7dc142..1914326e61ed 100644
--- a/docs/_snippets/storybook-argtypes-with-addon.md
+++ b/docs/_snippets/storybook-argtypes-with-addon.md
@@ -4,4 +4,3 @@ import { useArgTypes } from '@storybook/manager-api';
 // inside your panel
 const { argTypes } = useArgTypes();
 ```
-
diff --git a/docs/_snippets/storybook-auto-docs-baseline-example.md b/docs/_snippets/storybook-auto-docs-baseline-example.md
index fe87ee88e10a..9e4bb6b044c7 100644
--- a/docs/_snippets/storybook-auto-docs-baseline-example.md
+++ b/docs/_snippets/storybook-auto-docs-baseline-example.md
@@ -1,7 +1,5 @@
- renderer="common" language="mdx" tabTitle="custom-title"
-```mdx
-{/* Button.mdx */}
-
+<!-- prettier-ignore -->
+```mdx filename="Button.mdx" renderer="common" language="mdx" tabTitle="custom-title"
 import { Meta, Controls } from '@storybook/blocks';
 
 <Meta title="Button" />
@@ -25,41 +23,8 @@ Button has the following properties:
 <Controls />
 ```
 
- renderer="common" language="mdx"
-```mdx
-{/* Button.mdx */}
-
-import { Meta } from '@storybook/blocks';
-
-<Meta title="Button" />
-
-# Definition
-
-Button is a clickable interactive element that triggers a response.
-
-You can place text and icons inside of a button.
-
-Buttons are often used for form submissions and to toggle elements into view.
-
-## Usage
-
-The component comes in different variants such as `primary`, `secondary`, `large` and `small` which you can use to alter the look and feel of the button.
-
-## Inputs
-
-Button has the following properties:
-
-- `primary` - If `true`, the button will have a primary style.
-- `size` - The size of the button.
-- `label` - The label of the button.
-- `backgroundColor` - The background color of the button.
-- `onClick` - Callback function when clicked.
-```
-
- renderer="common" language="mdx" tabTitle="of-prop"
-```mdx
-{/* Button.mdx */}
-
+<!-- prettier-ignore -->
+```mdx filename="Button.mdx" renderer="common" language="mdx" tabTitle="of-prop"
 import { Meta, Controls } from '@storybook/blocks';
 
 import * as ButtonStories from './Button.stories';
@@ -84,4 +49,3 @@ Button has the following properties:
 
 <Controls />
 ```
-
diff --git a/docs/_snippets/storybook-auto-docs-custom-file.md b/docs/_snippets/storybook-auto-docs-custom-file.md
index 3f6d8f595084..d785141af9fa 100644
--- a/docs/_snippets/storybook-auto-docs-custom-file.md
+++ b/docs/_snippets/storybook-auto-docs-custom-file.md
@@ -1,12 +1,10 @@
- renderer="common" language="mdx"
-```mdx
-{/* src/components/Select.mdx */}
-
+<!-- prettier-ignore -->
+```mdx filename="src/components/Select.mdx" renderer="common" language="mdx"
 # Select
 
-Select is a type of input that allows users to choose one or more options from a list of choices. 
+Select is a type of input that allows users to choose one or more options from a list of choices.
 
-The options are hidden by default and revealed when a user interacts with an element. 
+The options are hidden by default and revealed when a user interacts with an element.
 
 It shows the currently selected option in its default collapsed state.
 
@@ -16,11 +14,9 @@ To help users get acquainted with the existing UI elements, it is recommended to
 
 ### When to use?
 
-In a select input where there are less than 3-4 items, consider using radio boxes, or radio inputs instead. 
+In a select input where there are less than 3-4 items, consider using radio boxes, or radio inputs instead.
 
 ### How to use?
 
 To help users understand the options available in a select input, include a default option that is unselectable and acts as a label.
-
 ```
-
diff --git a/docs/_snippets/storybook-auto-docs-full-config.md b/docs/_snippets/storybook-auto-docs-full-config.md
index 57c2f6a1537a..1a65731752cd 100644
--- a/docs/_snippets/storybook-auto-docs-full-config.md
+++ b/docs/_snippets/storybook-auto-docs-full-config.md
@@ -27,4 +27,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-auto-docs-main-mdx-config.md b/docs/_snippets/storybook-auto-docs-main-mdx-config.md
index 64f09e55a3c6..2d14f86e3f29 100644
--- a/docs/_snippets/storybook-auto-docs-main-mdx-config.md
+++ b/docs/_snippets/storybook-auto-docs-main-mdx-config.md
@@ -28,4 +28,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-auto-docs-mdx-docs-docs-only-page.md b/docs/_snippets/storybook-auto-docs-mdx-docs-docs-only-page.md
index 771daab8da92..7708908ba342 100644
--- a/docs/_snippets/storybook-auto-docs-mdx-docs-docs-only-page.md
+++ b/docs/_snippets/storybook-auto-docs-mdx-docs-docs-only-page.md
@@ -1,6 +1,5 @@
-```mdx renderer="common" language="mdx"
-{/* ExampleDocumentation.mdx */}
-
+<!-- prettier-ignore -->
+```mdx filename="ExampleDocumentation.mdx" renderer="common" language="mdx"
 import { Meta } from '@storybook/blocks';
 
 import * as ExampleComponentStories from './ExampleComponent.stories';
@@ -11,6 +10,35 @@ import * as ExampleComponentStories from './ExampleComponent.stories';
 
 {/* 👇 Component documentation page */}
 
-<Meta of={ExampleComponentStories} /> 
+<Meta of={ExampleComponentStories} />
+```
+
+<!-- prettier-ignore -->
+```mdx filename="ExampleDocumentation.mdx" renderer="svelte" language="mdx" tabTitle="Svelte CSF"
+import { Meta } from '@storybook/blocks';
+
+import * as ExampleComponentStories from './ExampleComponent.stories.svelte';
+
+{/* 👇 Documentation-only page */}
+
+<Meta title="Documentation" />
+
+{/* 👇 Component documentation page */}
+
+<Meta of={ExampleComponentStories} />
 ```
 
+<!-- prettier-ignore -->
+```mdx filename="ExampleDocumentation.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
+import { Meta } from '@storybook/blocks';
+
+import * as ExampleComponentStories from './ExampleComponent.stories';
+
+{/* 👇 Documentation-only page */}
+
+<Meta title="Documentation" />
+
+{/* 👇 Component documentation page */}
+
+<Meta of={ExampleComponentStories} />
+```
diff --git a/docs/_snippets/storybook-auto-docs-mdx-docs-dos-donts.md b/docs/_snippets/storybook-auto-docs-mdx-docs-dos-donts.md
index 640fc532e36e..bee47faf47fc 100644
--- a/docs/_snippets/storybook-auto-docs-mdx-docs-dos-donts.md
+++ b/docs/_snippets/storybook-auto-docs-mdx-docs-dos-donts.md
@@ -1,15 +1,13 @@
-```mdx renderer="common" language="mdx"
-{/* Guideline.mdx */}
-
+<!-- prettier-ignore -->
+```mdx filename="Guideline.mdx" renderer="common" language="mdx"
 <Guidelines>
   <Dos>
-    - Use buttons for the main actions on your page 
+    - Use buttons for the main actions on your page
     - Identify the primary action and make it `primary`
   </Dos>
   <Donts>
-    - Use a button when a link will do (e.g., for navigation-only actions) 
+    - Use a button when a link will do (e.g., for navigation-only actions)
     - Use multiple `primary` buttons in a single UI state
   </Donts>
 </Guidelines>
 ```
-
diff --git a/docs/_snippets/storybook-auto-docs-mdx-docs-imports.md b/docs/_snippets/storybook-auto-docs-mdx-docs-imports.md
index a17d8e36ac69..3a3c2b4993b5 100644
--- a/docs/_snippets/storybook-auto-docs-mdx-docs-imports.md
+++ b/docs/_snippets/storybook-auto-docs-mdx-docs-imports.md
@@ -1,8 +1,20 @@
-```mdx renderer="common" language="mdx"
-{/* Checkbox.mdx */}
-
+<!-- prettier-ignore -->
+```mdx filename="Checkbox.mdx" renderer="common" language="mdx"
 import { Canvas, Meta } from '@storybook/blocks';
 
 import * as CheckboxStories from './Checkbox.stories';
 ```
 
+<!-- prettier-ignore -->
+```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="Svelte CSF"
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as CheckboxStories from './Checkbox.stories.svelte';
+```
+
+<!-- prettier-ignore -->
+```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
+import { Canvas, Meta } from '@storybook/blocks';
+
+import * as CheckboxStories from './Checkbox.stories';
+```
diff --git a/docs/_snippets/storybook-auto-docs-mdx-docs-meta-block.md b/docs/_snippets/storybook-auto-docs-mdx-docs-meta-block.md
index 10fdbd6282ca..a20c65650b48 100644
--- a/docs/_snippets/storybook-auto-docs-mdx-docs-meta-block.md
+++ b/docs/_snippets/storybook-auto-docs-mdx-docs-meta-block.md
@@ -1,6 +1,5 @@
-```mdx renderer="common" language="mdx"
-{/* Checkbox.mdx */}
-
+<!-- prettier-ignore -->
+```mdx filename="Checkbox.mdx" renderer="common" language="mdx"
 import { Meta } from '@storybook/blocks';
 
 import * as CheckboxStories from './Checkbox.stories';
@@ -8,3 +7,20 @@ import * as CheckboxStories from './Checkbox.stories';
 <Meta of={CheckboxStories} />
 ```
 
+<!-- prettier-ignore -->
+```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="Svelte CSF"
+import { Meta } from '@storybook/blocks';
+
+import * as CheckboxStories from './Checkbox.stories.svelte';
+
+<Meta of={CheckboxStories} />
+```
+
+<!-- prettier-ignore -->
+```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
+import { Meta } from '@storybook/blocks';
+
+import * as CheckboxStories from './Checkbox.stories';
+
+<Meta of={CheckboxStories} />
+```
diff --git a/docs/_snippets/storybook-auto-docs-mdx-docs-story.md b/docs/_snippets/storybook-auto-docs-mdx-docs-story.md
index 9a33596648de..125453a92aff 100644
--- a/docs/_snippets/storybook-auto-docs-mdx-docs-story.md
+++ b/docs/_snippets/storybook-auto-docs-mdx-docs-story.md
@@ -1,6 +1,5 @@
-```mdx renderer="common" language="mdx"
-{/* Checkbox.mdx */}
-
+<!-- prettier-ignore -->
+```mdx filename="Checkbox.mdx" renderer="common" language="mdx"
 import { Canvas } from '@storybook/blocks';
 
 import * as CheckboxStories from './Checkbox.stories';
@@ -8,3 +7,19 @@ import * as CheckboxStories from './Checkbox.stories';
 <Canvas of={CheckboxStories.Unchecked} />
 ```
 
+```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="Svelte CSF"
+import { Canvas } from '@storybook/blocks';
+
+import * as CheckboxStories from './Checkbox.stories.svelte';
+
+<Canvas of={CheckboxStories.Unchecked} />
+```
+
+<!-- prettier-ignore -->
+```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
+import { Canvas } from '@storybook/blocks';
+
+import * as CheckboxStories from './Checkbox.stories';
+
+<Canvas of={CheckboxStories.Unchecked} />
+```
diff --git a/docs/_snippets/storybook-auto-docs-mdx-file.md b/docs/_snippets/storybook-auto-docs-mdx-file.md
index 41e7a6e3f22f..bf6d896a4f8a 100644
--- a/docs/_snippets/storybook-auto-docs-mdx-file.md
+++ b/docs/_snippets/storybook-auto-docs-mdx-file.md
@@ -1,6 +1,5 @@
-```mdx renderer="common" language="mdx"
-{/* Page.mdx */}
-
+<!-- prettier-ignore -->
+```mdx filename="Page.mdx" renderer="common" language="mdx"
 import { Canvas, Meta, Story } from '@storybook/blocks';
 
 import * as ListStories from './List.stories';
@@ -13,7 +12,7 @@ import * as PageStories from './Page.stories';
 
 # Page
 
-Page is a layout container that is used to position children in predetermined areas. 
+Page is a layout container that is used to position children in predetermined areas.
 
 It's often used to apply consistent positioning for content across pages in an application
 
@@ -38,3 +37,80 @@ List items are used to group related content in a list. They must be nested with
 <Story of={ListItemStories.Starter} meta={ListItemStories} />
 ```
 
+<!-- prettier-ignore -->
+```mdx filename="Page.mdx" renderer="svelte" language="mdx" tabTitle="Svelte CSF"
+import { Canvas, Meta, Story } from '@storybook/blocks';
+
+import * as ListStories from './List.stories.svelte';
+
+import * as ListItemStories from './ListItem.stories.svelte';
+
+import * as PageStories from './Page.stories.svelte';
+
+<Meta of={PageStories} />
+
+# Page
+
+Page is a layout container that is used to position children in predetermined areas.
+
+It's often used to apply consistent positioning for content across pages in an application
+
+## Usage
+
+<Canvas of={PageStories.Basic} />
+
+# List
+
+List is a grouping of related items. List can be ordered with multiple levels of nesting.
+
+## Usage
+
+<Story of={ListStories.Filled} />
+
+# List Item
+
+List items are used to group related content in a list. They must be nested within a List component.
+
+## Usage
+
+<Story of={ListItemStories.Starter} meta={ListItemStories} />
+```
+
+<!-- prettier-ignore -->
+```mdx filename="Page.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
+import { Canvas, Meta, Story } from '@storybook/blocks';
+
+import * as ListStories from './List.stories';
+
+import * as ListItemStories from './ListItem.stories';
+
+import * as PageStories from './Page.stories';
+
+<Meta of={PageStories} />
+
+# Page
+
+Page is a layout container that is used to position children in predetermined areas.
+
+It's often used to apply consistent positioning for content across pages in an application
+
+## Usage
+
+<Canvas of={PageStories.Basic} />
+
+# List
+
+List is a grouping of related items. List can be ordered with multiple levels of nesting.
+
+## Usage
+
+<Story of={ListStories.Filled} />
+
+# List Item
+
+List items are used to group related content in a list. They must be nested within a List component.
+
+## Usage
+
+<Story of={ListItemStories.Starter} meta={ListItemStories} />
+```
diff --git a/docs/_snippets/storybook-auto-docs-standalone-page.md b/docs/_snippets/storybook-auto-docs-standalone-page.md
index b1fb8f8bdcc3..a8cf230f0e4e 100644
--- a/docs/_snippets/storybook-auto-docs-standalone-page.md
+++ b/docs/_snippets/storybook-auto-docs-standalone-page.md
@@ -1,6 +1,5 @@
-```mdx renderer="common" language="mdx"
-{/* src/GettingStarted.mdx */}
-
+<!-- prettier-ignore -->
+```mdx filename="src/GettingStarted.mdx" renderer="common" language="mdx"
 # Getting Started
 
 Welcome! Whether you're a designer or a developer, this guide will help you get started and connect you to the essential resources you need.
@@ -8,6 +7,7 @@ Welcome! Whether you're a designer or a developer, this guide will help you get
 ## Table of Contents
 
 - [Design Resources](#design-resources)
+
   - [Figma](#figma)
   - [UI/UX Design Guidelines](#uiux-design-guidelines)
   - [Design Assets](#design-assets)
@@ -61,4 +61,3 @@ Your development environment is critical. Here are some tools and resources to h
 
 ---
 ```
-
diff --git a/docs/_snippets/storybook-auto-docs-starter-example.md b/docs/_snippets/storybook-auto-docs-starter-example.md
index d8d8bddf22b0..84b1e932fdc5 100644
--- a/docs/_snippets/storybook-auto-docs-starter-example.md
+++ b/docs/_snippets/storybook-auto-docs-starter-example.md
@@ -1,6 +1,5 @@
-```mdx renderer="common" language="mdx"
-{/* Button.mdx */}
-
+<!-- prettier-ignore -->
+```mdx filename="Button.mdx" renderer="common" language="mdx"
 import { Meta, Story } from '@storybook/blocks';
 
 import * as ButtonStories from './Button.stories';
@@ -20,3 +19,44 @@ Buttons are often used for form submissions and to toggle elements into view.
 <Story of={ButtonStories.Basic} />
 ```
 
+<!-- prettier-ignore -->
+```mdx filename="Button.mdx" renderer="svelte" language="mdx" tabTitle="Svelte CSF"
+import { Meta, Story } from '@storybook/blocks';
+
+import * as ButtonStories from './Button.stories.svelte';
+
+<Meta of={ButtonStories} />
+
+# Button
+
+Button is a clickable interactive element that triggers a response.
+
+You can place text and icons inside of a button.
+
+Buttons are often used for form submissions and to toggle elements into view.
+
+## Usage
+
+<Story of={ButtonStories.Basic} />
+```
+
+<!-- prettier-ignore -->
+```mdx filename="Button.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
+import { Meta, Story } from '@storybook/blocks';
+
+import * as ButtonStories from './Button.stories';
+
+<Meta of={ButtonStories} />
+
+# Button
+
+Button is a clickable interactive element that triggers a response.
+
+You can place text and icons inside of a button.
+
+Buttons are often used for form submissions and to toggle elements into view.
+
+## Usage
+
+<Story of={ButtonStories.Basic} />
+```
diff --git a/docs/_snippets/storybook-automigrate.md b/docs/_snippets/storybook-automigrate.md
index 1f666ddd55a8..1757c0b23406 100644
--- a/docs/_snippets/storybook-automigrate.md
+++ b/docs/_snippets/storybook-automigrate.md
@@ -9,4 +9,3 @@ pnpm dlx storybook@latest automigrate
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@latest automigrate
 ```
-
diff --git a/docs/_snippets/storybook-babel-configuration-example.md b/docs/_snippets/storybook-babel-configuration-example.md
index f2387da7de7d..411b2313e86d 100644
--- a/docs/_snippets/storybook-babel-configuration-example.md
+++ b/docs/_snippets/storybook-babel-configuration-example.md
@@ -7,4 +7,3 @@ export function babelDefault(config: TransformOptions) {
   };
 }
 ```
-
diff --git a/docs/_snippets/storybook-backgrounds-addon-default-params.md b/docs/_snippets/storybook-backgrounds-addon-default-params.md
index 27e5e756d1c5..74d28417e073 100644
--- a/docs/_snippets/storybook-backgrounds-addon-default-params.md
+++ b/docs/_snippets/storybook-backgrounds-addon-default-params.md
@@ -10,4 +10,3 @@ export default {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-backgrounds-preset-config.md b/docs/_snippets/storybook-backgrounds-preset-config.md
index 9dc431a89c0f..0f519253b03a 100644
--- a/docs/_snippets/storybook-backgrounds-preset-config.md
+++ b/docs/_snippets/storybook-backgrounds-preset-config.md
@@ -3,4 +3,3 @@ export function config(entry = []) {
   return [...entry, require.resolve('./defaultParameters')];
 }
 ```
-
diff --git a/docs/_snippets/storybook-build-test-flag.md b/docs/_snippets/storybook-build-test-flag.md
index 52eaf29d1762..98c9d4ddba15 100644
--- a/docs/_snippets/storybook-build-test-flag.md
+++ b/docs/_snippets/storybook-build-test-flag.md
@@ -9,4 +9,3 @@ pnpm run build-storybook --test
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn build-storybook --test
 ```
-
diff --git a/docs/_snippets/storybook-builder-api-build-server.md b/docs/_snippets/storybook-builder-api-build-server.md
index a8afc23b050f..2cf99eb3ddbf 100644
--- a/docs/_snippets/storybook-builder-api-build-server.md
+++ b/docs/_snippets/storybook-builder-api-build-server.md
@@ -32,4 +32,3 @@ export async function build(options: ExtendedOptions) {
   await viteBuild(finalConfig);
 }
 ```
-
diff --git a/docs/_snippets/storybook-builder-api-configuration-options.md b/docs/_snippets/storybook-builder-api-configuration-options.md
index 3b9ff0cf4cb0..83f9692e9278 100644
--- a/docs/_snippets/storybook-builder-api-configuration-options.md
+++ b/docs/_snippets/storybook-builder-api-configuration-options.md
@@ -32,4 +32,3 @@ export async function createViteServer(options: ExtendedOptions, devServer: Serv
   // Remainder implementation
 }
 ```
-
diff --git a/docs/_snippets/storybook-builder-api-dev-server.md b/docs/_snippets/storybook-builder-api-dev-server.md
index 0c7799f1a1dc..41dd09d2ef27 100644
--- a/docs/_snippets/storybook-builder-api-dev-server.md
+++ b/docs/_snippets/storybook-builder-api-dev-server.md
@@ -18,4 +18,3 @@ export async function createViteServer(options: ExtendedOptions, devServer: Serv
   });
 }
 ```
-
diff --git a/docs/_snippets/storybook-builder-api-interface.md b/docs/_snippets/storybook-builder-api-interface.md
index 42bcabc41f1b..69988858c26f 100644
--- a/docs/_snippets/storybook-builder-api-interface.md
+++ b/docs/_snippets/storybook-builder-api-interface.md
@@ -20,4 +20,3 @@ export interface Builder<Config, Stats> {
   overridePresets?: string[];
 }
 ```
-
diff --git a/docs/_snippets/storybook-builder-api-mdx.md b/docs/_snippets/storybook-builder-api-mdx.md
index 020ea42166ae..8475d18f736f 100644
--- a/docs/_snippets/storybook-builder-api-mdx.md
+++ b/docs/_snippets/storybook-builder-api-mdx.md
@@ -16,4 +16,3 @@ export function mdxPlugin() {
   });
 }
 ```
-
diff --git a/docs/_snippets/storybook-builder-api-preview-exports.md b/docs/_snippets/storybook-builder-api-preview-exports.md
index e6091e618d7b..3eefea3c09f3 100644
--- a/docs/_snippets/storybook-builder-api-preview-exports.md
+++ b/docs/_snippets/storybook-builder-api-preview-exports.md
@@ -78,4 +78,3 @@ export async function generateIframeScriptCode(options: ExtendedOptions) {
   return code;
 }
 ```
-
diff --git a/docs/_snippets/storybook-builder-api-shutdown-server.md b/docs/_snippets/storybook-builder-api-shutdown-server.md
index 310e41eb7ccc..c642a9c6fc01 100644
--- a/docs/_snippets/storybook-builder-api-shutdown-server.md
+++ b/docs/_snippets/storybook-builder-api-shutdown-server.md
@@ -16,4 +16,3 @@ export const start: ViteBuilder['start'] = async ({ options, server: devServer }
   };
 };
 ```
-
diff --git a/docs/_snippets/storybook-canvas-doc-block-story.md b/docs/_snippets/storybook-canvas-doc-block-story.md
index 07619d9f0fb7..ada5f64f9fa9 100644
--- a/docs/_snippets/storybook-canvas-doc-block-story.md
+++ b/docs/_snippets/storybook-canvas-doc-block-story.md
@@ -162,4 +162,3 @@ export const Colors: Story = {
   ),
 };
 ```
-
diff --git a/docs/_snippets/storybook-client-globals-example-file.md b/docs/_snippets/storybook-client-globals-example-file.md
index fb76daa7d184..49ffd3c3bd50 100644
--- a/docs/_snippets/storybook-client-globals-example-file.md
+++ b/docs/_snippets/storybook-client-globals-example-file.md
@@ -5,4 +5,3 @@ const { window: globalWindow } = global;
 
 globalWindow.STORYBOOK_ENV = 'vue';
 ```
-
diff --git a/docs/_snippets/storybook-client-preview.md b/docs/_snippets/storybook-client-preview.md
index 9602d622aa01..98f2d64ebb47 100644
--- a/docs/_snippets/storybook-client-preview.md
+++ b/docs/_snippets/storybook-client-preview.md
@@ -9,4 +9,3 @@ const api = start(render);
 
 // the boilerplate code
 ```
-
diff --git a/docs/_snippets/storybook-component-layout-param.md b/docs/_snippets/storybook-component-layout-param.md
index 56afcb84e22e..c24d0d683281 100644
--- a/docs/_snippets/storybook-component-layout-param.md
+++ b/docs/_snippets/storybook-component-layout-param.md
@@ -81,4 +81,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/storybook-config-layout.md b/docs/_snippets/storybook-config-layout.md
index 413a57d07576..59b5ac968c87 100644
--- a/docs/_snippets/storybook-config-layout.md
+++ b/docs/_snippets/storybook-config-layout.md
@@ -24,4 +24,3 @@ addons.setConfig({
   },
 });
 ```
-
diff --git a/docs/_snippets/storybook-coverage-addon-config-options.md b/docs/_snippets/storybook-coverage-addon-config-options.md
index 92890cfb44a0..6bbb3b9b551c 100644
--- a/docs/_snippets/storybook-coverage-addon-config-options.md
+++ b/docs/_snippets/storybook-coverage-addon-config-options.md
@@ -45,4 +45,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-coverage-addon-install.md b/docs/_snippets/storybook-coverage-addon-install.md
index 04b1a4b263c7..38d085bdcdc6 100644
--- a/docs/_snippets/storybook-coverage-addon-install.md
+++ b/docs/_snippets/storybook-coverage-addon-install.md
@@ -1,12 +1,11 @@
 ```shell renderer="common" language="js" packageManager="npm"
-npm install @storybook/addon-coverage --save-dev
+npx storybook@latest add @storybook/addon-coverage
 ```
 
 ```shell renderer="common" language="js" packageManager="pnpm"
-pnpm add --save-dev @storybook/addon-coverage
+pnpm dlx storybook@latest add @storybook/addon-coverage
 ```
 
 ```shell renderer="common" language="js" packageManager="yarn"
-yarn add --dev @storybook/addon-coverage
+yarn dlx storybook@latest add @storybook/addon-coverage
 ```
-
diff --git a/docs/_snippets/storybook-coverage-addon-optimized-config.md b/docs/_snippets/storybook-coverage-addon-optimized-config.md
index 2fd3172b912d..cb443a5f1a70 100644
--- a/docs/_snippets/storybook-coverage-addon-optimized-config.md
+++ b/docs/_snippets/storybook-coverage-addon-optimized-config.md
@@ -4,7 +4,6 @@ export default {
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-coverage',
@@ -25,7 +24,6 @@ const config: StorybookConfig = {
   framework: '@storybook/your-framework',
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-coverage',
@@ -39,4 +37,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-coverage-addon-registration.md b/docs/_snippets/storybook-coverage-addon-registration.md
deleted file mode 100644
index d775e1a7b229..000000000000
--- a/docs/_snippets/storybook-coverage-addon-registration.md
+++ /dev/null
@@ -1,25 +0,0 @@
-```js filename=".storybook/main.js" renderer="common" language="js"
-export default {
-  stories: [],
-  addons: [
-    // Other Storybook addons
-    '@storybook/addon-coverage', //👈 Registers the addon
-  ],
-};
-```
-
-```ts filename=".storybook/main.ts" renderer="common" language="ts"
-// Replace your-framework with the framework and builder you are using (e.g., react-webpack5, vue3-webpack5)
-import type { StorybookConfig } from '@storybook/your-framework';
-
-const config: StorybookConfig = {
-  stories: [],
-  addons: [
-    // Other Storybook addons
-    '@storybook/addon-coverage', //👈 Registers the addon
-  ],
-};
-
-export default config;
-```
-
diff --git a/docs/_snippets/storybook-coverage-report-lcov.md b/docs/_snippets/storybook-coverage-report-lcov.md
index 338131fa9c66..72f9699d5316 100644
--- a/docs/_snippets/storybook-coverage-report-lcov.md
+++ b/docs/_snippets/storybook-coverage-report-lcov.md
@@ -1,4 +1,3 @@
 ```shell renderer="common" language="js"
 npx nyc report --reporter=lcov -t coverage/storybook --report-dir coverage/storybook
 ```
-
diff --git a/docs/_snippets/storybook-coverage-report-vue.md b/docs/_snippets/storybook-coverage-report-vue.md
index 037434637162..276690bac0eb 100644
--- a/docs/_snippets/storybook-coverage-report-vue.md
+++ b/docs/_snippets/storybook-coverage-report-vue.md
@@ -1,13 +1,12 @@
-```js filename=".nyc.config.js" renderer="common" language="js"
+```js filename=".nyc.config.js" renderer="common" language="js" tabTitle="JavaScript configuration"
 export default {
   // Other configuration options
   extension: ['.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx', '.vue'],
 };
 ```
 
-```json renderer="common" language="json"
+```json filename=".nycrc.json" renderer="common" language="json" tabTitle="JSON configuration"
 {
   "extension": [".js", ".cjs", ".mjs", ".ts", ".tsx", ".jsx", ".vue"]
 }
 ```
-
diff --git a/docs/_snippets/storybook-csf-3-auto-title-redundant.md b/docs/_snippets/storybook-csf-3-auto-title-redundant.md
index ee593ca87dc0..557977ef1af6 100644
--- a/docs/_snippets/storybook-csf-3-auto-title-redundant.md
+++ b/docs/_snippets/storybook-csf-3-auto-title-redundant.md
@@ -117,4 +117,3 @@ export const Default: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-custom-docs-markdown.md b/docs/_snippets/storybook-custom-docs-markdown.md
index fc666e9b2b65..ba09986a7012 100644
--- a/docs/_snippets/storybook-custom-docs-markdown.md
+++ b/docs/_snippets/storybook-custom-docs-markdown.md
@@ -1,9 +1,8 @@
-```mdx renderer="common" language="mdx"
-{/* Changelog.mdx */}
+<!-- prettier-ignore -->
+```mdx filename="Changelog.mdx" renderer="common" language="mdx"
+import { Meta, Markdown } from '@storybook/blocks';
 
-import { Meta, Markdown } from "@storybook/blocks";
-
-import Readme from "../../Changelog.md?raw";
+import Readme from '../../Changelog.md?raw';
 
 <Meta title="Changelog" />
 
@@ -11,4 +10,3 @@ import Readme from "../../Changelog.md?raw";
 
 <Markdown>{Readme}</Markdown>
 ```
-
diff --git a/docs/_snippets/storybook-custom-manager-head.md b/docs/_snippets/storybook-custom-manager-head.md
index 81364cd10cb3..46c400359df9 100644
--- a/docs/_snippets/storybook-custom-manager-head.md
+++ b/docs/_snippets/storybook-custom-manager-head.md
@@ -20,4 +20,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-debug-webpack-dev.md b/docs/_snippets/storybook-debug-webpack-dev.md
index 1f7c0ace4f93..21009cff84c0 100644
--- a/docs/_snippets/storybook-debug-webpack-dev.md
+++ b/docs/_snippets/storybook-debug-webpack-dev.md
@@ -5,4 +5,3 @@ npm run storybook -- --debug-webpack
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn storybook --debug-webpack
 ```
-
diff --git a/docs/_snippets/storybook-debug-webpack-prod.md b/docs/_snippets/storybook-debug-webpack-prod.md
index 4c181925d55c..151420844f2d 100644
--- a/docs/_snippets/storybook-debug-webpack-prod.md
+++ b/docs/_snippets/storybook-debug-webpack-prod.md
@@ -5,4 +5,3 @@ npm run build-storybook -- --debug-webpack
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn build-storybook --debug-webpack
 ```
-
diff --git a/docs/_snippets/storybook-disable-telemetry-env.md b/docs/_snippets/storybook-disable-telemetry-env.md
index c9cceef0212c..a6b2a0a94a45 100644
--- a/docs/_snippets/storybook-disable-telemetry-env.md
+++ b/docs/_snippets/storybook-disable-telemetry-env.md
@@ -1,4 +1,3 @@
-```shell renderer="common" language="js" tabTitle="env-var"
+```shell renderer="common" language="js"
 STORYBOOK_DISABLE_TELEMETRY=1 yarn storybook
 ```
-
diff --git a/docs/_snippets/storybook-disable-telemetry-flag.md b/docs/_snippets/storybook-disable-telemetry-flag.md
index 53b5af66bc8d..00626b39e6ad 100644
--- a/docs/_snippets/storybook-disable-telemetry-flag.md
+++ b/docs/_snippets/storybook-disable-telemetry-flag.md
@@ -9,4 +9,3 @@ pnpm run storybook --disable-telemetry
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn storybook --disable-telemetry
 ```
-
diff --git a/docs/_snippets/storybook-doctor.md b/docs/_snippets/storybook-doctor.md
index 55550037ce75..a17f1d873466 100644
--- a/docs/_snippets/storybook-doctor.md
+++ b/docs/_snippets/storybook-doctor.md
@@ -9,4 +9,3 @@ pnpm dlx storybook@latest doctor
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@latest doctor
 ```
-
diff --git a/docs/_snippets/storybook-ember-cli-build.md b/docs/_snippets/storybook-ember-cli-build.md
index 4e46b197d13c..468daf86cb91 100644
--- a/docs/_snippets/storybook-ember-cli-build.md
+++ b/docs/_snippets/storybook-ember-cli-build.md
@@ -13,4 +13,3 @@ module.exports = function (defaults) {
   return app.toTree();
 };
 ```
-
diff --git a/docs/_snippets/storybook-extract-specific-version.md b/docs/_snippets/storybook-extract-specific-version.md
index ba8fd3fa0323..82bdb0189c5b 100644
--- a/docs/_snippets/storybook-extract-specific-version.md
+++ b/docs/_snippets/storybook-extract-specific-version.md
@@ -1,4 +1,4 @@
-```shell renderer="common" language="js" packageManager="npx"
+```shell renderer="common" language="js" packageManager="npm"
 npx storybook@7.5.3 extract
 ```
 
@@ -9,4 +9,3 @@ pnpm dlx storybook@7.5.3 extract
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@7.5.3 extract
 ```
-
diff --git a/docs/_snippets/storybook-figma-addon-install.md b/docs/_snippets/storybook-figma-addon-install.md
index 1d547af33fd1..aa21ff5491a6 100644
--- a/docs/_snippets/storybook-figma-addon-install.md
+++ b/docs/_snippets/storybook-figma-addon-install.md
@@ -1,12 +1,11 @@
 ```shell renderer="common" language="js" packageManager="npm"
-npm install --save-dev @storybook/addon-designs
+npx storybook@latest add @storybook/addon-designs
 ```
 
 ```shell renderer="common" language="js" packageManager="pnpm"
-pnpm add --save-dev @storybook/addon-designs
+pnpm dlx storybook@latest add @storybook/addon-designs
 ```
 
 ```shell renderer="common" language="js" packageManager="yarn"
-yarn add --dev @storybook/addon-designs
+yarn dlx storybook@latest add @storybook/addon-designs
 ```
-
diff --git a/docs/_snippets/storybook-fix-imports-autodocs-monorepo.md b/docs/_snippets/storybook-fix-imports-autodocs-monorepo.md
index e64d33a957c5..8a1cef5486ed 100644
--- a/docs/_snippets/storybook-fix-imports-autodocs-monorepo.md
+++ b/docs/_snippets/storybook-fix-imports-autodocs-monorepo.md
@@ -58,4 +58,3 @@ const meta: Meta<typeof MyComponent> = {
 
 export default meta;
 ```
-
diff --git a/docs/_snippets/storybook-framework-render-function.md b/docs/_snippets/storybook-framework-render-function.md
index 79dd68a4cae7..814368a6e2fa 100644
--- a/docs/_snippets/storybook-framework-render-function.md
+++ b/docs/_snippets/storybook-framework-render-function.md
@@ -7,4 +7,3 @@ export default function renderMain({ storyFn }: RenderMainArgs) {
   rootElement.innerHTML = html;
 }
 ```
-
diff --git a/docs/_snippets/storybook-generated-argtypes.md b/docs/_snippets/storybook-generated-argtypes.md
index 1f28e69a13e1..3250ac217846 100644
--- a/docs/_snippets/storybook-generated-argtypes.md
+++ b/docs/_snippets/storybook-generated-argtypes.md
@@ -15,4 +15,3 @@ const argTypes = {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-init-v7.md b/docs/_snippets/storybook-init-v7.md
index e74bfce11ce4..3966bc1efaf5 100644
--- a/docs/_snippets/storybook-init-v7.md
+++ b/docs/_snippets/storybook-init-v7.md
@@ -1,4 +1,4 @@
-```shell renderer="common" language="js" packageManager="npx"
+```shell renderer="common" language="js" packageManager="npm"
 npx storybook@^7 init
 ```
 
@@ -9,4 +9,3 @@ pnpm dlx storybook@^7 init
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@^7 init
 ```
-
diff --git a/docs/_snippets/storybook-interactions-addon-registration.md b/docs/_snippets/storybook-interactions-addon-registration.md
index c56c6e8a7154..dae3fa856fe8 100644
--- a/docs/_snippets/storybook-interactions-addon-registration.md
+++ b/docs/_snippets/storybook-interactions-addon-registration.md
@@ -25,4 +25,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-interactions-play-function.md b/docs/_snippets/storybook-interactions-play-function.md
index fcc0c3bb20cb..adb5900352b1 100644
--- a/docs/_snippets/storybook-interactions-play-function.md
+++ b/docs/_snippets/storybook-interactions-play-function.md
@@ -232,4 +232,3 @@ export const Submitted: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-interactions-step-function.md b/docs/_snippets/storybook-interactions-step-function.md
index 96d5c8847162..1283c93bdcf5 100644
--- a/docs/_snippets/storybook-interactions-step-function.md
+++ b/docs/_snippets/storybook-interactions-step-function.md
@@ -190,4 +190,3 @@ export const Submitted: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-main-advanced-config-example.md b/docs/_snippets/storybook-main-advanced-config-example.md
index 65752e8ff26c..b09dfe148cf3 100644
--- a/docs/_snippets/storybook-main-advanced-config-example.md
+++ b/docs/_snippets/storybook-main-advanced-config-example.md
@@ -34,4 +34,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-auto-title-custom.md b/docs/_snippets/storybook-main-auto-title-custom.md
index 9abaa4459c30..ee1abb62d8b2 100644
--- a/docs/_snippets/storybook-main-auto-title-custom.md
+++ b/docs/_snippets/storybook-main-auto-title-custom.md
@@ -27,4 +27,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-config-remark-options.md b/docs/_snippets/storybook-main-config-remark-options.md
index e8fc5c45d007..2126d1c26c2c 100644
--- a/docs/_snippets/storybook-main-config-remark-options.md
+++ b/docs/_snippets/storybook-main-config-remark-options.md
@@ -47,4 +47,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-configuration-src-dir.md b/docs/_snippets/storybook-main-configuration-src-dir.md
index 591ac0188c2f..ecc36c851e55 100644
--- a/docs/_snippets/storybook-main-configuration-src-dir.md
+++ b/docs/_snippets/storybook-main-configuration-src-dir.md
@@ -1,4 +1,4 @@
-```js filename="./storybook/main.js" renderer="common" language="js" tabTitle="main-js"
+```js filename="./storybook/main.js" renderer="common" language="js"
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
@@ -6,7 +6,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="main-ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -17,4 +17,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-disable-addon.md b/docs/_snippets/storybook-main-disable-addon.md
index 725234295c06..ddf6350af496 100644
--- a/docs/_snippets/storybook-main-disable-addon.md
+++ b/docs/_snippets/storybook-main-disable-addon.md
@@ -33,4 +33,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-disable-telemetry.md b/docs/_snippets/storybook-main-disable-telemetry.md
index da402967d828..fd28e548ce3c 100644
--- a/docs/_snippets/storybook-main-disable-telemetry.md
+++ b/docs/_snippets/storybook-main-disable-telemetry.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="main-js"
+```js filename=".storybook/main.js" renderer="common" language="js"
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
@@ -9,7 +9,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="main-ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -23,4 +23,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-extend-ts-config.md b/docs/_snippets/storybook-main-extend-ts-config.md
index efb9579b81b0..e8548fe59bfe 100644
--- a/docs/_snippets/storybook-main-extend-ts-config.md
+++ b/docs/_snippets/storybook-main-extend-ts-config.md
@@ -33,4 +33,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-fix-imports-autodocs-monorepo.md b/docs/_snippets/storybook-main-fix-imports-autodocs-monorepo.md
index 25e273b4af49..fe3e0f978416 100644
--- a/docs/_snippets/storybook-main-fix-imports-autodocs-monorepo.md
+++ b/docs/_snippets/storybook-main-fix-imports-autodocs-monorepo.md
@@ -27,4 +27,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-full-individual-essentials-config.md b/docs/_snippets/storybook-main-full-individual-essentials-config.md
index 93e1c35cd744..85e0e4612767 100644
--- a/docs/_snippets/storybook-main-full-individual-essentials-config.md
+++ b/docs/_snippets/storybook-main-full-individual-essentials-config.md
@@ -59,4 +59,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-js-md-files.md b/docs/_snippets/storybook-main-js-md-files.md
index 161d7f303ff3..96ec0d8622ac 100644
--- a/docs/_snippets/storybook-main-js-md-files.md
+++ b/docs/_snippets/storybook-main-js-md-files.md
@@ -17,4 +17,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-pnpm-with-module-resolution.md b/docs/_snippets/storybook-main-pnpm-with-module-resolution.md
index 4be87978a4f7..f022bd2f611b 100644
--- a/docs/_snippets/storybook-main-pnpm-with-module-resolution.md
+++ b/docs/_snippets/storybook-main-pnpm-with-module-resolution.md
@@ -42,4 +42,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-preview-head.md b/docs/_snippets/storybook-main-preview-head.md
index a7a8ee7bd1dd..30beffbf60b7 100644
--- a/docs/_snippets/storybook-main-preview-head.md
+++ b/docs/_snippets/storybook-main-preview-head.md
@@ -10,4 +10,3 @@ export default {
   `);
 };
 ```
-
diff --git a/docs/_snippets/storybook-main-prop-filter.md b/docs/_snippets/storybook-main-prop-filter.md
index 359b951ce491..bdb28d02e8bd 100644
--- a/docs/_snippets/storybook-main-prop-filter.md
+++ b/docs/_snippets/storybook-main-prop-filter.md
@@ -21,4 +21,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-react-docgen-typescript.md b/docs/_snippets/storybook-main-react-docgen-typescript.md
index 727b5c8a7cdb..71f562f3fe1a 100644
--- a/docs/_snippets/storybook-main-react-docgen-typescript.md
+++ b/docs/_snippets/storybook-main-react-docgen-typescript.md
@@ -15,4 +15,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-ref-local.md b/docs/_snippets/storybook-main-ref-local.md
index cf7f06c1529c..7cdea926c5ed 100644
--- a/docs/_snippets/storybook-main-ref-local.md
+++ b/docs/_snippets/storybook-main-ref-local.md
@@ -37,4 +37,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-register-addon.md b/docs/_snippets/storybook-main-register-addon.md
index ab10b1976599..166793a4632b 100644
--- a/docs/_snippets/storybook-main-register-addon.md
+++ b/docs/_snippets/storybook-main-register-addon.md
@@ -3,4 +3,3 @@ export default {
   addons: ['path/to/manager.js'],
 };
 ```
-
diff --git a/docs/_snippets/storybook-main-register-essentials-addon.md b/docs/_snippets/storybook-main-register-essentials-addon.md
index 59f397a9dd5d..a12e9e58c48f 100644
--- a/docs/_snippets/storybook-main-register-essentials-addon.md
+++ b/docs/_snippets/storybook-main-register-essentials-addon.md
@@ -18,4 +18,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-register-example-addon.md b/docs/_snippets/storybook-main-register-example-addon.md
index 024dd6b7e5fa..ac59dd73e354 100644
--- a/docs/_snippets/storybook-main-register-example-addon.md
+++ b/docs/_snippets/storybook-main-register-example-addon.md
@@ -20,4 +20,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-register-individual-actions-addon.md b/docs/_snippets/storybook-main-register-individual-actions-addon.md
index 45cb5261b754..248a85c4afb9 100644
--- a/docs/_snippets/storybook-main-register-individual-actions-addon.md
+++ b/docs/_snippets/storybook-main-register-individual-actions-addon.md
@@ -19,4 +19,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-register-presets-managerentry.md b/docs/_snippets/storybook-main-register-presets-managerentry.md
index fca4f44e6419..4aa96883322d 100644
--- a/docs/_snippets/storybook-main-register-presets-managerentry.md
+++ b/docs/_snippets/storybook-main-register-presets-managerentry.md
@@ -5,4 +5,3 @@ export default {
   ],
 };
 ```
-
diff --git a/docs/_snippets/storybook-main-simplified-config.md b/docs/_snippets/storybook-main-simplified-config.md
index b1f9a6a5872e..c324634836c8 100644
--- a/docs/_snippets/storybook-main-simplified-config.md
+++ b/docs/_snippets/storybook-main-simplified-config.md
@@ -25,4 +25,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-ts-module-resolution-atsign-import.md b/docs/_snippets/storybook-main-ts-module-resolution-atsign-import.md
index ac281eb91a65..6149c57438be 100644
--- a/docs/_snippets/storybook-main-ts-module-resolution-atsign-import.md
+++ b/docs/_snippets/storybook-main-ts-module-resolution-atsign-import.md
@@ -38,4 +38,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-ts-module-resolution.md b/docs/_snippets/storybook-main-ts-module-resolution.md
index 3473115ae6e2..c6932f0cc9be 100644
--- a/docs/_snippets/storybook-main-ts-module-resolution.md
+++ b/docs/_snippets/storybook-main-ts-module-resolution.md
@@ -43,4 +43,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-use-manager-entries.md b/docs/_snippets/storybook-main-use-manager-entries.md
index f3686ea18d51..9f70558000bd 100644
--- a/docs/_snippets/storybook-main-use-manager-entries.md
+++ b/docs/_snippets/storybook-main-use-manager-entries.md
@@ -3,4 +3,3 @@ export default {
   managerEntries: ['some-storybook-addon/entry-point.js'],
 };
 ```
-
diff --git a/docs/_snippets/storybook-main-using-existing-config.md b/docs/_snippets/storybook-main-using-existing-config.md
index 5c36cbf42766..e7c60a8f8b20 100644
--- a/docs/_snippets/storybook-main-using-existing-config.md
+++ b/docs/_snippets/storybook-main-using-existing-config.md
@@ -33,4 +33,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-versioned-webpack.md b/docs/_snippets/storybook-main-versioned-webpack.md
index eab56d99cf4a..f4b00f27abf8 100644
--- a/docs/_snippets/storybook-main-versioned-webpack.md
+++ b/docs/_snippets/storybook-main-versioned-webpack.md
@@ -7,4 +7,3 @@ export function webpackFinal(config, { presets }) {
   return config;
 }
 ```
-
diff --git a/docs/_snippets/storybook-main-webpack-options.md b/docs/_snippets/storybook-main-webpack-options.md
index 07adfc8fa696..bbb9728f62ff 100644
--- a/docs/_snippets/storybook-main-webpack-options.md
+++ b/docs/_snippets/storybook-main-webpack-options.md
@@ -35,4 +35,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-main-webpack-preset-config.md b/docs/_snippets/storybook-main-webpack-preset-config.md
index bf5e1656c94e..1967202f9119 100644
--- a/docs/_snippets/storybook-main-webpack-preset-config.md
+++ b/docs/_snippets/storybook-main-webpack-preset-config.md
@@ -19,4 +19,3 @@ export async function webpack(baseConfig, options) {
   };
 }
 ```
-
diff --git a/docs/_snippets/storybook-main-webpack5-fsCache.md b/docs/_snippets/storybook-main-webpack5-fsCache.md
index ccb14a9cdddc..9ca18b587cf7 100644
--- a/docs/_snippets/storybook-main-webpack5-fsCache.md
+++ b/docs/_snippets/storybook-main-webpack5-fsCache.md
@@ -10,4 +10,3 @@ export default {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-main-webpack5-lazyCompilation.md b/docs/_snippets/storybook-main-webpack5-lazyCompilation.md
index 7e95269a8e27..182c2187fd9c 100644
--- a/docs/_snippets/storybook-main-webpack5-lazyCompilation.md
+++ b/docs/_snippets/storybook-main-webpack5-lazyCompilation.md
@@ -10,4 +10,3 @@ export default {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-main-webpack5.md b/docs/_snippets/storybook-main-webpack5.md
index 8103e08a0ca5..f5e399b77ef4 100644
--- a/docs/_snippets/storybook-main-webpack5.md
+++ b/docs/_snippets/storybook-main-webpack5.md
@@ -5,4 +5,3 @@ export default {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-main-webpackfinal-example.md b/docs/_snippets/storybook-main-webpackfinal-example.md
index a1c504de8932..5ec6c4b7646e 100644
--- a/docs/_snippets/storybook-main-webpackfinal-example.md
+++ b/docs/_snippets/storybook-main-webpackfinal-example.md
@@ -9,4 +9,3 @@ export function webpackFinal(config, { configDir }) {
   return applyCRAWebpackConfig(config, configDir);
 }
 ```
-
diff --git a/docs/_snippets/storybook-manager-custom-theme.md b/docs/_snippets/storybook-manager-custom-theme.md
index 6a592e294fe2..c8f06b738d16 100644
--- a/docs/_snippets/storybook-manager-custom-theme.md
+++ b/docs/_snippets/storybook-manager-custom-theme.md
@@ -6,4 +6,3 @@ addons.setConfig({
   theme: yourTheme,
 });
 ```
-
diff --git a/docs/_snippets/storybook-manager-dark-theme.md b/docs/_snippets/storybook-manager-dark-theme.md
index 04ffcbf1f6d9..399c33fd37b7 100644
--- a/docs/_snippets/storybook-manager-dark-theme.md
+++ b/docs/_snippets/storybook-manager-dark-theme.md
@@ -6,4 +6,3 @@ addons.setConfig({
   theme: themes.dark,
 });
 ```
-
diff --git a/docs/_snippets/storybook-manager-disable-roots.md b/docs/_snippets/storybook-manager-disable-roots.md
index f2bcba560e30..a6bf68ed0ff3 100644
--- a/docs/_snippets/storybook-manager-disable-roots.md
+++ b/docs/_snippets/storybook-manager-disable-roots.md
@@ -7,4 +7,3 @@ addons.setConfig({
   },
 });
 ```
-
diff --git a/docs/_snippets/storybook-manager-render-label-stories.md b/docs/_snippets/storybook-manager-render-label-stories.md
index 621b2c863d5d..98a988631941 100644
--- a/docs/_snippets/storybook-manager-render-label-stories.md
+++ b/docs/_snippets/storybook-manager-render-label-stories.md
@@ -9,4 +9,3 @@ addons.setConfig({
   },
 });
 ```
-
diff --git a/docs/_snippets/storybook-mdx-template-with-prop.md b/docs/_snippets/storybook-mdx-template-with-prop.md
index 340277699165..27b9cb1f2831 100644
--- a/docs/_snippets/storybook-mdx-template-with-prop.md
+++ b/docs/_snippets/storybook-mdx-template-with-prop.md
@@ -1,9 +1,8 @@
-```mdx renderer="common" language="mdx"
-{/* DocumentationTemplate.mdx */}
-
+<!-- prettier-ignore -->
+```mdx filename="DocumentationTemplate.mdx" renderer="common" language="mdx"
 import { Meta, Title, Primary, Controls, Stories } from '@storybook/blocks';
 
-{/* 
+{/*
   * 👇 The isTemplate property is required to tell Storybook that this is a template
   * See https://storybook.js.org/docs/api/doc-blocks/doc-block-meta
   * to learn how to use
@@ -30,6 +29,4 @@ The component accepts the following inputs (props):
 Listed below are additional variations of the component.
 
 <Stories />
-
 ```
-
diff --git a/docs/_snippets/storybook-merged-argtypes.md b/docs/_snippets/storybook-merged-argtypes.md
index bc6a0660d079..e3a13a0a5392 100644
--- a/docs/_snippets/storybook-merged-argtypes.md
+++ b/docs/_snippets/storybook-merged-argtypes.md
@@ -18,4 +18,3 @@ const argTypes = {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-migrate-csf-2-to-3.md b/docs/_snippets/storybook-migrate-csf-2-to-3.md
index cf4e292d874a..502aa31d6b2d 100644
--- a/docs/_snippets/storybook-migrate-csf-2-to-3.md
+++ b/docs/_snippets/storybook-migrate-csf-2-to-3.md
@@ -12,4 +12,3 @@ pnpm dlx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.tsx" --parser=
 # Convert CSF 2 to CSF 3
 yarn dlx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.tsx" --parser=tsx
 ```
-
diff --git a/docs/_snippets/storybook-migrate-mdx-to-csf.md b/docs/_snippets/storybook-migrate-mdx-to-csf.md
index 48ed3b60de91..daa7baf83b0d 100644
--- a/docs/_snippets/storybook-migrate-mdx-to-csf.md
+++ b/docs/_snippets/storybook-migrate-mdx-to-csf.md
@@ -12,4 +12,3 @@ pnpm dlx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx"
 # Convert stories in MDX to CSF
 yarn dlx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx"
 ```
-
diff --git a/docs/_snippets/storybook-migrate-stories-of-to-csf.md b/docs/_snippets/storybook-migrate-stories-of-to-csf.md
index 0f73203fd378..392ca32e5e6b 100644
--- a/docs/_snippets/storybook-migrate-stories-of-to-csf.md
+++ b/docs/_snippets/storybook-migrate-stories-of-to-csf.md
@@ -12,4 +12,3 @@ pnpm dlx storybook@latest migrate storiesof-to-csf --glob="**/*.stories.tsx" --p
 # Convert storiesOf to CSF 1
 yarn dlx storybook@latest migrate storiesof-to-csf --glob="**/*.stories.tsx" --parser=tsx
 ```
-
diff --git a/docs/_snippets/storybook-preset-full-config-object.md b/docs/_snippets/storybook-preset-full-config-object.md
index 06cf12f99b02..d744586ea9f0 100644
--- a/docs/_snippets/storybook-preset-full-config-object.md
+++ b/docs/_snippets/storybook-preset-full-config-object.md
@@ -12,4 +12,3 @@ export default {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-preview-auto-docs-custom-docs-container.md b/docs/_snippets/storybook-preview-auto-docs-custom-docs-container.md
index 9e0828acd150..52d25e847a61 100644
--- a/docs/_snippets/storybook-preview-auto-docs-custom-docs-container.md
+++ b/docs/_snippets/storybook-preview-auto-docs-custom-docs-container.md
@@ -50,4 +50,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-auto-docs-custom-mdx-template.md b/docs/_snippets/storybook-preview-auto-docs-custom-mdx-template.md
index 1b11d0d702fb..0e97c75f2b19 100644
--- a/docs/_snippets/storybook-preview-auto-docs-custom-mdx-template.md
+++ b/docs/_snippets/storybook-preview-auto-docs-custom-mdx-template.md
@@ -9,4 +9,3 @@ export default {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-preview-auto-docs-custom-template-function.md b/docs/_snippets/storybook-preview-auto-docs-custom-template-function.md
index 0d6d10c90fa7..b7a8a420f8eb 100644
--- a/docs/_snippets/storybook-preview-auto-docs-custom-template-function.md
+++ b/docs/_snippets/storybook-preview-auto-docs-custom-template-function.md
@@ -56,4 +56,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-auto-docs-override-mdx-container.md b/docs/_snippets/storybook-preview-auto-docs-override-mdx-container.md
index 03d642e2cd77..315429659e90 100644
--- a/docs/_snippets/storybook-preview-auto-docs-override-mdx-container.md
+++ b/docs/_snippets/storybook-preview-auto-docs-override-mdx-container.md
@@ -68,4 +68,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-auto-docs-override-theme.md b/docs/_snippets/storybook-preview-auto-docs-override-theme.md
index 7b1b355b42fd..8639496e6d8d 100644
--- a/docs/_snippets/storybook-preview-auto-docs-override-theme.md
+++ b/docs/_snippets/storybook-preview-auto-docs-override-theme.md
@@ -38,4 +38,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-body-example.md b/docs/_snippets/storybook-preview-body-example.md
index 07ec6f9144ed..21886170b09d 100644
--- a/docs/_snippets/storybook-preview-body-example.md
+++ b/docs/_snippets/storybook-preview-body-example.md
@@ -1,6 +1,3 @@
-```html renderer="common" language="ts" tabTitle="html"
-{/*  .storybook/preview-body.html */}
-
+```html filename=".storybook/preview-body.html" renderer="common" language="js"
 <div id="custom-root"></div>
 ```
-
diff --git a/docs/_snippets/storybook-preview-body-font-size.md b/docs/_snippets/storybook-preview-body-font-size.md
index 1aaa3031d097..99c62f5d7726 100644
--- a/docs/_snippets/storybook-preview-body-font-size.md
+++ b/docs/_snippets/storybook-preview-body-font-size.md
@@ -1,10 +1,7 @@
-```html renderer="common" language="ts" tabTitle="html"
-{/* .storybook/preview-body.html */}
-
+```html filename=".storybook/preview-body.html" renderer="common" language="js"
 <style>
   html {
     font-size: 15px;
   }
 </style>
 ```
-
diff --git a/docs/_snippets/storybook-preview-compodoc-config.md b/docs/_snippets/storybook-preview-compodoc-config.md
index 776249642ba2..17d7af9cf4e8 100644
--- a/docs/_snippets/storybook-preview-compodoc-config.md
+++ b/docs/_snippets/storybook-preview-compodoc-config.md
@@ -20,4 +20,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-configure-globaltypes.md b/docs/_snippets/storybook-preview-configure-globaltypes.md
index a5504e518507..bbf1c6dd7af8 100644
--- a/docs/_snippets/storybook-preview-configure-globaltypes.md
+++ b/docs/_snippets/storybook-preview-configure-globaltypes.md
@@ -75,4 +75,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-custom-canvas.md b/docs/_snippets/storybook-preview-custom-canvas.md
index 4f5f90024f3b..05fccc7d5366 100644
--- a/docs/_snippets/storybook-preview-custom-canvas.md
+++ b/docs/_snippets/storybook-preview-custom-canvas.md
@@ -30,4 +30,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-custom-code-renderer.md b/docs/_snippets/storybook-preview-custom-code-renderer.md
index d32357ab45a6..a70653aee1cb 100644
--- a/docs/_snippets/storybook-preview-custom-code-renderer.md
+++ b/docs/_snippets/storybook-preview-custom-code-renderer.md
@@ -30,4 +30,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-custom-elements-config.md b/docs/_snippets/storybook-preview-custom-elements-config.md
index 7d0db859cb9c..8ba526e80655 100644
--- a/docs/_snippets/storybook-preview-custom-elements-config.md
+++ b/docs/_snippets/storybook-preview-custom-elements-config.md
@@ -38,4 +38,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-custom-metadata.md b/docs/_snippets/storybook-preview-custom-metadata.md
index 50e6530eb191..17334b597d4b 100644
--- a/docs/_snippets/storybook-preview-custom-metadata.md
+++ b/docs/_snippets/storybook-preview-custom-metadata.md
@@ -15,4 +15,3 @@ export default {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-preview-custom-params.md b/docs/_snippets/storybook-preview-custom-params.md
index b9c1908beb62..862749b58ccc 100644
--- a/docs/_snippets/storybook-preview-custom-params.md
+++ b/docs/_snippets/storybook-preview-custom-params.md
@@ -28,4 +28,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-custom-toc.md b/docs/_snippets/storybook-preview-custom-toc.md
index c3846775abf1..25ea41c85db4 100644
--- a/docs/_snippets/storybook-preview-custom-toc.md
+++ b/docs/_snippets/storybook-preview-custom-toc.md
@@ -40,4 +40,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-doc-blocks-controls-exclude-prop.md b/docs/_snippets/storybook-preview-doc-blocks-controls-exclude-prop.md
index 08ac32cb8132..5a7a9535a138 100644
--- a/docs/_snippets/storybook-preview-doc-blocks-controls-exclude-prop.md
+++ b/docs/_snippets/storybook-preview-doc-blocks-controls-exclude-prop.md
@@ -22,4 +22,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-docs-dark-theme.md b/docs/_snippets/storybook-preview-docs-dark-theme.md
index 423d1c9cb4d1..a356b6176019 100644
--- a/docs/_snippets/storybook-preview-docs-dark-theme.md
+++ b/docs/_snippets/storybook-preview-docs-dark-theme.md
@@ -26,4 +26,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-empty-sort-object.md b/docs/_snippets/storybook-preview-empty-sort-object.md
index dc73686f2f7a..669f71ed8cef 100644
--- a/docs/_snippets/storybook-preview-empty-sort-object.md
+++ b/docs/_snippets/storybook-preview-empty-sort-object.md
@@ -30,4 +30,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-enable-toc.md b/docs/_snippets/storybook-preview-enable-toc.md
index 0f131ecbab23..a4d0c95e3203 100644
--- a/docs/_snippets/storybook-preview-enable-toc.md
+++ b/docs/_snippets/storybook-preview-enable-toc.md
@@ -22,4 +22,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-expanded-controls.md b/docs/_snippets/storybook-preview-expanded-controls.md
index 522860eda7ed..e168a359868a 100644
--- a/docs/_snippets/storybook-preview-expanded-controls.md
+++ b/docs/_snippets/storybook-preview-expanded-controls.md
@@ -18,4 +18,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-extended-theme-variables.md b/docs/_snippets/storybook-preview-extended-theme-variables.md
index d1ca5e3db5cf..e6df84d48ec4 100644
--- a/docs/_snippets/storybook-preview-extended-theme-variables.md
+++ b/docs/_snippets/storybook-preview-extended-theme-variables.md
@@ -5,4 +5,3 @@ addonActionsTheme: {
   BASE_BACKGROUND_COLOR: 'transparent',
 }
 ```
-
diff --git a/docs/_snippets/storybook-preview-global-decorator.md b/docs/_snippets/storybook-preview-global-decorator.md
index 492cb13867d6..041dd4dfd4d7 100644
--- a/docs/_snippets/storybook-preview-global-decorator.md
+++ b/docs/_snippets/storybook-preview-global-decorator.md
@@ -121,4 +121,3 @@ export default {
   decorators: [(story) => html`<div style="margin: 3em">${story()}</div>`],
 };
 ```
-
diff --git a/docs/_snippets/storybook-preview-global-loader.md b/docs/_snippets/storybook-preview-global-loader.md
index 3c84596ad58d..d63d87dc76e7 100644
--- a/docs/_snippets/storybook-preview-global-loader.md
+++ b/docs/_snippets/storybook-preview-global-loader.md
@@ -22,4 +22,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-global-parameters.md b/docs/_snippets/storybook-preview-global-parameters.md
index b9c1908beb62..862749b58ccc 100644
--- a/docs/_snippets/storybook-preview-global-parameters.md
+++ b/docs/_snippets/storybook-preview-global-parameters.md
@@ -28,4 +28,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-head-example.md b/docs/_snippets/storybook-preview-head-example.md
index 3afab4ac7d2d..8b744dd19bdc 100644
--- a/docs/_snippets/storybook-preview-head-example.md
+++ b/docs/_snippets/storybook-preview-head-example.md
@@ -1,12 +1,13 @@
-```html renderer="common" language="ts" tabTitle="html"
-{/* .storybook/preview-head.html */}
-
-{/* Pull in static files served from your Static directory or the internet */}
-{/* Example: `main.js|ts` is configured with staticDirs: ['../public'] and your font is located in the `fonts` directory inside your `public` directory */}
+```html filename=".storybook/preview-head.html" renderer="common" language="js"
+<!--
+Pull in static files served from your Static directory or the internet
+Example:
+`main.js|ts` is configured with staticDirs: ['../public'] and your font is located in the `fonts`
+directory inside your `public` directory
+-->
 <link rel="preload" href="/fonts/my-font.woff2" />
 
-{/* Or you can load custom head-tag JavaScript: */}
-
+<!-- Or you can load custom head-tag JavaScript: -->
 <script src="https://use.typekit.net/xxxyyy.js"></script>
 <script>
   try {
@@ -14,4 +15,3 @@
   } catch (e) {}
 </script>
 ```
-
diff --git a/docs/_snippets/storybook-preview-head-import-global-styles.md b/docs/_snippets/storybook-preview-head-import-global-styles.md
index aab04dfd4795..7f1c18be7155 100644
--- a/docs/_snippets/storybook-preview-head-import-global-styles.md
+++ b/docs/_snippets/storybook-preview-head-import-global-styles.md
@@ -1,14 +1,11 @@
-```html renderer="common" language="ts" tabTitle="html"
-{/* .storybook/preview-head.html */}
-
-{/* Loads a font from a CDN */}
+```html filename=".storybook/preview-head.html" renderer="common" language="ts"
+<!-- Loads a font from a CDN -->
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link
   href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
   rel="stylesheet"
 />
-{/* Load your CSS file */}
+<!-- Load your CSS file -->
 <link rel="stylesheet" href="path/to/your/styles.css" />
 ```
-
diff --git a/docs/_snippets/storybook-preview-import-global-styles.md b/docs/_snippets/storybook-preview-import-global-styles.md
index d73c34e4776b..17219d409cda 100644
--- a/docs/_snippets/storybook-preview-import-global-styles.md
+++ b/docs/_snippets/storybook-preview-import-global-styles.md
@@ -18,4 +18,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-layout-param.md b/docs/_snippets/storybook-preview-layout-param.md
index 3e2d7fd520d0..4b6c649d9a83 100644
--- a/docs/_snippets/storybook-preview-layout-param.md
+++ b/docs/_snippets/storybook-preview-layout-param.md
@@ -18,4 +18,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-locales-globaltype.md b/docs/_snippets/storybook-preview-locales-globaltype.md
index d96bf310cc3a..c0928d584a98 100644
--- a/docs/_snippets/storybook-preview-locales-globaltype.md
+++ b/docs/_snippets/storybook-preview-locales-globaltype.md
@@ -78,4 +78,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-matching-argtypes.md b/docs/_snippets/storybook-preview-matching-argtypes.md
index 6d2f2212593e..61e2beae5c28 100644
--- a/docs/_snippets/storybook-preview-matching-argtypes.md
+++ b/docs/_snippets/storybook-preview-matching-argtypes.md
@@ -18,4 +18,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-optout-inline.md b/docs/_snippets/storybook-preview-optout-inline.md
index 81e32f4b4399..60991af50570 100644
--- a/docs/_snippets/storybook-preview-optout-inline.md
+++ b/docs/_snippets/storybook-preview-optout-inline.md
@@ -24,4 +24,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-parameters-color-swatches.md b/docs/_snippets/storybook-preview-parameters-color-swatches.md
index 5029cb279168..a018de4b7a09 100644
--- a/docs/_snippets/storybook-preview-parameters-color-swatches.md
+++ b/docs/_snippets/storybook-preview-parameters-color-swatches.md
@@ -22,4 +22,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-prepareforinline.md b/docs/_snippets/storybook-preview-prepareforinline.md
index e0940ccf9819..443f62a6b1de 100644
--- a/docs/_snippets/storybook-preview-prepareforinline.md
+++ b/docs/_snippets/storybook-preview-prepareforinline.md
@@ -11,4 +11,3 @@ export default {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-preview-register-language-globally.md b/docs/_snippets/storybook-preview-register-language-globally.md
index 4d798c0e46d0..6fb0772bb4a3 100644
--- a/docs/_snippets/storybook-preview-register-language-globally.md
+++ b/docs/_snippets/storybook-preview-register-language-globally.md
@@ -40,4 +40,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-sort-function.md b/docs/_snippets/storybook-preview-sort-function.md
index 6c0d87e7a88a..d55ba7643036 100644
--- a/docs/_snippets/storybook-preview-sort-function.md
+++ b/docs/_snippets/storybook-preview-sort-function.md
@@ -25,4 +25,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-use-global-type.md b/docs/_snippets/storybook-preview-use-global-type.md
index 0f9a8737f699..78141a96a16d 100644
--- a/docs/_snippets/storybook-preview-use-global-type.md
+++ b/docs/_snippets/storybook-preview-use-global-type.md
@@ -143,7 +143,7 @@ const preview: Preview = {
 export default preview;
 ```
 
-```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="3"
+```js filename=".storybook/preview.js" renderer="vue" language="js"
 import { setup } from '@storybook/vue3';
 
 import { VApp } from 'vuetify/components';
@@ -176,7 +176,7 @@ const preview = {
 export default preview;
 ```
 
-```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts"
 import type { Preview } from '@storybook/vue3';
 import { setup } from '@storybook/vue3';
 
@@ -243,4 +243,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-with-angular-polyfills.md b/docs/_snippets/storybook-preview-with-angular-polyfills.md
deleted file mode 100644
index 26dc3eb44ddb..000000000000
--- a/docs/_snippets/storybook-preview-with-angular-polyfills.md
+++ /dev/null
@@ -1,21 +0,0 @@
-```js filename=".storybook/preview.js" renderer="angular" language="js"
-import { setCompodocJson } from '@storybook/addon-docs/angular';
-import docJson from '../documentation.json';
-
-import '../src/polyfills';
-
-setCompodocJson(docJson);
-
-export default {
-  parameters: {
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/,
-      },
-    },
-    docs: { story: { inline: true } },
-  },
-};
-```
-
diff --git a/docs/_snippets/storybook-preview-with-hoc-component-decorator.md b/docs/_snippets/storybook-preview-with-hoc-component-decorator.md
deleted file mode 100644
index 2b8a1d70b738..000000000000
--- a/docs/_snippets/storybook-preview-with-hoc-component-decorator.md
+++ /dev/null
@@ -1,50 +0,0 @@
-```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="component-3"
-import { setup } from '@storybook/vue3';
-
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faPlusSquare as fasPlusSquare } from '@fortawesome/free-solid-svg-icons';
-
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-
-setup((app) => {
-  //👇 Adds the icon to the library so you can use it in your story.
-  library.add(fasPlusSquare);
-  app.component('font-awesome-icon', FontAwesomeIcon);
-});
-
-export default {
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: '<div style="margin: 3em;"><story /></div>',
-    }),
-  ],
-};
-```
-
-```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="component-3"
-import { setup, Preview } from '@storybook/vue3';
-
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faPlusSquare as fasPlusSquare } from '@fortawesome/free-solid-svg-icons';
-
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-
-setup((app) => {
-  //👇 Adds the icon to the library so you can use it in your story.
-  library.add(fasPlusSquare);
-  app.component('font-awesome-icon', FontAwesomeIcon);
-});
-
-const preview: Preview = {
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: '<div style="margin: 3em;"><story /></div>',
-    }),
-  ],
-};
-
-export default preview;
-```
-
diff --git a/docs/_snippets/storybook-preview-with-library-decorator.md b/docs/_snippets/storybook-preview-with-library-decorator.md
index 8e90b2747784..6c9b9219bf3e 100644
--- a/docs/_snippets/storybook-preview-with-library-decorator.md
+++ b/docs/_snippets/storybook-preview-with-library-decorator.md
@@ -1,4 +1,33 @@
-```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="library-3"
+```js filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="preview"
+import type { Preview } from '@storybook/angular';
+
+import { setCompodocJson } from '@storybook/addon-docs/angular';
+
+import docJson from '../documentation.json';
+
+import '../src/polyfills';
+
+setCompodocJson(docJson);
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;
+```
+
+```ts filename="src/polyfills.ts" renderer="angular" language="ts" tabTitle="polyfills"
+import '@angular/localize/init';
+```
+
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="library"
 import { setup } from '@storybook/vue3';
 
 import { createPinia } from 'pinia';
@@ -18,7 +47,31 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="library-3"
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="component"
+import { setup } from '@storybook/vue3';
+
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faPlusSquare as fasPlusSquare } from '@fortawesome/free-solid-svg-icons';
+
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+setup((app) => {
+  //👇 Adds the icon to the library so you can use it in your story.
+  library.add(fasPlusSquare);
+  app.component('font-awesome-icon', FontAwesomeIcon);
+});
+
+export default {
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: '<div style="margin: 3em;"><story /></div>',
+    }),
+  ],
+};
+```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="library"
 import { setup, Preview } from '@storybook/vue3';
 
 import { createPinia } from 'pinia';
@@ -40,3 +93,28 @@ const preview: Preview = {
 export default preview;
 ```
 
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="component"
+import { setup, Preview } from '@storybook/vue3';
+
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faPlusSquare as fasPlusSquare } from '@fortawesome/free-solid-svg-icons';
+
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
+setup((app) => {
+  //👇 Adds the icon to the library so you can use it in your story.
+  library.add(fasPlusSquare);
+  app.component('font-awesome-icon', FontAwesomeIcon);
+});
+
+const preview: Preview = {
+  decorators: [
+    (story) => ({
+      components: { story },
+      template: '<div style="margin: 3em;"><story /></div>',
+    }),
+  ],
+};
+
+export default preview;
+```
diff --git a/docs/_snippets/storybook-preview-with-ordered-pages-and-wildcard.md b/docs/_snippets/storybook-preview-with-ordered-pages-and-wildcard.md
index b1b61605b116..04bf16d2d20e 100644
--- a/docs/_snippets/storybook-preview-with-ordered-pages-and-wildcard.md
+++ b/docs/_snippets/storybook-preview-with-ordered-pages-and-wildcard.md
@@ -26,4 +26,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-with-ordered-pages.md b/docs/_snippets/storybook-preview-with-ordered-pages.md
index 1bf1a7ec0a4c..72b79e145c55 100644
--- a/docs/_snippets/storybook-preview-with-ordered-pages.md
+++ b/docs/_snippets/storybook-preview-with-ordered-pages.md
@@ -26,4 +26,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-preview-with-styled-components-decorator.md b/docs/_snippets/storybook-preview-with-styled-components-decorator.md
index 93db7b71ccff..1a5e6fc62ddd 100644
--- a/docs/_snippets/storybook-preview-with-styled-components-decorator.md
+++ b/docs/_snippets/storybook-preview-with-styled-components-decorator.md
@@ -105,4 +105,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/storybook-read-environment-variables.md b/docs/_snippets/storybook-read-environment-variables.md
index 7c8f1c8a6c4c..608b90bbc845 100644
--- a/docs/_snippets/storybook-read-environment-variables.md
+++ b/docs/_snippets/storybook-read-environment-variables.md
@@ -7,4 +7,3 @@ console.log(process.env.STORYBOOK_DATA_KEY);
 console.log(import.meta.env.STORYBOOK_THEME);
 console.log(import.meta.env.STORYBOOK_DATA_KEY);
 ```
-
diff --git a/docs/_snippets/storybook-remove-command.md b/docs/_snippets/storybook-remove-command.md
index ba8c815f8f48..43f8d804617a 100644
--- a/docs/_snippets/storybook-remove-command.md
+++ b/docs/_snippets/storybook-remove-command.md
@@ -9,4 +9,3 @@ pnpm dlx storybook@latest remove @storybook/addon-a11y
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@latest remove @storybook/addon-a11y
 ```
-
diff --git a/docs/_snippets/storybook-run-dev.md b/docs/_snippets/storybook-run-dev.md
index d1b093f92486..4c562b86bf86 100644
--- a/docs/_snippets/storybook-run-dev.md
+++ b/docs/_snippets/storybook-run-dev.md
@@ -13,4 +13,3 @@ pnpm run storybook
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn storybook
 ```
-
diff --git a/docs/_snippets/storybook-server-framework-options.md b/docs/_snippets/storybook-server-framework-options.md
index b16de7b63cc8..56916a549d33 100644
--- a/docs/_snippets/storybook-server-framework-options.md
+++ b/docs/_snippets/storybook-server-framework-options.md
@@ -8,4 +8,3 @@ export default {
   frameworkPresets: [require.resolve('./framework-preset-my-framework.js')],
 };
 ```
-
diff --git a/docs/_snippets/storybook-server-options.md b/docs/_snippets/storybook-server-options.md
index 5af66e203bb7..ce8b458fc199 100644
--- a/docs/_snippets/storybook-server-options.md
+++ b/docs/_snippets/storybook-server-options.md
@@ -7,4 +7,3 @@ export default {
   frameworkPresets: [require.resolve('./framework-preset-vue.js')],
 };
 ```
-
diff --git a/docs/_snippets/storybook-start-dev-server.md b/docs/_snippets/storybook-start-dev-server.md
index b8cb5ef811b0..62b5e0df161b 100644
--- a/docs/_snippets/storybook-start-dev-server.md
+++ b/docs/_snippets/storybook-start-dev-server.md
@@ -5,4 +5,3 @@ import options from './options';
 
 buildDev(options);
 ```
-
diff --git a/docs/_snippets/storybook-story-layout-param.md b/docs/_snippets/storybook-story-layout-param.md
index 8594ccdda3a5..f0403f7993e4 100644
--- a/docs/_snippets/storybook-story-layout-param.md
+++ b/docs/_snippets/storybook-story-layout-param.md
@@ -99,4 +99,3 @@ export const WithLayout: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-storyloading-with-directory.md b/docs/_snippets/storybook-storyloading-with-directory.md
index efd3ad885d4f..1f9f22e37611 100644
--- a/docs/_snippets/storybook-storyloading-with-directory.md
+++ b/docs/_snippets/storybook-storyloading-with-directory.md
@@ -19,4 +19,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-storysource-manager-entries.md b/docs/_snippets/storybook-storysource-manager-entries.md
index 1eac3840ec4b..7f2a65c8cf15 100644
--- a/docs/_snippets/storybook-storysource-manager-entries.md
+++ b/docs/_snippets/storybook-storysource-manager-entries.md
@@ -1,4 +1,3 @@
 ```js filename="storysource/preset.js" renderer="common" language="js"
 /* nothing needed */
 ```
-
diff --git a/docs/_snippets/storybook-telemetry-crash-report-event.md b/docs/_snippets/storybook-telemetry-crash-report-event.md
index 5b307df850b6..118bd8b6c179 100644
--- a/docs/_snippets/storybook-telemetry-crash-report-event.md
+++ b/docs/_snippets/storybook-telemetry-crash-report-event.md
@@ -11,4 +11,3 @@
   message: 'Your button is not working'
 }
 ```
-
diff --git a/docs/_snippets/storybook-telemetry-main-enable-crash-reports.md b/docs/_snippets/storybook-telemetry-main-enable-crash-reports.md
index aa80c4375fe0..32f436b273ae 100644
--- a/docs/_snippets/storybook-telemetry-main-enable-crash-reports.md
+++ b/docs/_snippets/storybook-telemetry-main-enable-crash-reports.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="main-js"
+```js filename=".storybook/main.js" renderer="common" language="js"
 export default {
   // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
   framework: '@storybook/your-framework',
@@ -9,7 +9,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="main-ts"
+```ts filename=".storybook/main.ts" renderer="common" language="ts"
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
 import type { StorybookConfig } from '@storybook/your-framework';
 
@@ -23,4 +23,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/storybook-telemetry-preview-event.md b/docs/_snippets/storybook-telemetry-preview-event.md
index 8cc060bbafd6..275db577eef9 100644
--- a/docs/_snippets/storybook-telemetry-preview-event.md
+++ b/docs/_snippets/storybook-telemetry-preview-event.md
@@ -5,4 +5,3 @@ STORYBOOK_TELEMETRY_DEBUG=1 npm run storybook
 ```shell renderer="common" language="js" packageManager="yarn"
 STORYBOOK_TELEMETRY_DEBUG=1 yarn storybook
 ```
-
diff --git a/docs/_snippets/storybook-telemetry-storybook-enable-crash-reports-env.md b/docs/_snippets/storybook-telemetry-storybook-enable-crash-reports-env.md
new file mode 100644
index 000000000000..cc5eb3bd9da9
--- /dev/null
+++ b/docs/_snippets/storybook-telemetry-storybook-enable-crash-reports-env.md
@@ -0,0 +1,3 @@
+```shell renderer="common" language="js"
+STORYBOOK_ENABLE_CRASH_REPORTS=1 yarn storybook
+```
diff --git a/docs/_snippets/storybook-telemetry-storybook-enable-crash-reports.md b/docs/_snippets/storybook-telemetry-storybook-enable-crash-reports-flag.md
similarity index 74%
rename from docs/_snippets/storybook-telemetry-storybook-enable-crash-reports.md
rename to docs/_snippets/storybook-telemetry-storybook-enable-crash-reports-flag.md
index 4eebe6003d03..5724a59ee45e 100644
--- a/docs/_snippets/storybook-telemetry-storybook-enable-crash-reports.md
+++ b/docs/_snippets/storybook-telemetry-storybook-enable-crash-reports-flag.md
@@ -1,7 +1,3 @@
-```shell renderer="common" language="js" tabTitle="env-var"
-STORYBOOK_ENABLE_CRASH_REPORTS=1 yarn storybook
-```
-
 ```shell renderer="common" language="js" packageManager="npm"
 npm run storybook -- --enable-crash-reports
 ```
@@ -13,4 +9,3 @@ pnpm run storybook --enable-crash-reports
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn storybook --enable-crash-reports
 ```
-
diff --git a/docs/_snippets/storybook-test-addon-disable-tests.md b/docs/_snippets/storybook-test-addon-disable-tests.md
new file mode 100644
index 000000000000..6f004039dc60
--- /dev/null
+++ b/docs/_snippets/storybook-test-addon-disable-tests.md
@@ -0,0 +1,392 @@
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  /*
+   * Enable accessibility checks for all stories in this component
+   * This is only necessary if you have set the `!a11ytest` tag in your preview file, otherwise `a11ytest` is enabled by default
+   */
+  tags: ['a11ytest'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Accessible: Story = {
+  args: {
+    primary: false,
+    label: 'Button',
+  },
+};
+
+export const Inaccessible: Story = {
+  // Turn off accessibility tests for this story using the tag's configuration option
+  tags: ['!a11ytest'],
+  args: {
+    ...Accessible.args,
+    backgroundColor: 'red',
+  },
+};
+```
+
+```js filename="Button.stories.js|jsx" renderer="react" language="js"
+import { Button } from './Button';
+
+export default {
+  component: Button,
+  /*
+   * Enable accessibility checks for all stories in this component
+   * This is only necessary if you have set the `!a11ytest` tag in your preview file, otherwise `a11ytest` is enabled by default
+   */
+  tags: ['a11ytest'],
+};
+
+export const Accessible = {
+  args: {
+    primary: false,
+    label: 'Button',
+  },
+};
+
+export const Inaccessible = {
+  // Turn off accessibility tests for this story using the tag's configuration option
+  tags: ['!a11ytest'],
+  args: {
+    ...Accessible.args,
+    backgroundColor: 'red',
+  },
+};
+```
+
+```ts filename="Button.stories.ts|tsx" renderer="react" language="ts-4-9"
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+  /*
+   * Enable accessibility checks for all stories in this component
+   * This is only necessary if you have set the `!a11ytest` tag in your preview file, otherwise `a11ytest` is enabled by default
+   */
+  tags: ['a11ytest'],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Accessible: Story = {
+  args: {
+    primary: false,
+    label: 'Button',
+  },
+};
+
+export const Inaccessible: Story = {
+  // Turn off accessibility tests for this story using the tag's configuration option
+  tags: ['!a11ytest'],
+  args: {
+    ...Accessible.args,
+    backgroundColor: 'red',
+  },
+};
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  /*
+  * Enable accessibility checks for all stories in this component
+  * This is only necessary if you have set the `!a11ytest` tag in your preview file, otherwise `a11ytest` is enabled by default
+  */
+  const { Story } = defineMeta({
+    component: Button,
+    tags: ['a11ytest'],
+  });
+
+  const AccessibleArgs = {
+    primary: false,
+    label: 'Button',
+  };
+</script>
+
+<Story name="Accessible" args={AccessibleArgs} />
+
+<!-- Turn off accessibility tests for this story using the tag's configuration option -->
+<Story
+  name="Inaccessible"
+  tags={['!a11ytest']}
+  args={{
+    ...AccessibleArgs,
+    backgroundColor: 'red',
+  }}
+/>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+  /*
+   * Enable accessibility checks for all stories in this component
+   * This is only necessary if you have set the `!a11ytest` tag in your preview file, otherwise `a11ytest` is enabled by default
+   */
+  tags: ['a11ytest'],
+};
+
+export const Accessible = {
+  args: {
+    primary: false,
+    label: 'Button',
+  },
+};
+
+export const Inaccessible = {
+  // Turn off accessibility tests for this story using the tag's configuration option
+  tags: ['!a11ytest'],
+  args: {
+    ...Accessible.args,
+    backgroundColor: 'red',
+  },
+};
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  /*
+  * Enable accessibility checks for all stories in this component
+  * This is only necessary if you have set the `!a11ytest` tag in your preview file, otherwise `a11ytest` is enabled by default
+  */
+  const { Story } = defineMeta({
+    component: Button,
+    tags: ['a11ytest'],
+  });
+
+  const AccessibleArgs = {
+    primary: false,
+    label: 'Button',
+  };
+</script>
+
+<Story name="Accessible" args={AccessibleArgs} />
+
+<!-- Turn off accessibility tests for this story using the tag's configuration option -->
+<Story
+  name="Inaccessible"
+  tags={['!a11ytest']}
+  args={{
+    ...AccessibleArgs,
+    backgroundColor: 'red',
+  }}
+/>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+  /*
+   * Enable accessibility checks for all stories in this component
+   * This is only necessary if you have set the `!a11ytest` tag in your preview file, otherwise `a11ytest` is enabled by default
+   */
+  tags: ['a11ytest'],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Accessible: Story = {
+  args: {
+    primary: false,
+    label: 'Button',
+  },
+};
+
+export const Inaccessible: Story = {
+  // Turn off accessibility tests for this story using the tag's configuration option
+  tags: ['!a11ytest'],
+  args: {
+    ...Accessible.args,
+    backgroundColor: 'red',
+  },
+};
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  /*
+  * Enable accessibility checks for all stories in this component
+  * This is only necessary if you have set the `!a11ytest` tag in your preview file, otherwise `a11ytest` is enabled by default
+  */
+  const { Story } = defineMeta({
+    component: Button,
+    tags: ['a11ytest'],
+  });
+
+  const AccessibleArgs = {
+    primary: false,
+    label: 'Button',
+  };
+</script>
+
+<Story name="Accessible" args={AccessibleArgs} />
+
+<!-- Turn off accessibility tests for this story using the tag's configuration option -->
+<Story
+  name="Inaccessible"
+  tags={['!a11ytest']}
+  args={{
+    ...AccessibleArgs,
+    backgroundColor: 'red',
+  }}
+/>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  /*
+   * Enable accessibility checks for all stories in this component
+   * This is only necessary if you have set the `!a11ytest` tag in your preview file, otherwise `a11ytest` is enabled by default
+   */
+  tags: ['a11ytest'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Accessible: Story = {
+  args: {
+    primary: false,
+    label: 'Button',
+  },
+};
+
+export const Inaccessible: Story = {
+  // Turn off accessibility tests for this story using the tag's configuration option
+  tags: ['!a11ytest'],
+  args: {
+    ...Accessible.args,
+    backgroundColor: 'red',
+  },
+};
+```
+
+```js filename="Button.stories.js" renderer="vue" language="js"
+import Button from './Button.vue';
+
+export default {
+  component: Button,
+  /*
+   * Enable accessibility checks for all stories in this component
+   * This is only necessary if you have set the `!a11ytest` tag in your preview file, otherwise `a11ytest` is enabled by default
+   */
+  tags: ['a11ytest'],
+};
+
+export const Accessible = {
+  args: {
+    primary: false,
+    label: 'Button',
+  },
+};
+
+export const Inaccessible = {
+  // Turn off accessibility tests for this story using the tag's configuration option
+  tags: ['!a11ytest'],
+  args: {
+    ...Accessible.args,
+    backgroundColor: 'red',
+  },
+};
+```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts-4-9"
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Button from './Button.vue';
+
+const meta = {
+  component: Button,
+  /*
+   * Enable accessibility checks for all stories in this component
+   * This is only necessary if you have set the `!a11ytest` tag in your preview file, otherwise `a11ytest` is enabled by default
+   */
+  tags: ['a11ytest'],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Accessible: Story = {
+  args: {
+    primary: false,
+    label: 'Button',
+  },
+};
+
+export const Inaccessible: Story = {
+  // Turn off accessibility tests for this story using the tag's configuration option
+  tags: ['!a11ytest'],
+  args: {
+    ...Accessible.args,
+    backgroundColor: 'red',
+  },
+};
+```
+
+```ts filename="Button.stories.ts" renderer="vue" language="ts"
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Button from './Button.vue';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  /*
+   * Enable accessibility checks for all stories in this component
+   * This is only necessary if you have set the `!a11ytest` tag in your preview file, otherwise `a11ytest` is enabled by default
+   */
+  tags: ['a11ytest'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Accessible: Story = {
+  args: {
+    primary: false,
+    label: 'Button',
+  },
+};
+
+export const Inaccessible: Story = {
+  // Turn off accessibility tests for this story using the tag's configuration option
+  tags: ['!a11ytest'],
+  args: {
+    ...Accessible.args,
+    backgroundColor: 'red',
+  },
+};
+```
diff --git a/docs/_snippets/storybook-test-fn-mock-spy.md b/docs/_snippets/storybook-test-fn-mock-spy.md
index 62760213efbb..d371d0abb66f 100644
--- a/docs/_snippets/storybook-test-fn-mock-spy.md
+++ b/docs/_snippets/storybook-test-fn-mock-spy.md
@@ -5,6 +5,7 @@ import { expect, userEvent, within } from '@storybook/test';
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { saveNote } from '#app/actions.mock';
 import { createNotes } from '#mocks/notes';
+
 import NoteUI from './note-ui';
 
 const meta: Meta<NoteUI> = {
@@ -39,6 +40,7 @@ import { expect, userEvent, within } from '@storybook/test';
 
 import { saveNote } from '#app/actions.mock';
 import { createNotes } from '#mocks/notes';
+
 import NoteUI from './note-ui';
 
 export default {
@@ -73,6 +75,7 @@ import { expect, userEvent, within } from '@storybook/test';
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { saveNote } from '#app/actions.mock';
 import { createNotes } from '#mocks/notes';
+
 import NoteUI from './note-ui';
 
 const meta = {
@@ -203,4 +206,3 @@ export const SaveFlow: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-test-mock-file-example.md b/docs/_snippets/storybook-test-mock-file-example.md
index 594f84887875..6313dcf2147c 100644
--- a/docs/_snippets/storybook-test-mock-file-example.md
+++ b/docs/_snippets/storybook-test-mock-file-example.md
@@ -5,4 +5,3 @@ import * as actual from './session';
 export * from './session';
 export const getUserFromSession = fn(actual.getUserFromSession).mockName('getUserFromSession');
 ```
-
diff --git a/docs/_snippets/storybook-test-mock-return-value.md b/docs/_snippets/storybook-test-mock-return-value.md
index e552bc061e06..4017f205a00b 100644
--- a/docs/_snippets/storybook-test-mock-return-value.md
+++ b/docs/_snippets/storybook-test-mock-return-value.md
@@ -3,6 +3,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { getUserFromSession } from '#api/session.mock';
+
 import { Page } from './Page';
 
 const meta: Meta<Page> = {
@@ -22,6 +23,7 @@ export const Default: Story = {
 
 ```js filename="Page.stories.js" renderer="common" language="js"
 import { getUserFromSession } from '#api/session.mock';
+
 import { Page } from './Page';
 
 export default {
@@ -42,6 +44,7 @@ import type { Meta, StoryObj } from '@storybook/your-renderer';
 
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { getUserFromSession } from '#api/session.mock';
+
 import { Page } from './Page';
 
 const meta = {
@@ -66,6 +69,7 @@ import type { Meta, StoryObj } from '@storybook/your-renderer';
 
 // 👇 Must include the `.mock` portion of filename to have mocks typed correctly
 import { getUserFromSession } from '#api/session.mock';
+
 import { Page } from './Page';
 
 const meta: Meta<typeof Page> = {
@@ -118,4 +122,3 @@ export const Default: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-test-with-storyname.md b/docs/_snippets/storybook-test-with-storyname.md
index e09ae2cec29b..8cabc5577c1b 100644
--- a/docs/_snippets/storybook-test-with-storyname.md
+++ b/docs/_snippets/storybook-test-with-storyname.md
@@ -13,4 +13,3 @@ it('should format CSF exports with sensible defaults', () => {
   });
 });
 ```
-
diff --git a/docs/_snippets/storybook-theme-example-variables.md b/docs/_snippets/storybook-theme-example-variables.md
index 0f045dc6c52e..aca575cad984 100644
--- a/docs/_snippets/storybook-theme-example-variables.md
+++ b/docs/_snippets/storybook-theme-example-variables.md
@@ -9,4 +9,3 @@ export default create({
   brandTarget: '_self',
 });
 ```
-
diff --git a/docs/_snippets/storybook-theming-packages-install.md b/docs/_snippets/storybook-theming-packages-install.md
index a4e031c514d8..36a076f0b8f3 100644
--- a/docs/_snippets/storybook-theming-packages-install.md
+++ b/docs/_snippets/storybook-theming-packages-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/manager-api @storybook/theming
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn add --dev @storybook/manager-api @storybook/theming
 ```
-
diff --git a/docs/_snippets/storybook-theming-styled-import.md b/docs/_snippets/storybook-theming-styled-import.md
index 112d6d7497d2..5c1f84ea8b6c 100644
--- a/docs/_snippets/storybook-theming-styled-import.md
+++ b/docs/_snippets/storybook-theming-styled-import.md
@@ -1,4 +1,3 @@
 ```js filename="YourTheme.js" renderer="common" language="js"
 import { styled } from '@storybook/theming';
 ```
-
diff --git a/docs/_snippets/storybook-upgrade-prerelease.md b/docs/_snippets/storybook-upgrade-prerelease.md
index 882153c1a175..3b71ef4c4d98 100644
--- a/docs/_snippets/storybook-upgrade-prerelease.md
+++ b/docs/_snippets/storybook-upgrade-prerelease.md
@@ -9,4 +9,3 @@ pnpm dlx storybook@next upgrade
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@next upgrade
 ```
-
diff --git a/docs/_snippets/storybook-upgrade-to-prior-major.md b/docs/_snippets/storybook-upgrade-to-prior-major.md
index 58295bb021e3..a8a0de4ad9ba 100644
--- a/docs/_snippets/storybook-upgrade-to-prior-major.md
+++ b/docs/_snippets/storybook-upgrade-to-prior-major.md
@@ -9,4 +9,3 @@ pnpm dlx storybook@^7 upgrade
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@^7 upgrade
 ```
-
diff --git a/docs/_snippets/storybook-upgrade.md b/docs/_snippets/storybook-upgrade.md
index ddc92f704cb2..3b71ef4c4d98 100644
--- a/docs/_snippets/storybook-upgrade.md
+++ b/docs/_snippets/storybook-upgrade.md
@@ -1,12 +1,11 @@
 ```shell renderer="common" language="js" packageManager="npm"
-npx storybook@latest upgrade
+npx storybook@next upgrade
 ```
 
 ```shell renderer="common" language="js" packageManager="pnpm"
-pnpm dlx storybook@latest upgrade
+pnpm dlx storybook@next upgrade
 ```
 
 ```shell renderer="common" language="js" packageManager="yarn"
-yarn dlx storybook@latest upgrade
+yarn dlx storybook@next upgrade
 ```
-
diff --git a/docs/_snippets/storybook-vite-builder-aliasing.md b/docs/_snippets/storybook-vite-builder-aliasing.md
index 3481d8869313..2c9af4f2860a 100644
--- a/docs/_snippets/storybook-vite-builder-aliasing.md
+++ b/docs/_snippets/storybook-vite-builder-aliasing.md
@@ -1,7 +1,7 @@
 ```js filename=".storybook/main.js|ts" renderer="common" language="js"
 export default {
   stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  addons: ['@storybook/addon-essentials'],
   core: {
     builder: '@storybook/builder-vite',
   },
@@ -18,4 +18,3 @@ export default {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-vite-builder-install.md b/docs/_snippets/storybook-vite-builder-install.md
index 0de50e2116b3..9bc49e64fbf8 100644
--- a/docs/_snippets/storybook-vite-builder-install.md
+++ b/docs/_snippets/storybook-vite-builder-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/builder-vite
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn add --dev @storybook/builder-vite
 ```
-
diff --git a/docs/_snippets/storybook-vite-builder-jest-mock.md b/docs/_snippets/storybook-vite-builder-jest-mock.md
index 1a864be1d6e2..51a05104a0dc 100644
--- a/docs/_snippets/storybook-vite-builder-jest-mock.md
+++ b/docs/_snippets/storybook-vite-builder-jest-mock.md
@@ -1,8 +1,5 @@
-```html renderer="common" language="ts" tabTitle="html"
-{/* .storybook/preview-head.html */}
-
+```html filename=".storybook/preview-head.html" renderer="common" language="js"
 <script>
   window.global = window;
 </script>
 ```
-
diff --git a/docs/_snippets/storybook-vite-builder-react-docgen.md b/docs/_snippets/storybook-vite-builder-react-docgen.md
index 733b8be00652..936bbbf99722 100644
--- a/docs/_snippets/storybook-vite-builder-react-docgen.md
+++ b/docs/_snippets/storybook-vite-builder-react-docgen.md
@@ -1,7 +1,7 @@
 ```js filename=".storybook/main.js|ts" renderer="common" language="js"
 export default {
   stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  addons: ['@storybook/addon-essentials'],
   core: {
     builder: '@storybook/builder-vite',
   },
@@ -12,4 +12,3 @@ export default {
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-vite-builder-register.md b/docs/_snippets/storybook-vite-builder-register.md
index 1740909197f6..952f747a212c 100644
--- a/docs/_snippets/storybook-vite-builder-register.md
+++ b/docs/_snippets/storybook-vite-builder-register.md
@@ -1,10 +1,9 @@
 ```js filename=".storybook/main.js|ts" renderer="common" language="js"
 export default {
   stories: ['../src/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  addons: ['@storybook/addon-essentials'],
   core: {
     builder: '@storybook/builder-vite', // 👈 The builder enabled here.
   },
 };
 ```
-
diff --git a/docs/_snippets/storybook-vite-builder-ts-configure.md b/docs/_snippets/storybook-vite-builder-ts-configure.md
index f9fb98a7e6a6..61ec1ecce1ea 100644
--- a/docs/_snippets/storybook-vite-builder-ts-configure.md
+++ b/docs/_snippets/storybook-vite-builder-ts-configure.md
@@ -29,4 +29,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/subpath-imports-config.md b/docs/_snippets/subpath-imports-config.md
index 676b3e461631..7c52d59099d7 100644
--- a/docs/_snippets/subpath-imports-config.md
+++ b/docs/_snippets/subpath-imports-config.md
@@ -4,23 +4,22 @@
     "#api": {
       // storybook condition applies to Storybook
       "storybook": "./api.mock.ts",
-      "default": "./api.ts"
+      "default": "./api.ts",
     },
     "#app/actions": {
       "storybook": "./app/actions.mock.ts",
-      "default": "./app/actions.ts"
+      "default": "./app/actions.ts",
     },
     "#lib/session": {
       "storybook": "./lib/session.mock.ts",
-      "default": "./lib/session.ts"
+      "default": "./lib/session.ts",
     },
     "#lib/db": {
       // test condition applies to test environments *and* Storybook
       "test": "./lib/db.mock.ts",
-      "default": "./lib/db.ts"
+      "default": "./lib/db.ts",
     },
-    "#*": ["./*", "./*.ts", "./*.tsx"]
-  }
+    "#*": ["./*", "./*.ts", "./*.tsx"],
+  },
 }
 ```
-
diff --git a/docs/_snippets/svelte-csf-addon-install.md b/docs/_snippets/svelte-csf-addon-install.md
index 3b036e9fecf0..45120afac465 100644
--- a/docs/_snippets/svelte-csf-addon-install.md
+++ b/docs/_snippets/svelte-csf-addon-install.md
@@ -9,4 +9,3 @@ pnpm dlx storybook@latest add @storybook/addon-svelte-csf
 ```shell renderer="svelte" language="js" packageManager="yarn"
 yarn storybook@latest add @storybook/addon-svelte-csf
 ```
-
diff --git a/docs/_snippets/svelte-csf-addon-options.md b/docs/_snippets/svelte-csf-addon-options.md
new file mode 100644
index 000000000000..12b4dc2f730f
--- /dev/null
+++ b/docs/_snippets/svelte-csf-addon-options.md
@@ -0,0 +1,31 @@
+```js filename=".storybook/main.js" renderer="svelte" language="js"
+export default {
+  // Other configuration
+  addons: [
+    {
+      name: '@storybook/addon-svelte-csf',
+      options: {
+        legacyTemplate: true, // Enables the legacy template syntax
+      },
+    },
+  ],
+};
+```
+
+```js filename=".storybook/main.ts" renderer="svelte" language="ts"
+// Replace your-framework with the name of your Svelte framework
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  // Other configuration
+  addons: [
+    {
+      name: '@storybook/addon-svelte-csf',
+      options: {
+        legacyTemplate: true, // Enables the legacy template syntax
+      },
+    },
+  ],
+};
+export default config;
+```
diff --git a/docs/_snippets/svelte-csf-addon-tags.md b/docs/_snippets/svelte-csf-addon-tags.md
new file mode 100644
index 000000000000..8cf9b43b99c8
--- /dev/null
+++ b/docs/_snippets/svelte-csf-addon-tags.md
@@ -0,0 +1,31 @@
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Before"
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+</script>
+
+<Meta title="MyComponent" component={MyComponent} />
+
+<Template let:args>
+  <MyComponent {...args} />
+</Template>
+
+<Story name="Default" autodocs />
+```
+
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="After"
+
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+
+</script>
+
+<Story name="Default" tags={['autodocs']} />
+```
diff --git a/docs/_snippets/svelte-csf-story-custom-children.md b/docs/_snippets/svelte-csf-story-custom-children.md
new file mode 100644
index 000000000000..cc1263e909c2
--- /dev/null
+++ b/docs/_snippets/svelte-csf-story-custom-children.md
@@ -0,0 +1,39 @@
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Before"
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  import OuterComponent from './OuterComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
+</script>
+
+<Meta title="MyComponent" component={MyComponent} />
+
+<Template let:args>
+  <OuterComponent>
+    <MyComponent />
+  </OuterComponent>
+</Template>
+
+<Story name="Default" />
+```
+
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="js" tabTitle="After"
+
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import OuterComponent from './OuterComponent.svelte';
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+
+</script>
+
+<Story name="Default">
+  <OuterComponent>
+    <MyComponent />
+  </OuterComponent>
+</Story>
+```
diff --git a/docs/_snippets/svelte-csf-story-migration.md b/docs/_snippets/svelte-csf-story-migration.md
new file mode 100644
index 000000000000..e12e0a748671
--- /dev/null
+++ b/docs/_snippets/svelte-csf-story-migration.md
@@ -0,0 +1,27 @@
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Before"
+<script>
+  import { Meta, Story } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+</script>
+
+
+<Meta title="MyComponent" component={MyComponent} />
+
+<Story name="Default" />
+```
+
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="After"
+<script context>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    title: 'MyComponent',
+    component: MyComponent,
+  });
+</script>
+
+<Story name="Default" />
+```
diff --git a/docs/_snippets/svelte-vite-add-framework.md b/docs/_snippets/svelte-vite-add-framework.md
index 13b0ad47f572..200d3fefe6cc 100644
--- a/docs/_snippets/svelte-vite-add-framework.md
+++ b/docs/_snippets/svelte-vite-add-framework.md
@@ -15,4 +15,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/svelte-vite-framework-options.md b/docs/_snippets/svelte-vite-framework-options.md
new file mode 100644
index 000000000000..d023f1226d8c
--- /dev/null
+++ b/docs/_snippets/svelte-vite-framework-options.md
@@ -0,0 +1,27 @@
+```js filename=".storybook/main.js" renderer="svelte" language="js"
+export default {
+  // ...
+  framework: {
+    name: '@storybook/svelte-vite',
+    options: {
+      // ...
+    },
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="svelte" language="ts"
+import { StorybookConfig } from '@storybook/svelte-vite';
+
+const config: StorybookConfig = {
+  // ...
+  framework: {
+    name: '@storybook/svelte-vite',
+    options: {
+      // ...
+    },
+  },
+};
+
+export default config;
+```
diff --git a/docs/_snippets/svelte-vite-install.md b/docs/_snippets/svelte-vite-install.md
index 3285ba245fd1..aae2ef5541bb 100644
--- a/docs/_snippets/svelte-vite-install.md
+++ b/docs/_snippets/svelte-vite-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/svelte-vite
 ```shell renderer="svelte" language="js" packageManager="yarn"
 yarn add --dev @storybook/svelte-vite
 ```
-
diff --git a/docs/_snippets/svelte-webpack-framework-options.md b/docs/_snippets/svelte-webpack-framework-options.md
new file mode 100644
index 000000000000..22852dd3ab2f
--- /dev/null
+++ b/docs/_snippets/svelte-webpack-framework-options.md
@@ -0,0 +1,27 @@
+```js filename=".storybook/main.js" renderer="svelte" language="js"
+export default {
+  // ...
+  framework: {
+    name: '@storybook/svelte-webpack5',
+    options: {
+      // ...
+    },
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="svelte" language="ts"
+import { StorybookConfig } from '@storybook/svelte-webpack5';
+
+const config: StorybookConfig = {
+  // ...
+  framework: {
+    name: '@storybook/svelte-webpack5',
+    options: {
+      // ...
+    },
+  },
+};
+
+export default config;
+```
diff --git a/docs/_snippets/svelte-webpack5-add-framework.md b/docs/_snippets/svelte-webpack5-add-framework.md
index e93100f0043e..2ababfd97736 100644
--- a/docs/_snippets/svelte-webpack5-add-framework.md
+++ b/docs/_snippets/svelte-webpack5-add-framework.md
@@ -15,4 +15,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/svelte-webpack5-install.md b/docs/_snippets/svelte-webpack5-install.md
index a8d7089adfa1..85d5fd91e779 100644
--- a/docs/_snippets/svelte-webpack5-install.md
+++ b/docs/_snippets/svelte-webpack5-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/svelte-webpack5
 ```shell renderer="svelte" language="js" packageManager="yarn"
 yarn add --dev @storybook/svelte-webpack5
 ```
-
diff --git a/docs/_snippets/sveltekit-add-framework.md b/docs/_snippets/sveltekit-add-framework.md
index b712a957b5f5..986845f37c15 100644
--- a/docs/_snippets/sveltekit-add-framework.md
+++ b/docs/_snippets/sveltekit-add-framework.md
@@ -7,7 +7,7 @@ export default {
 ```
 
 ```ts filename=".storybook/main.ts" renderer="svelte" language="ts"
-import { StorybookConfig } from '@storybook/nextjs';
+import { StorybookConfig } from '@storybook/sveltekit';
 
 const config: StorybookConfig = {
   // ...
@@ -17,4 +17,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/sveltekit-framework-options.md b/docs/_snippets/sveltekit-framework-options.md
new file mode 100644
index 000000000000..55de473d707b
--- /dev/null
+++ b/docs/_snippets/sveltekit-framework-options.md
@@ -0,0 +1,27 @@
+```js filename=".storybook/main.js" renderer="svelte" language="js"
+export default {
+  // ...
+  framework: {
+    name: '@storybook/sveltekit',
+    options: {
+      // ...
+    },
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="svelte" language="ts"
+import { StorybookConfig } from '@storybook/sveltekit';
+
+const config: StorybookConfig = {
+  // ...
+  framework: {
+    name: '@storybook/sveltekit',
+    options: {
+      // ...
+    },
+  },
+};
+
+export default config;
+```
diff --git a/docs/_snippets/sveltekit-install.md b/docs/_snippets/sveltekit-install.md
index e7010dd695a8..0ffa2c676836 100644
--- a/docs/_snippets/sveltekit-install.md
+++ b/docs/_snippets/sveltekit-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/sveltekit
 ```shell renderer="svelte" language="js" packageManager="yarn"
 yarn add --dev @storybook/sveltekit
 ```
-
diff --git a/docs/_snippets/table-story-fully-customize-controls.md b/docs/_snippets/table-story-fully-customize-controls.md
deleted file mode 100644
index 091214d5621a..000000000000
--- a/docs/_snippets/table-story-fully-customize-controls.md
+++ /dev/null
@@ -1,30 +0,0 @@
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/*Table.stories.svelte */}
-
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-
-  import Table from './Table.svelte';
-</script>
-
-<Meta title="Custom Table" component={Table} argTypes={{ size: { options: ['small', 'medium',
-'large'], }, }} />
-
-<template let:args>
-  <table {...args}>
-    <tbody>
-      {#each args.data as row}
-      <tr>
-        {#each row as col}
-        <td>{col}</td>
-        {/each}
-      </tr>
-      {/each}
-    </tbody>
-  </table>
-</template>
-
-{/* 👇 The data arg is for the story component and the remaining args get passed to the Table component */}
-<Story name="Numeric" args={{ data: [ [1, 2, 3], [4, 5, 6], ], size: 'large', }} />
-```
-
diff --git a/docs/_snippets/tags-autodocs-in-meta.md b/docs/_snippets/tags-autodocs-in-meta.md
index 062907b3fe1f..38c05474cf94 100644
--- a/docs/_snippets/tags-autodocs-in-meta.md
+++ b/docs/_snippets/tags-autodocs-in-meta.md
@@ -11,6 +11,30 @@ const meta: Meta<Button> = {
 export default meta;
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    //👇 Enables auto-generated documentation for this component and includes all stories in this file
+    tags: ['autodocs'],
+  });
+</script>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+};
+```
+
 ```js filename="Button.stories.js" renderer="common" language="js"
 import { Button } from './Button';
 
@@ -21,6 +45,33 @@ export default {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    //👇 Enables auto-generated documentation for this component and includes all stories in this file
+    tags: ['autodocs'],
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+} satisfies Meta<typeof Button>;
+export default meta;
+```
+
 ```ts filename="Button.stories.ts" renderer="common" language="ts-4-9"
 // Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
 import type { Meta } from '@storybook/your-framework';
@@ -35,6 +86,33 @@ const meta = {
 export default meta;
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    //👇 Enables auto-generated documentation for this component and includes all stories in this file
+    tags: ['autodocs'],
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+};
+export default meta;
+```
+
 ```ts filename="Button.stories.ts" renderer="common" language="ts"
 // Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
 import type { Meta } from '@storybook/your-framework';
@@ -69,4 +147,3 @@ const meta: Meta = {
 };
 export default meta;
 ```
-
diff --git a/docs/_snippets/tags-autodocs-in-preview.md b/docs/_snippets/tags-autodocs-in-preview.md
index 9f3f8c030498..7d96acbe053d 100644
--- a/docs/_snippets/tags-autodocs-in-preview.md
+++ b/docs/_snippets/tags-autodocs-in-preview.md
@@ -18,4 +18,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/tags-autodocs-remove-component.md b/docs/_snippets/tags-autodocs-remove-component.md
index c1000d58ae8b..60014c991265 100644
--- a/docs/_snippets/tags-autodocs-remove-component.md
+++ b/docs/_snippets/tags-autodocs-remove-component.md
@@ -1,5 +1,5 @@
 ```ts filename="Page.stories.ts" renderer="angular" language="ts"
-import type { Meta, StoryObj } from '@storybook/angular';
+import type { Meta } from '@storybook/angular';
 
 import { Page } from './Page';
 
@@ -11,6 +11,30 @@ const meta: Meta<Page> = {
 export default meta;
 ```
 
+```svelte filename="Page.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Page from './Page.svelte';
+
+  const { Story } = defineMeta({
+    component: Page,
+    // 👇 Disable auto-generated documentation for this component
+    tags: ['!autodocs'],
+  });
+</script>
+```
+
+```js filename="Page.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Page from './Page.svelte';
+
+export default {
+  component: Page,
+  // 👇 Disable auto-generated documentation for this component
+  tags: ['!autodocs'],
+};
+```
+
 ```js filename="Page.stories.js" renderer="common" language="js"
 import { Page } from './Page';
 
@@ -21,9 +45,36 @@ export default {
 };
 ```
 
+```svelte filename="Page.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Page from './Page.svelte';
+
+  const { Story } = defineMeta({
+    component: Page,
+    // 👇 Disable auto-generated documentation for this component
+    tags: ['!autodocs'],
+  });
+</script>
+```
+
+```ts filename="Page.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Page from './Page.svelte';
+
+const meta = {
+  component: Page,
+  // 👇 Disable auto-generated documentation for this component
+  tags: ['!autodocs'],
+} satisfies Meta<typeof Page>;
+export default meta;
+```
+
 ```ts filename="Page.stories.ts" renderer="common" language="ts-4-9"
 // Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
-import type { Meta, StoryObj } from '@storybook/your-framework';
+import type { Meta } from '@storybook/your-framework';
 
 import { Page } from './Page';
 
@@ -35,9 +86,36 @@ const meta = {
 export default meta;
 ```
 
+```svelte filename="Page.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Page from './Page.svelte';
+
+  const { Story } = defineMeta({
+    component: Page,
+    // 👇 Disable auto-generated documentation for this component
+    tags: ['!autodocs'],
+  });
+</script>
+```
+
+```ts filename="Page.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Page from './Page.svelte';
+
+const meta: Meta<typeof Page> = {
+  component: Page,
+  // 👇 Disable auto-generated documentation for this component
+  tags: ['!autodocs'],
+};
+export default meta;
+```
+
 ```ts filename="Page.stories.ts" renderer="common" language="ts"
 // Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
-import type { Meta, StoryObj } from '@storybook/your-framework';
+import type { Meta } from '@storybook/your-framework';
 
 import { Page } from './Page';
 
@@ -59,7 +137,7 @@ export default {
 ```
 
 ```ts filename="Page.stories.ts" renderer="web-components" language="ts"
-import type { Meta, StoryObj } from '@storybook/web-components';
+import type { Meta } from '@storybook/web-components';
 
 const meta: Meta = {
   title: 'Page',
@@ -69,4 +147,3 @@ const meta: Meta = {
 };
 export default meta;
 ```
-
diff --git a/docs/_snippets/tags-autodocs-remove-story.md b/docs/_snippets/tags-autodocs-remove-story.md
index 70f036a52755..d50ed675de30 100644
--- a/docs/_snippets/tags-autodocs-remove-story.md
+++ b/docs/_snippets/tags-autodocs-remove-story.md
@@ -18,6 +18,38 @@ export const UndocumentedStory: Story = {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    //👇 Enables auto-generated documentation for this component and includes all stories in this file
+    tags: ['autodocs'],
+  });
+</script>
+
+<!--👇 Removes this story from auto-generated documentation -->
+<Story name="UndocumentedStory" tags={['!autodocs']} />
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+};
+
+export const UndocumentedStory = {
+  // 👇 Removes this story from auto-generated documentation
+  tags: ['!autodocs'],
+};
+```
+
 ```js filename="Button.stories.js" renderer="common" language="js"
 import { Button } from './Button';
 
@@ -33,6 +65,43 @@ export const UndocumentedStory = {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    //👇 Enables auto-generated documentation for this component and includes all stories in this file
+    tags: ['autodocs'],
+  });
+</script>
+
+<!--👇 Removes this story from auto-generated documentation -->
+<Story name="UndocumentedStory" tags={['!autodocs']} />
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+} satisfies Meta<typeof Button>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const UndocumentedStory: Story = {
+  // 👇 Removes this story from auto-generated documentation
+  tags: ['!autodocs'],
+};
+```
+
 ```ts filename="Button.stories.ts" renderer="common" language="ts-4-9"
 // Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -54,6 +123,43 @@ export const UndocumentedStory: Story = {
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    //👇 Enables auto-generated documentation for this component and includes all stories in this file
+    tags: ['autodocs'],
+  });
+</script>
+
+<!--👇 Removes this story from auto-generated documentation -->
+<Story name="UndocumentedStory" tags={['!autodocs']} />
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const UndocumentedStory: Story = {
+  // 👇 Removes this story from auto-generated documentation
+  tags: ['!autodocs'],
+};
+```
+
 ```ts filename="Button.stories.ts" renderer="common" language="ts"
 // Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
 import type { Meta, StoryObj } from '@storybook/your-framework';
@@ -107,4 +213,3 @@ export const UndocumentedStory: Story = {
   tags: ['!autodocs'],
 };
 ```
-
diff --git a/docs/_snippets/tags-combo-example.md b/docs/_snippets/tags-combo-example.md
index 2a5d3041103d..26c529261071 100644
--- a/docs/_snippets/tags-combo-example.md
+++ b/docs/_snippets/tags-combo-example.md
@@ -22,17 +22,14 @@ export const Variant2: Story = {
   args: { variant: 2 },
 };
 
-// Etc...
-
 export const Combo: Story = {
   // 👇 This story should not be tested, but will appear in the sidebar and docs page
   tags: ['!test'],
   render: () => ({
     template: `
       <div>
-        <demo-button variant={1}>
-        <demo-button variant={2}>
-        {/* Etc... */}
+        <demo-button [variant]="1"></demo-button>
+        <demo-button [variant]="2"></demo-button>
       </div>
     `,
   }),
@@ -58,16 +55,13 @@ export const Variant2 = {
   args: { variant: 2 },
 };
 
-// Etc...
-
 export const Combo = {
   // 👇 This story should not be tested, but will appear in the sidebar and docs page
   tags: ['!test'],
   render: () => (
     <>
-      <Button variant={1}>
-      <Button variant={2}>
-      {/* Etc... */}
+      <Button variant={1} />
+      <Button variant={2} />
     </>
   ),
 };
@@ -97,16 +91,13 @@ export const Variant2: Story = {
   args: { variant: 2 },
 };
 
-// Etc...
-
 export const Combo: Story = {
   // 👇 This story should not be tested, but will appear in the sidebar and docs page
   tags: ['!test'],
   render: () => (
     <>
-      <Button variant={1}>
-      <Button variant={2}>
-      {/* Etc... */}
+      <Button variant={1} />
+      <Button variant={2} />
     </>
   ),
 };
@@ -136,16 +127,13 @@ export const Variant2: Story = {
   args: { variant: 2 },
 };
 
-// Etc...
-
 export const Combo: Story = {
   // 👇 This story should not be tested, but will appear in the sidebar and docs page
   tags: ['!test'],
   render: () => (
     <>
-      <Button variant={1}>
-      <Button variant={2}>
-      {/* Etc... */}
+      <Button variant={1} />
+      <Button variant={2} />
     </>
   ),
 };
@@ -170,16 +158,13 @@ export const Variant2 = {
   args: { variant: 2 },
 };
 
-// Etc...
-
 export const Combo = {
   // 👇 This story should not be tested, but will appear in the sidebar and docs page
   tags: ['!test'],
   render: () => (
     <>
-      <Button variant={1}>
-      <Button variant={2}>
-      {/* Etc... */}
+      <Button variant={1} />
+      <Button variant={2} />
     </>
   ),
 };
@@ -209,16 +194,13 @@ export const Variant2: Story = {
   args: { variant: 2 },
 };
 
-// Etc...
-
 export const Combo: Story = {
   // 👇 This story should not be tested, but will appear in the sidebar and docs page
   tags: ['!test'],
   render: () => (
     <>
-      <Button variant={1}>
-      <Button variant={2}>
-      {/* Etc... */}
+      <Button variant={1} />
+      <Button variant={2} />
     </>
   ),
 };
@@ -248,21 +230,111 @@ export const Variant2: Story = {
   args: { variant: 2 },
 };
 
-// Etc...
-
 export const Combo: Story = {
   // 👇 This story should not be tested, but will appear in the sidebar and docs page
   tags: ['!test'],
   render: () => (
     <>
-      <Button variant={1}>
-      <Button variant={2}>
-      {/* Etc... */}
+      <Button variant={1} />
+      <Button variant={2} />
     </>
   ),
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { Button } from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<!-- 👇 This story will not appear in Storybook's sidebar or docs page -->
+<Story
+  name="Variant1"
+  tags={['!dev', '!autodocs']}
+  args={{ variant: 1 }}
+/>
+
+<!-- 👇 This story will not appear in Storybook's sidebar or docs page -->
+<Story
+  name="Variant2"
+  tags={['!dev', '!autodocs']}
+  args={{ variant: 2 }}
+/>
+
+<!-- 👇 This story should not be tested, but will appear in the sidebar and docs page -->
+<Story name="Combo" tags={['!test']}>
+  <Button variant={1}>
+  <Button variant={2}>
+</Story>
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { Button } from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<!-- 👇 This story will not appear in Storybook's sidebar or docs page -->
+<Story
+  name="Variant1"
+  tags={['!dev', '!autodocs']}
+  args={{ variant: 1 }}
+/>
+
+<!-- 👇 This story will not appear in Storybook's sidebar or docs page -->
+<Story
+  name="Variant2"
+  tags={['!dev', '!autodocs']}
+  args={{ variant: 2 }}
+/>
+
+<!-- 👇 This story should not be tested, but will appear in the sidebar and docs page -->
+<Story name="Combo" tags={['!test']}>
+  <Button variant={1} />
+  <Button variant={2} />
+</Story>
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { Button } from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+  });
+</script>
+
+<!-- 👇 This story will not appear in Storybook's sidebar or docs page -->
+<Story
+  name="Variant1"
+  tags={['!dev', '!autodocs']}
+  args={{ variant: 1 }}
+/>
+
+<!-- 👇 This story will not appear in Storybook's sidebar or docs page -->
+<Story
+  name="Variant2"
+  tags={['!dev', '!autodocs']}
+  args={{ variant: 2 }}
+/>
+
+<!-- 👇 This story should not be tested, but will appear in the sidebar and docs page -->
+<Story name="Combo" tags={['!test']}>
+  <Button variant={1} />
+  <Button variant={2} />
+</Story>
+```
+
 ```js filename="Button.stories.js" renderer="vue" language="js"
 import { Button } from './Button';
 
@@ -282,8 +354,6 @@ export const Variant2 = {
   args: { variant: 2 },
 };
 
-// Etc...
-
 export const Combo = {
   // 👇 This story should not be tested, but will appear in the sidebar and docs page
   tags: ['!test'],
@@ -291,9 +361,8 @@ export const Combo = {
     components: { Button },
     template: `
       <div>
-        <Button variant={1}>
-        <Button variant={2}>
-        {/* Etc... */}
+        <Button :variant="1" />
+        <Button :variant="2" />
       </div>
     `,
   }),
@@ -324,8 +393,6 @@ export const Variant2: Story = {
   args: { variant: 2 },
 };
 
-// Etc...
-
 export const Combo: Story = {
   // 👇 This story should not be tested, but will appear in the sidebar and docs page
   tags: ['!test'],
@@ -333,9 +400,8 @@ export const Combo: Story = {
     components: { Button },
     template: `
       <div>
-        <Button variant={1}>
-        <Button variant={2}>
-        {/* Etc... */}
+        <Button :variant="1" />
+        <Button :variant="2" />
       </div>
     `,
   }),
@@ -366,8 +432,6 @@ export const Variant2: Story = {
   args: { variant: 2 },
 };
 
-// Etc...
-
 export const Combo: Story = {
   // 👇 This story should not be tested, but will appear in the sidebar and docs page
   tags: ['!test'],
@@ -375,16 +439,15 @@ export const Combo: Story = {
     components: { Button },
     template: `
       <div>
-        <Button variant={1}>
-        <Button variant={2}>
-        {/* Etc... */}
+        <Button :variant="1" />
+        <Button :variant="2" />
       </div>
     `,
   }),
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="web-components" language="js"
+```ts filename="Button.stories.js" renderer="web-components" language="js"
 import { html } from 'lit';
 
 export default {
@@ -404,16 +467,13 @@ export const Variant2 = {
   args: { variant: 2 },
 };
 
-// Etc...
-
 export const Combo = {
   // 👇 This story should not be tested, but will appear in the sidebar and docs page
   tags: ['!test'],
   render: () => html`
     <div>
-      <demo-button variant="1">
-      <demo-button variant="2">
-      {/* Etc... */}
+      <demo-button variant="1" />
+      <demo-button variant="2" />
     </div>
   `,
 };
@@ -443,18 +503,14 @@ export const Variant2: Story = {
   args: { variant: 2 },
 };
 
-// Etc...
-
 export const Combo: Story = {
   // 👇 This story should not be tested, but will appear in the sidebar and docs page
   tags: ['!test'],
   render: () => html`
     <div>
-      <demo-button variant="1">
-      <demo-button variant="2">
-      {/* Etc... */}
+      <demo-button variant="1" />
+      <demo-button variant="2" />
     </div>
   `,
 };
 ```
-
diff --git a/docs/_snippets/tags-docs-only-in-meta.md b/docs/_snippets/tags-docs-only-in-meta.md
index f602b0e1b9bc..dfadf65125c5 100644
--- a/docs/_snippets/tags-docs-only-in-meta.md
+++ b/docs/_snippets/tags-docs-only-in-meta.md
@@ -5,60 +5,162 @@ import { Button } from './Button';
 
 const meta: Meta<Button> = {
   component: Button,
-  /**
-   * 👇 All stories in this file will:
-   *    - Be included in the docs page
-   *    - Not appear in Storybook's sidebar
+  /*
+   * All stories in this file will:
+   * - Be included in the docs page
+   * - Not appear in Storybook's sidebar
    */
   tags: ['autodocs', '!dev'],
 };
 export default meta;
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    /*
+     * All stories in this file will:
+     * - Be included in the docs page
+     * - Not appear in Storybook's sidebar
+     */
+    tags: ['autodocs', '!dev'],
+  });
+</script>
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+  /*
+   * All stories in this file will:
+   * - Be included in the docs page
+   * - Not appear in Storybook's sidebar
+   */
+  tags: ['autodocs', '!dev'],
+};
+```
+
 ```js filename="Button.stories.js" renderer="common" language="js"
 import { Button } from './Button';
 
 export default {
   component: Button,
-  /**
-   * 👇 All stories in this file will:
-   *    - Be included in the docs page
-   *    - Not appear in Storybook's sidebar
+  /*
+   * All stories in this file will:
+   * - Be included in the docs page
+   * - Not appear in Storybook's sidebar
    */
   tags: ['autodocs', '!dev'],
 };
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    /*
+     * All stories in this file will:
+     * - Be included in the docs page
+     * - Not appear in Storybook's sidebar
+     */
+    tags: ['autodocs', '!dev'],
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+  /*
+   * All stories in this file will:
+   * - Be included in the docs page
+   * - Not appear in Storybook's sidebar
+   */
+  tags: ['autodocs', '!dev'],
+} satisfies Meta<typeof Button>;
+export default meta;
+```
+
 ```ts filename="Button.stories.ts" renderer="common" language="ts-4-9"
 // Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
-import type { Meta, StoryObj } from '@storybook/your-framework';
+import type { Meta } from '@storybook/your-framework';
 
 import { Button } from './Button';
 
 const meta = {
   component: Button,
-  /**
-   * 👇 All stories in this file will:
-   *    - Be included in the docs page
-   *    - Not appear in Storybook's sidebar
+  /*
+   * All stories in this file will:
+   * - Be included in the docs page
+   * - Not appear in Storybook's sidebar
    */
   tags: ['autodocs', '!dev'],
 } satisfies Meta<typeof Button>;
 export default meta;
 ```
 
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    /*
+     * All stories in this file will:
+     * - Be included in the docs page
+     * - Not appear in Storybook's sidebar
+     */
+    tags: ['autodocs', '!dev'],
+  });
+</script>
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  /*
+   * All stories in this file will:
+   * - Be included in the docs page
+   * - Not appear in Storybook's sidebar
+   */
+  tags: ['autodocs', '!dev'],
+};
+export default meta;
+```
+
 ```ts filename="Button.stories.ts" renderer="common" language="ts"
 // Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
-import type { Meta, StoryObj } from '@storybook/your-framework';
+import type { Meta } from '@storybook/your-framework';
 
 import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   component: Button,
-  /**
-   * 👇 All stories in this file will:
-   *    - Be included in the docs page
-   *    - Not appear in Storybook's sidebar
+  /*
+   * All stories in this file will:
+   * - Be included in the docs page
+   * - Not appear in Storybook's sidebar
    */
   tags: ['autodocs', '!dev'],
 };
@@ -69,10 +171,10 @@ export default meta;
 export default {
   title: 'Button',
   component: 'demo-button',
-  /**
-   * 👇 All stories in this file will:
-   *    - Be included in the docs page
-   *    - Not appear in Storybook's sidebar
+  /*
+   * All stories in this file will:
+   * - Be included in the docs page
+   * - Not appear in Storybook's sidebar
    */
   tags: ['autodocs', '!dev'],
 };
@@ -84,13 +186,12 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 const meta: Meta = {
   title: 'Button',
   component: 'demo-button',
-  /**
-   * 👇 All stories in this file will:
-   *    - Be included in the docs page
-   *    - Not appear in Storybook's sidebar
+  /*
+   * All stories in this file will:
+   * - Be included in the docs page
+   * - Not appear in Storybook's sidebar
    */
   tags: ['autodocs', '!dev'],
 };
 export default meta;
 ```
-
diff --git a/docs/_snippets/tags-in-meta-and-story.md b/docs/_snippets/tags-in-meta-and-story.md
index fb7cdcd14f97..d0f262f2d6f7 100644
--- a/docs/_snippets/tags-in-meta-and-story.md
+++ b/docs/_snippets/tags-in-meta-and-story.md
@@ -5,25 +5,79 @@ import { Button } from './Button';
 
 const meta: Meta<Button> = {
   component: Button,
-  /**
-   * 👇 All stories in this file will have these tags applied:
-   *    - autodocs
-   *    - dev (implicit default, inherited from preview)
-   *    - test (implicit default, inherited from preview)
+  /*
+   * All stories in this file will have these tags applied:
+   * - autodocs
+   * - dev (implicit default, inherited from preview)
+   * - test (implicit default, inherited from preview)
    */
   tags: ['autodocs'],
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj<Button>;
 
 export const ExperimentalFeatureStory: Story = {
-  /**
-   * 👇 This particular story will have these tags applied:
-   *    - experimental
-   *    - autodocs (inherited from meta)
-   *    - dev (inherited from meta)
-   *    - test (inherited from meta)
+  /*
+   * This particular story will have these tags applied:
+   * - experimental
+   * - autodocs (inherited from meta)
+   * - dev (inherited from meta)
+   * - test (inherited from meta)
+   */
+  tags: ['experimental'],
+};
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    /*
+     * All stories in this file will have these tags applied:
+     * - autodocs
+     * - dev (implicit default, inherited from preview)
+     * - test (implicit default, inherited from preview)
+     */
+    tags: ['autodocs'],
+  });
+</script>
+
+<!--
+  This particular story will have these tags applied:
+  - experimental
+  - autodocs (inherited from meta)
+  - dev (inherited from meta)
+  - test (inherited from meta)
+-->
+<Story name="ExperimentalFeatureStory" tags={['experimental']} />
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+  /*
+   * All stories in this file will have these tags applied:
+   * - autodocs
+   * - dev (implicit default, inherited from preview)
+   * - test (implicit default, inherited from preview)
+   */
+  tags: ['autodocs'],
+};
+
+export const ExperimentalFeatureStory = {
+  /*
+   * This particular story will have these tags applied:
+   * - experimental
+   * - autodocs (inherited from meta)
+   * - dev (inherited from meta)
+   * - test (inherited from meta)
    */
   tags: ['experimental'],
 };
@@ -34,22 +88,81 @@ import { Button } from './Button';
 
 export default {
   component: Button,
-  /**
-   * 👇 All stories in this file will have these tags applied:
-   *    - autodocs
-   *    - dev (implicit default, inherited from preview)
-   *    - test (implicit default, inherited from preview)
+  /*
+   * All stories in this file will have these tags applied:
+   * - autodocs
+   * - dev (implicit default, inherited from preview)
+   * - test (implicit default, inherited from preview)
    */
   tags: ['autodocs'],
 };
 
 export const ExperimentalFeatureStory = {
-  /**
-   * 👇 This particular story will have these tags applied:
-   *    - experimental
-   *    - autodocs (inherited from meta)
-   *    - dev (inherited from meta)
-   *    - test (inherited from meta)
+  /*
+   * This particular story will have these tags applied:
+   * - experimental
+   * - autodocs (inherited from meta)
+   * - dev (inherited from meta)
+   * - test (inherited from meta)
+   */
+  tags: ['experimental'],
+};
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    /*
+     * All stories in this file will have these tags applied:
+     * - autodocs
+     * - dev (implicit default, inherited from preview)
+     * - test (implicit default, inherited from preview)
+     */
+    tags: ['autodocs'],
+  });
+</script>
+
+<!--
+  This particular story will have these tags applied:
+  - experimental
+  - autodocs (inherited from meta)
+  - dev (inherited from meta)
+  - test (inherited from meta)
+-->
+<Story name="ExperimentalFeatureStory" tags={['experimental']} />
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+  /*
+   * All stories in this file will have these tags applied:
+   * - autodocs
+   * - dev (implicit default, inherited from preview)
+   * - test (implicit default, inherited from preview)
+   */
+  tags: ['autodocs'],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ExperimentalFeatureStory: Story = {
+  /*
+   * This particular story will have these tags applied:
+   * - experimental
+   * - autodocs (inherited from meta)
+   * - dev (inherited from meta)
+   * - test (inherited from meta)
    */
   tags: ['experimental'],
 };
@@ -63,25 +176,84 @@ import { Button } from './Button';
 
 const meta = {
   component: Button,
-  /**
-   * 👇 All stories in this file will have these tags applied:
-   *    - autodocs
-   *    - dev (implicit default, inherited from preview)
-   *    - test (implicit default, inherited from preview)
+  /*
+   * All stories in this file will have these tags applied:
+   * - autodocs
+   * - dev (implicit default, inherited from preview)
+   * - test (implicit default, inherited from preview)
    */
   tags: ['autodocs'],
 } satisfies Meta<typeof Button>;
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const ExperimentalFeatureStory: Story = {
-  /**
-   * 👇 This particular story will have these tags applied:
-   *    - experimental
-   *    - autodocs (inherited from meta)
-   *    - dev (inherited from meta)
-   *    - test (inherited from meta)
+  /*
+   * This particular story will have these tags applied:
+   * - experimental
+   * - autodocs (inherited from meta)
+   * - dev (inherited from meta)
+   * - test (inherited from meta)
+   */
+  tags: ['experimental'],
+};
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    /*
+     * All stories in this file will have these tags applied:
+     * - autodocs
+     * - dev (implicit default, inherited from preview)
+     * - test (implicit default, inherited from preview)
+     */
+    tags: ['autodocs'],
+  });
+</script>
+
+<!--
+  This particular story will have these tags applied:
+  - experimental
+  - autodocs (inherited from meta)
+  - dev (inherited from meta)
+  - test (inherited from meta)
+-->
+<Story name="ExperimentalFeatureStory" tags={['experimental']} />
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  /*
+   * All stories in this file will have these tags applied:
+   * - autodocs
+   * - dev (implicit default, inherited from preview)
+   * - test (implicit default, inherited from preview)
+   */
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const ExperimentalFeatureStory: Story = {
+  /*
+   * This particular story will have these tags applied:
+   * - experimental
+   * - autodocs (inherited from meta)
+   * - dev (inherited from meta)
+   * - test (inherited from meta)
    */
   tags: ['experimental'],
 };
@@ -95,25 +267,25 @@ import { Button } from './Button';
 
 const meta: Meta<typeof Button> = {
   component: Button,
-  /**
-   * 👇 All stories in this file will have these tags applied:
-   *    - autodocs
-   *    - dev (implicit default, inherited from preview)
-   *    - test (implicit default, inherited from preview)
+  /*
+   * All stories in this file will have these tags applied:
+   * - autodocs
+   * - dev (implicit default, inherited from preview)
+   * - test (implicit default, inherited from preview)
    */
   tags: ['autodocs'],
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof Button>;
 
 export const ExperimentalFeatureStory: Story = {
-  /**
-   * 👇 This particular story will have these tags applied:
-   *    - experimental
-   *    - autodocs (inherited from meta)
-   *    - dev (inherited from meta)
-   *    - test (inherited from meta)
+  /*
+   * This particular story will have these tags applied:
+   * - experimental
+   * - autodocs (inherited from meta)
+   * - dev (inherited from meta)
+   * - test (inherited from meta)
    */
   tags: ['experimental'],
 };
@@ -123,22 +295,22 @@ export const ExperimentalFeatureStory: Story = {
 export default {
   title: 'Button',
   component: 'demo-button',
-  /**
-   * 👇 All stories in this file will have these tags applied:
-   *    - autodocs
-   *    - dev (implicit default, inherited from preview)
-   *    - test (implicit default, inherited from preview)
+  /*
+   * All stories in this file will have these tags applied:
+   * - autodocs
+   * - dev (implicit default, inherited from preview)
+   * - test (implicit default, inherited from preview)
    */
   tags: ['autodocs'],
 };
 
 export const ExperimentalFeatureStory = {
-  /**
-   * 👇 This particular story will have these tags applied:
-   *    - experimental
-   *    - autodocs (inherited from meta)
-   *    - dev (inherited from meta)
-   *    - test (inherited from meta)
+  /*
+   * This particular story will have these tags applied:
+   * - experimental
+   * - autodocs (inherited from meta)
+   * - dev (inherited from meta)
+   * - test (inherited from meta)
    */
   tags: ['experimental'],
 };
@@ -150,27 +322,26 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 const meta: Meta = {
   title: 'Button',
   component: 'demo-button',
-  /**
-   * 👇 All stories in this file will have these tags applied:
-   *    - autodocs
-   *    - dev (implicit default, inherited from preview)
-   *    - test (implicit default, inherited from preview)
+  /*
+   * All stories in this file will have these tags applied:
+   *  - autodocs
+   * - dev (implicit default, inherited from preview)
+   * - test (implicit default, inherited from preview)
    */
   tags: ['autodocs'],
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj;
 
 export const ExperimentalFeatureStory: Story = {
-  /**
-   * 👇 This particular story will have these tags applied:
-   *    - experimental
-   *    - autodocs (inherited from meta)
-   *    - dev (inherited from meta)
-   *    - test (inherited from meta)
+  /*
+   * This particular story will have these tags applied:
+   * - experimental
+   * - autodocs (inherited from meta)
+   * - dev (inherited from meta)
+   * - test (inherited from meta)
    */
   tags: ['experimental'],
 };
 ```
-
diff --git a/docs/_snippets/tags-in-preview.md b/docs/_snippets/tags-in-preview.md
index 7d9aeff2964d..de110347bbe0 100644
--- a/docs/_snippets/tags-in-preview.md
+++ b/docs/_snippets/tags-in-preview.md
@@ -1,11 +1,11 @@
 ```js filename=".storybook/preview.js" renderer="common" language="js"
 export default {
   // ...rest of preview
-  /**
-   * 👇 All stories in your project will have these tags applied:
-   *    - autodocs
-   *    - dev (implicit default)
-   *    - test (implicit default)
+  /*
+   * All stories in your project will have these tags applied:
+   * - autodocs
+   * - dev (implicit default)
+   * - test (implicit default)
    */
   tags: ['autodocs'],
 };
@@ -17,15 +17,14 @@ import type { Preview } from '@storybook/your-renderer';
 
 const preview: Preview = {
   // ...rest of preview
-  /**
-   * 👇 All stories in your project will have these tags applied:
-   *    - autodocs
-   *    - dev (implicit default)
-   *    - test (implicit default)
+  /*
+   * All stories in your project will have these tags applied:
+   * - autodocs
+   * - dev (implicit default)
+   * - test (implicit default)
    */
   tags: ['autodocs'],
 };
 
 export default preview;
 ```
-
diff --git a/docs/_snippets/tags-remove-in-story.md b/docs/_snippets/tags-remove-in-story.md
index 8e94be4250c3..b48beba734f8 100644
--- a/docs/_snippets/tags-remove-in-story.md
+++ b/docs/_snippets/tags-remove-in-story.md
@@ -1,22 +1,51 @@
 ```ts filename="Button.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { Button } from './Button';
+import { Button } from './Button.component';
 
 const meta: Meta<Button> = {
   component: Button,
   // 👇 Applies to all stories in this file
   tags: ['stable'],
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj<Button>;
 
 export const ExperimentalFeatureStory: Story = {
-  /**
-   * 👇 For this particular story, remove the inherited
-   *    `stable` tag and apply the `experimental` tag
-   */
+  //👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag
+  tags: ['!stable', 'experimental'],
+};
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    // 👇 Applies to all stories in this file
+    tags: ['stable'],
+  });
+</script>
+
+<!-- 👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag -->
+<Story name="ExperimentalFeatureStory" tags={['!stable', 'experimental']} />
+```
+
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import Button from './Button.svelte';
+
+export default {
+  component: Button,
+  // 👇 Applies to all stories in this file
+  tags: ['stable'],
+};
+
+export const ExperimentalFeatureStory = {
+  //👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag
   tags: ['!stable', 'experimental'],
 };
 ```
@@ -31,10 +60,44 @@ export default {
 };
 
 export const ExperimentalFeatureStory = {
-  /**
-   * 👇 For this particular story, remove the inherited
-   *    `stable` tag and apply the `experimental` tag
-   */
+  //👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag
+  tags: ['!stable', 'experimental'],
+};
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    // 👇 Applies to all stories in this file
+    tags: ['stable'],
+  });
+</script>
+
+<!-- 👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag -->
+<Story name="ExperimentalFeatureStory" tags={['!stable', 'experimental']} />
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta = {
+  component: Button,
+  // 👇 Applies to all stories in this file
+  tags: ['stable'],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ExperimentalFeatureStory: Story = {
+  //👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag
   tags: ['!stable', 'experimental'],
 };
 ```
@@ -55,10 +118,44 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const ExperimentalFeatureStory: Story = {
-  /**
-   * 👇 For this particular story, remove the inherited
-   *    `stable` tag and apply the `experimental` tag
-   */
+  //👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag
+  tags: ['!stable', 'experimental'],
+};
+```
+
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    // 👇 Applies to all stories in this file
+    tags: ['stable'],
+  });
+</script>
+
+<!-- 👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag -->
+<Story name="ExperimentalFeatureStory" tags={['!stable', 'experimental']} />
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  // 👇 Applies to all stories in this file
+  tags: ['stable'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const ExperimentalFeatureStory: Story = {
+  //👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag
   tags: ['!stable', 'experimental'],
 };
 ```
@@ -74,15 +171,12 @@ const meta: Meta<typeof Button> = {
   // 👇 Applies to all stories in this file
   tags: ['stable'],
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof Button>;
 
 export const ExperimentalFeatureStory: Story = {
-  /**
-   * 👇 For this particular story, remove the inherited
-   *    `stable` tag and apply the `experimental` tag
-   */
+  //👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag
   tags: ['!stable', 'experimental'],
 };
 ```
@@ -96,10 +190,7 @@ export default {
 };
 
 export const ExperimentalFeatureStory = {
-  /**
-   * 👇 For this particular story, remove the inherited
-   *    `stable` tag and apply the `experimental` tag
-   */
+  //👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag
   tags: ['!stable', 'experimental'],
 };
 ```
@@ -113,16 +204,12 @@ const meta: Meta = {
   // 👇 Applies to all stories in this file
   tags: ['stable'],
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj;
 
 export const ExperimentalFeatureStory: Story = {
-  /**
-   * 👇 For this particular story, remove the inherited
-   *    `stable` tag and apply the `experimental` tag
-   */
+  //👇 For this particular story, remove the inherited `stable` tag and apply the `experimental` tag
   tags: ['!stable', 'experimental'],
 };
 ```
-
diff --git a/docs/_snippets/test-runner-a11y-config.md b/docs/_snippets/test-runner-a11y-config.md
index de01dce91393..14824205701b 100644
--- a/docs/_snippets/test-runner-a11y-config.md
+++ b/docs/_snippets/test-runner-a11y-config.md
@@ -44,4 +44,3 @@ const config: TestRunnerConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/test-runner-a11y-configure.md b/docs/_snippets/test-runner-a11y-configure.md
index 1218954e8f91..cae622a42136 100644
--- a/docs/_snippets/test-runner-a11y-configure.md
+++ b/docs/_snippets/test-runner-a11y-configure.md
@@ -20,7 +20,8 @@ module.exports = {
       rules: storyContext.parameters?.a11y?.config?.rules,
     });
 
-    await checkA11y(page, '#storybook-root', {
+    const element = storyContext.parameters?.a11y?.element ?? '#storybook-root';
+    await checkA11y(page, element, {
       detailedReport: true,
       detailedReportOptions: {
         html: true,
@@ -53,7 +54,8 @@ const config: TestRunnerConfig = {
       rules: storyContext.parameters?.a11y?.config?.rules,
     });
 
-    await checkA11y(page, '#storybook-root', {
+    const element = storyContext.parameters?.a11y?.element ?? '#storybook-root';
+    await checkA11y(page, element, {
       detailedReport: true,
       detailedReportOptions: {
         html: true,
@@ -64,4 +66,3 @@ const config: TestRunnerConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/test-runner-a11y-disable.md b/docs/_snippets/test-runner-a11y-disable.md
index 4acc306f653c..e1b176bc4a0f 100644
--- a/docs/_snippets/test-runner-a11y-disable.md
+++ b/docs/_snippets/test-runner-a11y-disable.md
@@ -61,4 +61,3 @@ const config: TestRunnerConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/test-runner-auth.md b/docs/_snippets/test-runner-auth.md
index 7712fc4b47bf..3733b0a8ca52 100644
--- a/docs/_snippets/test-runner-auth.md
+++ b/docs/_snippets/test-runner-auth.md
@@ -23,4 +23,3 @@ const config: TestRunnerConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/test-runner-axe-playwright.md b/docs/_snippets/test-runner-axe-playwright.md
index b9eb9e8f7162..2f09c11027a1 100644
--- a/docs/_snippets/test-runner-axe-playwright.md
+++ b/docs/_snippets/test-runner-axe-playwright.md
@@ -9,4 +9,3 @@ pnpm add --save-dev axe-playwright
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn add --dev axe-playwright
 ```
-
diff --git a/docs/_snippets/test-runner-config-serializer.md b/docs/_snippets/test-runner-config-serializer.md
index 460b1da8c524..ea1110eecef0 100644
--- a/docs/_snippets/test-runner-config-serializer.md
+++ b/docs/_snippets/test-runner-config-serializer.md
@@ -14,4 +14,3 @@ const config = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/test-runner-config-snapshot-resolver.md b/docs/_snippets/test-runner-config-snapshot-resolver.md
index e4bf8639d2d8..634d9303c607 100644
--- a/docs/_snippets/test-runner-config-snapshot-resolver.md
+++ b/docs/_snippets/test-runner-config-snapshot-resolver.md
@@ -11,4 +11,3 @@ const config = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/test-runner-coverage.md b/docs/_snippets/test-runner-coverage.md
index 06200c3930fe..42c44817f6f9 100644
--- a/docs/_snippets/test-runner-coverage.md
+++ b/docs/_snippets/test-runner-coverage.md
@@ -9,4 +9,3 @@ pnpm run test-storybook --coverage
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn test-storybook --coverage
 ```
-
diff --git a/docs/_snippets/test-runner-custom-page-viewport.md b/docs/_snippets/test-runner-custom-page-viewport.md
index d15eaa4d0da3..3654eca05568 100644
--- a/docs/_snippets/test-runner-custom-page-viewport.md
+++ b/docs/_snippets/test-runner-custom-page-viewport.md
@@ -29,7 +29,7 @@ module.exports = {
 };
 ```
 
-```ts filename=".storybook/test-runner.js" renderer="common" language="ts"
+```ts filename=".storybook/test-runner.ts" renderer="common" language="ts"
 import type { TestRunnerConfig } from '@storybook/test-runner';
 import { getStoryContext } from '@storybook/test-runner';
 
@@ -63,4 +63,3 @@ const config: TestRunnerConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/test-runner-custom-snapshot-resolver.md b/docs/_snippets/test-runner-custom-snapshot-resolver.md
index 0fd336b41b18..dba1c8c745fd 100644
--- a/docs/_snippets/test-runner-custom-snapshot-resolver.md
+++ b/docs/_snippets/test-runner-custom-snapshot-resolver.md
@@ -15,4 +15,3 @@ export default {
   testPathForConsistencyCheck: 'example.storyshot',
 };
 ```
-
diff --git a/docs/_snippets/test-runner-custom-snapshot-serializer.md b/docs/_snippets/test-runner-custom-snapshot-serializer.md
index dc544953701f..ced9e33f3731 100644
--- a/docs/_snippets/test-runner-custom-snapshot-serializer.md
+++ b/docs/_snippets/test-runner-custom-snapshot-serializer.md
@@ -19,4 +19,3 @@ module.exports = {
   },
 };
 ```
-
diff --git a/docs/_snippets/test-runner-dom-snapshot-testing.md b/docs/_snippets/test-runner-dom-snapshot-testing.md
index 6fb40633207b..f17021eeedb3 100644
--- a/docs/_snippets/test-runner-dom-snapshot-testing.md
+++ b/docs/_snippets/test-runner-dom-snapshot-testing.md
@@ -23,4 +23,3 @@ const config: TestRunnerConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/test-runner-eject-config.md b/docs/_snippets/test-runner-eject-config.md
index cd5e7cf708a6..133a87c294df 100644
--- a/docs/_snippets/test-runner-eject-config.md
+++ b/docs/_snippets/test-runner-eject-config.md
@@ -9,4 +9,3 @@ pnpm run test-storybook --eject
 ```sh renderer="common" language="js" packageManager="yarn"
 yarn test-storybook --eject
 ```
-
diff --git a/docs/_snippets/test-runner-execute-with-flags.md b/docs/_snippets/test-runner-execute-with-flags.md
index 922856044f9c..a4f710f89612 100644
--- a/docs/_snippets/test-runner-execute-with-flags.md
+++ b/docs/_snippets/test-runner-execute-with-flags.md
@@ -9,4 +9,3 @@ pnpm run test-storybook --watch
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn test-storybook --watch
 ```
-
diff --git a/docs/_snippets/test-runner-execute.md b/docs/_snippets/test-runner-execute.md
index a99bf77236b6..af9470fd2999 100644
--- a/docs/_snippets/test-runner-execute.md
+++ b/docs/_snippets/test-runner-execute.md
@@ -9,4 +9,3 @@ pnpm run test-storybook
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn test-storybook
 ```
-
diff --git a/docs/_snippets/test-runner-helper-function.md b/docs/_snippets/test-runner-helper-function.md
index c88743d7b1f4..8d600e464560 100644
--- a/docs/_snippets/test-runner-helper-function.md
+++ b/docs/_snippets/test-runner-helper-function.md
@@ -62,4 +62,3 @@ const config: TestRunnerConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/test-runner-hooks-example.md b/docs/_snippets/test-runner-hooks-example.md
index 77caddb91dd6..a055ab35f9b5 100644
--- a/docs/_snippets/test-runner-hooks-example.md
+++ b/docs/_snippets/test-runner-hooks-example.md
@@ -47,4 +47,3 @@ const config: TestRunnerConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/test-runner-image-snapshot-testing.md b/docs/_snippets/test-runner-image-snapshot-testing.md
index 1f19377922a4..03d1a0c1faa8 100644
--- a/docs/_snippets/test-runner-image-snapshot-testing.md
+++ b/docs/_snippets/test-runner-image-snapshot-testing.md
@@ -49,4 +49,3 @@ const config: TestRunnerConfig = {
 };
 export default config;
 ```
-
diff --git a/docs/_snippets/test-runner-install.md b/docs/_snippets/test-runner-install.md
index 3fe38c3dd3f8..aa64481319fb 100644
--- a/docs/_snippets/test-runner-install.md
+++ b/docs/_snippets/test-runner-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/test-runner
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn add --dev @storybook/test-runner
 ```
-
diff --git a/docs/_snippets/test-runner-local-build-workflow.md b/docs/_snippets/test-runner-local-build-workflow.md
index b429c34cfaeb..c5e72c546b82 100644
--- a/docs/_snippets/test-runner-local-build-workflow.md
+++ b/docs/_snippets/test-runner-local-build-workflow.md
@@ -1,8 +1,8 @@
-```yml renderer="common" language="ts" tabTitle="yml"
-# .github/workflows/storybook-tests.yml
-
+```yml filename=".github/workflows/storybook-tests.yml" renderer="common" language="ts" tabTitle="yml"
 name: 'Storybook Tests'
+
 on: push
+
 jobs:
   test:
     timeout-minutes: 60
@@ -24,4 +24,3 @@ jobs:
             "npx http-server storybook-static --port 6006 --silent" \
             "npx wait-on tcp:127.0.0.1:6006 && yarn test-storybook"
 ```
-
diff --git a/docs/_snippets/test-runner-no-index-json.md b/docs/_snippets/test-runner-no-index-json.md
index c84436d8ee80..6f576c6494c8 100644
--- a/docs/_snippets/test-runner-no-index-json.md
+++ b/docs/_snippets/test-runner-no-index-json.md
@@ -9,4 +9,3 @@ pnpm run test-storybook --no-index-json
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn test-storybook --no-index-json
 ```
-
diff --git a/docs/_snippets/test-runner-snapshot-resolver-custom-directory.md b/docs/_snippets/test-runner-snapshot-resolver-custom-directory.md
index b76fb087f375..023ec13fb63d 100644
--- a/docs/_snippets/test-runner-snapshot-resolver-custom-directory.md
+++ b/docs/_snippets/test-runner-snapshot-resolver-custom-directory.md
@@ -16,4 +16,3 @@ export default {
   testPathForConsistencyCheck: 'example',
 };
 ```
-
diff --git a/docs/_snippets/test-runner-tags-config.md b/docs/_snippets/test-runner-tags-config.md
index ac72220f5952..5b8eb3a043c2 100644
--- a/docs/_snippets/test-runner-tags-config.md
+++ b/docs/_snippets/test-runner-tags-config.md
@@ -21,4 +21,3 @@ const config: TestRunnerConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/test-runner-tags-exclude.md b/docs/_snippets/test-runner-tags-exclude.md
index f029d8bd0bd3..e2dbcbf675b3 100644
--- a/docs/_snippets/test-runner-tags-exclude.md
+++ b/docs/_snippets/test-runner-tags-exclude.md
@@ -17,4 +17,3 @@ const config: TestRunnerConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/test-runner-tags-include.md b/docs/_snippets/test-runner-tags-include.md
index 60be0f9361c7..4000cde41e51 100644
--- a/docs/_snippets/test-runner-tags-include.md
+++ b/docs/_snippets/test-runner-tags-include.md
@@ -17,4 +17,3 @@ const config: TestRunnerConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/test-runner-tags-skip.md b/docs/_snippets/test-runner-tags-skip.md
index f8dede30e021..b57d78fb3d56 100644
--- a/docs/_snippets/test-runner-tags-skip.md
+++ b/docs/_snippets/test-runner-tags-skip.md
@@ -17,4 +17,3 @@ const config: TestRunnerConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/test-runner-waitpageready.md b/docs/_snippets/test-runner-waitpageready.md
index 0601ff1aed77..b608c4180388 100644
--- a/docs/_snippets/test-runner-waitpageready.md
+++ b/docs/_snippets/test-runner-waitpageready.md
@@ -51,4 +51,3 @@ const config: TestRunnerConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/test-runner-with-deploy-event-workflow.md b/docs/_snippets/test-runner-with-deploy-event-workflow.md
index 61ece061f2a6..201aa115692b 100644
--- a/docs/_snippets/test-runner-with-deploy-event-workflow.md
+++ b/docs/_snippets/test-runner-with-deploy-event-workflow.md
@@ -1,8 +1,8 @@
-```yml renderer="common" language="ts" tabTitle="yml"
-# .github/workflows/storybook-tests.yml
-
+```yml filename=".github/workflows/storybook-tests.yml" renderer="common" language="ts" tabTitle="yml"
 name: Storybook Tests
+
 on: deployment_status
+
 jobs:
   test:
     timeout-minutes: 60
@@ -22,4 +22,3 @@ jobs:
         env:
           TARGET_URL: '${{ github.event.deployment_status.target_url }}'
 ```
-
diff --git a/docs/_snippets/test-runner-with-index-json.md b/docs/_snippets/test-runner-with-index-json.md
index 578e05423cf9..c364b50f6c25 100644
--- a/docs/_snippets/test-runner-with-index-json.md
+++ b/docs/_snippets/test-runner-with-index-json.md
@@ -9,4 +9,3 @@ pnpm run test-storybook --index-json
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn test-storybook --index-json
 ```
-
diff --git a/docs/_snippets/typed-csf-file.md b/docs/_snippets/typed-csf-file.md
index 41bac1d67f61..02e76c156f89 100644
--- a/docs/_snippets/typed-csf-file.md
+++ b/docs/_snippets/typed-csf-file.md
@@ -81,4 +81,3 @@ export const Primary: StoryObj = {
   },
 };
 ```
-
diff --git a/docs/_snippets/upgrade-command-specific-version.md b/docs/_snippets/upgrade-command-specific-version.md
index edd9ce329bc4..606cd1d64610 100644
--- a/docs/_snippets/upgrade-command-specific-version.md
+++ b/docs/_snippets/upgrade-command-specific-version.md
@@ -1,4 +1,4 @@
-```shell renderer="common" language="js" packageManager="npx"
+```shell renderer="common" language="js" packageManager="npm"
 npx storybook@7.6.6 upgrade
 ```
 
@@ -9,4 +9,3 @@ pnpm dlx storybook@7.6.6 upgrade
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn dlx storybook@7.6.6 upgrade
 ```
-
diff --git a/docs/_snippets/vitest-plugin-install-coverage-support-packages.md b/docs/_snippets/vitest-plugin-install-coverage-support-packages.md
new file mode 100644
index 000000000000..913bcf924e16
--- /dev/null
+++ b/docs/_snippets/vitest-plugin-install-coverage-support-packages.md
@@ -0,0 +1,23 @@
+```shell renderer="common" language="js" packageManager="npm"
+# For v8
+npm install --save-dev @vitest/coverage-v8
+
+# For istanbul
+npm install --save-dev @vitest/coverage-istanbul
+```
+
+```shell renderer="common" language="js" packageManager="pnpm"
+# For v8
+pnpm add --save-dev @vitest/coverage-v8
+
+# For istanbul
+pnpm add --save-dev @vitest/coverage-istanbul
+```
+
+```shell renderer="common" language="js" packageManager="yarn"
+# For v8
+yarn add --dev @vitest/coverage-v8
+
+# For istanbul
+yarn add --dev @vitest/coverage-istanbul
+```
diff --git a/docs/_snippets/vitest-plugin-run-tests.md b/docs/_snippets/vitest-plugin-run-tests.md
index 3b91e2d284ea..af9470fd2999 100644
--- a/docs/_snippets/vitest-plugin-run-tests.md
+++ b/docs/_snippets/vitest-plugin-run-tests.md
@@ -1,11 +1,11 @@
 ```shell renderer="common" language="js" packageManager="npm"
-npm run test
+npm run test-storybook
 ```
 
 ```shell renderer="common" language="js" packageManager="pnpm"
-pnpm run test
+pnpm run test-storybook
 ```
 
 ```shell renderer="common" language="js" packageManager="yarn"
-yarn test
+yarn test-storybook
 ```
diff --git a/docs/_snippets/vitest-plugin-run-with-coverage.md b/docs/_snippets/vitest-plugin-run-with-coverage.md
new file mode 100644
index 000000000000..42c44817f6f9
--- /dev/null
+++ b/docs/_snippets/vitest-plugin-run-with-coverage.md
@@ -0,0 +1,11 @@
+```shell renderer="common" language="js" packageManager="npm"
+npm run test-storybook -- --coverage
+```
+
+```shell renderer="common" language="js" packageManager="pnpm"
+pnpm run test-storybook --coverage
+```
+
+```shell renderer="common" language="js" packageManager="yarn"
+yarn test-storybook --coverage
+```
diff --git a/docs/_snippets/vitest-plugin-vitest-config-alias.md b/docs/_snippets/vitest-plugin-vitest-config-alias.md
index 5777c37f2616..ac1f59857c72 100644
--- a/docs/_snippets/vitest-plugin-vitest-config-alias.md
+++ b/docs/_snippets/vitest-plugin-vitest-config-alias.md
@@ -17,6 +17,8 @@ export default {
 ```
 
 ```js filename="vitest.config.ts" renderer="common" tabTitle="After"
+import { defineConfig } from 'vitest/config';
+
 export default defineConfig({
   // ...
   resolve: {
diff --git a/docs/_snippets/vitest-plugin-vitest-config.md b/docs/_snippets/vitest-plugin-vitest-config.md
index 0ddc6054f9df..b3f271a6e636 100644
--- a/docs/_snippets/vitest-plugin-vitest-config.md
+++ b/docs/_snippets/vitest-plugin-vitest-config.md
@@ -2,7 +2,7 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
 import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
 // 👇 If you're using Next.js, apply this framework plugin as well
-// import { storybookNextjsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin';
+// import { storybookNextJsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin';
 
 import viteConfig from './vite.config';
 
@@ -15,11 +15,9 @@ export default mergeConfig(
         // The --ci flag will skip prompts and not open a browser
         storybookScript: 'yarn storybook --ci',
       }),
-      // storybookNextjsPlugin(),
+      // storybookNextJsPlugin(),
     ],
     test: {
-      // Glob pattern to find story files
-      include: ['src/**/*.stories.?(m)[jt]s?(x)'],
       // Enable browser mode
       browser: {
         enabled: true,
@@ -28,10 +26,6 @@ export default mergeConfig(
         provider: 'playwright',
         headless: true,
       },
-      // Speed up tests and better match how they run in Storybook itself
-      // https://vitest.dev/config/#isolate
-      // Consider removing this if you have flaky tests
-      isolate: false,
       setupFiles: ['./.storybook/vitest.setup.ts'],
     },
   })
@@ -57,8 +51,6 @@ export default mergeConfig(
       storybookVuePlugin(),
     ],
     test: {
-      // Glob pattern to find story files
-      include: ['src/**/*.stories.?(m)[jt]s?(x)'],
       // Enable browser mode
       browser: {
         enabled: true,
@@ -67,10 +59,6 @@ export default mergeConfig(
         provider: 'playwright',
         headless: true,
       },
-      // Speed up tests and better match how they run in Storybook itself
-      // https://vitest.dev/config/#isolate
-      // Consider removing this if you have flaky tests
-      isolate: false,
       setupFiles: ['./.storybook/vitest.setup.ts'],
     },
   })
@@ -97,8 +85,6 @@ export default mergeConfig(
       // storybookSveltekitPlugin(),
     ],
     test: {
-      // Glob pattern to find story files
-      include: ['src/**/*.stories.?(m)[jt]s?(x)'],
       // Enable browser mode
       browser: {
         enabled: true,
@@ -107,10 +93,6 @@ export default mergeConfig(
         provider: 'playwright',
         headless: true,
       },
-      // Speed up tests and better match how they run in Storybook itself
-      // https://vitest.dev/config/#isolate
-      // Consider removing this if you have flaky tests
-      isolate: false,
       setupFiles: ['./.storybook/vitest.setup.ts'],
     },
   })
diff --git a/docs/_snippets/vitest-plugin-vitest-workspace.md b/docs/_snippets/vitest-plugin-vitest-workspace.md
index 909815ddc47e..46b5a3e22edd 100644
--- a/docs/_snippets/vitest-plugin-vitest-workspace.md
+++ b/docs/_snippets/vitest-plugin-vitest-workspace.md
@@ -1,14 +1,13 @@
-```ts title="vitest.workspace.ts" renderer="react"
+```ts filename="vitest.workspace.ts" renderer="react"
 import { defineWorkspace } from 'vitest/config';
 import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
 // 👇 If you're using Next.js, apply this framework plugin as well
-// import { storybookNextjsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin';
+// import { storybookNextJsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin';
 
 export default defineWorkspace([
   // This is the path to your existing Vitest config file
   './vitest.config.ts',
   {
-    name: 'storybook',
     // This is the path to your existing Vite config file
     extends: './vite.config.ts',
     plugins: [
@@ -17,11 +16,10 @@ export default defineWorkspace([
         // The --ci flag will skip prompts and not open a browser
         storybookScript: 'yarn storybook --ci',
       }),
-      // storybookNextjsPlugin(),
+      // storybookNextJsPlugin(),
     ],
     test: {
-      // Glob pattern to find story files
-      include: ['src/**/*.stories.?(m)[jt]s?(x)'],
+      name: 'storybook',
       // Enable browser mode
       browser: {
         enabled: true,
@@ -30,10 +28,6 @@ export default defineWorkspace([
         provider: 'playwright',
         headless: true,
       },
-      // Speed up tests and better match how they run in Storybook itself
-      // https://vitest.dev/config/#isolate
-      // Consider removing this if you have flaky tests
-      isolate: false,
       setupFiles: ['./.storybook/vitest.setup.ts'],
     },
   },
@@ -51,7 +45,6 @@ export default defineWorkspace([
   // This is the path to your existing Vitest config file
   './vitest.config.ts',
   {
-    name: 'storybook',
     // This is the path to your existing Vite config file
     extends: './vite.config.ts',
     plugins: [
@@ -63,8 +56,7 @@ export default defineWorkspace([
       storybookVuePlugin(),
     ],
     test: {
-      // Glob pattern to find story files
-      include: ['src/**/*.stories.?(m)[jt]s?(x)'],
+      name: 'storybook',
       // Enable browser mode
       browser: {
         enabled: true,
@@ -73,10 +65,6 @@ export default defineWorkspace([
         provider: 'playwright',
         headless: true,
       },
-      // Speed up tests and better match how they run in Storybook itself
-      // https://vitest.dev/config/#isolate
-      // Consider removing this if you have flaky tests
-      isolate: false,
       setupFiles: ['./.storybook/vitest.setup.ts'],
     },
   },
@@ -87,7 +75,7 @@ export default defineWorkspace([
 import { defineConfig, mergeConfig } from 'vitest/config';
 import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
 // 👇 If you're using Sveltekit, apply this framework plugin as well
-// import { storybookNextjsPlugin } from '@storybook/sveltekit/vite-plugin';
+// import { storybookSveltekitPlugin } from '@storybook/sveltekit/vite-plugin';
 
 import viteConfig from './vite.config';
 
@@ -95,7 +83,6 @@ export default defineWorkspace([
   // This is the path to your existing Vitest config file
   './vitest.config.ts',
   {
-    name: 'storybook',
     // This is the path to your existing Vite config file
     extends: './vite.config.ts',
     plugins: [
@@ -107,8 +94,7 @@ export default defineWorkspace([
       // storybookSveltekitPlugin(),
     ],
     test: {
-      // Glob pattern to find story files
-      include: ['src/**/*.stories.?(m)[jt]s?(x)'],
+      name: 'storybook',
       // Enable browser mode
       browser: {
         enabled: true,
@@ -117,10 +103,6 @@ export default defineWorkspace([
         provider: 'playwright',
         headless: true,
       },
-      // Speed up tests and better match how they run in Storybook itself
-      // https://vitest.dev/config/#isolate
-      // Consider removing this if you have flaky tests
-      isolate: false,
       setupFiles: ['./.storybook/vitest.setup.ts'],
     },
   },
diff --git a/docs/_snippets/vue-jest-optional-config-scripts.md b/docs/_snippets/vue-jest-optional-config-scripts.md
deleted file mode 100644
index 16e373f80638..000000000000
--- a/docs/_snippets/vue-jest-optional-config-scripts.md
+++ /dev/null
@@ -1,16 +0,0 @@
-```json renderer="vue" language="js" tabTitle="jest"
-{
-  "scripts": {
-    "test": "jest --setupFiles ./setupFile.js"
-  }
-}
-```
-
-```json renderer="vue" language="ts" tabTitle="jest"
-{
-  "scripts": {
-    "test": "jest --setupFiles ./setupFile.js"
-  }
-}
-```
-
diff --git a/docs/_snippets/vue-vite-framework-options.md b/docs/_snippets/vue-vite-framework-options.md
new file mode 100644
index 000000000000..ce87365d5614
--- /dev/null
+++ b/docs/_snippets/vue-vite-framework-options.md
@@ -0,0 +1,25 @@
+```js filename=".storybook/main.js" renderer="vue" language="js"
+export default {
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {
+      docgen: 'vue-component-meta',
+    },
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts"
+import type { StorybookConfig } from '@storybook/vue3-vite';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {
+      docgen: 'vue-component-meta',
+    },
+  },
+};
+
+export default config;
+```
diff --git a/docs/_snippets/vue-webpack5-framework-options.md b/docs/_snippets/vue-webpack5-framework-options.md
new file mode 100644
index 000000000000..7661567b00e9
--- /dev/null
+++ b/docs/_snippets/vue-webpack5-framework-options.md
@@ -0,0 +1,25 @@
+```js filename=".storybook/main.js" renderer="vue" language="js"
+export default {
+  framework: {
+    name: '@storybook/vue3-webpack5',
+    options: {
+      // ...
+    },
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="vue" language="ts"
+import type { StorybookConfig } from '@storybook/vue-webpack5';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/vue3-webpack5',
+    options: {
+      // ...
+    },
+  },
+};
+
+export default config;
+```
diff --git a/docs/_snippets/vue3-vite-add-framework.md b/docs/_snippets/vue3-vite-add-framework.md
index 2d4e13180f0a..5c617faae463 100644
--- a/docs/_snippets/vue3-vite-add-framework.md
+++ b/docs/_snippets/vue3-vite-add-framework.md
@@ -15,4 +15,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/vue3-vite-install.md b/docs/_snippets/vue3-vite-install.md
index f2ea6a46843c..45a4b77c3dcd 100644
--- a/docs/_snippets/vue3-vite-install.md
+++ b/docs/_snippets/vue3-vite-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/vue3-vite
 ```shell renderer="vue" language="js" packageManager="yarn"
 yarn add --dev @storybook/vue3-vite
 ```
-
diff --git a/docs/_snippets/vue3-webpack5-add-framework.md b/docs/_snippets/vue3-webpack5-add-framework.md
index 02c792ac8262..7c83b82bd090 100644
--- a/docs/_snippets/vue3-webpack5-add-framework.md
+++ b/docs/_snippets/vue3-webpack5-add-framework.md
@@ -15,4 +15,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/vue3-webpack5-install.md b/docs/_snippets/vue3-webpack5-install.md
index b77fa45d7b3e..55eb9006b2ca 100644
--- a/docs/_snippets/vue3-webpack5-install.md
+++ b/docs/_snippets/vue3-webpack5-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/vue3-webpack5
 ```shell renderer="vue" language="js" packageManager="yarn"
 yarn add --dev @storybook/vue3-webpack5
 ```
-
diff --git a/docs/_snippets/web-components-vite-add-framework.md b/docs/_snippets/web-components-vite-add-framework.md
index f9a5c03598a0..140ad899ff0a 100644
--- a/docs/_snippets/web-components-vite-add-framework.md
+++ b/docs/_snippets/web-components-vite-add-framework.md
@@ -15,4 +15,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/web-components-vite-framework-options.md b/docs/_snippets/web-components-vite-framework-options.md
new file mode 100644
index 000000000000..39946561e2d8
--- /dev/null
+++ b/docs/_snippets/web-components-vite-framework-options.md
@@ -0,0 +1,25 @@
+```js filename=".storybook/main.js" renderer="web-components" language="js"
+export default {
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {
+      // ...
+    },
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts"
+import type { StorybookConfig } from '@storybook/web-components-vite';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {
+      // ...
+    },
+  },
+};
+
+export default config;
+```
diff --git a/docs/_snippets/web-components-vite-install.md b/docs/_snippets/web-components-vite-install.md
index 2bb35f1e280a..c1bb0f6f47d9 100644
--- a/docs/_snippets/web-components-vite-install.md
+++ b/docs/_snippets/web-components-vite-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/web-components-vite
 ```shell renderer="web-components" language="js" packageManager="yarn"
 yarn add --dev @storybook/web-components-vite
 ```
-
diff --git a/docs/_snippets/web-components-webpack5-add-framework.md b/docs/_snippets/web-components-webpack5-add-framework.md
index 7df40eb92288..5fbc8b5f5abf 100644
--- a/docs/_snippets/web-components-webpack5-add-framework.md
+++ b/docs/_snippets/web-components-webpack5-add-framework.md
@@ -1,8 +1,7 @@
 ```js filename=".storybook/main.js" renderer="web-components" language="js"
 export default {
   // ...
-  // framework: '@storybook/react-webpack5', 👈 Remove this
-  framework: '@storybook/nextjs', // 👈 Add this
+  framework: '@storybook/web-components-webpack5', // 👈 Add this
 };
 ```
 
@@ -16,4 +15,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-
diff --git a/docs/_snippets/web-components-webpack5-framework-options.md b/docs/_snippets/web-components-webpack5-framework-options.md
new file mode 100644
index 000000000000..e2271207d624
--- /dev/null
+++ b/docs/_snippets/web-components-webpack5-framework-options.md
@@ -0,0 +1,26 @@
+```js filename=".storybook/main.js" renderer="web-components" language="js"
+export default {
+  // ...
+  framework: {
+    name: '@storybook/web-components-webpack5',
+    options: {
+      // ...
+    },
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts"
+import type { StorybookConfig } from '@storybook/web-components-webpack5';
+
+const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/web-components-webpack5',
+    options: {
+      // ...
+    },
+  },
+};
+
+export default config;
+```
diff --git a/docs/_snippets/web-components-webpack5-install.md b/docs/_snippets/web-components-webpack5-install.md
index 23529f1184c4..633c15e1777c 100644
--- a/docs/_snippets/web-components-webpack5-install.md
+++ b/docs/_snippets/web-components-webpack5-install.md
@@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/web-components-webpack5
 ```shell renderer="web-components" language="js" packageManager="yarn"
 yarn add --dev @storybook/web-components-webpack5
 ```
-
diff --git a/docs/_snippets/web-components-webpack5-transpilation.md b/docs/_snippets/web-components-webpack5-transpilation.md
new file mode 100644
index 000000000000..632f520f7f32
--- /dev/null
+++ b/docs/_snippets/web-components-webpack5-transpilation.md
@@ -0,0 +1,33 @@
+```js filename=".storybook/main.js" renderer="web-components" language="js"
+export default {
+  webpackFinal: async (config) => {
+    // Find web-components rule for extra transpilation
+    const webComponentsRule = config.module.rules.find(
+      (rule) => rule.use && rule.use.options && rule.use.options.babelrc === false,
+    );
+    // Add your own `my-library`
+    webComponentsRule.test.push(new RegExp(`node_modules(\\/|\\\\)my-library(.*)\\.js$`));
+
+    return config;
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="web-components" language="ts"
+import type { StorybookConfig } from '@storybook/web-components-webpack5';
+
+const config: StorybookConfig = {
+  webpackFinal: async (config) => {
+    // Find web-components rule for extra transpilation
+    const webComponentsRule = config.module.rules.find(
+      (rule) => rule.use && rule.use.options && rule.use.options.babelrc === false,
+    );
+    // Add your own `my-library`
+    webComponentsRule.test.push(new RegExp(`node_modules(\\/|\\\\)my-library(.*)\\.js$`));
+
+    return config;
+  },
+};
+
+export default config;
+```
diff --git a/docs/_snippets/your-component-with-decorator.md b/docs/_snippets/your-component-with-decorator.md
index 820f72da82e5..c06d43496724 100644
--- a/docs/_snippets/your-component-with-decorator.md
+++ b/docs/_snippets/your-component-with-decorator.md
@@ -148,9 +148,22 @@ const meta: Meta<typeof YourComponent> = {
 export default meta;
 ```
 
-```js filename="YourComponent.stories.js" renderer="svelte" language="js"
-import YourComponent from './YourComponent.svelte';
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+  import MarginDecorator from './MarginDecorator.svelte';
+
+  const { Story } = defineMeta({
+    component: YourComponent,
+    decorators: [() => MarginDecorator],
+  });
+</script>
+```
 
+```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
+import YourComponent from './YourComponent.svelte';
 import MarginDecorator from './MarginDecorator.svelte';
 
 export default {
@@ -159,41 +172,49 @@ export default {
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* YourComponent.stories.svelte */}
-
-<script>
-  import { Meta, Template } from '@storybook/addon-svelte-csf';
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
+  import YourComponent from './YourComponent.svelte';
   import MarginDecorator from './MarginDecorator.svelte';
 
-  import YourComponent from './YourComponent.svelte';
+  const { Story } = defineMeta({
+    component: YourComponent,
+    decorators: [() => MarginDecorator],
+  });
 </script>
-
-<meta title="YourComponent" component="{YourComponent}" />
-
-<template let:args>
-  <MarginDecorator>
-    {/*👇 Your component here */}
-  </MarginDecorator>
-</template>
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta } from '@storybook/svelte';
 
 import YourComponent from './YourComponent.svelte';
 import MarginDecorator from './MarginDecorator.svelte';
 
 const meta = {
-  component: Button,
+  component: YourComponent,
   decorators: [() => MarginDecorator],
-} satisfies Meta<typeof Button>;
+} satisfies Meta<typeof YourComponent>;
 
 export default meta;
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts"
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+  import MarginDecorator from './MarginDecorator.svelte';
+
+  const { Story } = defineMeta({
+    component: YourComponent,
+    decorators: [() => MarginDecorator],
+  });
+</script>
+```
+
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta } from '@storybook/svelte';
 
 import YourComponent from './YourComponent.svelte';
@@ -262,4 +283,3 @@ const meta: Meta<YourComponentProps> = {
 };
 export default meta;
 ```
-
diff --git a/docs/_snippets/your-component.md b/docs/_snippets/your-component.md
index 7ec83e1ce72a..689566b0323d 100644
--- a/docs/_snippets/your-component.md
+++ b/docs/_snippets/your-component.md
@@ -207,56 +207,67 @@ export const FirstStory: Story = {
 };
 ```
 
-```js filename="YourComponent.stories.js" renderer="svelte" language="js"
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+
+  //👇 This export determines where your story goes in the story list
+  const { Story } = defineMeta({
+    component: YourComponent,
+  });
+</script>
+
+<Story
+  name="FirstStory"
+  args={{
+    /*👇 The args you need here will depend on your component */
+  }}
+/>
+```
+
+```js filename="YourComponent.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import YourComponent from './YourComponent.svelte';
 
-//👇This default export determines where your story goes in the story list
+//👇 This default export determines where your story goes in the story list
 export default {
   component: YourComponent,
 };
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const FirstStory = {
-  render: (args) => ({
-    Component: YourComponent,
-    props: args,
-  }),
   args: {
     //👇 The args you need here will depend on your component
   },
 };
 ```
 
-```html renderer="svelte" language="ts" tabTitle="native-format"
-{/* YourComponent.stories.svelte */}
-
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
   import YourComponent from './YourComponent.svelte';
-</script>
-
-{/*👇 The title determines where your story goes in the story list */}
-<Meta title="YourComponent" component={YourComponent} argTypes={{ /* Customize your args here
-depending on your component */ }} />
 
-<template let:args>
-  <button {...args} />
-</template>
+  //👇 This export determines where your story goes in the story list
+  const { Story } = defineMeta({
+    component: YourComponent,
+  });
+</script>
 
-<Story name="FirstStory" args={{ /* The args you need here will depend on your component */ }} />
+<Story
+  name="FirstStory"
+  args={{
+    /*👇 The args you need here will depend on your component */
+  }}
+/>
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts-4-9"
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import YourComponent from './YourComponent.svelte';
 
-//👇This default export determines where your story goes in the story list
+//👇 This default export determines where your story goes in the story list
 const meta = {
   component: YourComponent,
 } satisfies Meta<typeof YourComponent>;
@@ -271,12 +282,32 @@ export const FirstStory: Story = {
 };
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts"
+```svelte filename="YourComponent.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import YourComponent from './YourComponent.svelte';
+
+  //👇 This export determines where your story goes in the story list
+  const { Story } = defineMeta({
+    component: YourComponent,
+  });
+</script>
+
+<Story
+  name="FirstStory"
+  args={{
+    /*👇 The args you need here will depend on your component */
+  }}
+/>
+```
+
+```ts filename="YourComponent.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
 import type { Meta, StoryObj } from '@storybook/svelte';
 
 import YourComponent from './YourComponent.svelte';
 
-//👇This default export determines where your story goes in the story list
+//👇 This default export determines where your story goes in the story list
 const meta: Meta<typeof YourComponent> = {
   component: YourComponent,
 };
@@ -291,7 +322,7 @@ export const FirstStory: Story = {
 };
 ```
 
-```js filename="YourComponent.stories.js" renderer="vue" language="js" tabTitle="3"
+```js filename="YourComponent.stories.js" renderer="vue" language="js"
 import YourComponent from './YourComponent.vue';
 
 //👇 This default export determines where your story goes in the story list
@@ -318,9 +349,7 @@ export const FirstStory = {
 };
 ```
 
-```ts filename="YourComponent.stories.js" renderer="vue" language="ts-4-9" tabTitle="3"
-import type { Meta, StoryObj } from '@storybook/vue3';
-
+```ts filename="YourComponent.stories.js" renderer="vue" language="ts-4-9"
 import YourComponent from './YourComponent.vue';
 
 const meta = {
@@ -350,7 +379,7 @@ export const Primary: Story = {
 };
 ```
 
-```ts filename="YourComponent.stories.ts" renderer="vue" language="ts" tabTitle="3"
+```ts filename="YourComponent.stories.ts" renderer="vue" language="ts"
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import YourComponent from './YourComponent.vue';
@@ -412,4 +441,3 @@ export const FirstStory: Story = {
   },
 };
 ```
-
diff --git a/docs/_snippets/your-theme.md b/docs/_snippets/your-theme.md
index b491ad8b608f..85b8021fd87c 100644
--- a/docs/_snippets/your-theme.md
+++ b/docs/_snippets/your-theme.md
@@ -40,4 +40,3 @@ export default create({
   inputBorderRadius: 2,
 });
 ```
-
diff --git a/docs/addons/addon-knowledge-base.mdx b/docs/addons/addon-knowledge-base.mdx
index c2dbdb497d30..763ce53ee3b1 100644
--- a/docs/addons/addon-knowledge-base.mdx
+++ b/docs/addons/addon-knowledge-base.mdx
@@ -7,7 +7,7 @@ sidebar:
 
 Once you understand the basics of writing addons, there are a variety of common enhancements to make your addon better. This page details additional information about addon creation. Use it as a quick reference guide when creating your own addons.
 
-### Disable the addon panel
+## Disable the addon panel
 
 It’s possible to disable the addon panel for a particular story.
 
@@ -27,14 +27,14 @@ Then when adding a story, you can pass a disabled parameter.
 
 {/* prettier-ignore-end */}
 
-### Style your addon
+## Style your addon
 
 Storybook uses [Emotion](https://emotion.sh/docs/introduction) for styling. Alongside with a theme that you can customize!
 
 We recommend using Emotion to style your addon’s UI components. That allows you to use the active Storybook theme to deliver a seamless developer experience.
 If you don’t want to use Emotion, you can use inline styles or another css-in-js lib. You can receive the theme as a prop by using Emotion's `withTheme` HOC. [Read more about theming](../configure/user-interface/theming.mdx).
 
-### Storybook components
+## Storybook components
 
 Addon authors can develop their UIs using any React library. But we recommend using Storybook’s UI components in `@storybook/components` to build addons faster. When you use Storybook components, you get:
 
@@ -75,11 +75,11 @@ Complementing the components, also included is a set of UI primitives. Use the c
   
 </Callout>
 
-### Build system
+## Build system
 
 When you're developing your addon as a package, you can’t use `npm link` to add it to your project. List your addon as a local dependency into your package.json:
 
-```json
+```json title="package.json"
 {
   "dependencies": {
     "@storybook/addon-controls": "file:///home/username/myrepo"
@@ -91,15 +91,15 @@ When you're developing your addon as a package, you can’t use `npm link` to ad
   Run either `yarn` or `npm install` to install the addon.
 </Callout>
 
-### Hot module replacement
+## Hot module replacement
 
 While developing your addon, you can configure HMR (hot module replacement) to reflect the changes made.
 
-### Standalone Storybook addons
+## Standalone Storybook addons
 
 If you're developing a standalone addon, add a new script to `package.json` with the following:
 
-```json
+```json title="package.json"
 {
   "scripts": {
     "start": "npm run build -- --watch"
@@ -107,11 +107,11 @@ If you're developing a standalone addon, add a new script to `package.json` with
 }
 ```
 
-#### Local Storybook addons
+### Local Storybook addons
 
 If you're developing a local Storybook addon built on top of an existing Storybook installation, HMR (hot module replacement) is available out of the box.
 
-### Composing addons in presets
+## Composing addons in presets
 
 If you're working on a preset that loads third-party addons, which you don't have control over, and you need access to certain features (e.g., decorators) or provide additional configurations. In that case, you'll need to update your preset to the following to allow you to load and configure the other addons:
 
diff --git a/docs/addons/addon-migration-guide.mdx b/docs/addons/addon-migration-guide.mdx
index bf1c26309f04..cc032f6f24c1 100644
--- a/docs/addons/addon-migration-guide.mdx
+++ b/docs/addons/addon-migration-guide.mdx
@@ -15,7 +15,7 @@ We sincerely appreciate the dedication and effort addon creators put into keepin
 
 Begin by updating your Storybook dependencies. Use the `next` tag for pre-release versions, `latest` for the most recent stable release, or specify the version directly.
 
-```jsonc
+```jsonc title="package.json"
 {
   "dependencies": {
     "@storybook/client-logger": "next" // or "latest", or "^8.0.0"
diff --git a/docs/addons/addon-types.mdx b/docs/addons/addon-types.mdx
index 8b2aef939ff8..5c540cd0bdb0 100644
--- a/docs/addons/addon-types.mdx
+++ b/docs/addons/addon-types.mdx
@@ -40,11 +40,7 @@ Use this boilerplate code to add a new `button` to Storybook's Toolbar:
 {/* prettier-ignore-end */}
 
 <Callout variant="info">
-  The `match` property allows you to conditionally render your toolbar addon, [based on the current view](./writing-addons.mdx#conditionally-render-the-addon).
-
-  <hr style={{ margin: '-0.75em 0 0.75em' }} />
-
-  The `icon` element used in the example loads the icons from the `@storybook/components` package. See [here](../faq.mdx#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
+  The `match` property allows you to conditionally render your toolbar addon, [based on the current view](./writing-addons.mdx#conditionally-render-the-addon). The `icon` element used in the example loads the icons from the `@storybook/components` package. See [here](../faq.mdx#what-icons-are-available-for-my-toolbar-or-my-addon) for the list of available icons that you can use.
 </Callout>
 
 ### Tabs
diff --git a/docs/addons/addons-api.mdx b/docs/addons/addons-api.mdx
index 42cbb56c3a90..e5b580597b4f 100644
--- a/docs/addons/addons-api.mdx
+++ b/docs/addons/addons-api.mdx
@@ -95,7 +95,7 @@ The `selectStory` API method allows you to select a single story. It accepts the
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-with-addon-example.md" usesCsf3 csf2Path="addons/addons-api#snippet-button-story-with-addon-example" />
+<CodeSnippets path="button-story-with-addon-example.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/addons/integration-catalog.mdx b/docs/addons/integration-catalog.mdx
index f1b6e63fe9da..8439c033f847 100644
--- a/docs/addons/integration-catalog.mdx
+++ b/docs/addons/integration-catalog.mdx
@@ -59,10 +59,8 @@ Use the list below as a reference when filling in the values for both the `suppo
   Make sure to copy each item **exactly** as listed so that we can properly index your addon in our catalog.
 </Callout>
 
-```json
+```json title="package.json"
 {
-  // package.json
-
   "name": "storybook-addon-outline",
   "version": "1.0.0",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
diff --git a/docs/addons/writing-addons.mdx b/docs/addons/writing-addons.mdx
index fe3cb45ffd1b..b31aec29f869 100644
--- a/docs/addons/writing-addons.mdx
+++ b/docs/addons/writing-addons.mdx
@@ -26,7 +26,7 @@ The addon built in this guide is a UI-based addon, specifically a [toolbar](./ad
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="storybook-addon-toolkit-toolbar-example.md" />
+<CodeSnippets path="storybook-addon-toolkit-types.md" />
 
 {/* prettier-ignore-end */}
 
@@ -68,9 +68,7 @@ By default, code for the UI-based addons is located in one of the following file
 
 Going through the code blocks in sequence:
 
-```ts
-// src/Tool.tsx
-
+```ts title="src/Tool.tsx"
 import { useGlobals, useStorybookApi } from '@storybook/manager-api';
 import { IconButton } from '@storybook/components';
 import { LightningIcon } from '@storybook/icons';
@@ -80,9 +78,7 @@ The [`useGlobals`](./addons-api.mdx#useglobals) and [`useStorybookApi`](./addons
 
 The `IconButton` or `Button` component from the [`@storybook/components`](https://www.npmjs.com/package/@storybook/components) package can be used to render the buttons in the toolbar. The [`@storybook/icons`](https://github.com/storybookjs/icons) package provides a large set of appropriately sized and styled icons to choose from.
 
-```ts
-// src/Tool.tsx
-
+```ts title="src/Tool.tsx"
 export const Tool = memo(function MyAddonSelector() {
   const [globals, updateGlobals] = useGlobals();
   const api = useStorybookApi();
@@ -175,7 +171,7 @@ Storybook addons, similar to most packages in the JavaScript ecosystem, are dist
 
 The first category of metadata is related to the addon itself. This includes the entry for the module, which files to include when the addon is published. And the required configuration to integrate the addon with Storybook, allowing it to be used by its consumers.
 
-```json
+```json title="package.json"
 {
   "exports": {
     ".": {
@@ -213,7 +209,7 @@ The first category of metadata is related to the addon itself. This includes the
 
 The second metadata category is related to the [integration catalog](https://storybook.js.org/integrations). Most of this information is already pre-configured by the Addon Kit. However, items like the display name, icon, and frameworks must be configured via the `storybook` property to be displayed in the catalog.
 
-```json
+```json title="package.json"
 {
   "name": "my-storybook-addon",
   "version": "1.0.0",
diff --git a/docs/api/cli-options.mdx b/docs/api/cli-options.mdx
index b5b8a3fd9eda..dff6c5531acf 100644
--- a/docs/api/cli-options.mdx
+++ b/docs/api/cli-options.mdx
@@ -274,7 +274,6 @@ Storybook Environment Info:
   npmPackages:
     @storybook/addon-essentials: ^7.6.6 => 7.6.6
     @storybook/addon-interactions: ^7.6.6 => 7.6.6
-    @storybook/addon-links: ^7.6.6 => 7.6.6
     @storybook/addon-onboarding: ^1.0.10 => 1.0.10
     @storybook/blocks: ^7.6.6 => 7.6.6
     @storybook/preset-create-react-app: ^7.6.6 => 7.6.6
diff --git a/docs/api/csf.mdx b/docs/api/csf.mdx
index 68f2d2f37266..efe4c1394d6a 100644
--- a/docs/api/csf.mdx
+++ b/docs/api/csf.mdx
@@ -10,7 +10,7 @@ sidebar:
 Component Story Format (CSF) is the recommended way to [write stories](../writing-stories/index.mdx). It's an [open standard](https://github.com/ComponentDriven/csf) based on ES6 modules that is portable beyond Storybook.
 
 <Callout variant="info" icon="💡">
-  If you have stories written in the older `storiesOf()` syntax, it was removed in Storybook 8.0 and is no longer maintained. We recommend migrating your stories to CSF. See the [migration guide](../migration-guide/index.mdx#storiesof-to-csf) for more information.
+  If you have stories written in the older `storiesOf()` syntax, it was removed in Storybook 8.0 and is no longer maintained. We recommend migrating your stories to CSF. See the [migration guide](../migration-guide/index.mdx#major-breaking-changes) for more information.
 </Callout>
 
 In CSF, stories and component metadata are defined as ES Modules. Every component story file consists of a required [default export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_the_default_export) and one or more [named exports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export).
@@ -35,7 +35,7 @@ With CSF, every named export in the file represents a story object by default.
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="my-component-story-basic-and-props.md" usesCsf3 csf2Path="api/csf#snippet-my-component-story-basic-and-props" />
+<CodeSnippets path="my-component-story-basic-and-props.md" />
 
 {/* prettier-ignore-end */}
 
@@ -57,7 +57,7 @@ Storybook's `name` configuration element is helpful in specific circumstances. C
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="my-component-story-with-storyname.md" usesCsf3 csf2Path="api/csf#snippet-my-component-story-with-storyname" />
+<CodeSnippets path="my-component-story-with-storyname.md" />
 
 {/* prettier-ignore-end */}
 
@@ -69,7 +69,7 @@ Consider Storybook’s ["Button" example](../writing-stories/index.mdx#defining-
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-click-handler.md" usesCsf3 csf2Path="api/csf#snippet-button-story-click-handler" />
+<CodeSnippets path="button-story-click-handler.md" />
 
 {/* prettier-ignore-end */}
 
@@ -77,7 +77,7 @@ Now consider the same example, re-written with args:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-click-handler-args.md" usesCsf3 csf2Path="api/csf#snippet-button-story-click-handler-args" />
+<CodeSnippets path="button-story-click-handler-args.md" />
 
 {/* prettier-ignore-end */}
 
@@ -85,7 +85,7 @@ Or even more simply:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-click-handler-simplificated.md" usesCsf3 csf2Path="api/csf#snippet-button-story-click-handler-simplificated" />
+<CodeSnippets path="button-story-click-handler-simplificated.md" />
 
 {/* prettier-ignore-end */}
 
@@ -101,7 +101,7 @@ A good use case for the `play` function is a form component. With previous Story
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="login-form-with-play-function.md" usesCsf3 csf2Path="api/csf#snippet-login-form-with-play-function" />
+<CodeSnippets path="login-form-with-play-function.md" />
 
 {/* prettier-ignore-end */}
 
@@ -114,7 +114,7 @@ When the story renders in the UI, Storybook executes each step defined in the `p
 
   {/* prettier-ignore-start */}
 
-  <CodeSnippets path="component-story-with-custom-render-function.md" usesCsf3 csf2Path="api/csf#snippet-component-story-with-custom-render-function" />
+  <CodeSnippets path="component-story-with-custom-render-function.md" />
 
   {/* prettier-ignore-end */}
 
@@ -152,7 +152,7 @@ Consider the following story file:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="my-component-story-with-nonstory.md" usesCsf3 csf2Path="api/csf#snippet-my-component-story-with-nonstory" />
+<CodeSnippets path="my-component-story-with-nonstory.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/api/doc-blocks/doc-block-argtypes.mdx b/docs/api/doc-blocks/doc-block-argtypes.mdx
index f7009dd1ee32..62223e753138 100644
--- a/docs/api/doc-blocks/doc-block-argtypes.mdx
+++ b/docs/api/doc-blocks/doc-block-argtypes.mdx
@@ -17,9 +17,7 @@ The `ArgTypes` block can be used to show a static table of [arg types](../arg-ty
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta, ArgTypes } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
 
@@ -51,9 +49,7 @@ import { ArgTypes } from '@storybook/blocks';
 
   {/* prettier-ignore-start */}
 
-  ```md
-  {/* ButtonDocs.mdx */}
-
+  ```md title="ButtonDocs.mdx"
   <ArgTypes of={ButtonStories} exclude={['style']} />
   ```
 
diff --git a/docs/api/doc-blocks/doc-block-canvas.mdx b/docs/api/doc-blocks/doc-block-canvas.mdx
index bee523de54be..1202bdd25abd 100644
--- a/docs/api/doc-blocks/doc-block-canvas.mdx
+++ b/docs/api/doc-blocks/doc-block-canvas.mdx
@@ -15,9 +15,7 @@ When using the Canvas block in MDX, it references a story with the `of` prop:
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta, Canvas } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
 
@@ -53,9 +51,7 @@ import { Canvas } from '@storybook/blocks';
 
   {/* prettier-ignore-start */}
 
-  ```md
-  {/* ButtonDocs.mdx */}
-
+  ```md title="ButtonDocs.mdx"
   <Canvas of={ButtonStories.Basic} sourceState="shown" />
   ```
 
@@ -87,15 +83,13 @@ Provides any additional custom actions to show in the bottom right corner. These
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta, Story, Canvas, SourceState } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
 
 <Meta of={ButtonStories} />
 
-{/* with an additional action */}
+{/* With an additional action */}
 <Canvas
   additionalActions={[
     {
@@ -146,9 +140,7 @@ You can render a story from a CSF file that you haven’t attached to the MDX fi
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta, Canvas } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
 import * as HeaderStories from './Header.stories';
diff --git a/docs/api/doc-blocks/doc-block-colorpalette.mdx b/docs/api/doc-blocks/doc-block-colorpalette.mdx
index a0f31720ea4f..0459af784b06 100644
--- a/docs/api/doc-blocks/doc-block-colorpalette.mdx
+++ b/docs/api/doc-blocks/doc-block-colorpalette.mdx
@@ -13,9 +13,7 @@ The `ColorPalette` block allows you to document all color-related items (e.g., s
 
 {/* prettier-ignore-start */}
 
-```md
-{/* Colors.mdx */}
-
+```md title="Colors.mdx"
 import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
 
 <Meta title="Colors" />
diff --git a/docs/api/doc-blocks/doc-block-controls.mdx b/docs/api/doc-blocks/doc-block-controls.mdx
index 5c11708a0019..32bce38ca5ec 100644
--- a/docs/api/doc-blocks/doc-block-controls.mdx
+++ b/docs/api/doc-blocks/doc-block-controls.mdx
@@ -17,9 +17,7 @@ The `Controls` block can be used to show a dynamic table of args for a given sto
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta, Canvas, Controls } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories'
 
@@ -59,9 +57,7 @@ import { Controls } from '@storybook/blocks';
 
   {/* prettier-ignore-start */}
 
-  ```md
-  {/* ButtonDocs.mdx */}
-
+  ```md title="ButtonDocs.mdx"
   <Controls of={ButtonStories} exclude={['style']} />
   ```
 
diff --git a/docs/api/doc-blocks/doc-block-description.mdx b/docs/api/doc-blocks/doc-block-description.mdx
index 15cbf9843764..538306e76a75 100644
--- a/docs/api/doc-blocks/doc-block-description.mdx
+++ b/docs/api/doc-blocks/doc-block-description.mdx
@@ -13,9 +13,7 @@ The `Description` block displays the description for a component, story, or meta
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta, Description } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
 
@@ -63,12 +61,9 @@ When documenting a component, reference a meta export in the `of` prop (see belo
 
 This flow gives you powerful ways to override the description for each scenario. Take the following example:
 
-```jsx
-// Button.jsx
-
+```jsx title="Button.jsx"
 /**
- * # The Button component
- * Shows a button
+ * The Button component shows a button
  */
 export const Button = () => <button>Click me</button>;
 ```
@@ -81,9 +76,7 @@ export const Button = () => <button>Click me</button>;
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta, Description } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
 
diff --git a/docs/api/doc-blocks/doc-block-icongallery.mdx b/docs/api/doc-blocks/doc-block-icongallery.mdx
index 7da3d7960cc2..be79b79e9213 100644
--- a/docs/api/doc-blocks/doc-block-icongallery.mdx
+++ b/docs/api/doc-blocks/doc-block-icongallery.mdx
@@ -11,12 +11,14 @@ The `IconGallery` block enables you to easily document React icon components ass
 
 ![Screenshot of IconGallery and IconItem blocks](../../_assets/api/doc-block-icongallery.png)
 
-{/* prettier-ignore-start */}
+## Documenting icons
+
+To document a set of icons, use the `IconGallery` block to display them in a grid. Each icon is wrapped in an `IconItem` block, enabling you to specify its properties, such as the name and the icon itself.
 
-```md
-{/* Iconography.mdx */}
+{/* prettier-ignore-start */}
 
-import { Meta, Title, IconGallery, IconItem } from '@storybook/blocks';
+```md title="Iconography.mdx"
+import { Meta, IconGallery, IconItem } from '@storybook/blocks';
 
 import { Icon as IconExample } from './Icon';
 
@@ -60,6 +62,31 @@ import { Icon as IconExample } from './Icon';
 
 {/* prettier-ignore-end */}
 
+### Automate icon documentation
+
+If you're working on a project that contains a large number of icons that you want to document, you can extend the `IconGallery` block, wrap `IconItem` in a loop, and iterate over the icons you want to document, including their properties. For example:
+
+{/* prettier-ignore-start */}
+
+```md title="Iconography.mdx"
+import { Meta, IconGallery, IconItem } from '@storybook/blocks';
+
+import { Icon as IconExample } from './Icon';
+import * as icons from './icons';
+
+# Iconography
+
+<IconGallery>
+  {Object.keys(icons).map((icon) => (
+    <IconItem name={icon}>
+      <IconExample icon={icon} />
+    </IconItem>
+  ))}
+</IconGallery>
+```
+
+{/* prettier-ignore-end */}
+
 ## IconGallery
 
 ```js
diff --git a/docs/api/doc-blocks/doc-block-markdown.mdx b/docs/api/doc-blocks/doc-block-markdown.mdx
index ea807584bbe2..2732cd9b2cb5 100644
--- a/docs/api/doc-blocks/doc-block-markdown.mdx
+++ b/docs/api/doc-blocks/doc-block-markdown.mdx
@@ -13,9 +13,7 @@ When importing markdown files, it’s important to use the `?raw` suffix on the
 
 {/* prettier-ignore-start */}
 
-````md
-{/* README.md */}
-
+````md title="README.md"
 # Button
 
 Primary UI component for user interaction
@@ -29,9 +27,7 @@ import { Button } from "@storybook/design-system";
 
 {/* prettier-ignore-start */}
 
-```md
-{/* Header.mdx */}
-
+```md title="Header.mdx"
 // DON'T do this, will error
 import ReadMe from './README.md';
 // DO this, will work
diff --git a/docs/api/doc-blocks/doc-block-meta.mdx b/docs/api/doc-blocks/doc-block-meta.mdx
index f0121df062e1..7d7cc0f724fa 100644
--- a/docs/api/doc-blocks/doc-block-meta.mdx
+++ b/docs/api/doc-blocks/doc-block-meta.mdx
@@ -12,9 +12,7 @@ The `Meta` block is used to [attach](#attached-vs-unattached) a custom MDX docs
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
 
@@ -49,9 +47,7 @@ Sets the name of the [attached](#attached-vs-unattached) doc entry. You can atta
 
 {/* prettier-ignore-start */}
 
-```md
-{/* Component.mdx */}
-
+```md title="Component.mdx"
 import { Meta } from '@storybook/blocks';
 import * as ComponentStories from './component.stories';
 
@@ -69,9 +65,7 @@ Specifies which CSF file is [attached](#attached-vs-unattached) to this MDX file
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta, Story } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
 
diff --git a/docs/api/doc-blocks/doc-block-primary.mdx b/docs/api/doc-blocks/doc-block-primary.mdx
index 62882f3a1d88..28dd3d678fd2 100644
--- a/docs/api/doc-blocks/doc-block-primary.mdx
+++ b/docs/api/doc-blocks/doc-block-primary.mdx
@@ -13,9 +13,7 @@ The `Primary` block displays the primary (first defined in the stories file) sto
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta, Primary } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
 
diff --git a/docs/api/doc-blocks/doc-block-source.mdx b/docs/api/doc-blocks/doc-block-source.mdx
index e2d5f94d5985..f3edb6d6df9d 100644
--- a/docs/api/doc-blocks/doc-block-source.mdx
+++ b/docs/api/doc-blocks/doc-block-source.mdx
@@ -13,9 +13,7 @@ The `Source` block is used to render a snippet of source code directly.
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta, Source } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
 
@@ -47,9 +45,7 @@ import { Source } from '@storybook/blocks';
 
   {/* prettier-ignore-start */}
 
-  ```md
-  {/* ButtonDocs.mdx */}
-
+  ```md title="ButtonDocs.mdx"
   <Source of={ButtonStories.Basic} language="tsx" />
   ```
 
@@ -68,9 +64,7 @@ Provides the source code to be rendered.
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta, Source } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
 
diff --git a/docs/api/doc-blocks/doc-block-stories.mdx b/docs/api/doc-blocks/doc-block-stories.mdx
index 42cd9fcc2c95..6dcd5e0bff59 100644
--- a/docs/api/doc-blocks/doc-block-stories.mdx
+++ b/docs/api/doc-blocks/doc-block-stories.mdx
@@ -13,9 +13,7 @@ The `Stories` block renders the full collection of stories in a stories file.
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta, Stories } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
 
diff --git a/docs/api/doc-blocks/doc-block-story.mdx b/docs/api/doc-blocks/doc-block-story.mdx
index c5a8828f421f..df1446ecb550 100644
--- a/docs/api/doc-blocks/doc-block-story.mdx
+++ b/docs/api/doc-blocks/doc-block-story.mdx
@@ -21,9 +21,7 @@ In Storybook Docs, you can render any of your stories from your CSF files in the
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"+
 import { Meta, Story } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
 
@@ -55,9 +53,7 @@ import { Story } from '@storybook/blocks';
 
   {/* prettier-ignore-start */}
 
-  ```md
-  {/* ButtonDocs.mdx */}
-
+  ```md title="ButtonDocs.mdx"
   <Story of={ButtonStories.Basic} autoplay />
   ```
 
@@ -114,9 +110,7 @@ You can render a story from a CSF file that you haven’t attached to the MDX fi
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta, Story } from '@storybook/blocks';
 import * as ButtonStories from './Button.stories';
 import * as HeaderStories from './Header.stories';
diff --git a/docs/api/doc-blocks/doc-block-subtitle.mdx b/docs/api/doc-blocks/doc-block-subtitle.mdx
index a04da42c328d..dee2b243f534 100644
--- a/docs/api/doc-blocks/doc-block-subtitle.mdx
+++ b/docs/api/doc-blocks/doc-block-subtitle.mdx
@@ -13,9 +13,7 @@ The `Subtitle` block can serve as a secondary heading for your docs entry.
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Subtitle } from '@storybook/blocks';
 
 <Subtitle>This is the subtitle</Subtitle>
diff --git a/docs/api/doc-blocks/doc-block-title.mdx b/docs/api/doc-blocks/doc-block-title.mdx
index 3d8c74c25949..54a474b738f7 100644
--- a/docs/api/doc-blocks/doc-block-title.mdx
+++ b/docs/api/doc-blocks/doc-block-title.mdx
@@ -13,9 +13,7 @@ The `Title` block serves as the primary heading for your docs entry. It is typic
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Title } from '@storybook/blocks';
 
 <Title>This is the title</Title>
diff --git a/docs/api/doc-blocks/doc-block-typeset.mdx b/docs/api/doc-blocks/doc-block-typeset.mdx
index 8ceb2ab7b67d..5cedbf8ab772 100644
--- a/docs/api/doc-blocks/doc-block-typeset.mdx
+++ b/docs/api/doc-blocks/doc-block-typeset.mdx
@@ -13,9 +13,7 @@ The `Typeset` block helps document the fonts used throughout your project.
 
 {/* prettier-ignore-start */}
 
-```md
-{/* Typography.mdx */}
-
+```md title="Typography.mdx"
 import { Meta, Typeset } from '@storybook/blocks';
 
 <Meta title="Typography" />
diff --git a/docs/api/doc-blocks/doc-block-unstyled.mdx b/docs/api/doc-blocks/doc-block-unstyled.mdx
index 4e9e56a8ade3..dce273c69d0b 100644
--- a/docs/api/doc-blocks/doc-block-unstyled.mdx
+++ b/docs/api/doc-blocks/doc-block-unstyled.mdx
@@ -11,7 +11,7 @@ By default, most elements (like `h1`, `p`, etc.) in docs have a few default styl
 
 {/* prettier-ignore-start */}
 
-```md
+```md title="ButtonDocs.mdx"
 import { Meta, Unstyled } from "@storybook/blocks";
 import { Header } from "./Header.tsx";
 
diff --git a/docs/api/doc-blocks/doc-block-useof.mdx b/docs/api/doc-blocks/doc-block-useof.mdx
index 7e5944c07869..89a7fb7c7d05 100644
--- a/docs/api/doc-blocks/doc-block-useof.mdx
+++ b/docs/api/doc-blocks/doc-block-useof.mdx
@@ -11,9 +11,7 @@ If your own doc blocks need to interface with annotations from Storybook—that
 
 Here’s an example of how the`useOf` hook could be used to create a custom block that displays the name of the story:
 
-```jsx
-// .storybook/blocks/StoryName.jsx
-
+```jsx title=".storybook/blocks/StoryName.jsx"
 import { useOf } from '@storybook/blocks';
 
 /**
@@ -38,22 +36,20 @@ export const StoryName = ({ of }) => {
 
 {/* prettier-ignore-start */}
 
-```md
-{/* ButtonDocs.mdx */}
-
+```md title="ButtonDocs.mdx"
 import { Meta } from '@storybook/blocks';
 import { StoryName } from '../.storybook/blocks/StoryName';
 import * as ButtonStories from './Button.stories';
 
 <Meta of={ButtonStories} />
 
-{/* renders "Secondary" */}
+{/* Renders "Secondary" */}
 <StoryName of={ButtonStories.Secondary} />
 
-{/* renders "Primary" */}
+{/* Renders "Primary" */}
 <StoryName />
 
-{/* renders "Button" */}
+{/* Renders "Button" */}
 <StoryName of={ButtonStories} />
 ```
 
diff --git a/docs/api/main-config/main-config-features.mdx b/docs/api/main-config/main-config-features.mdx
index 47dd9c107d49..30ad5fda9081 100644
--- a/docs/api/main-config/main-config-features.mdx
+++ b/docs/api/main-config/main-config-features.mdx
@@ -15,6 +15,7 @@ Type:
   backgroundsStoryGlobals?: boolean;
   legacyDecoratorFileOrder?: boolean;
   viewportStoryGlobals?: boolean;
+  developmentModeForBuild?: boolean;
 }
 ```
 
@@ -69,3 +70,15 @@ Configures the [Viewports addon](../../essentials/viewport.mdx) to opt-in to the
 <CodeSnippets path="main-config-features-viewport-story-globals.md" />
 
 {/* prettier-ignore-end */}
+
+## `developmentModeForBuild`
+
+Type: `boolean`
+
+Set `NODE_ENV` to `'development'` in built Storybooks for better testing and debugging capabilities.
+
+{/* prettier-ignore-start */}
+
+<CodeSnippets path="main-config-features-development-mode-for-build.md" />
+
+{/* prettier-ignore-end */}
diff --git a/docs/api/main-config/main-config-indexers.mdx b/docs/api/main-config/main-config-indexers.mdx
index 67a6cf5c45b1..a33cd2a40853 100644
--- a/docs/api/main-config/main-config-indexers.mdx
+++ b/docs/api/main-config/main-config-indexers.mdx
@@ -349,3 +349,141 @@ Some example usages of custom indexers include:
 
   Custom indexers can be used for an advanced purpose: defining stories in any language, including template languages, and converting the files to CSF. To see examples of this in action, you can refer to [`@storybook/addon-svelte-csf`](https://github.com/storybookjs/addon-svelte-csf) for Svelte template syntax and [`storybook-vue-addon`](https://github.com/tobiasdiez/storybook-vue-addon) for Vue template syntax.
 </details>
+
+
+<details>
+  <summary>Adding sidebar links from a URL collection</summary>
+
+  The indexer API is flexible enough to let you process arbitrary content, so long as your framework tooling can transform the exports in that content into actual stories it can run. This advanced example demonstrates how you can create a custom indexer to process a collection of URLs, extract the title and URL from each page, and render them as sidebar links in the UI. Implemented with Svelte, it can be adapted to any framework.
+
+  Start by creating the URL collection file (i.e., `src/MyLinks.url.js`) with a list of URLs listed as named exports. The indexer will use the export name as the story title and the value as the unique identifier.
+
+  ```js title="MyLinks.url.js"
+  export default {};
+
+  export const DesignTokens = 'https://www.designtokens.org/';
+  export const CobaltUI = 'https://cobalt-ui.pages.dev/';
+  export const MiseEnMode = 'https://mode.place/';
+  export const IndexerAPI = 'https://github.com/storybookjs/storybook/discussions/23176';
+  ```
+
+  Adjust your Vite configuration file to include a custom plugin complementing the indexer. This will allow Storybook to process and import the URL collection file as stories.
+
+  ```ts title="vite.config.ts"
+  import * as acorn from 'acorn';
+  import * as walk from 'acorn-walk';
+  import { defineConfig, type Plugin } from 'vite';
+  import { svelte } from '@sveltejs/vite-plugin-svelte';
+
+  function StorybookUrlLinksPlugin(): Plugin {
+    return {
+      name: 'storybook-url-links',
+      async transform(code: string, id: string) {
+        if (id.endsWith('.url.js')) {
+          const ast = acorn.parse(code, {
+            ecmaVersion: 2020,
+            sourceType: 'module',
+          });
+
+          const namedExports: string[] = [];
+          let defaultExport = 'export default {};';
+
+          walk.simple(ast, {
+            // Extracts the named exports, those represent our stories, and for each of them, we'll return a valid Svelte component.
+            ExportNamedDeclaration(node: acorn.ExportNamedDeclaration) {
+              if (
+                node.declaration &&
+                node.declaration.type === 'VariableDeclaration'
+              ) {
+                node.declaration.declarations.forEach((declaration) => {
+                  if ('name' in declaration.id) {
+                    namedExports.push(declaration.id.name);
+                  }
+                });
+              }
+            },
+            // Preserve our default export.
+            ExportDefaultDeclaration(node: acorn.ExportDefaultDeclaration) {
+              defaultExport = code.slice(node.start, node.end);
+            },
+          });
+
+          return {
+            code: `
+              import RedirectBack from '../../.storybook/components/RedirectBack.svelte';
+              ${namedExports
+                .map(
+                  (name) =>
+                    `export const ${name} = () => new RedirectBack();`
+                )
+                .join('\n')}
+              ${defaultExport}
+            `,
+            map: null,
+          };
+        }
+      },
+    };
+  }
+
+  export default defineConfig({
+    plugins: [StorybookUrlLinksPlugin(), svelte()],
+  })
+  ```
+
+  Update your Storybook configuration (i.e., `.storybook/main.js|ts`) to include the custom indexer.
+
+  ```ts title=".storybook/main.js|ts"
+  import type { StorybookConfig } from '@storybook/svelte-vite';
+  import type { Indexer } from '@storybook/types';
+
+  const urlIndexer: Indexer = {
+    test: /\.url\.js$/,
+    createIndex: async (fileName, { makeTitle }) => {
+      const fileData = await import(fileName);
+
+      return Object.entries(fileData)
+        .filter(([key]) => key != 'default')
+        .map(([name, url]) => {
+          return {
+            type: 'docs',
+            importPath: fileName,
+            exportName: name,
+            title: makeTitle(name)
+              .replace(/([a-z])([A-Z])/g, '$1 $2')
+              .trim(),
+            __id: `url--${name}--${encodeURIComponent(url as string)}`,
+            tags: ['!autodocs', 'url']
+          };
+        });
+    }
+  };
+
+  const config: StorybookConfig = {
+    stories: ['../src/**/*.stories.@(js|ts|svelte)', '../src/**/*.url.js'],
+    framework: {
+      name: '@storybook/svelte-vite',
+      options: {},
+    },
+    experimental_indexers: async (existingIndexers) => [urlIndexer, ...existingIndexers]
+  };
+  export default config;
+  ```
+
+  Add a Storybook UI configuration file (i.e., `.storybook/manager.js|ts`) to render the indexed URLs as sidebar links in the UI:
+
+  ```ts title=".storybook/manager.ts"
+  import { addons } from '@storybook/manager-api';
+
+  import SidebarLabelWrapper from './components/SidebarLabelWrapper.tsx';
+
+  addons.setConfig({
+      sidebar: {
+        renderLabel: (item) => SidebarLabelWrapper({ item }),
+      },
+  });
+  ```
+
+  This example's code and live demo are available on [StackBlitz](https://stackblitz.com/~/github.com/Sidnioulz/storybook-sidebar-urls).
+
+</details>
\ No newline at end of file
diff --git a/docs/api/new-frameworks.mdx b/docs/api/new-frameworks.mdx
index edd780db1191..11d8b8407f13 100644
--- a/docs/api/new-frameworks.mdx
+++ b/docs/api/new-frameworks.mdx
@@ -33,7 +33,7 @@ Storybook has the concept of [presets](../addons/writing-presets.mdx), which are
 
 It's helpful to understand Storybook's package structure before adding a framework preset. Each framework typically exposes two executables in its `package.json`:
 
-```json
+```json title="package.json"
 {
   "bin": {
     "storybook": "./bin/index.js",
@@ -94,7 +94,7 @@ Consider the following React story:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-with-sample.md" usesCsf3 csf2Path="api/new-frameworks#snippet-button-story-with-sample" />
+<CodeSnippets path="button-story-with-sample.md" />
 
 {/* prettier-ignore-end */}
 
@@ -106,7 +106,7 @@ Consider the following hypothetical example:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-hypothetical-example.md" usesCsf3 csf2Path="api/new-frameworks#snippet-button-story-hypothetical-example" />
+<CodeSnippets path="button-story-hypothetical-example.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/api/parameters.mdx b/docs/api/parameters.mdx
index 8f1313203871..28362afe6a5a 100644
--- a/docs/api/parameters.mdx
+++ b/docs/api/parameters.mdx
@@ -9,10 +9,6 @@ Parameters are static metadata used to configure your [stories](../get-started/w
 
 ## Story parameters
 
-<div class="aside">
-  ℹ️ Parameters specified at the story level will [override](#parameter-inheritance) those specified at the project level and meta (component) level.
-</div>
-
 Parameters specified at the story level apply to that story only. They are defined in the `parameters` property of the story (named export):
 
 {/* prettier-ignore-start */}
@@ -21,11 +17,11 @@ Parameters specified at the story level apply to that story only. They are defin
 
 {/* prettier-ignore-end */}
 
-## Meta parameters
+<Callout variant="info">
+  Parameters specified at the story level will [override](#parameter-inheritance) those specified at the project level and meta (component) level.
+</Callout>
 
-<div class="aside">
-  ℹ️ Parameters specified at the meta (component) level will [override](#parameter-inheritance) those specified at the project level.
-</div>
+## Meta parameters
 
 Parameter's specified in a [CSF](../writing-stories/index.mdx#component-story-format-csf) file's meta configuration apply to all stories in that file. They are defined in the `parameters` property of the `meta` (default export):
 
@@ -35,6 +31,10 @@ Parameter's specified in a [CSF](../writing-stories/index.mdx#component-story-fo
 
 {/* prettier-ignore-end */}
 
+<Callout variant="info">
+  Parameters specified at the meta (component) level will [override](#parameter-inheritance) those specified at the project level.
+</Callout>
+
 ## Project parameters
 
 Parameters specified at the project (global) level apply to **all stories** in your Storybook. They are defined in the `parameters` property of the default export in your `.storybook/preview.js|ts` file:
@@ -172,7 +172,6 @@ All other parameters are contributed by addons. The [essential addon's](../essen
 * [Backgrounds](../essentials/backgrounds.mdx#parameters)
 * [Controls](../essentials/controls.mdx#parameters)
 * [Highlight](../essentials/highlight.mdx#parameters)
-* [Interactions](../essentials/interactions.mdx#parameters)
 * [Measure & Outline](../essentials/measure-and-outline.mdx#parameters)
 * [Viewport](../essentials/viewport.mdx#parameters)
 
@@ -186,15 +185,13 @@ When specifying parameters, they are merged together in order of increasing spec
 2. Meta (component) parameters
 3. Story parameters
 
-<div class="aside">
-  ℹ️ Parameters are **merged**, so objects are deep-merged, but arrays and other properties are overwritten.
-</div>
+<Callout variant="info">
+  Parameters are **merged**, so objects are deep-merged, but arrays and other properties are overwritten.
+</Callout>
 
 In other words, the following specifications of parameters:
 
-```js
-// .storybook/preview.js|ts
-
+```js title=".storybook/preview.js|ts"
 const preview = {
   // 👇 Project-level parameters
   parameters: {
@@ -209,9 +206,7 @@ const preview = {
 export default preview;
 ```
 
-```js
-// Dialog.stories.js|ts
-
+```js title="Dialog.stories.js|ts"
 const meta = {
   component: Dialog,
   // 👇 Meta-level parameters
diff --git a/docs/configure/environment-variables.mdx b/docs/configure/environment-variables.mdx
index 1403cc371c69..894c5b60e20a 100644
--- a/docs/configure/environment-variables.mdx
+++ b/docs/configure/environment-variables.mdx
@@ -40,7 +40,7 @@ You can also access these variables in your custom `<head>`/`<body>` using the s
   If using the environment variables as attributes or values in JavaScript, you may need to add quotes, as the value will be inserted directly, for example: `<link rel="stylesheet" href="%STORYBOOK_STYLE_URL%" />`.
 </Callout>
 
-### Using .env files
+## Using .env files
 
 You can also use `.env` files to change Storybook's behavior in different modes. For example, if you add a `.env` file to your project with the following:
 
@@ -57,7 +57,7 @@ Then you can access this environment variable anywhere, even within your stories
 {/* prettier-ignore-end */}
 
 <IfRenderer renderer={['html', 'react', 'qwik', 'preact','svelte', 'solid', 'vue', 'web-components' ]}>
-  #### With Vite
+  ### With Vite
 
   Out of the box, Storybook provides a [Vite builder](../builders/vite.mdx), which does not output Node.js globals like `process.env`. To access environment variables in Storybook (e.g., `STORYBOOK_`, `VITE_`), you can use `import.meta.env`. For example:
 
@@ -76,7 +76,7 @@ You can also pass these environment variables when you are [building your Storyb
 
 Then they'll be hardcoded to the static version of your Storybook.
 
-### Using Storybook configuration
+## Using Storybook configuration
 
 Additionally, you can extend your Storybook configuration file (i.e., [`.storybook/main.js|.ts`](../configure/index.mdx#configure-story-rendering)) and provide a configuration field that you can use to define specific variables (e.g., API URLs). For example:
 
@@ -90,11 +90,11 @@ When Storybook loads, it will enable you to access them in your stories similar
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="my-component-env-var-config.md" usesCsf3 csf2Path="configure/environment-variables#snippet-my-component-env-var-config" />
+<CodeSnippets path="my-component-env-var-config.md" />
 
 {/* prettier-ignore-end */}
 
-### Using environment variables to choose the browser
+## Using environment variables to choose the browser
 
 Storybook allows you to choose the browser you want to preview your stories. Either through a `.env` file entry or directly in your `storybook` script.
 
diff --git a/docs/configure/integration/frameworks-feature-support.mdx b/docs/configure/integration/frameworks-feature-support.mdx
index aead9b265217..006673db19f1 100644
--- a/docs/configure/integration/frameworks-feature-support.mdx
+++ b/docs/configure/integration/frameworks-feature-support.mdx
@@ -1,5 +1,6 @@
 ---
 title: 'Feature support for frameworks'
+hideRendererSelector: true
 sidebar:
   order: 2
   title: Feature support for frameworks
@@ -117,4 +118,4 @@ To align the Storybook ecosystem with the current state of frontend development,
 | ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | [Knobs](https://github.com/storybookjs/addon-knobs)                                | The Knobs addon was officially deprecated with the release of Storybook 6.3 and is no longer actively maintained. We recommend using the [controls](../../essentials/controls.mdx) instead.                                                                                                           |
 | [Storyshots](../../writing-tests/snapshot-testing/storyshots-migration-guide.mdx)  | The Storyshots addon was officially deprecated with the release of Storybook 7.6, is no longer actively maintained and was removed in Storybook 8. See the [migration guide](../../writing-tests/snapshot-testing/storyshots-migration-guide.mdx) for the available alternatives.                     |
-| StoriesOf                                                                          | The `storiesOf` API was officially removed with the release of Storybook 8 and is no longer maintained. We recommend using the [CSF API](../../api/csf.mdx) instead for writing stories.<br />See the [migration guide](../../migration-guide/index.mdx#storiesof-to-csf) for more information.       |
+| StoriesOf                                                                          | The `storiesOf` API was officially removed with the release of Storybook 8 and is no longer maintained. We recommend using the [CSF API](../../api/csf.mdx) instead for writing stories.<br />See the [migration guide](../../migration-guide/index.mdx#major-breaking-changes) for more information. |
diff --git a/docs/configure/integration/images-and-assets.mdx b/docs/configure/integration/images-and-assets.mdx
index c500de8d210c..9e0130ae3834 100644
--- a/docs/configure/integration/images-and-assets.mdx
+++ b/docs/configure/integration/images-and-assets.mdx
@@ -7,7 +7,7 @@ sidebar:
 
 Components often rely on images, videos, fonts, and other assets to render as the user expects. There are many ways to use these assets in your story files.
 
-### Import assets into stories
+## Import assets into stories
 
 You can import any media assets by importing (or requiring) them. It works out of the box with our default config. But, if you are using a custom webpack config, you’ll need to add the [file loader](https://webpack.js.org/loaders/) to handle the required files.
 
@@ -15,11 +15,11 @@ Afterward, you can use any asset in your stories:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="component-story-static-asset-with-import.md" usesCsf3 csf2Path="configure/images-and-assets#snippet-component-story-static-asset-with-import" />
+<CodeSnippets path="component-story-static-asset-with-import.md" />
 
 {/* prettier-ignore-end */}
 
-### Serving static files via Storybook Configuration
+## Serving static files via Storybook Configuration
 
 We recommend serving static files via Storybook to ensure that your components always have the assets they need to load. We recommend this technique for assets that your components often use, like logos, fonts, and icons.
 
@@ -35,7 +35,7 @@ Here `../public` is your static directory. Now use it in a component or story li
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="component-story-static-asset-without-import.md" usesCsf3 csf2Path="configure/images-and-assets#snippet-component-story-static-asset-without-import" />
+<CodeSnippets path="component-story-static-asset-without-import.md" />
 
 {/* prettier-ignore-end */}
 
@@ -55,17 +55,17 @@ Or even use a configuration object to define the directories:
 
 {/* prettier-ignore-end */}
 
-### Reference assets from a CDN
+## Reference assets from a CDN
 
 Upload your files to an online CDN and reference them. In this example, we’re using a placeholder image service.
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="component-story-static-asset-cdn.md" usesCsf3 csf2Path="configure/images-and-assets#snippet-component-story-static-asset-cdn" />
+<CodeSnippets path="component-story-static-asset-cdn.md" />
 
 {/* prettier-ignore-end */}
 
-### Absolute versus relative paths
+## Absolute versus relative paths
 
 Sometimes, you may want to deploy your Storybook into a subpath, like `https://example.com/storybook`.
 
@@ -75,7 +75,7 @@ If you load static content via importing, this is automatic, and you do not have
 
 Suppose you are serving assets in a [static directory](#serving-static-files-via-storybook-configuration) along with your Storybook. In that case, you need to use relative paths to load images or use the base element.
 
-### Referencing Fonts in Stories
+## Referencing Fonts in Stories
 
 After configuring Storybook to serve assets from your static folder, you can reference those assets in Storybook. For example, you can reference and apply a custom font to your stories. To do this, create a [`preview-head.html`](../story-rendering.mdx) file inside the configuration directory (i.e., `.storybook`) and add a `<link />` tag to reference your font.
 
diff --git a/docs/configure/story-layout.mdx b/docs/configure/story-layout.mdx
index c17f520d3579..deac6de3b8e7 100644
--- a/docs/configure/story-layout.mdx
+++ b/docs/configure/story-layout.mdx
@@ -41,6 +41,6 @@ Or even apply it to specific stories like so:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="storybook-story-layout-param.md" usesCsf3 csf2Path="configure/story-layout#snippet-storybook-story-layout-param" />
+<CodeSnippets path="storybook-story-layout-param.md" />
 
 {/* prettier-ignore-end */}
diff --git a/docs/configure/story-rendering.mdx b/docs/configure/story-rendering.mdx
index dccc3e518d1e..3749a925e9c8 100644
--- a/docs/configure/story-rendering.mdx
+++ b/docs/configure/story-rendering.mdx
@@ -14,8 +14,7 @@ Code executed in the preview file (`.storybook/preview.js|ts`) runs for every st
 <If notRenderer={['angular', 'vue']}>
   Here's an example of how you might use the preview file to initialize a library that must run before your components render:
 
-  ```ts
-  // .storybook/preview.ts
+  ```ts title=".storybook/preview.ts"
   // Replace your-renderer with the renderer you are using (e.g., react, vue3)
   import { Preview } from '@storybook/your-renderer';
 
diff --git a/docs/configure/styling-and-css.mdx b/docs/configure/styling-and-css.mdx
index ceebd2bb6957..70c0b4303c3f 100644
--- a/docs/configure/styling-and-css.mdx
+++ b/docs/configure/styling-and-css.mdx
@@ -111,7 +111,7 @@ sidebar:
 
   Don't forget to also add your global styles to your `build-storybook` target in your `angular.json` file. This will ensure that your global styles are included in the static build of your Storybook as well.
 
-  ```json
+  ```json title="angular.json"
   {
     "storybook": {
       "builder": "@storybook/angular:start-storybook",
@@ -162,8 +162,9 @@ sidebar:
 
   For earlier Nx versions (before 14.1.8), your configuration would look like this:
 
-  ```json
-   "build-storybook": {
+  ```json title="project.json"
+  {
+    "build-storybook": {
       "executor": "@nrwl/storybook:build",
       "outputs": ["{options.outputPath}"],
       "options": {
@@ -175,34 +176,37 @@ sidebar:
         "projectBuildConfig": "example-lib:build-storybook",
         "styles": ["apps/example-app/src/styles.scss"]
       }
-    }
+    },
+  }
   ```
 
   Starting with version 14.1.8, Nx uses the Storybook builder directly, which means any configuration supplied to the builder also applies to the NX setup. If you're working with a library, you'll need to configure the styling options ( e.g., preprocessors) inside the `build-storybook` options configuration object. For example:
 
-  ```json
-      "storybook": {
-        "executor": "@storybook/angular:start-storybook",
-        "options": {
-          "configDir": "apps/example-lib/.storybook",
-          "browserTarget": "example-lib:build-storybook",
-        },
+  ```json title="workspace.json"
+  {
+    "storybook": {
+      "executor": "@storybook/angular:start-storybook",
+      "options": {
+        "configDir": "apps/example-lib/.storybook",
+        "browserTarget": "example-lib:build-storybook",
       },
-      "build-storybook": {
-        "executor": "@storybook/angular:build-storybook",
-        "outputs": ["{options.outputPath}"],
-        "options": {
-          "outputDir": "dist/storybook/example-lib",
-          "configDir": "apps/example-lib/.storybook",
-          "browserTarget": "example-lib:build-storybook",
-          "styles": [".storybook/custom-styles.scss"],
-          "stylePreprocessorOptions": {
-            "includePaths": [
-              "libs/design-system/src/lib"
-            ]
-          }
+    },
+    "build-storybook": {
+      "executor": "@storybook/angular:build-storybook",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputDir": "dist/storybook/example-lib",
+        "configDir": "apps/example-lib/.storybook",
+        "browserTarget": "example-lib:build-storybook",
+        "styles": [".storybook/custom-styles.scss"],
+        "stylePreprocessorOptions": {
+          "includePaths": [
+            "libs/design-system/src/lib"
+          ]
         }
       }
+    },
+  }
   ```
 
   When Nx runs, it will load Storybook's configuration and styling based on [`storybook.browserTarget`](https://nx.dev/storybook/extra-topics-for-angular-projects#setting-up-browsertarget).
diff --git a/docs/configure/telemetry.mdx b/docs/configure/telemetry.mdx
index d2333997a7d8..56a6ef8cc707 100644
--- a/docs/configure/telemetry.mdx
+++ b/docs/configure/telemetry.mdx
@@ -1,5 +1,6 @@
 ---
 title: 'Telemetry'
+hideRendererSelector: true
 sidebar:
   order: 3
   title: Telemetry
@@ -127,9 +128,6 @@ Will generate the following output:
       }
     },
     "addons": {
-      "@storybook/addon-links": {
-        "version": "7.1.0"
-      },
       "@storybook/addon-essentials": {
         "version": "7.1.0"
       },
@@ -166,7 +164,7 @@ In the future, we plan to share relevant data with the community through public
 
 ## How to opt-out
 
-You may opt-out of the telemetry by setting Storybook's configuration element `disableTelemetry` to `true`, using the `--disable-telemetry` flag, or setting the environment variable`STORYBOOK_DISABLE_TELEMETRY` to `1`. For example:
+You may opt out of the telemetry within your Storybook configuration by setting the `disableTelemetry` configuration element to `true`.
 
 {/* prettier-ignore-start */}
 
@@ -174,13 +172,29 @@ You may opt-out of the telemetry by setting Storybook's configuration element `d
 
 {/* prettier-ignore-end */}
 
+If necessary, you can also turn off telemetry via the command line with the `--disable-telemetry` flag.
+
+{/* prettier-ignore-start */}
+
+<CodeSnippets path="storybook-disable-telemetry-flag.md" />
+
+{/* prettier-ignore-end */}
+
+Or via the `STORYBOOK_DISABLE_TELEMETRY` environment variable.
+
+{/* prettier-ignore-start */}
+
+<CodeSnippets path="storybook-disable-telemetry-env.md" />
+
+{/* prettier-ignore-end */}
+
 <Callout variant="info" icon="💡">
   There is a `boot` event containing no metadata (used to ensure the telemetry is working). It is sent prior to evaluating your [Storybook configuration file](../api/main-config/main-config.mdx) (i.e., `main.js|ts`), so it is unaffected by the `disableTelemetry` option. If you want to ensure that the event is not sent, use the `STORYBOOK_DISABLE_TELEMETRY` environment variable.
 </Callout>
 
 ## Crash reports (disabled by default)
 
-In addition to general usage telemetry, you may also choose to share crash reports. Storybook will then sanitize the error object (removing all user paths) and append it to the telemetry event. To enable crash reporting, you can set the `enableCrashReports` configuration element to `true`, using the `--enable-crash-reports` flag, or set the `STORYBOOK_ENABLE_CRASH_REPORTS` environment variable to `1`. For example:
+In addition to general usage telemetry, you may also choose to share crash reports. Storybook will then sanitize the error object (removing all user paths) and append it to the telemetry event. To enable crash reporting, you can set the `enableCrashReports` configuration element to `true`.
 
 {/* prettier-ignore-start */}
 
@@ -188,7 +202,23 @@ In addition to general usage telemetry, you may also choose to share crash repor
 
 {/* prettier-ignore-end */}
 
-Generates the following item in the telemetry event:
+You can also enable crash reporting via the command line with the `--enable-crash-reports` flag.
+
+{/* prettier-ignore-start */}
+
+<CodeSnippets path="storybook-telemetry-storybook-enable-crash-reports-flag.md" />
+
+{/* prettier-ignore-end */}
+
+Or by setting the `STORYBOOK_ENABLE_CRASH_REPORTS` environment variable to `1`.
+
+{/* prettier-ignore-start */}
+
+<CodeSnippets path="storybook-telemetry-storybook-enable-crash-reports-env.md" />
+
+{/* prettier-ignore-end */}
+
+Enabling any of the options will generate the following item in the telemetry event:
 
 {/* prettier-ignore-start */}
 
diff --git a/docs/configure/user-interface/sidebar-and-urls.mdx b/docs/configure/user-interface/sidebar-and-urls.mdx
index 55537246e214..8ee6ecd62f3d 100644
--- a/docs/configure/user-interface/sidebar-and-urls.mdx
+++ b/docs/configure/user-interface/sidebar-and-urls.mdx
@@ -35,7 +35,7 @@ Consider the following story:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="foo-bar-baz-story.md" usesCsf3 csf2Path="configure/sidebar-and-urls#snippet-foo-bar-baz-story" />
+<CodeSnippets path="foo-bar-baz-story.md" />
 
 {/* prettier-ignore-end */}
 
@@ -45,7 +45,7 @@ It is possible to manually set the story's id, which is helpful if you want to r
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="other-foo-bar-story.md" usesCsf3 csf2Path="configure/sidebar-and-urls#snippet-other-foo-bar-story" />
+<CodeSnippets path="other-foo-bar-story.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/contribute/RFC.mdx b/docs/contribute/RFC.mdx
index 32f1aae9b636..d67f71e9a179 100644
--- a/docs/contribute/RFC.mdx
+++ b/docs/contribute/RFC.mdx
@@ -1,5 +1,6 @@
 ---
 title: 'RFC process'
+hideRendererSelector: true
 sidebar:
   order: 1
   title: RFC process
@@ -55,4 +56,4 @@ This RFC process took heavy inspiration from the RFC processes from [Rust](https
 * [Code](./code.mdx) for features and bug fixes
 * [Frameworks](./framework.mdx) to get started with a new framework
 * [Documentation](./documentation/documentation-updates.mdx) for documentation improvements, typos, and clarifications
-* [Examples](./documentation/new-snippets.mdx) for new snippets and examples
+* [Examples](./documentation/new-snippets.mdx) for new snippets
diff --git a/docs/contribute/code.mdx b/docs/contribute/code.mdx
index e3b2e3bd0ceb..51a74533afde 100644
--- a/docs/contribute/code.mdx
+++ b/docs/contribute/code.mdx
@@ -1,5 +1,6 @@
 ---
 title: 'Code contributions'
+hideRendererSelector: true
 sidebar:
   order: 2
   title: Code
@@ -10,7 +11,7 @@ Contribute a new feature or bug fix to [Storybook's monorepo](https://github.com
 ## Prerequisites
 
 * Ensure you have Node version 18 installed (suggestion: v18.16.0).
-* Ensure if you are using Windows to use the Windows Subsystem for Linux (WSL).
+* If you're working with Windows, all commands should be run in a terminal with administrator privileges.
 
 ## Initial setup
 
@@ -206,7 +207,7 @@ npx storybook@next link --local /path/to/local-repro-directory
 
 ## Developing a template
 
-The first step is to add an entry to `code/lib/cli/src/sandbox-templates.ts`, which is the master list of all repro templates:
+The first step is to add an entry to `code/lib/cli-storybook/src/sandbox-templates.ts`, which is the master list of all repro templates:
 
 ```ts
 'cra/default-js': {
@@ -264,4 +265,4 @@ Once the PR is merged, the template will be generated on a nightly cadence and y
 * Code for features and bug fixes
 * [Frameworks](./framework.mdx) to get started with a new framework
 * [Documentation](./documentation/documentation-updates.mdx) for documentation improvements, typos, and clarifications
-* [Examples](./documentation/new-snippets.mdx) for new snippets and examples
+* [Examples](./documentation/new-snippets.mdx) for new snippets
diff --git a/docs/contribute/documentation/documentation-updates.mdx b/docs/contribute/documentation/documentation-updates.mdx
index 3e62a5a4d225..51e38f8a523a 100644
--- a/docs/contribute/documentation/documentation-updates.mdx
+++ b/docs/contribute/documentation/documentation-updates.mdx
@@ -1,5 +1,6 @@
 ---
 title: 'Documentation updates'
+hideRendererSelector: true
 sidebar:
   order: 1
   title: Content
@@ -31,4 +32,4 @@ In the Storybook repository, create a pull request that describes changes and in
 * [Code](../code.mdx) for features and bug fixes
 * [Frameworks](../framework.mdx) to get started with a new framework
 * Documentation for documentation improvements, typos, and clarifications
-* [Examples](./new-snippets.mdx) for new snippets and examples
+* [Examples](./new-snippets.mdx) for new snippets
diff --git a/docs/contribute/documentation/new-snippets.mdx b/docs/contribute/documentation/new-snippets.mdx
index 1a7cf0c0b601..b2bf813c91a5 100644
--- a/docs/contribute/documentation/new-snippets.mdx
+++ b/docs/contribute/documentation/new-snippets.mdx
@@ -1,5 +1,6 @@
 ---
 title: 'Code snippets contributions'
+hideRendererSelector: true
 sidebar:
   order: 2
   title: Code snippets
@@ -9,129 +10,288 @@ Add or update the code snippets in the documentation. This page outlines how the
 
 ## Documented frameworks
 
-Storybook maintains code snippets for a [variety of frameworks](../../configure/integration/frameworks-feature-support.mdx). We try to keep them up to date as framework APIs evolve. But it's tricky to keep track of every API change in every framework.
+Storybook maintains code snippets for a [variety of frameworks](../../configure/integration/frameworks-feature-support.mdx). We try to keep them up to date as framework APIs evolve. But keeping track of every API change in every framework is tricky.
 
-We welcome community contributions to the code snippets. Here's a matrix of the frameworks we have snippets for. Help us add snippets for your favorite framework.
+We welcome community contributions to the code snippets. Here's a matrix of the frameworks for which we have snippets. Help us add snippets for your favorite framework.
 
-| React                                                                        | Vue 3                                                                      | Angular                                                                        | Web Components                                                                        | Svelte                                                                        | Solid                                                                        | Ember | HTML | Preact |
-| ---------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | ----- | ---- | ------ |
-| [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/react) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/vue) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/angular) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/web-components) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/svelte) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/solid) | ❌    | ❌   | ❌     |
 
-## Setup
+| React  | Vue 3 | Angular   | Web Components | Svelte | Solid  | Ember | HTML | Preact | Qwik |
+| ------ | ----- | --------- | ---------------|--------|--------|-------|------| -------|------|
+| ✅     | ✅    | ✅        | ✅             | ✅     | ✅     | ❌    | ❌   | ❌     | ❌  |
 
-Assuming you've already followed the [local environment guide](../code.mdx#initial-setup), the first thing you need to do is create a branch on your local Storybook monorepo by running the following command:
 
-```shell
-git checkout -b code-snippets-for-framework
+## Snippet syntax
+
+The code snippets referenced throughout the Storybook documentation are located in the [`docs/_snippets`](https://github.com/storybookjs/storybook/tree/next/docs/_snippets) directory inside individual Markdown files, containing the [supported frameworks](../../configure/integration/frameworks-feature-support.mdx), features and languages (i.e., JavaScript, MDX, TypeScript).
+
+### Example
+
+The following code block demonstrates how to structure a code snippet in the Storybook documentation and the attributes you can use to provide additional context to the code snippet.
+
+{/* prettier-ignore-start */}
+
+````md title="docs/_snippets/button-group-story.md"
+```ts filename="ButtonGroup.stories.ts" renderer="vue" language="ts" tabTitle="3"
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import ButtonGroup from './ButtonGroup.vue';
+
+//👇 Imports the Button stories
+import * as ButtonStories from './Button.stories';
+
+const meta: Meta<typeof ButtonGroup> = {
+ component: ButtonGroup,
+};
+
+export default meta;
+type Story = StoryObj<typeof ButtonGroup>;
+
+export const Pair: Story = {
+  render: (args) => ({
+ components: { ButtonGroup },
+    setup() {
+ return { args };
+    },
+ template: '<ButtonGroup v-bind="args" />',
+  }),
+ args: {
+ buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+ orientation: 'horizontal',
+  },
+};
+``` 
+````
+
+{/* prettier-ignore-end */}
+
+
+## Common attributes for code snippets
+
+Following are the attributes you'll use most often in the Storybook documentation code snippets, as well as a brief explanation of each to help you understand the context in which they are used.
+
+### File name as title
+
+Most code examples should include a file name so readers can understand which file they relate to and where to paste it into their project. For code examples, include the `filename` attribute wrapped with quotation marks to indicate the file name. This is not required if the example relates to a terminal command.
+
+{/* prettier-ignore-start */}
+
+````md title="docs/_snippets/button-stories.md"
+```ts filename="Button.stories.ts"
 ```
+````
 
-Before adding your snippets, open the `docs` folder with your editor of choice. Get familiarized with the documentation, including how the snippets are organized and their contents.
+{/* prettier-ignore-end */}
 
-Then inside the root folder of the Storybook monorepo, run the following command:
+### Language configuration
 
-```shell
-yarn task
+Use the `language` attribute to define the language to which the code snippet applies. The documentation uses this attribute to determine which variant to display (e.g., JavaScript, TypeScript, TypeScript 4.9, MDX).
+
+{/* prettier-ignore-start */}
+
+````md title="docs/_snippets/button-stories.md"
+```ts filename="Button.stories.ts" language="js|ts|ts-4-9|mdx"
 ```
+````
 
-Select the option `Synchronize documentation (sync-docs)` and type the path of your `frontpage` project folder. Now every file change inside the monorepo `docs` folder will be reflected in the frontpage repo at `src/content/docs`.
+{/* prettier-ignore-end */}
 
-### Add your first snippet
+### Framework-specific code
 
-Now that you're familiar with how the documentation is structured, it's time to add the code snippets. First, go to the `docs/snippets/` folder and create a new directory for your framework of choice (e.g., `ember`).
+Use the `renderer` attribute to indicate which of the [supported frameworks](../../configure/integration/frameworks-feature-support.mdx) the code snippet belongs to.
 
-Browse the documentation and look for the code snippets you're willing to contribute. For example, on the [setup page](https://github.com/storybookjs/storybook/blob/next/docs/get-started/setup.mdx), you should see something similar to:
+{/* prettier-ignore-start */}
 
-```jsx
-// /docs/get-started/setup.md
+````md title="docs/_snippets/button-stories.md"
+```ts filename="Button.stories.ts" language="ts" renderer="react|vue|angular|web-components|ember|html|svelte|preact|qwik|solid"
+```
+````
+
+{/* prettier-ignore-end */}
+
+Alternatively, if you're documenting examples that apply to multiple frameworks, use the `renderer` attribute with the `common` value to indicate that the code snippet is framework-agnostic.
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets
-  paths={[
-    'react/your-component.js.mdx',
-    'react/your-component.ts.mdx',
-    'angular/your-component.ts.mdx',
-    'vue/your-component.3.js.mdx',
-    'svelte/your-component.js.mdx',
-    'web-components/your-component.js.mdx',
-    'solid/your-component.js.mdx',
-    'solid/your-component.ts.mdx',
-  ]}
-/>
+````md title="docs/_snippets/button-stories.md"
+```ts filename="Button.stories.ts" language="ts" renderer="common"
+```
+````
 
 {/* prettier-ignore-end */}
+
+### Package manager configuration
+
+Use the `packageManager` attribute to configure the package manager used in the example from the following options: `npm`, `yarn`, or `pnpm`.
+
+
+{/* prettier-ignore-start */}
+
+````md title="docs/_snippets/storybook-run-dev.md"
+```shell renderer="common" language="js" packageManager="npm|yarn|pnpm"
 ```
+````
 
-Create the file `ember/your-component.js.mdx`, similar to the other frameworks, and reference it.
+{/* prettier-ignore-end */}
 
-```jsx
-// /docs/get-started/setup.md
+### Working with multiple snippets
 
+Use the `tabTitle` attribute to indicate the tab title in which the code snippet will be displayed. This attribute should only be used when multiple examples are in a single code snippet file.
+ 
 {/* prettier-ignore-start */}
 
-<CodeSnippets
-  paths={[
-    'react/your-component.js.mdx',
-    'react/your-component.ts.mdx',
-    'angular/your-component.ts.mdx',
-    'vue/your-component.3.js.mdx',
-    'svelte/your-component.js.mdx',
-    'web-components/your-component.js.mdx',
-    'solid/your-component.js.mdx',
-    'solid/your-component.ts.mdx',
-    'ember/your-component.js.mdx', //👈🏼 The code snippet you created.
-  ]}
-/>
+````md title="docs/_snippets/component-decorator.md"
+```ts filename="YourComponent.stories.ts" language="ts" renderer="common" tabTitle="Story"
+```
+```ts filename=".storybook/preview.ts" language="ts" renderer="common" tabTitle="Storybook configuration"
+```
+````
 
 {/* prettier-ignore-end */}
+
+## Contributing code snippets
+
+You can start contributing to the Storybook documentation by now that you're familiar with how the documentation is organized, the code snippet's structure, and available options. Assuming that you have already set up your [local development environment](../code.mdx#initial-setup) and are ready to contribute, the following steps will guide you through contributing code snippets to the Storybook documentation.
+
+Start by creating a new branch on your local Storybook monorepo with the following command:
+
+{/* prettier-ignore-start */}
+
+```shell
+git checkout -b code-snippets-for-framework
 ```
+  
+{/* prettier-ignore-end */}
 
-<Callout variant="info" icon="💡">
-  Code snippets are divided into various file extensions, if you're contributing a TypeScript file use `.ts.mdx`, or if you're adding JavaScript files use `.js.mdx`.
-</Callout>
+Browse the documentation and look for the code snippets you want to contribute. For example, on the [setup page](https://github.com/storybookjs/storybook/blob/next/docs/get-started/setup.mdx) you should see the following:
+
+{/* prettier-ignore-start */}
+
+ ```jsx title="docs/get-started/setup.mdx"
+{/* prettier-ignore-start */}
+
+<CodeSnippets path="your-component.md" usesCsf3 />
+
+{/* prettier-ignore-end */}
+```
+
+{/* prettier-ignore-end */}
+
+
+Open the file inside the `docs/_snippets` directory and adjust the content to match the code snippet you're willing to contribute. For example:
+
+{/* prettier-ignore-start */}
+
+````md title="docs/_snippets/your-component.md"
+```ts filename="YourComponent.stories.ts" renderer="qwik" language="ts-4-9"
+import type { Meta, StoryObj } from 'storybook-framework-qwik';
+
+import type { YourComponentProps } from './YourComponent';
+
+import { YourComponent } from './YourComponent';
+
+//👇 This default export determines where your story goes in the story list
+const meta = {
+ component: YourComponent,
+} satisfies Meta<YourComponentProps>;
+
+export default meta;
+type Story = StoryObj<YourComponentProps>;
+
+export const FirstStory: Story = {
+  args: {
+  //👇 The args you need here will depend on your component
+  },
+};
+```
+````
+
+{/* prettier-ignore-end */}
 
 Go through the rest of the documentation and repeat the process.
 
-### Preview your work
+## Preview your work
+
+Before submitting your contribution, we encourage you to check your work against the Storybook website. Doing this prevents last-minute issues with the documentation and is also an excellent way for the maintainers to merge faster once you submit the pull request. However, failing to do so will lead one of the maintainers to notify you that your contribution has an issue.
 
-Before submitting your contribution, we advise you to check your work against the Storybook website. Doing this prevents last-minute issues with the documentation and is also an excellent way for the maintainers to merge faster once you submit the pull request. However, failing to do so will lead one of the maintainers to notify you that your contribution has an issue.
+Start by forking the Storybook [website repository](https://github.com/storybookjs/web) and cloning it locally.
 
-Start by forking [frontpage repo](https://github.com/storybookjs/frontpage) and cloning it locally.
+{/* prettier-ignore-start */}
 
 ```shell
-git clone https://github.com/your-username/frontpage.git
+git clone https://github.com/your-username/web.git
 ```
+  
+{/* prettier-ignore-end */}
+
+Navigate to the `web` directory and install the required dependencies.
 
-Navigate to the `frontpage` directory and install the required dependencies with the following command:
+{/* prettier-ignore-start */}
 
 ```shell
-yarn
+npm install
 ```
 
-Next, make sure that you have running the `Synchronize documentation (sync-docs)` task from Storybook monorepo. Then, execute the following command to launch the Storybook website.
+{/* prettier-ignore-end */}
+
+We recommend that you generate a website build first to ensure you can preview your changes locally and verify that everything is working as expected. To do so, run the following command:
+
+{/* prettier-ignore-start */}
 
 ```shell
-yarn start:docs-only
+npm run build:frontpage
 ```
 
-<Callout variant="info" icon="💡">
-  During the start process if there's an issue with the documentation, the process will stop and you'll get a notification.
+{/* prettier-ignore-end */}
+
+<Callout variant="info">
+
+When executed, this command will retrieve the required files needed to successfully build the Storybook website, including current documentation versions (e.g., `6.5`, `7.6`, `8.x`), and copy them to the `apps/frontpage/docs/` directory, organized by version number.
+
 </Callout>
 
-Open a browser window to `http://localhost:8000`, click the Docs link, and select your framework from the dropdown.
+Run the `sync-docs` command to connect the documentation from the Storybook monorepo to the Storybook website. When prompted, provide the path to your local fork of the Storybook monorepo and the documentation version you're working on.
+
+{/* prettier-ignore-start */}
+
+```shell
+npm run sync-docs
+```
+
+{/* prettier-ignore-end */}
+
+Finally, open a new terminal window and run the `dev` command to start the Storybook website.
 
-![Storybook docs with dropdown](../../_assets/contribute/local-storybook-website-dropdown-optimized.png)
+{/* prettier-ignore-start */}
+
+```shell
+npm run dev
+```
+
+{/* prettier-ignore-end */}
+
+If all goes well, you should see the Storybook website running. Open a browser window to `http://localhost:3000`, click the Docs link to open the documentation, and select your framework from the dropdown.
+
+{/* TODO: Record video */}
+
+<Video src="../_assets/contribute/local-storybook-website-dropdown-optimized.mp4" />
 
 Go through the documentation and check your work.
 
 ## Submit your contribution
 
-Finally, commit, push and open a pull request in the Storybook monorepo. Add a clear description of the work you've done, and one of the maintainers will guide you through the merge process.
+Once you have verified that your changes are working as expected, you're ready to create a "Pull Request". This will let the Storybook maintainers know you have some changes to propose. At this point, we can give you feedback and request changes. To help with the review process, we encourage you to add a clear title and description of your work.
+
+
+## Troubleshooting
+
+### Code snippets not displaying
+
+If you're documenting an example that includes the `packageManager` attribute combined with another example, the documentation might not display the code snippets correctly. To avoid this, you can divide the examples into separate files and reference them in the documentation.
 
-**Learn more about contributing to Storybook**
+## Learn more about contributing to Storybook
 
 * [RFC process](../RFC.mdx) for authoring feature requests
 * [Code](../code.mdx) for features and bug fixes
 * [Frameworks](../framework.mdx) to get started with a new framework
 * [Documentation](./documentation-updates.mdx) for documentation improvements, typos, and clarifications
-* [Examples](./new-snippets.mdx) for new snippets and examples
+* Examples for new snippets
\ No newline at end of file
diff --git a/docs/contribute/framework.mdx b/docs/contribute/framework.mdx
index 2b6cce765192..aa7bbba4fc3e 100644
--- a/docs/contribute/framework.mdx
+++ b/docs/contribute/framework.mdx
@@ -1,5 +1,6 @@
 ---
 title: 'Contributing a Storybook framework'
+hideRendererSelector: true
 sidebar:
   order: 4
   title: Frameworks
@@ -40,7 +41,7 @@ Because a framework is a node package, it must contain a `package.json` file. He
 <details>
   <summary><code>package.json</code> template</summary>
 
-  ```json
+  ```json title="package.json"
   {
     "name": "<your-framework-name>",
     "version": "1.0.0",
@@ -151,4 +152,4 @@ Once it's fully tested and released, please let us know about your framework by
 * [Code](./code.mdx) for features and bug fixes
 * Frameworks to get started with a new framework
 * [Documentation](./documentation/documentation-updates.mdx) for documentation improvements, typos, and clarifications
-* [Examples](./documentation/new-snippets.mdx) for new snippets and examples
+* [Examples](./documentation/new-snippets.mdx) for new snippets
diff --git a/docs/contribute/how-to-reproduce.mdx b/docs/contribute/how-to-reproduce.mdx
index 072e57b62057..7f846a5e8a6a 100644
--- a/docs/contribute/how-to-reproduce.mdx
+++ b/docs/contribute/how-to-reproduce.mdx
@@ -1,5 +1,6 @@
 ---
 title: 'Create a reproduction'
+hideRendererSelector: true
 sidebar:
   order: 5
   title: Reproduce
diff --git a/docs/essentials/actions.mdx b/docs/essentials/actions.mdx
index 43033469f701..f2bdf0df2d0c 100644
--- a/docs/essentials/actions.mdx
+++ b/docs/essentials/actions.mdx
@@ -115,4 +115,4 @@ Allows you to create an action that appears in the actions panel of the Storyboo
 
 ## Advanced / legacy usage
 
-There are also some older ways to use actions as documented in the [advanced README](../../addons/actions/ADVANCED.md).
+There are also some older ways to use actions as documented in the [advanced README](https://github.com/storybookjs/storybook/blob/next/code/addons/actions/ADVANCED.md).
diff --git a/docs/essentials/controls.mdx b/docs/essentials/controls.mdx
index 9066e7e4dc63..a3329a9b75e3 100644
--- a/docs/essentials/controls.mdx
+++ b/docs/essentials/controls.mdx
@@ -149,7 +149,7 @@ For instance, suppose you have a `variant` arg on your story that should be `pri
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-controls-primary-variant.md" usesCsf3 csf2Path="essentials/controls#snippet-button-story-controls-primary-variant" />
+<CodeSnippets path="button-story-controls-primary-variant.md" />
 
 {/* prettier-ignore-end */}
 
@@ -161,7 +161,17 @@ It works as long as you type a valid string into the auto-generated text control
 
 We can specify which controls get used by declaring a custom [argType](../api/arg-types.mdx) for the `variant` property. ArgTypes encode basic metadata for args, such as name, description, and defaultValue for an arg. These get automatically filled in by Storybook Docs.
 
-`ArgTypes` can also contain arbitrary annotations, which the user can override. Since `variant` is a property of the component, let's put that annotation on the default export.
+<IfRenderer renderer="svelte">
+
+  `ArgTypes` can also contain arbitrary annotations, which the user can override. Since `variant` is a component property, let's put that annotation on the `defineMeta` function, or the default export if you're using standard CSF.
+
+</IfRenderer>
+
+<If notRenderer="svelte">
+
+  `ArgTypes` can also contain arbitrary annotations, which the user can override. Since `variant` is a component property, let's put that annotation on the default export.
+
+</If>
 
 {/* prettier-ignore-start */}
 
@@ -179,7 +189,7 @@ This replaces the input with a radio group for a more intuitive experience.
 
 ## Custom control type matchers
 
-Controls can automatically be inferred from arg's name with [regex](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp), but currently only for the color picker and date picker controls. If you've used the Storybook CLI to setup your project, it should have automatically created the following defaults in `.storybook/preview.js`:
+Controls can automatically be inferred from arg's name with [regex](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp), but currently only for the color picker and date picker controls. If you've used the Storybook CLI to setup your project, it should have automatically created the following defaults in `.storybook/preview.js|ts`:
 
 | Control   | Default regex                            | Description                                               |
 | --------- | ---------------------------------------- | --------------------------------------------------------- |
@@ -194,27 +204,24 @@ If you haven't used the CLI to set the configuration, or if you want to define y
 
 {/* prettier-ignore-end */}
 
-<IfRenderer renderer={['angular', 'ember', 'html', 'preact', 'qwik', 'react', 'solid', 'vue', 'web-components' ]}>
-  {/* Uncomment once frameworks that support custom templates are enabled to prevent misinformation about the example */}
-
-  ## Fully custom args
+## Fully custom args
 
-  Until now, we only used auto-generated controls based on the component for which we're writing stories. If we are writing [complex stories](../writing-stories/stories-for-multiple-components.mdx), we may want to add controls for args that aren’t part of the component. For example, here's how you could use a `footer` arg to populate a child component:
+Until now, we only used auto-generated controls based on the component for which we're writing stories. If we are writing [complex stories](../writing-stories/stories-for-multiple-components.mdx), we may want to add controls for args that aren’t part of the component. For example, here's how you could use a `footer` arg to populate a child component:
 
-  {/* prettier-ignore-start */}
+{/* prettier-ignore-start */}
 
-  <CodeSnippets path="page-story-slots.md" usesCsf3 csf2Path="writing-stories/args#snippet-page-story-slots" />
+<CodeSnippets path="page-story-slots.md"/>
 
-  {/* prettier-ignore-end */}
+{/* prettier-ignore-end */}
 
-  By default, Storybook will add controls for all args that:
+By default, Storybook will add controls for all args that:
 
   * It infers from the component definition [if your framework supports it](../configure/integration/frameworks-feature-support.mdx).
 
   * Appear in the list of args for your story.
 
-  Using `argTypes`, you can change the display and behavior of each control.
-</IfRenderer>
+Using `argTypes`, you can change the display and behavior of each control.
+
 
 ### Dealing with complex values
 
@@ -224,7 +231,7 @@ One way to deal with this is to use primitive values (e.g., strings) as arg valu
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="component-story-custom-args-complex.md" usesCsf3 csf2Path="essentials/controls#snippet-component-story-custom-args-complex" />
+<CodeSnippets path="component-story-custom-args-complex.md" />
 
 {/* prettier-ignore-end */}
 
@@ -240,6 +247,16 @@ Note that both `mapping` and `control.labels` don't have to be exhaustive. If th
 
 ## Creating and editing stories from controls
 
+<If renderer="svelte">
+
+  <Callout variant="info">
+
+    This feature is not supported with the Svelte CSF. To opt-in to this feature with Svelte, you must use Storybook's [Component Story Format](../api/csf.mdx).
+  
+  </Callout>
+  
+</If>
+
 The Controls addon allows you to create or edit stories, directly from the Controls panel.
 
 ### Create a new story
@@ -262,7 +279,7 @@ You can also update a control's value, then save the changes to the story. The s
 
 ### Disable creating and editing of stories
 
-If you don't want to allow the creation or editing of stories from the Controls panel, you can disable this feature by setting the `disableSaveFromUI` parameter to `true` in the `parameters.controls` parameter in your `.storybook/preview.js` file.
+If you don't want to allow the creation or editing of stories from the Controls panel, you can disable this feature by setting the `disableSaveFromUI` parameter to `true` in the `parameters.controls` parameter in your `.storybook/preview.js|ts` file.
 
 ## Configuration
 
@@ -315,7 +332,7 @@ Controls supports the following configuration [parameters](../writing-stories/pa
 
 Since Controls is built on the same engine as Storybook Docs, it can also show property documentation alongside your controls using the expanded parameter (defaults to false). This means you embed a complete [`Controls`](../api/doc-blocks/doc-block-controls.mdx) doc block in the controls panel. The description and default value rendering can be [customized](#fully-custom-args) like the doc block.
 
-To enable expanded mode globally, add the following to [`.storybook/preview.js`](../configure/index.mdx#configure-story-rendering):
+To enable expanded mode globally, add the following to [`.storybook/preview.js|ts`](../configure/index.mdx#configure-story-rendering):
 
 {/* prettier-ignore-start */}
 
@@ -349,7 +366,7 @@ Consider the following story snippets:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="component-story-disable-controls-regex.md" usesCsf3 csf2Path="essentials/controls#snippet-component-story-disable-controls-regex" />
+<CodeSnippets path="component-story-disable-controls-regex.md" />
 
 {/* prettier-ignore-end */}
 
@@ -431,14 +448,18 @@ It may also contain at most one of the following operators:
 
 If no operator is provided, that is equivalent to `{ truthy: true }`.
 
-<IfRenderer renderer={[ 'angular', 'ember', 'web-components' ]}>
-  ## Troubleshooting
+## Troubleshooting
 
+<IfRenderer renderer={['angular', 'ember', 'web-components']}>
   ### Controls are not automatically generated for my component
 
   If you're working with Angular, Ember, or Web Components, automatic argTypes and controls inference will not work out of the box and requires you to provide [additional configuration](#choosing-the-control-type) to allow Storybook to retrieve the necessary metadata and generate the needed argTypes and controls for your stories. However, if you need additional customization, you can always [define them manually](#fully-custom-args).
 </IfRenderer>
 
+### The controls are not updating the story within the auto-generated documentation
+
+If you turned off inline rendering for your stories via the [`inline`](../api/doc-blocks/doc-block-story.mdx#inline) configuration option, you would run into a situation where the associated controls are not updating the story within the documentation page. This is a known limitation of the current implementation and will be addressed in a future release.
+
 ## API
 
 ### Parameters
diff --git a/docs/essentials/interactions.mdx b/docs/essentials/interactions.mdx
index 237f79c45435..c78fff233220 100644
--- a/docs/essentials/interactions.mdx
+++ b/docs/essentials/interactions.mdx
@@ -55,7 +55,7 @@ Make sure to import the Storybook wrappers for Vitest and Testing Library via `@
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="storybook-interactions-play-function.md" usesCsf3 csf2Path="essentials/interactions#snippet-storybook-interactions-play-function" />
+<CodeSnippets path="storybook-interactions-play-function.md" />
 
 {/* prettier-ignore-end */}
 
@@ -68,17 +68,3 @@ Any `args` that have been marked as an Action, either using the [argTypes annota
 <Callout variant="info">
   To mock functions in your Storybook stories for reliable and isolated component testing, use the named `fn` import from `@storybook/test`.
 </Callout>
-
-## API
-
-### Parameters
-
-This addon contributes the following [parameters](../writing-stories/parameters.mdx) to Storybook, under the `interactions` namespace:
-
-#### `disable`
-
-Type: `boolean`
-
-Disable this addon's behavior. If you wish to disable this addon for the entire Storybook, you should do so when registering `addon-essentials`. See the [essential addon's docs](../essentials/index.mdx#disabling-addons) for more information.
-
-This parameter is most useful to allow overriding at more specific levels. For example, if this parameter is set to `true` at the project level, it could then be re-enabled by setting it to `false` at the meta (component) or story level.
diff --git a/docs/essentials/toolbars-and-globals.mdx b/docs/essentials/toolbars-and-globals.mdx
index 69fc41f1b1b6..66a01f13ceac 100644
--- a/docs/essentials/toolbars-and-globals.mdx
+++ b/docs/essentials/toolbars-and-globals.mdx
@@ -150,7 +150,7 @@ Using the example above, you can modify any story to retrieve the **Locale** `gl
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="my-component-story-use-globaltype.md" usesCsf3 csf2Path="essentials/toolbars-and-globals#snippet-my-component-story-use-globaltype" />
+<CodeSnippets path="my-component-story-use-globaltype.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/faq.mdx b/docs/faq.mdx
index 5bfab8ad93d1..9d57f40974e4 100644
--- a/docs/faq.mdx
+++ b/docs/faq.mdx
@@ -13,9 +13,9 @@ Storybook can be set up for both single-project and multi-project Angular worksp
 
 ## How can I opt-out of Angular Ivy?
 
-In case you are having trouble with Angular Ivy you can deactivate it in your `main.js`:
+In case you are having trouble with Angular Ivy you can deactivate it in your `main.js|ts`:
 
-```javascript
+```js title=".storybook/main.js|ts"
 export default {
   stories: [
     /* ... */
@@ -36,7 +36,7 @@ export default {
 
 In case you postinstall ngcc, you can disable it:
 
-```javascript
+```js title=".storybook/main.js|ts"
 export default {
   stories: [
     /* ... */
@@ -71,9 +71,9 @@ npm test -- --coverage --collectCoverageFrom='["src/**/*.{js,jsx}","!src/**/stor
 
 ## How do I setup Storybook to share Webpack configuration with Next.js?
 
-You can generally reuse Webpack rules by placing them in a file that is `require()`-ed from both your `next.config.js` and your `.storybook/main.js` files. For example:
+You can generally reuse Webpack rules by placing them in a file that is `require()`-ed from both your `next.config.js` and your `.storybook/main.js|ts` files. For example:
 
-```js
+```js title=".storybook/main.js|ts"
 export default {
   webpackFinal: async (baseConfig) => {
     const nextConfig = require('/path/to/next.config.js');
@@ -105,9 +105,9 @@ To fix this, you can wrap the package name inside your Storybook configuration f
 
 If your installed React Version equals or is higher than 18.0.0, the new React Root API is automatically used and the newest React [concurrent features](https://reactjs.org/docs/concurrent-mode-intro.html) can be used.
 
-You can opt-out from the new React Root API by setting the following property in your `.storybook/main.js` file:
+You can opt-out from the new React Root API by setting the following property in your `.storybook/main.js|ts` file:
 
-```js
+```js title=".storybook/main.js|ts"
 export default {
   framework: {
     name: '@storybook/react-webpack5',
@@ -134,11 +134,9 @@ A common error is that an addon tries to access the "channel", but the channel i
 
 ## Why aren't Controls visible in the Canvas panel but visible in Docs?
 
-If you're adding Storybook's dependencies manually, make sure you include the [`@storybook/addon-controls`](https://www.npmjs.com/package/@storybook/addon-controls) dependency in your project and reference it in your `.storybook/main.js` as follows:
-
-```js
-// .storybook/main.js
+If you're adding Storybook's dependencies manually, make sure you include the [`@storybook/addon-controls`](https://www.npmjs.com/package/@storybook/addon-controls) dependency in your project and reference it in your `.storybook/main.js|ts` as follows:
 
+```js title=".storybook/main.js|ts"
 export default {
   addons: ['@storybook/addon-controls'],
 };
@@ -160,9 +158,7 @@ If you're in a [Storybook composition](./sharing/storybook-composition.mdx) scen
 
 Introduce a single `.mdx` docs page (addon-essentials or addon-docs required), that serves as an Introduction page, like so:
 
-```mdx
-{/* Introduction.mdx */}
-
+```mdx title="Introduction.mdx"
 # Welcome
 
 Some description here
@@ -170,8 +166,7 @@ Some description here
 
 And then refer to it in your Storybook config file:
 
-```ts
-// .storybook/main.js
+```ts title=".storybook/main.js|ts"
 const config = {
   // define at least one local story/page here
   stories: ['../Introduction.mdx'],
@@ -301,7 +296,7 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S
 |                  | CLI options                                     | [See current documentation](./api/cli-options.mdx)                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options)                                                                                                                                   | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options)                       |
 
 <Callout variant="info">
-  If you have stories written with the older `storiesOf` format, it was removed in Storybook 8.0 and is no longer maintained. We recommend that you migrate your stories to CSF. See the [migration guide](./migration-guide/index.mdx#storiesof-to-csf) for more information. However, if you need, you can still access the old `storiesOf` [documentation](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/formats/storiesof-api/index.md) for reference.
+  If you have stories written with the older `storiesOf` format, it was removed in Storybook 8.0 and is no longer maintained. We recommend that you migrate your stories to CSF. See the [migration guide](./migration-guide/index.mdx#major-breaking-changes) for more information. However, if you need, you can still access the old `storiesOf` [documentation](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/formats/storiesof-api/index.md) for reference.
 </Callout>
 
 ## What icons are available for my toolbar or my addon?
@@ -345,7 +340,7 @@ Writing documentation with MDX can be troublesome, especially regarding how your
 
 {/* prettier-ignore-start */}
 
-```mdx
+```mdx title="Example.mdx"
 <style>{`
   .class1 {
     ...
@@ -363,7 +358,7 @@ But this will work:
 
 {/* prettier-ignore-start */}
 
-```mdx
+```mdx title="Example.mdx"
 <style>
   {`
     .class1 {
@@ -385,9 +380,7 @@ See the following [issue](https://github.com/mdx-js/mdx/issues/1945) for more in
 
 If you're working with Vue 3, you'll need to install [`@vue/apollo-composable`](https://www.npmjs.com/package/@vue/apollo-composable). With Svelte, you'll need to install [`@rollup/plugin-replace`](https://www.npmjs.com/package/@rollup/plugin-replace) and update your `rollup.config` file to the following:
 
-```js
-// rollup.config
-
+```js title="rollup.config.js"
 // Boilerplate imports
 
 import replace from '@rollup/plugin-replace';
@@ -424,10 +417,6 @@ Yes, check the [addon's examples](https://github.com/mswjs/msw-storybook-addon/t
 
 No, currently, the MSW addon only has support for GraphQL queries. If you're interested in including this feature, open an issue in the [MSW addon repository](https://github.com/mswjs/msw-storybook-addon) and follow up with the maintainer.
 
-## How can my code detect if it is running in Storybook?
-
-You can do this by checking for the `IS_STORYBOOK` global variable, which will equal `true` when running in Storybook. The environment variable `process.env.STORYBOOK` is also set to `true`.
-
 ## Why are my stories not showing up correctly when using certain characters?
 
 Storybook allows you to use most characters while naming your stories. Still, specific characters (e.g., `#`) can lead to issues when Storybook generates the internal identifier for the story, leading to collisions and incorrectly outputting the correct story. We recommend using such characters sparsely.
@@ -444,9 +433,7 @@ If you are using `argTypes.defaultValue` to fix the above, you no longer need to
 
 Additionally, suppose you were using `argTypes.defaultValue` or relying on inference to set a default value for an arg. In that case, you should define the arg's value at the component level instead:
 
-```js
-// MyComponent.stories.js
-
+```js title="MyComponent.stories.js"
 export default {
   component: MyComponent,
   args: {
@@ -458,9 +445,7 @@ export default {
 
 For Storybook's Docs, you can manually configure the displayed value by configuring the `table.defaultValue` setting:
 
-```js
-// MyComponent.stories.js
-
+```js title="MyComponent.stories.js"
 export default {
   component: MyComponent,
   argTypes: {
diff --git a/docs/get-started/browse-stories.mdx b/docs/get-started/browse-stories.mdx
index 1cf04a1c9be3..bb835c97d6a3 100644
--- a/docs/get-started/browse-stories.mdx
+++ b/docs/get-started/browse-stories.mdx
@@ -10,7 +10,7 @@ Last chapter, we learned that stories correspond with discrete component states.
 
 ## Sidebar and Canvas
 
-A `*.stories.js` file defines all the stories for a component. Each story has a corresponding sidebar item. When you click on a story, it renders in the Canvas an isolated preview iframe.
+A `*.stories.js|ts|svelte` file defines all the stories for a component. Each story has a corresponding sidebar item. When you click on a story, it renders in the Canvas an isolated preview iframe.
 
 <Video src="../_assets/get-started/example-browse-all-stories-optimized.mp4" />
 
diff --git a/docs/get-started/frameworks/angular.mdx b/docs/get-started/frameworks/angular.mdx
index 57d2408b6c2c..f001ec6a8b92 100644
--- a/docs/get-started/frameworks/angular.mdx
+++ b/docs/get-started/frameworks/angular.mdx
@@ -11,7 +11,7 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
 * 🎛️ Compodoc integration
 * 💫 and more!
 
-<If notRenderer={'angular'}>
+<If notRenderer="angular">
   <Callout variant="info">
     Storybook for Angular is only supported in [Angular](?renderer=angular) projects.
   </Callout>
@@ -19,10 +19,10 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={'angular'}>
+<If renderer="angular">
   ## Requirements
 
-  * Angular ≥ 15.0 \< 19.0
+  * Angular ≥ 15.0 \< 20.0
   * Webpack ≥ 5.0
   * Storybook ≥ 8.0
 
@@ -74,16 +74,11 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
 
   Finally, update your `angular.json` to include the Storybook builder:
 
-  ```jsonc
-  // angular.json
+  ```jsonc title="angular.json"
   {
-    ...
     "projects": {
-      ...
       "your-project": {
-        ...
         "architect": {
-          ...
           "storybook": {
             "builder": "@storybook/angular:start-storybook",
             "options": {
@@ -115,7 +110,7 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
 
   ## Run Storybook
 
-  To run Storybook for a particular project, please run:
+  To run Storybook for a particular project, please run the following:
 
   ```sh
   ng run <your-project>:storybook
@@ -131,11 +126,11 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
 
   ## Setup Compodoc
 
-  You can include JSDoc comments above components, directives, and other parts of your Angular code to include documentation for those elements. Compodoc uses these comments to [generate documentation](../../writing-docs/autodocs.mdx) for your application. In Storybook, it is useful to add explanatory comments above `@Inputs` and `@Outputs`, since these are the main elements that Storybook displays in its user interface. The `@Inputs` and `@Outputs` are the elements that you can interact with in Storybook, such as [controls](../../essentials/controls.mdx).
+  You can include JSDoc comments above components, directives, and other parts of your Angular code to include documentation for those elements. Compodoc uses these comments to [generate documentation](../../writing-docs/autodocs.mdx) for your application. In Storybook, it is useful to add explanatory comments above `@Inputs` and `@Outputs`, since these are the main elements that Storybook displays in its user interface. The `@Inputs` and `@Outputs` are elements you can interact with in Storybook, such as [controls](../../essentials/controls.mdx).
 
   ### Automatic setup
 
-  When installing Storybook via `npx storybook@latest init`, you will be given the option to set up Compodoc automatically.
+  When installing Storybook via `npx storybook@latest init`, you can set up Compodoc automatically.
 
   ### Manual setup
 
@@ -149,20 +144,14 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
 
   Add the following option to your Storybook Builder:
 
-  ```jsonc
-  // angular.json
+  ```jsonc title="angular.json"
   {
-    ...
     "projects": {
-      ...
       "your-project": {
-        ...
         "architect": {
-          ...
           "storybook": {
             "builder": "@storybook/angular:start-storybook",
             "options": {
-              ...
               // 👇 Add these
               "compodoc": true,
               "compodocArgs": [
@@ -177,7 +166,6 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
           "build-storybook": {
             "builder": "@storybook/angular:build-storybook",
             "options": {
-              ...
               // 👇 Add these
               "compodoc": true,
               "compodocArgs": [
@@ -194,25 +182,27 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
   }
   ```
 
-  Go to your `.storybook/preview.js` and add the following:
+  Go to your `.storybook/preview.ts` and add the following:
+
+  ```ts title=".storybook/preview.ts"
+  import type { Preview } from '@storybook/angular';
 
-  ```js
-  // .storybook/preview.js
   // 👇 Add these
   import { setCompodocJson } from '@storybook/addon-docs/angular';
   import docJson from '../documentation.json';
   setCompodocJson(docJson);
 
-  // ... rest of file
+  const preview: Preview = {};
+  export default preview;
   ```
 
   ## `applicationConfig` decorator
 
-  If your component relies on application-wide providers, like the ones defined by BrowserAnimationsModule or any other modules which use the forRoot pattern to provide a ModuleWithProviders, you can apply the `applicationConfig` [decorator](../../writing-stories/decorators.mdx) to all stories for that component. This will provide them to the [bootstrapApplication function](https://angular.io/guide/standalone-components#configuring-dependency-injection), which is used to bootstrap the component in Storybook.
+  If your component relies on application-wide providers, like the ones defined by [`BrowserAnimationsModule`](https://angular.dev/api/platform-browser/animations/BrowserAnimationsModule) or any other modules that use the forRoot pattern to provide a [`ModuleWithProviders`](https://angular.dev/api/core/ModuleWithProviders), you can apply the `applicationConfig` [decorator](../../writing-stories/decorators.mdx) to all stories for that component. This will provide them with the [bootstrapApplication function](https://angular.io/guide/standalone-components#configuring-dependency-injection), used to bootstrap the component in Storybook.
 
-  ```ts
-  // ChipsModule.stories.ts
+  ```ts title="ChipsModule.stories.ts"
   import { Meta, applicationConfig, StoryObj } from '@storybook/angular';
+
   import { BrowserAnimationsModule, provideAnimations } from '@angular/platform-browser/animations';
   import { importProvidersFrom } from '@angular/core';
 
@@ -236,14 +226,13 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
   };
 
   export default meta;
-
   type Story = StoryObj<ChipsModule>;
 
   export const WithCustomApplicationProvider: Story = {
     render: () => ({
       // Apply application config to a specific story
       applicationConfig: {
-        // The providers will be merged with the ones defined in the applicationConfig decorators providers array of the global meta object
+        // The providers will be merged with the ones defined in the applicationConfig decorator's providers array of the global meta object
         providers: [...],
       }
     })
@@ -254,8 +243,7 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
 
   If your component has dependencies on other Angular directives and modules, these can be supplied using the `moduleMetadata` [decorator](../../writing-stories/decorators.mdx) either for all stories of a component or for individual stories.
 
-  ```ts
-  // YourComponent.stories.ts
+  ```ts title="YourComponent.stories.ts"
   import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
 
   import { YourComponent } from './your.component';
@@ -275,7 +263,6 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
     ],
   };
   export default meta;
-
   type Story = StoryObj<YourComponent>;
 
   export const Base: Story = {};
@@ -298,15 +285,15 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
 
   The Storybook [Angular builder](https://angular.io/guide/glossary#builder) is a way to run Storybook in an Angular workspace. It is a drop-in replacement for running `storybook dev` and `storybook build` directly.
 
-  You can run `npx storybook@next automigrate` to try let Storybook detect and automatically fix your configuration. Otherwise, you can follow the next steps to manually adjust your configuration.
+  You can run `npx storybook@next automigrate` to try letting Storybook detect and automatically fix your configuration. Otherwise, you can follow the next steps to adjust your configuration manually.
 
   #### Do you have only one Angular project in your workspace?
 
-  First, go to your `angular.json` and add `storybook` and `build-storybook` entries in `architect` section of your project like shown above.
+  First, go to your `angular.json` and add `storybook` and `build-storybook` entries in your project's `architect` section, as shown [above](#manual-setup).
 
   Second, adjust your `package.json` script section. Usually, it will look like this:
 
-  ```jsonc
+  ```jsonc title="package.json"
   {
     "scripts": {
       "storybook": "start-storybook -p 6006", // or `storybook dev -p 6006`
@@ -317,7 +304,7 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
 
   Now, you can run Storybook with `ng run <your-project>:storybook` and build it with `ng run <your-project>:build-storybook`. Adjust the scripts in your `package.json` accordingly.
 
-  ```json
+  ```json title="package.json"
   {
     "scripts": {
       "storybook": "ng run <project-name>:storybook",
@@ -326,9 +313,9 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
   }
   ```
 
-  Also compodoc is now built-in in `@storybook/angular` and you don't have to call it explicitly. If were running compodoc in your `package.json` scripts like this:
+   Also, `compodoc` is now built into `@storybook/angular`; you don't have to call it explicitly. If we're running `compodoc` in your `package.json` scripts like this:
 
-  ```json
+  ```json title="package.json"
   {
     "scripts": {
       "docs:json": "compodoc -p tsconfig.json -e json -d ./documentation",
@@ -340,7 +327,7 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
 
   Change it to:
 
-  ```json
+  ```json title="package.json"
   {
     "scripts": {
       "storybook": "ng run <project-name>:storybook",
@@ -351,11 +338,11 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
 
   #### I have multiple projects in my Angular workspace
 
-  In this case you have to adjust your `angular.json` and `package.json` as described above for each project in which you want to use Storybook. Please note, that each project should have a dedicated `.storybook` folder, which should be placed in the root of the project.
+  In this case, you have to adjust your `angular.json` and `package.json` as described above for each project you want to use Storybook. Please note that each project should have a dedicated `.storybook` folder placed at the project's root.
 
-  You can run `npx storybook@latest init` sequentially for each project to setup Storybook for each of them to automatically create the `.storybook` folder and create the necessary configuration in your `angular.json`.
+  You can run `npx storybook@latest init` sequentially for each project to set up Storybook for each of them to automatically create the `.storybook` folder and create the necessary configuration in your `angular.json`.
 
-  You can then use [Storybook composition](https://storybook.js.org/docs/angular/sharing/storybook-composition) to composite multiple Storybooks into one.
+  You can then combine multiple Storybooks with [Storybook composition](../../sharing/storybook-composition.mdx).
 
   ### How do I configure Angular's builder for Storybook?
 
@@ -364,7 +351,9 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
   | Configuration element        | Description                                                                                                                                                                                     |
   | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
   | `"browserTarget"`            | Build target to be served using the following format. <br /> `"example-project:builder:config"`                                                                                                 |
-  | `"tsConfig"`                 | Location of the TypeScript configuration file, relative to the current workspace. <br /> `"tsConfig": "./tsconfig.json"`.                                                                       |
+  | `"debugWebpack"`             | Debug the Webpack configuration <br /> `"debugWebpack": true`                                                                                                                                   |
+  | `"tsConfig"`                 | Location of the TypeScript configuration file relative to the current workspace. <br /> `"tsConfig": "./tsconfig.json"`.                                                                        |
+  | `"preserveSymlinks"`         | Do not use the real path when resolving modules. If true, symlinks are resolved to their real path; otherwise, they are resolved to their symlinked path. <br /> `"preserveSymlinks": true`     |
   | `"port"`                     | Port used by Storybook. <br /> `"port": 6006`                                                                                                                                                   |
   | `"host"`                     | Set up a custom host for Storybook. <br /> `"host": "http://my-custom-host"`                                                                                                                    |
   | `"configDir"`                | Storybook configuration directory location. <br /> `"configDir": ".storybook"`                                                                                                                  |
@@ -374,10 +363,20 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
   | `"sslKey"`                   | Provides an SSL key to serve Storybook. <br /> `"sslKey": "your-ssl-key"`                                                                                                                       |
   | `"smokeTest"`                | Exit Storybook after successful start. <br /> `"smokeTest": true`                                                                                                                               |
   | `"ci"`                       | Starts Storybook in CI mode (skips interactive prompts and will not open browser window). <br /> `"ci": true`                                                                                   |
+  | `"open"`                     | Whether to open Storybook automatically in the browser. <br /> `"open": true`                                                                                                                   |
   | `"quiet"`                    | Filters Storybook verbose build output. <br /> `"quiet": true`                                                                                                                                  |
+  | `"enableProdMode"`           | Disable Angular's development mode, which turns off assertions and other checks within the framework. <br /> `"enableProdMode": true`                                                           |
   | `"docs"`                     | Starts Storybook in [documentation mode](../../writing-docs/build-documentation.mdx#preview-storybooks-documentation). <br /> `"docs": true`                                                    |
-  | `"styles"`                   | Provide the location of the [application's styles](../../configure/styling-and-css.mdx#importing-css-files) to be used with Storybook. <br /> `"styles": ["src/styles.css", "src/styles.scss"]` |
+  | `"compodoc"`                 | Execute compodoc before. <br /> `"compodoc": true`                                                                                                                                              |
+  | `"compodocArgs"`             | Compodoc [options](https://compodoc.app/guides/options.html). Options `-p` with tsconfig path and `-d` with workspace root is always given. <br /> `"compodocArgs": ["-e", "json"]`             |
+  | `"styles"`                   | Provide the location of the [application's styles](../../configure/styling-and-css.mdx#global-styles) to be used with Storybook. <br /> `"styles": ["src/styles.css", "src/styles.scss"]`       |
   | `"stylePreprocessorOptions"` | Provides further customization for style preprocessors resolved to the workspace root. <br /> `"stylePreprocessorOptions": { "includePaths": ["src/styles"] }`                                  |
+  | `"assets"`                   | List of static application assets. <br /> `"assets": ["src/assets"]`                                                                                                                            |
+  | `"initialPath"`              | URL path to be appended when visiting Storybook for the first time. <br /> `"initialPath": "docs/configure-your-project--docs"`                                                                 |
+  | `"webpackStatsJson"`         | Write Webpack Stats JSON to disk. <br /> `"webpackStatsJson": true`                                                                                                                             |
+  | `"previewUrl"`               | Disables the default storybook preview and lets you use your own. <br /> `"previewUrl": "iframe.html"`                                                                                          |
+  | `"loglevel"`                 | Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent]. <br /> `"loglevel": "info"`                                                       |
+  | `"sourceMap"`                | Configure [sourcemaps](https://angular.io/guide/workspace-config#source-map-configuration.). <br /> `"sourceMap": true`                                                                         |
 
   The full list of options can be found in the Angular builder schemas:
 
@@ -390,12 +389,10 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
 
   You can pass an options object for additional configuration if needed:
 
-  ```js
-  // .storybook/main.js
-  import * as path from 'path';
+  ```js title=".storybook/main.ts"
+  import type { StorybookConfig } from '@storybook/angular';
 
-  export default {
-    // ...
+  const config: StorybookConfig = {
     framework: {
       name: '@storybook/angular',
       options: {
@@ -411,7 +408,7 @@ Storybook for Angular is a [framework](../../contribute/framework.mdx) that make
 
   Type: `Record<string, any>`
 
-  Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For Angular, , available options can be found in the [Webpack builder docs](../../builders/webpack.mdx).
+  Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For this framework, available options can be found in the [Webpack builder docs](../../builders/webpack.mdx). 
 
   {/* End supported renderers */}
 </If>
diff --git a/docs/get-started/frameworks/nextjs.mdx b/docs/get-started/frameworks/nextjs.mdx
index 597522f03020..14e2c3e55294 100644
--- a/docs/get-started/frameworks/nextjs.mdx
+++ b/docs/get-started/frameworks/nextjs.mdx
@@ -107,7 +107,7 @@ Storybook for Next.js is a [framework](../../contribute/framework.mdx) that make
   {/* prettier-ignore-end */}
 
   <Callout variant="info">
-    If your Storybook configuration contains custom Webpack operations in [`webpackFinal`](../../api/main-config/main-config-webpack-final.mdx), you will likely need to create equivalents in [`viteFinal`]((../../api/main-config/main-config-vite-final.mdx)).
+    If your Storybook configuration contains custom Webpack operations in [`webpackFinal`](../../api/main-config/main-config-webpack-final.mdx), you will likely need to create equivalents in [`viteFinal`](../../api/main-config/main-config-vite-final.mdx).
   </Callout>
 
   Finally, if you were using Storybook plugins to integrate with Next.js, those are no longer necessary when using this framework and can be removed:
diff --git a/docs/get-started/frameworks/react-native-web-vite.mdx b/docs/get-started/frameworks/react-native-web-vite.mdx
new file mode 100644
index 000000000000..19324dda5c40
--- /dev/null
+++ b/docs/get-started/frameworks/react-native-web-vite.mdx
@@ -0,0 +1,153 @@
+---
+title: Storybook for React Native Web
+sidebar:
+  order: 5
+  title: React Native Web
+---
+
+Storybook for React Native Web is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for [React Native](https://reactnative.dev/) applications. It uses [Vite](https://vitejs.dev/) to build your components for web browsers. The framework includes:
+
+* ⚛️ React Native components
+* 🧑‍💻 Shareable on the web
+* 🪄 Zero config
+* 💫 and more!
+
+<If notRenderer="react-native-web">
+  <Callout variant="info">
+    Storybook for React Native Web is only supported in [React Native](?renderer=react-native-web) projects.
+  </Callout>
+
+  {/* End non-supported renderers */}
+</If>
+
+<If renderer="react-native-web">
+  <Callout variant="info">
+    In addition to React Native Web, Storybook supports on-device [React Native](https://github.com/storybookjs/react-native) development. If you're unsure what's right for you, read our [comparison](#react-native-vs-react-native-web).
+  </Callout>
+
+  ## Requirements
+
+  * React-Native ≥ 0.72
+  * React-Native-Web ≥ 0.19
+  * Storybook ≥ 8.5
+
+  ## Getting started
+
+  ### In a project without Storybook
+
+  Follow the prompts after running this command in your React Native project's root directory:
+
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="init-command.md" />
+
+  {/* prettier-ignore-end */}
+
+  [More on getting started with Storybook.](../install.mdx)
+
+  ### In a project with Storybook `addon-react-native-web`
+
+  The [React Native Web addon](https://github.com/storybookjs/addon-react-native-web) was a Webpack-based precursor to the React Native Web Vite framework (i.e., `@storybook/react-native-web-vite`). If you're using the addon, you should migrate to the framework, which is faster, more stable, maintained, and better documented. To do so, follow the steps below.
+  
+  Run the following command to upgrade Storybook to the latest version:
+  
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="storybook-upgrade.md" />
+
+  {/* prettier-ignore-end */}
+
+  <Callout variant="info">
+    This framework is designed to work with Storybook 8.5 and above for the best experience. We won't be able to provide support if you're using an older Storybook version.
+  </Callout>
+
+  Install the framework and its peer dependencies:
+
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="react-native-web-vite-install.md" />
+
+  {/* prettier-ignore-end */}
+
+  Update your `.storybook/main.js|ts` to change the framework property and remove the `@storybook/addon-react-native-web` addon:
+
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="react-native-web-vite-add-framework.md" />
+
+  {/* prettier-ignore-end */}
+
+  Finally, remove the addon and similar packages (i.e., `@storybook/react-webpack5` and `@storybook/addon-react-native-web`) from your project.
+
+  ### In a project with Storybook `react-native`
+  
+  [Storybook for React Native](https://github.com/storybookjs/react-native) is a framework that runs in a simulator or on your mobile device. It's possible to run React Native Web alongside React Native, but we are still working on a seamless integration. In the meantime, we recommend running one or the other. If you need help figuring out what's right for you, read our [comparison](#react-native-vs-react-native-web).
+
+  ## Run the Setup Wizard
+
+  If all goes well, you should see a setup wizard that will help you get started with Storybook. The wizard will introduce you to the main concepts and features, including how the UI is organized, how to write your first story, and how to test your components' response to various inputs utilizing [controls](../../essentials/controls.mdx).
+
+  ![Storybook onboarding](../../_assets/get-started/example-onboarding-wizard.png)
+
+  If you skipped the wizard, you can always run it again by adding the `?path=/onboarding` query parameter to the URL of your Storybook instance, provided that the example stories are still available.
+
+  ## React Native vs React Native Web
+
+  If you’re building React Native (RN) components, Storybook has two options: Native and Web.
+
+  Both options provide a catalog of your stories that hot refreshes as you edit the code in your favorite editor. However, their implementations are quite different:
+
+  - **Native** - Runs inside your React Native application. It’s high-fidelity but has a limited feature set.
+  - **Web** - Displays your React Native components in the browser. It’s based on Storybook for Web, which is feature-rich and mature.
+
+  {/* TODO: Don't forget about this image, otherwise remove it */}
+  
+  {/* [Image: native + web] */}
+
+  So, which option is right for you?
+
+  **Native.** You should choose this option if you want:
+
+  - **Native features** - Your components rely on device-specific features like native modules. It runs in your actual application, in-simulator, or on-device and provides full fidelity. The web version uses `react-native-web`, which works for most components but has [limitations](https://necolas.github.io/react-native-web/docs/react-native-compatibility/).
+  - **Mobile publication** - You want to share your Storybook on-device as part of a test build or embedded inside your application.
+
+  **Web.** You should choose this option if you want:
+
+  - [**Sharing**](../../sharing/publish-storybook.mdx) - Publish to the web and share with your team or publicly.
+  - [**Documentation**](../../writing-docs/index.mdx) - Auto-generated component docs or rich markdown docs in MDX.
+  - [**Testing**](../../writing-tests/index.mdx) - Component, visual, and a11y tests for your components.
+  - [**Addons**](https://storybook.js.org/addons) - 500+ addons that improve development, documentation, testing, and integration with other tools.
+
+  **Both.** It’s also possible to use both options together. However, this increases Storybook’s install footprint and requires more work to configure. Therefore, we recommend choosing one option to start and extending it once you have something working.
+
+  ## API
+
+  ### Options
+
+  You can pass an options object for additional configuration if needed:
+
+  ```ts title=".storybook/main.ts"
+  import type { StorybookConfig } from '@storybook/react-native-web-vite';
+
+  const config: StorybookConfig = {
+    framework: {
+      name: '@storybook/react-native-web-vite',
+      options: {
+        // ...
+      },
+    },
+  };
+
+  export default config;
+  ```
+
+  #### `builder`
+
+  Type: `Record<string, any>`
+
+  Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../../builders/vite.mdx).
+
+  
+  {/* End supported renderers */}
+</If>
+
diff --git a/docs/get-started/frameworks/react-vite.mdx b/docs/get-started/frameworks/react-vite.mdx
index 66325071b4b5..d2de31b5b328 100644
--- a/docs/get-started/frameworks/react-vite.mdx
+++ b/docs/get-started/frameworks/react-vite.mdx
@@ -11,7 +11,7 @@ Storybook for React & Vite is a [framework](../../contribute/framework.mdx) that
 * 🪄 Zero config
 * 💫 and more!
 
-<If notRenderer={'react'}>
+<If notRenderer="react">
   <Callout variant="info">
     Storybook for React & Vite is only supported in [React](?renderer=react) projects.
   </Callout>
@@ -19,7 +19,7 @@ Storybook for React & Vite is a [framework](../../contribute/framework.mdx) that
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={'react'}>
+<If renderer="react">
   ## Requirements
 
   * React ≥ 16.8
@@ -86,27 +86,17 @@ Storybook for React & Vite is a [framework](../../contribute/framework.mdx) that
 
   You can pass an options object for additional configuration if needed:
 
-  ```ts
-  // .storybook/main.ts
-  import type { StorybookConfig } from '@storybook/react-vite';
+  {/* prettier-ignore-start */}
 
-  const config: StorybookConfig = {
-    framework: {
-      name: '@storybook/react-vite',
-      options: {
-        // ...
-      },
-    },
-  };
+  <CodeSnippets path="react-vite-framework-options.md" />
 
-  export default config;
-  ```
+  {/* prettier-ignore-end */}
 
   #### `builder`
 
   Type: `Record<string, any>`
 
   Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../../builders/vite.mdx).
-
+  
   {/* End supported renderers */}
 </If>
diff --git a/docs/get-started/frameworks/react-webpack5.mdx b/docs/get-started/frameworks/react-webpack5.mdx
index 402efef8b8f9..7aef5014ee84 100644
--- a/docs/get-started/frameworks/react-webpack5.mdx
+++ b/docs/get-started/frameworks/react-webpack5.mdx
@@ -7,7 +7,7 @@ sidebar:
 
 Storybook for React & Webpack is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for [React](https://react.dev/) applications built with [Webpack](https://webpack.js.org/).
 
-<If notRenderer={'react'}>
+<If notRenderer="react">
   <Callout variant="info">
     Storybook for React & Webpack is only supported in [React](?renderer=react) projects.
   </Callout>
@@ -15,7 +15,7 @@ Storybook for React & Webpack is a [framework](../../contribute/framework.mdx) t
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={'react'}>
+<If renderer="react">
   ## Requirements
 
   * React ≥ 16.8
@@ -112,21 +112,11 @@ Storybook for React & Webpack is a [framework](../../contribute/framework.mdx) t
 
   You can pass an options object for additional configuration if needed:
 
-  ```ts
-  // .storybook/main.ts
-  import type { StorybookConfig } from '@storybook/react-webpack5';
-
-  const config: StorybookConfig = {
-    framework: {
-      name: '@storybook/react-webpack5',
-      options: {
-        // ...
-      },
-    },
-  };
-
-  export default config;
-  ```
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="react-webpack5-framework-options.md" />
+
+  {/* prettier-ignore-end */}  
 
   #### `builder`
 
diff --git a/docs/get-started/frameworks/svelte-vite.mdx b/docs/get-started/frameworks/svelte-vite.mdx
index 91c76a67089a..984688bbfc2e 100644
--- a/docs/get-started/frameworks/svelte-vite.mdx
+++ b/docs/get-started/frameworks/svelte-vite.mdx
@@ -1,13 +1,13 @@
 ---
 title: Storybook for Svelte & Vite
 sidebar:
-  order: 6
+  order: 7
   title: Svelte & Vite
 ---
 
 Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for applications using [Svelte](https://svelte.dev/) built with [Vite](https://vitejs.dev/).
 
-<If notRenderer={'svelte'}>
+<If notRenderer="svelte">
   <Callout variant="info">
     Storybook for Svelte & Vite is only supported in [Svelte](?renderer=svelte) projects.
   </Callout>
@@ -15,7 +15,7 @@ Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) tha
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={'svelte'}>
+<If renderer="svelte">
   ## Requirements
 
   * Svelte ≥ 4.0
@@ -26,7 +26,7 @@ Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) tha
 
   ### In a project without Storybook
 
-  Follow the prompts after running this command in your Sveltekit project's root directory:
+  Follow the prompts after running this command in your Svelte project's root directory:
 
   {/* prettier-ignore-start */}
 
@@ -48,7 +48,9 @@ Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) tha
 
   #### Automatic migration
 
-  When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/sveltekit`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below.
+  {/* TK: Vet this for accuracy, the migration never prompted me to opt-in to the @storybook/sveltekit package, instead it updated the package version. Additionally the example refers to svelte-vite, not sveltekit */}
+
+  When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/svelte-vite`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below.
 
   #### Manual migration
 
@@ -70,7 +72,15 @@ Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) tha
 
   ## Writing native Svelte stories
 
-  Storybook provides a Svelte addon maintained by the community, enabling you to write stories for your Svelte components using the template syntax. You'll need to take some additional steps to enable this feature.
+  Storybook provides a Svelte [addon](https://storybook.js.org/addons/@storybook/addon-svelte-csf) maintained by the community, enabling you to write stories for your Svelte components using the template syntax. 
+  
+  <Callout variant="info">
+    The community actively maintains the Svelte CSF addon but still lacks some features currently available in the official Storybook Svelte framework support. For more information, see the [addon's documentation](https://github.com/storybookjs/addon-svelte-csf).
+  </Callout>
+
+  ### Setup
+
+  If you initialized your project with the Svelte framework, the addon has already been installed and configured for you. However, if you're [migrating](#automatic-migration) from a previous version, you'll need to take additional steps to enable this feature.
 
   Run the following command to install the addon.
 
@@ -81,29 +91,112 @@ Storybook for Svelte & Vite is a [framework](../../contribute/framework.mdx) tha
   {/* prettier-ignore-end */}
 
   <Callout variant="info">
-    The community actively maintains the Svelte CSF addon but still lacks some features currently available in the official Storybook Svelte framework support. For more information, see [addon's documentation](https://github.com/storybookjs/addon-svelte-csf).
+  
+    The CLI's [`add`](../../api/cli-options.mdx#add) command automates the addon's installation and setup. To install it manually, see our [documentation](../addons/install-addons.mdx#manual-installation) on how to install addons.
+  
   </Callout>
 
+  Update your Storybook configuration file (i.e., `.storybook/main.js|ts`) to enable support for this format.
+  
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="main-config-svelte-csf-register.md" />
+
+  {/* prettier-ignore-end */}
+
+  ### Configure
+ 
+  By default, the Svelte [addon](https://storybook.js.org/addons/@storybook/addon-svelte-csf) addon offers zero-config support for Storybook's Svelte framework. However, you can extend your Storybook configuration file (i.e., `.storybook/main.js|ts`) and provide additional addon options. Listed below are the available options and examples of how to use them.
+
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="svelte-csf-addon-options.md" />
+
+  {/* prettier-ignore-end */}
+
+  | Options          | Description |
+  | ---------------- | ------------------------------------------------------------------------------------------------------------------ |
+  | `legacyTemplate` | Enables support for the `Template` component for backward compatibility. <br/> `options: { legacyTemplate: true }` |
+  
+  <Callout variant="info">
+
+    Enabling the `legacyTemplate` option can introduce a performance overhead and should be used cautiously. For more information, refer to the [addon's documentation](https://github.com/storybookjs/addon-svelte-csf/blob/next/README.md#legacy-api).
+  
+  </Callout>
+
+  ### Upgrade to Svelte CSF addon v5
+
+  With the Svelte 5 release, Storybook's Svelte CSF addon has been updated to support the new features. This guide will help you migrate to the latest version of the addon. Below is an overview of the major changes in version 5.0 and the steps needed to upgrade your project.
+
+  #### Simplified story API
+  
+  If you are using the `Meta` component or the `meta` named export to define the story's metadata (e.g., [parameters](../../writing-stories/parameters.mdx)), you'll need to update your stories to use the new `defineMeta` function. This function returns an object with the required information, including a `Story` component that you must use to define your component stories.
+  
+  {/* prettier-ignore-start */ }
+
+  <CodeSnippets path="svelte-csf-story-migration.md" />
+
+  {/* prettier-ignore-end */}
+
+  #### Story templates
+ 
+  If you used the `Template` component to control how the component renders in the Storybook, this feature was replaced with built-in children support in the `Story` component, enabling you to compose components and define the UI structure directly in the story.
+  
+  {/* prettier-ignore-start */ }
+
+  <CodeSnippets path="svelte-csf-story-custom-children.md" />
+
+  {/* prettier-ignore-end */}
+
+  <Callout variant="info">
+
+    If you need support for the `Template` component, the addon provides a feature flag for backward compatibility. For more information, see the [configuration options](#configure).
+  
+  </Callout>
+
+  #### Story slots to snippets
+  
+  With Svelte's slot deprecation and the introduction of reusable [`snippets`](https://svelte.dev/docs/svelte/v5-migration-guide#Snippets-instead-of-slots), the addon also introduced support for this feature allowing you to extend the `Story` component and provide a custom snippet to provide dynamic content to your stories. This feature extends the built-in `children` support in the `Story` component, allowing you to create dynamic stories without losing reactivity.
+
+  ```svelte title="MyComponent.stories.svelte"
+  <script>
+    import { defineMeta } from '@storybook/addon-svelte-csf';
+    
+    import MyComponent from './MyComponent.svelte';
+
+    const { Story } = defineMeta({
+      component: MyComponent,
+    });
+  </script>
+
+  <Story name="Default" args={{ exampleProperty: true }}>
+    {#snippet children(args)}
+      <MyComponent {...args}>Reactive component</MyComponent>
+    {/snippet}
+  </Story>
+  ```
+
+  #### Tags support
+
+  If you enabled automatic documentation generation with the `autodocs` story property, you must replace it with [`tags`](../../writing-stories/tags.mdx). This property allows you to categorize and filter stories based on specific criteria and generate documentation based on the tags applied to the stories.
+  
+  {/* prettier-ignore-start */ }
+
+  <CodeSnippets path="svelte-csf-addon-tags.md" />
+
+  {/* prettier-ignore-end */}
+
   ## API
 
   ### Options
 
   You can pass an options object for additional configuration if needed:
 
-  ```js
-  // .storybook/main.js
-  import * as path from 'path';
-
-  export default {
-    // ...
-    framework: {
-      name: '@storybook/svelte-vite',
-      options: {
-        // ...
-      },
-    },
-  };
-  ```
+  {/* prettier-ignore-start */ }
+
+  <CodeSnippets path="svelte-vite-framework-options.md" />
+
+  {/* prettier-ignore-end */}
 
   The available options are:
 
diff --git a/docs/get-started/frameworks/svelte-webpack5.mdx b/docs/get-started/frameworks/svelte-webpack5.mdx
index 8c3f78ddc2b8..142eeac1ccd2 100644
--- a/docs/get-started/frameworks/svelte-webpack5.mdx
+++ b/docs/get-started/frameworks/svelte-webpack5.mdx
@@ -1,13 +1,13 @@
 ---
 title: Storybook for Svelte & Webpack
 sidebar:
-  order: 7
+  order: 8
   title: Svelte & Webpack
 ---
 
 Storybook for Svelte & Webpack is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for applications using [Svelte](https://svelte.dev/) built with [Webpack](https://webpack.js.org/).
 
-<If notRenderer={'svelte'}>
+<If notRenderer="svelte">
   <Callout variant="info">
     Storybook for Svelte & Webpack is only supported in [Svelte](?renderer=svelte) projects.
   </Callout>
@@ -15,7 +15,7 @@ Storybook for Svelte & Webpack is a [framework](../../contribute/framework.mdx)
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={'svelte'}>
+<If renderer="svelte">
   ## Requirements
 
   * Svelte ≥ 4.0
@@ -86,42 +86,17 @@ Storybook for Svelte & Webpack is a [framework](../../contribute/framework.mdx)
 
   {/* prettier-ignore-end */}
 
-  ## Writing native Svelte stories
-
-  Storybook provides a Svelte addon maintained by the community, enabling you to write stories for your Svelte components using the template syntax. You'll need to take some additional steps to enable this feature.
-
-  Run the following command to install the addon.
-
-  {/* prettier-ignore-start */}
-
-  <CodeSnippets path="svelte-csf-addon-install.md" />
-
-  {/* prettier-ignore-end */}
-
-  <Callout variant="info">
-    The community actively maintains the Svelte CSF addon but still lacks some features currently available in the official Storybook Svelte framework support. For more information, see [the addon's documentation](https://github.com/storybookjs/addon-svelte-csf).
-  </Callout>
-
   ## API
 
   ### Options
 
   You can pass an options object for additional configuration if needed:
 
-  ```js
-  // .storybook/main.js
-  import * as path from 'path';
-
-  export default {
-    // ...
-    framework: {
-      name: '@storybook/svelte-webpack5',
-      options: {
-        // ...
-      },
-    },
-  };
-  ```
+    {/* prettier-ignore-start */ }
+
+  <CodeSnippets path="svelte-webpack-framework-options.md" />
+
+  {/* prettier-ignore-end */}
 
   The available options are:
 
@@ -131,5 +106,11 @@ Storybook for Svelte & Webpack is a [framework](../../contribute/framework.mdx)
 
   Configure options for the [framework's builder](../../api/main-config/main-config-framework.mdx#optionsbuilder). For this framework, available options can be found in the [Webpack builder docs](../../builders/webpack.mdx).
 
+  ## Troubleshooting
+
+  ### Svelte CSF addon compatibility
+
+  In version 5 of the Svelte CSF [addon](https://storybook.js.org/addons/@storybook/addon-svelte-csf), support for Webpack was removed to align with Svelte's ecosystem. If you're using this framework and you want to write stories using Svelte's native templating syntax with the Svelte CSF addon, we encourage you to downgrade to version 4 of the addon.
+
   {/* End supported renderers */}
 </If>
diff --git a/docs/get-started/frameworks/sveltekit.mdx b/docs/get-started/frameworks/sveltekit.mdx
index 3480bdb4b8f0..55210871bb01 100644
--- a/docs/get-started/frameworks/sveltekit.mdx
+++ b/docs/get-started/frameworks/sveltekit.mdx
@@ -1,7 +1,7 @@
 ---
 title: Storybook for SvelteKit
 sidebar:
-  order: 5
+  order: 6
   title: SvelteKit
 ---
 
@@ -12,7 +12,7 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma
 * 🔗 Automatic link handling
 * 💫 and more!
 
-<If notRenderer={'svelte'}>
+<If notRenderer="svelte">
   <Callout variant="info">
     Storybook for SvelteKit is only supported in [Svelte](?renderer=svelte) projects.
   </Callout>
@@ -20,7 +20,7 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={'svelte'}>
+<If renderer="svelte">
   ## Requirements
 
   * SvelteKit ≥ 1.0
@@ -87,10 +87,10 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma
   | Module                                                                             | Status                 | Note                                                                                                                                    |
   | ---------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
   | [`$app/environment`](https://kit.svelte.dev/docs/modules#$app-environment)         | ✅ Supported           | `version` is always empty in Storybook.                                                                                                 |
-  | [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms)                     | ⚠️ **Experimental**    | See [How to mock](#how-to-mock).                                                                                                         |
-  | [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation)           | ⚠️ **Experimental**    | See [How to mock](#how-to-mock).                                                                                                         |
+  | [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms)                     | ⚠️ **Experimental**     | See [How to mock](#how-to-mock).                                                                                                        |
+  | [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation)           | ⚠️ **Experimental**     | See [How to mock](#how-to-mock).                                                                                                        |
   | [`$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths)                     | ✅ Supported           | Requires SvelteKit 1.4.0 or newer.                                                                                                      |
-  | [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores)                   | ⚠️ **Experimental**    | See [How to mock](#how-to-mock).                                                                                                         |
+  | [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores)                   | ⚠️ **Experimental**     | See [How to mock](#how-to-mock).                                                                                                        |
   | [`$env/dynamic/public`](https://kit.svelte.dev/docs/modules#$env-dynamic-public)   | 🚧 Partially supported | Only supported in development mode. Storybook is built as a static app with no server-side API, so it cannot dynamically serve content. |
   | [`$env/static/public`](https://kit.svelte.dev/docs/modules#$env-static-public)     | ✅ Supported           |                                                                                                                                         |
   | [`$lib`](https://kit.svelte.dev/docs/modules#$lib)                                 | ✅ Supported           |                                                                                                                                         |
@@ -103,8 +103,7 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma
 
   To mock a SvelteKit import you can define it within `parameters.sveltekit_experimental`:
 
-  ```ts
-  // MyComponent.stories.svelte
+  ```ts title="MyComponent.stories.js|ts"
   export const MyStory = {
     parameters: {
       sveltekit_experimental: {
@@ -130,12 +129,11 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma
 
   ### Mocking links
 
-  The default link-handling behavior (e.g. when clicking an `<a href="..." />` element) is to log an action to the [Actions panel](../../essentials/actions.mdx).
+  The default link-handling behavior (e.g., when clicking an `<a href="..." />` element) is to log an action to the [Actions panel](../../essentials/actions.mdx).
 
-  You can override this by assigning an object to `parameters.sveltekit_experimental.hrefs`, where the keys are strings representing an href and the values define your mock. For example:
+  You can override this by assigning an object to `parameters.sveltekit_experimental.hrefs`, where the keys are strings representing an href, and the values define your mock. For example:
 
-  ```ts
-  // MyComponent.stories.svelte
+  ```ts title="MyComponent.stories.js|ts"
   export const MyStory = {
     parameters: {
       sveltekit_experimental: {
@@ -159,7 +157,15 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma
 
   ## Writing native Svelte stories
 
-  Storybook provides a Svelte addon maintained by the community, enabling you to write stories for your Svelte components using the template syntax. You'll need to take some additional steps to enable this feature.
+  Storybook provides a Svelte [addon](https://storybook.js.org/addons/@storybook/addon-svelte-csf) maintained by the community, enabling you to write stories for your Svelte components using the template syntax. 
+  
+  <Callout variant="info">
+      The community actively maintains the Svelte CSF addon but still lacks some features currently available in the official Storybook Svelte framework support. For more information, see the [addon's documentation](https://github.com/storybookjs/addon-svelte-csf).
+  </Callout>
+
+  ### Setup
+
+  If you initialized your project with the Sveltekit framework, the addon has already been installed and configured for you. However, if you're [migrating](#automatic-migration) from a previous version, you'll need to take additional steps to enable this feature.
 
   Run the following command to install the addon.
 
@@ -170,9 +176,101 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma
   {/* prettier-ignore-end */}
 
   <Callout variant="info">
-    The community actively maintains the Svelte CSF addon but still lacks some features currently available in the official Storybook Svelte framework support. For more information, see [the addon's documentation](https://github.com/storybookjs/addon-svelte-csf).
+  
+    The CLI's [`add`](../../api/cli-options.mdx#add) command automates the addon's installation and setup. To install it manually, see our [documentation](../addons/install-addons.mdx#manual-installation) on how to install addons.
+  
+  </Callout>
+
+  Update your Storybook configuration file (i.e., `.storybook/main.js|ts`) to enable support for this format.
+  
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="main-config-svelte-csf-register.md" />
+
+  {/* prettier-ignore-end */}
+
+  ### Configure
+ 
+  By default, the Svelte [addon](https://storybook.js.org/addons/@storybook/addon-svelte-csf) addon offers zero-config support for Storybook's SvelteKit framework. However, you can extend your Storybook configuration file (i.e., `.storybook/main.js|ts`) and provide additional addon options. Listed below are the available options and examples of how to use them.
+
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="svelte-csf-addon-options.md" />
+
+  {/* prettier-ignore-end */}
+
+  | Options          | Description |
+  | ---------------- | ------------------------------------------------------------------------------------------------------------------ |
+  | `legacyTemplate` | Enables support for the `Template` component for backward compatibility. <br/> `options: { legacyTemplate: true }` |
+  
+  <Callout variant="info">
+
+    Enabling the `legacyTemplate` option can introduce a performance overhead and should be used cautiously. For more information, refer to the [addon's documentation](https://github.com/storybookjs/addon-svelte-csf/blob/next/README.md#legacy-api).
+  
+  </Callout>
+
+  ### Upgrade to Svelte CSF addon v5
+
+  With the Svelte 5 release, Storybook's Svelte CSF addon has been updated to support the new features. This guide will help you migrate to the latest version of the addon. Below is an overview of the major changes in version 5.0 and the steps needed to upgrade your project.
+
+  #### Simplified story API
+  
+  If you are using the `Meta` component or the `meta` named export to define the story's metadata (e.g., [parameters](../../writing-stories/parameters.mdx)), you'll need to update your stories to use the new `defineMeta` function. This function returns an object with the required information, including a `Story` component that you must use to define your component stories.
+  
+  {/* prettier-ignore-start */ }
+
+  <CodeSnippets path="svelte-csf-story-migration.md" />
+
+  {/* prettier-ignore-end */}
+
+  #### Story templates
+ 
+  If you used the `Template` component to control how the component renders in the Storybook, this feature was replaced with built-in children support in the `Story` component, enabling you to compose components and define the UI structure directly in the story.
+  
+  {/* prettier-ignore-start */ }
+
+  <CodeSnippets path="svelte-csf-story-custom-children.md" />
+
+  {/* prettier-ignore-end */}
+
+  <Callout variant="info">
+
+    If you need support for the `Template` component, the addon provides a feature flag for backward compatibility. For more information, see the [configuration options](#configure).
+  
   </Callout>
 
+  #### Story slots to snippets
+  
+  With Svelte's slot deprecation and the introduction of reusable [`snippets`](https://svelte.dev/docs/svelte/v5-migration-guide#Snippets-instead-of-slots), the addon also introduced support for this feature allowing you to extend the `Story` component and provide a custom snippet to provide dynamic content to your stories. This feature extends the built-in `children` support in the `Story` component, allowing you to create dynamic stories without losing reactivity.
+
+  ```svelte title="MyComponent.stories.svelte"
+  <script>
+    import { defineMeta } from '@storybook/addon-svelte-csf';
+    
+    import MyComponent from './MyComponent.svelte';
+
+    const { Story } = defineMeta({
+      component: MyComponent,
+    });
+  </script>
+
+  <Story name="Default" args={{ exampleProperty: true }}>
+    {#snippet children(args)}
+      <MyComponent {...args}>Reactive component</MyComponent>
+    {/snippet}
+  </Story>
+  ```
+
+  #### Tags support
+
+  If you enabled automatic documentation generation with the `autodocs` story property, you must replace it with [`tags`](../../writing-stories/tags.mdx). This property allows you to categorize and filter stories based on specific criteria and generate documentation based on the tags applied to the stories.
+  
+  {/* prettier-ignore-start */ }
+
+  <CodeSnippets path="svelte-csf-addon-tags.md" />
+
+  {/* prettier-ignore-end */}
+
   ## API
 
   ### Parameters
@@ -267,20 +365,11 @@ Storybook for SvelteKit is a [framework](../../contribute/framework.mdx) that ma
 
   You can pass an options object for additional configuration if needed:
 
-  ```js
-  // .storybook/main.js
-  import * as path from 'path';
+  {/* prettier-ignore-start */ }
 
-  export default {
-    // ...
-    framework: {
-      name: '@storybook/sveltekit',
-      options: {
-        // ...
-      },
-    },
-  };
-  ```
+  <CodeSnippets path="sveltekit-framework-options.md" />
+
+  {/* prettier-ignore-end */}
 
   The available options are:
 
diff --git a/docs/get-started/frameworks/vue3-vite.mdx b/docs/get-started/frameworks/vue3-vite.mdx
index 5aa98fad96c4..18a557057cb5 100644
--- a/docs/get-started/frameworks/vue3-vite.mdx
+++ b/docs/get-started/frameworks/vue3-vite.mdx
@@ -1,7 +1,7 @@
 ---
 title: Storybook for Vue & Vite
 sidebar:
-  order: 8
+  order: 9
   title: Vue & Vite
 ---
 
@@ -12,7 +12,7 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
 * 🧠 Comprehensive docgen
 * 💫 and more!
 
-<If notRenderer={'vue'}>
+<If notRenderer="vue">
   <Callout variant="info">
     Storybook for Vue & Vite is only supported in [Vue](?renderer=vue) projects.
   </Callout>
@@ -20,7 +20,7 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={'vue'}>
+<If renderer="vue">
   ## Requirements
 
   * Vue ≥ 3
@@ -75,37 +75,33 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
 
   ## Extending the Vue application
 
-  Storybook creates a [Vue 3 application](https://vuejs.org/api/application.html#application-api) for your component preview. When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file.
+  Storybook creates a [Vue 3 application](https://vuejs.org/api/application.html#application-api) for your component preview. When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js|ts` file.
 
-  Therefore, Storybook provides you with a `setup` function exported from this package, which receives as a callback your Storybook instance, which you can interact with and add your custom configuration.
+  Therefore, Storybook provides you with a `setup` function exported from this package. This function receives your Storybook instance as a callback, which you can interact with and add your custom configuration.
 
-  ```js
-  // .storybook/preview.js
+  ```js title=".storybook/preview.js|ts"
   import { setup } from '@storybook/vue3';
 
   setup((app) => {
     app.use(MyPlugin);
     app.component('my-component', MyComponent);
     app.mixin({
-      /* My mixin */
+      // My mixin
     });
   });
-
-  // Rest of the file...
   ```
 
   ## Using `vue-component-meta`
 
   <Callout variant="info">
-    `vue-component-meta` is only available in Storybook ≥ 8. It is currently opt-in, but will become the default in a future version of Storybook.
+    `vue-component-meta` is only available in Storybook ≥ 8. It is currently an opt-in, but it will become the default in a future version of Storybook.
   </Callout>
 
   [`vue-component-meta`](https://github.com/vuejs/language-tools/tree/master/packages/component-meta) is a tool maintained by the Vue team that extracts metadata from Vue components. Storybook can use it to generate the [controls](../../essentials/controls.mdx) for your stories and documentation. It's a more full-featured alternative to `vue-docgen-api` and is recommended for most projects.
 
   If you want to use `vue-component-meta`, you can configure it in your `.storybook/main.js|ts` file:
 
-  ```ts
-  // .storybook/main.ts
+  ```ts title=".storybook/main.ts"
   import type { StorybookConfig } from '@storybook/vue3-vite';
 
   const config: StorybookConfig = {
@@ -124,16 +120,15 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
 
   ### Support for multiple component types
 
-  `vue-component-meta` supports all types of Vue components (including SFC, functional, composition / options API components) from `.vue`, `.ts`, `.tsx`, `.js`, and `.jsx` files.
+  `vue-component-meta` supports all types of Vue components (including SFC, functional, composition/options API components) from `.vue`, `.ts`, `.tsx`, `.js`, and `.jsx` files.
 
   It also supports both default and named component exports.
 
   ### Prop description and JSDoc tag annotations
 
-  To provide a description for a prop, including tags, you can use JSDoc comments in your component's props definition:
+  To describe a prop, including tags, you can use JSDoc comments in your component's props definition:
 
-  ```html
-  {/* YourComponent.vue */}
+  ```html title="YourComponent.vue"
   <script setup lang="ts">
     interface MyComponentProps {
       /** The name of the user */
@@ -160,8 +155,7 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
 
   To provide a type for an emitted event, you can use TypeScript types (including JSDoc comments) in your component's `defineEmits` call:
 
-  ```html
-  {/* YourComponent.vue */}
+  ```html title="YourComponent.vue"
   <script setup lang="ts">
     type MyChangeEvent = 'change';
 
@@ -186,8 +180,7 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
 
   The slot types are automatically extracted from your component definition and displayed in the controls panel.
 
-  ```html
-  {/* YourComponent.vue */}
+  ```html title="YourComponent.vue"
   <template>
     <slot :num="123"></slot>
     <br />
@@ -201,7 +194,7 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
   <script setup lang="ts"></script>
   ```
 
-  If you use `defineSlots`, you can provide a description for each slot using JSDoc comments in your component's slots definition:
+  If you use `defineSlots`, you can describe each slot using JSDoc comments in your component's slots definition:
 
   ```ts
   defineSlots<{
@@ -222,10 +215,9 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
 
   ### Exposed properties and methods
 
-  The properties and methods exposed by your component are automatically extracted and displayed in the controls panel.
+  The properties and methods exposed by your component are automatically extracted and displayed in the [Controls](../../essentials/controls.mdx) panel.
 
-  ```html
-  {/* YourComponent.vue */}
+  ```html title="YourComponent.vue"
   <script setup lang="ts">
     import { ref } from 'vue';
 
@@ -247,10 +239,9 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
 
   ### Override the default configuration
 
-  If you're working with a project that relies on [`tsconfig references`](https://www.typescriptlang.org/docs/handbook/project-references.html) to link to other existing configuration files (e.g. `tsconfig.app.json`, `tsconfig.node.json`), we recommend that you update your [`.storybook/main.js|ts`](../../configure/index.mdx) configuration file and add the following:
+  If you're working with a project that relies on [`tsconfig references`](https://www.typescriptlang.org/docs/handbook/project-references.html) to link to other existing configuration files (e.g., `tsconfig.app.json`, `tsconfig.node.json`), we recommend that you update your [`.storybook/main.js|ts`](../../configure/index.mdx) configuration file and add the following:
 
-  ```ts
-  // .storybook/main.ts
+  ```ts title=".storybook/main.ts"
   import type { StorybookConfig } from '@storybook/vue3-vite';
 
   const config: StorybookConfig = {
@@ -269,7 +260,7 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
   ```
 
   <Callout variant="info">
-    This is not a limitation of Storybook, but instead how `vue-component-meta` works. For more information, refer to the appropriate [GitHub issue](https://github.com/vuejs/language-tools/issues/3896).
+    This is not a limitation of Storybook, but how `vue-component-meta` works. For more information, refer to the appropriate [GitHub issue](https://github.com/vuejs/language-tools/issues/3896).
   </Callout>
 
   Otherwise, you might face missing component types/descriptions or unresolvable import aliases like `@/some/import`.
@@ -292,21 +283,11 @@ Storybook for Vue & Vite is a [framework](../../contribute/framework.mdx) that m
 
   You can pass an options object for additional configuration if needed:
 
-  ```ts
-  // .storybook/main.ts
-  import type { StorybookConfig } from '@storybook/vue3-vite';
+  {/* prettier-ignore-start */}
 
-  const config: StorybookConfig = {
-    framework: {
-      name: '@storybook/vue3-vite',
-      options: {
-        docgen: 'vue-component-meta',
-      },
-    },
-  };
+  <CodeSnippets path="vue-vite-framework-options.md" />
 
-  export default config;
-  ```
+  {/* prettier-ignore-end */}
 
   #### `builder`
 
diff --git a/docs/get-started/frameworks/vue3-webpack5.mdx b/docs/get-started/frameworks/vue3-webpack5.mdx
index a9f7f900720b..52dfc6757950 100644
--- a/docs/get-started/frameworks/vue3-webpack5.mdx
+++ b/docs/get-started/frameworks/vue3-webpack5.mdx
@@ -1,13 +1,13 @@
 ---
 title: Storybook for Vue & Webpack
 sidebar:
-  order: 9
+  order: 10
   title: Vue & Webpack
 ---
 
 Storybook for Vue & Webpack is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for [Vue](https://vuejs.org/) applications built with [Webpack](https://webpack.js.org/).
 
-<If notRenderer={'vue'}>
+<If notRenderer="vue">
   <Callout variant="info">
     Storybook for Vue & Webpack is only supported in [Vue](?renderer=vue) projects.
   </Callout>
@@ -15,7 +15,7 @@ Storybook for Vue & Webpack is a [framework](../../contribute/framework.mdx) tha
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={'vue'}>
+<If renderer="vue">
   ## Requirements
 
   * Vue ≥ 3.0
@@ -88,20 +88,18 @@ Storybook for Vue & Webpack is a [framework](../../contribute/framework.mdx) tha
 
   ## Extending the Vue application
 
-  Storybook creates a [Vue 3 application](https://vuejs.org/api/application.html#application-api) for your component preview. When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file.
+  Storybook creates a [Vue 3 application](https://vuejs.org/api/application.html#application-api) for your component preview. When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js|ts` file.
 
-  Therefore, Storybook provides you with a `setup` function exported from this package, which receives as a callback your Storybook instance, which you can interact with and add your custom configuration.
-
-  ```js
-  // .storybook/preview.js
+  Therefore, Storybook provides you with a `setup` function exported from this package. This function receives your Storybook instance as a callback, which you can interact with and add your custom configuration.
 
+  ```js title=".storybook/preview.js|ts"
   import { setup } from '@storybook/vue3';
 
   setup((app) => {
     app.use(MyPlugin);
     app.component('my-component', MyComponent);
     app.mixin({
-      /* My mixin */
+      // My mixin
     });
   });
   ```
@@ -124,21 +122,11 @@ Storybook for Vue & Webpack is a [framework](../../contribute/framework.mdx) tha
 
   You can pass an options object for additional configuration if needed:
 
-  ```ts
-  // .storybook/main.ts
-  import type { StorybookConfig } from '@storybook/vue-webpack5';
+  {/* prettier-ignore-start */}
 
-  const config: StorybookConfig = {
-    framework: {
-      name: '@storybook/vue-webpack5',
-      options: {
-        // ...
-      },
-    },
-  };
+  <CodeSnippets path="vue-webpack5-framework-options.md" />
 
-  export default config;
-  ```
+  {/* prettier-ignore-end */}
 
   #### `builder`
 
diff --git a/docs/get-started/frameworks/web-components-vite.mdx b/docs/get-started/frameworks/web-components-vite.mdx
index 82f0c730fcbd..a902b103c8b1 100644
--- a/docs/get-started/frameworks/web-components-vite.mdx
+++ b/docs/get-started/frameworks/web-components-vite.mdx
@@ -1,13 +1,13 @@
 ---
 title: Storybook for Web components & Vite
 sidebar:
-  order: 10
+  order: 11
   title: Web components & Vite
 ---
 
 Storybook for Web components & Vite is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for applications using [Web components](https://www.webcomponents.org/introduction) built with [Vite](https://vitejs.dev/).
 
-<If notRenderer={'web-components'}>
+<If notRenderer="web-components">
   <Callout variant="info">
     Storybook for Web components & Vite is only supported in [Web components](?renderer=web-components) projects.
   </Callout>
@@ -15,7 +15,7 @@ Storybook for Web components & Vite is a [framework](../../contribute/framework.
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={'web-components'}>
+<If renderer="web-components">
   ## Requirements
 
   * Vite ≥ 4.0
@@ -73,20 +73,11 @@ Storybook for Web components & Vite is a [framework](../../contribute/framework.
 
   You can pass an options object for additional configuration if needed:
 
-  ```js
-  // .storybook/main.js
-  import * as path from 'path';
-
-  export default {
-    // ...
-    framework: {
-      name: '@storybook/web-components-vite',
-      options: {
-        // ...
-      },
-    },
-  };
-  ```
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="web-components-vite-framework-options.md" />
+
+  {/* prettier-ignore-end */}  
 
   The available options are:
 
diff --git a/docs/get-started/frameworks/web-components-webpack5.mdx b/docs/get-started/frameworks/web-components-webpack5.mdx
index a9e56ef0ccec..0777cadf806e 100644
--- a/docs/get-started/frameworks/web-components-webpack5.mdx
+++ b/docs/get-started/frameworks/web-components-webpack5.mdx
@@ -1,13 +1,13 @@
 ---
 title: Storybook for Web components & Webpack
 sidebar:
-  order: 11
+  order: 12
   title: Web components & Webpack
 ---
 
 Storybook for Web components & Webpack is a [framework](../../contribute/framework.mdx) that makes it easy to develop and test UI components in isolation for applications using [Web components](https://www.webcomponents.org/introduction) built with [Webpack](https://webpack.js.org/).
 
-<If notRenderer={'web-components'}>
+<If notRenderer="web-components">
   <Callout variant="info">
     Storybook for Web components & Webpack is only supported in [Web components](?renderer=web-components) projects.
   </Callout>
@@ -15,7 +15,7 @@ Storybook for Web components & Webpack is a [framework](../../contribute/framewo
   {/* End non-supported renderers */}
 </If>
 
-<If renderer={'web-components'}>
+<If renderer="web-components">
   ## Requirements
 
   * Webpack ≥ 5.0
@@ -87,30 +87,19 @@ Storybook for Web components & Webpack is a [framework](../../contribute/framewo
 
   ## Hot Module Reloading (HMR)
 
-  Web components are registered on global registry, which only accepts a given name/class once. That can lead to errors when using classical HMR. While there are ideas on how to achieve HMR with a static registry, there is no proven solution yet. Therefore, the best approach for now is to do full page reloads while developing. You can ensure those page reloads happen quickly by defining your stories as specific states of components (which we would recommend regardless).
+  Web components are registered on a global registry, which only accepts a given name/class once. That can lead to errors when using classical HMR. While there are ideas for achieving HMR with a static registry, there has yet to be a proven solution. Therefore, the best approach, for now, is to do full-page reloads while developing. You can ensure that page reloads happen quickly by defining your stories as specific states of components (which we recommend regardless).
 
-  ## Set up es6/7 dependencies
+  ## Set up ES6/7 dependencies
 
-  By default, Storybook only works with precompiled ES5 code. Because most web components themselves and their libs are distributed as ES2017, you will need to manually mark those packages as "needs transpilation".
+  By default, Storybook only works with precompiled ES5 code. Because most Web Components and their libs are distributed as ES2017, you must mark those packages as "needs transpilation" manually.
 
   For example, if you have a library called `my-library` which is in ES2017, then you can configure your project like so:
 
-  ```js
-  // .storybook/main.js
-
-  export default {
-    webpackFinal: async (config) => {
-      // Find web-components rule for extra transpilation
-      const webComponentsRule = config.module.rules.find(
-        (rule) => rule.use && rule.use.options && rule.use.options.babelrc === false
-      );
-      // Add your own `my-library`
-      webComponentsRule.test.push(new RegExp(`node_modules(\\/|\\\\)my-library(.*)\\.js$`));
-
-      return config;
-    },
-  };
-  ```
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="web-components-webpack5-transpilation.md" />
+
+  {/* prettier-ignore-end */}  
 
   By default, the following folders are transpiled:
 
@@ -123,9 +112,9 @@ Storybook for Web components & Webpack is a [framework](../../contribute/framewo
   * `node_modules/@vaadin/*.js`
 
   <Callout variant="info">
-    Note that the `src` folder is also included. This provides some extra configuration to allow for `import.meta` and some other features.
+    Note that the `src` folder is also included. This provides extra configuration for `import.meta` and other features.
 
-    If you use a folder for your components/stories other than `src`, you will need to use the configuration example above to have it properly transpiled.
+    If you use a folder for your components/stories other than `src`, you must use the configuration example above to have it correctly transpiled.
   </Callout>
 
   ## API
@@ -134,20 +123,11 @@ Storybook for Web components & Webpack is a [framework](../../contribute/framewo
 
   You can pass an options object for additional configuration if needed:
 
-  ```js
-  // .storybook/main.js
-  import * as path from 'path';
-
-  export default {
-    // ...
-    framework: {
-      name: '@storybook/web-components-webpack5',
-      options: {
-        // ...
-      },
-    },
-  };
-  ```
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="web-components-webpack5-framework-options.md" />
+
+  {/* prettier-ignore-end */}  
 
   The available options are:
 
@@ -167,7 +147,7 @@ Storybook for Web components & Webpack is a [framework](../../contribute/framewo
   Failed to execute 'define' on 'CustomElementRegistry': the name "..." has already been used with this registry
   ```
 
-  This error occurs because the component is already registered in the global registry. See the [limitations of HMR with web components](#hot-module-reloading-hmr) for more information.
+  This error occurs because the component is already registered in the global registry. For more information, see the [limitations of HMR with web components](#hot-module-reloading-hmr).
 
   {/* End supported renderers */}
 </If>
diff --git a/docs/get-started/install.mdx b/docs/get-started/install.mdx
index 3a01f4b75333..825dd86623f4 100644
--- a/docs/get-started/install.mdx
+++ b/docs/get-started/install.mdx
@@ -13,7 +13,7 @@ Use the Storybook CLI to install it in a single command. Run this inside your pr
 
 {/* prettier-ignore-end */}
 
-<details>
+<details id="custom-storybook-version">
   <summary>Install a specific version</summary>
 
   The `init` command will use whichever version you specify. For example:
@@ -119,28 +119,18 @@ There are some noteworthy items here:
 
   {/* prettier-ignore-end */}
 
+  <If notRenderer="angular">
+
+    #### Storybook doesn't work with an empty directory
+
+    By default, Storybook is configured to detect whether you're initializing it on an empty directory or an existing project. However, if you attempt to initialize Storybook, select a Vite-based framework (e.g., [React](./frameworks/react-vite.mdx)) in a directory that only contains a `package.json` file, you may run into issues with [Yarn Modern](https://yarnpkg.com/getting-started). This is due to how Yarn handles peer dependencies and how Storybook is set up to work with Vite-based frameworks, as it requires the [Vite](https://vitejs.dev/) package to be installed. To solve this issue, you must install Vite manually and initialize Storybook.
+    
+  </If>
+  
   <IfRenderer renderer="angular">
     #### Storybook doesn't work with my Angular project using the Angular CLI
 
-    Out of the box, adding Storybook to an Angular project using the Angular CLI requires you to run the installation command from the root of the project or, if you're working with a monorepo environment, from the directory where the Angular configuration file (i.e., `angular.json`) is located as it will be used to set up the builder configuration necessary to run Storybook. However, if you need, you can extend the builder configuration to customize Storybook's behavior. Listed below are the supported options:
-
-    | Configuration element        | Description                                                                                                                                                                                         |
-    | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-    | `"browserTarget"`            | Build target to be served using the following format. <br /> `"example-project:builder:config"`                                                                                                     |
-    | `"tsConfig"`                 | Location of the TypeScript configuration file, relative to the current workspace. <br /> `"tsConfig": "./tsconfig.json"`.                                                                           |
-    | `"port"`                     | Port used by Storybook. <br /> `"port": 6006`                                                                                                                                                       |
-    | `"host"`                     | Set up a custom host for Storybook. <br /> `"host": "http://my-custom-host"`                                                                                                                        |
-    | `"configDir"`                | Storybook configuration directory location. <br /> `"configDir": ".storybook"`                                                                                                                      |
-    | `"https"`                    | Starts Storybook with HTTPS enabled. <br /> `"https": true` <br /> Requires custom certificate information.                                                                                         |
-    | `"sslCa"`                    | Provides an SSL certificate authority. <br /> `"sslCa": "your-custom-certificate-authority"` <br /> Optional usage with `"https"`                                                                   |
-    | `"sslCert"`                  | Provides an SSL certificate. <br /> `"sslCert": "your-custom-certificate"` <br /> Required for `https`                                                                                              |
-    | `"sslKey"`                   | Provides an SSL key to serve Storybook. <br /> `"sslKey": "your-ssl-key"`                                                                                                                           |
-    | `"smokeTest"`                | Exit Storybook after successful start. <br /> `"smokeTest": true`                                                                                                                                   |
-    | `"ci"`                       | Starts Storybook in CI mode (skips interactive prompts and will not open browser window). <br /> `"ci": true`                                                                                       |
-    | `"quiet"`                    | Filters Storybook verbose build output. <br /> `"quiet": true`                                                                                                                                      |
-    | `"docs"`                     | Starts Storybook in [documentation mode](../writing-docs/build-documentation.mdx#preview-storybooks-documentation). <br /> `"docs": true`                                                           |
-    | `"styles"`                   | Provide the location of the [application's styles](../configure/styling-and-css.mdx#importing-css-files) to be used with Storybook. <br /> `"styles": ["src/styles.css", "src/styles.scss"]` <br /> |
-    | `"stylePreprocessorOptions"` | Provides further customization for style preprocessors resolved to the workspace root. <br /> `"stylePreprocessorOptions": { "includePaths": ["src/styles"] }`                                      |
+    Out of the box, adding Storybook to an Angular project using the Angular CLI requires you to run the installation command from the root of the project or, if you're working with a monorepo environment, from the directory where the Angular configuration file (i.e., `angular.json`) is located as it will be used to set up the builder configuration necessary to run Storybook. However, if you need, you can extend the builder configuration to customize Storybook's behavior. To learn more about the available options, see the [Angular framework documentation](./frameworks/angular.mdx#how-do-i-configure-angulars-builder-for-storybook).
   </IfRenderer>
 
   <IfRenderer renderer="ember">
@@ -171,7 +161,7 @@ There are some noteworthy items here:
   <IfRenderer renderer="svelte">
     #### Writing native Svelte stories
 
-    Storybook provides a Svelte addon maintained by the community, enabling you to write stories for your Svelte components using the template syntax. You'll need to take some additional steps to enable this feature.
+    Storybook provides a Svelte [addon](https://storybook.js.org/addons/@storybook/addon-svelte-csf) maintained by the community, enabling you to write stories for your Svelte components using the template syntax. Starting with Storybook 8.2, the addon is automatically installed and configured when you initialize your project with the Svelte framework. However, if you installed a [specific version](#custom-storybook-version) of Storybook, you'll need to take additional steps to enable this feature.
 
     Run the following command to install the addon.
 
@@ -181,16 +171,22 @@ There are some noteworthy items here:
 
     {/* prettier-ignore-end */}
 
-    Update your Storybook configuration file (i.e., `.storybook/main.js|ts`) to include it.
+    <Callout variant="info">
+
+      The CLI's [`add`](../api/cli-options.mdx#add) command automates the addon's installation and setup. To install it manually, see our [documentation](../addons/install-addons.mdx#manual-installation) on how to install addons.
+    
+    </Callout>
 
+    Update your Storybook configuration file (i.e., `.storybook/main.js|ts`) to enable support for this format.
+  
     {/* prettier-ignore-start */}
 
-    <CodeSnippets path="main-config-csf-addon-register.md" />
+    <CodeSnippets path="main-config-svelte-csf-register.md" />
 
     {/* prettier-ignore-end */}
 
     <Callout variant="info" style={{ marginBottom: "2rem" }}>
-      The community actively maintains the Svelte CSF addon but still lacks some features currently available in the official Storybook Svelte framework support. For more information, see [addon's documentation](https://github.com/storybookjs/addon-svelte-csf).
+      The community actively maintains the Svelte CSF addon but still lacks some features currently available in the official Storybook Svelte framework support. For more information, see the [addon's documentation](https://github.com/storybookjs/addon-svelte-csf).
     </Callout>
   </IfRenderer>
 
@@ -259,6 +255,6 @@ There are some noteworthy items here:
   Now that you have successfully installed Storybook and understood how it works, let's continue where you left off in the [setup wizard](#run-the-setup-wizard) and delve deeper into writing stories.
 </IfRenderer>
 
-<IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'svelte', 'preact', 'qwik','solid' ]}>
+<IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'svelte', 'preact', 'qwik', 'solid' ]}>
   Now that you installed Storybook successfully, let’s take a look at a story that was written for us.
 </IfRenderer>
diff --git a/docs/get-started/setup.mdx b/docs/get-started/setup.mdx
index be35c28e11a2..e922ffc54db1 100644
--- a/docs/get-started/setup.mdx
+++ b/docs/get-started/setup.mdx
@@ -7,11 +7,11 @@ sidebar:
 
 Now that you’ve learned what stories are and how to browse them, let’s demo working on one of your components.
 
-Pick a simple component from your project, like a Button, and write a `.stories.js`, or a `.stories.ts` file to go along with it. It might look something like this:
+Pick a simple component from your project, like a Button, and write a `.stories.js`, `.stories.ts`, or `.stories.svelte` file to go along with it. It might look something like this:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="your-component.md" usesCsf3 csf2Path="get-started/setup#snippet-your-component" />
+<CodeSnippets path="your-component.md" />
 
 {/* prettier-ignore-end */}
 
@@ -66,7 +66,7 @@ Your project may have additional requirements before components can be rendered
 
   A common frontend pattern is for components to assume that they render in a specific “context” with parent components higher up the rendering hierarchy (for instance, theme providers).
 
-  Use [decorators](../writing-stories/decorators.mdx) to “wrap” every story in the necessary context providers. The [`.storybook/preview.js`](../configure/index.mdx#configure-story-rendering) file allows you to customize how components render in Canvas, the preview iframe. See how you can wrap every component rendered in Storybook with [Styled Components](https://styled-components.com/) `ThemeProvider`, [Vue's Fontawesome](https://github.com/FortAwesome/vue-fontawesome), or with an Angular theme provider component in the example below.
+  Use [decorators](../writing-stories/decorators.mdx) to “wrap” every story in the necessary context providers. The [`.storybook/preview.js|ts`](../configure/index.mdx#configure-story-rendering) file allows you to customize how components render in Canvas, the preview iframe. See how you can wrap every component rendered in Storybook with [Styled Components](https://styled-components.com/) `ThemeProvider`, [Vue's Fontawesome](https://github.com/FortAwesome/vue-fontawesome), or with an Angular theme provider component in the example below.
 
   {/* prettier-ignore-start */}
 
diff --git a/docs/get-started/whats-a-story.mdx b/docs/get-started/whats-a-story.mdx
index a08d24ac536f..1b11763a846a 100644
--- a/docs/get-started/whats-a-story.mdx
+++ b/docs/get-started/whats-a-story.mdx
@@ -9,13 +9,25 @@ A story captures the rendered state of a UI component. Developers write multiple
 
 When you installed Storybook, the CLI created example components that demonstrate the types of components you can build with Storybook: Button, Header, and Page.
 
-Each example component has a set of stories that show the states it supports. You can browse the stories in the UI and see the code behind them in files that end with `.stories.js|ts`. The stories are written in [Component Story Format](../api/csf.mdx) (CSF), an ES6 modules-based standard for writing component examples.
+<If renderer="svelte">
 
-Let’s start with the `Button` component. A story is an object that describes how to render the component in question. Here’s how to render `Button` in the “primary” state and export a story called `Primary`.
+  Each example component has a set of stories that show the states it supports. You can browse the stories in the UI and see the code behind them in files that end with `.stories.svelte`. Stories can be written in [Component Story Format](../api/csf.mdx) (CSF), an ES6 modules-based standard for writing component examples or using Svelte native template syntax, via a community-led project called [`Svelte CSF`](https://storybook.js.org/addons/@storybook/addon-svelte-csf).
+
+  Let’s start with the `Button` component. With Svelte, a story can be defined as an object using standard CSF or with a `Story` component using Svelte CSF. Here’s how to render `Button` in the “primary” state and export a story called `Primary` using both approaches.
+
+</If>
+
+<If notRenderer="svelte">
+  
+  Each example component has a set of stories that show the states it supports. You can browse the stories in the UI and see the code behind them in files that end with `.stories.js|ts`. The stories are written in [Component Story Format](../api/csf.mdx) (CSF), an ES6 modules-based standard for writing component examples.
+
+  Let’s start with the `Button` component. A story is an object that describes how to render the component in question. Here’s how to render `Button` in the “primary” state and export a story called `Primary`.
+
+</If>
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-with-args.md" usesCsf3 csf2Path="get-started/whats-a-story#snippet-button-story-with-args" />
+<CodeSnippets path="button-story-with-args.md" />
 
 {/* prettier-ignore-end */}
 
@@ -40,6 +52,16 @@ Storybook makes it easy to work on one component in one state (aka a story) at a
   You can also create a story file for your new story. We recommend copy/pasting an existing story file next to the component source file, then adjusting it for your component.
 </If>
 
+<If renderer="svelte">
+
+  <Callout variant="info">
+
+    This feature is not supported with the Svelte template syntax story format. To opt-in to this feature with Svelte, you must use Storybook's [Component Story Format](../api/csf.mdx).
+    
+  </Callout>
+  
+</If>
+
 <If notRenderer="react">
   If you're working on a component that does not yet have any stories, you can create a story file for your component with a new story. We recommend copy/pasting an existing story file next to the component source file, then adjusting it for your component.
 </If>
diff --git a/docs/get-started/why-storybook.mdx b/docs/get-started/why-storybook.mdx
index e1715fee8a71..83130883f472 100644
--- a/docs/get-started/why-storybook.mdx
+++ b/docs/get-started/why-storybook.mdx
@@ -19,7 +19,7 @@ The breadth of modern frontends overwhelm existing workflows. Developers must co
 
 ## The solution
 
-#### Build UIs in isolation
+### Build UIs in isolation
 
 Every piece of UI is now a [component](https://www.componentdriven.org/). The superpower of components is that you don't need to spin up the whole app just to see how they render. You can render a specific variation in isolation by passing in props, mocking data, or faking events.
 
@@ -27,7 +27,7 @@ Storybook is packaged as a small, development-only, [workshop](https://bradfrost
 
 <Video src="../_assets/get-started/whats-a-story.mp4" />
 
-#### Capture UI variations as “stories”
+### Capture UI variations as “stories”
 
 When developing a component variation in isolation, save it as a story. [Stories](https://github.com/ComponentDriven/csf) are a declarative syntax for supplying props and mock data to simulate component variations. Each component can have multiple stories. Each story allows you to demonstrate a specific variation of that component to verify appearance and behavior.
 
@@ -35,11 +35,11 @@ You write stories for granular UI component variation and then use those stories
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="histogram-story.md" usesCsf3 csf2Path="why-storybook#snippet-histogram-story" />
+<CodeSnippets path="histogram-story.md" />
 
 {/* prettier-ignore-end */}
 
-#### Storybook keeps track of every story
+### Storybook keeps track of every story
 
 Storybook is an interactive directory of your UI components and their stories. In the past, you'd have to spin up the app, navigate to a page, and contort the UI into the right state. This is a huge waste of time and bogs down frontend development. With Storybook, you can skip all those steps and jump straight to working on a UI component in a specific state.
 
diff --git a/docs/sharing/design-integrations.mdx b/docs/sharing/design-integrations.mdx
index dcc1ff4a57d7..1c98edbf39b0 100644
--- a/docs/sharing/design-integrations.mdx
+++ b/docs/sharing/design-integrations.mdx
@@ -70,13 +70,11 @@ Run the following command to install the addon.
 
 {/* prettier-ignore-end */}
 
-Update your Storybook configuration (in `.storybook/main.js|ts`) to include the addon.
+<Callout variant="info">
 
-{/* prettier-ignore-start */}
-
-<CodeSnippets path="storybook-main-figma-addon-register.md" />
+The CLI's [`add`](../api/cli-options.mdx#add) command automates the addon's installation and setup. To install it manually, see our [documentation](../addons/install-addons.mdx#manual-installation) on how to install addons.
 
-{/* prettier-ignore-end */}
+</Callout>
 
 #### Link Figma components to stories
 
@@ -90,7 +88,7 @@ In Storybook, add a new [parameter](../writing-stories/parameters.mdx) named `de
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="component-story-figma-integration.md" usesCsf3 csf2Path="sharing/design-integrations#snippet-component-story-figma-integration" />
+<CodeSnippets path="component-story-figma-integration.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/sharing/package-composition.mdx b/docs/sharing/package-composition.mdx
index 0dcb800d4a4e..1531370d2d21 100644
--- a/docs/sharing/package-composition.mdx
+++ b/docs/sharing/package-composition.mdx
@@ -39,10 +39,9 @@ Change the version of the composed Storybook to see how the library evolves. Thi
 
 Component library authors can expand adoption by composing their components in their consumer’s Storybooks.
 
-Add a `storybook` property in your published `package.json`that contains an object with a `url` field. Point the URL field to a published Storybook at the version you want.
+Add a `storybook` property in your published `package.json` that contains an object with a `url` field. Point the URL field to a published Storybook at the version you want.
 
-```json
-// Your component library’s package.json
+```json title="package.json"
 {
   "storybook": {
     "url": "https://host.com/your-storybook-for-this-version"
@@ -54,7 +53,7 @@ Add a `storybook` property in your published `package.json`that contains an obje
 
 If you're using [Chromatic](./publish-storybook.mdx#publish-storybook-with-chromatic), you can provide a single URL for your Storybook in the `storybook.url` field. You do not need to change the URL each time you publish a new version. Storybook will automatically find the correct URL for your package. For example:
 
-```json
+```json title="package.json"
 {
   "storybook": {
     "url": "https://master--xyz123.chromatic.com"
diff --git a/docs/sharing/publish-storybook.mdx b/docs/sharing/publish-storybook.mdx
index 9a29b5cd6d1a..d02cf0c07339 100644
--- a/docs/sharing/publish-storybook.mdx
+++ b/docs/sharing/publish-storybook.mdx
@@ -142,7 +142,7 @@ To deploy Storybook on GitHub Pages, use the community-built [Deploy Storybook t
 </Callout>
 
 <details>
-  <summary><h2>Component Publishing Protocol (CPP)</h2></summary>
+  <summary><h3>Component Publishing Protocol (CPP)</h3></summary>
 
   Storybook can communicate with services that host built Storybooks online. This enables features such as [Composition](./storybook-composition.mdx). We categorize services via compliance with the "Component Publishing Protocol" (CPP) with various levels of support in Storybook.
 
diff --git a/docs/versions/latest.json b/docs/versions/latest.json
index db378469890e..f4ffa468f059 100644
--- a/docs/versions/latest.json
+++ b/docs/versions/latest.json
@@ -1 +1 @@
-{"version":"8.3.0","info":{"plain":""}}
+{"version":"8.4.0","info":{"plain":""}}
diff --git a/docs/versions/next.json b/docs/versions/next.json
index 9963ff265181..b620efbf34e0 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"8.4.0-alpha.0","info":{"plain":""}}
+{"version":"8.5.0-beta.5","info":{"plain":"- Addon Test: Only reset story count on file change when watch mode is enabled - [#30121](https://github.com/storybookjs/storybook/pull/30121), thanks @ghengeveld!\n- Build: Revert Downgrade to esbuild 0.24.0 - [#30120](https://github.com/storybookjs/storybook/pull/30120), thanks @yannbf!\n- Core: Fix `ERR_PACKAGE_PATH_NOT_EXPORTED` in `@storybook/node-logger`  - [#30093](https://github.com/storybookjs/storybook/pull/30093), thanks @JReinhold!\n- React: Use Act wrapper in Storybook for component rendering - [#30037](https://github.com/storybookjs/storybook/pull/30037), thanks @valentinpalkovic!\n- Vite: Add extra entries to `optimizeDeps` - [#30117](https://github.com/storybookjs/storybook/pull/30117), thanks @ndelangen!"}}
diff --git a/docs/writing-docs/autodocs.mdx b/docs/writing-docs/autodocs.mdx
index b78935a1a2b3..02e5b77db8ec 100644
--- a/docs/writing-docs/autodocs.mdx
+++ b/docs/writing-docs/autodocs.mdx
@@ -96,7 +96,7 @@ You can also use MDX to generate the documentation template. This is useful in n
 
 {/* prettier-ignore-end */}
 
-Then you can use it in your `.storybook/preview.js` or an individual story file by importing it:
+Then you can use it in your `.storybook/preview.js|ts` or an individual story file by importing it:
 
 {/* prettier-ignore-start */}
 
@@ -112,7 +112,7 @@ Then you can use it in your `.storybook/preview.js` or an individual story file
 
 ### Generate a table of contents
 
-Storybook's auto-generated documentation pages can be quite long and difficult to navigate. To help with this, you can enable the table of contents feature to provide a quick overview of the documentation page and allow users to jump to a specific section. To enable it, extend your Storybook UI configuration file (i.e., `.storybook/preview.js`) and provide a `docs` [parameter](../writing-stories/parameters.mdx#global-parameters) with a `toc` property.
+Storybook's auto-generated documentation pages can be quite long and difficult to navigate. To help with this, you can enable the table of contents feature to provide a quick overview of the documentation page and allow users to jump to a specific section. To enable it, extend your Storybook UI configuration file (i.e., `.storybook/preview.js|ts`) and provide a `docs` [parameter](../writing-stories/parameters.mdx#global-parameters) with a `toc` property.
 
 {/* prettier-ignore-start */}
 
@@ -169,7 +169,7 @@ Autodocs allows you to document your "main" component, defined by the `component
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="list-story-with-subcomponents.md" usesCsf3 csf2Path="writing-stories/stories-for-multiple-components#snippet-list-story-with-subcomponents" />
+<CodeSnippets path="list-story-with-subcomponents.md" />
 
 {/* prettier-ignore-end */}
 
@@ -181,7 +181,7 @@ If you want to organize your documentation differently for component groups, we
 
 ### Customize the Docs Container
 
-The Docs Container is the component that wraps up the documentation page. It's responsible for rendering the documentation page in Storybook's UI. You can customize it by creating your own component and updating your Storybook UI configuration file (i.e., `.storybook/preview.js`) to reference it.
+The Docs Container is the component that wraps up the documentation page. It's responsible for rendering the documentation page in Storybook's UI. You can customize it by creating your own component and updating your Storybook UI configuration file (i.e., `.storybook/preview.js|ts`) to reference it.
 
 {/* prettier-ignore-start */}
 
@@ -191,7 +191,7 @@ The Docs Container is the component that wraps up the documentation page. It's r
 
 ### Override the default theme
 
-By default, Storybook provides two themes for the UI: `light` and `dark`. If you need to customize the theme used by the documentation to match the existing one, you can update your Storybook UI configuration file (i.e., `.storybook/preview.js`) and apply it.
+By default, Storybook provides two themes for the UI: `light` and `dark`. If you need to customize the theme used by the documentation to match the existing one, you can update your Storybook UI configuration file (i.e., `.storybook/preview.js|ts`) and apply it.
 
 {/* prettier-ignore-start */}
 
diff --git a/docs/writing-docs/build-documentation.mdx b/docs/writing-docs/build-documentation.mdx
index 19f052996a4d..0d6716c0e51f 100644
--- a/docs/writing-docs/build-documentation.mdx
+++ b/docs/writing-docs/build-documentation.mdx
@@ -11,7 +11,7 @@ Storybook allows you to create rich and extensive [documentation](./index.mdx) t
 
 At any point during your development, you can preview the documentation you've written. Storybook allows you to generate a preview of the final documentation when you use the `--docs` flag. We recommend including it in your `package.json` as a new script:
 
-```json
+```json title="package.json"
 {
   "scripts": {
     "storybook-docs": "storybook dev --docs"
@@ -35,7 +35,7 @@ There's some caveats to this build mode, as to the normal Storybook build:
 
 You can also publish your documentation the same you would [publish](../sharing/publish-storybook.mdx) your Storybook. You can use the `--docs` flag with the [`storybook build`](../api/cli-options.mdx#build) command. We recommend as well including it as a script in your `package.json` file:
 
-```json
+```json title="package.json"
 {
   "scripts": {
     "build-storybook-docs": "storybook build --docs"
diff --git a/docs/writing-docs/mdx.mdx b/docs/writing-docs/mdx.mdx
index 2f73ab8fb2d3..45694464105b 100644
--- a/docs/writing-docs/mdx.mdx
+++ b/docs/writing-docs/mdx.mdx
@@ -33,7 +33,7 @@ This MDX file references a story file, `Checkbox.stories.js|ts`, that is written
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="checkbox-story-csf.md" usesCsf3 csf2Path="writing-docs/mdx#snippet-checkbox-story-csf" />
+<CodeSnippets path="checkbox-story-csf.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/writing-stories/args.mdx b/docs/writing-stories/args.mdx
index 94b12059142d..7b3d3678d4a3 100644
--- a/docs/writing-stories/args.mdx
+++ b/docs/writing-stories/args.mdx
@@ -19,11 +19,21 @@ The `args` object can be defined at the [story](#story-args), [component](#compo
 
 ## Story args
 
-To define the args of a single story, use the `args` CSF story key:
+<IfRenderer renderer="svelte">
+
+  To define the args of a single story, use the `args` property in the `Story` component if you are using Svelte CSF with the native templating syntax, or use the `args` key on a CSF story file:
+
+</IfRenderer>
+
+<If notRenderer="svelte">
+
+  To define the args of a single story, use the `args` CSF story key:
+
+</If>
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-with-args.md" usesCsf3 csf2Path="writing-stories/args#snippet-button-story-with-args" />
+<CodeSnippets path="button-story-with-args.md" />
 
 {/* prettier-ignore-end */}
 
@@ -31,7 +41,7 @@ These args will only apply to the story for which they are attached, although yo
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-primary-long-name.md" usesCsf3 csf2Path="writing-stories/args#snippet-button-story-primary-long-name" />
+<CodeSnippets path="button-story-primary-long-name.md" />
 
 {/* prettier-ignore-end */}
 
@@ -39,17 +49,27 @@ In the above example, we use the [object spread](https://developer.mozilla.org/e
 
 ## Component args
 
-You can also define args at the component level; they will apply to all the component's stories unless you overwrite them. To do so, use the `args` key on the `default` CSF export:
+<IfRenderer renderer="svelte">
+
+  You can also define args at the component level; they will apply to all the component's stories unless you overwrite them. To do so, use the `args` property in the `defineMeta` function of a Svelte CSF story file or via the `args` key on the default CSF export:
+
+</IfRenderer>
+
+<If notRenderer="svelte">
+
+  You can also define args at the component level; they will apply to all the component's stories unless you overwrite them. To do so, use the `args` key on the `default` CSF export:
+
+</If>
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-component-args-primary.md" usesCsf3 csf2Path="writing-stories/args#snippet-button-story-component-args-primary" />
+<CodeSnippets path="button-story-component-args-primary.md" />
 
 {/* prettier-ignore-end */}
 
 ## Global args
 
-You can also define args at the global level; they will apply to every component's stories unless you overwrite them. To do so, define the `args` property in the default export of `preview.js`:
+You can also define args at the global level; they will apply to every component's stories unless you overwrite them. To do so, define the `args` property in the default export of `preview.js|ts`:
 
 {/* prettier-ignore-start */}
 
@@ -67,7 +87,7 @@ You can separate the arguments to a story to compose in other stories. Here's ho
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-primary-composition.md" usesCsf3 csf2Path="writing-stories/args#snippet-button-story-primary-composition" />
+<CodeSnippets path="button-story-primary-composition.md" />
 
 {/* prettier-ignore-end */}
 
@@ -79,23 +99,19 @@ Args are useful when writing stories for composite components that are assembled
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="page-story.md" usesCsf3 csf2Path="writing-stories/args#snippet-page-story" />
+<CodeSnippets path="page-story.md" />
 
 {/* prettier-ignore-end */}
 
-<IfRenderer renderer={[ 'angular', 'ember', 'html', 'preact', 'qwik', 'react', 'solid', 'vue', 'web-components' ]}>
-  {/* Uncomment once frameworks that support custom templates are enabled to prevent misinformation about the example */}
+## Args can modify any aspect of your component
 
-  ## Args can modify any aspect of your component
+You can use args in your stories to configure the component's appearance, similar to what you would do in an application. For example, here's how you could use a `footer` arg to populate a child component:
 
-  You can use args in your stories to configure the component's appearance, similar to what you would do in an application. For example, here's how you could use a `footer` arg to populate a child component:
-
-  {/* prettier-ignore-start */}
+{/* prettier-ignore-start */}
 
-  <CodeSnippets path="page-story-slots.md" usesCsf3 csf2Path="writing-stories/args#snippet-page-story-slots" />
+<CodeSnippets path="page-story-slots.md" />
 
-  {/* prettier-ignore-end */}
-</IfRenderer>
+{/* prettier-ignore-end */}
 
 ## Setting args through the URL
 
diff --git a/docs/writing-stories/build-pages-with-storybook.mdx b/docs/writing-stories/build-pages-with-storybook.mdx
index d2a91f007c14..fb69221d384d 100644
--- a/docs/writing-stories/build-pages-with-storybook.mdx
+++ b/docs/writing-stories/build-pages-with-storybook.mdx
@@ -45,7 +45,7 @@ In such cases, it is natural to use [args composition](./args.mdx#args-compositi
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="page-story-with-args-composition.md" usesCsf3 csf2Path="writing-stories/build-pages-with-storybook#snippet-page-story-with-args-composition" />
+<CodeSnippets path="page-story-with-args-composition.md" />
 
 {/* prettier-ignore-end */}
 
@@ -113,7 +113,7 @@ Components can receive data or configuration from context providers. For example
 
   {/* prettier-ignore-start */}
 
-  <CodeSnippets path="mock-context-container.md" usesCsf3 csf2Path="writing-stories/build-pages-with-storybook#snippet-mock-context-container" />
+  <CodeSnippets path="mock-context-container.md" />
 
   {/* prettier-ignore-end */}
 
diff --git a/docs/writing-stories/decorators.mdx b/docs/writing-stories/decorators.mdx
index e155bcb33002..ca01afe2ac5a 100644
--- a/docs/writing-stories/decorators.mdx
+++ b/docs/writing-stories/decorators.mdx
@@ -13,15 +13,43 @@ When writing stories, decorators are typically used to wrap stories with extra m
 
 ## Wrap stories with extra markup
 
-Some components require a “harness” to render in a useful way. For instance, if a component runs right up to its edges, you might want to space it inside Storybook. Use a decorator to add spacing for all stories of the component.
+<IfRenderer renderer="svelte">
 
-![Story without padding](../_assets/writing-stories/decorators-no-padding.png)
+  Some components require a “harness” to render in a useful way. For instance, if a component runs right up to its edges, you might want to space it inside Storybook. With Svelte, you'll need to take additional steps to set it up properly.
 
-{/* prettier-ignore-start */}
+  ![Story without padding](../_assets/writing-stories/decorators-no-padding.png)
 
-<CodeSnippets path="your-component-with-decorator.md" />
+  Start by creating a new Svelte component that will act as a decorator. This component will wrap your story and provide the required spacing or layout elements.
 
-{/* prettier-ignore-end */}
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="margindecorator.md" />
+
+  {/* prettier-ignore-end */}
+
+  Update your story to include the component and reference it to apply the required spacing or other functionality for all its stories.
+
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="your-component-with-decorator.md" />
+
+  {/* prettier-ignore-end */}
+
+</IfRenderer>
+
+<If notRenderer="svelte">
+
+  Some components require a “harness” to render in a useful way. For instance, if a component runs right up to its edges, you might want to space it inside Storybook. Use a decorator to add spacing for all stories of the component.
+
+  ![Story without padding](../_assets/writing-stories/decorators-no-padding.png)
+
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="your-component-with-decorator.md" />
+
+  {/* prettier-ignore-end */}
+
+</If>
 
 ![Story with padding](../_assets/writing-stories/decorators-padding.png)
 
@@ -55,11 +83,21 @@ If your components are “connected” and require side-loaded data to render, y
 
 ## Story decorators
 
-To define a decorator for a single story, use the `decorators` key on a named export:
+<IfRenderer renderer="svelte">
+
+  To define a decorator for a single story, use the `decorators` property in the `Story` component if you are using Svelte CSF with the native templating syntax, or use the `decorators` key on a CSF named export:
+
+</IfRenderer>
+
+<If notRenderer="svelte">
+
+  To define a decorator for a single story, use the `decorators` key on a named export:
+
+</If>
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-decorator.md" usesCsf3 csf2Path="writing-stories/decorators#snippet-button-story-decorator" />
+<CodeSnippets path="button-story-decorator.md" />
 
 {/* prettier-ignore-end */}
 
@@ -67,7 +105,17 @@ It is useful to ensure that the story remains a “pure” rendering of the comp
 
 ## Component decorators
 
-To define a decorator for all stories of a component, use the `decorators` key of the default CSF export:
+<IfRenderer renderer="svelte">
+
+  To define a decorator for all component stories, include the `decorators` property in the `defineMeta` function of a Svelte CSF story file. Alternatively, use the `decorators` key on the default CSF export:
+
+</IfRenderer>
+
+<If notRenderer="svelte">
+
+  To define a decorator for all stories of a component, use the `decorators` key of the default CSF export:
+
+</If>
 
 {/* prettier-ignore-start */}
 
@@ -77,7 +125,7 @@ To define a decorator for all stories of a component, use the `decorators` key o
 
 ## Global decorators
 
-We can also set a decorator for **all stories** via the `decorators` export of your [`.storybook/preview.js`](../configure/index.mdx#configure-story-rendering) file (this is the file where you configure all stories):
+We can also set a decorator for **all stories** via the `decorators` export of your [`.storybook/preview.js|ts`](../configure/index.mdx#configure-story-rendering) file (this is the file where you configure all stories):
 
 {/* prettier-ignore-start */}
 
@@ -93,4 +141,4 @@ All decorators relevant to a story will run in the following order once the stor
 
 * Global decorators, in the order they are defined
 * Component decorators, in the order they are defined
-* Story decorators, in the order they are defined
+* Story decorators, in the order they are defined, starting from the innermost decorator and working outwards and up the hierarchy in the same order
diff --git a/docs/writing-stories/index.mdx b/docs/writing-stories/index.mdx
index 72ec0bf088da..6cf05e520c43 100644
--- a/docs/writing-stories/index.mdx
+++ b/docs/writing-stories/index.mdx
@@ -7,50 +7,104 @@ sidebar:
 
 <YouTubeCallout id="P0WHt_L0-2g" title="How to write Storybook stories | Component Story Format" />
 
-A story captures the rendered state of a UI component. It's an object with annotations that describe the component's behavior and appearance given a set of arguments.
+<If renderer="svelte">
+
+  A story captures the rendered state of a UI component. Given a set of arguments, it can be a simple object with annotations or a component that describes its behavior and appearance.
+
+</If>
+
+<If notRenderer="svelte">
+
+  A story captures the rendered state of a UI component. It's an object with annotations that describe the component's behavior and appearance given a set of arguments.
+
+</If>
 
 Storybook uses the generic term arguments (args for short) when talking about React’s `props`, Vue’s `props`, Angular’s `@Input`, and other similar concepts.
 
 ## Where to put stories
 
-A component’s stories are defined in a story file that lives alongside the component file. The story file is for development-only, and it won't be included in your production bundle. In your filesytem, it looks something like this:
+A component’s stories are defined in a story file that lives alongside the component file. The story file is for development-only, and it won't be included in your production bundle. In your filesystem, it looks something like this:
 
 ```
 components/
 ├─ Button/
 │  ├─ Button.js | ts | jsx | tsx | vue | svelte
-│  ├─ Button.stories.js | ts | jsx | tsx
+│  ├─ Button.stories.js | ts | jsx | tsx | svelte
 ```
 
 ## Component Story Format
 
-We define stories according to the [Component Story Format](../api/csf.mdx) (CSF), an ES6 module-based standard that is easy to write and portable between tools.
+<If renderer="svelte">
+
+  We can define stories according to the [Component Story Format](../api/csf.mdx) (CSF), an ES6 module-based standard that is easy to write and portable between tools, or rely on the community-led project [`Svelte CSF`](https://storybook.js.org/addons/@storybook/addon-svelte-csf) which provides a similar experience. 
+   
+  With Svelte CSF, the essential elements are the `defineMeta` function, which describes the component, and the `Story` component, which describes the stories. This pattern is different from the standard CSF, which uses a [default export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_the_default_export) and [named exports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_named_exports) to apply the same concepts.
+  
+</If>
+
+<If notRenderer="svelte">
+
+  We define stories according to the [Component Story Format](../api/csf.mdx) (CSF), an ES6 module-based standard that is easy to write and portable between tools.
 
-The key ingredients are the [default export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_the_default_export) that describes the component, and [named exports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_named_exports) that describe the stories.
+  The key ingredients are the [default export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_the_default_export) that describes the component, and [named exports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_named_exports) that describe the stories.
+
+</If>
 
 ### Default export
 
-The *default* export metadata controls how Storybook lists your stories and provides information used by addons. For example, here’s the default export for a story file `Button.stories.js|ts`:
+<If renderer="svelte">
 
-{/* prettier-ignore-start */}
+  The `defineMeta` function in Svelte CSF with native templating syntax controls how Storybook lists your stories and provides information used by addons. However, if you're not using this story format and relying on standard CSF, use the *default* export to achieve the same result. Below is an example of a story file with both approaches:
 
-<CodeSnippets path="button-story-default-export-with-component.md" />
+  {/* prettier-ignore-start */}
 
-{/* prettier-ignore-end */}
+  <CodeSnippets path="button-story-default-export-with-component.md" />
 
-<Callout variant="info">
+  {/* prettier-ignore-end */}
 
-  Starting with Storybook version 7.0, story titles are analyzed statically as part of the build process. The *default* export must contain a `title` property that can be read statically or a `component` property from which an automatic title can be computed. Using the `id` property to customize your story URL must also be statically readable.
+  <Callout variant="info">
+
+    Starting with Storybook version 7.0, story titles are analyzed statically as part of the build process. With Svelte, the `defineMeta` function or *default* export must contain a `title` property that can be read statically. Using the `id` property to customize your story URL must also be statically readable.
+
+  </Callout>
+
+</If>
+
+<If notRenderer="svelte">
+
+  The *default* export metadata controls how Storybook lists your stories and provides information used by addons. For example, here’s the default export for a story file `Button.stories.js|ts`:
+
+  {/* prettier-ignore-start */}
+
+  <CodeSnippets path="button-story-default-export-with-component.md" />
+
+  {/* prettier-ignore-end */}
+
+  <Callout variant="info">
+
+    Starting with Storybook version 7.0, story titles are analyzed statically as part of the build process. The *default* export must contain a `title` property that can be read statically or a `component` property from which an automatic title can be computed. Using the `id` property to customize your story URL must also be statically readable.
   
-</Callout>
+  </Callout>
+
+</If>
 
 ### Defining stories
 
-Use the *named* exports of a CSF file to define your component’s stories. We recommend you use UpperCamelCase for your story exports. Here’s how to render `Button` in the “primary” state and export a story called `Primary`.
+<If renderer="svelte">
+ 
+  If you're using Svelte CSF, define your stories with the `Story` component, otherwise use the named exports of a standard CSF file. We recommend you use UpperCamelCase for your story exports. Here’s how to render `Button` in the “primary” state and export a story called `Primary` using both methods.
+
+</If>
+
+<If notRenderer="svelte">
+
+  Use the *named* exports of a CSF file to define your component’s stories. We recommend you use UpperCamelCase for your story exports. Here’s how to render `Button` in the “primary” state and export a story called `Primary`.
+
+</If>
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-with-args.md" usesCsf3 csf2Path="get-started/whats-a-story#snippet-button-story-with-args" />
+<CodeSnippets path="button-story-with-args.md" />
 
 {/* prettier-ignore-end */}
 
@@ -61,7 +115,7 @@ Use the *named* exports of a CSF file to define your component’s stories. We r
 
   {/* prettier-ignore-start */}
 
-  <CodeSnippets path="button-story.md" usesCsf3 csf2Path="writing-stories/#snippet-button-story-with-hooks" />
+  <CodeSnippets path="button-story.md" />
 
   {/* prettier-ignore-end */}
 </IfRenderer>
@@ -73,7 +127,7 @@ Use the *named* exports of a CSF file to define your component’s stories. We r
 
   {/* prettier-ignore-start */}
 
-  <CodeSnippets path="button-story.md" usesCsf3 csf2Path="writing-stories/#snippet-button-story-with-hooks" />
+  <CodeSnippets path="button-story.md" />
 
   {/* prettier-ignore-end */}
 </IfRenderer>
@@ -84,7 +138,7 @@ You can rename any particular story you need. For instance, to give it a more ac
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-rename-story.md" usesCsf3 csf2Path="writing-stories/#snippet-button-story-rename-story" />
+<CodeSnippets path="button-story-rename-story.md" />
 
 {/* prettier-ignore-end */}
 
@@ -96,11 +150,23 @@ Your story will now be shown in the sidebar with the given text.
 
 ## How to write stories
 
-A story is an object that describes how to render a component. You can have multiple stories per component, and those stories can build upon one another. For example, we can add Secondary and Tertiary stories based on our Primary story from above.
+
+<IfRenderer renderer="svelte">
+
+  With Svelte, stories can be defined as objects using standard CSF or with Svelte CSF's `Story` component. Both methods describe how to render a component. You can have multiple stories per component, and those stories can build upon one another. For example, we can add Secondary and Tertiary stories based on our Primary story above.
+
+</IfRenderer>
+
+<If notRenderer="svelte">
+
+  A story is an object that describes how to render a component. You can have multiple stories per component, and those stories can build upon one another. For example, we can add Secondary and Tertiary stories based on our Primary story from above.
+
+</If>
+
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-using-args.md" usesCsf3 csf2Path="writing-stories/#snippet-button-story-using-args" />
+<CodeSnippets path="button-story-using-args.md" />
 
 {/* prettier-ignore-end */}
 
@@ -108,7 +174,7 @@ What’s more, you can import `args` to reuse when writing stories for other com
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-group-story.md" usesCsf3 csf2Path="writing-stories/#snippet-button-group-story" />
+<CodeSnippets path="button-group-story.md" />
 
 {/* prettier-ignore-end */}
 
@@ -122,6 +188,16 @@ You can also use the Controls panel to edit or save a new story after adjusting
 
 <Video src="../_assets/get-started/edit-story-from-controls-optimized.mp4" />
 
+<If renderer="svelte">
+
+  <Callout variant="info">
+
+    This feature is not supported with the Svelte CSF. To opt-in to this feature with Svelte, you must use Storybook's [Component Story Format](../api/csf.mdx).
+  
+  </Callout>
+  
+</If>
+
 Addons can enhance args. For instance, [Actions](../essentials/actions.mdx) auto-detects which args are callbacks and appends a logging function to them. That way, interactions (like clicks) get logged in the actions panel.
 
 <Video src="../_assets/writing-stories/addon-actions-demo-optimized.mp4" />
@@ -132,7 +208,7 @@ Storybook's `play` function and the [`@storybook/addon-interactions`](https://st
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="login-form-with-play-function.md" usesCsf3 csf2Path="writing-stories/#snippet-login-form-with-play-function" />
+<CodeSnippets path="login-form-with-play-function.md" />
 
 Without the help of the `play` function and the `@storybook/addon-interactions`, you had to write your own stories and manually interact with the component to test out each use case scenario possible.
 
@@ -156,7 +232,24 @@ This parameter would instruct the backgrounds addon to reconfigure itself whenev
 
 Decorators are a mechanism to wrap a component in arbitrary markup when rendering a story. Components are often created with assumptions about ‘where’ they render. Your styles might expect a theme or layout wrapper, or your UI might expect specific context or data providers.
 
-A simple example is adding padding to a component’s stories. Accomplish this using a decorator that wraps the stories in a `div` with padding, like so:
+<IfRenderer renderer="svelte">
+  
+  A simple example is adding padding to a component’s stories. With Svelte, you can either use an auxiliary component to wrap your stories with the required spacing or layout elements, or ignore the concept of decorators entirely and define them inline in a template.
+   
+  { /* prettier-ignore-start */}
+  
+  <CodeSnippets path="margindecorator.md" />
+  
+  { /* prettier-ignore-end */}
+  
+
+</IfRenderer>
+
+<If notRenderer="svelte">
+
+  A simple example is adding padding to a component’s stories. Accomplish this using a decorator that wraps the stories in a `div` with padding, like so:
+
+</If>
 
 {/* prettier-ignore-start */}
 
@@ -172,7 +265,7 @@ Sometimes you may have two or more components created to work together. For inst
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="list-story-starter.md" usesCsf3 csf2Path="writing-stories/#snippet-list-story-starter" />
+<CodeSnippets path="list-story-starter.md" />
 
 {/* prettier-ignore-end */}
 
@@ -180,7 +273,7 @@ In such cases, it makes sense to render a different function for each story:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="list-story-expanded.md" usesCsf3 csf2Path="writing-stories/#snippet-list-story-expanded" />
+<CodeSnippets path="list-story-expanded.md" />
 
 {/* prettier-ignore-end */}
 
@@ -188,7 +281,7 @@ You can also reuse *story data* from the child `ListItem` in your `List` compone
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="list-story-reuse-data.md" usesCsf3 csf2Path="writing-stories/#snippet-list-story-reuse-data" />
+<CodeSnippets path="list-story-reuse-data.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/writing-stories/loaders.mdx b/docs/writing-stories/loaders.mdx
index 1fd5ee836aeb..1434906b1124 100644
--- a/docs/writing-stories/loaders.mdx
+++ b/docs/writing-stories/loaders.mdx
@@ -19,7 +19,7 @@ Loaders are helpful when you need to load story data externally (e.g., from a re
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="loader-story.md" usesCsf3 csf2Path="writing-stories/loaders#snippet-loader-story" />
+<CodeSnippets path="loader-story.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/writing-stories/mocking-data-and-modules/mocking-network-requests.mdx b/docs/writing-stories/mocking-data-and-modules/mocking-network-requests.mdx
index ec53863e9f4b..7b7868c1f5d6 100644
--- a/docs/writing-stories/mocking-data-and-modules/mocking-network-requests.mdx
+++ b/docs/writing-stories/mocking-data-and-modules/mocking-network-requests.mdx
@@ -67,7 +67,7 @@ With the MSW addon, we can write stories that use MSW to mock the REST requests.
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="msw-addon-configure-handlers-http.md" usesCsf3 csf2Path="writing-stories/build-pages-with-storybook#snippet-documentscreen-story-msw-rest-request" />
+<CodeSnippets path="msw-addon-configure-handlers-http.md" />
 
 {/* prettier-ignore-end */}
 
@@ -89,7 +89,7 @@ The MSW addon allows you to write stories that use MSW to mock the GraphQL reque
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="msw-addon-configure-handlers-graphql.md" usesCsf3 csf2Path="writing-stories/build-pages-with-storybook#snippet-documentscreen-story-msw-graphql-query" />
+<CodeSnippets path="msw-addon-configure-handlers-graphql.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/writing-stories/naming-components-and-hierarchy.mdx b/docs/writing-stories/naming-components-and-hierarchy.mdx
index d857310db8b0..228ef51298a5 100644
--- a/docs/writing-stories/naming-components-and-hierarchy.mdx
+++ b/docs/writing-stories/naming-components-and-hierarchy.mdx
@@ -29,7 +29,7 @@ When creating your stories, you can explicitly use the `title` parameter to defi
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-default-export.md" usesCsf3 csf2Path="writing-stories/naming-components-and-hierarchy#snippet-button-story-default-export" />
+<CodeSnippets path="button-story-default-export.md" />
 
 {/* prettier-ignore-end */}
 
@@ -43,13 +43,13 @@ It is also possible to group related components in an expandable interface to he
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-grouped.md" usesCsf3 csf2Path="writing-stories/naming-components-and-hierarchy#snippet-button-story-grouped" />
+<CodeSnippets path="button-story-grouped.md" />
 
 {/* prettier-ignore-end */}
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="checkbox-story-grouped.md" usesCsf3 csf2Path="writing-stories/naming-components-and-hierarchy#snippet-checkbox-story-grouped" />
+<CodeSnippets path="checkbox-story-grouped.md" />
 
 {/* prettier-ignore-end */}
 
@@ -67,7 +67,7 @@ Single-story components (i.e., component stories without **siblings**) whose **d
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="button-story-hoisted.md" usesCsf3 csf2Path="writing-stories/naming-components-and-hierarchy#snippet-button-story-hoisted" />
+<CodeSnippets path="button-story-hoisted.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/writing-stories/parameters.mdx b/docs/writing-stories/parameters.mdx
index 187b54bd2c24..56726601eb2a 100644
--- a/docs/writing-stories/parameters.mdx
+++ b/docs/writing-stories/parameters.mdx
@@ -17,17 +17,37 @@ For example, let’s customize the backgrounds addon via a parameter. We’ll us
 
 ## Story parameters
 
-We can set a parameter for a single story with the `parameters` key on a CSF export:
+<IfRenderer renderer="svelte">
+
+ With Svelte, we can set the `parameters` property in the `Story` component to define parameters for a single story using Svelte CSF with the native templating syntax, or we can use the `parameters` key on a CSF named export:
+ 
+</IfRenderer>
+
+<IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'react', 'preact', 'qwik', 'solid' ]}>
+
+  We can set a parameter for a single story with the `parameters` key on a CSF export:
+
+</IfRenderer>
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="parameters-in-story.md" usesCsf3 csf2Path="writing-stories/parameters#snippet-component-story-custom-params" />
+<CodeSnippets path="parameters-in-story.md" />
 
 {/* prettier-ignore-end */}
 
 ## Component parameters
 
-We can set the parameters for all stories of a component using the `parameters` key on the default CSF export:
+<IfRenderer renderer="svelte">
+ 
+  To define parameters for all stories of a component, we can add the `parameters` property in the `defineMeta` function of a Svelte CSF story file, or we can use the `parameters` key on the default CSF export:
+
+</IfRenderer>
+
+<If notRenderer="svelte">
+
+  We can set the parameters for all stories of a component using the `parameters` key on the default CSF export:
+
+</If>
 
 {/* prettier-ignore-start */}
 
@@ -37,7 +57,7 @@ We can set the parameters for all stories of a component using the `parameters`
 
 ## Global parameters
 
-We can also set the parameters for **all stories** via the `parameters` export of your [`.storybook/preview.js`](../configure/index.mdx#configure-story-rendering) file (this is the file where you configure all stories):
+We can also set the parameters for **all stories** via the `parameters` export of your [`.storybook/preview.js|ts`](../configure/index.mdx#configure-story-rendering) file (this is the file where you configure all stories):
 
 {/* prettier-ignore-start */}
 
@@ -52,8 +72,8 @@ Setting a global parameter is a common way to configure addons. With backgrounds
 The way the global, component and story parameters are combined is:
 
 * More specific parameters take precedence (so a story parameter overwrites a component parameter which overwrites a global parameter).
-* Parameters are **merged** so keys are only ever overwritten, never dropped.
+* Parameters are **merged**, so keys are only ever overwritten and never dropped.
 
-The merging of parameters is important. It means it is possible to override a single specific sub-parameter on a per-story basis but still retain the majority of the parameters defined globally.
+The merging of parameters is important. This means it is possible to override a single specific sub-parameter on a per-story basis while retaining most of the parameters defined globally.
 
-If you are defining an API that relies on parameters (e.g. an [**addon**](../addons/index.mdx)) it is a good idea to take this behavior into account.
+If you are defining an API that relies on parameters (e.g., an [**addon**](../addons/index.mdx)) it is a good idea to take this behavior into account.
diff --git a/docs/writing-stories/play-function.mdx b/docs/writing-stories/play-function.mdx
index eac0bcd4b84a..b6afc7219bf0 100644
--- a/docs/writing-stories/play-function.mdx
+++ b/docs/writing-stories/play-function.mdx
@@ -35,7 +35,7 @@ Storybook's `play` functions are small code snippets that run once the story fin
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="register-component-with-play-function.md" usesCsf3 csf2Path="writing-stories/play-function#snippet-register-component-with-play-function" />
+<CodeSnippets path="register-component-with-play-function.md" />
 
 {/* prettier-ignore-end */}
 
@@ -51,7 +51,7 @@ Thanks to the [Component Story Format](../api/csf.mdx), an ES6 module based file
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="my-component-play-function-composition.md" usesCsf3 csf2Path="writing-stories/play-function#snippet-my-component-play-function-composition" />
+<CodeSnippets path="my-component-play-function-composition.md" />
 
 {/* prettier-ignore-end */}
 
@@ -65,7 +65,7 @@ A common type of component interaction is a button click. If you need to reprodu
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="my-component-play-function-with-clickevent.md" usesCsf3 csf2Path="writing-stories/play-function#snippet-my-component-play-function-with-clickevent" />
+<CodeSnippets path="my-component-play-function-with-clickevent.md" />
 
 {/* prettier-ignore-end */}
 
@@ -75,7 +75,7 @@ Asides from click events, you can also script additional events with the `play`
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="my-component-play-function-with-selectevent.md" usesCsf3 csf2Path="writing-stories/play-function#snippet-my-component-play-function-with-selectevent" />
+<CodeSnippets path="my-component-play-function-with-selectevent.md" />
 
 {/* prettier-ignore-end */}
 
@@ -83,7 +83,7 @@ In addition to events, you can also create interactions with the `play` function
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="my-component-play-function-with-delay.md" usesCsf3 csf2Path="writing-stories/play-function#snippet-my-component-play-function-with-delay" />
+<CodeSnippets path="my-component-play-function-with-delay.md" />
 
 {/* prettier-ignore-end */}
 
@@ -93,7 +93,7 @@ You can also use the `play` function to verify the existence of an element based
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="my-component-play-function-waitfor.md" usesCsf3 csf2Path="writing-stories/play-function#snippet-my-component-play-function-waitfor" />
+<CodeSnippets path="my-component-play-function-waitfor.md" />
 
 {/* prettier-ignore-end */}
 
@@ -103,7 +103,7 @@ If you need, you can also adjust your `play` function to find elements based on
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="my-component-play-function-alt-queries.md" usesCsf3 csf2Path="writing-stories/play-function#snippet-my-component-play-function-alt-queries" />
+<CodeSnippets path="my-component-play-function-alt-queries.md" />
 
 {/* prettier-ignore-end */}
 
@@ -117,7 +117,7 @@ Otherwise, if the component is not immediately available, for instance, due to a
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="my-component-play-function-query-findby.md" usesCsf3 csf2Path="writing-stories/play-function#snippet-my-component-play-function-query-findby" />
+<CodeSnippets path="my-component-play-function-query-findby.md" />
 
 {/* prettier-ignore-end */}
 
@@ -127,7 +127,7 @@ By default, each interaction you write inside your `play` function will be execu
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="my-component-play-function-with-canvas.md" usesCsf3 csf2Path="writing-stories/play-function#snippet-my-component-play-function-with-canvas" />
+<CodeSnippets path="my-component-play-function-with-canvas.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/writing-stories/stories-for-multiple-components.mdx b/docs/writing-stories/stories-for-multiple-components.mdx
index 9f23da3029e5..8dfae72d0c48 100644
--- a/docs/writing-stories/stories-for-multiple-components.mdx
+++ b/docs/writing-stories/stories-for-multiple-components.mdx
@@ -15,7 +15,7 @@ Here's an example with `List` and `ListItem` components:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="list-story-with-subcomponents.md" usesCsf3 csf2Path="writing-stories/stories-for-multiple-components#snippet-list-story-with-subcomponents" />
+<CodeSnippets path="list-story-with-subcomponents.md" />
 
 {/* prettier-ignore-end */}
 
@@ -36,7 +36,7 @@ We can also reduce repetition in our stories by reusing story definitions. Here,
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="list-story-reuse-data.md" usesCsf3 csf2Path="writing-stories/#snippet-list-story-reuse-data" />
+<CodeSnippets path="list-story-reuse-data.md" />
 
 {/* prettier-ignore-end */}
 
@@ -51,7 +51,7 @@ By rendering the `Unchecked` story with its args, we are able to reuse the input
 
   {/* prettier-ignore-start */}
 
-  <CodeSnippets path="list-story-with-unchecked-children.md" usesCsf3 csf2Path="writing-stories/stories-for-multiple-components#snippet-list-story-with-unchecked-children" />
+  <CodeSnippets path="list-story-with-unchecked-children.md" />
 
   {/* prettier-ignore-end */}
 
@@ -78,7 +78,7 @@ Another option that is more “data”-based is to create a special “story-gen
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="list-story-template.md" usesCsf3 csf2Path="writing-stories/stories-for-multiple-components#snippet-list-story-template" />
+<CodeSnippets path="list-story-template.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/writing-stories/tags.mdx b/docs/writing-stories/tags.mdx
index 25459a84ba59..350e168c532d 100644
--- a/docs/writing-stories/tags.mdx
+++ b/docs/writing-stories/tags.mdx
@@ -51,6 +51,21 @@ To remove a tag from a story, prefix it with `!`. For example:
 
 Tags can be removed for all stories in your project (in `.storybook/preview.js|ts`), all stories for a component (in the CSF file meta), or a single story (as above).
 
+## Filtering by custom tags
+
+Custom tags enable a flexible layer of categorization on top of Storybook's sidebar hierarchy. In the example above, we created an `experimental` tag to indicate that a story is not yet stable.
+
+You can create custom tags for any purpose. Sample uses might include:
+- Status, such as `experimental`, `new`, `stable`, or `deprecated`
+- User persona, such as `admin`, `user`, or `developer`
+- Component/code ownership
+
+Custom tags are useful because they show up as filters in Storybook's sidebar. Selecting a tag in the filter causes the sidebar to only show stories with that tag. Selecting multiple tags shows stories that contain any of those tags.
+
+![Filtering by custom tag](../_assets/writing-stories/custom-tag-filter.png)
+
+Filtering by tags is a powerful way to focus on a subset of stories, especially in large Storybook projects. You can also narrow your stories by tag and then search within that subset.
+
 ## Recipes
 
 ### Docs-only stories
diff --git a/docs/writing-stories/typescript.mdx b/docs/writing-stories/typescript.mdx
index e590b6d7ed3a..ccbb9cedf1bc 100644
--- a/docs/writing-stories/typescript.mdx
+++ b/docs/writing-stories/typescript.mdx
@@ -54,7 +54,7 @@ Sometimes stories need to define args that aren’t included in the component's
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="page-story-slots.md" usesCsf3 csf2Path="writing-stories/args#snippet-page-story-slots" />
+<CodeSnippets path="page-story-slots.md"  />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/writing-tests/accessibility-testing.mdx b/docs/writing-tests/accessibility-testing.mdx
index faa147e958c6..48ce67a1b4a7 100644
--- a/docs/writing-tests/accessibility-testing.mdx
+++ b/docs/writing-tests/accessibility-testing.mdx
@@ -19,23 +19,19 @@ Storybook provides an official [a11y addon](https://storybook.js.org/addons/@sto
 
 ### Set up the a11y addon
 
-If you want to check accessibility for your stories using the [addon](https://storybook.js.org/addons/@storybook/addon-a11y/), you'll need to install it and add it to your Storybook.
-
-Run the following command to install the addon.
+If you want to check accessibility for your stories using the [addon](https://storybook.js.org/addons/@storybook/addon-a11y/), you'll need to add it to your Storybook. You can do this by running the following command:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="storybook-a11y-install.md" />
+<CodeSnippets path="storybook-a11y-add.md" />
 
 {/* prettier-ignore-end */}
 
-Update your Storybook configuration (in `.storybook/main.js|ts`) to include the accessibility addon.
-
-{/* prettier-ignore-start */}
+<Callout variant="info">
 
-<CodeSnippets path="storybook-a11y-register.md" />
+The CLI's [`add`](../api/cli-options.mdx#add) command automates the addon's installation and setup. To install it manually, see our [documentation](../addons/install-addons.mdx#manual-installation) on how to install addons.
 
-{/* prettier-ignore-end */}
+</Callout>
 
 Start your Storybook, and you will see some noticeable differences in the UI. A new toolbar icon and the accessibility panel where you can inspect the results of the tests.
 
@@ -47,7 +43,7 @@ Storybook's a11y addon runs [Axe](https://github.com/dequelabs/axe-core) on the
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="component-story-with-accessibility.md" usesCsf3 csf2Path="writing-tests/accessibility-testing#snippet-component-story-with-accessibility" />
+<CodeSnippets path="component-story-with-accessibility.md" />
 
 {/* prettier-ignore-end */}
 
@@ -71,7 +67,17 @@ If you need to dismiss an accessibility rule or modify its settings across all s
 
 #### Component-level a11y configuration
 
-You can also customize your own set of rules for all stories of a component. Update your story's default export and add a parameter with the required configuration:
+<If renderer="svelte">
+
+  You can also customize your own set of rules for all stories of a component. If you're using Svelte CSF with the native templating syntax, you can update the `defineMeta` function. If you're using regular CSF, you can update the default export of the story file.
+
+</If>
+
+<If notRenderer={['svelte']}>
+
+  You can also customize your own set of rules for all stories of a component. Update the story file's default export and add parameters and globals with the required configuration:
+
+</If>
 
 {/* prettier-ignore-start */}
 
@@ -85,20 +91,80 @@ Customize the a11y ruleset at the story level by updating your story to include
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="storybook-addon-a11y-story-config.md" usesCsf3 csf2Path="writing-tests/accessibility-testing#snippet-storybook-addon-a11y-story-config" />
+<CodeSnippets path="storybook-addon-a11y-story-config.md" />
 
 {/* prettier-ignore-end */}
 
-#### How to disable a11y tests
+#### Turn off automated a11y tests
+
+<If renderer="svelte">
+
+  If you are using Svelte CSF, you can turn off automated accessibility testing for stories or components by adding globals to your story or adjusting the `defineMeta` function with the required configuration. With a regular CSF story, you can add the following to your story's export or component's default export:
+
+</If>
+
+<If notRenderer={['svelte']}>
+
+  Disable automated accessibility testing for stories or components by adding the following globals to your story’s export or component’s default export:
+
+</If>
 
-Disable accessibility testing for stories or components by adding the following parameter to your story’s export or component’s default export respectively:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="storybook-addon-a11y-disable.md" usesCsf3 csf2Path="writing-tests/accessibility-testing#snippet-storybook-addon-a11y-disable" />
+<CodeSnippets path="storybook-addon-a11y-disable.md" />
 
 {/* prettier-ignore-end */}
 
+<If renderer={['react', 'vue', 'svelte']}>
+
+## Test addon integration
+
+The accessibility addon provides seamless integration with the [Test addon](./test-addon.mdx), enabling you to run automated accessibility checks for all your tests in the background while you run component tests. If there are any violations, the test will fail, and you will see the results in the sidebar without any additional setup.
+
+![Screenshot of the accessibility test results in the Storybook UI](../_assets/writing-tests/addon-a11y-with-addon-test.png)
+
+### Manual upgrade
+
+If you enabled the addon and you're manually upgrading to Storybook 8.5 or later, you'll need to adjust your existing configuration (i.e., `.storybook/vitest.setup.ts`) to enable the integration as follows:
+
+<CodeSnippets path="storybook-addon-a11y-test-setup.md" />
+
+### Configure accessibility tests with the test addon
+
+Like the Test addon, the accessibility addon also supports [tags](../writing-stories/tags.mdx) to filter the tests you want to run. By default, the addon applies the `a11ytest` tag to all stories. If you need to exclude a story from being accessibility tested, you can remove that tag by applying the `!a11ytest` tag to the story. This also works at the project (in `.storybook/preview.js|ts`) or component level (default export in the story file).
+
+You can use tags to progressively work toward a more accessible UI by enabling accessibility tests for a subset of stories and gradually increasing the coverage. For example, a typical workflow might look like this:
+
+1. Run accessibility tests for your entire project.
+1. Find that many stories have accessibility issues (and maybe feel a bit overwhelmed!).
+1. Temporarily exclude all stories from accessibility tests.
+
+   ```ts title=".storybook/preview.ts"
+   // Replace your-renderer with the renderer you are using (e.g., react, vue3)
+   import { Preview } from '@storybook/your-renderer';
+
+   const preview: Preview = {
+     // ...
+     // 👇 Temporarily remove the a11ytest tag from all stories
+     tags: ['!a11ytest'],
+   };
+
+   export default preview;
+   ```
+
+1. Pick a good starting point (we recommend something like Button, for its simplicity and likelihood of being used within other components) and re-include it in the accessibility tests.
+
+   {/* prettier-ignore-start */}
+
+   <CodeSnippets path="addon-a11y-meta-tag.md" />
+
+   {/* prettier-ignore-end */}
+
+1. Pick another component and repeat the process until you've covered all your components and you're an accessibility hero!
+
+</If>
+
 ## Automate accessibility tests with test runner
 
 The most accurate way to check accessibility is manually on real devices. However, you can use automated tools to catch common accessibility issues. For example, [Axe](https://www.deque.com/axe/), on average, catches upwards to [57% of WCAG issues](https://www.deque.com/blog/automated-testing-study-identifies-57-percent-of-digital-accessibility-issues/) automatically.
@@ -147,7 +213,7 @@ The test runner provides [helper methods](./test-runner.mdx#helpers), allowing a
 
 ### Disable a11y tests with the test runner
 
-Additionally, if you have already [disabled accessibility](#how-to-disable-a11y-tests) tests for any particular story, you can also configure the test runner to avoid testing it as well. For example:
+Additionally, if you have already [disabled accessibility](#turn-off-automated-a11y-tests) tests for any particular story, you can also configure the test runner to avoid testing it as well. For example:
 
 {/* prettier-ignore-start */}
 
@@ -161,6 +227,34 @@ Additionally, if you have already [disabled accessibility](#how-to-disable-a11y-
 
 Browser-based accessibility tests, like those found in Storybook, evaluate the rendered DOM because that gives you the highest accuracy. Auditing code that hasn't been compiled yet is one step removed from the real thing, so you won't catch everything the user might experience.
 
+<If renderer={['react', 'vue', 'svelte']}>
+
+## Troubleshooting
+
+### Why are my tests failing in different environments?
+
+If you enabled the experimental test addon (i.e.,`@storybook/experimental-addon-test`), your tests run in Vitest using your project's configuration with Playwright's Chromium browser. This can lead to inconsistent test results reported in the Storybook UI or CLI. The inconsistency can be due to `axe-core` reporting different results in different environments, such as browser versions or configurations. If you encounter this issue, we recommend reaching out using the default communication channels (e.g., [GitHub discussions](https://github.com/storybookjs/storybook/discussions/new?category=help), [Github issues](https://github.com/storybookjs/storybook/issues/new?template=bug_report.yml)).
+
+</If>
+
+<If renderer={['react']}>
+
+### The addon panel does not show expected violations
+
+Modern React components often use asynchronous techniques like [Suspense](https://react.dev/reference/react/Suspense) or [React Server Components (RSC)](https://react.dev/reference/rsc/server-components) to handle complex data fetching and rendering. These components don’t immediately render their final UI state. Storybook doesn’t inherently know when an async component has fully rendered. As a result, the a11y checks sometimes run too early, before the component finishes rendering, leading to false negatives (no reported violations even if they exist).
+
+To address this issue, we have introduced a feature flag: `developmentModeForBuild`. This feature flag allows you to set `process.env.NODE_ENV` to `'development'` in built Storybooks, enabling development-related optimizations that are typically disabled in production builds. One of those development optimizations is React’s [`act` utility](https://react.dev/reference/react/act), which helps ensure that all updates related to a test are processed and applied before making assertions, like a11y checks.
+
+To enable this feature flag, add the following configuration to your `.storybook/main.js|ts` file:
+
+{/* prettier-ignore-start */}
+
+<CodeSnippets path="main-config-features-development-mode-for-build.md" />
+
+{/* prettier-ignore-end */}
+
+</If>
+
 **Learn about other UI tests**
 
 * [Component tests](./component-testing.mdx) for user behavior simulation
diff --git a/docs/writing-tests/component-testing.mdx b/docs/writing-tests/component-testing.mdx
index 7e2db96c874f..4eb04798a4fb 100644
--- a/docs/writing-tests/component-testing.mdx
+++ b/docs/writing-tests/component-testing.mdx
@@ -49,7 +49,7 @@ The test itself is defined inside a `play` function connected to a story. Here's
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="login-form-with-play-function.md" usesCsf3 csf2Path="writing-tests/interaction-testing#snippet-login-form-with-play-function" />
+<CodeSnippets path="login-form-with-play-function.md" />
 
 {/* prettier-ignore-end */}
 
@@ -203,7 +203,7 @@ Storybook’s `@storybook/test` also provides APIs from [Vitest](https://vitest.
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="storybook-interactions-play-function.md" usesCsf3 csf2Path="essentials/interactions#snippet-storybook-interactions-play-function" />
+<CodeSnippets path="storybook-interactions-play-function.md" />
 
 {/* prettier-ignore-end */}
 
@@ -213,7 +213,7 @@ For complex flows, it can be worthwhile to group sets of related interactions to
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="storybook-interactions-step-function.md" usesCsf3 csf2Path="writing-tests/interaction-testing#snippet-storybook-interactions-step-function" />
+<CodeSnippets path="storybook-interactions-step-function.md" />
 
 {/* prettier-ignore-end */}
 
diff --git a/docs/writing-tests/import-stories-in-tests/stories-in-end-to-end-tests.mdx b/docs/writing-tests/import-stories-in-tests/stories-in-end-to-end-tests.mdx
index c9a86b7eb7a8..23c7f2b94f21 100644
--- a/docs/writing-tests/import-stories-in-tests/stories-in-end-to-end-tests.mdx
+++ b/docs/writing-tests/import-stories-in-tests/stories-in-end-to-end-tests.mdx
@@ -7,7 +7,7 @@ sidebar:
 
 Storybook seamlessly integrates with additional testing frameworks like [Cypress](https://www.cypress.io/) and [Playwright](https://playwright.dev/) to provide a comprehensive testing solution. By leveraging the Component Story Format (CSF), developers can write test cases that simulate user interactions and verify the behavior of individual components within the Storybook environment. This approach enables developers to thoroughly test their components' functionality, responsiveness, and visual appearance across different scenarios, resulting in more robust and reliable applications.
 
-### With Cypress
+## With Cypress
 
 [Cypress](https://www.cypress.io/) is an end-to-end testing framework. It enables you to test a complete instance of your application by simulating user behavior. With Component Story Format, your stories are reusable with Cypress. Each named export (in other words, a story) is renderable within your testing setup.
 
@@ -15,7 +15,7 @@ An example of an end-to-end test with Cypress and Storybook is testing a login c
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="login-form-with-play-function.md" usesCsf3 csf2Path="writing-tests/importing-stories-in-tests#snippet-login-form-with-play-function" />
+<CodeSnippets path="login-form-with-play-function.md" />
 
 {/* prettier-ignore-end */}
 
@@ -35,7 +35,7 @@ When Cypress runs your test, it loads Storybook's isolated iframe and checks if
 
 ![Cypress running successfully](../../_assets/writing-tests/cypress-success-run-tests-optimized.png)
 
-### With Playwright
+## With Playwright
 
 [Playwright](https://playwright.dev/) is a browser automation tool and end-to-end testing framework from Microsoft. It offers cross-browser automation, mobile testing with device emulation, and headless testing. With Component Story Format, your stories are reusable with Playwright. Each named export (in other words, a story) is renderable within your testing setup.
 
@@ -43,7 +43,7 @@ A real-life scenario of user flow testing with Playwright would be how to test a
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="login-form-with-play-function.md" usesCsf3 csf2Path="writing-tests/importing-stories-in-tests#snippet-login-form-with-play-function" />
+<CodeSnippets path="login-form-with-play-function.md" />
 
 {/* prettier-ignore-end */}
 
@@ -61,7 +61,7 @@ With Playwright, you can write a test to check if the inputs are filled and matc
 
 Once you execute Playwright, it opens a new browser window, loads Storybook's isolated iframe, asserts if the inputs contain the specified values, and displays the test results in the terminal.
 
-#### Learn about other UI tests
+**Learn about other UI tests**
 
 * [Component tests](../component-testing.mdx) for user behavior simulation
 * [Visual tests](../visual-testing.mdx) for appearance
diff --git a/docs/writing-tests/vitest-plugin.mdx b/docs/writing-tests/test-addon.mdx
similarity index 60%
rename from docs/writing-tests/vitest-plugin.mdx
rename to docs/writing-tests/test-addon.mdx
index 1a0e4b9708b2..351aa557428a 100644
--- a/docs/writing-tests/vitest-plugin.mdx
+++ b/docs/writing-tests/test-addon.mdx
@@ -1,15 +1,15 @@
 ---
-title: 'Storybook Vitest plugin'
+title: 'Test addon'
 sidebar:
   order: 6
-  title: Vitest plugin
+  title: Test addon
 ---
 
 <If notRenderer={['react', 'vue', 'svelte']}>
   <Callout variant="info">
-    The Storybook Vitest plugin is currently only supported in [React](?renderer=react), [Vue](?renderer=vue) and [Svelte](?renderer=svelte) projects, which use the [Vite builder](../builders/vite.mdx) (or the [Next.js framework](../get-started/frameworks/nextjs.mdx)).
+    The Test addon is currently only supported in [React](?renderer=react), [Vue](?renderer=vue) and [Svelte](?renderer=svelte) projects, which use the [Vite builder](../builders/vite.mdx) (or the [Next.js framework with Vite](../get-started/frameworks/nextjs.mdx#with-vite)).
 
-    If you are using a different renderer, you can use the [Storyboook test runner](./test-runner.mdx) to test your stories. 
+    If you are using a different renderer (such as Angular) or the Webpack builder, you can use the [Storyboook test runner](./test-runner.mdx) to test your stories.
   </Callout>
 
   {/* End non-supported renderers */}
@@ -20,28 +20,37 @@ sidebar:
 (⚠️ **Experimental**)
 
 <Callout variant="warning" icon="🧪">
-  While this feature is experimental, it is published within the `@storybook/experimental-addon-test` package and the API may change in future releases. We welcome feedback and contributions to help improve this feature.
+  While this addon is experimental, it is published as the `@storybook/experimental-addon-test` package and the API may change in future releases. We welcome feedback and contributions to help improve this feature.
 </Callout>
 
-Storybook's Vitest plugin transforms your [stories](../writing-stories/index.mdx) into [Vitest](https://vitest.dev) tests using [portable stories](../api/portable-stories/portable-stories-vitest.mdx). Those tests can then be run alongside any other Vitest tests. This approach is faster and more flexible than the [test runner](./test-runner.mdx), which required a running Storybook instance to test your stories.
+Storybook's Test addon allows you to test your components directly inside Storybook. On its own, it transforms your [stories](../writing-stories/index.mdx) into [component tests](./component-testing.mdx), which test the rendering and behavior of your components in a real browser environment. It can also calculate project [coverage](./test-coverage.mdx) provided by your stories.
 
-We recommend (and configure, by default) running Vitest in [browser mode](https://vitest.dev/guide/browser/), using [Playwright's](https://playwright.dev) Chromium browser. Browser mode ensures your components are tested in a real browser environment, which is more accurate than simulations like JSDom or HappyDom. This is especially important for testing components that rely on browser APIs or features.
+If your project is using other testing addons, such as the [Visual tests addon](./visual-testing.mdx) or the [Accessibility addon](./accessibility-testing.mdx), you can run those tests alongside your component tests.
 
-Stories are tested in two ways: a smoke test to ensure it renders and, if a [play function](../writing-tests/component-testing#write-a-component-test) is defined, that function is run and any [assertions made](../writing-tests/component-testing.mdx#assert-tests-with-vitests-apis) within it are validated.
+When tests are run for a story, the status is shown in the sidebar. The sidebar can be filtered to only show failing stories, and you can press the menu button on a failing story to see debugging options.
+
+You can also run tests in watch mode, which will automatically re-run tests when you make changes to your components or stories. To activate, press the watch mode toggle (the eye icon) in the test module.
+
+<Video src="../_assets/writing-tests/addon-test-overview.mp4" />
 
 ## Install and set up
 
 Before installing, make sure your project meets the following requirements:
 
-- Storybook ≥ 8.3
-- A Storybook framework that uses Vite (e.g. [`vue3-vite`](../get-started/frameworks/vue3-vite.mdx)), or the [Storybook Next.js framework](../get-started/frameworks/nextjs.mdx)
-- Vitest ≥ 2.0
-    - If you're not using Vitest, it will be installed and configured for you when you install the addon
-- For Next.js projects, Next.js ≥ 14.1
+- Storybook ≥ 8.5
+- A Storybook framework that uses Vite (e.g. [`vue3-vite`](../get-started/frameworks/vue3-vite.mdx), [`react-vite`](../get-started/frameworks/react-vite.mdx), ['sveltekit`](../get-started/frameworks/sveltekit.mdx), etc.), or the [Storybook Next.js framework with Vite](../get-started/frameworks/nextjs.mdx#with-vite)
+- Vitest ≥ 2.1
+    - If you're not yet using Vitest, it will be installed and configured for you when you install the addon
+
+<If renderer="react">
+  <Callout variant="info" icon="ℹ️">
+    **Using with Next.js** — The Test addon is supported in Next.js ≥ 14.1 projects, but you must be using the [`@storybook/experimental-nextjs-vite` framework](../get-started/frameworks/nextjs.mdx#with-vite). When you run the setup command below, you will be prompted to install and use the framework if you haven't already.
+  </Callout>
+</If>
 
-If you're not yet using Storybook 8.3, you can [upgrade your Storybook](../configure/upgrading.mdx) to the latest version:
+If you're not yet using Storybook 8.5, you can [upgrade your Storybook](../configure/upgrading.mdx) to the prerelease version:
 
-<CodeSnippets path="storybook-upgrade.md" />
+<CodeSnippets path="storybook-upgrade-prerelease.md" />
 
 ### Automatic setup
 
@@ -53,7 +62,7 @@ That [`add` command](../addons/install-addons.mdx#automatic-installation) will i
 
 ### Manual setup
 
-For some project setups, the `add` command may be unable to automate the plugin setup and ask you to complete additional setup steps. Here's what to do:
+For some project setups, the `add` command may be unable to automate the addon and plugin setup and ask you to complete additional setup steps. Here's what to do:
 
 1. Make sure Vite and Vitest are configured in your project.
 1. Configure Vitest to use [browser mode](https://vitest.dev/guide/browser/).
@@ -79,7 +88,7 @@ Some Storybook frameworks require additional setup to enable the framework's fea
   ```js title="vitest.config.ts"
   import { defineConfig, mergeConfig } from 'vitest/config';
   import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
-  import { storybookNextjsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin';
+  import { storybookNextJsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin';
 
   import viteConfig from './vite.config';
 
@@ -88,7 +97,7 @@ Some Storybook frameworks require additional setup to enable the framework's fea
     defineConfig({
       plugins: [
         storybookTest(),
-        storybookNextjsPlugin(), // 👈 Apply the framework plugin here
+        storybookNextJsPlugin(), // 👈 Apply the framework plugin here
       ],
       // ...
     })
@@ -190,36 +199,75 @@ When the addon is set up automatically, it will create or adjust your Vitest con
 
 ## Usage
 
-There are three primary ways to run tests using the Vitest plugin:
+There are multiple ways to run tests using the addon.
 
-### CLI
+We recommend (and configure, by default) running Vitest in [browser mode](https://vitest.dev/guide/browser/), using [Playwright's](https://playwright.dev) Chromium browser. Browser mode ensures your components are tested in a real browser environment, which is more accurate than simulations like JSDom or HappyDom. This is especially important for testing components that rely on browser APIs or features.
 
-The plugin transforms your stories into real Vitest tests, so you run those tests just like you run any other Vitest tests in your project. Typically, you will have a `test` script in your `package.json` that runs your tests.
+### Storybook UI
 
-If you don't already have a `test` script, you can add one that runs Vitest:
+The easiest way to run tests is through the Storybook UI. With a click, you can run multiple types of tests for all stories in your project, a group of stories, or a single story.
 
-```json title="package.json"
-{
-  "scripts": {
-    "test": "vitest"
-  }
-}
-```
+To run all tests for your whole project, press the Run tests button in the test module at the bottom of the sidebar.
+
+<Video src="../_assets/writing-tests/addon-test-run-all-tests.mp4" />
+
+Alternatively, you can expand the test module to run specific types of tests individually. For those test types which have a watch mode (which will automatically re-run relevant tests upon code changes), you can toggle that on or off.
+
+![Screenshot of test module, expanded, showing test types and watch mode toggle](../_assets/writing-tests/addon-test-module-expanded.png)
+
+<Callout variant="info" icon="ℹ️">
 
-If you already have a `test` script that runs something other than Vitest, you can either adjust it to run Vitest (as above) or add a new script that runs Vitest:
+If you have the [Visual tests addon](./visual-testing.mdx) installed, you'll see an option to run Visual tests alongside [Component tests](./component-testing.mdx).
+
+![Screenshot of test module, expanded, showing Visual tests](../_assets/writing-tests/addon-test-module-expanded-with-vta.png)
+
+Other addons, such as [a11y](./accessibility-testing.mdx#test-addon-integration), may also provide test types that can be run from the test module and affect the status indicators on stories and components.
+
+</Callout>
+
+To run tests for a specific story or group of stories, press the menu button (three dots) that appears on hover of a sidebar item. You can then select the test type you want to run.
+
+![Screenshot of story sidebar item with open menu](../_assets/writing-tests/addon-test-sidebar-item-menu.png)
+
+After running your tests, you will now see status indicators on stories and components for their pass, fail, or error state. You can press on the menu button when hovering a story to see the test results for that story. Selecting a result in the menu will navigate you to that story and open the appropriate debugging panel. For example, if a component test fails, you can jump straight to the failure in the Component tests addon panel. That panel provides an interactive debugger for your component test, allowing you to step through each simulated behavior or assertion.
+
+<Callout variant="info" icon="ℹ️">
+
+The Component tests addon panel replaces the [Interactions addon panel](../essentials/interactions.mdx) when the Test addon is installed. While the testing mechanism is different, the functionality of the addon panel itself remains the same.
+
+</Callout>
+
+The test module will also show you the total number of tests run, the number of tests that passed, and the number of tests that failed or errored. You can press the failure number to filter the sidebar to only those stories that failed.
+
+<Video src="../_assets/writing-tests/addon-test-filter-sidebar.mp4" />
+
+### CLI
+
+You can also run tests using the Vitest CLI. We recommend adding a script to your `package.json` to make running tests easier. Here's an example of how to do that:
 
 ```json title="package.json"
 {
   "scripts": {
-    "test-storybook": "vitest"
+    "test": "vitest",
+    "test-storybook": "vitest --project=storybook"
   }
 }
 ```
 
-When you run that script, the plugin will find and run your story-based tests. Here's an example of running your tests (in [watch mode](https://vitest.dev/guide/cli.html#vitest-watch), by default) using the Vitest CLI:
+In this example, we've added two scripts: `test` to run all tests in your project (you may already have this), and `test-storybook` to run only your Storybook tests. The `--project=storybook` flag tells Vitest to run the tests for the Storybook project.
+
+Then, run this command to run your tests (in [watch mode](https://vitest.dev/guide/cli.html#vitest-watch), by default) using the Vitest CLI:
 
 <CodeSnippets path="vitest-plugin-run-tests.md" />
 
+#### Debugging
+
+While the plugin does not require Storybook to run when testing, you may still want to run Storybook to debug your tests. To enable this, provide the [`storybookScript` option](#storybookscript) in the plugin configuration. When you run Vitest in watch mode, the plugin will start Storybook using this script and provide links to the story in the output on test failures. This allows you to quickly jump to the story in Storybook to debug the issue.
+
+You can also provide a [`storybookUrl` option](#storybookurl) to the plugin configuration. When you're not using watch mode and tests fail, the plugin will provide a link to the story using this URL in the output. This is useful when [running tests in CI](#in-ci) or other environments where Storybook is not already running.
+
+![Screenshot of test failure in the console, showing a failure with a link to the story](../_assets/writing-tests/vitest-plugin-test-failure.png)
+
 ### Editor extension
 
 Transforming your stories into Vitest tests with the plugin also enables you to run and debug tests using Vitest [IDE integrations](https://vitest.dev/guide/ide.html). This allows you to run tests directly from your editor, such as VSCode and JetBrains IDE.
@@ -274,17 +322,35 @@ export default defineWorkspace([
 ])
 ```
 
-### Debugging
+## How it works
 
-While the plugin does not require Storybook to run when testing, you may still want to run Storybook to debug your tests. To enable this, provide the [`storybookScript` option](#storybookscript) in the plugin configuration. When you run Vitest in watch mode, the plugin will start Storybook using this script and provide links to the story in the output on test failures. This allows you to quickly jump to the story in Storybook to debug the issue.
+The Test addon works by using a Vitest plugin to transform your stories into [Vitest](https://vitest.dev) tests using [portable stories](../api/portable-stories/portable-stories-vitest.mdx). It also configures Vitest to run those tests in [browser mode](https://vitest.dev/guide/browser/), using Playwright's Chromium browser. Because it is built on top of Vitest, the addon requires a Vite-based Storybook framework.
 
-You can also provide a [`storybookUrl` option](#storybookurl) to the plugin configuration. When you're not using watch mode and tests fail, the plugin will provide a link to the story using this URL in the output. This is useful when [running tests in CI](#in-ci) or other environments where Storybook is not already running.
+Stories are tested in two ways: a smoke test to ensure it renders and, if a [play function](../writing-tests/component-testing#write-a-component-test) is defined, that function is run and any [assertions made](../writing-tests/component-testing.mdx#assert-tests-with-vitests-apis) within it are validated.
 
-![Screenshot of test failure in the console, showing a failure with a link to the story](../_assets/writing-tests/vitest-plugin-test-failure.png)
+When you run tests in the [Storybook UI](#storybook-ui), the addon runs Vitest in the background and reports the results in the sidebar. 
 
 ## Configuring tests
 
-Most of the configuration for the Vitest plugin's behavior is done in the Vitest configuration and setup files. However, you can also define configuration in your stories themselves, using [tags](../writing-stories/tags.mdx), to control how they are tested.
+The tests run by the addon can be configured in two ways. You can toggle which test types are run and include, exclude, or skip stories from being tested.
+
+### Toggling test types
+
+In addition to component tests, the Test addon supports multiple types of tests, depending on which other addons you are using in your project. Some test types, like [visual tests](./visual-testing.mdx), are run independently. Others, like [accessibility](./accessibility-testing.mdx), must be run alongside component tests. For these dependent test types, you can toggle them on or off in the test module by pressing the edit button (pencil icon) and checking or unchecking the test types you want to run.
+
+![Screenshot of test module, expanded, edit mode, everything is checked](../_assets/writing-tests/addon-test-module-edit.png)
+
+Note that you may not have all of the test types pictured, depending on which addons you have installed.
+
+You can also access edit mode in the sidebar item menu for a story or group of stories:
+
+![Screenshot of story sidebar item with open menu, edit mode](../_assets/writing-tests/addon-test-sidebar-item-menu-edit.png)
+
+Note that toggling test types in the menu's edit mode affects all tests, not only those for the selected story or group of stories. It is intended as a convenience for quickly toggling test types on or off.
+
+### Including, excluding, or skipping tests
+
+You can use [tags](../writing-stories/tags.mdx) to include, exclude, or skip stories from being tested. Included stories are tested, excluded stories are not tested, and skipped stories are not tested but are counted in the test results.
 
 By default, the plugin will run all stories with the `test` tag. You can adjust this behavior by providing the [`tags` option](#tags) in the plugin configuration. This allows you to include, exclude, or skip stories based on their tags.
 
@@ -322,7 +388,9 @@ If the same tag is in both the `include` and `exclude` arrays, the `exclude` beh
 
 ## Comparison to the test runner
 
-The [test runner](./test-runner.mdx) requires a running Storybook instance to test your stories, because it visits each one, executes the play function, and listens for results. This plugin, however, transforms your stories into tests using Vite and portable stories, so it does not need to run Storybook to test your stories. Beyond that core difference, there are a few other distinctions:
+The [test runner](./test-runner.mdx) requires a running Storybook instance to test your stories, because it visits each one, executes the play function, and listens for results. The Vitest plugin, however, transforms your stories into tests using Vite and portable stories, so it does not need to run Storybook to test your stories. Because of this reliance on Vite, the plugin can only be used with Storybook frameworks that use Vite (and [Next.js](../get-started/frameworks/nextjs.mdx#with-vite)). The test runner, on the other hand, can be used with any Storybook framework.
+
+The test runner is only a CLI tool. It did not have a UI for running tests, nor did it have an editor extension. The addon, however, provides a UI in Storybook for running tests, and it enables you to run and debug tests using Vitest IDE integrations.
 
 Additionally, the test runner ran your stories as orchestrated tests in Jest, and that orchestration came with some complexity. By comparison, this plugin transforms your stories into real tests and then runs them using Vitest, which is simpler and more configurable.
 
@@ -330,9 +398,21 @@ Finally, because of the simpler architecture and the use of Vitest, this plugin
 
 ## FAQ
 
-### How do I debug my tests in Storybook?
+### What happens if Vitest itself has an error?
+
+Sometimes tests can fail because of errors within Vitest itself. When this happens, the test module in the Storybook UI will alert you to the error, and you can click a link to view it in full. The error will also be logged to the console.
 
-The plugin will attempt to provide links to the story in Storybook when tests fail, for [debugging](#debugging) purposes.
+![Screenshot of test module, expanded, showing Vitest error](../_assets/writing-tests/addon-test-vitest-error.png)
+
+Vitest offers [troubleshooting help for common errors](https://vitest.dev/guide/common-errors.html).
+
+### What happens when there are different test results in multiple environments?
+
+When you run tests with this addon, they are run as Vitest tests with whatever configuration you have set up in your project. By default, they will run in browser mode, using Playwright's Chromium browser. Sometimes, tests will fail when run in the addon (or via CLI), but then pass when viewed in the Component tests addon panel (or vice versa). This can happen because the tests are run in different environments, which can have different behaviors.
+
+### How do I debug my CLI tests in Storybook?
+
+The plugin will attempt to provide links to the story in Storybook when tests fail in CLI, for [debugging](#debugging) purposes.
 
 If the URLs are not working when running tests in watch mode, you should check two configuration options:
 
@@ -375,7 +455,7 @@ For more, see [Vitest's guide on using browser mode effectively](https://vitest.
 
 We recommend running tests in a browser using Playwright, but you can use WebDriverIO instead. To do so, you need to adjust the [browser provider in the Vitest configuration file](https://vitest.dev/config/#browser-provider).
 
-### How do I use a browser other than Chromium
+### How do I use a browser other than Chromium?
 
 We recommend using Chromium, because it is most likely to best match the experience of a majority of your users. However, you can use other browsers by adjusting the [browser name in the Vitest configuration file](https://vitest.dev/config/#browser-name). Note that [Playwright and WebDriverIO support different browsers](https://vitest.dev/guide/browser/#browser-option-types).
 
@@ -383,17 +463,38 @@ We recommend using Chromium, because it is most likely to best match the experie
 
 By default, the export name of a story is mapped to the test name. To create a more descriptive test description, you can provide a `name` property for the story. This allows you to include spaces, brackets, or other special characters.
 
-```js
+```js title="Example.stories.js|ts"
 export const Story = {
   name: 'custom, descriptive name'
 };
 ```
 
+<If renderer="react">
+
+### How do I fix the `m.createRoot is not a function` error?
+
+This error can occur when using the addon on a project that uses a React version other than 18. To work around the issue, you can provide an alias to ensure the correct React version is used. Here's an example of how to do that in the Vitest configuration file:
+
+```ts title="vitest.config.ts"
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  // ...
+  resolve: {
+    alias: {
+      "@storybook/react-dom-shim": "@storybook/react-dom-shim/dist/react-16",
+    },
+  },
+});
+```
+
+</If>
+
 ## API
 
 ### Exports
 
-This plugin has the following exports:
+This addon has the following exports:
 
 ```js
 import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin'
@@ -461,4 +562,4 @@ Default:
 - **`exclude`**: Stories with these tags will not be tested, and will not be counted in the test results
 - **`skip`**: Stories with these tags will not be tested, and will be counted in the test results
 
-</If>
\ No newline at end of file
+</If>
diff --git a/docs/writing-tests/test-coverage.mdx b/docs/writing-tests/test-coverage.mdx
index 7ac1d95f7bf1..1b62f752dfbd 100644
--- a/docs/writing-tests/test-coverage.mdx
+++ b/docs/writing-tests/test-coverage.mdx
@@ -5,38 +5,239 @@ sidebar:
   title: Test coverage
 ---
 
-<YouTubeCallout id="wEa6W8uUGSA" title="These tests use NO CODE | component testing in Storybook" />
-
 Test coverage is the practice of measuring whether existing tests fully cover your code. That means surfacing areas which aren't currently being tested, such as: conditions, logic branches, functions and variables.
 
 Coverage tests examine the instrumented code against a set of industry-accepted best practices. They act as the last line of QA to improve the quality of your test suite.
 
 <Video src="../_assets/writing-tests/component-test-coverage-whitebg.mp4" />
 
-## Code instrumentation with the coverage addon
+<If renderer={['react', 'vue', 'svelte']}>
 
-Storybook provides an official [test coverage addon](https://storybook.js.org/addons/@storybook/addon-coverage). Powered by [Istanbul](https://istanbul.js.org/), which allows out-of-the-box code instrumentation for the most commonly used frameworks and builders in the JavaScript ecosystem.
+## With Storybook Test
 
-### Set up the coverage addon
+When you run component tests with the [Test addon](./test-addon.mdx), which is powered by [Vitest](https://vitest.dev), it can generate a coverage report. The result is summarized in the testing module, showing the percentage of statements covered by your tested stories.
 
-Engineered to work alongside modern testing tools (e.g., [Playwright](https://playwright.dev/)), the coverage addon automatically instruments your code and generates code coverage data. For an optimal experience, we recommend using the [test runner](./test-runner.mdx) alongside the coverage addon to run your tests.
+![Screenshot of test module, expanded, showing coverage result](../_assets/writing-tests/addon-test-module-coverage-summary.png)
+
+### Set up
+
+Coverage is included in the Test addon and, when enabled, will be calculated when running component tests for your project. To enable coverage, press the edit button (pencil icon) in the testing module and toggle coverage on:
+
+![Screenshot of test module, expanded, showing coverage toggle](../_assets/writing-tests/addon-test-module-edit-coverage.png)
+
+Before coverage can be calculated, you may need to install a support package corresponding to your [coverage provider](#coverage-provider):
 
-Run the following command to install the addon.
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="storybook-coverage-addon-install.md" />
+<CodeSnippets path="vitest-plugin-install-coverage-support-packages.md" />
 
 {/* prettier-ignore-end */}
 
-Update your Storybook configuration (in `.storybook/main.js|ts`) to include the coverage addon.
+### Usage
+
+Because coverage is built into the Test addon, you can use it everywhere you run your tests.
+
+#### Storybook UI
+
+When you enable coverage in the Storybook UI, the coverage report will be generated and summarized in the testing module after you run your tests. You can see the percentage of statements covered by your tested stories, as well as whether the coverage meets the [watermarks](#watermarks).
+
+Additionally, the full coverage report will be served at the `/coverage/index.html` route of your running Storybook.
+
+<Callout variant="info" icon="⚠️">
+
+It's important to understand that the coverage reported in the Storybook UI has three important limitations:
+
+1. Coverage is calculated using the stories you've written, not the entire codebase. In other words, it will not include any other Vitest tests.
+2. Coverage can only be calculated for all stories in your project, not for an individual story or a group of stories.
+3. Coverage is not calculated while watch mode is activated. When coverage is enabled, enabling watch mode will disable coverage.
+
+</Callout>
+
+#### CLI
+
+Like the rest of Storybook Test, coverage is built on top of Vitest. Which means you can generate a coverage report using the [Vitest CLI](https://vitest.dev/guide/cli.html).
+
+Assuming you run your tests with a package script like this:
+
+```json title="package.json"
+{
+  "scripts": {
+    "test-storybook": "vitest --project=storybook"
+  }
+}
+```
+
+Then you can generate a coverage report with:
 
 {/* prettier-ignore-start */}
 
-<CodeSnippets path="storybook-coverage-addon-registration.md" />
+<CodeSnippets path="vitest-plugin-run-with-coverage.md" />
 
 {/* prettier-ignore-end */}
 
+The coverage report will be saved to the [configured coverage reports directory](https://vitest.dev/config/#coverage-reportsdirectory) (`./coverage`, by default) in your project.
+
+<Callout variant="info">
+
+The above command will only calculate coverage for the stories you've written, not the entire codebase.
+
+Because coverage is most accurate when accounting for all tests in your project, you can also run coverage for all tests in your project with:
+
+```sh
+npx vitest --coverage
+```
+
+</Callout>
+
+#### Editor extension
+
+Coverage is also available through Vitest's [IDE integrations](https://vitest.dev/guide/ide.html). You can calculate and display coverage results directly in your editor.
+
+![Screenshot of test coverage in VSCode](../_assets/writing-tests/vitest-plugin-vscode-coverage.png)
+
+<Callout variant="info">
+
+Note that this coverage will include _all_ tests in your project, not just the stories you've written.
+
+</Callout>
+
+#### CI
+
+To generate coverage reports in your CI pipeline, you can use the [CLI](#cli).
+
+For example, here's a simplified GitHub Actions workflow that runs your tests and generates a coverage report:
+
+```yaml title=".github/workflows/test-storybook.yml"
+name: Storybook Tests
+on: push
+jobs:
+  test:
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+      - name: Install dependencies
+        run: yarn
+      - name: Run Storybook tests
+        run: yarn test-storybook --coverage
+```
+
+For more on testing in CI, see the [Test addon docs](./test-addon.mdx#ci).
+
+### Configuration
+
+#### Coverage provider
+
+You can choose which provider, [v8](https://v8.dev/blog/javascript-code-coverage) (default) or [Istanbul](https://istanbul.js.org/), to use for coverage calculation by setting the `coverage.provider` option in your Vitest config:
+
+```ts title="vitest.config.ts"
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  // ...
+  test: {
+    // ...
+    coverage: {
+      // ...
+      provider: 'istanbul', // 'v8' is the default
+    },
+  },
+});
+```
+
+#### Watermarks
+
+Both coverage providers support [watermarks](https://vitest.dev/config/#coverage-watermarks), which are threshold values for coverage. The low watermark is the minimum coverage required to pass the test, and the high watermark is the minimum coverage required to be considered good. A coverage percentage between the low and high watermarks will be considered acceptable but not ideal.
+
+In the testing module, the coverage summary will show the percentage of statements covered by your tested stories, as well as whether the coverage meets the watermarks. Below the low watermark, the icon will be red, between the low and high watermarks, it will be orange, and above the high watermark, it will be green.
+
+![Screenshot of test module, expanded, showing coverage result](../_assets/writing-tests/addon-test-module-coverage-summary.png)
+
+To configure the watermarks, you can adjust the Vitest config:
+
+```ts title="vitest.config.ts"
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  // ...
+  test: {
+    // ...
+    coverage: {
+      // ...
+      watermarks: {
+        // These are the default values
+        statements: [50, 80],
+      },
+    },
+  },
+});
+```
+
+#### Additional configuration
+
+You can find more configuration options for coverage in the [Vitest documentation](https://vitest.dev/config/#coverage).
+
+When calculating coverage in the Storybook UI, the following options are always ignored:
+
+- `enabled`
+- `clean`
+- `cleanOnRerun`
+- `reportOnFailure`
+- `reporter`
+- `reportsDirectory`
+
+### Troubleshooting
+
+#### Excluding stories from the coverage report
+
+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';
+
+export default defineConfig({
+  // ...
+  test: {
+    coverage: {
+      // 👇 Add this
+      exclude: [
+         ...coverageConfigDefaults.exclude,
+         // This pattern must align with the `stories` property of your `.storybook/main.ts` config
+         '**/*.stories.*',
+         // This pattern must align with the output directory of `storybook build`
+         'storybook-static/**',
+       ], 
+    }
+  }
+})
+```
+
+</If>
+
+## With the coverage addon
+
+<YouTubeCallout id="wEa6W8uUGSA" title="These tests use NO CODE | component testing in Storybook" />
+
+Storybook also provides a [coverage addon](https://storybook.js.org/addons/@storybook/addon-coverage). It is powered by [Istanbul](https://istanbul.js.org/), which allows out-of-the-box code instrumentation for the most commonly used frameworks and builders in the JavaScript ecosystem.
+
+### Set up
+
+Engineered to work alongside modern testing tools (e.g., [Playwright](https://playwright.dev/)), the coverage addon automatically instruments your code and generates code coverage data. For an optimal experience, we recommend using the [test runner](./test-runner.mdx) alongside the coverage addon to run your tests.
+
+Run the following command to install the addon.
+
+{/* prettier-ignore-start */}
+
+<CodeSnippets path="storybook-coverage-addon-install.md" />
+
+<Callout variant="info">
+
+The CLI's [`add`](../api/cli-options.mdx#add) command automates the addon's installation and setup. To install it manually, see our [documentation](../addons/install-addons.mdx#manual-installation) on how to install addons.
+
+</Callout>
+
 Start your Storybook with:
 
 {/* prettier-ignore-start */}
@@ -65,7 +266,10 @@ By default, the [`@storybook/addon-coverage`](https://storybook.js.org/addons/@s
 
 {/* prettier-ignore-end */}
 
-| Vite options           | Description                                                                                                                                                                                                                                        | Type                        |
+<details>
+<summary>Vite options</summary>
+
+| Options           | Description                                                                                                                                                                                                                                        | Type                        |
 | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
 | `checkProd`            | Configures the plugin to skip instrumentation in production environments<br />`options: { istanbul: { checkProd: true,}}`                                                                                                                           | `boolean`                   |
 | `cwd`                  | Configures the working directory for the coverage tests.<br />Defaults to `process.cwd()`<br />`options: { istanbul: { cwd: process.cwd(),}}`                                                                                                        | `string`                    |
@@ -77,7 +281,12 @@ By default, the [`@storybook/addon-coverage`](https://storybook.js.org/addons/@s
 | `nycrcPath`            | Defines the relative path for the existing nyc [configuration file](https://github.com/istanbuljs/nyc?tab=readme-ov-file#configuration-files)<br />`options: { istanbul: { nycrcPath: '../nyc.config.js',}}`                                        | `string`                    |
 | `requireEnv`           | Overrides the `VITE_COVERAGE` environment variable's value by granting access to the `env` variables<br />`options: { istanbul: { requireEnv: true,}}`                                                                                              | `boolean`                   |
 
-| Webpack 5 options      | Description                                                                                                                                                                                                                                        | Type                        |
+</details>
+
+<details>
+<summary>Webpack 5 options</summary>
+
+| Options      | Description                                                                                                                                                                                                                                        | Type                        |
 | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
 | `autoWrap`             | Provides support for top-level return statements by wrapping the program code in a function<br />`options: { istanbul: { autoWrap: true,}}`                                                                                                         | `boolean`                   |
 | `compact`              | Condenses the output of the instrumented code. Useful for debugging<br />`options: { istanbul: { compact: false,}}`                                                                                                                                 | `boolean`                   |
@@ -93,7 +302,9 @@ By default, the [`@storybook/addon-coverage`](https://storybook.js.org/addons/@s
 | `produceSourceMap`     | Configures Instanbul to generate a source map for the instrumented code<br />`options: { istanbul: { produceSourceMap: true,}}`                                                                                                                     | `boolean`                   |
 | `sourceMapUrlCallback` | Defines a callback function invoked with the filename and the source map URL when a source map is generated<br />`options: { istanbul: { sourceMapUrlCallback: (filename, url) => {},}}`                                                            | `function`                  |
 
-## What about other coverage reporting tools?
+</details>
+
+### What about other coverage reporting tools?
 
 Out of the box, code coverage tests work seamlessly with Storybook's test-runner and the [`@storybook/addon-coverage`](https://storybook.js.org/addons/@storybook/addon-coverage). However, that doesn't mean you can't use additional reporting tools (e.g., [Codecov](https://about.codecov.io/)). For instance, if you're working with [LCOV](https://wiki.documentfoundation.org/Development/Lcov), you can use the generated output (in `coverage/storybook/coverage-storybook.json`) and create your own report with:
 
@@ -105,9 +316,9 @@ Out of the box, code coverage tests work seamlessly with Storybook's test-runner
 
 ***
 
-## Troubleshooting
+### Troubleshooting
 
-### Run test coverage in other frameworks
+#### Run test coverage in other frameworks
 
 If you intend on running coverage tests in frameworks with special files like Vue 3 or Svelte, you'll need to adjust your configuration and enable the required file extensions. For example, if you're using Vue, you'll need to add the following to your nyc configuration file (i.e., `.nycrc.json` or `nyc.config.js`):
 
@@ -117,7 +328,7 @@ If you intend on running coverage tests in frameworks with special files like Vu
 
 {/* prettier-ignore-end */}
 
-### The coverage addon doesn't support optimized builds
+#### The coverage addon doesn't support optimized builds
 
 If you generated a production build optimized for performance with the [`--test`](../sharing/publish-storybook.mdx#customizing-the-build-for-performance) flag, and you're using the coverage addon to run tests against your Storybook, you may run into a situation where the coverage addon doesn't instrument your code. This is due to how the flag works, as it removes addons that have an impact on performance (e.g., [`Docs`](../writing-docs/index.mdx), [coverage addon](https://storybook.js.org/addons/@storybook/addon-coverage)). To resolve this issue, you'll need to adjust your Storybook configuration file (i.e., `.storybook/main.js|ts`) and include the [`disabledAddons`](../api/main-config/main-config-build.mdx#testdisabledaddons) option to allow the addon to run tests at the expense of a slower build.
 
@@ -127,7 +338,7 @@ If you generated a production build optimized for performance with the [`--test`
 
 {/* prettier-ignore-end */}
 
-### The coverage addon doesn't support instrumented code
+#### The coverage addon doesn't support instrumented code
 
 As the [coverage addon](https://storybook.js.org/addons/@storybook/addon-coverage) is based on Webpack5 loaders and Vite plugins for code instrumentation, frameworks that don't rely upon these libraries (e.g., Angular configured with Webpack), will require additional configuration to enable code instrumentation. In that case, you can refer to the following [repository](https://github.com/yannbf/storybook-coverage-recipes) for more information.
 
diff --git a/docs/writing-tests/test-runner.mdx b/docs/writing-tests/test-runner.mdx
index ac1fd7b7d3ba..9456b4892bae 100644
--- a/docs/writing-tests/test-runner.mdx
+++ b/docs/writing-tests/test-runner.mdx
@@ -26,7 +26,7 @@ Run the following command to install it.
 
 Update your `package.json` scripts and enable the test runner.
 
-```json
+```json title="package.json"
 {
   "scripts": {
     "test-storybook": "test-storybook"
@@ -336,7 +336,7 @@ Timeout - Async callback was not invoked within the 15000 ms timeout specified b
 
 It might be that Playwright couldn't handle testing the number of stories you have in your project. Perhaps you have a large number of stories, or your CI environment has a really low RAM configuration. In such cases, you should limit the number of workers that run in parallel by adjusting your command as follows:
 
-```json
+```json title="package.json"
 {
   "scripts": {
     "test-storybook:ci": "yarn test-storybook --maxWorkers=2"
diff --git a/docs/writing-tests/visual-testing.mdx b/docs/writing-tests/visual-testing.mdx
index 71765a828ccd..5c2904d64d19 100644
--- a/docs/writing-tests/visual-testing.mdx
+++ b/docs/writing-tests/visual-testing.mdx
@@ -49,8 +49,7 @@ The addon includes configuration options covering most use cases by default. You
 | `debug`           | Optional. Output verbose debugging information to the console. <br /> `"debug": true`                                                    |
 | `zip`             | Optional. Recommended for large projects. Configures the addon to deploy your Storybook to Chromatic as a zip file. <br /> `"zip": true` |
 
-```jsonc
-// ./chromatic.config.json
+```jsonc title="./chromatic.config.json"
 {
   "buildScriptName": "deploy-storybook",
   "debug": true,
diff --git a/package.json b/package.json
index d0eb7795735e..0e6a462f4a88 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
     "get-report-message": "cd scripts; yarn get-report-message",
     "get-template": "cd scripts; yarn get-template",
     "i": "yarn --cwd scripts && yarn --cwd code",
+    "knip": "cd code; yarn knip",
     "lint": "cd code; yarn lint",
     "nx": "cd code; yarn nx",
     "pretty-docs": "cd scripts; yarn install >/dev/null; yarn docs:prettier:write",
@@ -14,7 +15,7 @@
     "upload-bench": "cd scripts; yarn upload-bench",
     "vite-ecosystem-ci:before-test": "node ./scripts/vite-ecosystem-ci/before-test.js && cd ./sandbox/react-vite-default-ts && yarn install",
     "vite-ecosystem-ci:build": "yarn task --task sandbox --template react-vite/default-ts --start-from=install",
-    "vite-ecosystem-ci:test": "yarn task --task test-runner-dev --template react-vite/default-ts --start-from=dev"
+    "vite-ecosystem-ci:test": "yarn task --task test-runner-dev --template react-vite/default-ts --start-from=dev && yarn task --task test-runner --template react-vite/default-ts --start-from=build"
   },
   "packageManager": "yarn@4.4.0+sha512.91d93b445d9284e7ed52931369bc89a663414e5582d00eea45c67ddc459a2582919eece27c412d6ffd1bd0793ff35399381cb229326b961798ce4f4cc60ddfdb"
 }
diff --git a/scripts/.eslintrc.cjs b/scripts/.eslintrc.cjs
index 2af8b19b61c1..b49fe70944d0 100644
--- a/scripts/.eslintrc.cjs
+++ b/scripts/.eslintrc.cjs
@@ -1,6 +1,11 @@
 module.exports = {
   root: true,
-  extends: ['@storybook/eslint-config-storybook', 'plugin:storybook/recommended'],
+  extends: [
+    //
+    '@storybook/eslint-config-storybook',
+    'plugin:storybook/recommended',
+    'plugin:depend/recommended'
+  ],
   parserOptions: {
     tsconfigRootDir: __dirname,
     project: ['./tsconfig.json'],
@@ -11,6 +16,9 @@ module.exports = {
     '@typescript-eslint/consistent-type-imports': ['error', { disallowTypeAnnotations: false }],
     'no-use-before-define': 'off',
     'eslint-comments/disable-enable-pair': ['error', { allowWholeFile: true }],
+    "depend/ban-dependencies": ["error", {
+      "modules": ["lodash", "chalk", "qs", "handlebars", "fs-extra"]
+    }]
   },
   overrides: [
     {
diff --git a/scripts/.gitignore b/scripts/.gitignore
deleted file mode 100644
index 0cba03f65076..000000000000
--- a/scripts/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-.nx/cache
\ No newline at end of file
diff --git a/scripts/.yarnrc.yml b/scripts/.yarnrc.yml
index a0608af67fa9..18b9a530ab39 100644
--- a/scripts/.yarnrc.yml
+++ b/scripts/.yarnrc.yml
@@ -2,6 +2,8 @@ compressionLevel: 0
 
 enableGlobalCache: true
 
+installStatePath: '../.yarn/scripts-install-state.gz'
+
 logFilters:
   - code: YN0005
     level: discard
@@ -17,11 +19,23 @@ plugins:
     spec: '@yarnpkg/plugin-typescript'
   - path: ../.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: '@yarnpkg/plugin-interactive-tools'
+  - path: ../.yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
+    spec: '@yarnpkg/plugin-workspace-tools'
+
+# See https://github.com/nrwl/nx/issues/22177
+supportedArchitectures:
+  cpu:
+    - current
+    - x64
+    - arm64
+  os:
+    - current
+    - linux
+    - darwin
 
 unsafeHttpWhitelist:
   - localhost
 
 yarnPath: ../.yarn/releases/yarn-4.3.0.cjs
-installStatePath: '../.yarn/scripts-install-state.gz'
 # Sometimes you get a "The remote archive doesn't match the expected checksum" error, uncommenting this line will fix it
 # checksumBehavior: 'update'
diff --git a/scripts/bench/bench-packages.ts b/scripts/bench/bench-packages.ts
new file mode 100644
index 000000000000..e7dd22ff1a87
--- /dev/null
+++ b/scripts/bench/bench-packages.ts
@@ -0,0 +1,493 @@
+import { BigQuery } from '@google-cloud/bigquery';
+import { InvalidArgumentError, program } from 'commander';
+import detectFreePort from 'detect-port';
+import { mkdir, readdir, rm, stat, writeFile } from 'fs/promises';
+import pLimit from 'p-limit';
+import { join } from 'path';
+import picocolors from 'picocolors';
+import { x } from 'tinyexec';
+import dedent from 'ts-dedent';
+
+import versions from '../../code/core/src/common/versions';
+import { maxConcurrentTasks } from '../utils/concurrency';
+import { esMain } from '../utils/esmain';
+
+const Thresholds = {
+  SELF_SIZE_RATIO: 0.1,
+  SELF_SIZE_ABSOLUTE: 10_000,
+  DEPS_SIZE_RATIO: 0.1,
+  DEPS_SIZE_ABSOLUTE: 10_000,
+  DEPS_COUNT_ABSOLUTE: 1,
+} as const;
+
+const BENCH_PACKAGES_PATH = join(__dirname, '..', '..', 'bench', 'packages');
+const REGISTRY_PORT = 6001;
+const GCP_CREDENTIALS = JSON.parse(process.env.GCP_CREDENTIALS || '{}');
+const bigQueryBenchTable = new BigQuery({
+  projectId: GCP_CREDENTIALS.project_id,
+  credentials: GCP_CREDENTIALS,
+})
+  .dataset('benchmark_results')
+  .table('package_bench');
+
+type PackageName = keyof typeof versions;
+type Result = {
+  package: PackageName;
+  dependencyCount: number;
+  selfSize: number;
+  dependencySize: number;
+};
+type ComparisonResult = {
+  package: PackageName;
+  dependencyCount: {
+    base: number;
+    new: number;
+    diff: number;
+  };
+  selfSize: {
+    base: number;
+    new: number;
+    diff: number;
+  };
+  dependencySize: {
+    base: number;
+    new: number;
+    diff: number;
+  };
+};
+type ResultMap = Record<PackageName, Result>;
+type ComparisonResultMap = Record<PackageName, ComparisonResult>;
+
+/**
+ * This function benchmarks the size of Storybook packages and their dependencies. For each package,
+ * the steps are:
+ *
+ * 1. Create a temporary directory in /bench/packages and create a package.json file that only depends
+ *    on that one package
+ * 2. Install the package and its dependencies, without peer dependencies
+ * 3. Measure the size of the package and its dependencies, and count the number of dependencies
+ *    (including transitive)
+ * 4. Print and return the results
+ */
+export const benchPackage = async (packageName: PackageName) => {
+  console.log(`Benching ${picocolors.blue(packageName)}...`);
+  const tmpBenchPackagePath = join(BENCH_PACKAGES_PATH, packageName.replace('@storybook', ''));
+
+  await rm(tmpBenchPackagePath, { recursive: true }).catch(() => {});
+  await mkdir(tmpBenchPackagePath, { recursive: true });
+
+  await writeFile(
+    join(tmpBenchPackagePath, 'package.json'),
+    JSON.stringify(
+      {
+        name: `${packageName}-bench`,
+        version: '1.0.0',
+        dependencies: {
+          [packageName]: versions[packageName],
+        },
+        // Overrides ensures that Storybook packages outside the monorepo are using the versions we have in the monorepo
+        overrides: versions,
+      },
+      null,
+      2
+    )
+  );
+  const npmInstallResult = await x(
+    'npm',
+    // --force to ignore peer dependency warnings, we aren't installing peer dependencies anyway
+    `install --registry http://localhost:6001 --omit peer --json --force`.split(' '),
+    {
+      nodeOptions: { cwd: tmpBenchPackagePath },
+    }
+  );
+
+  const { added } = JSON.parse(npmInstallResult.stdout) as { added: number };
+  // -1 of reported packages added because we shouldn't count the actual package as a dependency
+  const dependencyCount = added - 1;
+
+  const getDirSize = async (path: string) => {
+    const entities = await readdir(path, {
+      recursive: true,
+      withFileTypes: true,
+    });
+    const stats = await Promise.all(
+      entities
+        .filter((entity) => entity.isFile())
+        .map((entity) => stat(join(entity.parentPath, entity.name)))
+    );
+    return stats.reduce((acc, { size }) => acc + size, 0);
+  };
+
+  const nodeModulesSize = await getDirSize(join(tmpBenchPackagePath, 'node_modules'));
+  const selfSize = await getDirSize(join(tmpBenchPackagePath, 'node_modules', packageName));
+  const dependencySize = nodeModulesSize - selfSize;
+
+  const result: Result = {
+    package: packageName,
+    dependencyCount,
+    selfSize,
+    dependencySize,
+  };
+  console.log(`Done benching ${picocolors.blue(packageName)}`);
+  return result;
+};
+
+const toHumanReadable = (result: Partial<Result> | Partial<ComparisonResult>) => {
+  const formatBytes = (bytes: number, diff = false) => {
+    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    let size = Math.abs(bytes);
+    let unitIndex = 0;
+
+    while (size >= 1000 && unitIndex < units.length - 1) {
+      size /= 1000;
+      unitIndex++;
+    }
+
+    // B, KB = 0 decimal places
+    // MB, GB, TB = 2 decimal places
+    const decimals = unitIndex < 2 ? 0 : 2;
+    const formattedSize = `${size.toFixed(decimals)} ${units[unitIndex]}`;
+
+    if (bytes < 0) {
+      return `-${formattedSize}`;
+    }
+    if (diff && bytes > 0) {
+      return `+${formattedSize}`;
+    }
+    return formattedSize;
+  };
+
+  if (typeof result.dependencyCount === 'number') {
+    const { dependencyCount, selfSize, dependencySize } = result as Result;
+    return {
+      package: result.package,
+      dependencyCount: dependencyCount.toString(),
+      selfSize: formatBytes(selfSize),
+      dependencySize: formatBytes(dependencySize),
+      totalSize: formatBytes(selfSize + dependencySize),
+    };
+  }
+  const { dependencyCount, selfSize, dependencySize } = result as ComparisonResult;
+
+  return {
+    package: result.package,
+    dependencyCount: {
+      base: dependencyCount.base.toString(),
+      new: dependencyCount.new.toString(),
+      diff: `${dependencyCount.diff > 0 ? '+' : dependencyCount.diff < 0 ? '-' : ''}${dependencyCount.diff}`,
+    },
+    selfSize: {
+      base: formatBytes(selfSize.base),
+      new: formatBytes(selfSize.new),
+      diff: formatBytes(selfSize.diff, true),
+    },
+    dependencySize: {
+      base: formatBytes(dependencySize.base),
+      new: formatBytes(dependencySize.new),
+      diff: formatBytes(dependencySize.diff, true),
+    },
+    totalSize: {
+      base: formatBytes(selfSize.base + dependencySize.base),
+      new: formatBytes(selfSize.new + dependencySize.new),
+      diff: formatBytes(selfSize.diff + dependencySize.diff, true),
+    },
+  };
+};
+
+const saveLocally = async ({
+  results,
+  filename,
+}: {
+  results: Partial<ResultMap | ComparisonResultMap>;
+  filename: string;
+  diff?: boolean;
+}) => {
+  const resultPath = join(BENCH_PACKAGES_PATH, filename);
+  console.log(`Saving results to ${picocolors.magenta(resultPath)}...`);
+
+  const humanReadableResults = Object.entries(results).reduce(
+    (acc, [packageName, result]) => {
+      acc[packageName as PackageName] = toHumanReadable(result);
+      return acc;
+    },
+    {} as Record<PackageName, ReturnType<typeof toHumanReadable>>
+  );
+  await writeFile(resultPath, JSON.stringify(humanReadableResults, null, 2));
+};
+
+const compareResults = async ({
+  results,
+  baseBranch,
+}: {
+  results: ResultMap;
+  baseBranch: string;
+}) => {
+  console.log(`Comparing results with base branch ${picocolors.magenta(baseBranch)}...`);
+  const [baseResults] = await bigQueryBenchTable.query({
+    query: `
+      WITH
+        latest_packages AS (
+        SELECT *,
+          ROW_NUMBER() OVER (PARTITION BY package ORDER BY benchmarkedAt DESC) AS row_number
+        FROM
+          \`storybook-benchmark.benchmark_results.package_bench\`
+        WHERE
+          branch = @baseBranch
+          AND package IN UNNEST(@packages)
+          AND benchmarkedAt > TIMESTAMP_SUB(CURRENT_TIMESTAMP(), INTERVAL 7 DAY) )
+      SELECT *
+      FROM latest_packages
+      WHERE row_number = 1;`,
+    params: { baseBranch, packages: Object.keys(results) },
+  });
+
+  const comparisonResults = {} as ComparisonResultMap;
+  for (const result of Object.values(results)) {
+    let baseResult = baseResults.find((row) => row.package === result.package);
+    if (!baseResult) {
+      console.warn(
+        `No base result found for ${picocolors.blue(result.package)}, comparing with zero values.`
+      );
+      baseResult = {
+        package: result.package,
+        dependencyCount: 0,
+        selfSize: 0,
+        dependencySize: 0,
+      };
+    }
+
+    comparisonResults[result.package] = {
+      package: result.package,
+      dependencyCount: {
+        base: baseResult.dependencyCount,
+        new: result.dependencyCount,
+        diff: result.dependencyCount - baseResult.dependencyCount,
+      },
+      selfSize: {
+        base: baseResult.selfSize,
+        new: result.selfSize,
+        diff: result.selfSize - baseResult.selfSize,
+      },
+      dependencySize: {
+        base: baseResult.dependencySize,
+        new: result.dependencySize,
+        diff: result.dependencySize - baseResult.dependencySize,
+      },
+    };
+  }
+  console.log(picocolors.green('Done comparing results'));
+  return comparisonResults;
+};
+
+const filterResultsByThresholds = (comparisonResults: ComparisonResultMap) => {
+  const filteredResults: Partial<ComparisonResultMap> = {};
+  for (const comparisonResult of Object.values(comparisonResults)) {
+    const exceedsThresholds =
+      Math.abs(comparisonResult.selfSize.diff) > Thresholds.SELF_SIZE_ABSOLUTE ||
+      Math.abs(comparisonResult.selfSize.diff) / comparisonResult.selfSize.base >
+        Thresholds.SELF_SIZE_RATIO ||
+      Math.abs(comparisonResult.dependencySize.diff) > Thresholds.DEPS_SIZE_ABSOLUTE ||
+      Math.abs(comparisonResult.dependencySize.diff) / comparisonResult.dependencySize.base >
+        Thresholds.DEPS_SIZE_RATIO ||
+      Math.abs(comparisonResult.dependencyCount.diff) > Thresholds.DEPS_COUNT_ABSOLUTE;
+
+    if (exceedsThresholds) {
+      filteredResults[comparisonResult.package] = comparisonResult;
+    }
+  }
+
+  const amountAboveThreshold = Object.keys(filteredResults).length;
+  const color = amountAboveThreshold === 0 ? picocolors.green : picocolors.red;
+  console.log(color(`${amountAboveThreshold} packages exceeded the thresholds`));
+
+  return filteredResults;
+};
+
+const uploadToBigQuery = async ({
+  results,
+  branch,
+  commit,
+  benchmarkedAt,
+}: {
+  results: ResultMap;
+  branch: string;
+  commit: string;
+  benchmarkedAt: Date;
+}) => {
+  console.log('Uploading results to BigQuery...');
+  const rows = Object.values(results).map((result) => ({
+    branch,
+    commit,
+    benchmarkedAt,
+    package: result.package,
+    selfSize: result.selfSize,
+    dependencySize: result.dependencySize,
+    dependencyCount: result.dependencyCount,
+  }));
+
+  await bigQueryBenchTable.insert(rows);
+};
+
+const uploadToGithub = async ({
+  results,
+  headBranch,
+  baseBranch,
+  commit,
+  benchmarkedAt,
+  pullRequest,
+}: {
+  results: Partial<ComparisonResultMap>;
+  headBranch: string;
+  baseBranch: string;
+  commit: string;
+  benchmarkedAt: Date;
+  pullRequest: number;
+}) => {
+  console.log('Uploading results to GitHub...');
+  // const response = await fetch('http://localhost:3000/package-bench', {
+  const response = await fetch('https://storybook-benchmark-bot.vercel.app/package-bench', {
+    method: 'POST',
+    body: JSON.stringify({
+      owner: 'storybookjs',
+      repo: 'storybook',
+      issueNumber: pullRequest,
+      headBranch,
+      baseBranch,
+      commit,
+      benchmarkedAt: benchmarkedAt.toISOString(),
+      results,
+    }),
+  });
+  if (response.status < 200 || response.status >= 400) {
+    const body = await response.text();
+    throw new Error(`Failed to upload results to GitHub.
+      STATUS: ${response.status} - ${response.statusText}
+      BODY:
+      ${body}`);
+  }
+};
+
+const run = async () => {
+  program
+    .option(
+      '-b, --base-branch <string>',
+      'The base branch to compare the results with. Requires GCP_CREDENTIALS env var'
+    )
+    .option(
+      '-p, --pull-request <number>',
+      'The PR number to add compare results to. Only used together with --baseBranch',
+      function parseInt(value) {
+        const parsedValue = Number.parseInt(value);
+        if (Number.isNaN(parsedValue)) {
+          throw new InvalidArgumentError('Must be a number');
+        }
+        return parsedValue;
+      }
+    )
+    .option('-u, --upload', 'Upload results to BigQuery. Requires GCP_CREDENTIALS env var')
+    .argument(
+      '[packages...]',
+      'which packages to bench. If omitted, all packages are benched',
+      function parsePackages(value) {
+        const parsedValue = value.split(' ');
+        parsedValue.forEach((packageName) => {
+          if (!Object.keys(versions).includes(packageName)) {
+            throw new InvalidArgumentError(`Package '${packageName}' not found in the monorepo`);
+          }
+        });
+        return parsedValue;
+      }
+    );
+  program.parse(process.argv);
+
+  const packageNames = (
+    program.args.length > 0 ? program.args : Object.keys(versions)
+  ) as PackageName[];
+  const options = program.opts<{ pullRequest?: number; baseBranch?: string; upload?: boolean }>();
+
+  if (options.upload || options.baseBranch) {
+    if (!GCP_CREDENTIALS.project_id) {
+      throw new Error(
+        'GCP_CREDENTIALS env var is required to upload to BigQuery or compare against a base branch'
+      );
+    }
+  }
+
+  if ((await detectFreePort(REGISTRY_PORT)) === REGISTRY_PORT) {
+    throw new Error(dedent`The local verdaccio registry must be running in the background for package benching to work,
+      and packages must be published to it in --no-link mode with 'yarn --task publish --no-link'
+      Then run the registry with 'yarn --task run-registry --no-link'`);
+  }
+
+  // The amount of VCPUs for this task in CI is 2 (medium resource)
+  const amountOfVCPUs = 2;
+  const concurrentLimit = process.env.CI ? amountOfVCPUs - 1 : maxConcurrentTasks;
+  const limit = pLimit(concurrentLimit);
+
+  const progressIntervalId = setInterval(() => {
+    const doneCount = packageNames.length - limit.activeCount - limit.pendingCount;
+    if (doneCount === packageNames.length) {
+      clearInterval(progressIntervalId);
+      return;
+    }
+    console.log(
+      `Benching status: ${picocolors.red(limit.pendingCount)} pending, ${picocolors.yellow(limit.activeCount)} running, ${picocolors.green(doneCount)} done...`
+    );
+  }, 2_000);
+  const resultsArray = await Promise.all(
+    packageNames.map((packageName) => limit(() => benchPackage(packageName)))
+  );
+  const results = resultsArray.reduce((acc, result) => {
+    acc[result.package] = result;
+    return acc;
+  }, {} as ResultMap);
+  await saveLocally({
+    filename: `results.json`,
+    results,
+  });
+
+  const headBranch =
+    process.env.CIRCLE_BRANCH ||
+    (await x('git', 'rev-parse --abbrev-ref HEAD'.split(' '))).stdout.trim();
+  const commit =
+    process.env.CIRCLE_SHA1 || (await x('git', 'rev-parse HEAD'.split(' '))).stdout.trim();
+  const benchmarkedAt = new Date();
+
+  if (options.upload) {
+    await uploadToBigQuery({ results, branch: headBranch, commit, benchmarkedAt });
+  }
+
+  if (options.baseBranch) {
+    const comparisonResults = await compareResults({ results, baseBranch: options.baseBranch });
+    const resultsAboveThreshold = filterResultsByThresholds(comparisonResults);
+    await saveLocally({
+      filename: `compare-with-${options.baseBranch}.json`,
+      results: comparisonResults,
+      diff: true,
+    });
+    await saveLocally({
+      filename: `comparisons-above-threshold-with-${options.baseBranch}.json`,
+      results: resultsAboveThreshold,
+      diff: true,
+    });
+    if (options.pullRequest) {
+      await uploadToGithub({
+        results: resultsAboveThreshold,
+        pullRequest: options.pullRequest,
+        baseBranch: options.baseBranch,
+        headBranch,
+        commit,
+        benchmarkedAt,
+      });
+    }
+  }
+
+  console.log(picocolors.green('Done benching all packages'));
+};
+
+if (esMain(import.meta.url)) {
+  run().catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
+}
diff --git a/scripts/bench/utils.ts b/scripts/bench/utils.ts
index 1bd3a3f849ae..673fb56c4360 100644
--- a/scripts/bench/utils.ts
+++ b/scripts/bench/utils.ts
@@ -1,3 +1,4 @@
+// eslint-disable-next-line depend/ban-dependencies
 import { ensureDir, readJSON, readdir, writeJSON } from 'fs-extra';
 import { join } from 'path';
 import type { Page } from 'playwright-core';
diff --git a/scripts/build-package.ts b/scripts/build-package.ts
index 60ac5b012e13..8b74b5db9bfc 100644
--- a/scripts/build-package.ts
+++ b/scripts/build-package.ts
@@ -1,15 +1,18 @@
-import chalk from 'chalk';
 import { program } from 'commander';
+// eslint-disable-next-line depend/ban-dependencies
 import { execaCommand } from 'execa';
+// eslint-disable-next-line depend/ban-dependencies
 import { readJSON } from 'fs-extra';
 import { posix, resolve, sep } from 'path';
+import picocolors from 'picocolors';
 import prompts from 'prompts';
 import windowSize from 'window-size';
 
+import { findMostMatchText } from './utils/diff';
 import { getWorkspaces } from './utils/workspace';
 
 async function run() {
-  const packages = await getWorkspaces();
+  const packages = (await getWorkspaces()).filter(({ name }) => name !== '@storybook/root');
   const packageTasks = packages
     .map((pkg) => {
       let suffix = pkg.name.replace('@storybook/', '');
@@ -63,7 +66,9 @@ async function run() {
     ...packageTasks,
   };
 
-  const main = program.version('5.0.0').option('--all', `build everything ${chalk.gray('(all)')}`);
+  const main = program
+    .version('5.0.0')
+    .option('--all', `build everything ${picocolors.gray('(all)')}`);
 
   Object.keys(tasks)
     .reduce((acc, key) => acc.option(tasks[key].suffix, tasks[key].helpText), main)
@@ -76,60 +81,79 @@ async function run() {
     tasks[key].value = containsFlag || opts.all;
   });
 
-  let selection;
-  let watchMode = false;
-  let prodMode = false;
-  if (
-    !Object.keys(tasks)
-      .map((key) => tasks[key].value)
-      .filter(Boolean).length
-  ) {
-    selection = await prompts([
-      {
-        type: 'toggle',
-        name: 'watch',
-        message: 'Start in watch mode',
-        initial: false,
-        active: 'yes',
-        inactive: 'no',
-      },
-      {
-        type: 'toggle',
-        name: 'prod',
-        message: 'Start in production mode',
-        initial: false,
-        active: 'yes',
-        inactive: 'no',
-      },
-      {
-        type: 'autocompleteMultiselect',
-        message: 'Select the packages to build',
-        name: 'todo',
-        min: 1,
-        hint: 'You can also run directly with package name like `yarn build core`, or `yarn build --all` for all packages!',
-        // @ts-expect-error @types incomplete
-        optionsPerPage: windowSize.height - 3, // 3 lines for extra info
-        choices: packages.map(({ name: key }) => ({
-          value: key,
-          title: tasks[key].name || key,
-          selected: (tasks[key] && tasks[key].defaultValue) || false,
-        })),
-      },
-    ]).then(({ watch, prod, todo }: { watch: boolean; prod: boolean; todo: Array<string> }) => {
+  let watchMode = process.argv.includes('--watch');
+  let prodMode = process.argv.includes('--prod');
+  let selection = Object.keys(tasks)
+    .map((key) => tasks[key])
+    .filter((item) => !['watch', 'prod'].includes(item.name) && item.value === true);
+
+  // user has passed invalid package name(s) - try to guess the correct package name(s)
+  if ((!selection.length && main.args.length >= 1) || selection.length !== main.args.length) {
+    const suffixList = Object.values(tasks)
+      .filter((t) => t.name.includes('@storybook'))
+      .map((t) => t.suffix);
+
+    for (const arg of main.args) {
+      if (!suffixList.includes(arg)) {
+        const matchText = findMostMatchText(suffixList, arg);
+
+        if (matchText) {
+          console.log(
+            `${picocolors.red('Error')}: ${picocolors.cyan(
+              arg
+            )} is not a valid package name, Did you mean ${picocolors.cyan(matchText)}?`
+          );
+        }
+      }
+    }
+
+    process.exit(0);
+  }
+
+  if (!selection.length) {
+    selection = await prompts(
+      [
+        {
+          type: 'toggle',
+          name: 'watch',
+          message: 'Start in watch mode',
+          initial: false,
+          active: 'yes',
+          inactive: 'no',
+        },
+        {
+          type: 'toggle',
+          name: 'prod',
+          message: 'Start in production mode',
+          initial: false,
+          active: 'yes',
+          inactive: 'no',
+        },
+        {
+          type: 'autocompleteMultiselect',
+          message: 'Select the packages to build',
+          name: 'todo',
+          min: 1,
+          hint: 'You can also run directly with package name like `yarn build core`, or `yarn build --all` for all packages!',
+          // @ts-expect-error @types incomplete
+          optionsPerPage: windowSize.height - 3, // 3 lines for extra info
+          choices: packages.map(({ name: key }) => ({
+            value: key,
+            title: tasks[key].name || key,
+            selected: (tasks[key] && tasks[key].defaultValue) || false,
+          })),
+        },
+      ],
+      { onCancel: () => process.exit(0) }
+    ).then(({ watch, prod, todo }: { watch: boolean; prod: boolean; todo: Array<string> }) => {
       watchMode = watch;
       prodMode = prod;
       return todo?.map((key) => tasks[key]);
     });
-  } else {
-    // hits here when running yarn build --packagename
-    watchMode = process.argv.includes('--watch');
-    prodMode = process.argv.includes('--prod');
-    selection = Object.keys(tasks)
-      .map((key) => tasks[key])
-      .filter((item) => !['watch', 'prod'].includes(item.name) && item.value === true);
   }
 
-  selection?.filter(Boolean).forEach(async (v) => {
+  console.log('Building selected packages...');
+  selection.forEach(async (v) => {
     const command = (await readJSON(resolve('../code', v.location, 'package.json'))).scripts?.prep
       .split(posix.sep)
       .join(sep);
@@ -154,10 +178,10 @@ async function run() {
     );
 
     sub.stdout?.on('data', (data) => {
-      process.stdout.write(`${chalk.cyan(v.name)}:\n${data}`);
+      process.stdout.write(`${picocolors.cyan(v.name)}:\n${data}`);
     });
     sub.stderr?.on('data', (data) => {
-      process.stderr.write(`${chalk.red(v.name)}:\n${data}`);
+      process.stderr.write(`${picocolors.red(v.name)}:\n${data}`);
     });
   });
 }
diff --git a/scripts/check-package.ts b/scripts/check-package.ts
index c8873e6cf846..035ae8a74ec6 100644
--- a/scripts/check-package.ts
+++ b/scripts/check-package.ts
@@ -1,11 +1,13 @@
 // This script makes sure that we can support type checking,
 // without having to build dts files for all packages in the monorepo.
 // It is not implemented yet for angular, svelte and vue.
-import chalk from 'chalk';
 import { program } from 'commander';
+// eslint-disable-next-line depend/ban-dependencies
 import { execaCommand } from 'execa';
+// eslint-disable-next-line depend/ban-dependencies
 import { readJSON } from 'fs-extra';
 import { resolve } from 'path';
+import picocolors from 'picocolors';
 import prompts from 'prompts';
 import windowSize from 'window-size';
 
@@ -53,7 +55,9 @@ async function run() {
     ...packageTasks,
   };
 
-  const main = program.version('5.0.0').option('--all', `check everything ${chalk.gray('(all)')}`);
+  const main = program
+    .version('5.0.0')
+    .option('--all', `check everything ${picocolors.gray('(all)')}`);
 
   Object.keys(tasks)
     .reduce((acc, key) => acc.option(tasks[key].suffix, tasks[key].helpText), main)
@@ -122,10 +126,10 @@ async function run() {
     });
 
     sub.stdout.on('data', (data) => {
-      process.stdout.write(`${chalk.cyan(v.name)}:\n${data}`);
+      process.stdout.write(`${picocolors.cyan(v.name)}:\n${data}`);
     });
     sub.stderr.on('data', (data) => {
-      process.stderr.write(`${chalk.red(v.name)}:\n${data}`);
+      process.stderr.write(`${picocolors.red(v.name)}:\n${data}`);
     });
   });
 }
diff --git a/scripts/combine-compodoc.ts b/scripts/combine-compodoc.ts
index eefc905fc132..7b934854d015 100755
--- a/scripts/combine-compodoc.ts
+++ b/scripts/combine-compodoc.ts
@@ -1,8 +1,11 @@
 // Compodoc does not follow symlinks (it ignores them and their contents entirely)
 // So, we need to run a separate compodoc process on every symlink inside the project,
 // then combine the results into one large documentation.json
+// eslint-disable-next-line depend/ban-dependencies
 import { execaCommand } from 'execa';
+// eslint-disable-next-line depend/ban-dependencies
 import { lstat, readFile, realpath, writeFile } from 'fs-extra';
+// eslint-disable-next-line depend/ban-dependencies
 import { globSync } from 'glob';
 import { join, resolve } from 'path';
 
diff --git a/scripts/create-nx-sandbox-projects.ts b/scripts/create-nx-sandbox-projects.ts
index 5de0d60bc2e9..60dd75628d30 100644
--- a/scripts/create-nx-sandbox-projects.ts
+++ b/scripts/create-nx-sandbox-projects.ts
@@ -15,6 +15,7 @@ const projectJson = (name: string, framework: string, tags: string[]) => ({
     'test',
     'essentials',
     'interactions',
+    'experimental-addon-test',
     'links',
     'onboarding',
     'blocks',
diff --git a/scripts/dangerfile.ts b/scripts/dangerfile.ts
index 51a144e550cf..961d77cbd2f8 100644
--- a/scripts/dangerfile.ts
+++ b/scripts/dangerfile.ts
@@ -1,11 +1,14 @@
-/* eslint-disable import/extensions */
+/* eslint-disable import/no-extraneous-dependencies, import/extensions */
 import { execSync } from 'child_process';
 import { danger, fail } from 'danger';
 
 execSync('npm install lodash');
 
+// eslint-disable-next-line depend/ban-dependencies
 const flatten = require('lodash/flatten.js');
+// eslint-disable-next-line depend/ban-dependencies
 const intersection = require('lodash/intersection.js');
+// eslint-disable-next-line depend/ban-dependencies
 const isEmpty = require('lodash/isEmpty.js');
 
 const pkg = require('../code/package.json');
diff --git a/scripts/event-log-checker.ts b/scripts/event-log-checker.ts
index 4893eaeb449c..403bde0b51f5 100644
--- a/scripts/event-log-checker.ts
+++ b/scripts/event-log-checker.ts
@@ -1,5 +1,5 @@
 import assert from 'assert';
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 
 import versions from '../code/core/src/common/versions';
 import { oneWayHash } from '../code/core/src/telemetry/one-way-hash';
@@ -89,8 +89,8 @@ async function run() {
     });
   } catch (err) {
     if (err instanceof assert.AssertionError) {
-      console.log(`Assertions failed for ${chalk.bold(templateName)}\n`);
-      console.log(chalk.bold(chalk.red`✕ ${testMessage}:`));
+      console.log(`Assertions failed for ${picocolors.bold(templateName)}\n`);
+      console.log(picocolors.bold(picocolors.red(`✕ ${testMessage}:`)));
       console.log(err);
       process.exit(1);
     }
diff --git a/scripts/event-log-collector.ts b/scripts/event-log-collector.ts
index f3ad10700887..1e4a656960b1 100644
--- a/scripts/event-log-collector.ts
+++ b/scripts/event-log-collector.ts
@@ -1,9 +1,10 @@
-import express from 'express';
+import { json } from '@polka/parse';
+import polka from 'polka';
 
 const PORT = process.env.PORT || 6007;
 
-const server = express();
-server.use(express.json());
+const server = polka();
+server.use(json());
 
 const events: Record<string, unknown>[] = [];
 server.post('/event-log', (req, res) => {
@@ -14,7 +15,7 @@ server.post('/event-log', (req, res) => {
 
 server.get('/event-log', (_req, res) => {
   console.log(`Sending ${events.length} events`);
-  res.json(events);
+  res.end(JSON.stringify(events));
 });
 
 server.listen(PORT, () => {
diff --git a/scripts/get-report-message.ts b/scripts/get-report-message.ts
index 4774bc0f8ca2..60f556b91014 100644
--- a/scripts/get-report-message.ts
+++ b/scripts/get-report-message.ts
@@ -1,4 +1,6 @@
+// eslint-disable-next-line depend/ban-dependencies
 import { execaCommand } from 'execa';
+// eslint-disable-next-line depend/ban-dependencies
 import { readJson } from 'fs-extra';
 import { join } from 'path';
 
diff --git a/scripts/get-template.ts b/scripts/get-template.ts
index 28b390c665bd..cb351eab0410 100644
--- a/scripts/get-template.ts
+++ b/scripts/get-template.ts
@@ -1,7 +1,8 @@
-import chalk from 'chalk';
 import { program } from 'commander';
+// eslint-disable-next-line depend/ban-dependencies
 import { pathExists, readFile } from 'fs-extra';
 import { readdir } from 'fs/promises';
+import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 import yaml from 'yaml';
 
@@ -103,7 +104,7 @@ async function checkParallelism(cadence?: Cadence, scriptName?: TaskKey) {
   let isIncorrect = false;
 
   cadences.forEach((cad) => {
-    summary.push(`\n${chalk.bold(cad)}`);
+    summary.push(`\n${picocolors.bold(cad)}`);
     const cadenceTemplates = Object.entries(allTemplates).filter(([key]) =>
       templatesByCadence[cad].includes(key as TemplateKey)
     );
@@ -129,7 +130,7 @@ async function checkParallelism(cadence?: Cadence, scriptName?: TaskKey) {
 
         if (newParallelism !== currentParallelism) {
           summary.push(
-            `-- ❌ ${tasksMap[script]} - parallelism: ${currentParallelism} ${chalk.bgRed(
+            `-- ❌ ${tasksMap[script]} - parallelism: ${currentParallelism} ${picocolors.bgRed(
               `(should be ${newParallelism})`
             )}`
           );
diff --git a/scripts/knip.config.ts b/scripts/knip.config.ts
new file mode 100644
index 000000000000..c57b570a8ac0
--- /dev/null
+++ b/scripts/knip.config.ts
@@ -0,0 +1,97 @@
+import { join, relative } from 'node:path';
+
+// eslint-disable-next-line depend/ban-dependencies
+import fg from 'fast-glob';
+import type { KnipConfig } from 'knip';
+import { match } from 'minimatch';
+
+// Files we want to exclude from analysis should be negated project patterns, not `ignores`
+// docs: https://knip.dev/guides/configuring-project-files
+const project = [
+  'src/**/*.{js,jsx,ts,tsx}',
+  '!**/__search-files-tests__/**',
+  '!**/__testfixtures__/**',
+  '!**/__mocks-ng-workspace__/**',
+  '!**/__mockdata__/**',
+];
+
+// Adding an explicit MDX "compiler", as the dependency knip looks for isn't listed (@mdx-js/mdx or astro)
+// Alternatively, we could ignore a few false positives
+// docs: https://knip.dev/features/compilers
+const importMatcher = /import[^'"]+['"]([^'"]+)['"]/g;
+const fencedCodeBlockMatcher = /```[\s\S]*?```/g;
+const mdx = (text: string) =>
+  [...text.replace(fencedCodeBlockMatcher, '').matchAll(importMatcher)].join('\n');
+
+const baseConfig = {
+  ignoreWorkspaces: ['renderers/svelte'], // ignored: Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in code/node_modules/@sveltejs/vite-plugin-svelte/package.json
+
+  // storybook itself configured (only) in root
+  storybook: { entry: ['**/*.@(mdx|stories.@(mdx|js|jsx|mjs|ts|tsx))'] },
+
+  workspaces: {
+    '.': {
+      project,
+    },
+    'addons/*': {
+      project,
+    },
+    'builders/*': {
+      project,
+    },
+    core: {
+      entry: ['src/index.ts', 'src/cli/bin/index.ts', 'src/*/{globals*,index,runtime}.ts'],
+      project,
+    },
+    'frameworks/*': {
+      entry: [
+        // these extra entries we only need for frameworks/angular and frameworks/ember it seems
+        'src/index.ts',
+        'src/builders/{build,start}-storybook/index.ts',
+        'src/**/docs/{index,config}.{js,ts}',
+      ],
+      project,
+    },
+    'lib/*': {
+      project,
+    },
+    'presets/*': {
+      project,
+    },
+    'renderers/*': {
+      project,
+    },
+  },
+  compilers: {
+    mdx,
+  },
+} satisfies KnipConfig;
+
+// Adds package.json#bundler.entries etc. to each workspace config `entry: []`
+export const addBundlerEntries = async (config: KnipConfig) => {
+  const baseDir = join(__dirname, '../code');
+  const rootManifest = await import(join(baseDir, 'package.json'));
+  const workspaceDirs = await fg(rootManifest.workspaces.packages, {
+    cwd: baseDir,
+    onlyDirectories: true,
+  });
+  const workspaceDirectories = workspaceDirs.map((dir) => relative(baseDir, join(baseDir, dir)));
+  for (const wsDir of workspaceDirectories) {
+    for (const configKey of Object.keys(baseConfig.workspaces)) {
+      if (match([wsDir], configKey)) {
+        const manifest = await import(join(baseDir, wsDir, 'package.json'));
+        const configEntries = (config.workspaces[configKey].entry as string[]) ?? [];
+        const bundler = manifest?.bundler;
+        for (const value of Object.values(bundler ?? {})) {
+          if (Array.isArray(value)) {
+            configEntries.push(...value);
+          }
+        }
+        config.workspaces[configKey].entry = Array.from(new Set(configEntries));
+      }
+    }
+  }
+  return config;
+};
+
+export default addBundlerEntries(baseConfig);
diff --git a/scripts/package.json b/scripts/package.json
index 2cd8402ddcd8..b02d6abc9bba 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -4,11 +4,12 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "bench-packages": "jiti ./bench/bench-packages.ts",
     "build-package": "jiti ./build-package.ts",
     "check": "jiti ./prepare/check-scripts.ts",
     "check-package": "jiti ./check-package.ts",
-    "docs:prettier:check": "cd ../docs && prettier --check ./snippets || echo 'Please run \"docs:prettier:write\" in the \"scripts\" directory to fix the issues'",
-    "docs:prettier:write": "cd ../docs && prettier --write ./snippets",
+    "docs:prettier:check": "cd ../docs && prettier --check ./_snippets || echo 'Please run \"docs:prettier:write\" in the \"scripts\" directory to fix the issues'",
+    "docs:prettier:write": "cd ../docs && prettier --write ./_snippets",
     "generate-sandboxes": "jiti ./sandbox/generate.ts",
     "get-report-message": "jiti ./get-report-message.ts",
     "get-template": "jiti ./get-template.ts",
@@ -53,7 +54,7 @@
     ]
   },
   "resolutions": {
-    "esbuild": "^0.23.0",
+    "esbuild": "^0.24.0",
     "serialize-javascript": "^3.1.0",
     "type-fest": "~2.19"
   },
@@ -61,9 +62,9 @@
     "@actions/core": "^1.10.1",
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
     "@google-cloud/bigquery": "^6.2.0",
-    "@nx/workspace": "18.0.6",
     "@octokit/graphql": "^5.0.5",
     "@octokit/request": "^8.1.2",
+    "@polka/parse": "^1.0.0-next.28",
     "@storybook/eslint-config-storybook": "^4.0.0",
     "@storybook/linter-config": "^4.0.0",
     "@testing-library/dom": "^10.4.0",
@@ -75,11 +76,9 @@
     "@types/detect-port": "^1.3.5",
     "@types/ejs": "^3.1.5",
     "@types/escodegen": "^0.0.6",
-    "@types/express": "^4.17.21",
     "@types/fs-extra": "^11.0.4",
     "@types/http-server": "^0.12.4",
     "@types/jest": "^29.5.12",
-    "@types/lodash": "^4.17.6",
     "@types/node": "^22.0.0",
     "@types/prettier": "^3.0.0",
     "@types/pretty-hrtime": "^1.0.3",
@@ -94,10 +93,9 @@
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/experimental-utils": "^5.62.0",
     "@typescript-eslint/parser": "^7.16.0",
-    "@vitest/coverage-v8": "^2.0.5",
+    "@vitest/coverage-v8": "^2.1.3",
     "ansi-regex": "^6.0.1",
     "browser-assert": "^1.2.1",
-    "chalk": "^4.1.0",
     "chromatic": "^11.5.5",
     "codecov": "^3.8.1",
     "commander": "^12.1.0",
@@ -106,13 +104,16 @@
     "danger": "^12.3.3",
     "dataloader": "^2.2.2",
     "detect-port": "^1.6.1",
+    "diff-match-patch-es": "^0.1.0",
     "ejs": "^3.1.10",
     "ejs-lint": "^2.0.0",
-    "esbuild": "^0.23.0",
+    "es-toolkit": "^1.22.0",
+    "esbuild": "^0.24.0",
     "esbuild-plugin-alias": "^0.2.1",
     "eslint": "^8.57.0",
     "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-depend": "^0.11.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-file-progress": "^1.4.0",
     "eslint-plugin-html": "^8.1.1",
@@ -124,7 +125,6 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
     "execa": "^6.1.0",
-    "express": "^4.19.2",
     "fast-folder-size": "^2.2.0",
     "fast-glob": "^3.3.2",
     "find-up": "^5.0.0",
@@ -135,16 +135,18 @@
     "husky": "^4.3.7",
     "json5": "^2.2.3",
     "junit-xml": "^1.2.0",
+    "knip": "^5.30.1",
     "lint-staged": "^15.2.7",
-    "lodash": "^4.17.21",
     "memoizerific": "^1.11.3",
+    "minimatch": "^10.0.1",
     "node-gyp": "^9.3.1",
-    "nx": "18.0.6",
     "ora": "^5.4.1",
     "p-limit": "^3.1.0",
     "p-retry": "^5.1.2",
-    "playwright": "1.46.0",
-    "playwright-core": "1.46.0",
+    "picocolors": "^1.1.0",
+    "playwright": "1.48.1",
+    "playwright-core": "1.48.1",
+    "polka": "^1.0.0-next.28",
     "prettier": "^3.3.2",
     "prettier-plugin-brace-style": "^0.6.2",
     "prettier-plugin-css-order": "^2.1.2",
@@ -160,10 +162,10 @@
     "react-dom": "^18.3.1",
     "read-pkg-up": "^7.0.1",
     "recast": "^0.23.9",
-    "remark": "^14.0.3",
+    "remark": "^15.0.1",
     "remark-cli": "^12.0.1",
-    "remark-lint": "^9.1.2",
-    "remark-preset-lint-recommended": "^6.1.3",
+    "remark-lint": "^10.0.0",
+    "remark-preset-lint-recommended": "^7.0.0",
     "rollup": "^4.21.0",
     "rollup-plugin-dts": "^6.1.1",
     "semver": "^7.6.2",
@@ -172,14 +174,15 @@
     "slash": "^3.0.0",
     "sort-package-json": "^2.10.0",
     "tiny-invariant": "^1.3.3",
+    "tinyexec": "^0.3.0",
     "trash": "^7.2.0",
     "ts-dedent": "^2.2.0",
     "tsup": "^6.7.0",
     "type-fest": "~2.19",
-    "typescript": "^5.4.5",
+    "typescript": "5.4.5",
     "util": "^0.12.5",
     "uuid": "^9.0.1",
-    "vitest": "^2.0.5",
+    "vitest": "^2.1.3",
     "wait-on": "^7.2.0",
     "window-size": "^1.1.1",
     "yaml": "^2.4.5",
diff --git a/scripts/prepare/addon-bundle.ts b/scripts/prepare/addon-bundle.ts
index 14c62791514e..16683ea38ff2 100755
--- a/scripts/prepare/addon-bundle.ts
+++ b/scripts/prepare/addon-bundle.ts
@@ -1,7 +1,11 @@
+import { writeFile } from 'node:fs/promises';
 import { builtinModules } from 'node:module';
 
+import type { Metafile } from 'esbuild';
 import aliasPlugin from 'esbuild-plugin-alias';
+// eslint-disable-next-line depend/ban-dependencies
 import * as fs from 'fs-extra';
+// eslint-disable-next-line depend/ban-dependencies
 import { glob } from 'glob';
 import { dirname, join, parse, posix, relative, sep } from 'path';
 import slash from 'slash';
@@ -13,6 +17,7 @@ import type { PackageJson } from 'type-fest';
 import { globalPackages as globalManagerPackages } from '../../code/core/src/manager/globals/globals';
 import { globalPackages as globalPreviewPackages } from '../../code/core/src/preview/globals/globals';
 import { exec } from '../utils/exec';
+import { esbuild } from './tools';
 
 /* TYPES */
 
@@ -34,6 +39,8 @@ type DtsConfigSection = Pick<Options, 'dts' | 'tsconfig'>;
 
 /* MAIN */
 
+const OUT_DIR = join(process.cwd(), 'dist');
+
 export const nodeInternals = [
   'module',
   'node:module',
@@ -61,19 +68,30 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
     await exec(`jiti ${pre}`, { cwd });
   }
 
+  const metafilesDir = join(
+    __dirname,
+    '..',
+    '..',
+    'code',
+    'bench',
+    'esbuild-metafiles',
+    name.replace('@storybook/', '')
+  );
+
   const reset = hasFlag(flags, 'reset');
   const watch = hasFlag(flags, 'watch');
   const optimized = hasFlag(flags, 'optimized');
 
   if (reset) {
-    await fs.emptyDir(join(process.cwd(), 'dist'));
+    await fs.emptyDir(OUT_DIR);
+    await fs.emptyDir(metafilesDir);
   }
 
-  const tasks: Promise<any>[] = [];
+  const tasks: (() => Promise<any>)[] = [];
 
-  const outDir = join(process.cwd(), 'dist');
   const commonOptions: Options = {
-    outDir,
+    outDir: OUT_DIR,
+    metafile: true,
     silent: true,
     treeshake: true,
     shims: false,
@@ -117,37 +135,42 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
       optimized,
     });
 
-    tasks.push(
-      build({
-        ...commonOptions,
-        ...(optimized ? dtsConfig : {}),
-        ...browserOptions,
-        entry: exportEntries,
-        external: [...commonExternals, ...globalManagerPackages, ...globalPreviewPackages],
-      }),
-      build({
-        ...commonOptions,
-        ...(optimized ? dtsConfig : {}),
-        entry: exportEntries,
-        format: ['cjs'],
-        target: browserOptions.target,
-        platform: 'neutral',
-        external: [...commonExternals, ...globalManagerPackages, ...globalPreviewPackages],
-        esbuildOptions: (options) => {
-          options.platform = 'neutral';
-          Object.assign(options, getESBuildOptions(optimized));
-        },
-      })
-    );
+    tasks.push(async () => {
+      await Promise.all([
+        build({
+          ...commonOptions,
+          ...(optimized ? dtsConfig : {}),
+          ...browserOptions,
+          entry: exportEntries,
+          external: [...commonExternals, ...globalManagerPackages, ...globalPreviewPackages],
+        }),
+        build({
+          ...commonOptions,
+          ...(optimized ? dtsConfig : {}),
+          entry: exportEntries,
+          format: ['cjs'],
+          target: browserOptions.target,
+          platform: 'neutral',
+          external: [...commonExternals, ...globalManagerPackages, ...globalPreviewPackages],
+          esbuildOptions: (options) => {
+            options.platform = 'neutral';
+            Object.assign(options, getESBuildOptions(optimized));
+          },
+        }),
+      ]);
+      if (!watch) {
+        await readMetafiles({ formats: ['esm', 'cjs'] });
+      }
+    });
 
     if (tsConfigExists && !optimized) {
-      tasks.push(...exportEntries.map(generateDTSMapperFile));
+      tasks.push(...exportEntries.map((entry) => () => generateDTSMapperFile(entry)));
     }
   }
 
   if (managerEntries.length > 0) {
-    tasks.push(
-      build({
+    tasks.push(async () => {
+      await build({
         ...commonOptions,
         ...browserOptions,
         entry: managerEntries.map((e: string) => slash(join(cwd, e))),
@@ -155,8 +178,11 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
           js: '.js',
         }),
         external: [...commonExternals, ...globalManagerPackages],
-      })
-    );
+      });
+      if (!watch) {
+        await readMetafiles({ formats: ['esm'] });
+      }
+    });
   }
 
   if (previewEntries.length > 0) {
@@ -165,19 +191,22 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
       entries: previewEntries,
       optimized,
     });
-    tasks.push(
-      build({
+    tasks.push(async () => {
+      await build({
         ...commonOptions,
         ...(optimized ? dtsConfig : {}),
         ...browserOptions,
         format: ['esm', 'cjs'],
         entry: previewEntries.map((e: string) => slash(join(cwd, e))),
         external: [...commonExternals, ...globalPreviewPackages],
-      })
-    );
+      });
+      if (!watch) {
+        await readMetafiles({ formats: ['esm', 'cjs'] });
+      }
+    });
 
     if (tsConfigExists && !optimized) {
-      tasks.push(...previewEntries.map(generateDTSMapperFile));
+      tasks.push(...previewEntries.map((entry) => () => generateDTSMapperFile(entry)));
     }
   }
 
@@ -187,56 +216,60 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
       entries: nodeEntries,
       optimized,
     });
-    tasks.push(
-      build({
-        ...commonOptions,
-        entry: nodeEntries.map((e: string) => slash(join(cwd, e))),
-        format: ['cjs'],
-        target: 'node18',
-        platform: 'node',
-        external: commonExternals,
-        esbuildOptions: (c) => {
-          c.platform = 'node';
-          Object.assign(c, getESBuildOptions(optimized));
-        },
-      })
-    );
-    tasks.push(
-      build({
-        ...commonOptions,
-        ...(optimized ? dtsConfig : {}),
-        entry: nodeEntries.map((e: string) => slash(join(cwd, e))),
-        format: ['esm'],
-        target: 'node18',
-        platform: 'neutral',
-        banner: {
-          js: dedent`
-            import ESM_COMPAT_Module from "node:module";
-            import { fileURLToPath as ESM_COMPAT_fileURLToPath } from 'node:url';
-            import { dirname as ESM_COMPAT_dirname } from 'node:path';
-            const __filename = ESM_COMPAT_fileURLToPath(import.meta.url);
-            const __dirname = ESM_COMPAT_dirname(__filename);
-            const require = ESM_COMPAT_Module.createRequire(import.meta.url);
-          `,
-        },
-        external: [...commonExternals, ...nodeInternals],
-        esbuildOptions: (c) => {
-          c.mainFields = ['main', 'module', 'node'];
-          c.conditions = ['node', 'module', 'import', 'require'];
-          c.platform = 'neutral';
-          Object.assign(c, getESBuildOptions(optimized));
-        },
-      })
-    );
+    tasks.push(async () => {
+      await Promise.all([
+        build({
+          ...commonOptions,
+          entry: nodeEntries.map((e: string) => slash(join(cwd, e))),
+          format: ['cjs'],
+          target: 'node18',
+          platform: 'node',
+          external: commonExternals,
+          esbuildOptions: (c) => {
+            c.platform = 'node';
+            Object.assign(c, getESBuildOptions(optimized));
+          },
+        }),
+        build({
+          ...commonOptions,
+          ...(optimized ? dtsConfig : {}),
+          entry: nodeEntries.map((e: string) => slash(join(cwd, e))),
+          format: ['esm'],
+          target: 'node18',
+          platform: 'neutral',
+          banner: {
+            js: dedent`
+              import ESM_COMPAT_Module from "node:module";
+              import { fileURLToPath as ESM_COMPAT_fileURLToPath } from 'node:url';
+              import { dirname as ESM_COMPAT_dirname } from 'node:path';
+              const __filename = ESM_COMPAT_fileURLToPath(import.meta.url);
+              const __dirname = ESM_COMPAT_dirname(__filename);
+              const require = ESM_COMPAT_Module.createRequire(import.meta.url);
+            `,
+          },
+          external: [...commonExternals, ...nodeInternals],
+          esbuildOptions: (c) => {
+            c.mainFields = ['main', 'module', 'node'];
+            c.conditions = ['node', 'module', 'import', 'require'];
+            c.platform = 'neutral';
+            Object.assign(c, getESBuildOptions(optimized));
+          },
+        }),
+      ]);
+      if (!watch) {
+        await readMetafiles({ formats: ['esm', 'cjs'] });
+      }
+    });
 
     if (tsConfigExists && !optimized) {
-      tasks.push(...nodeEntries.map(generateDTSMapperFile));
+      tasks.push(...nodeEntries.map((entry) => () => generateDTSMapperFile(entry)));
     }
   }
 
-  await Promise.all(tasks);
-
-  const dtsFiles = await glob(outDir + '/**/*.d.ts');
+  for (const task of tasks) {
+    await task();
+  }
+  const dtsFiles = await glob(OUT_DIR + '/**/*.d.ts');
   await Promise.all(
     dtsFiles.map(async (file) => {
       const content = await fs.readFile(file, 'utf-8');
@@ -247,6 +280,10 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
     })
   );
 
+  if (!watch) {
+    await saveMetafiles({ metafilesDir });
+  }
+
   if (post) {
     await exec(`jiti ${post}`, { cwd }, { debug: true });
   }
@@ -311,6 +348,34 @@ async function generateDTSMapperFile(file: string) {
   );
 }
 
+const metafile: Metafile = {
+  inputs: {},
+  outputs: {},
+};
+
+async function readMetafiles({ formats }: { formats: Formats[] }) {
+  await Promise.all(
+    formats.map(async (format) => {
+      const fromFilename = `metafile-${format}.json`;
+      const currentMetafile = await fs.readJson(join(OUT_DIR, fromFilename));
+      metafile.inputs = { ...metafile.inputs, ...currentMetafile.inputs };
+      metafile.outputs = { ...metafile.outputs, ...currentMetafile.outputs };
+
+      await fs.rm(join(OUT_DIR, fromFilename));
+    })
+  );
+}
+
+async function saveMetafiles({ metafilesDir }: { metafilesDir: string }) {
+  await fs.ensureDir(metafilesDir);
+
+  await writeFile(join(metafilesDir, 'metafile.json'), JSON.stringify(metafile, null, 2));
+  await writeFile(
+    join(metafilesDir, 'metafile.txt'),
+    await esbuild.analyzeMetafile(metafile, { color: false, verbose: false })
+  );
+}
+
 const hasFlag = (flags: string[], name: string) => !!flags.find((s) => s.startsWith(`--${name}`));
 
 /* SELF EXECUTION */
diff --git a/scripts/prepare/bundle.ts b/scripts/prepare/bundle.ts
index 81a7b301fe41..c9431c22047d 100755
--- a/scripts/prepare/bundle.ts
+++ b/scripts/prepare/bundle.ts
@@ -1,7 +1,11 @@
+import { writeFile } from 'node:fs/promises';
 import { dirname, join, parse, posix, relative, resolve, sep } from 'node:path';
 
+import type { Metafile } from 'esbuild';
 import aliasPlugin from 'esbuild-plugin-alias';
+// eslint-disable-next-line depend/ban-dependencies
 import * as fs from 'fs-extra';
+// eslint-disable-next-line depend/ban-dependencies
 import { glob } from 'glob';
 import slash from 'slash';
 import { dedent } from 'ts-dedent';
@@ -10,6 +14,7 @@ import { build } from 'tsup';
 import type { PackageJson } from 'type-fest';
 
 import { exec } from '../utils/exec';
+import { esbuild } from './tools';
 
 /* TYPES */
 
@@ -30,6 +35,8 @@ type DtsConfigSection = Pick<Options, 'dts' | 'tsconfig'>;
 
 /* MAIN */
 
+const OUT_DIR = join(process.cwd(), 'dist');
+
 const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
   const {
     name,
@@ -50,17 +57,26 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
     await exec(`jiti ${pre}`, { cwd });
   }
 
+  const metafilesDir = join(
+    __dirname,
+    '..',
+    '..',
+    'code',
+    'bench',
+    'esbuild-metafiles',
+    name.replace('@storybook', '')
+  );
+
   const reset = hasFlag(flags, 'reset');
   const watch = hasFlag(flags, 'watch');
   const optimized = hasFlag(flags, 'optimized');
-
   if (reset) {
-    await fs.emptyDir(join(process.cwd(), 'dist'));
+    await fs.emptyDir(OUT_DIR);
+    await fs.emptyDir(metafilesDir);
   }
 
   const tasks: Promise<any>[] = [];
 
-  const outDir = join(process.cwd(), 'dist');
   const externals = [
     name,
     ...extraExternals,
@@ -93,13 +109,19 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
         entry: nonPresetEntries,
         shims: false,
         watch,
-        outDir,
+        outDir: OUT_DIR,
         sourcemap: false,
+        metafile: true,
         format: ['esm'],
         target: platform === 'node' ? ['node18'] : ['chrome100', 'safari15', 'firefox91'],
         clean: false,
         ...(dtsBuild === 'esm' ? dtsConfig : {}),
         platform: platform || 'browser',
+        define: {
+          // tsup replaces 'process.env.NODE_ENV' during build time. We don't want to do this. Instead, the builders (vite/webpack) should replace it
+          // Then, the variable can be set accordingly in dev/build mode
+          'process.env.NODE_ENV': 'process.env.NODE_ENV',
+        },
         esbuildPlugins:
           platform === 'node'
             ? []
@@ -127,8 +149,9 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
         silent: true,
         entry: allEntries,
         watch,
-        outDir,
+        outDir: OUT_DIR,
         sourcemap: false,
+        metafile: true,
         format: ['cjs'],
         target: 'node18',
         ...(dtsBuild === 'cjs' ? dtsConfig : {}),
@@ -150,7 +173,11 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => {
 
   await Promise.all(tasks);
 
-  const dtsFiles = await glob(outDir + '/**/*.d.ts');
+  if (!watch) {
+    await saveMetafiles({ metafilesDir, formats });
+  }
+
+  const dtsFiles = await glob(OUT_DIR + '/**/*.d.ts');
   await Promise.all(
     dtsFiles.map(async (file) => {
       const content = await fs.readFile(file, 'utf-8');
@@ -225,6 +252,37 @@ async function generateDTSMapperFile(file: string) {
   );
 }
 
+async function saveMetafiles({
+  metafilesDir,
+  formats,
+}: {
+  metafilesDir: string;
+  formats: Formats[];
+}) {
+  await fs.ensureDir(metafilesDir);
+  const metafile: Metafile = {
+    inputs: {},
+    outputs: {},
+  };
+
+  await Promise.all(
+    formats.map(async (format) => {
+      const fromFilename = `metafile-${format}.json`;
+      const currentMetafile = await fs.readJson(join(OUT_DIR, fromFilename));
+      metafile.inputs = { ...metafile.inputs, ...currentMetafile.inputs };
+      metafile.outputs = { ...metafile.outputs, ...currentMetafile.outputs };
+
+      await fs.rm(join(OUT_DIR, fromFilename));
+    })
+  );
+
+  await writeFile(join(metafilesDir, 'metafile.json'), JSON.stringify(metafile, null, 2));
+  await writeFile(
+    join(metafilesDir, 'metafile.txt'),
+    await esbuild.analyzeMetafile(metafile, { color: false, verbose: false })
+  );
+}
+
 const hasFlag = (flags: string[], name: string) => !!flags.find((s) => s.startsWith(`--${name}`));
 
 /* SELF EXECUTION */
diff --git a/scripts/prepare/check.ts b/scripts/prepare/check.ts
index dbf09429492b..0462b6094464 100755
--- a/scripts/prepare/check.ts
+++ b/scripts/prepare/check.ts
@@ -1,3 +1,4 @@
+// eslint-disable-next-line depend/ban-dependencies
 import fs from 'fs-extra';
 import { join } from 'path';
 import ts from 'typescript';
diff --git a/scripts/prepare/tools.ts b/scripts/prepare/tools.ts
index 5b81ed2b3f62..23213e25b004 100644
--- a/scripts/prepare/tools.ts
+++ b/scripts/prepare/tools.ts
@@ -3,12 +3,14 @@ import { dirname, join } from 'node:path';
 import * as process from 'node:process';
 
 import { globalExternals } from '@fal-works/esbuild-plugin-global-externals';
-import chalk from 'chalk';
 import { spawn } from 'cross-spawn';
 import * as esbuild from 'esbuild';
-import { readJson } from 'fs-extra';
+// eslint-disable-next-line depend/ban-dependencies
+import { pathExists, readJson } from 'fs-extra';
+// eslint-disable-next-line depend/ban-dependencies
 import { glob } from 'glob';
 import limit from 'p-limit';
+import picocolors from 'picocolors';
 import * as prettier from 'prettier';
 import prettyTime from 'pretty-hrtime';
 import * as rollup from 'rollup';
@@ -103,7 +105,7 @@ export {
   process,
   esbuild,
   prettyTime,
-  chalk,
+  picocolors,
   dedent,
   limit,
   sortPackageJson,
@@ -116,7 +118,10 @@ export const nodeInternals = [
   ...require('module').builtinModules.flatMap((m: string) => [m, `node:${m}`]),
 ];
 
-export const getWorkspace = async () => {
+type PackageJson = typefest.PackageJson &
+  Required<Pick<typefest.PackageJson, 'name' | 'version'>> & { path: string };
+
+export const getWorkspace = async (): Promise<PackageJson[]> => {
   const codePackage = await readJson(join(CODE_DIRECTORY, 'package.json'));
   const {
     workspaces: { packages: patterns },
@@ -129,10 +134,18 @@ export const getWorkspace = async () => {
   return Promise.all(
     workspaces
       .flatMap((p) => p.map((i) => join(CODE_DIRECTORY, i)))
-      .map(async (p) => {
-        const pkg = await readJson(join(p, 'package.json'));
-        return { ...pkg, path: p } as typefest.PackageJson &
-          Required<Pick<typefest.PackageJson, 'name' | 'version'>> & { path: string };
+      .map(async (packagePath) => {
+        const packageJsonPath = join(packagePath, 'package.json');
+        if (!(await pathExists(packageJsonPath))) {
+          // If we delete a package, then an empty folder might still be left behind on some dev machines
+          // In this case, just ignore the folder
+          console.warn(
+            `No package.json found in ${packagePath}. You might want to delete this folder.`
+          );
+          return null;
+        }
+        const pkg = await readJson(packageJsonPath);
+        return { ...pkg, path: packagePath } as PackageJson;
       })
-  );
+  ).then((packages) => packages.filter((p) => p !== null));
 };
diff --git a/scripts/prepare/tsc.ts b/scripts/prepare/tsc.ts
index 6a6aba2643bd..af6b39e15050 100755
--- a/scripts/prepare/tsc.ts
+++ b/scripts/prepare/tsc.ts
@@ -1,4 +1,6 @@
+// eslint-disable-next-line depend/ban-dependencies
 import { emptyDir, move, readJson } from 'fs-extra';
+// eslint-disable-next-line depend/ban-dependencies
 import { globSync } from 'glob';
 import { join } from 'path';
 import * as ts from 'typescript';
diff --git a/scripts/release/__tests__/is-pr-frozen.test.ts b/scripts/release/__tests__/is-pr-frozen.test.ts
index 681069af7256..27baeaa4a723 100644
--- a/scripts/release/__tests__/is-pr-frozen.test.ts
+++ b/scripts/release/__tests__/is-pr-frozen.test.ts
@@ -3,6 +3,7 @@ import { join } from 'node:path';
 
 import { describe, expect, it, vi } from 'vitest';
 
+// eslint-disable-next-line depend/ban-dependencies
 import * as fsExtraImp from 'fs-extra';
 import * as simpleGitImp from 'simple-git';
 
diff --git a/scripts/release/__tests__/version.test.ts b/scripts/release/__tests__/version.test.ts
index 3572e4cb76ee..58dd785c0284 100644
--- a/scripts/release/__tests__/version.test.ts
+++ b/scripts/release/__tests__/version.test.ts
@@ -3,7 +3,9 @@ import { join } from 'node:path';
 
 import { describe, expect, it, vi } from 'vitest';
 
+// eslint-disable-next-line depend/ban-dependencies
 import { execaCommand } from 'execa';
+// eslint-disable-next-line depend/ban-dependencies
 import * as fsExtraImp from 'fs-extra';
 
 import type * as MockedFSToExtra from '../../../code/__mocks__/fs-extra';
diff --git a/scripts/release/__tests__/write-changelog.test.ts b/scripts/release/__tests__/write-changelog.test.ts
index f0346066b26c..59e1ccb6fd60 100644
--- a/scripts/release/__tests__/write-changelog.test.ts
+++ b/scripts/release/__tests__/write-changelog.test.ts
@@ -3,6 +3,7 @@ import { join } from 'node:path';
 
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
+// eslint-disable-next-line depend/ban-dependencies
 import * as fsExtraImp from 'fs-extra';
 import { dedent } from 'ts-dedent';
 
diff --git a/scripts/release/cancel-preparation-runs.ts b/scripts/release/cancel-preparation-runs.ts
index aa5916de8208..b3d922dbef5a 100644
--- a/scripts/release/cancel-preparation-runs.ts
+++ b/scripts/release/cancel-preparation-runs.ts
@@ -2,8 +2,8 @@
  * This script cancels all running preparation workflows in GitHub. It will fetch all active runs
  * for the preparation workflows, and cancel them.
  */
-import chalk from 'chalk';
 import { program } from 'commander';
+import picocolors from 'picocolors';
 import { dedent } from 'ts-dedent';
 
 import { esMain } from '../utils/esmain';
@@ -35,12 +35,12 @@ export const run = async () => {
   )?.id;
 
   console.log(`Found workflow IDs for the preparation workflows:
-    ${chalk.blue(PREPARE_PATCH_WORKFLOW_PATH)}: ${chalk.green(preparePatchWorkflowId)}
-    ${chalk.blue(PREPARE_NON_PATCH_WORKFLOW_PATH)}: ${chalk.green(prepareNonPatchWorkflowId)}`);
+    ${picocolors.blue(PREPARE_PATCH_WORKFLOW_PATH)}: ${picocolors.green(preparePatchWorkflowId)}
+    ${picocolors.blue(PREPARE_NON_PATCH_WORKFLOW_PATH)}: ${picocolors.green(prepareNonPatchWorkflowId)}`);
 
   if (!preparePatchWorkflowId || !prepareNonPatchWorkflowId) {
     throw new Error(dedent`🚨 Could not find workflow IDs for the preparation workflows
-    - Looked for paths: "${chalk.blue(PREPARE_PATCH_WORKFLOW_PATH)}" and "${chalk.blue(
+    - Looked for paths: "${picocolors.blue(PREPARE_PATCH_WORKFLOW_PATH)}" and "${picocolors.blue(
       PREPARE_NON_PATCH_WORKFLOW_PATH
     )}", are they still correct?
     - Found workflows:
@@ -75,7 +75,10 @@ export const run = async () => {
 
   console.log(`🔍 Found ${runsToCancel.length} runs to cancel. Cancelling them now:
     ${runsToCancel
-      .map((r) => `${chalk.green(r.path)} - ${chalk.green(r.id)}: ${chalk.blue(r.status)}`)
+      .map(
+        (r) =>
+          `${picocolors.green(r.path)} - ${picocolors.green(r.id)}: ${picocolors.blue(r.status)}`
+      )
       .join('\n    ')}`);
 
   const result = await Promise.allSettled(
diff --git a/scripts/release/generate-pr-description.ts b/scripts/release/generate-pr-description.ts
index f1a79da2d6db..0d569e20e01b 100644
--- a/scripts/release/generate-pr-description.ts
+++ b/scripts/release/generate-pr-description.ts
@@ -1,6 +1,6 @@
 import { setOutput } from '@actions/core';
-import chalk from 'chalk';
 import { program } from 'commander';
+import picocolors from 'picocolors';
 import semver from 'semver';
 import { dedent } from 'ts-dedent';
 import { z } from 'zod';
@@ -246,9 +246,9 @@ export const run = async (rawOptions: unknown) => {
   const currentVersion = options.currentVersion || (await getCurrentVersion());
 
   console.log(
-    `💬 Generating PR description for ${chalk.blue(nextVersion)} between ${chalk.green(
+    `💬 Generating PR description for ${picocolors.blue(nextVersion)} between ${picocolors.green(
       currentVersion
-    )} and ${chalk.green('HEAD')}`
+    )} and ${picocolors.green('HEAD')}`
   );
 
   const { changes, changelogText } = await getChanges({
@@ -289,7 +289,7 @@ export const run = async (rawOptions: unknown) => {
   if (process.env.GITHUB_ACTIONS === 'true') {
     setOutput('description', description);
   }
-  console.log(`✅ Generated PR description for ${chalk.blue(nextVersion)}`);
+  console.log(`✅ Generated PR description for ${picocolors.blue(nextVersion)}`);
   if (verbose) {
     console.log(description);
   }
diff --git a/scripts/release/get-changelog-from-file.ts b/scripts/release/get-changelog-from-file.ts
index f428310cc656..de8bc4e386e9 100644
--- a/scripts/release/get-changelog-from-file.ts
+++ b/scripts/release/get-changelog-from-file.ts
@@ -1,9 +1,10 @@
 import { join } from 'node:path';
 
 import { setOutput } from '@actions/core';
-import chalk from 'chalk';
 import { program } from 'commander';
+// eslint-disable-next-line depend/ban-dependencies
 import { readFile } from 'fs-extra';
+import picocolors from 'picocolors';
 import semver from 'semver';
 import { dedent } from 'ts-dedent';
 
@@ -29,13 +30,13 @@ export const getChangelogFromFile = async (args: {
   const changelogFilename = isPrerelease ? 'CHANGELOG.prerelease.md' : 'CHANGELOG.md';
   const changelogPath = join(__dirname, '..', '..', changelogFilename);
 
-  console.log(`📝 Getting changelog from ${chalk.blue(changelogPath)}`);
+  console.log(`📝 Getting changelog from ${picocolors.blue(changelogPath)}`);
 
   const fullChangelog = await readFile(changelogPath, 'utf-8');
   const changelogForVersion = fullChangelog.split(/(^|\n)## /).find((v) => v.startsWith(version));
   if (!changelogForVersion) {
     throw new Error(
-      `Could not find changelog entry for version ${chalk.blue(version)} in ${chalk.green(
+      `Could not find changelog entry for version ${picocolors.blue(version)} in ${picocolors.green(
         changelogPath
       )}`
     );
diff --git a/scripts/release/get-current-version.ts b/scripts/release/get-current-version.ts
index f640ccb5907e..b0133cf03f7f 100644
--- a/scripts/release/get-current-version.ts
+++ b/scripts/release/get-current-version.ts
@@ -1,8 +1,9 @@
 import { join } from 'node:path';
 
 import { setOutput } from '@actions/core';
-import chalk from 'chalk';
+// eslint-disable-next-line depend/ban-dependencies
 import { readJson } from 'fs-extra';
+import picocolors from 'picocolors';
 
 import { esMain } from '../utils/esmain';
 
@@ -15,7 +16,7 @@ export const getCurrentVersion = async () => {
   if (process.env.GITHUB_ACTIONS === 'true') {
     setOutput('current-version', version);
   }
-  console.log(`📦 Current version is ${chalk.green(version)}`);
+  console.log(`📦 Current version is ${picocolors.green(version)}`);
   return version;
 };
 
diff --git a/scripts/release/get-version-changelog.ts b/scripts/release/get-version-changelog.ts
index 6e1af6a7b5b7..e85ac5257643 100644
--- a/scripts/release/get-version-changelog.ts
+++ b/scripts/release/get-version-changelog.ts
@@ -1,6 +1,6 @@
 import { setOutput } from '@actions/core';
-import chalk from 'chalk';
 import { program } from 'commander';
+import picocolors from 'picocolors';
 
 import { esMain } from '../utils/esmain';
 import { getCurrentVersion } from './get-current-version';
@@ -17,7 +17,7 @@ program
 export const getVersionChangelog = async (args: { version?: string; verbose?: boolean }) => {
   const version = args.version || (await getCurrentVersion());
 
-  console.log(`📝 Getting changelog for version ${chalk.blue(version)}`);
+  console.log(`📝 Getting changelog for version ${picocolors.blue(version)}`);
 
   const { changelogText } = await getChanges({ from: version, version, verbose: args.verbose });
 
diff --git a/scripts/release/is-pr-frozen.ts b/scripts/release/is-pr-frozen.ts
index af5a957af8ae..e198e89d8202 100644
--- a/scripts/release/is-pr-frozen.ts
+++ b/scripts/release/is-pr-frozen.ts
@@ -1,9 +1,10 @@
 import { join } from 'node:path';
 
 import { setOutput } from '@actions/core';
-import chalk from 'chalk';
 import { program } from 'commander';
+// eslint-disable-next-line depend/ban-dependencies
 import { readJson } from 'fs-extra';
+import picocolors from 'picocolors';
 
 import { esMain } from '../utils/esmain';
 import { getPullInfoFromCommit } from './utils/get-github-info';
@@ -39,7 +40,7 @@ const getRepo = async (verbose?: boolean): Promise<string> => {
   const pushUrl = originRemote.refs.push;
   const repo = pushUrl.replace(/\.git$/, '').replace(/.*:(\/\/github\.com\/)*/, '');
   if (verbose) {
-    console.log(`📦 Extracted repo: ${chalk.blue(repo)}`);
+    console.log(`📦 Extracted repo: ${picocolors.blue(repo)}`);
   }
   return repo;
 };
@@ -50,7 +51,7 @@ export const run = async (options: unknown) => {
   const version = await getCurrentVersion();
   const branch = `version-${patch ? 'patch' : 'non-patch'}-from-${version}`;
 
-  console.log(`💬 Determining if pull request from branch '${chalk.blue(branch)}' is frozen`);
+  console.log(`💬 Determining if pull request from branch '${picocolors.blue(branch)}' is frozen`);
 
   console.log(`⬇️ Fetching remote 'origin/${branch}'...`);
   try {
diff --git a/scripts/release/is-prerelease.ts b/scripts/release/is-prerelease.ts
index d92f17279b82..65b2ddf0ddc7 100644
--- a/scripts/release/is-prerelease.ts
+++ b/scripts/release/is-prerelease.ts
@@ -1,6 +1,6 @@
 import { setOutput } from '@actions/core';
-import chalk from 'chalk';
 import { program } from 'commander';
+import picocolors from 'picocolors';
 import semver from 'semver';
 
 import { esMain } from '../utils/esmain';
@@ -17,10 +17,10 @@ program
 export const isPrerelease = async (args: { version?: string; verbose?: boolean }) => {
   if (args.verbose) {
     if (args.version) {
-      console.log(`📦 Checking if version ${chalk.blue(args.version)} is a prerelease`);
+      console.log(`📦 Checking if version ${picocolors.blue(args.version)} is a prerelease`);
     } else {
       console.log(
-        `📦 Checking if current version in ${chalk.blue('code/package.json')} is a prerelease`
+        `📦 Checking if current version in ${picocolors.blue('code/package.json')} is a prerelease`
       );
     }
   }
@@ -31,8 +31,8 @@ export const isPrerelease = async (args: { version?: string; verbose?: boolean }
     setOutput('prerelease', result);
   }
   console.log(
-    `📦 Version ${chalk.blue(version)} ${
-      result ? chalk.green('IS') : chalk.red('IS NOT')
+    `📦 Version ${picocolors.blue(version)} ${
+      result ? picocolors.green('IS') : picocolors.red('IS NOT')
     } a prerelease`
   );
 
diff --git a/scripts/release/is-version-published.ts b/scripts/release/is-version-published.ts
index 6af757eb654c..a6a6891b2124 100644
--- a/scripts/release/is-version-published.ts
+++ b/scripts/release/is-version-published.ts
@@ -1,6 +1,6 @@
 import { setOutput } from '@actions/core';
-import chalk from 'chalk';
 import { program } from 'commander';
+import picocolors from 'picocolors';
 
 import { esMain } from '../utils/esmain';
 import { getCurrentVersion } from './get-current-version';
@@ -19,12 +19,14 @@ const isVersionPublished = async ({
   version: string;
   verbose?: boolean;
 }) => {
-  const prettyPackage = `${chalk.blue(packageName)}@${chalk.green(version)}`;
+  const prettyPackage = `${picocolors.blue(packageName)}@${picocolors.green(version)}`;
   console.log(`⛅ Checking if ${prettyPackage} is published...`);
 
   if (verbose) {
     console.log(`Fetching from npm:`);
-    console.log(`https://registry.npmjs.org/${chalk.blue(packageName)}/${chalk.green(version)}`);
+    console.log(
+      `https://registry.npmjs.org/${picocolors.blue(packageName)}/${picocolors.green(version)}`
+    );
   }
   const response = await fetch(`https://registry.npmjs.org/${packageName}/${version}`);
   if (response.status === 404) {
diff --git a/scripts/release/label-patches.ts b/scripts/release/label-patches.ts
index c1d8fa945e11..0ddbd60af981 100644
--- a/scripts/release/label-patches.ts
+++ b/scripts/release/label-patches.ts
@@ -1,4 +1,5 @@
 import { program } from 'commander';
+// eslint-disable-next-line depend/ban-dependencies
 import ora from 'ora';
 import { v4 as uuidv4 } from 'uuid';
 
diff --git a/scripts/release/pick-patches.ts b/scripts/release/pick-patches.ts
index 824f8c6d0cd9..54dc6a21b2bb 100644
--- a/scripts/release/pick-patches.ts
+++ b/scripts/release/pick-patches.ts
@@ -1,7 +1,8 @@
 import { setOutput } from '@actions/core';
-import chalk from 'chalk';
 import { program } from 'commander';
+// eslint-disable-next-line depend/ban-dependencies
 import ora from 'ora';
+import picocolors from 'picocolors';
 import invariant from 'tiny-invariant';
 
 import { esMain } from '../utils/esmain';
@@ -25,7 +26,7 @@ interface PR {
 }
 
 function formatPR(pr: PR): string {
-  return `https://github.com/${OWNER}/${REPO}/pull/${pr.number} "${pr.title}" ${chalk.yellow(
+  return `https://github.com/${OWNER}/${REPO}/pull/${pr.number} "${pr.title}" ${picocolors.yellow(
     pr.mergeCommit
   )}`;
 }
@@ -71,7 +72,7 @@ export const run = async (_: unknown) => {
       }
       failedCherryPicks.push(pr.mergeCommit);
       prSpinner.info(
-        `This PR can be picked manually with: ${chalk.grey(
+        `This PR can be picked manually with: ${picocolors.gray(
           `git cherry-pick -m1 -x ${pr.mergeCommit}`
         )}`
       );
diff --git a/scripts/release/publish.ts b/scripts/release/publish.ts
index 65347010181d..f2054d93398e 100644
--- a/scripts/release/publish.ts
+++ b/scripts/release/publish.ts
@@ -1,10 +1,12 @@
 import { join } from 'node:path';
 
-import chalk from 'chalk';
 import { program } from 'commander';
+// eslint-disable-next-line depend/ban-dependencies
 import { execaCommand } from 'execa';
+// eslint-disable-next-line depend/ban-dependencies
 import { readJson } from 'fs-extra';
 import pRetry from 'p-retry';
+import picocolors from 'picocolors';
 import semver from 'semver';
 import dedent from 'ts-dedent';
 import { z } from 'zod';
@@ -51,7 +53,7 @@ const getCurrentVersion = async (verbose?: boolean) => {
     console.log(`📐 Reading current version of Storybook...`);
   }
   const { version } = await readJson(CODE_PACKAGE_JSON_PATH);
-  console.log(`📐 Current version of Storybook is ${chalk.green(version)}`);
+  console.log(`📐 Current version of Storybook is ${picocolors.green(version)}`);
   return version;
 };
 
@@ -64,13 +66,13 @@ const isCurrentVersionPublished = async ({
   currentVersion: string;
   verbose?: boolean;
 }) => {
-  const prettyPackage = `${chalk.blue(packageName)}@${chalk.green(currentVersion)}`;
+  const prettyPackage = `${picocolors.blue(packageName)}@${picocolors.green(currentVersion)}`;
   console.log(`⛅ Checking if ${prettyPackage} is published...`);
 
   if (verbose) {
     console.log(`Fetching from npm:`);
     console.log(
-      `https://registry.npmjs.org/${chalk.blue(packageName)}/${chalk.green(currentVersion)}`
+      `https://registry.npmjs.org/${picocolors.blue(packageName)}/${picocolors.green(currentVersion)}`
     );
   }
   const response = await fetch(`https://registry.npmjs.org/${packageName}/${currentVersion}`);
@@ -133,7 +135,7 @@ const publishAllPackages = async ({
   }
   if (dryRun) {
     console.log(`📦 Dry run, skipping publish. Would have executed:
-    ${chalk.blue(command)}`);
+    ${picocolors.blue(command)}`);
     return;
   }
 
@@ -155,7 +157,7 @@ const publishAllPackages = async ({
       retries: 4,
       onFailedAttempt: (error) =>
         console.log(
-          chalk.yellow(
+          picocolors.yellow(
             dedent`❗One or more packages failed to publish, retrying...
             This was attempt number ${error.attemptNumber}, there are ${error.retriesLeft} retries left. 🤞`
           )
@@ -180,15 +182,15 @@ export const run = async (options: unknown) => {
   });
   if (isAlreadyPublished) {
     throw new Error(
-      `⛔ Current version (${chalk.green(currentVersion)}) is already published, aborting.`
+      `⛔ Current version (${picocolors.green(currentVersion)}) is already published, aborting.`
     );
   }
   await buildAllPackages();
   await publishAllPackages({ tag, verbose, dryRun });
 
   console.log(
-    `✅ Published all packages with version ${chalk.green(currentVersion)}${
-      tag ? ` at tag ${chalk.blue(tag)}` : ''
+    `✅ Published all packages with version ${picocolors.green(currentVersion)}${
+      tag ? ` at tag ${picocolors.blue(tag)}` : ''
     }`
   );
 };
diff --git a/scripts/release/unreleased-changes-exists.ts b/scripts/release/unreleased-changes-exists.ts
index 49c50ccd7d42..ad869461107b 100644
--- a/scripts/release/unreleased-changes-exists.ts
+++ b/scripts/release/unreleased-changes-exists.ts
@@ -1,7 +1,7 @@
 import { setOutput } from '@actions/core';
-import chalk from 'chalk';
 import { program } from 'commander';
-import { intersection } from 'lodash';
+import { intersection } from 'es-toolkit';
+import picocolors from 'picocolors';
 import { z } from 'zod';
 
 import { esMain } from '../utils/esmain';
@@ -68,11 +68,11 @@ export const run = async (
   }
   if (hasChangesToRelease) {
     console.log(
-      `${chalk.green('🦋 The following changes are releasable')}:
-${chalk.blue(changesToRelease.map(({ title, pull }) => `  #${pull}: ${title}`).join('\n'))}`
+      `${picocolors.green('🦋 The following changes are releasable')}:
+${picocolors.blue(changesToRelease.map(({ title, pull }) => `  #${pull}: ${title}`).join('\n'))}`
     );
   } else {
-    console.log(chalk.red('🫙 No changes to release!'));
+    console.log(picocolors.red('🫙 No changes to release!'));
   }
 
   return { changesToRelease, hasChangesToRelease };
diff --git a/scripts/release/utils/get-changes.ts b/scripts/release/utils/get-changes.ts
index 5588a10eba52..f7f255ddd451 100644
--- a/scripts/release/utils/get-changes.ts
+++ b/scripts/release/utils/get-changes.ts
@@ -1,4 +1,4 @@
-import chalk from 'chalk';
+import picocolors from 'picocolors';
 import semver from 'semver';
 
 import type { PullRequestInfo } from './get-github-info';
@@ -27,13 +27,15 @@ export const LABELS_BY_IMPORTANCE = {
 
 const getCommitAt = async (id: string, verbose?: boolean) => {
   if (!semver.valid(id)) {
-    console.log(`🔍 ${chalk.red(id)} is not a valid semver string, assuming it is a commit hash`);
+    console.log(
+      `🔍 ${picocolors.red(id)} is not a valid semver string, assuming it is a commit hash`
+    );
     return id;
   }
   const version = id.startsWith('v') ? id : `v${id}`;
   const commitSha = (await git.raw(['rev-list', '-n', '1', version])).split('\n')[0];
   if (verbose) {
-    console.log(`🔍 Commit at tag ${chalk.green(version)}: ${chalk.blue(commitSha)}`);
+    console.log(`🔍 Commit at tag ${picocolors.green(version)}: ${picocolors.blue(commitSha)}`);
   }
   return commitSha;
 };
@@ -50,12 +52,12 @@ export const getFromCommit = async (from?: string | undefined, verbose?: boolean
     }
     actualFrom = latest;
     if (verbose) {
-      console.log(`🔍 No 'from' specified, found latest tag: ${chalk.blue(latest)}`);
+      console.log(`🔍 No 'from' specified, found latest tag: ${picocolors.blue(latest)}`);
     }
   }
   const commit = await getCommitAt(actualFrom!, verbose);
   if (verbose) {
-    console.log(`🔍 Found 'from' commit: ${chalk.blue(commit)}`);
+    console.log(`🔍 Found 'from' commit: ${picocolors.blue(commit)}`);
   }
   return commit;
 };
@@ -64,14 +66,14 @@ export const getToCommit = async (to?: string | undefined, verbose?: boolean) =>
   if (!to) {
     const head = await git.revparse('HEAD');
     if (verbose) {
-      console.log(`🔍 No 'to' specified, HEAD is at commit: ${chalk.blue(head)}`);
+      console.log(`🔍 No 'to' specified, HEAD is at commit: ${picocolors.blue(head)}`);
     }
     return head;
   }
 
   const commit = await getCommitAt(to, verbose);
   if (verbose) {
-    console.log(`🔍 Found 'to' commit: ${chalk.blue(commit)}`);
+    console.log(`🔍 Found 'to' commit: ${picocolors.blue(commit)}`);
   }
   return commit;
 };
@@ -88,9 +90,9 @@ export const getAllCommitsBetween = async ({
   const logResult = await git.log({ from, to, '--first-parent': null });
   if (verbose) {
     console.log(
-      `🔍 Found ${chalk.blue(logResult.total)} commits between ${chalk.green(
+      `🔍 Found ${picocolors.blue(logResult.total)} commits between ${picocolors.green(
         `${from}`
-      )} and ${chalk.green(`${to}`)}:`
+      )} and ${picocolors.green(`${to}`)}:`
     );
     console.dir(logResult.all, { depth: null, colors: true });
   }
@@ -110,7 +112,7 @@ export const getRepo = async (verbose?: boolean): Promise<string> => {
   const pushUrl = originRemote.refs.push;
   const repo = pushUrl.replace(/\.git$/, '').replace(/.*:(\/\/github\.com\/)*/, '');
   if (verbose) {
-    console.log(`📦 Extracted repo: ${chalk.blue(repo)}`);
+    console.log(`📦 Extracted repo: ${picocolors.blue(repo)}`);
   }
   return repo;
 };
@@ -234,7 +236,7 @@ export const getChanges = async ({
   unpickedPatches?: boolean;
   verbose?: boolean;
 }) => {
-  console.log(`💬 Getting changes for ${chalk.blue(version)}`);
+  console.log(`💬 Getting changes for ${picocolors.blue(version)}`);
 
   let commits;
   if (unpickedPatches) {
diff --git a/scripts/release/version.ts b/scripts/release/version.ts
index 422de3501bc0..7d18b99aeca5 100644
--- a/scripts/release/version.ts
+++ b/scripts/release/version.ts
@@ -1,10 +1,12 @@
 import { join } from 'node:path';
 
 import { setOutput } from '@actions/core';
-import chalk from 'chalk';
 import { program } from 'commander';
+// eslint-disable-next-line depend/ban-dependencies
 import { execaCommand } from 'execa';
+// eslint-disable-next-line depend/ban-dependencies
 import { readFile, readJson, writeFile, writeJson } from 'fs-extra';
+import picocolors from 'picocolors';
 import semver from 'semver';
 import { z } from 'zod';
 
@@ -116,14 +118,14 @@ const getCurrentVersion = async () => {
 };
 
 const bumpCodeVersion = async (nextVersion: string) => {
-  console.log(`🤜 Bumping version of ${chalk.cyan('code')}'s package.json...`);
+  console.log(`🤜 Bumping version of ${picocolors.cyan('code')}'s package.json...`);
 
   const codePkgJson = await readJson(CODE_PACKAGE_JSON_PATH);
 
   codePkgJson.version = nextVersion;
   await writeJson(CODE_PACKAGE_JSON_PATH, codePkgJson, { spaces: 2 });
 
-  console.log(`✅ Bumped version of ${chalk.cyan('code')}'s package.json`);
+  console.log(`✅ Bumped version of ${picocolors.cyan('code')}'s package.json`);
 };
 
 const bumpVersionSources = async (currentVersion: string, nextVersion: string) => {
@@ -131,7 +133,7 @@ const bumpVersionSources = async (currentVersion: string, nextVersion: string) =
     join(CODE_DIR_PATH, 'core', 'src', 'manager-api', 'version.ts'),
     join(CODE_DIR_PATH, 'core', 'src', 'common', 'versions.ts'),
   ];
-  console.log(`🤜 Bumping versions in...:\n  ${chalk.cyan(filesToUpdate.join('\n  '))}`);
+  console.log(`🤜 Bumping versions in...:\n  ${picocolors.cyan(filesToUpdate.join('\n  '))}`);
 
   await Promise.all(
     filesToUpdate.map(async (filename) => {
@@ -141,7 +143,7 @@ const bumpVersionSources = async (currentVersion: string, nextVersion: string) =
     })
   );
 
-  console.log(`✅ Bumped versions in:\n  ${chalk.cyan(filesToUpdate.join('\n  '))}`);
+  console.log(`✅ Bumped versions in:\n  ${picocolors.cyan(filesToUpdate.join('\n  '))}`);
 };
 
 const bumpAllPackageJsons = async ({
@@ -154,7 +156,7 @@ const bumpAllPackageJsons = async ({
   verbose?: boolean;
 }) => {
   console.log(
-    `🤜 Bumping versions and dependencies in ${chalk.cyan(
+    `🤜 Bumping versions and dependencies in ${picocolors.cyan(
       `all ${packages.length} package.json`
     )}'s...`
   );
@@ -171,7 +173,7 @@ const bumpAllPackageJsons = async ({
       packageJson.version = nextVersion;
       if (verbose) {
         console.log(
-          `    Bumping ${chalk.blue(pkg.name)}'s version to ${chalk.yellow(nextVersion)}`
+          `    Bumping ${picocolors.blue(pkg.name)}'s version to ${picocolors.yellow(nextVersion)}`
         );
       }
       await writeJson(packageJsonPath, packageJson, { spaces: 2 });
@@ -181,15 +183,15 @@ const bumpAllPackageJsons = async ({
 
 const bumpDeferred = async (nextVersion: string) => {
   console.log(
-    `⏳ Setting a ${chalk.cyan('deferred')} version bump with ${chalk.blue(
+    `⏳ Setting a ${picocolors.cyan('deferred')} version bump with ${picocolors.blue(
       'code/package.json#deferredNextVersion'
-    )} = ${chalk.yellow(nextVersion)}...`
+    )} = ${picocolors.yellow(nextVersion)}...`
   );
   const codePkgJson = await readJson(CODE_PACKAGE_JSON_PATH);
 
   if (codePkgJson.deferredNextVersion) {
     console.warn(
-      `❗ A "deferredNextVersion" property already exists with the value of ${chalk.cyan(
+      `❗ A "deferredNextVersion" property already exists with the value of ${picocolors.cyan(
         codePkgJson.deferredNextVersion
       )}. This will be overwritten and ignored.`
     );
@@ -198,12 +200,12 @@ const bumpDeferred = async (nextVersion: string) => {
   codePkgJson.deferredNextVersion = nextVersion;
   await writeJson(CODE_PACKAGE_JSON_PATH, codePkgJson, { spaces: 2 });
 
-  console.log(`✅ Set a ${chalk.cyan('deferred')} version bump. Not bumping any packages.`);
+  console.log(`✅ Set a ${picocolors.cyan('deferred')} version bump. Not bumping any packages.`);
 };
 
 const applyDeferredVersionBump = async () => {
   console.log(
-    `⏩ Applying previously deferred version bump set at ${chalk.blue(
+    `⏩ Applying previously deferred version bump set at ${picocolors.blue(
       'code/package.json#deferredNextVersion'
     )}...`
   );
@@ -221,9 +223,9 @@ const applyDeferredVersionBump = async () => {
   await writeJson(CODE_PACKAGE_JSON_PATH, codePkgJson, { spaces: 2 });
 
   console.log(
-    `✅ Extracted and removed deferred version ${chalk.green(
+    `✅ Extracted and removed deferred version ${picocolors.green(
       deferredNextVersion
-    )} from ${chalk.blue('code/package.json#deferredNextVersion')}`
+    )} from ${picocolors.blue('code/package.json#deferredNextVersion')}`
   );
 
   return deferredNextVersion;
@@ -240,11 +242,11 @@ export const run = async (options: unknown) => {
   const [packages, currentVersion] = await Promise.all([getWorkspaces(), getCurrentVersion()]);
 
   console.log(
-    `📦 found ${packages.length} storybook packages at version ${chalk.red(currentVersion)}`
+    `📦 found ${packages.length} storybook packages at version ${picocolors.red(currentVersion)}`
   );
   if (verbose) {
     const formattedPackages = packages.map(
-      (pkg) => `${chalk.green(pkg.name.padEnd(60))}: ${chalk.cyan(pkg.location)}`
+      (pkg) => `${picocolors.green(pkg.name.padEnd(60))}: ${picocolors.cyan(pkg.location)}`
     );
     console.log(`📦 Packages:
         ${formattedPackages.join('\n    ')}`);
@@ -255,42 +257,46 @@ export const run = async (options: unknown) => {
   if ('apply' in options && options.apply) {
     nextVersion = await applyDeferredVersionBump();
   } else if ('exact' in options && options.exact) {
-    console.log(`📈 Exact version selected: ${chalk.green(options.exact)}`);
+    console.log(`📈 Exact version selected: ${picocolors.green(options.exact)}`);
     nextVersion = options.exact;
   } else {
     const { releaseType, preId } = options as BumpOptions;
-    console.log(`📈 Release type selected: ${chalk.green(releaseType)}`);
+    console.log(`📈 Release type selected: ${picocolors.green(releaseType)}`);
     if (preId) {
-      console.log(`🆔 Version prerelease identifier selected: ${chalk.yellow(preId)}`);
+      console.log(`🆔 Version prerelease identifier selected: ${picocolors.yellow(preId)}`);
     }
 
     nextVersion = semver.inc(currentVersion, releaseType, preId);
 
     console.log(
-      `⏭ Bumping version ${chalk.blue(currentVersion)} with release type ${chalk.green(
+      `⏭ Bumping version ${picocolors.blue(currentVersion)} with release type ${picocolors.green(
         releaseType
       )}${
-        preId ? ` and ${chalk.yellow(preId)}` : ''
-      } results in version: ${chalk.bgGreenBright.bold(nextVersion)}`
+        preId ? ` and ${picocolors.yellow(preId)}` : ''
+      } results in version: ${picocolors.bold(picocolors.greenBright(nextVersion))}`
     );
   }
 
   if ('deferred' in options && options.deferred) {
     await bumpDeferred(nextVersion);
   } else {
-    console.log(`⏭ Bumping all packages to ${chalk.blue(nextVersion)}...`);
+    console.log(`⏭ Bumping all packages to ${picocolors.blue(nextVersion)}...`);
 
     await bumpCodeVersion(nextVersion);
     await bumpVersionSources(currentVersion, nextVersion);
     await bumpAllPackageJsons({ packages, nextVersion, verbose });
 
-    console.log(`⬆️ Updating lock file with ${chalk.blue('yarn install --mode=update-lockfile')}`);
+    console.log(
+      `⬆️ Updating lock file with ${picocolors.blue('yarn install --mode=update-lockfile')}`
+    );
     await execaCommand(`yarn install --mode=update-lockfile`, {
       cwd: join(CODE_DIR_PATH),
       stdio: verbose ? 'inherit' : undefined,
       cleanup: true,
     });
-    console.log(`✅ Updated lock file with ${chalk.blue('yarn install --mode=update-lockfile')}`);
+    console.log(
+      `✅ Updated lock file with ${picocolors.blue('yarn install --mode=update-lockfile')}`
+    );
   }
 
   if (process.env.GITHUB_ACTIONS === 'true') {
diff --git a/scripts/release/write-changelog.ts b/scripts/release/write-changelog.ts
index 8f927b3c6434..9e8b1e342cb2 100644
--- a/scripts/release/write-changelog.ts
+++ b/scripts/release/write-changelog.ts
@@ -1,8 +1,9 @@
 import { join } from 'node:path';
 
-import chalk from 'chalk';
 import { program } from 'commander';
+// eslint-disable-next-line depend/ban-dependencies
 import { readFile, writeFile, writeJson } from 'fs-extra';
+import picocolors from 'picocolors';
 import semver from 'semver';
 import { z } from 'zod';
 
@@ -47,7 +48,7 @@ const validateOptions = (args: unknown[], options: { [key: string]: any }): opti
   optionsSchema.parse(options);
   if (args.length !== 1 || !semver.valid(args[0] as string)) {
     console.error(
-      `🚨 Invalid arguments, expected a single argument with the version to generate changelog for, eg. ${chalk.green(
+      `🚨 Invalid arguments, expected a single argument with the version to generate changelog for, eg. ${picocolors.green(
         '7.1.0-beta.8'
       )}`
     );
@@ -70,7 +71,7 @@ const writeToChangelogFile = async ({
   const changelogPath = join(__dirname, '..', '..', changelogFilename);
 
   if (verbose) {
-    console.log(`📝 Writing changelog to ${chalk.blue(changelogPath)}`);
+    console.log(`📝 Writing changelog to ${picocolors.blue(changelogPath)}`);
   }
 
   const currentChangelog = await readFile(changelogPath, 'utf-8');
@@ -93,7 +94,7 @@ const writeToDocsVersionFile = async ({
   const filepath = join(__dirname, '..', '..', 'docs', 'versions', filename);
 
   if (verbose) {
-    console.log(`📝 Writing changelog to ${chalk.blue(filepath)}`);
+    console.log(`📝 Writing changelog to ${picocolors.blue(filepath)}`);
   }
 
   const textWithoutHeading = changelogText.split('\n').slice(2).join('\n').replaceAll('"', '\\"');
@@ -116,9 +117,9 @@ export const run = async (args: unknown[], options: unknown) => {
   const version = args[0] as string;
 
   console.log(
-    `💬 Generating changelog for ${chalk.blue(version)} between ${chalk.green(
+    `💬 Generating changelog for ${picocolors.blue(version)} between ${picocolors.green(
       from || 'latest'
-    )} and ${chalk.green(to || 'HEAD')}`
+    )} and ${picocolors.green(to || 'HEAD')}`
   );
 
   const { changelogText } = await getChanges({ version, from, to, unpickedPatches, verbose });
diff --git a/scripts/reset.js b/scripts/reset.js
index ed93cbce800b..d9049633d2bc 100644
--- a/scripts/reset.js
+++ b/scripts/reset.js
@@ -1,6 +1,7 @@
 import { spawn } from 'node:child_process';
 import { appendFile, writeFileSync } from 'node:fs';
 
+// eslint-disable-next-line depend/ban-dependencies
 import { remove } from 'fs-extra';
 import trash from 'trash';
 
diff --git a/scripts/run-registry.ts b/scripts/run-registry.ts
index 4f837b952794..82d6513f40a2 100755
--- a/scripts/run-registry.ts
+++ b/scripts/run-registry.ts
@@ -1,14 +1,16 @@
 import { exec } from 'node:child_process';
-import { mkdir } from 'node:fs/promises';
+import { mkdir, rm } from 'node:fs/promises';
 import http from 'node:http';
 import type { Server } from 'node:http';
 import { join, resolve as resolvePath } from 'node:path';
 
-import chalk from 'chalk';
 import { program } from 'commander';
-import { execa, execaSync } from 'execa';
+// eslint-disable-next-line depend/ban-dependencies
+import { execa } from 'execa';
+// eslint-disable-next-line depend/ban-dependencies
 import { pathExists, readJSON, remove } from 'fs-extra';
 import pLimit from 'p-limit';
+import picocolors from 'picocolors';
 import { parseConfigFile, runServer } from 'verdaccio';
 
 import { maxConcurrentTasks } from './utils/concurrency';
@@ -197,13 +199,15 @@ const run = async () => {
     }
   );
 
-  logger.log(`📦 found ${packages.length} storybook packages at version ${chalk.blue(version)}`);
+  logger.log(
+    `📦 found ${packages.length} storybook packages at version ${picocolors.blue(version)}`
+  );
 
   if (opts.publish) {
     await publish(packages, 'http://localhost:6002');
   }
 
-  await execa('npx', ['rimraf', '.npmrc'], { cwd: root });
+  await rm(join(root, '.npmrc'), { force: true });
 
   if (!opts.open) {
     verdaccioServer.close();
@@ -213,6 +217,7 @@ const run = async () => {
 
 run().catch((e) => {
   logger.error(e);
-  execaSync('npx', ['rimraf', '.npmrc'], { cwd: root });
-  process.exit(1);
+  rm(join(root, '.npmrc'), { force: true }).then(() => {
+    process.exit(1);
+  });
 });
diff --git a/scripts/sandbox/generate.ts b/scripts/sandbox/generate.ts
index d92696383699..2f00de2a3090 100755
--- a/scripts/sandbox/generate.ts
+++ b/scripts/sandbox/generate.ts
@@ -1,8 +1,11 @@
 import * as ghActions from '@actions/core';
 import { program } from 'commander';
+// eslint-disable-next-line depend/ban-dependencies
 import type { Options as ExecaOptions } from 'execa';
+// eslint-disable-next-line depend/ban-dependencies
 import { execaCommand } from 'execa';
-import { copy, emptyDir, ensureDir, move, remove, rename, writeFile } from 'fs-extra';
+// eslint-disable-next-line depend/ban-dependencies
+import { copy, emptyDir, ensureDir, move, remove, writeFile } from 'fs-extra';
 import pLimit from 'p-limit';
 import { join, relative } from 'path';
 import prettyTime from 'pretty-hrtime';
@@ -39,7 +42,7 @@ const sbInit = async (
   debug?: boolean
 ) => {
   const sbCliBinaryPath = join(__dirname, `../../code/lib/create-storybook/bin/index.cjs`);
-  console.log(`🎁 Installing storybook`);
+  console.log(`🎁 Installing Storybook`);
   const env = { STORYBOOK_DISABLE_TELEMETRY: 'true', ...envVars };
   const fullFlags = ['--yes', ...(flags || [])];
   await runCommand(`${sbCliBinaryPath} ${fullFlags.join(' ')}`, { cwd, env }, debug);
@@ -126,7 +129,8 @@ const addStorybook = async ({
     throw e;
   }
 
-  await rename(tmpDir, afterDir);
+  await copy(tmpDir, afterDir);
+  await remove(tmpDir);
 };
 
 export const runCommand = async (script: string, options: ExecaOptions, debug = false) => {
@@ -185,6 +189,8 @@ const runGenerators = async (
             flags = ['--type html'];
           } else if (expected.renderer === '@storybook/server') {
             flags = ['--type server'];
+          } else if (expected.framework === '@storybook/react-native-web-vite') {
+            flags = ['--type react_native_web'];
           }
 
           const time = process.hrtime();
@@ -194,7 +200,19 @@ const runGenerators = async (
           // We do the creation inside a temp dir to avoid yarn container problems
           const createBaseDir = await temporaryDirectory();
           if (!script.includes('pnp')) {
-            await setupYarn({ cwd: createBaseDir });
+            try {
+              await setupYarn({ cwd: createBaseDir });
+            } catch (error) {
+              const message = `❌ Failed to setup yarn in template: ${name} (${dirName})`;
+              if (isCI) {
+                ghActions.error(dedent`${message}
+                  ${(error as any).stack}`);
+              } else {
+                console.error(message);
+                console.error(error);
+              }
+              throw new Error(message);
+            }
           }
 
           const createBeforeDir = join(createBaseDir, BEFORE_DIR_NAME);
diff --git a/scripts/sandbox/publish.ts b/scripts/sandbox/publish.ts
index 7ddb549c3900..f83048dff5cd 100755
--- a/scripts/sandbox/publish.ts
+++ b/scripts/sandbox/publish.ts
@@ -1,7 +1,10 @@
 import { program } from 'commander';
+// eslint-disable-next-line depend/ban-dependencies
 import { execaCommand } from 'execa';
 import { existsSync } from 'fs';
+// eslint-disable-next-line depend/ban-dependencies
 import { copy, emptyDir, remove, writeFile } from 'fs-extra';
+// eslint-disable-next-line depend/ban-dependencies
 import { glob } from 'glob';
 import { dirname, join, relative } from 'path';
 
diff --git a/scripts/sandbox/utils/git.ts b/scripts/sandbox/utils/git.ts
index 17022db63fca..2ea8b89f29b4 100644
--- a/scripts/sandbox/utils/git.ts
+++ b/scripts/sandbox/utils/git.ts
@@ -1,3 +1,4 @@
+// eslint-disable-next-line depend/ban-dependencies
 import { execaCommand } from 'execa';
 import invariant from 'tiny-invariant';
 
diff --git a/scripts/sandbox/utils/template.ts b/scripts/sandbox/utils/template.ts
index 11b6c1e86d5a..825cd6e58641 100644
--- a/scripts/sandbox/utils/template.ts
+++ b/scripts/sandbox/utils/template.ts
@@ -1,4 +1,5 @@
 import { render } from 'ejs';
+// eslint-disable-next-line depend/ban-dependencies
 import { readFile } from 'fs-extra';
 import prettier from 'prettier';
 
diff --git a/scripts/sandbox/utils/yarn.ts b/scripts/sandbox/utils/yarn.ts
index a2d579b2cde0..1132bda1472d 100644
--- a/scripts/sandbox/utils/yarn.ts
+++ b/scripts/sandbox/utils/yarn.ts
@@ -1,3 +1,5 @@
+import fs from 'fs';
+// eslint-disable-next-line depend/ban-dependencies
 import { move, remove } from 'fs-extra';
 import { join } from 'path';
 
@@ -11,7 +13,7 @@ interface SetupYarnOptions {
 
 export async function setupYarn({ cwd, pnp = false, version = 'classic' }: SetupYarnOptions) {
   // force yarn
-  await runCommand(`touch yarn.lock`, { cwd });
+  fs.writeFileSync(join(cwd, 'yarn.lock'), '', { flag: 'a' });
   await runCommand(`yarn set version ${version}`, { cwd });
   if (version === 'berry' && !pnp) {
     await runCommand('yarn config set nodeLinker node-modules', { cwd });
@@ -21,7 +23,7 @@ export async function setupYarn({ cwd, pnp = false, version = 'classic' }: Setup
 
 export async function localizeYarnConfigFiles(baseDir: string, beforeDir: string) {
   await Promise.allSettled([
-    runCommand(`touch yarn.lock`, { cwd: beforeDir }),
+    fs.writeFileSync(join(beforeDir, 'yarn.lock'), '', { flag: 'a' }),
     move(join(baseDir, '.yarn'), join(beforeDir, '.yarn')),
     move(join(baseDir, '.yarnrc.yml'), join(beforeDir, '.yarnrc.yml')),
     move(join(baseDir, '.yarnrc'), join(beforeDir, '.yarnrc')),
diff --git a/scripts/strict-ts.ts b/scripts/strict-ts.ts
index 990cbe866ccf..bf0710f5a583 100644
--- a/scripts/strict-ts.ts
+++ b/scripts/strict-ts.ts
@@ -1,6 +1,7 @@
 import { existsSync, readFileSync } from 'node:fs';
 import { dirname, join } from 'node:path';
 
+// eslint-disable-next-line depend/ban-dependencies
 import glob from 'fast-glob';
 import JSON5 from 'json5';
 
diff --git a/scripts/task.ts b/scripts/task.ts
index 905b53b82cae..327fe3b5641b 100644
--- a/scripts/task.ts
+++ b/scripts/task.ts
@@ -1,7 +1,9 @@
+// eslint-disable-next-line depend/ban-dependencies
 import { outputFile, pathExists, readFile } from 'fs-extra';
 import type { TestCase } from 'junit-xml';
 import { getJunitXml } from 'junit-xml';
 import { join, resolve } from 'path';
+import picocolors from 'picocolors';
 import { prompt } from 'prompts';
 import invariant from 'tiny-invariant';
 import { dedent } from 'ts-dedent';
@@ -32,12 +34,13 @@ import { testRunnerBuild } from './tasks/test-runner-build';
 import { testRunnerDev } from './tasks/test-runner-dev';
 import { vitestTests } from './tasks/vitest-test';
 import { CODE_DIRECTORY, JUNIT_DIRECTORY, SANDBOX_DIRECTORY } from './utils/constants';
+import { findMostMatchText } from './utils/diff';
 import type { OptionValues } from './utils/options';
 import { createOptions, getCommand, getOptionsOrPrompt } from './utils/options';
 
 const sandboxDir = process.env.SANDBOX_ROOT || SANDBOX_DIRECTORY;
 
-export const extraAddons = ['a11y', 'storysource'];
+export const extraAddons = ['@storybook/addon-a11y', '@storybook/addon-storysource'];
 
 export type Path = string;
 export type TemplateDetails = {
@@ -100,7 +103,7 @@ export const tasks = {
   bench,
   'vitest-integration': vitestTests,
 };
-type TaskKey = keyof typeof tasks;
+export type TaskKey = keyof typeof tasks;
 
 function isSandboxTask(taskKey: TaskKey) {
   return !['install', 'compile', 'publish', 'run-registry', 'check', 'sync-docs'].includes(taskKey);
@@ -178,7 +181,7 @@ export const options = createOptions({
   },
 });
 
-export type PassedOptionValues = Omit<OptionValues<typeof options>, 'task' | 'startFrom' | 'junit'>;
+export type PassedOptionValues = Omit<OptionValues<typeof options>, 'startFrom' | 'junit'>;
 
 const logger = console;
 
@@ -346,7 +349,21 @@ async function run() {
 
   const allOptionValues = await getOptionsOrPrompt('yarn task', options);
 
-  const { task: taskKey, startFrom, junit, ...optionValues } = allOptionValues;
+  const { junit, startFrom, ...optionValues } = allOptionValues;
+  const taskKey = optionValues.task;
+
+  if (!(taskKey in tasks)) {
+    const matchText = findMostMatchText(Object.keys(tasks), taskKey);
+
+    if (matchText) {
+      console.log(
+        `${picocolors.red('Error')}: ${picocolors.cyan(
+          taskKey
+        )} is not a valid task name, Did you mean ${picocolors.cyan(matchText)}?`
+      );
+    }
+    process.exit(1);
+  }
 
   const finalTask = tasks[taskKey];
   const { template: templateKey } = optionValues;
@@ -362,7 +379,6 @@ async function run() {
     builtSandboxDir: templateKey && join(templateSandboxDir, 'storybook-static'),
     junitFilename: junit && getJunitFilename(taskKey),
   };
-
   const { sortedTasks, tasksThatDepend } = getTaskList(finalTask, details, optionValues);
   const sortedTasksReady = await Promise.all(
     sortedTasks.map((t) => t.ready(details, optionValues))
@@ -481,27 +497,29 @@ async function run() {
         }
       } catch (err) {
         invariant(err instanceof Error);
-        logger.error(`Error running task ${getTaskKey(task)}:`);
+        logger.error(
+          `Error running task ${picocolors.bold(getTaskKey(task))} for ${picocolors.bgCyan(picocolors.white(details.key))}:`
+        );
         logger.error(JSON.stringify(err, null, 2));
 
         if (process.env.CI) {
-          logger.error(
-            dedent`
-              To reproduce this error locally, run:
+          const separator = '\n--------------------------------------------\n';
+          const reproduceMessage = dedent`
+            To reproduce this error locally, run:
 
-              ${getCommand('yarn task', options, {
+            ${picocolors.bold(
+              getCommand('yarn task', options, {
                 ...allOptionValues,
                 link: true,
                 startFrom: 'auto',
-              })}
-              
-              Note this uses locally linking which in rare cases behaves differently to CI. For a closer match, run:
-              
-              ${getCommand('yarn task', options, {
-                ...allOptionValues,
-                startFrom: 'auto',
-              })}`
-          );
+              })
+            )}
+            
+            Note this uses locally linking which in rare cases behaves differently to CI.
+            For a closer match, add ${picocolors.bold('--no-link')} to the command above.
+          `;
+
+          err.message += `\n${separator}${reproduceMessage}${separator}\n`;
         }
 
         controllers.forEach((controller) => {
diff --git a/scripts/tasks/build.ts b/scripts/tasks/build.ts
index 4a74dcba1f55..796532e2bc0c 100644
--- a/scripts/tasks/build.ts
+++ b/scripts/tasks/build.ts
@@ -1,4 +1,5 @@
 import dirSize from 'fast-folder-size';
+// eslint-disable-next-line depend/ban-dependencies
 import { pathExists } from 'fs-extra';
 import { join } from 'path';
 import { promisify } from 'util';
diff --git a/scripts/tasks/check.ts b/scripts/tasks/check.ts
index 1f5928c48147..a3f4edf31f2b 100644
--- a/scripts/tasks/check.ts
+++ b/scripts/tasks/check.ts
@@ -7,8 +7,8 @@ const amountOfVCPUs = 8;
 
 const parallel = `--parallel=${process.env.CI ? amountOfVCPUs - 1 : maxConcurrentTasks}`;
 
-const linkCommand = `nx affected -t check ${parallel}`;
-const nolinkCommand = `nx affected -t check -c production ${parallel}`;
+const linkCommand = `npx nx affected -t check ${parallel}`;
+const nolinkCommand = `npx nx affected -t check -c production ${parallel}`;
 
 export const check: Task = {
   description: 'Typecheck the source code of the monorepo',
diff --git a/scripts/tasks/compile.ts b/scripts/tasks/compile.ts
index 2fe631c5f615..dc8bfb7f3f6c 100644
--- a/scripts/tasks/compile.ts
+++ b/scripts/tasks/compile.ts
@@ -1,3 +1,4 @@
+// eslint-disable-next-line depend/ban-dependencies
 import { readFile } from 'fs-extra';
 import { resolve } from 'path';
 
@@ -11,8 +12,8 @@ const amountOfVCPUs = 4;
 const parallel = `--parallel=${process.env.CI ? amountOfVCPUs - 1 : maxConcurrentTasks}`;
 
 const linkedContents = `export * from '../../src/manager-api/index.ts';`;
-const linkCommand = `nx run-many -t build ${parallel}`;
-const noLinkCommand = `nx run-many -t build -c production ${parallel}`;
+const linkCommand = `npx nx run-many -t build ${parallel}`;
+const noLinkCommand = `npx nx run-many -t build -c production ${parallel}`;
 
 export const compile: Task = {
   description: 'Compile the source code of the monorepo',
diff --git a/scripts/tasks/generate.ts b/scripts/tasks/generate.ts
index 3e1b0ddc5bc3..5736803a551d 100644
--- a/scripts/tasks/generate.ts
+++ b/scripts/tasks/generate.ts
@@ -1,3 +1,4 @@
+// eslint-disable-next-line depend/ban-dependencies
 import { pathExists, remove } from 'fs-extra';
 import { join } from 'path';
 
diff --git a/scripts/tasks/install.ts b/scripts/tasks/install.ts
index 90342845687e..0299c18d2fe4 100644
--- a/scripts/tasks/install.ts
+++ b/scripts/tasks/install.ts
@@ -1,3 +1,4 @@
+// eslint-disable-next-line depend/ban-dependencies
 import { pathExists, remove } from 'fs-extra';
 import { join } from 'path';
 
diff --git a/scripts/tasks/publish.ts b/scripts/tasks/publish.ts
index d83ffb9272b2..987286207dd1 100644
--- a/scripts/tasks/publish.ts
+++ b/scripts/tasks/publish.ts
@@ -1,3 +1,4 @@
+// eslint-disable-next-line depend/ban-dependencies
 import { pathExists } from 'fs-extra';
 import { resolve } from 'path';
 
diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts
index 07c518a9986e..271fbba9dcd8 100644
--- a/scripts/tasks/sandbox-parts.ts
+++ b/scripts/tasks/sandbox-parts.ts
@@ -1,5 +1,7 @@
 // This file requires many imports from `../code`, which requires both an install and bootstrap of
 // the repo to work properly. So we load it async in the task runner *after* those steps.
+import { isFunction } from 'es-toolkit';
+// eslint-disable-next-line depend/ban-dependencies
 import {
   copy,
   ensureDir,
@@ -12,7 +14,6 @@ import {
   writeJson,
 } from 'fs-extra';
 import JSON5 from 'json5';
-import { isFunction } from 'lodash';
 import { createRequire } from 'module';
 import { join, relative, resolve, sep } from 'path';
 import slash from 'slash';
@@ -88,7 +89,7 @@ export const install: Task['run'] = async ({ sandboxDir, key }, { link, dryRun,
       dryRun,
       debug,
     });
-    await addWorkaroundResolutions({ cwd, dryRun, debug });
+    await addWorkaroundResolutions({ cwd, dryRun, debug, key });
   } else {
     // We need to add package resolutions to ensure that we only ever install the latest version
     // of any storybook packages as verdaccio is not able to both proxy to npm and publish over
@@ -109,7 +110,7 @@ export const install: Task['run'] = async ({ sandboxDir, key }, { link, dryRun,
       'vue3-vite/default-js',
       'vue3-vite/default-ts',
     ];
-    if (sandboxesNeedingWorkarounds.includes(key)) {
+    if (sandboxesNeedingWorkarounds.includes(key) || key.includes('vite')) {
       await addWorkaroundResolutions({ cwd, dryRun, debug });
     }
 
@@ -137,6 +138,8 @@ export const init: Task['run'] = async (
     extra = { type: 'html' };
   } else if (template.expected.renderer === '@storybook/server') {
     extra = { type: 'server' };
+  } else if (template.expected.framework === '@storybook/react-native-web-vite') {
+    extra = { type: 'react_native_web' };
   }
 
   await executeCLIStep(steps.init, {
@@ -176,8 +179,13 @@ export const init: Task['run'] = async (
 
   if (!skipTemplateStories) {
     for (const addon of addons) {
-      const addonName = `@storybook/addon-${addon}`;
-      await executeCLIStep(steps.add, { argument: addonName, cwd, dryRun, debug });
+      await executeCLIStep(steps.add, {
+        argument: addon,
+        cwd,
+        dryRun,
+        debug,
+        optionValues: { yes: true },
+      });
     }
   }
 };
@@ -237,7 +245,19 @@ function addEsbuildLoaderToStories(mainConfig: ConfigFile) {
   And allow source directories to complement any existing allow patterns
   (".storybook" is already being allowed by builder-vite)
 */
-function setSandboxViteFinal(mainConfig: ConfigFile) {
+function setSandboxViteFinal(mainConfig: ConfigFile, template: TemplateKey) {
+  const temporaryAliasWorkaround = template.includes('nuxt')
+    ? `
+    // TODO: Remove this once Storybook Nuxt applies this internally
+    resolve: {
+      ...config.resolve,
+      alias: {
+        ...config.resolve.alias,
+        vue: 'vue/dist/vue.esm-bundler.js',
+      }
+    }
+  `
+    : '';
   const viteFinalCode = `
   (config) => ({
     ...config,
@@ -249,6 +269,7 @@ function setSandboxViteFinal(mainConfig: ConfigFile) {
         allow: ['stories', 'src', 'template-stories', 'node_modules', ...(config.server?.fs?.allow || [])],
       },
     },
+    ${temporaryAliasWorkaround}
   })`;
   // @ts-expect-error (Property 'expression' does not exist on type 'BlockStatement')
   mainConfig.setFieldNode(['viteFinal'], babelParse(viteFinalCode).program.body[0].expression);
@@ -390,6 +411,25 @@ const getVitestPluginInfo = (details: TemplateDetails) => {
 
 export async function setupVitest(details: TemplateDetails, options: PassedOptionValues) {
   const { sandboxDir, template } = details;
+  const packageJsonPath = join(sandboxDir, 'package.json');
+  const packageJson = await readJson(packageJsonPath);
+
+  packageJson.scripts = {
+    ...packageJson.scripts,
+    vitest: 'vitest --reporter=default --reporter=hanging-process --test-timeout=5000',
+  };
+
+  // This workaround is needed because Vitest seems to have issues in link mode
+  // so the /setup-file and /global-setup files from the vitest addon won't work in portal protocol
+  if (options.link) {
+    const vitestAddonPath = relative(sandboxDir, join(CODE_DIRECTORY, 'addons', 'test'));
+    packageJson.resolutions = {
+      ...packageJson.resolutions,
+      '@storybook/experimental-addon-test': `file:${vitestAddonPath}`,
+    };
+  }
+
+  await writeJson(packageJsonPath, packageJson, { spaces: 2 });
 
   const isVue = template.expected.renderer === '@storybook/vue3';
   const isNextjs = template.expected.framework.includes('nextjs');
@@ -412,8 +452,9 @@ export async function setupVitest(details: TemplateDetails, options: PassedOptio
     dedent`import { beforeAll } from 'vitest'
     import { setProjectAnnotations } from '${storybookPackage}'
     import * as rendererDocsAnnotations from '${template.expected.renderer}/dist/entry-preview-docs.mjs'
+    import * as addonA11yAnnotations from '@storybook/addon-a11y/preview'
     import * as addonActionsAnnotations from '@storybook/addon-actions/preview'
-    import * as addonInteractionsAnnotations from '@storybook/addon-interactions/preview'
+    import * as addonTestAnnotations from '@storybook/experimental-addon-test/preview'
     import '../src/stories/components'
     import * as coreAnnotations from '../template-stories/core/preview'
     import * as toolbarAnnotations from '../template-stories/addons/toolbars/preview'
@@ -421,13 +462,14 @@ export async function setupVitest(details: TemplateDetails, options: PassedOptio
     ${isVue ? 'import * as vueAnnotations from "../src/stories/renderers/vue3/preview.js"' : ''}
 
     const annotations = setProjectAnnotations([
+      ${isVue ? 'vueAnnotations,' : ''}
       rendererDocsAnnotations,
-      projectAnnotations,
       coreAnnotations,
       toolbarAnnotations,
       addonActionsAnnotations,
-      addonInteractionsAnnotations,
-      ${isVue ? 'vueAnnotations,' : ''}
+      addonTestAnnotations,
+      addonA11yAnnotations,
+      projectAnnotations,
     ])
 
     beforeAll(annotations.beforeAll)`
@@ -471,14 +513,11 @@ export async function setupVitest(details: TemplateDetails, options: PassedOptio
           test: {
             name: "storybook",
             pool: "threads",
-            include: [
-              "src/**/*.{story,stories}.?(c|m)[jt]s?(x)",
-              "template-stories/**/*.{story,stories}.?(c|m)[jt]s?(x)",
-            ],
             exclude: [
               ...defaultExclude,
               // TODO: investigate TypeError: Cannot read properties of null (reading 'useContext')
               "**/*argtypes*",
+              ${template.expected.renderer === '@storybook/svelte' ? '"**/*.stories.svelte",' : ''}
             ],
             /**
              * TODO: Either fix or acknowledge limitation of:
@@ -500,26 +539,6 @@ export async function setupVitest(details: TemplateDetails, options: PassedOptio
       ]);
   `
   );
-
-  const packageJsonPath = join(sandboxDir, 'package.json');
-  const packageJson = await readJson(packageJsonPath);
-
-  packageJson.scripts = {
-    ...packageJson.scripts,
-    vitest: 'vitest --reporter=default --reporter=hanging-process --test-timeout=5000',
-  };
-
-  // This workaround is needed because Vitest seems to have issues in link mode
-  // so the /setup-file and /global-setup files from the vitest addon won't work in portal protocol
-  if (options.link) {
-    const vitestAddonPath = relative(sandboxDir, join(CODE_DIRECTORY, 'addons', 'test'));
-    packageJson.resolutions = {
-      ...packageJson.resolutions,
-      '@storybook/experimental-addon-test': `file:${vitestAddonPath}`,
-    };
-  }
-
-  await writeJson(packageJsonPath, packageJson, { spaces: 2 });
 }
 
 export async function addExtraDependencies({
@@ -560,9 +579,10 @@ export const addStories: Task['run'] = async (
   { sandboxDir, template, key },
   { addon: extraAddons, disableDocs }
 ) => {
-  logger.log('💃 adding stories');
+  logger.log('💃 Adding stories');
   const cwd = sandboxDir;
-  const storiesPath = await findFirstPath([join('src', 'stories'), 'stories'], { cwd });
+  const storiesPath =
+    (await findFirstPath([join('src', 'stories'), 'stories'], { cwd })) || 'stories';
 
   const mainConfig = await readConfig({ fileName: 'main', cwd });
   const packageManager = JsPackageManagerFactory.getPackageManager({}, sandboxDir);
@@ -663,6 +683,15 @@ export const addStories: Task['run'] = async (
       cwd,
       disableDocs,
     });
+
+    await linkPackageStories(
+      await workspacePath('addon test package', '@storybook/experimental-addon-test'),
+      {
+        mainConfig,
+        cwd,
+        disableDocs,
+      }
+    );
   }
 
   const mainAddons = (mainConfig.getSafeFieldValue(['addons']) || []).reduce(
@@ -717,7 +746,7 @@ export const extendMain: Task['run'] = async ({ template, sandboxDir, key }, { d
     addRefs(mainConfig);
   }
 
-  const templateConfig = isFunction(template.modifications?.mainConfig)
+  const templateConfig: any = isFunction(template.modifications?.mainConfig)
     ? template.modifications?.mainConfig(mainConfig)
     : template.modifications?.mainConfig || {};
   const configToAdd = {
@@ -784,7 +813,7 @@ export const extendMain: Task['run'] = async ({ template, sandboxDir, key }, { d
   }
 
   if (template.expected.builder === '@storybook/builder-vite') {
-    setSandboxViteFinal(mainConfig);
+    setSandboxViteFinal(mainConfig, key);
   }
   await writeConfig(mainConfig);
 };
@@ -794,7 +823,7 @@ export const extendPreview: Task['run'] = async ({ template, sandboxDir }) => {
   const previewConfig = await readConfig({ cwd: sandboxDir, fileName: 'preview' });
 
   if (template.expected.builder.includes('vite')) {
-    previewConfig.setFieldValue(['tags'], ['vitest']);
+    previewConfig.setFieldValue(['tags'], ['vitest', '!a11ytest']);
   }
 
   await writeConfig(previewConfig);
diff --git a/scripts/tasks/sandbox.ts b/scripts/tasks/sandbox.ts
index 93d5cf823c93..cbf8856e0373 100644
--- a/scripts/tasks/sandbox.ts
+++ b/scripts/tasks/sandbox.ts
@@ -1,10 +1,11 @@
 import dirSize from 'fast-folder-size';
+// eslint-disable-next-line depend/ban-dependencies
 import { pathExists, remove } from 'fs-extra';
 import { join } from 'path';
 import { promisify } from 'util';
 
 import { now, saveBench } from '../bench/utils';
-import type { Task } from '../task';
+import type { Task, TaskKey } from '../task';
 
 const logger = console;
 
@@ -21,8 +22,24 @@ export const sandbox: Task = {
 
     return ['run-registry'];
   },
-  async ready({ sandboxDir }) {
-    return pathExists(sandboxDir);
+  async ready({ sandboxDir }, { task: selectedTask }) {
+    // If the selected task requires the sandbox to exist, we check it. Else we always assume it needs to be created
+    // This avoids issues where you want to overwrite a sandbox and it will stop because it already exists
+    const tasksAfterSandbox: TaskKey[] = [
+      'vitest-integration',
+      'test-runner',
+      'test-runner-dev',
+      'e2e-tests',
+      'e2e-tests-dev',
+      'smoke-test',
+      'dev',
+      'build',
+      'serve',
+      'chromatic',
+      'bench',
+    ];
+    const isSelectedTaskAfterSandboxCreation = tasksAfterSandbox.includes(selectedTask);
+    return isSelectedTaskAfterSandboxCreation && pathExists(sandboxDir);
   },
   async run(details, options) {
     if (options.link && details.template.inDevelopment) {
@@ -32,7 +49,7 @@ export const sandbox: Task = {
 
       options.link = false;
     }
-    if (await this.ready(details)) {
+    if (await this.ready(details, options)) {
       logger.info('🗑  Removing old sandbox dir');
       await remove(details.sandboxDir);
     }
@@ -49,6 +66,37 @@ export const sandbox: Task = {
       setupVitest,
     } = await import('./sandbox-parts');
 
+    const extraDeps = [
+      ...(details.template.modifications?.extraDependencies ?? []),
+      // The storybook package forwards some CLI commands to @storybook/cli with npx.
+      // Adding the dep makes sure that even npx will use the linked workspace version.
+      '@storybook/cli',
+    ];
+
+    const shouldAddVitestIntegration = !details.template.skipTasks?.includes('vitest-integration');
+
+    if (shouldAddVitestIntegration) {
+      extraDeps.push('happy-dom', 'vitest', 'playwright', '@vitest/browser');
+
+      if (details.template.expected.framework.includes('nextjs')) {
+        extraDeps.push('@storybook/experimental-nextjs-vite', 'jsdom');
+      }
+
+      // if (details.template.expected.renderer === '@storybook/svelte') {
+      //   extraDeps.push(`@testing-library/svelte`);
+      // }
+      //
+      // if (details.template.expected.framework === '@storybook/angular') {
+      //   extraDeps.push('@testing-library/angular', '@analogjs/vitest-angular');
+      // }
+
+      options.addon = [
+        ...options.addon,
+        '@storybook/experimental-addon-test',
+        '@storybook/addon-a11y',
+      ];
+    }
+
     let startTime = now();
     await create(details, options);
     const createTime = now() - startTime;
@@ -82,33 +130,7 @@ export const sandbox: Task = {
       await addStories(details, options);
     }
 
-    const extraDeps = [
-      ...(details.template.modifications?.extraDependencies ?? []),
-      // The storybook package forwards some CLI commands to @storybook/cli with npx.
-      // Adding the dep makes sure that even npx will use the linked workspace version.
-      '@storybook/cli',
-    ];
-    if (!details.template.skipTasks?.includes('vitest-integration')) {
-      extraDeps.push(
-        'happy-dom',
-        'vitest',
-        'playwright',
-        '@vitest/browser',
-        '@storybook/experimental-addon-test'
-      );
-
-      if (details.template.expected.framework.includes('nextjs')) {
-        extraDeps.push('@storybook/experimental-nextjs-vite', 'jsdom');
-      }
-
-      // if (details.template.expected.renderer === '@storybook/svelte') {
-      //   extraDeps.push(`@testing-library/svelte`);
-      // }
-      //
-      // if (details.template.expected.framework === '@storybook/angular') {
-      //   extraDeps.push('@testing-library/angular', '@analogjs/vitest-angular');
-      // }
-
+    if (shouldAddVitestIntegration) {
       await setupVitest(details, options);
     }
 
diff --git a/scripts/upload-bench.ts b/scripts/upload-bench.ts
index 9766079b9dc8..48e5fa618896 100644
--- a/scripts/upload-bench.ts
+++ b/scripts/upload-bench.ts
@@ -1,4 +1,5 @@
 import { BigQuery } from '@google-cloud/bigquery';
+// eslint-disable-next-line depend/ban-dependencies
 import { execaCommand } from 'execa';
 import { join } from 'path';
 
diff --git a/scripts/utils/cli-step.ts b/scripts/utils/cli-step.ts
index b428160490f7..ce57896aeddf 100644
--- a/scripts/utils/cli-step.ts
+++ b/scripts/utils/cli-step.ts
@@ -47,7 +47,9 @@ export const steps = {
     description: 'Adding addon',
     icon: '+',
     hasArgument: true,
-    options: createOptions({}),
+    options: createOptions({
+      yes: { type: 'boolean' },
+    }),
   },
   link: {
     command: 'link',
diff --git a/scripts/utils/diff.ts b/scripts/utils/diff.ts
new file mode 100644
index 000000000000..a07dce4abe20
--- /dev/null
+++ b/scripts/utils/diff.ts
@@ -0,0 +1,35 @@
+import { diff } from 'diff-match-patch-es';
+
+function matchTextScore(text: string, pattern: string) {
+  const result = diff(text, pattern);
+
+  if (!result.length) {
+    return 0;
+  }
+
+  return result.reduce((pre, cur) => {
+    const [matchIndex, matchText] = cur;
+
+    if (matchIndex === 0) {
+      return pre + matchText.length;
+    }
+
+    return pre;
+  }, 0);
+}
+
+export function findMostMatchText(list: string[], pattern: string) {
+  let maxScore = 0;
+  let result = '';
+
+  for (const text of list) {
+    const score = matchTextScore(text, pattern);
+
+    if (score > maxScore) {
+      maxScore = score;
+      result = text;
+    }
+  }
+
+  return result !== '' ? result : null;
+}
diff --git a/scripts/utils/exec.ts b/scripts/utils/exec.ts
index 2998e4877acb..a4a77ebd2244 100644
--- a/scripts/utils/exec.ts
+++ b/scripts/utils/exec.ts
@@ -1,6 +1,6 @@
-import chalk from 'chalk';
-import type { ExecaChildProcess, Options } from 'execa';
-import { execa } from 'execa';
+// eslint-disable-next-line depend/ban-dependencies
+import { type ExecaChildProcess, type Options, execa } from 'execa';
+import picocolors from 'picocolors';
 
 const logger = console;
 
@@ -50,7 +50,7 @@ export const exec = async (
     }
   } catch (err) {
     if (!(typeof err === 'object' && 'killed' in err && err.killed)) {
-      logger.error(chalk.red(`An error occurred while executing: \`${command}\``));
+      logger.error(picocolors.red(`An error occurred while executing: \`${command}\``));
       logger.log(`${errorMessage}\n`);
     }
 
diff --git a/scripts/utils/filterExistsInCodeDir.ts b/scripts/utils/filterExistsInCodeDir.ts
index 7a22fdf8d2f2..673148f916eb 100644
--- a/scripts/utils/filterExistsInCodeDir.ts
+++ b/scripts/utils/filterExistsInCodeDir.ts
@@ -1,5 +1,6 @@
 import { join, resolve } from 'node:path';
 
+// eslint-disable-next-line depend/ban-dependencies
 import { pathExists } from 'fs-extra';
 
 import { CODE_DIRECTORY } from './constants';
diff --git a/scripts/utils/options.ts b/scripts/utils/options.ts
index 5add8c25dd29..f3caf64e28b2 100644
--- a/scripts/utils/options.ts
+++ b/scripts/utils/options.ts
@@ -1,8 +1,7 @@
 /** Use commander and prompts to gather a list of options for a script */
-import chalk from 'chalk';
 import { type Command, type Option as CommanderOption, program } from 'commander';
-// eslint-disable-next-line import/extensions
-import kebabCase from 'lodash/kebabCase.js';
+import { kebabCase } from 'es-toolkit/compat';
+import picocolors from 'picocolors';
 import prompts from 'prompts';
 import type { Falsy, PrevCaller, PromptObject, PromptType } from 'prompts';
 import { dedent } from 'ts-dedent';
@@ -131,9 +130,9 @@ export function getOptions<TOptions extends OptionSpecifier>(
 
       const checkStringValue = (raw: string) => {
         if (option.values && !option.values.includes(raw)) {
-          const possibleOptions = chalk.cyan(option.values.join('\n'));
+          const possibleOptions = picocolors.cyan(option.values.join('\n'));
           throw new Error(
-            dedent`Unexpected value '${chalk.yellow(raw)}' for option '${chalk.magenta(key)}'.
+            dedent`Unexpected value '${picocolors.yellow(raw)}' for option '${picocolors.magenta(key)}'.
             
             These are the possible options:
               ${possibleOptions}\n\n`
diff --git a/scripts/utils/package-json.ts b/scripts/utils/package-json.ts
index cc88350ddfaa..16bdb67f7078 100644
--- a/scripts/utils/package-json.ts
+++ b/scripts/utils/package-json.ts
@@ -1,3 +1,4 @@
+// eslint-disable-next-line depend/ban-dependencies
 import { readJSON, writeJSON } from 'fs-extra';
 import { join } from 'path';
 
diff --git a/scripts/utils/paths.ts b/scripts/utils/paths.ts
index 36db99f4e093..7253fdff740c 100644
--- a/scripts/utils/paths.ts
+++ b/scripts/utils/paths.ts
@@ -1,3 +1,4 @@
+// eslint-disable-next-line depend/ban-dependencies
 import { pathExists } from 'fs-extra';
 import { join } from 'path';
 
diff --git a/scripts/utils/serve.ts b/scripts/utils/serve.ts
deleted file mode 100644
index 98ba1da21c63..000000000000
--- a/scripts/utils/serve.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import express from 'express';
-import type { Server } from 'http';
-import serveStatic from 'serve-static';
-
-export const serve = async (location: string, port: string): Promise<Server> => {
-  return new Promise((resolve) => {
-    const app = express();
-
-    app.use(serveStatic(location));
-    const server = app.listen(port, () => {
-      resolve(server);
-    });
-  });
-};
diff --git a/scripts/utils/workspace.ts b/scripts/utils/workspace.ts
index 98a0164ec5ac..fcba0311b09d 100644
--- a/scripts/utils/workspace.ts
+++ b/scripts/utils/workspace.ts
@@ -1,3 +1,4 @@
+// eslint-disable-next-line depend/ban-dependencies
 import { execaCommand } from 'execa';
 import memoize from 'memoizerific';
 
diff --git a/scripts/utils/yarn.ts b/scripts/utils/yarn.ts
index 0b8147dfa983..2aeeaada2edf 100644
--- a/scripts/utils/yarn.ts
+++ b/scripts/utils/yarn.ts
@@ -1,5 +1,6 @@
 import { join } from 'node:path';
 
+// eslint-disable-next-line depend/ban-dependencies
 import { pathExists, readJSON, writeJSON } from 'fs-extra';
 
 // TODO -- should we generate this file a second time outside of CLI?
@@ -28,12 +29,11 @@ export const addPackageResolutions = async ({ cwd, dryRun }: YarnOptions) => {
   packageJson.resolutions = {
     ...packageJson.resolutions,
     ...storybookVersions,
-    'enhanced-resolve': '~5.10.0', // TODO, remove this
     // this is for our CI test, ensure we use the same version as docker image, it should match version specified in `./code/package.json` and `.circleci/config.yml`
     '@swc/core': '1.5.7',
-    playwright: '1.46.0',
-    'playwright-core': '1.46.0',
-    '@playwright/test': '1.46.0',
+    playwright: '1.48.1',
+    'playwright-core': '1.48.1',
+    '@playwright/test': '1.48.1',
   };
   await writeJSON(packageJsonPath, packageJson, { spaces: 2 });
 };
@@ -67,7 +67,10 @@ export const installYarn2 = async ({ cwd, dryRun, debug }: YarnOptions) => {
   );
 };
 
-export const addWorkaroundResolutions = async ({ cwd, dryRun }: YarnOptions) => {
+export const addWorkaroundResolutions = async ({
+  cwd,
+  dryRun,
+}: YarnOptions & { key?: TemplateKey }) => {
   logger.info(`🔢 Adding resolutions for workarounds`);
 
   if (dryRun) {
@@ -78,16 +81,11 @@ export const addWorkaroundResolutions = async ({ cwd, dryRun }: YarnOptions) =>
   const packageJson = await readJSON(packageJsonPath);
   packageJson.resolutions = {
     ...packageJson.resolutions,
-    // Due to our support of older vite versions
-    '@vitejs/plugin-react': '4.2.0',
-    '@sveltejs/vite-plugin-svelte': '3.0.1',
-    '@vitejs/plugin-vue': '4.5.0',
     '@testing-library/dom': '^9.3.4',
     '@testing-library/jest-dom': '^6.5.0',
     '@testing-library/user-event': '^14.5.2',
-    // TODO: Remove as soon as @storybook/csf@0.1.10 is released
-    '@storybook/csf': '0.1.10--canary.d841bb4.0',
   };
+
   await writeJSON(packageJsonPath, packageJson, { spaces: 2 });
 };
 
@@ -105,7 +103,7 @@ export const configureYarn2ForVerdaccio = async ({
     // ⚠️ Need to set registry because Yarn 2 is not using the conf of Yarn 1 (URL is hardcoded in CircleCI config.yml)
     `yarn config set npmRegistryServer "http://localhost:6001/"`,
     // Some required magic to be able to fetch deps from local registry
-    `yarn config set unsafeHttpWhitelist --json '["localhost"]'`,
+    `yarn config set unsafeHttpWhitelist "localhost"`,
     // Disable fallback mode to make sure everything is required correctly
     `yarn config set pnpFallbackMode none`,
     // We need to be able to update lockfile when bootstrapping the examples
@@ -115,7 +113,7 @@ export const configureYarn2ForVerdaccio = async ({
   if (
     key.includes('svelte-kit') ||
     // React prereleases will have INCOMPATIBLE_PEER_DEPENDENCY errors because of transitive dependencies not allowing v19 betas
-    key.includes('nextjs/prerelease') ||
+    key.includes('nextjs') ||
     key.includes('react-vite/prerelease') ||
     key.includes('react-webpack/prerelease')
   ) {
@@ -123,6 +121,8 @@ export const configureYarn2ForVerdaccio = async ({
     command.push(
       `yarn config set logFilters --json '[ { "code": "YN0013", "level": "discard" } ]'`
     );
+  } else if (key.includes('nuxt')) {
+    // Nothing to do for Nuxt
   } else {
     // Discard all YN0013 - FETCH_NOT_CACHED messages
     // Error on YN0060 - INCOMPATIBLE_PEER_DEPENDENCY
diff --git a/scripts/vite-ecosystem-ci/before-test.js b/scripts/vite-ecosystem-ci/before-test.js
index 93da3f28519b..35ba21734d06 100644
--- a/scripts/vite-ecosystem-ci/before-test.js
+++ b/scripts/vite-ecosystem-ci/before-test.js
@@ -8,7 +8,8 @@ import { readFile, writeFile } from 'node:fs/promises';
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
-import { execa, execaCommand } from 'execa';
+// eslint-disable-next-line depend/ban-dependencies
+import { execaCommand } from 'execa';
 
 const filename = fileURLToPath(import.meta.url);
 // eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention
diff --git a/scripts/yarn.lock b/scripts/yarn.lock
index 204801ac47ac..e7bac1502539 100644
--- a/scripts/yarn.lock
+++ b/scripts/yarn.lock
@@ -83,11 +83,9 @@ __metadata:
   linkType: hard
 
 "@babel/helper-environment-visitor@npm:^7.22.20":
-  version: 7.24.7
-  resolution: "@babel/helper-environment-visitor@npm:7.24.7"
-  dependencies:
-    "@babel/types": "npm:^7.24.7"
-  checksum: 10c0/36ece78882b5960e2d26abf13cf15ff5689bf7c325b10a2895a74a499e712de0d305f8d78bb382dd3c05cfba7e47ec98fe28aab5674243e0625cd38438dd0b2d
+  version: 7.22.20
+  resolution: "@babel/helper-environment-visitor@npm:7.22.20"
+  checksum: 10c0/e762c2d8f5d423af89bd7ae9abe35bd4836d2eb401af868a63bbb63220c513c783e25ef001019418560b3fdc6d9a6fb67e6c0b650bcdeb3a2ac44b5c3d2bdd94
   languageName: node
   linkType: hard
 
@@ -102,20 +100,20 @@ __metadata:
   linkType: hard
 
 "@babel/helper-hoist-variables@npm:^7.22.5":
-  version: 7.24.7
-  resolution: "@babel/helper-hoist-variables@npm:7.24.7"
+  version: 7.22.5
+  resolution: "@babel/helper-hoist-variables@npm:7.22.5"
   dependencies:
-    "@babel/types": "npm:^7.24.7"
-  checksum: 10c0/19ee37563bbd1219f9d98991ad0e9abef77803ee5945fd85aa7aa62a67c69efca9a801696a1b58dda27f211e878b3327789e6fd2a6f6c725ccefe36774b5ce95
+    "@babel/types": "npm:^7.22.5"
+  checksum: 10c0/60a3077f756a1cd9f14eb89f0037f487d81ede2b7cfe652ea6869cd4ec4c782b0fb1de01b8494b9a2d2050e3d154d7d5ad3be24806790acfb8cbe2073bf1e208
   languageName: node
   linkType: hard
 
 "@babel/helper-split-export-declaration@npm:^7.22.6":
-  version: 7.24.7
-  resolution: "@babel/helper-split-export-declaration@npm:7.24.7"
+  version: 7.22.6
+  resolution: "@babel/helper-split-export-declaration@npm:7.22.6"
   dependencies:
-    "@babel/types": "npm:^7.24.7"
-  checksum: 10c0/0254577d7086bf09b01bbde98f731d4fcf4b7c3fa9634fdb87929801307c1f6202a1352e3faa5492450fa8da4420542d44de604daf540704ff349594a78184f6
+    "@babel/types": "npm:^7.22.5"
+  checksum: 10c0/d83e4b623eaa9622c267d3c83583b72f3aac567dc393dda18e559d79187961cb29ae9c57b2664137fc3d19508370b12ec6a81d28af73a50e0846819cb21c6e44
   languageName: node
   linkType: hard
 
@@ -219,7 +217,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.17.0, @babel/types@npm:^7.23.0, @babel/types@npm:^7.24.0, @babel/types@npm:^7.24.7, @babel/types@npm:^7.25.0, @babel/types@npm:^7.25.2":
+"@babel/types@npm:^7.17.0, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.24.0, @babel/types@npm:^7.24.7, @babel/types@npm:^7.25.0, @babel/types@npm:^7.25.2":
   version: 7.25.2
   resolution: "@babel/types@npm:7.25.2"
   dependencies:
@@ -263,170 +261,170 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@esbuild/aix-ppc64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/aix-ppc64@npm:0.23.0"
+"@esbuild/aix-ppc64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/aix-ppc64@npm:0.24.0"
   conditions: os=aix & cpu=ppc64
   languageName: node
   linkType: hard
 
-"@esbuild/android-arm64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/android-arm64@npm:0.23.0"
+"@esbuild/android-arm64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/android-arm64@npm:0.24.0"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
 
-"@esbuild/android-arm@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/android-arm@npm:0.23.0"
+"@esbuild/android-arm@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/android-arm@npm:0.24.0"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
 
-"@esbuild/android-x64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/android-x64@npm:0.23.0"
+"@esbuild/android-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/android-x64@npm:0.24.0"
   conditions: os=android & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/darwin-arm64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/darwin-arm64@npm:0.23.0"
+"@esbuild/darwin-arm64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/darwin-arm64@npm:0.24.0"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@esbuild/darwin-x64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/darwin-x64@npm:0.23.0"
+"@esbuild/darwin-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/darwin-x64@npm:0.24.0"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/freebsd-arm64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/freebsd-arm64@npm:0.23.0"
+"@esbuild/freebsd-arm64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/freebsd-arm64@npm:0.24.0"
   conditions: os=freebsd & cpu=arm64
   languageName: node
   linkType: hard
 
-"@esbuild/freebsd-x64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/freebsd-x64@npm:0.23.0"
+"@esbuild/freebsd-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/freebsd-x64@npm:0.24.0"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/linux-arm64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/linux-arm64@npm:0.23.0"
+"@esbuild/linux-arm64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-arm64@npm:0.24.0"
   conditions: os=linux & cpu=arm64
   languageName: node
   linkType: hard
 
-"@esbuild/linux-arm@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/linux-arm@npm:0.23.0"
+"@esbuild/linux-arm@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-arm@npm:0.24.0"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"@esbuild/linux-ia32@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/linux-ia32@npm:0.23.0"
+"@esbuild/linux-ia32@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-ia32@npm:0.24.0"
   conditions: os=linux & cpu=ia32
   languageName: node
   linkType: hard
 
-"@esbuild/linux-loong64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/linux-loong64@npm:0.23.0"
+"@esbuild/linux-loong64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-loong64@npm:0.24.0"
   conditions: os=linux & cpu=loong64
   languageName: node
   linkType: hard
 
-"@esbuild/linux-mips64el@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/linux-mips64el@npm:0.23.0"
+"@esbuild/linux-mips64el@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-mips64el@npm:0.24.0"
   conditions: os=linux & cpu=mips64el
   languageName: node
   linkType: hard
 
-"@esbuild/linux-ppc64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/linux-ppc64@npm:0.23.0"
+"@esbuild/linux-ppc64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-ppc64@npm:0.24.0"
   conditions: os=linux & cpu=ppc64
   languageName: node
   linkType: hard
 
-"@esbuild/linux-riscv64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/linux-riscv64@npm:0.23.0"
+"@esbuild/linux-riscv64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-riscv64@npm:0.24.0"
   conditions: os=linux & cpu=riscv64
   languageName: node
   linkType: hard
 
-"@esbuild/linux-s390x@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/linux-s390x@npm:0.23.0"
+"@esbuild/linux-s390x@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-s390x@npm:0.24.0"
   conditions: os=linux & cpu=s390x
   languageName: node
   linkType: hard
 
-"@esbuild/linux-x64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/linux-x64@npm:0.23.0"
+"@esbuild/linux-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-x64@npm:0.24.0"
   conditions: os=linux & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/netbsd-x64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/netbsd-x64@npm:0.23.0"
+"@esbuild/netbsd-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/netbsd-x64@npm:0.24.0"
   conditions: os=netbsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/openbsd-arm64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/openbsd-arm64@npm:0.23.0"
+"@esbuild/openbsd-arm64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/openbsd-arm64@npm:0.24.0"
   conditions: os=openbsd & cpu=arm64
   languageName: node
   linkType: hard
 
-"@esbuild/openbsd-x64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/openbsd-x64@npm:0.23.0"
+"@esbuild/openbsd-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/openbsd-x64@npm:0.24.0"
   conditions: os=openbsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/sunos-x64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/sunos-x64@npm:0.23.0"
+"@esbuild/sunos-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/sunos-x64@npm:0.24.0"
   conditions: os=sunos & cpu=x64
   languageName: node
   linkType: hard
 
-"@esbuild/win32-arm64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/win32-arm64@npm:0.23.0"
+"@esbuild/win32-arm64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/win32-arm64@npm:0.24.0"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@esbuild/win32-ia32@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/win32-ia32@npm:0.23.0"
+"@esbuild/win32-ia32@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/win32-ia32@npm:0.24.0"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@esbuild/win32-x64@npm:0.23.0":
-  version: 0.23.0
-  resolution: "@esbuild/win32-x64@npm:0.23.0"
+"@esbuild/win32-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/win32-x64@npm:0.24.0"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -718,10 +716,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.4.15":
-  version: 1.4.15
-  resolution: "@jridgewell/sourcemap-codec@npm:1.4.15"
-  checksum: 10c0/0c6b5ae663087558039052a626d2d7ed5208da36cfd707dcc5cea4a07cfc918248403dcb5989a8f7afaf245ce0573b7cc6fd94c4a30453bd10e44d9363940ba5
+"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "@jridgewell/sourcemap-codec@npm:1.5.0"
+  checksum: 10c0/2eb864f276eb1096c3c11da3e9bb518f6d9fc0023c78344cdc037abadc725172c70314bdb360f2d4b7bffec7f5d657ce006816bc5d4ecb35e61b66132db00c18
   languageName: node
   linkType: hard
 
@@ -768,7 +766,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nodelib/fs.walk@npm:^1.2.3, @nodelib/fs.walk@npm:^1.2.8":
+"@nodelib/fs.walk@npm:1.2.8, @nodelib/fs.walk@npm:^1.2.3, @nodelib/fs.walk@npm:^1.2.8":
   version: 1.2.8
   resolution: "@nodelib/fs.walk@npm:1.2.8"
   dependencies:
@@ -855,139 +853,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nrwl/devkit@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nrwl/devkit@npm:18.0.6"
-  dependencies:
-    "@nx/devkit": "npm:18.0.6"
-  checksum: 10c0/70e02f256216fe11392e2d12a692ddc76acb28140246dfabeac59d3c7a1d8ee1c811e4bcaa6e879a610a7ba7d4669850469676508e8f333e6d42ee487b2ce279
-  languageName: node
-  linkType: hard
-
-"@nrwl/tao@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nrwl/tao@npm:18.0.6"
-  dependencies:
-    nx: "npm:18.0.6"
-    tslib: "npm:^2.3.0"
-  bin:
-    tao: index.js
-  checksum: 10c0/f11f0f579dcfb59c501308a9143844785d5aa63c8cca97e5adc6f8faa51468b3105a99ac421b3e5a241001fdfe319a675b586afff1ef3f5d42301994c38da202
-  languageName: node
-  linkType: hard
-
-"@nrwl/workspace@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nrwl/workspace@npm:18.0.6"
-  dependencies:
-    "@nx/workspace": "npm:18.0.6"
-  checksum: 10c0/0cf5ec95c036fd98269d9e746ab08f578d793011667823053aecfb062337a9b0bd98def282acf7fba453930537d5adb7c2d5284b5faebe676f22717a1a7040c1
-  languageName: node
-  linkType: hard
-
-"@nx/devkit@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nx/devkit@npm:18.0.6"
-  dependencies:
-    "@nrwl/devkit": "npm:18.0.6"
-    ejs: "npm:^3.1.7"
-    enquirer: "npm:~2.3.6"
-    ignore: "npm:^5.0.4"
-    semver: "npm:^7.5.3"
-    tmp: "npm:~0.2.1"
-    tslib: "npm:^2.3.0"
-    yargs-parser: "npm:21.1.1"
-  peerDependencies:
-    nx: ">= 16 <= 18"
-  checksum: 10c0/1645003b800475257fce500802ce99acc35490c73161896247f7e2747a0160c47a40245b17daf568b6d05f66ddf55097772e2ab8ba895a286f8b544af1b51c44
-  languageName: node
-  linkType: hard
-
-"@nx/nx-darwin-arm64@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nx/nx-darwin-arm64@npm:18.0.6"
-  conditions: os=darwin & cpu=arm64
-  languageName: node
-  linkType: hard
-
-"@nx/nx-darwin-x64@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nx/nx-darwin-x64@npm:18.0.6"
-  conditions: os=darwin & cpu=x64
-  languageName: node
-  linkType: hard
-
-"@nx/nx-freebsd-x64@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nx/nx-freebsd-x64@npm:18.0.6"
-  conditions: os=freebsd & cpu=x64
-  languageName: node
-  linkType: hard
-
-"@nx/nx-linux-arm-gnueabihf@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nx/nx-linux-arm-gnueabihf@npm:18.0.6"
-  conditions: os=linux & cpu=arm
-  languageName: node
-  linkType: hard
-
-"@nx/nx-linux-arm64-gnu@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nx/nx-linux-arm64-gnu@npm:18.0.6"
-  conditions: os=linux & cpu=arm64 & libc=glibc
-  languageName: node
-  linkType: hard
-
-"@nx/nx-linux-arm64-musl@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nx/nx-linux-arm64-musl@npm:18.0.6"
-  conditions: os=linux & cpu=arm64 & libc=musl
-  languageName: node
-  linkType: hard
-
-"@nx/nx-linux-x64-gnu@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nx/nx-linux-x64-gnu@npm:18.0.6"
-  conditions: os=linux & cpu=x64 & libc=glibc
-  languageName: node
-  linkType: hard
-
-"@nx/nx-linux-x64-musl@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nx/nx-linux-x64-musl@npm:18.0.6"
-  conditions: os=linux & cpu=x64 & libc=musl
-  languageName: node
-  linkType: hard
-
-"@nx/nx-win32-arm64-msvc@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nx/nx-win32-arm64-msvc@npm:18.0.6"
-  conditions: os=win32 & cpu=arm64
-  languageName: node
-  linkType: hard
-
-"@nx/nx-win32-x64-msvc@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nx/nx-win32-x64-msvc@npm:18.0.6"
-  conditions: os=win32 & cpu=x64
-  languageName: node
-  linkType: hard
-
-"@nx/workspace@npm:18.0.6":
-  version: 18.0.6
-  resolution: "@nx/workspace@npm:18.0.6"
-  dependencies:
-    "@nrwl/workspace": "npm:18.0.6"
-    "@nx/devkit": "npm:18.0.6"
-    chalk: "npm:^4.1.0"
-    enquirer: "npm:~2.3.6"
-    nx: "npm:18.0.6"
-    tslib: "npm:^2.3.0"
-    yargs-parser: "npm:21.1.1"
-  checksum: 10c0/bd01b6b28fbe0c783a9c37bfdf0a01846df4ef46f366f6596e586063dff06d87761c35b06819839fefdf66a9c32947697db7ecc21b2933a06a633693a962272c
-  languageName: node
-  linkType: hard
-
 "@octokit/auth-token@npm:^2.4.0, @octokit/auth-token@npm:^2.4.4":
   version: 2.5.0
   resolution: "@octokit/auth-token@npm:2.5.0"
@@ -1301,6 +1166,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@polka/parse@npm:^1.0.0-next.28":
+  version: 1.0.0-next.28
+  resolution: "@polka/parse@npm:1.0.0-next.28"
+  checksum: 10c0/42c53dfdc4b39a3b516fbd4358b2472b22f36e6038e25d463afb3f133fb1d5af84d7eb4d245ab66bc5793d6414299fdd9093803e5214e560f0693f2176fc58b6
+  languageName: node
+  linkType: hard
+
+"@polka/url@npm:^1.0.0-next.21":
+  version: 1.0.0-next.28
+  resolution: "@polka/url@npm:1.0.0-next.28"
+  checksum: 10c0/acc5ea62597e4da2fb42dbee02749d07f102ae7d6d2c966bf7e423c79cd65d1621da305af567e6e7c232f3b565e242d1ec932cbb3dcc0db1508d02e9a2cafa2e
+  languageName: node
+  linkType: hard
+
 "@rollup/rollup-android-arm-eabi@npm:4.21.0":
   version: 4.21.0
   resolution: "@rollup/rollup-android-arm-eabi@npm:4.21.0"
@@ -1459,6 +1338,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@snyk/github-codeowners@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@snyk/github-codeowners@npm:1.1.0"
+  dependencies:
+    commander: "npm:^4.1.1"
+    ignore: "npm:^5.1.8"
+    p-map: "npm:^4.0.0"
+  bin:
+    github-codeowners: dist/cli.js
+  checksum: 10c0/92d860a904a1e67f8563d4ac4d540cc613f71193f7968933b4a4b1526e80a97f536f52d27762c158e3e39d48c2f3db4906ec78846309351c741abb1a28653af9
+  languageName: node
+  linkType: hard
+
 "@storybook/csf@npm:^0.0.1":
   version: 0.0.1
   resolution: "@storybook/csf@npm:0.0.1"
@@ -1511,9 +1403,9 @@ __metadata:
     "@actions/core": "npm:^1.10.1"
     "@fal-works/esbuild-plugin-global-externals": "npm:^2.1.2"
     "@google-cloud/bigquery": "npm:^6.2.0"
-    "@nx/workspace": "npm:18.0.6"
     "@octokit/graphql": "npm:^5.0.5"
     "@octokit/request": "npm:^8.1.2"
+    "@polka/parse": "npm:^1.0.0-next.28"
     "@storybook/eslint-config-storybook": "npm:^4.0.0"
     "@storybook/linter-config": "npm:^4.0.0"
     "@testing-library/dom": "npm:^10.4.0"
@@ -1525,11 +1417,9 @@ __metadata:
     "@types/detect-port": "npm:^1.3.5"
     "@types/ejs": "npm:^3.1.5"
     "@types/escodegen": "npm:^0.0.6"
-    "@types/express": "npm:^4.17.21"
     "@types/fs-extra": "npm:^11.0.4"
     "@types/http-server": "npm:^0.12.4"
     "@types/jest": "npm:^29.5.12"
-    "@types/lodash": "npm:^4.17.6"
     "@types/node": "npm:^22.0.0"
     "@types/prettier": "npm:^3.0.0"
     "@types/pretty-hrtime": "npm:^1.0.3"
@@ -1545,10 +1435,9 @@ __metadata:
     "@typescript-eslint/experimental-utils": "npm:^5.62.0"
     "@typescript-eslint/parser": "npm:^7.16.0"
     "@verdaccio/types": "npm:^10.8.0"
-    "@vitest/coverage-v8": "npm:^2.0.5"
+    "@vitest/coverage-v8": "npm:^2.1.3"
     ansi-regex: "npm:^6.0.1"
     browser-assert: "npm:^1.2.1"
-    chalk: "npm:^4.1.0"
     chromatic: "npm:^11.5.5"
     codecov: "npm:^3.8.1"
     commander: "npm:^12.1.0"
@@ -1557,13 +1446,16 @@ __metadata:
     danger: "npm:^12.3.3"
     dataloader: "npm:^2.2.2"
     detect-port: "npm:^1.6.1"
+    diff-match-patch-es: "npm:^0.1.0"
     ejs: "npm:^3.1.10"
     ejs-lint: "npm:^2.0.0"
-    esbuild: "npm:^0.23.0"
+    es-toolkit: "npm:^1.22.0"
+    esbuild: "npm:^0.24.0"
     esbuild-plugin-alias: "npm:^0.2.1"
     eslint: "npm:^8.57.0"
     eslint-config-airbnb-typescript: "npm:^18.0.0"
     eslint-config-prettier: "npm:^9.1.0"
+    eslint-plugin-depend: "npm:^0.11.0"
     eslint-plugin-eslint-comments: "npm:^3.2.0"
     eslint-plugin-file-progress: "npm:^1.4.0"
     eslint-plugin-html: "npm:^8.1.1"
@@ -1575,7 +1467,6 @@ __metadata:
     eslint-plugin-react-hooks: "npm:^4.6.2"
     eslint-plugin-storybook: "npm:^0.8.0"
     execa: "npm:^6.1.0"
-    express: "npm:^4.19.2"
     fast-folder-size: "npm:^2.2.0"
     fast-glob: "npm:^3.3.2"
     find-up: "npm:^5.0.0"
@@ -1587,16 +1478,18 @@ __metadata:
     jiti: "npm:^1.21.6"
     json5: "npm:^2.2.3"
     junit-xml: "npm:^1.2.0"
+    knip: "npm:^5.30.1"
     lint-staged: "npm:^15.2.7"
-    lodash: "npm:^4.17.21"
     memoizerific: "npm:^1.11.3"
+    minimatch: "npm:^10.0.1"
     node-gyp: "npm:^9.3.1"
-    nx: "npm:18.0.6"
     ora: "npm:^5.4.1"
     p-limit: "npm:^3.1.0"
     p-retry: "npm:^5.1.2"
-    playwright: "npm:1.46.0"
-    playwright-core: "npm:1.46.0"
+    picocolors: "npm:^1.1.0"
+    playwright: "npm:1.48.1"
+    playwright-core: "npm:1.48.1"
+    polka: "npm:^1.0.0-next.28"
     prettier: "npm:^3.3.2"
     prettier-plugin-brace-style: "npm:^0.6.2"
     prettier-plugin-css-order: "npm:^2.1.2"
@@ -1612,10 +1505,10 @@ __metadata:
     react-dom: "npm:^18.3.1"
     read-pkg-up: "npm:^7.0.1"
     recast: "npm:^0.23.9"
-    remark: "npm:^14.0.3"
+    remark: "npm:^15.0.1"
     remark-cli: "npm:^12.0.1"
-    remark-lint: "npm:^9.1.2"
-    remark-preset-lint-recommended: "npm:^6.1.3"
+    remark-lint: "npm:^10.0.0"
+    remark-preset-lint-recommended: "npm:^7.0.0"
     rollup: "npm:^4.21.0"
     rollup-plugin-dts: "npm:^6.1.1"
     semver: "npm:^7.6.2"
@@ -1624,16 +1517,17 @@ __metadata:
     slash: "npm:^3.0.0"
     sort-package-json: "npm:^2.10.0"
     tiny-invariant: "npm:^1.3.3"
+    tinyexec: "npm:^0.3.0"
     trash: "npm:^7.2.0"
     ts-dedent: "npm:^2.2.0"
     tsup: "npm:^6.7.0"
     type-fest: "npm:~2.19"
-    typescript: "npm:^5.4.5"
+    typescript: "npm:5.4.5"
     util: "npm:^0.12.5"
     uuid: "npm:^9.0.1"
     verdaccio: "npm:^5.31.1"
     verdaccio-auth-memory: "npm:^10.2.2"
-    vitest: "npm:^2.0.5"
+    vitest: "npm:^2.1.3"
     wait-on: "npm:^7.2.0"
     window-size: "npm:^1.1.1"
     yaml: "npm:^2.4.5"
@@ -1756,16 +1650,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/body-parser@npm:*":
-  version: 1.19.4
-  resolution: "@types/body-parser@npm:1.19.4"
-  dependencies:
-    "@types/connect": "npm:*"
-    "@types/node": "npm:*"
-  checksum: 10c0/bec2b8a97861a960ee415f7ab3c2aeb7f4d779fd364d27ddee46057897ea571735f1f854f5ee41682964315d4e3699f62427998b9c21851d773398ef535f0612
-  languageName: node
-  linkType: hard
-
 "@types/concat-stream@npm:^2.0.0":
   version: 2.0.1
   resolution: "@types/concat-stream@npm:2.0.1"
@@ -1839,30 +1723,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/express-serve-static-core@npm:^4.17.33":
-  version: 4.17.39
-  resolution: "@types/express-serve-static-core@npm:4.17.39"
-  dependencies:
-    "@types/node": "npm:*"
-    "@types/qs": "npm:*"
-    "@types/range-parser": "npm:*"
-    "@types/send": "npm:*"
-  checksum: 10c0/b23b005fddd2ba3f7142ec9713f06b5582c7712cdf99c3419d3972364903b348a103c3264d9a761d6497140e3b89bd416454684c4bdeff206b4c59b86e96428a
-  languageName: node
-  linkType: hard
-
-"@types/express@npm:^4.17.21":
-  version: 4.17.21
-  resolution: "@types/express@npm:4.17.21"
-  dependencies:
-    "@types/body-parser": "npm:*"
-    "@types/express-serve-static-core": "npm:^4.17.33"
-    "@types/qs": "npm:*"
-    "@types/serve-static": "npm:*"
-  checksum: 10c0/12e562c4571da50c7d239e117e688dc434db1bac8be55613294762f84fd77fbd0658ccd553c7d3ab02408f385bc93980992369dd30e2ecd2c68c358e6af8fabf
-  languageName: node
-  linkType: hard
-
 "@types/fs-extra@npm:^11.0.4":
   version: 11.0.4
   resolution: "@types/fs-extra@npm:11.0.4"
@@ -1892,6 +1752,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/hast@npm:^3.0.0":
+  version: 3.0.4
+  resolution: "@types/hast@npm:3.0.4"
+  dependencies:
+    "@types/unist": "npm:*"
+  checksum: 10c0/3249781a511b38f1d330fd1e3344eed3c4e7ea8eff82e835d35da78e637480d36fad37a78be5a7aed8465d237ad0446abc1150859d0fde395354ea634decf9f7
+  languageName: node
+  linkType: hard
+
 "@types/http-errors@npm:*":
   version: 2.0.3
   resolution: "@types/http-errors@npm:2.0.3"
@@ -1973,7 +1842,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/lodash@npm:^4.14.175, @types/lodash@npm:^4.17.6":
+"@types/lodash@npm:^4.14.175":
   version: 4.17.6
   resolution: "@types/lodash@npm:4.17.6"
   checksum: 10c0/3b197ac47af9443fee8c4719c5ffde527d7febc018b827d44a6bc2523c728c7adfdd25196fdcfe3eed827993e0c41a917d0da6e78938b18b2be94164789f1117
@@ -2084,20 +1953,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/qs@npm:*":
-  version: 6.9.9
-  resolution: "@types/qs@npm:6.9.9"
-  checksum: 10c0/aede2a4181a49ae8548a1354bac3f8235cb0c5aab066b10875a3e68e88a199e220f4284e7e2bb75a3c18e5d4ff6abe1a6ce0389ef31b63952cc45e0f4d885ba0
-  languageName: node
-  linkType: hard
-
-"@types/range-parser@npm:*":
-  version: 1.2.6
-  resolution: "@types/range-parser@npm:1.2.6"
-  checksum: 10c0/46e7fffc54cdacc8fb0cd576f8f9a6436453f0176205d6ec55434a460c7677e78e688673426d5db5e480501b2943ba08a16ececa3a354c222093551c7217fb8f
-  languageName: node
-  linkType: hard
-
 "@types/react-dom@npm:^18.3.0":
   version: 18.3.0
   resolution: "@types/react-dom@npm:18.3.0"
@@ -2141,7 +1996,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/serve-static@npm:*, @types/serve-static@npm:^1.15.7":
+"@types/serve-static@npm:^1.15.7":
   version: 1.15.7
   resolution: "@types/serve-static@npm:1.15.7"
   dependencies:
@@ -2791,116 +2646,111 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vitest/coverage-v8@npm:^2.0.5":
-  version: 2.0.5
-  resolution: "@vitest/coverage-v8@npm:2.0.5"
+"@vitest/coverage-v8@npm:^2.1.3":
+  version: 2.1.3
+  resolution: "@vitest/coverage-v8@npm:2.1.3"
   dependencies:
     "@ampproject/remapping": "npm:^2.3.0"
     "@bcoe/v8-coverage": "npm:^0.2.3"
-    debug: "npm:^4.3.5"
+    debug: "npm:^4.3.6"
     istanbul-lib-coverage: "npm:^3.2.2"
     istanbul-lib-report: "npm:^3.0.1"
     istanbul-lib-source-maps: "npm:^5.0.6"
     istanbul-reports: "npm:^3.1.7"
-    magic-string: "npm:^0.30.10"
+    magic-string: "npm:^0.30.11"
     magicast: "npm:^0.3.4"
     std-env: "npm:^3.7.0"
     test-exclude: "npm:^7.0.1"
     tinyrainbow: "npm:^1.2.0"
   peerDependencies:
-    vitest: 2.0.5
-  checksum: 10c0/a95eef744d2a541f5d9d0287243cbcb596802c04e0250404947e36a669c477abe86607afb8d8ddb3d31bf12633b3ffa3d9a313e489e4ab7998b3c1620ad60e00
+    "@vitest/browser": 2.1.3
+    vitest: 2.1.3
+  peerDependenciesMeta:
+    "@vitest/browser":
+      optional: true
+  checksum: 10c0/5fdff9e9dd8b8d2030c00a5273ba2b27441c0cb45d007b6671504745dac6d095c160a01433789e7ed1ca6cd234246f883c1d52c02cfb62f8ae81dda17dd56bc6
   languageName: node
   linkType: hard
 
-"@vitest/expect@npm:2.0.5":
-  version: 2.0.5
-  resolution: "@vitest/expect@npm:2.0.5"
+"@vitest/expect@npm:2.1.3":
+  version: 2.1.3
+  resolution: "@vitest/expect@npm:2.1.3"
   dependencies:
-    "@vitest/spy": "npm:2.0.5"
-    "@vitest/utils": "npm:2.0.5"
+    "@vitest/spy": "npm:2.1.3"
+    "@vitest/utils": "npm:2.1.3"
     chai: "npm:^5.1.1"
     tinyrainbow: "npm:^1.2.0"
-  checksum: 10c0/08cb1b0f106d16a5b60db733e3d436fa5eefc68571488eb570dfe4f599f214ab52e4342273b03dbe12331cc6c0cdc325ac6c94f651ad254cd62f3aa0e3d185aa
+  checksum: 10c0/0837adcbb938feebcc083664afc5c4d12e42f1f2442b6f1bedc6b5650a8ff2448b1f10713b45afb099c839fb5cf766c971736267fa9b0fe2ac87f3e2d7f782c2
   languageName: node
   linkType: hard
 
-"@vitest/pretty-format@npm:2.0.5, @vitest/pretty-format@npm:^2.0.5":
-  version: 2.0.5
-  resolution: "@vitest/pretty-format@npm:2.0.5"
+"@vitest/mocker@npm:2.1.3":
+  version: 2.1.3
+  resolution: "@vitest/mocker@npm:2.1.3"
+  dependencies:
+    "@vitest/spy": "npm:2.1.3"
+    estree-walker: "npm:^3.0.3"
+    magic-string: "npm:^0.30.11"
+  peerDependencies:
+    "@vitest/spy": 2.1.3
+    msw: ^2.3.5
+    vite: ^5.0.0
+  peerDependenciesMeta:
+    msw:
+      optional: true
+    vite:
+      optional: true
+  checksum: 10c0/03c80628d092244f21a0ba9041665fc75f987d0d11fab1ae0b7027ec21e503f65057e8c24b936602c5f852d83fbb183da13d05dba117c99785b41b3dafd105ce
+  languageName: node
+  linkType: hard
+
+"@vitest/pretty-format@npm:2.1.3, @vitest/pretty-format@npm:^2.1.3":
+  version: 2.1.3
+  resolution: "@vitest/pretty-format@npm:2.1.3"
   dependencies:
     tinyrainbow: "npm:^1.2.0"
-  checksum: 10c0/236c0798c5170a0b5ad5d4bd06118533738e820b4dd30079d8fbcb15baee949d41c60f42a9f769906c4a5ce366d7ef11279546070646c0efc03128c220c31f37
+  checksum: 10c0/5a6ee872a8adf5e2764f2b5b2276d8a2199be4ef14777ab693428caf359481851400af10b59721d4972289c955ffe7277954a662b04cfb10233824574c7074ba
   languageName: node
   linkType: hard
 
-"@vitest/runner@npm:2.0.5":
-  version: 2.0.5
-  resolution: "@vitest/runner@npm:2.0.5"
+"@vitest/runner@npm:2.1.3":
+  version: 2.1.3
+  resolution: "@vitest/runner@npm:2.1.3"
   dependencies:
-    "@vitest/utils": "npm:2.0.5"
+    "@vitest/utils": "npm:2.1.3"
     pathe: "npm:^1.1.2"
-  checksum: 10c0/d0ed3302a7e015bf44b7c0df9d8f7da163659e082d86f9406944b5a31a61ab9ddc1de530e06176d1f4ef0bde994b44bff4c7dab62aacdc235c8fc04b98e4a72a
+  checksum: 10c0/d5b077643265d10025e22fa64a0e54c3d4fddc23e05f9fcd143dbcc4080851b0df31985986e57890a974577a18d3af624758b6062801d7dd96f9b4f2eaf591f1
   languageName: node
   linkType: hard
 
-"@vitest/snapshot@npm:2.0.5":
-  version: 2.0.5
-  resolution: "@vitest/snapshot@npm:2.0.5"
+"@vitest/snapshot@npm:2.1.3":
+  version: 2.1.3
+  resolution: "@vitest/snapshot@npm:2.1.3"
   dependencies:
-    "@vitest/pretty-format": "npm:2.0.5"
-    magic-string: "npm:^0.30.10"
+    "@vitest/pretty-format": "npm:2.1.3"
+    magic-string: "npm:^0.30.11"
     pathe: "npm:^1.1.2"
-  checksum: 10c0/7bf38474248f5ae0aac6afad511785d2b7a023ac5158803c2868fd172b5b9c1a569fb1dd64a09a49e43fd342cab71ea485ada89b7f08d37b1622a5a0ac00271d
+  checksum: 10c0/a3dcea6a5f7581b6a34dc3bf5f7bd42a05e2ccf6e1171d9f1b759688aebe650e6412564d066aeaa45e83ac549d453b6a3edcf774a8ac728c0c639f8dc919039f
   languageName: node
   linkType: hard
 
-"@vitest/spy@npm:2.0.5":
-  version: 2.0.5
-  resolution: "@vitest/spy@npm:2.0.5"
+"@vitest/spy@npm:2.1.3":
+  version: 2.1.3
+  resolution: "@vitest/spy@npm:2.1.3"
   dependencies:
     tinyspy: "npm:^3.0.0"
-  checksum: 10c0/70634c21921eb271b54d2986c21d7ab6896a31c0f4f1d266940c9bafb8ac36237846d6736638cbf18b958bd98e5261b158a6944352742accfde50b7818ff655e
+  checksum: 10c0/8d85a5c2848c5bd81892af989aebad65d0c7ae74094aa98ad4f35ecf80755259c7a748a8e7bf683b2906fac29a51fc0ffa82f8fc073b36dbd8a0418261fccdba
   languageName: node
   linkType: hard
 
-"@vitest/utils@npm:2.0.5":
-  version: 2.0.5
-  resolution: "@vitest/utils@npm:2.0.5"
+"@vitest/utils@npm:2.1.3":
+  version: 2.1.3
+  resolution: "@vitest/utils@npm:2.1.3"
   dependencies:
-    "@vitest/pretty-format": "npm:2.0.5"
-    estree-walker: "npm:^3.0.3"
+    "@vitest/pretty-format": "npm:2.1.3"
     loupe: "npm:^3.1.1"
     tinyrainbow: "npm:^1.2.0"
-  checksum: 10c0/0d1de748298f07a50281e1ba058b05dcd58da3280c14e6f016265e950bd79adab6b97822de8f0ea82d3070f585654801a9b1bcf26db4372e51cf7746bf86d73b
-  languageName: node
-  linkType: hard
-
-"@yarnpkg/lockfile@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "@yarnpkg/lockfile@npm:1.1.0"
-  checksum: 10c0/0bfa50a3d756623d1f3409bc23f225a1d069424dbc77c6fd2f14fb377390cd57ec703dc70286e081c564be9051ead9ba85d81d66a3e68eeb6eb506d4e0c0fbda
-  languageName: node
-  linkType: hard
-
-"@yarnpkg/parsers@npm:3.0.0-rc.46":
-  version: 3.0.0-rc.46
-  resolution: "@yarnpkg/parsers@npm:3.0.0-rc.46"
-  dependencies:
-    js-yaml: "npm:^3.10.0"
-    tslib: "npm:^2.4.0"
-  checksum: 10c0/c7f421c6885142f351459031c093fb2e79abcce6f4a89765a10e600bb7ab122949c54bcea2b23de9572a2b34ba29f822b17831c1c43ba50373ceb8cb5b336667
-  languageName: node
-  linkType: hard
-
-"@zkochan/js-yaml@npm:0.0.6":
-  version: 0.0.6
-  resolution: "@zkochan/js-yaml@npm:0.0.6"
-  dependencies:
-    argparse: "npm:^2.0.1"
-  bin:
-    js-yaml: bin/js-yaml.js
-  checksum: 10c0/5ce27ae75fb1db9657d4065bf6b380b4c0f756feb1bdf42bfde40551a74bcc0ec918f748cbdbd5d95b7107d00bc2f731ee731b5cfe93acb6f7da5639b16aa1f8
+  checksum: 10c0/55a044e43b84c0f8f573d8578107f26440678b6f506c8d9fee88b7ef120d19efd27c9be77985c107113b0f3f3db298dcee57074e1c1c214bee7a097fd08a209b
   languageName: node
   linkType: hard
 
@@ -3062,13 +2912,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-colors@npm:^4.1.1":
-  version: 4.1.3
-  resolution: "ansi-colors@npm:4.1.3"
-  checksum: 10c0/ec87a2f59902f74e61eada7f6e6fe20094a628dab765cfdbd03c3477599368768cffccdb5d3bb19a1b6c99126783a143b1fee31aab729b31ffe5836c7e5e28b9
-  languageName: node
-  linkType: hard
-
 "ansi-escapes@npm:^6.2.0":
   version: 6.2.1
   resolution: "ansi-escapes@npm:6.2.1"
@@ -3463,7 +3306,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axios@npm:^1.6.0, axios@npm:^1.6.1":
+"axios@npm:^1.6.1":
   version: 1.7.2
   resolution: "axios@npm:1.7.2"
   dependencies:
@@ -3603,7 +3446,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bl@npm:^4.0.3, bl@npm:^4.1.0":
+"bl@npm:^4.1.0":
   version: 4.1.0
   resolution: "bl@npm:4.1.0"
   dependencies:
@@ -3899,6 +3742,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"character-entities-html4@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "character-entities-html4@npm:2.1.0"
+  checksum: 10c0/fe61b553f083400c20c0b0fd65095df30a0b445d960f3bbf271536ae6c3ba676f39cb7af0b4bf2755812f08ab9b88f2feed68f9aebb73bb153f7a115fe5c6e40
+  languageName: node
+  linkType: hard
+
+"character-entities-legacy@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "character-entities-legacy@npm:3.0.0"
+  checksum: 10c0/ec4b430af873661aa754a896a2b55af089b4e938d3d010fad5219299a6b6d32ab175142699ee250640678cd64bdecd6db3c9af0b8759ab7b155d970d84c4c7d1
+  languageName: node
+  linkType: hard
+
 "character-entities@npm:^2.0.0":
   version: 2.0.2
   resolution: "character-entities@npm:2.0.2"
@@ -3906,6 +3763,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"character-reference-invalid@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "character-reference-invalid@npm:2.0.1"
+  checksum: 10c0/2ae0dec770cd8659d7e8b0ce24392d83b4c2f0eb4a3395c955dce5528edd4cc030a794cfa06600fcdd700b3f2de2f9b8e40e309c0011c4180e3be64a0b42e6a1
+  languageName: node
+  linkType: hard
+
 "check-error@npm:^2.1.1":
   version: 2.1.1
   resolution: "check-error@npm:2.1.1"
@@ -3993,7 +3857,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cli-cursor@npm:3.1.0, cli-cursor@npm:^3.1.0":
+"cli-cursor@npm:^3.1.0":
   version: 3.1.0
   resolution: "cli-cursor@npm:3.1.0"
   dependencies:
@@ -4011,13 +3875,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cli-spinners@npm:2.6.1":
-  version: 2.6.1
-  resolution: "cli-spinners@npm:2.6.1"
-  checksum: 10c0/6abcdfef59aa68e6b51376d87d257f9120a0a7120a39dd21633702d24797decb6dc747dff2217c88732710db892b5053c5c672d221b6c4d13bbcb5372e203596
-  languageName: node
-  linkType: hard
-
 "cli-spinners@npm:^2.5.0":
   version: 2.9.1
   resolution: "cli-spinners@npm:2.9.1"
@@ -4079,6 +3936,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"collapse-white-space@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "collapse-white-space@npm:2.1.0"
+  checksum: 10c0/b2e2800f4ab261e62eb27a1fbe853378296e3a726d6695117ed033e82d61fb6abeae4ffc1465d5454499e237005de9cfc52c9562dc7ca4ac759b9a222ef14453
+  languageName: node
+  linkType: hard
+
 "color-convert@npm:^1.9.0":
   version: 1.9.3
   resolution: "color-convert@npm:1.9.3"
@@ -4164,7 +4028,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commander@npm:^4.0.0":
+"commander@npm:^4.0.0, commander@npm:^4.1.1":
   version: 4.1.1
   resolution: "commander@npm:4.1.1"
   checksum: 10c0/84a76c08fe6cc08c9c93f62ac573d2907d8e79138999312c92d4155bc2325d487d64d13f669b2000c9f8caf70493c1be2dac74fec3c51d5a04f8bc3ae1830bab
@@ -4509,15 +4373,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4, debug@npm:^4.3.5, debug@npm:~4.3.4":
-  version: 4.3.5
-  resolution: "debug@npm:4.3.5"
+"debug@npm:4, debug@npm:^4.0.0, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4, debug@npm:^4.3.5, debug@npm:^4.3.6, debug@npm:~4.3.4":
+  version: 4.3.7
+  resolution: "debug@npm:4.3.7"
   dependencies:
-    ms: "npm:2.1.2"
+    ms: "npm:^2.1.3"
   peerDependenciesMeta:
     supports-color:
       optional: true
-  checksum: 10c0/082c375a2bdc4f4469c99f325ff458adad62a3fc2c482d59923c260cb08152f34e2659f72b3767db8bb2f21ca81a60a42d1019605a412132d7b9f59363a005cc
+  checksum: 10c0/1471db19c3b06d485a622d62f65947a19a23fbd0dd73f7fd3eafb697eec5360cde447fb075919987899b1a2096e85d35d4eb5a4de09a57600ac9cf7e6c8e768b
   languageName: node
   linkType: hard
 
@@ -4648,13 +4512,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"define-lazy-prop@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "define-lazy-prop@npm:2.0.0"
-  checksum: 10c0/db6c63864a9d3b7dc9def55d52764968a5af296de87c1b2cc71d8be8142e445208071953649e0386a8cc37cfcf9a2067a47207f1eb9ff250c2a269658fdae422
-  languageName: node
-  linkType: hard
-
 "define-properties@npm:^1.1.3, define-properties@npm:^1.2.0, define-properties@npm:^1.2.1":
   version: 1.2.1
   resolution: "define-properties@npm:1.2.1"
@@ -4767,6 +4624,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"diff-match-patch-es@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "diff-match-patch-es@npm:0.1.0"
+  checksum: 10c0/c456d10662506f676489c1572af2a48ad52d015a856b74bf16594d39f11c9a352cd763fd66b5a5952c86a18818f4b7de28d55876e7ffd47f5d71282e3a5056a2
+  languageName: node
+  linkType: hard
+
 "diff-sequences@npm:^29.6.3":
   version: 29.6.3
   resolution: "diff-sequences@npm:29.6.3"
@@ -4900,27 +4764,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dotenv-expand@npm:~10.0.0":
-  version: 10.0.0
-  resolution: "dotenv-expand@npm:10.0.0"
-  checksum: 10c0/298f5018e29cfdcb0b5f463ba8e8627749103fbcf6cf81c561119115754ed582deee37b49dfc7253028aaba875ab7aea5fa90e5dac88e511d009ab0e6677924e
-  languageName: node
-  linkType: hard
-
-"dotenv@npm:~16.3.1":
-  version: 16.3.1
-  resolution: "dotenv@npm:16.3.1"
-  checksum: 10c0/b95ff1bbe624ead85a3cd70dbd827e8e06d5f05f716f2d0cbc476532d54c7c9469c3bc4dd93ea519f6ad711cb522c00ac9a62b6eb340d5affae8008facc3fbd7
-  languageName: node
-  linkType: hard
-
-"duplexer@npm:^0.1.1":
-  version: 0.1.2
-  resolution: "duplexer@npm:0.1.2"
-  checksum: 10c0/c57bcd4bdf7e623abab2df43a7b5b23d18152154529d166c1e0da6bee341d84c432d157d7e97b32fecb1bf3a8b8857dd85ed81a915789f550637ed25b8e64fc2
-  languageName: node
-  linkType: hard
-
 "duplexify@npm:^3.5.0, duplexify@npm:^3.6.0":
   version: 3.7.1
   resolution: "duplexify@npm:3.7.1"
@@ -4952,6 +4795,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"easy-table@npm:1.2.0":
+  version: 1.2.0
+  resolution: "easy-table@npm:1.2.0"
+  dependencies:
+    ansi-regex: "npm:^5.0.1"
+    wcwidth: "npm:^1.0.1"
+  dependenciesMeta:
+    wcwidth:
+      optional: true
+  checksum: 10c0/2d37937cd608586ba02e1ec479f90ccec581d366b3b0d1bb26b99ee6005f8d724e32a07a873759893461ca45b99e2d08c30326529d967ce9eedc1e9b68d4aa63
+  languageName: node
+  linkType: hard
+
 "ecc-jsbn@npm:~0.1.1":
   version: 0.1.2
   resolution: "ecc-jsbn@npm:0.1.2"
@@ -5014,7 +4870,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ejs@npm:^3.1.10, ejs@npm:^3.1.7":
+"ejs@npm:^3.1.10":
   version: 3.1.10
   resolution: "ejs@npm:3.1.10"
   dependencies:
@@ -5071,12 +4927,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"enquirer@npm:~2.3.6":
-  version: 2.3.6
-  resolution: "enquirer@npm:2.3.6"
+"enhanced-resolve@npm:^5.17.1":
+  version: 5.17.1
+  resolution: "enhanced-resolve@npm:5.17.1"
   dependencies:
-    ansi-colors: "npm:^4.1.1"
-  checksum: 10c0/8e070e052c2c64326a2803db9084d21c8aaa8c688327f133bf65c4a712586beb126fd98c8a01cfb0433e82a4bd3b6262705c55a63e0f7fb91d06b9cedbde9a11
+    graceful-fs: "npm:^4.2.4"
+    tapable: "npm:^2.2.0"
+  checksum: 10c0/81a0515675eca17efdba2cf5bad87abc91a528fc1191aad50e275e74f045b41506167d420099022da7181c8d787170ea41e4a11a0b10b7a16f6237daecb15370
   languageName: node
   linkType: hard
 
@@ -5272,6 +5129,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"es-toolkit@npm:^1.22.0":
+  version: 1.22.0
+  resolution: "es-toolkit@npm:1.22.0"
+  checksum: 10c0/a167789f727437d435071af74e22c0c4a5a557aa61a5013a1656d24b1c8636c88d6b74f12ad0c3966b74d3f56e432d8e8d1989e5c10c10fda8eba5752783af18
+  languageName: node
+  linkType: hard
+
 "esbuild-plugin-alias@npm:^0.2.1":
   version: 0.2.1
   resolution: "esbuild-plugin-alias@npm:0.2.1"
@@ -5279,34 +5143,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esbuild@npm:^0.23.0":
-  version: 0.23.0
-  resolution: "esbuild@npm:0.23.0"
-  dependencies:
-    "@esbuild/aix-ppc64": "npm:0.23.0"
-    "@esbuild/android-arm": "npm:0.23.0"
-    "@esbuild/android-arm64": "npm:0.23.0"
-    "@esbuild/android-x64": "npm:0.23.0"
-    "@esbuild/darwin-arm64": "npm:0.23.0"
-    "@esbuild/darwin-x64": "npm:0.23.0"
-    "@esbuild/freebsd-arm64": "npm:0.23.0"
-    "@esbuild/freebsd-x64": "npm:0.23.0"
-    "@esbuild/linux-arm": "npm:0.23.0"
-    "@esbuild/linux-arm64": "npm:0.23.0"
-    "@esbuild/linux-ia32": "npm:0.23.0"
-    "@esbuild/linux-loong64": "npm:0.23.0"
-    "@esbuild/linux-mips64el": "npm:0.23.0"
-    "@esbuild/linux-ppc64": "npm:0.23.0"
-    "@esbuild/linux-riscv64": "npm:0.23.0"
-    "@esbuild/linux-s390x": "npm:0.23.0"
-    "@esbuild/linux-x64": "npm:0.23.0"
-    "@esbuild/netbsd-x64": "npm:0.23.0"
-    "@esbuild/openbsd-arm64": "npm:0.23.0"
-    "@esbuild/openbsd-x64": "npm:0.23.0"
-    "@esbuild/sunos-x64": "npm:0.23.0"
-    "@esbuild/win32-arm64": "npm:0.23.0"
-    "@esbuild/win32-ia32": "npm:0.23.0"
-    "@esbuild/win32-x64": "npm:0.23.0"
+"esbuild@npm:^0.24.0":
+  version: 0.24.0
+  resolution: "esbuild@npm:0.24.0"
+  dependencies:
+    "@esbuild/aix-ppc64": "npm:0.24.0"
+    "@esbuild/android-arm": "npm:0.24.0"
+    "@esbuild/android-arm64": "npm:0.24.0"
+    "@esbuild/android-x64": "npm:0.24.0"
+    "@esbuild/darwin-arm64": "npm:0.24.0"
+    "@esbuild/darwin-x64": "npm:0.24.0"
+    "@esbuild/freebsd-arm64": "npm:0.24.0"
+    "@esbuild/freebsd-x64": "npm:0.24.0"
+    "@esbuild/linux-arm": "npm:0.24.0"
+    "@esbuild/linux-arm64": "npm:0.24.0"
+    "@esbuild/linux-ia32": "npm:0.24.0"
+    "@esbuild/linux-loong64": "npm:0.24.0"
+    "@esbuild/linux-mips64el": "npm:0.24.0"
+    "@esbuild/linux-ppc64": "npm:0.24.0"
+    "@esbuild/linux-riscv64": "npm:0.24.0"
+    "@esbuild/linux-s390x": "npm:0.24.0"
+    "@esbuild/linux-x64": "npm:0.24.0"
+    "@esbuild/netbsd-x64": "npm:0.24.0"
+    "@esbuild/openbsd-arm64": "npm:0.24.0"
+    "@esbuild/openbsd-x64": "npm:0.24.0"
+    "@esbuild/sunos-x64": "npm:0.24.0"
+    "@esbuild/win32-arm64": "npm:0.24.0"
+    "@esbuild/win32-ia32": "npm:0.24.0"
+    "@esbuild/win32-x64": "npm:0.24.0"
   dependenciesMeta:
     "@esbuild/aix-ppc64":
       optional: true
@@ -5358,7 +5222,7 @@ __metadata:
       optional: true
   bin:
     esbuild: bin/esbuild
-  checksum: 10c0/08c148c067795165798c0467ce02d2d1ecedc096989bded5f0d795c61a1fcbec6c14d0a3c9f4ad6185cc29ec52087acaa335ed6d98be6ad57f7fa4264626bde0
+  checksum: 10c0/9f1aadd8d64f3bff422ae78387e66e51a5e09de6935a6f987b6e4e189ed00fdc2d1bc03d2e33633b094008529c8b6e06c7ad1a9782fb09fec223bf95998c0683
   languageName: node
   linkType: hard
 
@@ -5473,6 +5337,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-plugin-depend@npm:^0.11.0":
+  version: 0.11.0
+  resolution: "eslint-plugin-depend@npm:0.11.0"
+  dependencies:
+    fd-package-json: "npm:^1.2.0"
+    module-replacements: "npm:^2.1.0"
+    semver: "npm:^7.6.3"
+  checksum: 10c0/64baf4d4f5d406efa1f13bda723ff0eb5fe4cee0ae8c3679fcdfccb4d7ba3a9472416fa3c54d75f1bde3e0123e55a85774662484a5b0355812f21a8968ee784a
+  languageName: node
+  linkType: hard
+
 "eslint-plugin-eslint-comments@npm:^3.2.0":
   version: 3.2.0
   resolution: "eslint-plugin-eslint-comments@npm:3.2.0"
@@ -5919,7 +5794,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"execa@npm:^8.0.1, execa@npm:~8.0.1":
+"execa@npm:~8.0.1":
   version: 8.0.1
   resolution: "execa@npm:8.0.1"
   dependencies:
@@ -5972,7 +5847,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"express@npm:4.19.2, express@npm:^4.19.2":
+"express@npm:4.19.2":
   version: 4.19.2
   resolution: "express@npm:4.19.2"
   dependencies:
@@ -6138,6 +6013,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fd-package-json@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "fd-package-json@npm:1.2.0"
+  dependencies:
+    walk-up-path: "npm:^3.0.1"
+  checksum: 10c0/712a78a12bd8ec8482867b26bbcb2ff1dca9b096a416150c138e1512f1879c6d23dfb41b03b8e9226afc1e58a35df4738e9f9ae57032ff1dbbae75acfb70343b
+  languageName: node
+  linkType: hard
+
 "fd-slicer@npm:~1.1.0":
   version: 1.1.0
   resolution: "fd-slicer@npm:1.1.0"
@@ -6147,15 +6031,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"figures@npm:3.2.0":
-  version: 3.2.0
-  resolution: "figures@npm:3.2.0"
-  dependencies:
-    escape-string-regexp: "npm:^1.0.5"
-  checksum: 10c0/9c421646ede432829a50bc4e55c7a4eb4bcb7cc07b5bab2f471ef1ab9a344595bbebb6c5c21470093fbb730cd81bbca119624c40473a125293f656f49cb47629
-  languageName: node
-  linkType: hard
-
 "file-entry-cache@npm:^6.0.1":
   version: 6.0.1
   resolution: "file-entry-cache@npm:6.0.1"
@@ -6259,15 +6134,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"flat@npm:^5.0.2":
-  version: 5.0.2
-  resolution: "flat@npm:5.0.2"
-  bin:
-    flat: cli.js
-  checksum: 10c0/f178b13482f0cd80c7fede05f4d10585b1f2fdebf26e12edc138e32d3150c6ea6482b7f12813a1091143bad52bb6d3596bca51a162257a21163c0ff438baa5fe
-  languageName: node
-  linkType: hard
-
 "flatted@npm:^3.2.9":
   version: 3.2.9
   resolution: "flatted@npm:3.2.9"
@@ -6361,7 +6227,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-extra@npm:^11.1.0, fs-extra@npm:^11.2.0":
+"fs-extra@npm:^11.2.0":
   version: 11.2.0
   resolution: "fs-extra@npm:11.2.0"
   dependencies:
@@ -6853,7 +6719,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"graceful-fs@npm:^4.1.10, graceful-fs@npm:^4.1.3, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9":
+"graceful-fs@npm:^4.1.10, graceful-fs@npm:^4.1.3, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9":
   version: 4.2.11
   resolution: "graceful-fs@npm:4.2.11"
   checksum: 10c0/386d011a553e02bc594ac2ca0bd6d9e4c22d7fa8cfbfc448a6d148c59ea881b092db9dbe3547ae4b88e55f1b01f7c4a2ecc53b310c042793e63aa44cf6c257f2
@@ -7299,10 +7165,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ignore@npm:^5.0.0, ignore@npm:^5.0.4, ignore@npm:^5.0.5, ignore@npm:^5.1.1, ignore@npm:^5.2.0, ignore@npm:^5.2.4, ignore@npm:^5.3.1":
-  version: 5.3.1
-  resolution: "ignore@npm:5.3.1"
-  checksum: 10c0/703f7f45ffb2a27fb2c5a8db0c32e7dee66b33a225d28e8db4e1be6474795f606686a6e3bcc50e1aa12f2042db4c9d4a7d60af3250511de74620fbed052ea4cd
+"ignore@npm:^5.0.0, ignore@npm:^5.0.5, ignore@npm:^5.1.1, ignore@npm:^5.1.8, ignore@npm:^5.2.0, ignore@npm:^5.2.4, ignore@npm:^5.3.1":
+  version: 5.3.2
+  resolution: "ignore@npm:5.3.2"
+  checksum: 10c0/f9f652c957983634ded1e7f02da3b559a0d4cc210fca3792cb67f1b153623c9c42efdc1c4121af171e295444459fc4a9201101fb041b1104a3c000bccb188337
   languageName: node
   linkType: hard
 
@@ -7409,6 +7275,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-alphabetical@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "is-alphabetical@npm:2.0.1"
+  checksum: 10c0/932367456f17237533fd1fc9fe179df77957271020b83ea31da50e5cc472d35ef6b5fb8147453274ffd251134472ce24eb6f8d8398d96dee98237cdb81a6c9a7
+  languageName: node
+  linkType: hard
+
+"is-alphanumerical@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "is-alphanumerical@npm:2.0.1"
+  dependencies:
+    is-alphabetical: "npm:^2.0.0"
+    is-decimal: "npm:^2.0.0"
+  checksum: 10c0/4b35c42b18e40d41378293f82a3ecd9de77049b476f748db5697c297f686e1e05b072a6aaae2d16f54d2a57f85b00cbbe755c75f6d583d1c77d6657bd0feb5a2
+  languageName: node
+  linkType: hard
+
 "is-arguments@npm:^1.0.4":
   version: 1.1.1
   resolution: "is-arguments@npm:1.1.1"
@@ -7530,6 +7413,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-decimal@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "is-decimal@npm:2.0.1"
+  checksum: 10c0/8085dd66f7d82f9de818fba48b9e9c0429cb4291824e6c5f2622e96b9680b54a07a624cfc663b24148b8e853c62a1c987cfe8b0b5a13f5156991afaf6736e334
+  languageName: node
+  linkType: hard
+
 "is-deflate@npm:^1.0.0":
   version: 1.0.0
   resolution: "is-deflate@npm:1.0.0"
@@ -7547,15 +7437,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-docker@npm:^2.0.0, is-docker@npm:^2.1.1":
-  version: 2.2.1
-  resolution: "is-docker@npm:2.2.1"
-  bin:
-    is-docker: cli.js
-  checksum: 10c0/e828365958d155f90c409cdbe958f64051d99e8aedc2c8c4cd7c89dcf35329daed42f7b99346f7828df013e27deb8f721cf9408ba878c76eb9e8290235fbcdcc
-  languageName: node
-  linkType: hard
-
 "is-empty@npm:^1.0.0":
   version: 1.2.0
   resolution: "is-empty@npm:1.2.0"
@@ -7634,6 +7515,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-hexadecimal@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "is-hexadecimal@npm:2.0.1"
+  checksum: 10c0/3eb60fe2f1e2bbc760b927dcad4d51eaa0c60138cf7fc671803f66353ad90c301605b502c7ea4c6bb0548e1c7e79dfd37b73b632652e3b76030bba603a7e9626
+  languageName: node
+  linkType: hard
+
 "is-interactive@npm:^1.0.0":
   version: 1.0.0
   resolution: "is-interactive@npm:1.0.0"
@@ -7843,15 +7731,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-wsl@npm:^2.2.0":
-  version: 2.2.0
-  resolution: "is-wsl@npm:2.2.0"
-  dependencies:
-    is-docker: "npm:^2.0.0"
-  checksum: 10c0/a6fa2d370d21be487c0165c7a440d567274fbba1a817f2f0bfa41cc5e3af25041d84267baa22df66696956038a43973e72fca117918c91431920bdef490fa25e
-  languageName: node
-  linkType: hard
-
 "is@npm:^3.3.0":
   version: 3.3.0
   resolution: "is@npm:3.3.0"
@@ -7980,7 +7859,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-diff@npm:^29.4.1, jest-diff@npm:^29.7.0":
+"jest-diff@npm:^29.7.0":
   version: 29.7.0
   resolution: "jest-diff@npm:29.7.0"
   dependencies:
@@ -8085,7 +7964,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"js-yaml@npm:3.14.1, js-yaml@npm:^3.10.0":
+"js-yaml@npm:3.14.1":
   version: 3.14.1
   resolution: "js-yaml@npm:3.14.1"
   dependencies:
@@ -8200,7 +8079,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json5@npm:^2.0.0, json5@npm:^2.2.2, json5@npm:^2.2.3":
+"json5@npm:^2.0.0, json5@npm:^2.2.3":
   version: 2.2.3
   resolution: "json5@npm:2.2.3"
   bin:
@@ -8209,7 +8088,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsonc-parser@npm:3.2.0, jsonc-parser@npm:^3.0.0":
+"jsonc-parser@npm:^3.0.0":
   version: 3.2.0
   resolution: "jsonc-parser@npm:3.2.0"
   checksum: 10c0/5a12d4d04dad381852476872a29dcee03a57439574e4181d91dca71904fcdcc5e8e4706c0a68a2c61ad9810e1e1c5806b5100d52d3e727b78f5cdc595401045b
@@ -8368,6 +8247,36 @@ __metadata:
   languageName: node
   linkType: hard
 
+"knip@npm:^5.30.1":
+  version: 5.30.1
+  resolution: "knip@npm:5.30.1"
+  dependencies:
+    "@nodelib/fs.walk": "npm:1.2.8"
+    "@snyk/github-codeowners": "npm:1.1.0"
+    easy-table: "npm:1.2.0"
+    enhanced-resolve: "npm:^5.17.1"
+    fast-glob: "npm:^3.3.2"
+    jiti: "npm:^1.21.6"
+    js-yaml: "npm:^4.1.0"
+    minimist: "npm:^1.2.8"
+    picocolors: "npm:^1.0.0"
+    picomatch: "npm:^4.0.1"
+    pretty-ms: "npm:^9.0.0"
+    smol-toml: "npm:^1.1.4"
+    strip-json-comments: "npm:5.0.1"
+    summary: "npm:2.1.0"
+    zod: "npm:^3.22.4"
+    zod-validation-error: "npm:^3.0.3"
+  peerDependencies:
+    "@types/node": ">=18"
+    typescript: ">=5.0.4"
+  bin:
+    knip: bin/knip.js
+    knip-bun: bin/knip-bun.js
+  checksum: 10c0/1c470266d7967dad0f2fb1b1f6c8a797bc7bea6c1f0021c52dce40e067ae87217eb17ff11a4164e3a5244bf3d0672f9e8678e4c3898260c48b9c020132ebb29a
+  languageName: node
+  linkType: hard
+
 "language-subtag-registry@npm:^0.3.20":
   version: 0.3.22
   resolution: "language-subtag-registry@npm:0.3.22"
@@ -8422,7 +8331,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lines-and-columns@npm:^2.0.3, lines-and-columns@npm:~2.0.3":
+"lines-and-columns@npm:^2.0.3":
   version: 2.0.4
   resolution: "lines-and-columns@npm:2.0.4"
   checksum: 10c0/4db28bf065cd7ad897c0700f22d3d0d7c5ed6777e138861c601c496d545340df3fc19e18bd04ff8d95a246a245eb55685b82ca2f8c2ca53a008e9c5316250379
@@ -8619,7 +8528,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"log-symbols@npm:^4.0.0, log-symbols@npm:^4.1.0":
+"log-symbols@npm:^4.1.0":
   version: 4.1.0
   resolution: "log-symbols@npm:4.1.0"
   dependencies:
@@ -8721,12 +8630,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"magic-string@npm:^0.30.10":
-  version: 0.30.10
-  resolution: "magic-string@npm:0.30.10"
+"magic-string@npm:^0.30.10, magic-string@npm:^0.30.11":
+  version: 0.30.12
+  resolution: "magic-string@npm:0.30.12"
   dependencies:
-    "@jridgewell/sourcemap-codec": "npm:^1.4.15"
-  checksum: 10c0/aa9ca17eae571a19bce92c8221193b6f93ee8511abb10f085e55ffd398db8e4c089a208d9eac559deee96a08b7b24d636ea4ab92f09c6cf42a7d1af51f7fd62b
+    "@jridgewell/sourcemap-codec": "npm:^1.5.0"
+  checksum: 10c0/469f457d18af37dfcca8617086ea8a65bcd8b60ba8a1182cb024ce43e470ace3c9d1cb6bee58d3b311768fb16bc27bd50bdeebcaa63dadd0fd46cac4d2e11d5f
   languageName: node
   linkType: hard
 
@@ -8835,6 +8744,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-comment-marker@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "mdast-comment-marker@npm:3.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    mdast-util-mdx-expression: "npm:^2.0.0"
+  checksum: 10c0/157a893e07d5c6156085c4d5a61d62c0ce030c0dc4734bac91a04895553485d4bc2980030f678268038a23c371843c5252769459cf53d704714492ceaec949b6
+  languageName: node
+  linkType: hard
+
+"mdast-util-directive@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "mdast-util-directive@npm:3.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    "@types/unist": "npm:^3.0.0"
+    devlop: "npm:^1.0.0"
+    mdast-util-from-markdown: "npm:^2.0.0"
+    mdast-util-to-markdown: "npm:^2.0.0"
+    parse-entities: "npm:^4.0.0"
+    stringify-entities: "npm:^4.0.0"
+    unist-util-visit-parents: "npm:^6.0.0"
+  checksum: 10c0/4a71b27f5f0c4ead5293a12d4118d4d832951ac0efdeba4af2dd78f5679f9cabee80feb3619f219a33674c12df3780def1bd3150d7298aaf0ef734f0dfbab999
+  languageName: node
+  linkType: hard
+
 "mdast-util-from-markdown@npm:^1.0.0":
   version: 1.3.1
   resolution: "mdast-util-from-markdown@npm:1.3.1"
@@ -8897,6 +8832,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mdast-util-mdx-expression@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "mdast-util-mdx-expression@npm:2.0.1"
+  dependencies:
+    "@types/estree-jsx": "npm:^1.0.0"
+    "@types/hast": "npm:^3.0.0"
+    "@types/mdast": "npm:^4.0.0"
+    devlop: "npm:^1.0.0"
+    mdast-util-from-markdown: "npm:^2.0.0"
+    mdast-util-to-markdown: "npm:^2.0.0"
+  checksum: 10c0/9a1e57940f66431f10312fa239096efa7627f375e7933b5d3162c0b5c1712a72ac87447aff2b6838d2bbd5c1311b188718cc90b33b67dc67a88550e0a6ef6183
+  languageName: node
+  linkType: hard
+
 "mdast-util-phrasing@npm:^3.0.0":
   version: 3.0.1
   resolution: "mdast-util-phrasing@npm:3.0.1"
@@ -9593,6 +9542,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"minimatch@npm:^10.0.1":
+  version: 10.0.1
+  resolution: "minimatch@npm:10.0.1"
+  dependencies:
+    brace-expansion: "npm:^2.0.1"
+  checksum: 10c0/e6c29a81fe83e1877ad51348306be2e8aeca18c88fdee7a99df44322314279e15799e41d7cb274e4e8bb0b451a3bc622d6182e157dfa1717d6cda75e9cd8cd5d
+  languageName: node
+  linkType: hard
+
 "minimatch@npm:^5.0.1":
   version: 5.1.6
   resolution: "minimatch@npm:5.1.6"
@@ -9737,6 +9695,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"module-replacements@npm:^2.1.0":
+  version: 2.5.0
+  resolution: "module-replacements@npm:2.5.0"
+  checksum: 10c0/7fcbcb19151778a2f2fa70b7bffb134bb8922b2306e2a0d7b4a863467a9d6d9d5fed537763c43272e22b69dbddaf1610746b42a68b4663aa225e85f9ae9b03c8
+  languageName: node
+  linkType: hard
+
 "mount-point@npm:^3.0.0":
   version: 3.0.0
   resolution: "mount-point@npm:3.0.0"
@@ -9778,7 +9743,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ms@npm:2.1.3, ms@npm:^2.0.0, ms@npm:^2.1.1":
+"ms@npm:2.1.3, ms@npm:^2.0.0, ms@npm:^2.1.1, ms@npm:^2.1.3":
   version: 2.1.3
   resolution: "ms@npm:2.1.3"
   checksum: 10c0/d924b57e7312b3b63ad21fc5b3dc0af5e78d61a1fc7cfb5457edaf26326bf62be5307cc87ffb6862ef1c2b33b0233cdb5d4f01c4c958cc0d660948b65a287a48
@@ -9943,13 +9908,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-machine-id@npm:1.1.12":
-  version: 1.1.12
-  resolution: "node-machine-id@npm:1.1.12"
-  checksum: 10c0/ab2fea5f75a6f1ce3c76c5e0ae3903b631230e0a99b003d176568fff8ddbdf7b2943be96cd8d220c497ca0f6149411831f8a450601929f326781cb1b59bab7f8
-  languageName: node
-  linkType: hard
-
 "nopt@npm:^6.0.0":
   version: 6.0.0
   resolution: "nopt@npm:6.0.0"
@@ -10046,90 +10004,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nx@npm:18.0.6":
-  version: 18.0.6
-  resolution: "nx@npm:18.0.6"
-  dependencies:
-    "@nrwl/tao": "npm:18.0.6"
-    "@nx/nx-darwin-arm64": "npm:18.0.6"
-    "@nx/nx-darwin-x64": "npm:18.0.6"
-    "@nx/nx-freebsd-x64": "npm:18.0.6"
-    "@nx/nx-linux-arm-gnueabihf": "npm:18.0.6"
-    "@nx/nx-linux-arm64-gnu": "npm:18.0.6"
-    "@nx/nx-linux-arm64-musl": "npm:18.0.6"
-    "@nx/nx-linux-x64-gnu": "npm:18.0.6"
-    "@nx/nx-linux-x64-musl": "npm:18.0.6"
-    "@nx/nx-win32-arm64-msvc": "npm:18.0.6"
-    "@nx/nx-win32-x64-msvc": "npm:18.0.6"
-    "@yarnpkg/lockfile": "npm:^1.1.0"
-    "@yarnpkg/parsers": "npm:3.0.0-rc.46"
-    "@zkochan/js-yaml": "npm:0.0.6"
-    axios: "npm:^1.6.0"
-    chalk: "npm:^4.1.0"
-    cli-cursor: "npm:3.1.0"
-    cli-spinners: "npm:2.6.1"
-    cliui: "npm:^8.0.1"
-    dotenv: "npm:~16.3.1"
-    dotenv-expand: "npm:~10.0.0"
-    enquirer: "npm:~2.3.6"
-    figures: "npm:3.2.0"
-    flat: "npm:^5.0.2"
-    fs-extra: "npm:^11.1.0"
-    ignore: "npm:^5.0.4"
-    jest-diff: "npm:^29.4.1"
-    js-yaml: "npm:4.1.0"
-    jsonc-parser: "npm:3.2.0"
-    lines-and-columns: "npm:~2.0.3"
-    minimatch: "npm:9.0.3"
-    node-machine-id: "npm:1.1.12"
-    npm-run-path: "npm:^4.0.1"
-    open: "npm:^8.4.0"
-    ora: "npm:5.3.0"
-    semver: "npm:^7.5.3"
-    string-width: "npm:^4.2.3"
-    strong-log-transformer: "npm:^2.1.0"
-    tar-stream: "npm:~2.2.0"
-    tmp: "npm:~0.2.1"
-    tsconfig-paths: "npm:^4.1.2"
-    tslib: "npm:^2.3.0"
-    yargs: "npm:^17.6.2"
-    yargs-parser: "npm:21.1.1"
-  peerDependencies:
-    "@swc-node/register": ^1.8.0
-    "@swc/core": ^1.3.85
-  dependenciesMeta:
-    "@nx/nx-darwin-arm64":
-      optional: true
-    "@nx/nx-darwin-x64":
-      optional: true
-    "@nx/nx-freebsd-x64":
-      optional: true
-    "@nx/nx-linux-arm-gnueabihf":
-      optional: true
-    "@nx/nx-linux-arm64-gnu":
-      optional: true
-    "@nx/nx-linux-arm64-musl":
-      optional: true
-    "@nx/nx-linux-x64-gnu":
-      optional: true
-    "@nx/nx-linux-x64-musl":
-      optional: true
-    "@nx/nx-win32-arm64-msvc":
-      optional: true
-    "@nx/nx-win32-x64-msvc":
-      optional: true
-  peerDependenciesMeta:
-    "@swc-node/register":
-      optional: true
-    "@swc/core":
-      optional: true
-  bin:
-    nx: bin/nx.js
-    nx-cloud: bin/nx-cloud.js
-  checksum: 10c0/608ffda300706d8cf067428921a76d62157b20131796c006258d96b493efba7618572c7dfa8cdab4b7dfb47a8adbcacd65fb69d03dc7480d8229236a1f2cc881
-  languageName: node
-  linkType: hard
-
 "object-assign@npm:^4, object-assign@npm:^4.0.1, object-assign@npm:^4.1.1":
   version: 4.1.1
   resolution: "object-assign@npm:4.1.1"
@@ -10277,17 +10151,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"open@npm:^8.4.0":
-  version: 8.4.2
-  resolution: "open@npm:8.4.2"
-  dependencies:
-    define-lazy-prop: "npm:^2.0.0"
-    is-docker: "npm:^2.1.1"
-    is-wsl: "npm:^2.2.0"
-  checksum: 10c0/bb6b3a58401dacdb0aad14360626faf3fb7fba4b77816b373495988b724fb48941cad80c1b65d62bb31a17609b2cd91c41a181602caea597ca80dfbcc27e84c9
-  languageName: node
-  linkType: hard
-
 "opencollective-postinstall@npm:^2.0.2":
   version: 2.0.3
   resolution: "opencollective-postinstall@npm:2.0.3"
@@ -10320,22 +10183,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ora@npm:5.3.0":
-  version: 5.3.0
-  resolution: "ora@npm:5.3.0"
-  dependencies:
-    bl: "npm:^4.0.3"
-    chalk: "npm:^4.1.0"
-    cli-cursor: "npm:^3.1.0"
-    cli-spinners: "npm:^2.5.0"
-    is-interactive: "npm:^1.0.0"
-    log-symbols: "npm:^4.0.0"
-    strip-ansi: "npm:^6.0.0"
-    wcwidth: "npm:^1.0.1"
-  checksum: 10c0/30d5f3218eb75b0a2028c5fb9aa88e83e38a2f1745ab56839abb06c3ba31bae35f768f4e72c4f9e04e2a66be6a898e9312e8cf85c9333e1e3613eabb8c7cdf57
-  languageName: node
-  linkType: hard
-
 "ora@npm:^5.4.1":
   version: 5.4.1
   resolution: "ora@npm:5.4.1"
@@ -10483,6 +10330,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"parse-entities@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "parse-entities@npm:4.0.1"
+  dependencies:
+    "@types/unist": "npm:^2.0.0"
+    character-entities: "npm:^2.0.0"
+    character-entities-legacy: "npm:^3.0.0"
+    character-reference-invalid: "npm:^2.0.0"
+    decode-named-character-reference: "npm:^1.0.0"
+    is-alphanumerical: "npm:^2.0.0"
+    is-decimal: "npm:^2.0.0"
+    is-hexadecimal: "npm:^2.0.0"
+  checksum: 10c0/9dfa3b0dc43a913c2558c4bd625b1abcc2d6c6b38aa5724b141ed988471977248f7ad234eed57e1bc70b694dd15b0d710a04f66c2f7c096e35abd91962b7d926
+  languageName: node
+  linkType: hard
+
 "parse-git-config@npm:^2.0.3":
   version: 2.0.3
   resolution: "parse-git-config@npm:2.0.3"
@@ -10544,6 +10407,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"parse-ms@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "parse-ms@npm:4.0.0"
+  checksum: 10c0/a7900f4f1ebac24cbf5e9708c16fb2fd482517fad353aecd7aefb8c2ba2f85ce017913ccb8925d231770404780df46244ea6fec598b3bde6490882358b4d2d16
+  languageName: node
+  linkType: hard
+
 "parse-passwd@npm:^1.0.0":
   version: 1.0.0
   resolution: "parse-passwd@npm:1.0.0"
@@ -10672,10 +10542,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"picocolors@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "picocolors@npm:1.0.0"
-  checksum: 10c0/20a5b249e331c14479d94ec6817a182fd7a5680debae82705747b2db7ec50009a5f6648d0621c561b0572703f84dbef0858abcbd5856d3c5511426afcb1961f7
+"picocolors@npm:^1.0.0, picocolors@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "picocolors@npm:1.1.0"
+  checksum: 10c0/86946f6032148801ef09c051c6fb13b5cf942eaf147e30ea79edb91dd32d700934edebe782a1078ff859fb2b816792e97ef4dab03d7f0b804f6b01a0df35e023
   languageName: node
   linkType: hard
 
@@ -10686,6 +10556,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"picomatch@npm:^4.0.1":
+  version: 4.0.2
+  resolution: "picomatch@npm:4.0.2"
+  checksum: 10c0/7c51f3ad2bb42c776f49ebf964c644958158be30d0a510efd5a395e8d49cb5acfed5b82c0c5b365523ce18e6ab85013c9ebe574f60305892ec3fa8eee8304ccc
+  languageName: node
+  linkType: hard
+
 "pidtree@npm:~0.6.0":
   version: 0.6.0
   resolution: "pidtree@npm:0.6.0"
@@ -10831,27 +10708,27 @@ __metadata:
   languageName: node
   linkType: hard
 
-"playwright-core@npm:1.46.0":
-  version: 1.46.0
-  resolution: "playwright-core@npm:1.46.0"
+"playwright-core@npm:1.48.1":
+  version: 1.48.1
+  resolution: "playwright-core@npm:1.48.1"
   bin:
     playwright-core: cli.js
-  checksum: 10c0/2d2d163dc22a424a86765b25c5523e932748f38d071f49ac6c41f14c8c10c0874b3854a290057e9988c5e876bb8be8aa52fe40ee8c57b3390b9c01593074e3df
+  checksum: 10c0/2f75532b9b7dfa0e586f5660ac1d8ea729bbdbd28dd2c0711e7cfc1adfe5cf7448d7f15a018ec9851a8f50c0743c3990cb9df23064bed603627baeac4dce3915
   languageName: node
   linkType: hard
 
-"playwright@npm:1.46.0":
-  version: 1.46.0
-  resolution: "playwright@npm:1.46.0"
+"playwright@npm:1.48.1":
+  version: 1.48.1
+  resolution: "playwright@npm:1.48.1"
   dependencies:
     fsevents: "npm:2.3.2"
-    playwright-core: "npm:1.46.0"
+    playwright-core: "npm:1.48.1"
   dependenciesMeta:
     fsevents:
       optional: true
   bin:
     playwright: cli.js
-  checksum: 10c0/fa4192af99908c2c02ae20880e27f51efa6694348c2496d1c2818908eb394c4b21947edd0c5ce2a83f471f5399ac3f0cee8a7be8a35cd80d32d32875184962c7
+  checksum: 10c0/96280ae656226e52015c0c69c4c19e9f594c19353a79012a19bd7b7175d7b409c1aed289a629df49ef897a57ccd24668ad15b86c283db10f76212a4db90a94ac
   languageName: node
   linkType: hard
 
@@ -10871,6 +10748,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"polka@npm:^1.0.0-next.28":
+  version: 1.0.0-next.28
+  resolution: "polka@npm:1.0.0-next.28"
+  dependencies:
+    "@polka/url": "npm:^1.0.0-next.21"
+    trouter: "npm:^4.0.0"
+  checksum: 10c0/206bab3eb1c3c44c2fba9704d998b144ec36c4852b0b97192a1fd3953f215b739e2286852492c13dcc9faecea0f7825a76356d6eef7e02afd6a800d1dbb84ead
+  languageName: node
+  linkType: hard
+
 "portfinder@npm:^1.0.28":
   version: 1.0.32
   resolution: "portfinder@npm:1.0.32"
@@ -11069,6 +10956,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pretty-ms@npm:^9.0.0":
+  version: 9.1.0
+  resolution: "pretty-ms@npm:9.1.0"
+  dependencies:
+    parse-ms: "npm:^4.0.0"
+  checksum: 10c0/fd111aad8800a04dfd654e6016da69bdaa6fc6a4c280f8e727cffd8b5960558e94942f1a94d4aa6e4d179561a0fbb0366a9ebe0ccefbbb0f8ff853b129cdefb9
+  languageName: node
+  linkType: hard
+
 "prettyjson@npm:^1.2.1":
   version: 1.2.5
   resolution: "prettyjson@npm:1.2.5"
@@ -11521,6 +11417,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"regexparam@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "regexparam@npm:3.0.0"
+  checksum: 10c0/a6430d7b97d5a7d5518f37a850b6b73aab479029d02f46af4fa0e8e4a1d7aad05b7a0d2d10c86ded21a14d5f0fa4c68525f873a5fca2efeefcccd93c36627459
+  languageName: node
+  linkType: hard
+
 "remark-cli@npm:^12.0.0, remark-cli@npm:^12.0.1":
   version: 12.0.1
   resolution: "remark-cli@npm:12.0.1"
@@ -11546,6 +11449,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remark-lint-final-newline@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "remark-lint-final-newline@npm:3.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    devlop: "npm:^1.0.0"
+    unified-lint-rule: "npm:^3.0.0"
+    vfile-location: "npm:^5.0.0"
+  checksum: 10c0/cdb9d81bec378ad4eed0fba6cb5a550089a4d2ef08f4d96d016bcfd794c1e401dd2ef72a0878155e68a5eacf61f5bb4c7e851badc3b024bdb99bdb5e5d774760
+  languageName: node
+  linkType: hard
+
 "remark-lint-hard-break-spaces@npm:^3.0.0":
   version: 3.1.2
   resolution: "remark-lint-hard-break-spaces@npm:3.1.2"
@@ -11560,6 +11475,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remark-lint-hard-break-spaces@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "remark-lint-hard-break-spaces@npm:4.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    unified-lint-rule: "npm:^3.0.0"
+    unist-util-position: "npm:^5.0.0"
+    unist-util-visit: "npm:^5.0.0"
+  checksum: 10c0/7e29c3dfdec634db1e072a3f5ad4c1db5adaac646e0230ed6305084119a8adbacd4679f38a204052b12f9c07a3b6440651ed4a979d2ddfb3605cc5660d0a19d9
+  languageName: node
+  linkType: hard
+
 "remark-lint-list-item-bullet-indent@npm:^4.0.0":
   version: 4.1.2
   resolution: "remark-lint-list-item-bullet-indent@npm:4.1.2"
@@ -11573,6 +11500,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remark-lint-list-item-bullet-indent@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "remark-lint-list-item-bullet-indent@npm:5.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    pluralize: "npm:^8.0.0"
+    unified-lint-rule: "npm:^3.0.0"
+    unist-util-position: "npm:^5.0.0"
+  checksum: 10c0/a59021d40cbeacbd6fe3e041e488b7cde027fd81c3b1447e0d910b6ff9c903c01748659b5ad8a4d8be341f263814df0cbdfd288fce0ff5a1266c634ad4624d46
+  languageName: node
+  linkType: hard
+
 "remark-lint-list-item-indent@npm:^3.0.0":
   version: 3.1.2
   resolution: "remark-lint-list-item-indent@npm:3.1.2"
@@ -11588,6 +11527,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remark-lint-list-item-indent@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "remark-lint-list-item-indent@npm:4.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    mdast-util-phrasing: "npm:^4.0.0"
+    pluralize: "npm:^8.0.0"
+    unified-lint-rule: "npm:^3.0.0"
+    unist-util-position: "npm:^5.0.0"
+    unist-util-visit-parents: "npm:^6.0.0"
+  checksum: 10c0/42658478fced511b503a17f4fa17bab17d82d3213ea7ca875c6a0c777f3c08e029a04149186295e494b131cdf222bd8db6c4f03a0dfcd4422c78edb1153ce9dc
+  languageName: node
+  linkType: hard
+
 "remark-lint-no-blockquote-without-marker@npm:^5.0.0":
   version: 5.1.2
   resolution: "remark-lint-no-blockquote-without-marker@npm:5.1.2"
@@ -11603,6 +11556,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remark-lint-no-blockquote-without-marker@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "remark-lint-no-blockquote-without-marker@npm:6.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    devlop: "npm:^1.0.0"
+    mdast-util-directive: "npm:^3.0.0"
+    mdast-util-phrasing: "npm:^4.0.0"
+    pluralize: "npm:^8.0.0"
+    unified-lint-rule: "npm:^3.0.0"
+    unist-util-position: "npm:^5.0.0"
+    unist-util-visit-parents: "npm:^6.0.0"
+    vfile-location: "npm:^5.0.0"
+  checksum: 10c0/b1b8383e1faac73e1f647484e86d990c68388e7e156f78fad5650ab21581c33f38001d7332a1f088290cdc0e2ba267b63c178d6b7ce7a3636474aba4d7839ce7
+  languageName: node
+  linkType: hard
+
 "remark-lint-no-duplicate-definitions@npm:^3.0.0":
   version: 3.1.2
   resolution: "remark-lint-no-duplicate-definitions@npm:3.1.2"
@@ -11618,6 +11588,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remark-lint-no-duplicate-definitions@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "remark-lint-no-duplicate-definitions@npm:4.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    devlop: "npm:^1.0.0"
+    mdast-util-phrasing: "npm:^4.0.0"
+    unified-lint-rule: "npm:^3.0.0"
+    unist-util-visit-parents: "npm:^6.0.0"
+    vfile-message: "npm:^4.0.0"
+  checksum: 10c0/1307f14ef337b843cb4e4069cb4b6744c5ad8395d7e692f98e379a99f32cda5065a9d4b575808ed27f614950401c725d10878f962a7c0ca290f45c1b60b0345e
+  languageName: node
+  linkType: hard
+
 "remark-lint-no-heading-content-indent@npm:^4.0.0":
   version: 4.1.2
   resolution: "remark-lint-no-heading-content-indent@npm:4.1.2"
@@ -11634,6 +11618,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remark-lint-no-heading-content-indent@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "remark-lint-no-heading-content-indent@npm:5.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    mdast-util-phrasing: "npm:^4.0.0"
+    pluralize: "npm:^8.0.0"
+    unified-lint-rule: "npm:^3.0.0"
+    unist-util-position: "npm:^5.0.0"
+    unist-util-visit-parents: "npm:^6.0.0"
+  checksum: 10c0/74b1cc130e3884719d8f6eb11b4a42d3c750721884b2eb0eeb80ad2150b6e493aa2d0fa69f632243405112425f072b339d413c560202244d0553c19799d1cb40
+  languageName: node
+  linkType: hard
+
 "remark-lint-no-inline-padding@npm:^4.0.0":
   version: 4.1.2
   resolution: "remark-lint-no-inline-padding@npm:4.1.2"
@@ -11663,6 +11661,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remark-lint-no-literal-urls@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "remark-lint-no-literal-urls@npm:4.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    mdast-util-to-string: "npm:^4.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    unified-lint-rule: "npm:^3.0.0"
+    unist-util-position: "npm:^5.0.0"
+    unist-util-visit-parents: "npm:^6.0.0"
+  checksum: 10c0/bad37ed3052abf671fd93c3e79f2502536a75f8fe3e9e161811deb8ceac36066dd536dd58d9baf597fcd76922cd4bcce7f15381318a03bb01d7ec5db03231f0f
+  languageName: node
+  linkType: hard
+
 "remark-lint-no-shortcut-reference-image@npm:^3.0.0":
   version: 3.1.2
   resolution: "remark-lint-no-shortcut-reference-image@npm:3.1.2"
@@ -11676,6 +11688,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remark-lint-no-shortcut-reference-image@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "remark-lint-no-shortcut-reference-image@npm:4.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    unified-lint-rule: "npm:^3.0.0"
+    unist-util-visit-parents: "npm:^6.0.0"
+  checksum: 10c0/3ca7b835a06966b10edf6dbe5b08156120fa6d054942cbbd5a823dc2a94e70e1fda9abadebefe24fcbd2324f1d2eefe8aa9ec741f05b865a34c2a67aef401a10
+  languageName: node
+  linkType: hard
+
 "remark-lint-no-shortcut-reference-link@npm:^3.0.0":
   version: 3.1.2
   resolution: "remark-lint-no-shortcut-reference-link@npm:3.1.2"
@@ -11689,6 +11712,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remark-lint-no-shortcut-reference-link@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "remark-lint-no-shortcut-reference-link@npm:4.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    unified-lint-rule: "npm:^3.0.0"
+    unist-util-visit-parents: "npm:^6.0.0"
+  checksum: 10c0/e29d044ef92723b77987f7d9666c27455531cc99a5eb260a9640c52252599af1acce80bafd9c5e3bfdae93aa02cefcc7524143a31fafdf5c1521424277b2f55f
+  languageName: node
+  linkType: hard
+
 "remark-lint-no-undefined-references@npm:^4.0.0":
   version: 4.2.1
   resolution: "remark-lint-no-undefined-references@npm:4.2.1"
@@ -11705,6 +11739,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remark-lint-no-undefined-references@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "remark-lint-no-undefined-references@npm:5.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    collapse-white-space: "npm:^2.0.0"
+    devlop: "npm:^1.0.0"
+    micromark-util-normalize-identifier: "npm:^2.0.0"
+    unified-lint-rule: "npm:^3.0.0"
+    unist-util-position: "npm:^5.0.0"
+    unist-util-visit-parents: "npm:^6.0.0"
+    vfile-location: "npm:^5.0.0"
+  checksum: 10c0/74423a32ed68926ada9826a91201c86af3d2aaf2ab8349c87262b553f947a78b3dd4a961b1120ea41c3a721e93380fe81438a11a03748c0445dcb3c8b431d182
+  languageName: node
+  linkType: hard
+
 "remark-lint-no-unused-definitions@npm:^3.0.0":
   version: 3.1.2
   resolution: "remark-lint-no-unused-definitions@npm:3.1.2"
@@ -11718,6 +11768,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remark-lint-no-unused-definitions@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "remark-lint-no-unused-definitions@npm:4.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    devlop: "npm:^1.0.0"
+    unified-lint-rule: "npm:^3.0.0"
+    unist-util-visit: "npm:^5.0.0"
+  checksum: 10c0/bc00d51a3006175ffbeaeacb84fef3045fc3cac07ca934f54380cf5858c4cf4202248c8ed7bb199555de7ccc571732a6020839f60e67d9db6eb3c832be0ba7bb
+  languageName: node
+  linkType: hard
+
 "remark-lint-ordered-list-marker-style@npm:^3.0.0":
   version: 3.1.2
   resolution: "remark-lint-ordered-list-marker-style@npm:3.1.2"
@@ -11732,6 +11794,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"remark-lint-ordered-list-marker-style@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "remark-lint-ordered-list-marker-style@npm:4.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    mdast-util-phrasing: "npm:^4.0.0"
+    micromark-util-character: "npm:^2.0.0"
+    unified-lint-rule: "npm:^3.0.0"
+    unist-util-position: "npm:^5.0.0"
+    unist-util-visit-parents: "npm:^6.0.0"
+    vfile-message: "npm:^4.0.0"
+  checksum: 10c0/ab6b5527653fec599ac62d135a79045263a0d4c13cc9e3d7db0bf797ac63d6bc85484bd1b97831e8b6d712cf7c6e1f87ad7e618e4e5dd78d05d82d4757a27df6
+  languageName: node
+  linkType: hard
+
+"remark-lint@npm:^10.0.0":
+  version: 10.0.0
+  resolution: "remark-lint@npm:10.0.0"
+  dependencies:
+    "@types/mdast": "npm:^4.0.0"
+    remark-message-control: "npm:^8.0.0"
+    unified: "npm:^11.0.0"
+  checksum: 10c0/5f1244c9a576ee12ccb4c19fdac92530e09401e4a89c1a4122131f8213e96a07dab2f16c4cd46d1ab3ec1d8af9d8be82902af775e0436aa19715a70672347bd7
+  languageName: node
+  linkType: hard
+
 "remark-lint@npm:^9.0.0, remark-lint@npm:^9.1.2":
   version: 9.1.2
   resolution: "remark-lint@npm:9.1.2"
@@ -11756,14 +11844,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"remark-parse@npm:^10.0.0":
-  version: 10.0.2
-  resolution: "remark-parse@npm:10.0.2"
+"remark-message-control@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "remark-message-control@npm:8.0.0"
   dependencies:
-    "@types/mdast": "npm:^3.0.0"
-    mdast-util-from-markdown: "npm:^1.0.0"
-    unified: "npm:^10.0.0"
-  checksum: 10c0/30cb8f2790380b1c7370a1c66cda41f33a7dc196b9e440a00e2675037bca55aea868165a8204e0cdbacc27ef4a3bdb7d45879826bd6efa07d9fdf328cb67a332
+    "@types/mdast": "npm:^4.0.0"
+    mdast-comment-marker: "npm:^3.0.0"
+    unified-message-control: "npm:^5.0.0"
+    vfile: "npm:^6.0.0"
+  checksum: 10c0/7741fd954f141d806713d17c12c89278b595c8da3ac616e79d92b3c3e01aa12262cc6efa5449c1965b1215470d6c41e824ab991f42e151f0086065534e2297d0
   languageName: node
   linkType: hard
 
@@ -11804,14 +11893,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"remark-stringify@npm:^10.0.0":
-  version: 10.0.3
-  resolution: "remark-stringify@npm:10.0.3"
-  dependencies:
-    "@types/mdast": "npm:^3.0.0"
-    mdast-util-to-markdown: "npm:^1.0.0"
-    unified: "npm:^10.0.0"
-  checksum: 10c0/682f26c66ce72e97a00bff75774b68f8008184dc1e4407039e186de896b5cd5d336aa65842bf131f4826a7415acdcd01d14ba59ff41b421a250c23fb187cda85
+"remark-preset-lint-recommended@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "remark-preset-lint-recommended@npm:7.0.0"
+  dependencies:
+    remark-lint: "npm:^10.0.0"
+    remark-lint-final-newline: "npm:^3.0.0"
+    remark-lint-hard-break-spaces: "npm:^4.0.0"
+    remark-lint-list-item-bullet-indent: "npm:^5.0.0"
+    remark-lint-list-item-indent: "npm:^4.0.0"
+    remark-lint-no-blockquote-without-marker: "npm:^6.0.0"
+    remark-lint-no-duplicate-definitions: "npm:^4.0.0"
+    remark-lint-no-heading-content-indent: "npm:^5.0.0"
+    remark-lint-no-literal-urls: "npm:^4.0.0"
+    remark-lint-no-shortcut-reference-image: "npm:^4.0.0"
+    remark-lint-no-shortcut-reference-link: "npm:^4.0.0"
+    remark-lint-no-undefined-references: "npm:^5.0.0"
+    remark-lint-no-unused-definitions: "npm:^4.0.0"
+    remark-lint-ordered-list-marker-style: "npm:^4.0.0"
+    unified: "npm:^11.0.0"
+  checksum: 10c0/ee425c9a3733e077889de9e644d6892f846edc4efb23d6a9b1e5e9c0d74d09f0b79cb0bb2d6cd1bca920288435a21a1c034cd6ab692ed00280b26f4f023333e1
   languageName: node
   linkType: hard
 
@@ -11826,19 +11927,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"remark@npm:^14.0.3":
-  version: 14.0.3
-  resolution: "remark@npm:14.0.3"
-  dependencies:
-    "@types/mdast": "npm:^3.0.0"
-    remark-parse: "npm:^10.0.0"
-    remark-stringify: "npm:^10.0.0"
-    unified: "npm:^10.0.0"
-  checksum: 10c0/d4dbef29abdb62b01ae632d787bf0038af819df3e4308e037754ece8cb9c4d8ea52e8629174a47b5c46a7448cd22feba5dfea09b3ffdaa8c745b4c9bdd01b41d
-  languageName: node
-  linkType: hard
-
-"remark@npm:^15.0.0":
+"remark@npm:^15.0.0, remark@npm:^15.0.1":
   version: 15.0.1
   resolution: "remark@npm:15.0.1"
   dependencies:
@@ -12002,7 +12091,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rimraf@npm:^3.0.0, rimraf@npm:^3.0.2":
+"rimraf@npm:^3.0.2":
   version: 3.0.2
   resolution: "rimraf@npm:3.0.2"
   dependencies:
@@ -12257,7 +12346,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:7.6.2, semver@npm:^7.0.0, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.6.2":
+"semver@npm:7.6.2":
   version: 7.6.2
   resolution: "semver@npm:7.6.2"
   bin:
@@ -12275,6 +12364,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"semver@npm:^7.0.0, semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.6.2, semver@npm:^7.6.3":
+  version: 7.6.3
+  resolution: "semver@npm:7.6.3"
+  bin:
+    semver: bin/semver.js
+  checksum: 10c0/88f33e148b210c153873cb08cfe1e281d518aaa9a666d4d148add6560db5cd3c582f3a08ccb91f38d5f379ead256da9931234ed122057f40bb5766e65e58adaf
+  languageName: node
+  linkType: hard
+
 "send@npm:0.18.0":
   version: 0.18.0
   resolution: "send@npm:0.18.0"
@@ -12486,6 +12584,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"smol-toml@npm:^1.1.4":
+  version: 1.3.0
+  resolution: "smol-toml@npm:1.3.0"
+  checksum: 10c0/442b4d033236ff6dd05bf91d57695fd9070a8221af080a5b2782cb2d9fad8bc31f698c61de5308a351907c1200202ba3ee51d52c5704f5349149e7c374f5fe90
+  languageName: node
+  linkType: hard
+
 "socks-proxy-agent@npm:^7.0.0":
   version: 7.0.0
   resolution: "socks-proxy-agent@npm:7.0.0"
@@ -12616,6 +12721,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"space-separated-tokens@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "space-separated-tokens@npm:2.0.2"
+  checksum: 10c0/6173e1d903dca41dcab6a2deed8b4caf61bd13b6d7af8374713500570aa929ff9414ae09a0519f4f8772df993300305a395d4871f35bc4ca72b6db57e1f30af8
+  languageName: node
+  linkType: hard
+
 "spdx-correct@npm:^3.0.0":
   version: 3.2.0
   resolution: "spdx-correct@npm:3.2.0"
@@ -12896,6 +13008,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"stringify-entities@npm:^4.0.0":
+  version: 4.0.4
+  resolution: "stringify-entities@npm:4.0.4"
+  dependencies:
+    character-entities-html4: "npm:^2.0.0"
+    character-entities-legacy: "npm:^3.0.0"
+  checksum: 10c0/537c7e656354192406bdd08157d759cd615724e9d0873602d2c9b2f6a5c0a8d0b1d73a0a08677848105c5eebac6db037b57c0b3a4ec86331117fa7319ed50448
+  languageName: node
+  linkType: hard
+
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1, strip-ansi@npm:^6.0.0, strip-ansi@npm:^6.0.1":
   version: 6.0.1
   resolution: "strip-ansi@npm:6.0.1"
@@ -12960,6 +13082,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"strip-json-comments@npm:5.0.1":
+  version: 5.0.1
+  resolution: "strip-json-comments@npm:5.0.1"
+  checksum: 10c0/c9d9d55a0167c57aa688df3aa20628cf6f46f0344038f189eaa9d159978e80b2bfa6da541a40d83f7bde8a3554596259bf6b70578b2172356536a0e3fa5a0982
+  languageName: node
+  linkType: hard
+
 "strip-json-comments@npm:^3.1.1":
   version: 3.1.1
   resolution: "strip-json-comments@npm:3.1.1"
@@ -12967,19 +13096,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strong-log-transformer@npm:^2.1.0":
-  version: 2.1.0
-  resolution: "strong-log-transformer@npm:2.1.0"
-  dependencies:
-    duplexer: "npm:^0.1.1"
-    minimist: "npm:^1.2.0"
-    through: "npm:^2.3.4"
-  bin:
-    sl-log-transformer: bin/sl-log-transformer.js
-  checksum: 10c0/3c3b8aa8f34d661910563ff996412e2f527fc814e699a376854b554d4a4294ab7e285b4e2c08a080a7b19c5600a9b93a98798d3ac600fe3de545ca6605c07829
-  languageName: node
-  linkType: hard
-
 "stubs@npm:^3.0.0":
   version: 3.0.0
   resolution: "stubs@npm:3.0.0"
@@ -13005,6 +13121,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"summary@npm:2.1.0":
+  version: 2.1.0
+  resolution: "summary@npm:2.1.0"
+  checksum: 10c0/2743c1f940fb303c496ef1b085e654704a6c16872957b6b76648c34bd32c8f0b7a3c5ec4e0f8bfb71dcb8473e34d172fef31026b85562af589cf220aa901698d
+  languageName: node
+  linkType: hard
+
 "supports-color@npm:^5.0.0, supports-color@npm:^5.3.0":
   version: 5.5.0
   resolution: "supports-color@npm:5.5.0"
@@ -13066,6 +13189,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tapable@npm:^2.2.0":
+  version: 2.2.1
+  resolution: "tapable@npm:2.2.1"
+  checksum: 10c0/bc40e6efe1e554d075469cedaba69a30eeb373552aaf41caeaaa45bf56ffacc2674261b106245bd566b35d8f3329b52d838e851ee0a852120acae26e622925c9
+  languageName: node
+  linkType: hard
+
 "tar-stream@npm:^1.5.2":
   version: 1.6.2
   resolution: "tar-stream@npm:1.6.2"
@@ -13092,19 +13222,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tar-stream@npm:~2.2.0":
-  version: 2.2.0
-  resolution: "tar-stream@npm:2.2.0"
-  dependencies:
-    bl: "npm:^4.0.3"
-    end-of-stream: "npm:^1.4.1"
-    fs-constants: "npm:^1.0.0"
-    inherits: "npm:^2.0.3"
-    readable-stream: "npm:^3.1.1"
-  checksum: 10c0/2f4c910b3ee7196502e1ff015a7ba321ec6ea837667220d7bcb8d0852d51cb04b87f7ae471008a6fb8f5b1a1b5078f62f3a82d30c706f20ada1238ac797e7692
-  languageName: node
-  linkType: hard
-
 "tar@npm:^6.1.11, tar@npm:^6.1.2":
   version: 6.2.0
   resolution: "tar@npm:6.2.0"
@@ -13218,7 +13335,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"through@npm:>=2.2.7 <3, through@npm:^2.3.4, through@npm:^2.3.8":
+"through@npm:>=2.2.7 <3, through@npm:^2.3.8":
   version: 2.3.8
   resolution: "through@npm:2.3.8"
   checksum: 10c0/4b09f3774099de0d4df26d95c5821a62faee32c7e96fb1f4ebd54a2d7c11c57fe88b0a0d49cf375de5fee5ae6bf4eb56dbbf29d07366864e2ee805349970d3cc
@@ -13232,10 +13349,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tinybench@npm:^2.8.0":
-  version: 2.8.0
-  resolution: "tinybench@npm:2.8.0"
-  checksum: 10c0/5a9a642351fa3e4955e0cbf38f5674be5f3ba6730fd872fd23a5c953ad6c914234d5aba6ea41ef88820180a81829ceece5bd8d3967c490c5171bca1141c2f24d
+"tinybench@npm:^2.9.0":
+  version: 2.9.0
+  resolution: "tinybench@npm:2.9.0"
+  checksum: 10c0/c3500b0f60d2eb8db65250afe750b66d51623057ee88720b7f064894a6cb7eb93360ca824a60a31ab16dab30c7b1f06efe0795b352e37914a9d4bad86386a20c
+  languageName: node
+  linkType: hard
+
+"tinyexec@npm:^0.3.0":
+  version: 0.3.0
+  resolution: "tinyexec@npm:0.3.0"
+  checksum: 10c0/138a4f4241aea6b6312559508468ab275a31955e66e2f57ed206e0aaabecee622624f208c5740345f0a66e33478fd065e359ed1eb1269eb6fd4fa25d44d0ba3b
   languageName: node
   linkType: hard
 
@@ -13260,15 +13384,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tmp@npm:~0.2.1":
-  version: 0.2.1
-  resolution: "tmp@npm:0.2.1"
-  dependencies:
-    rimraf: "npm:^3.0.0"
-  checksum: 10c0/67607aa012059c9ce697bee820ee51bc0f39b29a8766def4f92d3f764d67c7cf9205d537d24e0cb1ce9685c40d4c628ead010910118ea18348666b5c46ed9123
-  languageName: node
-  linkType: hard
-
 "to-buffer@npm:^1.1.1":
   version: 1.1.1
   resolution: "to-buffer@npm:1.1.1"
@@ -13366,6 +13481,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"trouter@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "trouter@npm:4.0.0"
+  dependencies:
+    regexparam: "npm:^3.0.0"
+  checksum: 10c0/e27326a831187c6a47a72b62212364e3f88247fa2a8723e5030e14a0002b69756fb51f97efbda2466deb05f4a78ecb83c2a1a7b343e9659cbfb3f370156f1e12
+  languageName: node
+  linkType: hard
+
 "try-catch@npm:^3.0.0":
   version: 3.0.1
   resolution: "try-catch@npm:3.0.1"
@@ -13408,17 +13532,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tsconfig-paths@npm:^4.1.2":
-  version: 4.2.0
-  resolution: "tsconfig-paths@npm:4.2.0"
-  dependencies:
-    json5: "npm:^2.2.2"
-    minimist: "npm:^1.2.6"
-    strip-bom: "npm:^3.0.0"
-  checksum: 10c0/09a5877402d082bb1134930c10249edeebc0211f36150c35e1c542e5b91f1047b1ccf7da1e59babca1ef1f014c525510f4f870de7c9bda470c73bb4e2721b3ea
-  languageName: node
-  linkType: hard
-
 "tslib@npm:^1.8.1":
   version: 1.14.1
   resolution: "tslib@npm:1.14.1"
@@ -13426,7 +13539,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.1, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0, tslib@npm:^2.6.2":
+"tslib@npm:^2.0.1, tslib@npm:^2.1.0, tslib@npm:^2.6.2":
   version: 2.6.2
   resolution: "tslib@npm:2.6.2"
   checksum: 10c0/e03a8a4271152c8b26604ed45535954c0a45296e32445b4b87f8a5abdb2421f40b59b4ca437c4346af0f28179780d604094eb64546bee2019d903d01c6c19bdb
@@ -13595,7 +13708,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^5.4.5":
+"typescript@npm:5.4.5":
   version: 5.4.5
   resolution: "typescript@npm:5.4.5"
   bin:
@@ -13605,7 +13718,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A^5.4.5#optional!builtin<compat/typescript>":
+"typescript@patch:typescript@npm%3A5.4.5#optional!builtin<compat/typescript>":
   version: 5.4.5
   resolution: "typescript@patch:typescript@npm%3A5.4.5#optional!builtin<compat/typescript>::version=5.4.5&hash=5adc0c"
   bin:
@@ -13727,6 +13840,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unified-lint-rule@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "unified-lint-rule@npm:3.0.0"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+    trough: "npm:^2.0.0"
+    unified: "npm:^11.0.0"
+    vfile: "npm:^6.0.0"
+  checksum: 10c0/f7d508b5db7298b689525b6200937faf0c4f5ec2c942d09fe6905895ab1869d3c9ad7365e277ebba3846319221ff1a7d7901456bff8ce3400724c1e79bf912bd
+  languageName: node
+  linkType: hard
+
 "unified-message-control@npm:^4.0.0":
   version: 4.0.0
   resolution: "unified-message-control@npm:4.0.0"
@@ -13741,6 +13866,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unified-message-control@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "unified-message-control@npm:5.0.0"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+    devlop: "npm:^1.0.0"
+    space-separated-tokens: "npm:^2.0.0"
+    unist-util-is: "npm:^6.0.0"
+    unist-util-visit: "npm:^5.0.0"
+    vfile: "npm:^6.0.0"
+    vfile-location: "npm:^5.0.0"
+    vfile-message: "npm:^4.0.0"
+  checksum: 10c0/0884d3f6c6fddff1184bbd0b3fcf463e11b2963a866513902472768dd9116abfdd24b0ae1b8525a5a3b4c95464f9be4669205a4e762c63faa08829ccc2fa0083
+  languageName: node
+  linkType: hard
+
 "unified@npm:^10.0.0, unified@npm:^10.1.0":
   version: 10.1.2
   resolution: "unified@npm:10.1.2"
@@ -13859,6 +14000,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unist-util-position@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "unist-util-position@npm:5.0.0"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+  checksum: 10c0/dde3b31e314c98f12b4dc6402f9722b2bf35e96a4f2d463233dd90d7cde2d4928074a7a11eff0a5eb1f4e200f27fc1557e0a64a7e8e4da6558542f251b1b7400
+  languageName: node
+  linkType: hard
+
 "unist-util-stringify-position@npm:^3.0.0":
   version: 3.0.3
   resolution: "unist-util-stringify-position@npm:3.0.3"
@@ -14223,6 +14373,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vfile-location@npm:^5.0.0":
+  version: 5.0.3
+  resolution: "vfile-location@npm:5.0.3"
+  dependencies:
+    "@types/unist": "npm:^3.0.0"
+    vfile: "npm:^6.0.0"
+  checksum: 10c0/1711f67802a5bc175ea69750d59863343ed43d1b1bb25c0a9063e4c70595e673e53e2ed5cdbb6dcdc370059b31605144d95e8c061b9361bcc2b036b8f63a4966
+  languageName: node
+  linkType: hard
+
 "vfile-message@npm:^3.0.0":
   version: 3.1.4
   resolution: "vfile-message@npm:3.1.4"
@@ -14302,18 +14462,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vite-node@npm:2.0.5":
-  version: 2.0.5
-  resolution: "vite-node@npm:2.0.5"
+"vite-node@npm:2.1.3":
+  version: 2.1.3
+  resolution: "vite-node@npm:2.1.3"
   dependencies:
     cac: "npm:^6.7.14"
-    debug: "npm:^4.3.5"
+    debug: "npm:^4.3.6"
     pathe: "npm:^1.1.2"
-    tinyrainbow: "npm:^1.2.0"
     vite: "npm:^5.0.0"
   bin:
     vite-node: vite-node.mjs
-  checksum: 10c0/affcc58ae8d45bce3e8bc3b5767acd57c24441634e2cd967cf97f4e5ed2bcead1714b60150cdf7ee153ebad47659c5cd419883207e1a95b69790331e3243749f
+  checksum: 10c0/1b06139880a8170651e025e8c35aa92a917f8ec8f24507cda5bf4be09843f6447e1f494932a8d7eb98124f1c8c9fee02283ef318ddd57e2b861d2d85a409a206
   languageName: node
   linkType: hard
 
@@ -14357,34 +14516,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vitest@npm:^2.0.5":
-  version: 2.0.5
-  resolution: "vitest@npm:2.0.5"
-  dependencies:
-    "@ampproject/remapping": "npm:^2.3.0"
-    "@vitest/expect": "npm:2.0.5"
-    "@vitest/pretty-format": "npm:^2.0.5"
-    "@vitest/runner": "npm:2.0.5"
-    "@vitest/snapshot": "npm:2.0.5"
-    "@vitest/spy": "npm:2.0.5"
-    "@vitest/utils": "npm:2.0.5"
+"vitest@npm:^2.1.3":
+  version: 2.1.3
+  resolution: "vitest@npm:2.1.3"
+  dependencies:
+    "@vitest/expect": "npm:2.1.3"
+    "@vitest/mocker": "npm:2.1.3"
+    "@vitest/pretty-format": "npm:^2.1.3"
+    "@vitest/runner": "npm:2.1.3"
+    "@vitest/snapshot": "npm:2.1.3"
+    "@vitest/spy": "npm:2.1.3"
+    "@vitest/utils": "npm:2.1.3"
     chai: "npm:^5.1.1"
-    debug: "npm:^4.3.5"
-    execa: "npm:^8.0.1"
-    magic-string: "npm:^0.30.10"
+    debug: "npm:^4.3.6"
+    magic-string: "npm:^0.30.11"
     pathe: "npm:^1.1.2"
     std-env: "npm:^3.7.0"
-    tinybench: "npm:^2.8.0"
+    tinybench: "npm:^2.9.0"
+    tinyexec: "npm:^0.3.0"
     tinypool: "npm:^1.0.0"
     tinyrainbow: "npm:^1.2.0"
     vite: "npm:^5.0.0"
-    vite-node: "npm:2.0.5"
+    vite-node: "npm:2.1.3"
     why-is-node-running: "npm:^2.3.0"
   peerDependencies:
     "@edge-runtime/vm": "*"
     "@types/node": ^18.0.0 || >=20.0.0
-    "@vitest/browser": 2.0.5
-    "@vitest/ui": 2.0.5
+    "@vitest/browser": 2.1.3
+    "@vitest/ui": 2.1.3
     happy-dom: "*"
     jsdom: "*"
   peerDependenciesMeta:
@@ -14402,7 +14561,7 @@ __metadata:
       optional: true
   bin:
     vitest: vitest.mjs
-  checksum: 10c0/b4e6cca00816bf967a8589111ded72faa12f92f94ccdd0dcd0698ffcfdfc52ec662753f66b387549c600ac699b993fd952efbd99dc57fcf4d1c69a2f1022b259
+  checksum: 10c0/7688fdce37205e7f3b448039df216e103e3a52994af0201993e22decbb558d129a734001b991f3c3d80bf4a4ef91ca6a5665a7395d5b051249da60a0016eda36
   languageName: node
   linkType: hard
 
@@ -14779,14 +14938,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs-parser@npm:21.1.1, yargs-parser@npm:^21.1.1":
+"yargs-parser@npm:^21.1.1":
   version: 21.1.1
   resolution: "yargs-parser@npm:21.1.1"
   checksum: 10c0/f84b5e48169479d2f402239c59f084cfd1c3acc197a05c59b98bab067452e6b3ea46d4dd8ba2985ba7b3d32a343d77df0debd6b343e5dae3da2aab2cdf5886b2
   languageName: node
   linkType: hard
 
-"yargs@npm:^17.0.0, yargs@npm:^17.6.2":
+"yargs@npm:^17.0.0":
   version: 17.7.2
   resolution: "yargs@npm:17.7.2"
   dependencies:
@@ -14833,7 +14992,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"zod@npm:^3.23.8":
+"zod-validation-error@npm:^3.0.3":
+  version: 3.3.1
+  resolution: "zod-validation-error@npm:3.3.1"
+  peerDependencies:
+    zod: ^3.18.0
+  checksum: 10c0/53869a8478f42cd38f51e159431fe7af9e0b456e8078c6d9d906adb212753788defa9c8bd7374e9ecd4a688b6736fcfa091aebac65054328b8cfdecce9395d8e
+  languageName: node
+  linkType: hard
+
+"zod@npm:^3.22.4, zod@npm:^3.23.8":
   version: 3.23.8
   resolution: "zod@npm:3.23.8"
   checksum: 10c0/8f14c87d6b1b53c944c25ce7a28616896319d95bc46a9660fe441adc0ed0a81253b02b5abdaeffedbeb23bdd25a0bf1c29d2c12dd919aef6447652dd295e3e69
diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js b/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js
index 3867a50e7bc7..f427b4763dd6 100644
--- a/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js
+++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/jest.config.js
@@ -9,7 +9,7 @@ const createJestConfig = nextJest({
 /** @type {import('jest').Config} */
 const customJestConfig = {
   coverageProvider: 'v8',
-  testEnvironment: 'jsdom',
+  testEnvironment: '@happy-dom/jest-environment',
   // Add more setup options before each test is run
   setupFilesAfterEnv: ['./jest.setup.ts'],
   moduleNameMapper: {
diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/package.json b/test-storybooks/portable-stories-kitchen-sink/nextjs/package.json
index f3495170c2fc..69722cabd5db 100644
--- a/test-storybooks/portable-stories-kitchen-sink/nextjs/package.json
+++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/package.json
@@ -8,7 +8,7 @@
     "dev": "next dev",
     "jest": "jest",
     "lint": "next lint",
-    "playwright": "echo 'No playwright setup yet'",
+    "playwright-ct": "echo 'No playwright setup yet'",
     "start": "next start",
     "storybook": "storybook dev -p 6006",
     "vitest": "echo 'Vitest is not supported in Next.js testing'"
@@ -84,6 +84,7 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
+    "@happy-dom/jest-environment": "^15.11.7",
     "@jest/globals": "^29.7.0",
     "@storybook/addon-actions": "^8.0.0",
     "@storybook/addon-essentials": "^8.0.0",
@@ -101,11 +102,10 @@
     "eslint": "^8.56.0",
     "eslint-plugin-storybook": "^0.6.15",
     "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
     "storybook": "^8.0.0",
     "typescript": "^5.2.2"
   },
   "maintainer_please_read_this": {
     "_": "we use file protocol to make this setup close to real life scenarios as well as avoid issues with duplicated React instances. When you recompile the SB packages, you need to rerun install."
   }
-}
\ No newline at end of file
+}
diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/DynamicImport.stories.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/DynamicImport.stories.tsx
index 3c177d670737..f2078d784d5a 100644
--- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/DynamicImport.stories.tsx
+++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/DynamicImport.stories.tsx
@@ -15,6 +15,6 @@ function Component() {
 
 export default {
   component: Component,
-};
+} as Meta<typeof Component>;
 
 export const Default = {};
diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Head.stories.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Head.stories.tsx
index c0aeddf1e124..92802b59f150 100644
--- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Head.stories.tsx
+++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/Head.stories.tsx
@@ -20,7 +20,7 @@ function Component() {
 
 export default {
   component: Component,
-};
+} as Meta<typeof Component>;
 
 export const Default: StoryObj = {
   play: async () => {
diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx
index 1c75f64375ea..84389dad3d96 100644
--- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx
+++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/NextHeader.stories.tsx
@@ -1,5 +1,4 @@
-import type { Meta } from '@storybook/react';
-import type { StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { expect, userEvent, within } from '@storybook/test';
 import { cookies, headers } from '@storybook/nextjs/headers.mock';
 import NextHeader from './NextHeader';
diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/StyledJsx.stories.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/StyledJsx.stories.tsx
index 5a0c586e232c..52d8bba60ed9 100644
--- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/StyledJsx.stories.tsx
+++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/StyledJsx.stories.tsx
@@ -15,6 +15,6 @@ const Component = () => (
 
 export default {
   component: Component,
-};
+} as Meta<typeof Component>;
 
 export const Default = {};
diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap
index e65b31476609..677e011bb38c 100644
--- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap
+++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/__snapshots__/portable-stories.test.tsx.snap
@@ -158,16 +158,16 @@ exports[`renders imageLegacyStories stories renders BlurredAbsolutePlaceholder 1
       Global Decorator
       <br />
       <span
-        style="box-sizing: border-box; display: inline-block; overflow: hidden; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: relative; max-width: 100%;"
+        style="box-sizing: border-box; display: inline-block; overflow: hidden; width: initial; height: initial; background: none none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: relative; max-width: 100%;"
       >
         <span
-          style="box-sizing: border-box; display: block; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; max-width: 100%;"
+          style="box-sizing: border-box; display: block; width: initial; height: initial; background: none none; opacity: 1; border: 0px; margin: 0px; padding: 0px; max-width: 100%;"
         >
           <img
             alt=""
             aria-hidden="true"
             src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2750%27%20height=%2750%27/%3e"
-            style="display: block; max-width: 100%; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px;"
+            style="display: block; max-width: 100%; width: initial; height: initial; background: none none; opacity: 1; border: 0px; margin: 0px; padding: 0px;"
           />
         </span>
         <img
@@ -175,7 +175,7 @@ exports[`renders imageLegacyStories stories renders BlurredAbsolutePlaceholder 1
           data-nimg="intrinsic"
           decoding="async"
           src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-          style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; box-sizing: border-box; padding: 0px; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; background-size: cover; background-position: 0% 0%; filter: blur(20px); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABP5JREFUWEeNlwtz2zgMhEGKsv/k9XFp82xe11763yOJVGcXC4m2czM3GYa0E2s/LACSTi+vv1czM/7CvPpqxY/ejPeS3khmFiPHOiVLHKaZi4ux4j18GpMlS6cALupEQBCKQM4BdnGzjIcJgs//QBxAPQAem55f3yL4PWJIdyCyhlMfPdYZot0cwj3Ayg/5JwHA13paen7pADphxr/n5VI8JQsHCCGQ3gVGLLsxQ3h/LYSn5383B05rwNOws3Z576LOTOduvwfrOd5FtVat4akx0uPTrw8BNuUz23vLsY7hmg7i4ipqM2saiAdruNuirh4ff0bNdb3Qy3vkvfAQwrkHoDxTTZtDCOKrC1bMEkdnsQh/PLyetOGHkXeRAgQAQ84efQcBdUhvFofoulpdm9WGGTA+AJEe7l+i37a2c371tCFKs5zzJjxQNBMi1im7OCudP2aNghJuzZaGdSMEZjpwf/t0UgNdg9DOyLGLnY0BUHlzwVtNDkgEQhBeKkb1tUDgQrq7frwAiIJi5BKAeIFgHk5mOpPzvgltOfcoK0Rrs7lWHwsgqtXarK3N0u23h5Ne8+3Cqxn5RYSMfHCAMgDAx4CBWlA9RAGw0GA/ol0gvFB4WjAvBAFUa83SzdUdAbYMqp28uHpxCRefxwAYhksAFBlthxCiXig+zT4TYqkC+Hq7OdAfJv8lPpZiZShWBBIuRP+jspDb2lwcDkzz7OLzbO/zvAHAoXTz5eYMQL0t2yHAiCFcfPY1QDwNFylA5bPoFpsV9fsEiMl8dhcc4PP1CYD3drYcBYdIKQrx0cbRxd2JHSDcQ297/vvoZ5smRC+AyV2AQ+nm03evge08Tyy4jGqXzWWEoIvTgXHU38pWiNgH4ixB/ukAcy/xycXfp4kwdAAAt399W+OCgMjxILQacxvRQ3gEwHgKUIr/rz53CuDFNyP/Eob4+/vEWkBq6AAA/HIi62n/Lk67Q7wDYQ0UpQB7hc54T4E6gACLTYxeAwB0YKZL6U4ATEGIBwCs7qPfQJCCHkCnoK50noJKcXcAojsEAJZZKXhgCoziGKxqWV8IMNp4kP2aC+oB0TMFvhGxDQHQfIPhDrilwKOm/YCZASAHfgBABQjr3f7CyAkA0cPB03AQULRhKd4xAIjzHymo2Gp7gN0FAMAVOoA2fPz03a9ssh/RM7Iz8QKIzYF9HyB0XEZ1xJ4DzNoDOAfAslhDDTyjDfv8A2AcBeCiu/jBHQEgxnYW6Kp6BlCVAkQM8VnieF2Xyr0ivXy+XvsCzKOihwNHCCryw8HrQXVB8dgFeRfAVQiXjMbIIgXINQYB2H7Kf5wF/2Ar7h0AgKKGuAP4zOjhzlkLbpcRXKRZhNUjxG6HIQDOjN47gCn4+fWW3xVS9urPESEEwwHMo9IhAGxS2ISiA1iEnQOoA4hXRAwItp7WzL9Ow18ESJaw/ar4NgeOR49cAHCAnaH8swBhv+6CBGjeBSxEOUAI7HyKHkD4O9xKb3/feQouAI4uLBciHRRHmgbfA7h/xFc9AngNBADthvii1sMOiPwDAFeyt6s7FSFS4PmnA1v0vQvqDqQKAAPE/weAUuEgsj8c+H11Twdw/AKANXA82EDr5cJBEEzB3oI4Mb0AdR3nNw8vQnegWuvqAABwJFJEBwDgNdA7IOs3gL0LhuJdwBY8c4BfNnDdVgooHiOqn/b7JoSW/QODjTHXhU7hMQAAAABJRU5ErkJggg==);"
+          style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; box-sizing: border-box; padding: 0px; border: none none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; background-size: cover; background-position: 0% 0%; filter: blur(20px); background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABP5JREFUWEeNlwtz2zgMhEGKsv/k9XFp82xe11763yOJVGcXC4m2czM3GYa0E2s/LACSTi+vv1czM/7CvPpqxY/ejPeS3khmFiPHOiVLHKaZi4ux4j18GpMlS6cALupEQBCKQM4BdnGzjIcJgs//QBxAPQAem55f3yL4PWJIdyCyhlMfPdYZot0cwj3Ayg/5JwHA13paen7pADphxr/n5VI8JQsHCCGQ3gVGLLsxQ3h/LYSn5383B05rwNOws3Z576LOTOduvwfrOd5FtVat4akx0uPTrw8BNuUz23vLsY7hmg7i4ipqM2saiAdruNuirh4ff0bNdb3Qy3vkvfAQwrkHoDxTTZtDCOKrC1bMEkdnsQh/PLyetOGHkXeRAgQAQ84efQcBdUhvFofoulpdm9WGGTA+AJEe7l+i37a2c371tCFKs5zzJjxQNBMi1im7OCudP2aNghJuzZaGdSMEZjpwf/t0UgNdg9DOyLGLnY0BUHlzwVtNDkgEQhBeKkb1tUDgQrq7frwAiIJi5BKAeIFgHk5mOpPzvgltOfcoK0Rrs7lWHwsgqtXarK3N0u23h5Ne8+3Cqxn5RYSMfHCAMgDAx4CBWlA9RAGw0GA/ol0gvFB4WjAvBAFUa83SzdUdAbYMqp28uHpxCRefxwAYhksAFBlthxCiXig+zT4TYqkC+Hq7OdAfJv8lPpZiZShWBBIuRP+jspDb2lwcDkzz7OLzbO/zvAHAoXTz5eYMQL0t2yHAiCFcfPY1QDwNFylA5bPoFpsV9fsEiMl8dhcc4PP1CYD3drYcBYdIKQrx0cbRxd2JHSDcQ297/vvoZ5smRC+AyV2AQ+nm03evge08Tyy4jGqXzWWEoIvTgXHU38pWiNgH4ixB/ukAcy/xycXfp4kwdAAAt399W+OCgMjxILQacxvRQ3gEwHgKUIr/rz53CuDFNyP/Eob4+/vEWkBq6AAA/HIi62n/Lk67Q7wDYQ0UpQB7hc54T4E6gACLTYxeAwB0YKZL6U4ATEGIBwCs7qPfQJCCHkCnoK50noJKcXcAojsEAJZZKXhgCoziGKxqWV8IMNp4kP2aC+oB0TMFvhGxDQHQfIPhDrilwKOm/YCZASAHfgBABQjr3f7CyAkA0cPB03AQULRhKd4xAIjzHymo2Gp7gN0FAMAVOoA2fPz03a9ssh/RM7Iz8QKIzYF9HyB0XEZ1xJ4DzNoDOAfAslhDDTyjDfv8A2AcBeCiu/jBHQEgxnYW6Kp6BlCVAkQM8VnieF2Xyr0ivXy+XvsCzKOihwNHCCryw8HrQXVB8dgFeRfAVQiXjMbIIgXINQYB2H7Kf5wF/2Ar7h0AgKKGuAP4zOjhzlkLbpcRXKRZhNUjxG6HIQDOjN47gCn4+fWW3xVS9urPESEEwwHMo9IhAGxS2ISiA1iEnQOoA4hXRAwItp7WzL9Ow18ESJaw/ar4NgeOR49cAHCAnaH8swBhv+6CBGjeBSxEOUAI7HyKHkD4O9xKb3/feQouAI4uLBciHRRHmgbfA7h/xFc9AngNBADthvii1sMOiPwDAFeyt6s7FSFS4PmnA1v0vQvqDqQKAAPE/weAUuEgsj8c+H11Twdw/AKANXA82EDr5cJBEEzB3oI4Mb0AdR3nNw8vQnegWuvqAABwJFJEBwDgNdA7IOs3gL0LhuJdwBY8c4BfNnDdVgooHiOqn/b7JoSW/QODjTHXhU7hMQAAAABJRU5ErkJggg==");"
         />
         <noscript />
       </span>
@@ -193,16 +193,16 @@ exports[`renders imageLegacyStories stories renders BlurredPlaceholder 1`] = `
       Global Decorator
       <br />
       <span
-        style="box-sizing: border-box; display: inline-block; overflow: hidden; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: relative; max-width: 100%;"
+        style="box-sizing: border-box; display: inline-block; overflow: hidden; width: initial; height: initial; background: none none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: relative; max-width: 100%;"
       >
         <span
-          style="box-sizing: border-box; display: block; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; max-width: 100%;"
+          style="box-sizing: border-box; display: block; width: initial; height: initial; background: none none; opacity: 1; border: 0px; margin: 0px; padding: 0px; max-width: 100%;"
         >
           <img
             alt=""
             aria-hidden="true"
             src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2740%27%20height=%2740%27/%3e"
-            style="display: block; max-width: 100%; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px;"
+            style="display: block; max-width: 100%; width: initial; height: initial; background: none none; opacity: 1; border: 0px; margin: 0px; padding: 0px;"
           />
         </span>
         <img
@@ -210,7 +210,7 @@ exports[`renders imageLegacyStories stories renders BlurredPlaceholder 1`] = `
           data-nimg="intrinsic"
           decoding="async"
           src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-          style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; box-sizing: border-box; padding: 0px; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; background-size: cover; background-position: 0% 0%; filter: blur(20px); background-image: url(data:image/png;base64,imagedata);"
+          style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; box-sizing: border-box; padding: 0px; border: none none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; background-size: cover; background-position: 0% 0%; filter: blur(20px); background-image: url("data:image/png;base64,imagedata");"
         />
         <noscript />
       </span>
@@ -228,16 +228,16 @@ exports[`renders imageLegacyStories stories renders Default 1`] = `
       Global Decorator
       <br />
       <span
-        style="box-sizing: border-box; display: inline-block; overflow: hidden; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: relative; max-width: 100%;"
+        style="box-sizing: border-box; display: inline-block; overflow: hidden; width: initial; height: initial; background: none none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: relative; max-width: 100%;"
       >
         <span
-          style="box-sizing: border-box; display: block; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; max-width: 100%;"
+          style="box-sizing: border-box; display: block; width: initial; height: initial; background: none none; opacity: 1; border: 0px; margin: 0px; padding: 0px; max-width: 100%;"
         >
           <img
             alt=""
             aria-hidden="true"
             src="data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2740%27%20height=%2740%27/%3e"
-            style="display: block; max-width: 100%; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px;"
+            style="display: block; max-width: 100%; width: initial; height: initial; background: none none; opacity: 1; border: 0px; margin: 0px; padding: 0px;"
           />
         </span>
         <img
@@ -245,7 +245,7 @@ exports[`renders imageLegacyStories stories renders Default 1`] = `
           data-nimg="intrinsic"
           decoding="async"
           src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-          style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; box-sizing: border-box; padding: 0px; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
+          style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; box-sizing: border-box; padding: 0px; border: none none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
         />
         <noscript />
       </span>
diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/portable-stories.test.tsx b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/portable-stories.test.tsx
index f67542889e8b..c167b73afbe3 100644
--- a/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/portable-stories.test.tsx
+++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/stories/portable-stories.test.tsx
@@ -1,5 +1,5 @@
 import { describe, it, expect } from '@jest/globals';
-import { render } from '@testing-library/react';
+import { jest } from '@jest/globals';
 
 import { composeStories, setProjectAnnotations } from '@storybook/nextjs';
 import * as imageStories from './Image.stories';
@@ -14,6 +14,9 @@ import * as headStories from './Head.stories';
 import * as nextHeaderStories from './NextHeader.stories';
 import * as getImagePropsStories from './GetImageProps.stories';
 
+// the imageLegacyStories test is flaky
+jest.retryTimes(3);
+
 // example with composeStories, returns an object with all stories composed with args/decorators
 const runTests = (name: string, storiesModule: any) => {
   describe(`${name} stories`, () => {
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/.storybook/aliased.ts b/test-storybooks/portable-stories-kitchen-sink/react/.storybook/aliased.ts
new file mode 100644
index 000000000000..030574bfd2a6
--- /dev/null
+++ b/test-storybooks/portable-stories-kitchen-sink/react/.storybook/aliased.ts
@@ -0,0 +1,4 @@
+// This file is used to test that viteFinal is correctly loaded in Vitest
+// main.ts defines this file as a resolve alias, which is used in the ViteFinalTest story
+
+export const aliasedFunction = () => true;
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 19fc1e80ce97..fff0f008dd37 100644
--- a/test-storybooks/portable-stories-kitchen-sink/react/.storybook/main.ts
+++ b/test-storybooks/portable-stories-kitchen-sink/react/.storybook/main.ts
@@ -1,14 +1,50 @@
 import type { StorybookConfig } from "@storybook/react-vite";
+import { join } from 'path';
 
 const config: StorybookConfig = {
   stories: ["../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions"
+    "@storybook/addon-controls",
+    "@storybook/experimental-addon-test",
+    //"@storybook/addon-a11y",
   ],
   framework: {
     name: "@storybook/react-vite",
     options: {},
   },
+  core: {
+    disableWhatsNewNotifications: true,
+  },
+  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;
+    }
+  </style>`,
+  staticDirs: [{ from: './test-static-dirs', to:'test-static-dirs' }],
+  viteFinal: (config) => {
+    return {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: {
+          ...config.resolve?.alias,
+          'test-alias': join(__dirname, 'aliased.ts'),
+        },
+      }
+    };
+  },
 };
 export default config;
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/.storybook/preview-head.html b/test-storybooks/portable-stories-kitchen-sink/react/.storybook/preview-head.html
new file mode 100644
index 000000000000..61252d019910
--- /dev/null
+++ b/test-storybooks/portable-stories-kitchen-sink/react/.storybook/preview-head.html
@@ -0,0 +1,5 @@
+<style>
+  body {
+    background-color: rgb(250, 250, 210);
+  }
+</style>
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/.storybook/test-static-dirs/static.js b/test-storybooks/portable-stories-kitchen-sink/react/.storybook/test-static-dirs/static.js
new file mode 100644
index 000000000000..56ff9f9c7ad4
--- /dev/null
+++ b/test-storybooks/portable-stories-kitchen-sink/react/.storybook/test-static-dirs/static.js
@@ -0,0 +1,3 @@
+// This file is used to test that staticDirs are correctly loaded in Vitest
+
+export const staticFunction = () => true;
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/.storybook/vitest.setup.ts b/test-storybooks/portable-stories-kitchen-sink/react/.storybook/vitest.setup.ts
new file mode 100644
index 000000000000..d89d36e9a642
--- /dev/null
+++ b/test-storybooks/portable-stories-kitchen-sink/react/.storybook/vitest.setup.ts
@@ -0,0 +1,11 @@
+import { beforeAll } from 'vitest'
+import { setProjectAnnotations } from '@storybook/react'
+import * as addonA11yAnnotations from '@storybook/addon-a11y/preview'
+import * as projectAnnotations from './preview'
+
+const annotations = setProjectAnnotations([
+  addonA11yAnnotations,
+  projectAnnotations,
+])
+
+beforeAll(annotations.beforeAll)
\ No newline at end of file
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/component-testing.spec.ts b/test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/component-testing.spec.ts
new file mode 100644
index 000000000000..9e88b7d0a579
--- /dev/null
+++ b/test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/component-testing.spec.ts
@@ -0,0 +1,463 @@
+import { promises as fs } from "node:fs";
+import path from "node:path";
+
+
+import { expect, test } from "@playwright/test";
+
+import { SbPage } from "../../../../code/e2e-tests/util";
+
+const STORYBOOK_URL = "http://localhost:6006";
+const TEST_STORY_PATH = path.resolve(__dirname, "..", "stories", "AddonTest.stories.tsx");
+const BUTTON_COMPONENT_PATH = path.resolve(__dirname, "..", "stories", "Button.tsx");
+
+const setForceFailureFlag = async (value: boolean) => {
+  // Read the story file content asynchronously
+  const storyContent = (await fs.readFile(TEST_STORY_PATH)).toString();
+
+  // Create a regex to match 'forceFailure: true' or 'forceFailure: false'
+  const forceFailureRegex = /forceFailure:\s*(true|false)/;
+
+  // Replace the value of 'forceFailure' with the new value
+  const updatedContent = storyContent.replace(
+    forceFailureRegex,
+    `forceFailure: ${value}`
+  );
+
+  // Write the updated content back to the file asynchronously
+  await fs.writeFile(TEST_STORY_PATH, updatedContent);
+
+  // the file change causes a HMR event, which causes a browser reload,and that can take a few seconds
+  await new Promise((resolve) => setTimeout(resolve, 2000));
+};
+
+test.describe("component testing", () => {
+  test.describe.configure({ mode: "serial" });
+  test.beforeEach(async ({ page }) => {
+    const sbPage = new SbPage(page, expect);
+
+    await page.goto(STORYBOOK_URL);
+    await page.evaluate(() => window.sessionStorage.clear());
+    await sbPage.waitUntilLoaded();
+  });
+
+  test("should show discrepancy between test results", async ({
+    page,
+    browserName,
+  }) => {
+    test.skip(browserName !== "chromium", `Skipping tests for ${browserName}`);
+    test.setTimeout(40_000)
+    const sbPage = new SbPage(page, expect);
+
+    await sbPage.navigateToStory("addons/group/test", "Mismatch Failure");
+
+    const expandButton = await page.getByLabel('Expand testing module')
+    await expandButton.click();
+
+    // For whatever reason, sometimes it takes longer for the story to load
+    const storyElement = sbPage
+      .getCanvasBodyElement()
+      .getByRole("button", { name: "test" });
+    await expect(storyElement).toBeVisible({ timeout: 30000 });
+
+    await sbPage.viewAddonPanel("Component tests");
+
+    // For whatever reason, when visiting a story sometimes the story element is collapsed and that causes flake
+    const testStoryElement = await page.getByRole("button", {
+      name: "Test",
+      exact: true,
+    });
+    if ((await testStoryElement.getAttribute("aria-expanded")) !== "true") {
+      testStoryElement.click();
+    }
+
+    const testingModuleDescription = await page.locator('#testing-module-description');
+
+    await expect(testingModuleDescription).toContainText('Not run');
+
+    const runTestsButton = await page.getByLabel('Start Component tests')
+    await runTestsButton.click();
+
+    await expect(testingModuleDescription).toContainText('Testing', { timeout: 60000 });
+
+    // Wait for test results to appear
+    await expect(testingModuleDescription).toHaveText(/Ran \d+ tests/, { timeout: 60000 });
+
+    const errorFilter = page.getByLabel("Toggle errors");
+    await expect(errorFilter).toBeVisible();
+
+    // Assert discrepancy: CLI pass + Browser fail
+    const failingStoryElement = page.locator(
+      '[data-item-id="addons-group-test--mismatch-failure"] [role="status"]'
+    );
+    await expect(failingStoryElement).toHaveAttribute(
+      "aria-label",
+      "Test status: success"
+    );
+    await expect(sbPage.panelContent()).toContainText(
+      /This component test passed in the CLI, but the tests failed in this browser/
+    );
+
+    // Assert discrepancy: CLI fail + Browser pass
+    await sbPage.navigateToStory("addons/group/test", "Mismatch Success");
+    const successfulStoryElement = page.locator(
+      '[data-item-id="addons-group-test--mismatch-success"] [role="status"]'
+    );
+    await expect(successfulStoryElement).toHaveAttribute(
+      "aria-label",
+      "Test status: error"
+    );
+    await expect(sbPage.panelContent()).toContainText(
+      /This component test passed in this browser, but the tests failed in the CLI/
+    );
+  });
+
+  test("should execute tests via testing module UI", async ({
+    page,
+    browserName,
+  }) => {
+    test.skip(browserName !== "chromium", `Skipping tests for ${browserName}`);
+    await setForceFailureFlag(true);
+
+    const sbPage = new SbPage(page, expect);
+    await sbPage.navigateToStory("addons/group/test", "Expected Failure");
+
+    const expandButton = page.getByLabel('Expand testing module')
+    await expandButton.click();
+
+    // For whatever reason, sometimes it takes longer for the story to load
+    const storyElement = sbPage
+      .getCanvasBodyElement()
+      .getByRole("button", { name: "test" });
+    await expect(storyElement).toBeVisible({ timeout: 30000 });
+
+    await expect(page.locator('#testing-module-title')).toHaveText('Run local tests');
+
+    const testingModuleDescription = await page.locator('#testing-module-description');
+
+    await expect(testingModuleDescription).toContainText('Not run');
+
+    const runTestsButton = await page.getByLabel('Start Component Tests')
+    const watchModeButton = await page.getByLabel('Enable watch mode for Component tests')
+    await expect(runTestsButton).toBeEnabled();
+    await expect(watchModeButton).toBeEnabled();
+
+    await runTestsButton.click();
+    await expect(watchModeButton).toBeDisabled();
+
+    await expect(testingModuleDescription).toContainText('Testing');
+
+    // Wait for test results to appear
+    await expect(testingModuleDescription).toHaveText(/Ran \d+ tests/, { timeout: 30000 });
+
+    await expect(runTestsButton).toBeEnabled();
+    await expect(watchModeButton).toBeEnabled();
+
+    const errorFilter = page.getByLabel("Toggle errors");
+    await expect(errorFilter).toBeVisible();
+
+    // Assert for expected success
+    const successfulStoryElement = page.locator(
+      '[data-item-id="addons-group-test--expected-success"] [role="status"]'
+    );
+    await expect(successfulStoryElement).toHaveAttribute(
+      "aria-label",
+      "Test status: success"
+    );
+
+    // Assert for expected failure
+    const failingStoryElement = page.locator(
+      '[data-item-id="addons-group-test--expected-failure"] [role="status"]'
+    );
+    await expect(failingStoryElement).toHaveAttribute(
+      "aria-label",
+      "Test status: error"
+    );
+
+    // Assert that filter works as intended
+    await errorFilter.click();
+
+    const sidebarItems = page.locator(
+      '.sidebar-item[data-ref-id="storybook_internal"][data-nodetype="component"]'
+    );
+    await expect(sidebarItems).toHaveCount(2);
+  });
+
+  test("should execute watch mode tests via testing module UI", async ({
+    page,
+    browserName,
+  }) => {
+    test.skip(browserName !== "chromium", `Skipping tests for ${browserName}`);
+    await setForceFailureFlag(false);
+
+    const sbPage = new SbPage(page, expect);
+    await sbPage.navigateToStory("addons/group/test", "Expected Failure");
+
+    const expandButton = await page.getByLabel('Expand testing module')
+    await expandButton.click();
+
+    // For whatever reason, sometimes it takes longer for the story to load
+    const storyElement = sbPage
+      .getCanvasBodyElement()
+      .getByRole("button", { name: "test" });
+    await expect(storyElement).toBeVisible({ timeout: 30000 });
+
+    await page.getByLabel("Enable watch mode for Component tests").click();
+
+    // We shouldn't have to do an arbitrary wait, but because there is no UI for loading state yet, we have to
+    await page.waitForTimeout(8000);
+    await setForceFailureFlag(true);
+    await page.waitForTimeout(500);
+
+    // Cleanup, to ensure watch mode is disabled in the other tests
+    await page.getByLabel("Disable watch mode for Component tests").click();
+
+    // Wait for test results to appear
+    const errorFilter = page.getByLabel("Toggle errors");
+    await expect(errorFilter).toBeVisible({ timeout: 30000 });
+
+    // Assert for expected success
+    const successfulStoryElement = page.locator(
+      '[data-item-id="addons-group-test--expected-success"] [role="status"]'
+    );
+    await expect(successfulStoryElement).toHaveAttribute(
+      "aria-label",
+      "Test status: success"
+    );
+
+    // Assert for expected failure
+    const failingStoryElement = page.locator(
+      '[data-item-id="addons-group-test--expected-failure"] [role="status"]'
+    );
+    await expect(failingStoryElement).toHaveAttribute(
+      "aria-label",
+      "Test status: error"
+    );
+
+    // Assert that filter works as intended
+    await errorFilter.click();
+
+    const sidebarItems = page.locator(
+      '.sidebar-item[data-ref-id="storybook_internal"][data-nodetype="component"]'
+    );
+    await expect(sidebarItems).toHaveCount(1);
+  });
+
+  test("should collect coverage to testing module and HTML report", async ({
+    page,
+    browserName,
+  }) => {
+    test.skip(browserName !== "chromium", `Skipping tests for ${browserName}`);
+    // Arrange - Prepare Storybook
+    await setForceFailureFlag(false);
+
+    const sbPage = new SbPage(page, expect);
+    await sbPage.navigateToStory("addons/group/test", "Expected Failure");
+
+    const expandButton = await page.getByLabel('Expand testing module')
+    await expandButton.click();
+
+    const storyElement = sbPage
+      .getCanvasBodyElement()
+      .getByRole("button", { name: "test" });
+    await expect(storyElement).toBeVisible({ timeout: 30000 });
+
+    // Assert - No coverage report initially
+    await expect(page.getByLabel("Open coverage report")).toHaveCount(0);
+
+    // Act - Enable coverage and run tests
+    await page.getByLabel("Open settings for Component tests").click();
+    await page.getByLabel("Coverage").click();
+    await expect(page.getByText("Settings updated")).toBeVisible({ timeout: 3000 });
+    await page.getByLabel("Close settings for Component tests").click();
+    // Wait for Vitest to have (re)started
+    await page.waitForTimeout(2000);
+
+    await page.getByLabel("Start Component tests").click();
+
+    // Assert - Coverage report is collected and shown
+    await expect(page.getByLabel("Open coverage report")).toBeVisible({ timeout: 30000 });
+    const sbPercentageText = await page.getByLabel(/percent coverage$/).textContent();
+    expect(sbPercentageText).toMatch(/^\d+\s%$/);
+    const sbPercentage = Number.parseInt(sbPercentageText!.replace(' %', '') ?? '');
+    expect(sbPercentage).toBeGreaterThanOrEqual(0);
+    expect(sbPercentage).toBeLessThanOrEqual(100);
+
+    // Act - Open HTML coverage report
+    const coverageReportLink = await page.getByLabel("Open coverage report");
+    // Remove target="_blank" attribute to open in the same tab
+    await coverageReportLink.evaluate((elem) => elem.removeAttribute("target"));
+    await page.getByLabel("Open coverage report").click();
+
+    // Assert - HTML coverage report is accessible and reports the same coverage percentage as Storybook
+    const htmlPercentageText = await page.locator('span:has(+ :text("Statements"))').first().textContent() ?? '';
+    const htmlPercentage = Number.parseFloat(htmlPercentageText.replace('% ', ''));
+    expect(Math.round(htmlPercentage)).toBe(sbPercentage);
+
+    // Cleanup - Disable coverage again
+    await page.goBack();
+    await expandButton.click();
+    await page.getByLabel("Open settings for Component tests").click();
+    await page.getByLabel("Coverage").click();
+    await expect(page.getByText("Settings updated")).toBeVisible({ timeout: 3000 });
+  });
+
+  test("should run focused test for a single story", async ({
+    page,
+    browserName,
+  }) => {
+    test.skip(browserName !== "chromium", `Skipping tests for ${browserName}`);
+    // Arrange - Prepare Storybook
+    await setForceFailureFlag(false);
+
+    const sbPage = new SbPage(page, expect);
+    await sbPage.navigateToStory("addons/group/test", "Expected Failure");
+
+    const expandButton = await page.getByLabel('Expand testing module')
+    await expandButton.click();
+
+    const storyElement = sbPage
+      .getCanvasBodyElement()
+      .getByRole("button", { name: "test" });
+    await expect(storyElement).toBeVisible({ timeout: 30000 });
+
+    // Act - Open sidebar context menu and start focused test
+    await page.locator('[data-item-id="addons-group-test--expected-failure"]').hover();
+    await page.locator('[data-item-id="addons-group-test--expected-failure"] div[data-testid="context-menu"] button').click();
+    const sidebarContextMenu = page.getByTestId('tooltip');
+    await sidebarContextMenu.getByLabel('Start Component tests').click();
+
+    // Assert - Only one test is running and reported
+    await expect(sidebarContextMenu.locator('#testing-module-description')).toContainText('Ran 1 test', { timeout: 30000 });
+    await expect(sidebarContextMenu.getByLabel('status: passed')).toHaveCount(1);
+    await page.click('body');
+    await expect(page.locator('#storybook-explorer-menu').getByRole('status', { name: 'Test status: success' })).toHaveCount(1);
+  });
+
+  test("should run focused test for a component", async ({
+    page,
+    browserName,
+  }) => {
+    test.skip(browserName !== "chromium", `Skipping tests for ${browserName}`);
+    // Arrange - Prepare Storybook
+    await setForceFailureFlag(false);
+
+    const sbPage = new SbPage(page, expect);
+    await sbPage.navigateToStory("addons/group/test", "Expected Failure");
+
+    const expandButton = await page.getByLabel('Expand testing module')
+    await expandButton.click();
+
+    const storyElement = sbPage
+      .getCanvasBodyElement()
+      .getByRole("button", { name: "test" });
+    await expect(storyElement).toBeVisible({ timeout: 30000 });
+
+    // Act - Open sidebar context menu and start focused test
+    await page.locator('[data-item-id="addons-group-test"]').hover();
+    await page.locator('[data-item-id="addons-group-test"] div[data-testid="context-menu"] button').click();
+    const sidebarContextMenu = page.getByTestId('tooltip');
+    await sidebarContextMenu.getByLabel('Start Component tests').click();
+
+    // Assert - Tests are running and reported
+    await expect(sidebarContextMenu.locator('#testing-module-description')).toContainText('Ran 8 tests', { timeout: 30000 });
+    // Assert - Failing test shows as a failed status
+    await expect(sidebarContextMenu.getByText('1 story with errors')).toBeVisible();
+    await expect(sidebarContextMenu.getByLabel('status: failed')).toHaveCount(1);
+
+    await page.click('body');
+    await expect(page.locator('#storybook-explorer-menu').getByRole('status', { name: 'Test status: success' })).toHaveCount(7);
+    await expect(page.locator('#storybook-explorer-menu').getByRole('status', { name: 'Test status: error' })).toHaveCount(1);
+  });
+
+  test("should run focused test for a group", async ({
+    page,
+    browserName,
+  }) => {
+    test.skip(browserName !== "chromium", `Skipping tests for ${browserName}`);
+    // Arrange - Prepare Storybook
+    await setForceFailureFlag(false);
+
+    const sbPage = new SbPage(page, expect);
+    await sbPage.navigateToStory("addons/group/test", "Expected Failure");
+
+    const expandButton = await page.getByLabel('Expand testing module')
+    await expandButton.click();
+
+    const storyElement = sbPage
+      .getCanvasBodyElement()
+      .getByRole("button", { name: "test" });
+    await expect(storyElement).toBeVisible({ timeout: 30000 });
+
+    // Act - Open sidebar context menu and start focused test
+    await page.locator('[data-item-id="addons-group"]').hover();
+    await page.locator('[data-item-id="addons-group"] div[data-testid="context-menu"] button').click();
+    const sidebarContextMenu = page.getByTestId('tooltip');
+    await sidebarContextMenu.getByLabel('Start Component tests').click();
+
+    // Assert - Tests are running and reported
+    await expect(sidebarContextMenu.locator('#testing-module-description')).toContainText('Ran 10 test', { timeout: 30000 });
+    // Assert - 1 failing test shows as a failed status
+    await expect(sidebarContextMenu.getByText('2 stories with errors')).toBeVisible();
+    await expect(sidebarContextMenu.getByLabel('status: failed')).toHaveCount(1);
+
+    await page.click('body');
+    await expect(page.locator('#storybook-explorer-menu').getByRole('status', { name: 'Test status: success' })).toHaveCount(7);
+    await expect(page.locator('#storybook-explorer-menu').getByRole('status', { name: 'Test status: error' })).toHaveCount(1);
+  });
+
+  test("should run focused tests without coverage, even when enabled", async ({
+    page,
+    browserName,
+  }) => {
+    test.skip(browserName !== "chromium", `Skipping tests for ${browserName}`);
+    // Arrange - Prepare Storybook
+    await setForceFailureFlag(false);
+
+    const sbPage = new SbPage(page, expect);
+    await sbPage.navigateToStory("example/button", "CSF 3 Primary");
+
+    const expandButton = await page.getByLabel('Expand testing module')
+    await expandButton.click();
+
+    const storyElement = sbPage
+      .getCanvasBodyElement()
+      .getByRole("button", { name: "foo" });
+    await expect(storyElement).toBeVisible({ timeout: 30000 });
+
+    // Act - Enable coverage
+    await page.getByLabel("Open settings for Component tests").click();
+    await page.getByLabel("Coverage").click();
+    await expect(page.getByText("Settings updated")).toBeVisible({ timeout: 3000 });
+    await page.getByLabel("Close settings for Component tests").click();
+    // Wait for Vitest to have (re)started
+    await page.waitForTimeout(2000);
+
+    // Act - Open sidebar context menu and start focused test
+    await page.locator('[data-item-id="example-button--csf-3-primary"]').hover();
+    await page.locator('[data-item-id="example-button--csf-3-primary"] div[data-testid="context-menu"] button').click();
+    const sidebarContextMenu = page.getByTestId('tooltip');
+    await sidebarContextMenu.getByLabel('Start Component tests').click();
+    
+    // Arrange - Wait for test to finish and unfocus sidebar context menu
+    await expect(sidebarContextMenu.locator('#testing-module-description')).toContainText('Ran 1 test', { timeout: 30000 });
+    await page.click('body');
+    
+    // Assert - Coverage is not shown because Focused Tests shouldn't collect coverage
+    await expect(page.getByLabel("Open coverage report")).not.toBeVisible();
+    
+    // Act - Run ALL tests
+    await page.getByLabel("Start Component tests").click();
+    
+    // Arrange - Wait for tests to finish
+    await expect(page.locator('#testing-module-description')).toContainText(/Ran \d{2,} tests/, { timeout: 30000 });
+    
+    // Assert - Coverage percentage is now collected and shown because running all tests automatically re-enables coverage
+    await expect(page.getByLabel("Open coverage report")).toBeVisible({ timeout: 30000 });
+    const sbPercentageText = await page.getByLabel(/percent coverage$/).textContent();
+    expect(sbPercentageText).toMatch(/^\d+\s%$/);
+    const sbPercentage = Number.parseInt(sbPercentageText!.replace(' %', '') ?? '');
+    expect(sbPercentage).toBeGreaterThanOrEqual(0);
+    expect(sbPercentage).toBeLessThanOrEqual(100);
+  });
+
+});
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/jest.config.js b/test-storybooks/portable-stories-kitchen-sink/react/jest.config.js
index c9d02e4bb7f5..a32614de1ba9 100644
--- a/test-storybooks/portable-stories-kitchen-sink/react/jest.config.js
+++ b/test-storybooks/portable-stories-kitchen-sink/react/jest.config.js
@@ -1,4 +1,5 @@
 module.exports = {
+  testMatch: ['**/?(*.)+(test).[jt]s?(x)'],
   setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
   transform: {
     '^.+\\.(t|j)sx?$': '@swc/jest',
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/package.json b/test-storybooks/portable-stories-kitchen-sink/react/package.json
index da4d32f26d17..383364e5909a 100644
--- a/test-storybooks/portable-stories-kitchen-sink/react/package.json
+++ b/test-storybooks/portable-stories-kitchen-sink/react/package.json
@@ -9,13 +9,14 @@
     "dev": "vite",
     "jest": "jest",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "playwright": "playwright test",
+    "playwright-ct": "playwright test -c playwright-ct.config.ts",
+    "playwright-e2e": "playwright test -c playwright-e2e.config.ts",
     "preview": "vite preview",
-    "storybook": "STORYBOOK_TELEMETRY_URL=\"http://localhost:6007/event-log\" storybook dev -p 6006",
-    "vitest": "echo 'Vitest tests are implemented in the renderer directory instead!'"
+    "storybook": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" storybook dev -p 6006",
+    "vitest": "SKIP_FAIL_ON_PURPOSE=true vitest run"
   },
   "resolutions": {
-    "@playwright/test": "1.46.0",
+    "@playwright/test": "1.48.1",
     "@storybook/addon-a11y": "portal:../../../code/addons/a11y",
     "@storybook/addon-actions": "portal:../../../code/addons/actions",
     "@storybook/addon-backgrounds": "portal:../../../code/addons/backgrounds",
@@ -43,6 +44,7 @@
     "@storybook/core-webpack": "portal:../../../code/lib/core-webpack",
     "@storybook/csf-plugin": "portal:../../../code/lib/csf-plugin",
     "@storybook/ember": "portal:../../../code/frameworks/ember",
+    "@storybook/experimental-addon-test": "file:../../../code/addons/test",
     "@storybook/html": "portal:../../../code/renderers/html",
     "@storybook/html-webpack5": "portal:../../../code/frameworks/html-webpack5",
     "@storybook/instrumenter": "portal:../../../code/lib/instrumenter",
@@ -78,7 +80,7 @@
     "@storybook/web-components": "portal:../../../code/renderers/web-components",
     "@storybook/web-components-vite": "portal:../../../code/frameworks/web-components-vite",
     "@storybook/web-components-webpack5": "portal:../../../code/frameworks/web-components-webpack5",
-    "playwright": "1.46.0",
+    "playwright": "1.48.1",
     "storybook": "portal:../../../code/lib/cli"
   },
   "dependencies": {
@@ -86,10 +88,14 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-react": "1.46.0",
+    "@playwright/experimental-ct-react": "1.48.1",
+    "@playwright/test": "1.48.1",
+    "@storybook/addon-a11y": "^8.0.0",
     "@storybook/addon-actions": "^8.0.0",
+    "@storybook/addon-controls": "^8.0.0",
     "@storybook/addon-essentials": "^8.0.0",
     "@storybook/addon-interactions": "^8.0.0",
+    "@storybook/experimental-addon-test": "^8.0.0",
     "@storybook/react": "^8.0.0",
     "@storybook/react-vite": "^8.0.0",
     "@storybook/test": "^8.0.0",
@@ -103,6 +109,9 @@
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/browser": "^2.1.3",
+    "@vitest/coverage-v8": "^2.1.3",
+    "@vitest/ui": "^2.1.3",
     "cypress": "^13.6.4",
     "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -113,6 +122,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "storybook": "^8.0.0",
     "typescript": "^5.2.2",
-    "vite": "^5.1.1"
+    "vite": "^5.1.1",
+    "vitest": "^2.1.3"
   }
-}
\ No newline at end of file
+}
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/playwright.config.ts b/test-storybooks/portable-stories-kitchen-sink/react/playwright-ct.config.ts
similarity index 100%
rename from test-storybooks/portable-stories-kitchen-sink/react/playwright.config.ts
rename to test-storybooks/portable-stories-kitchen-sink/react/playwright-ct.config.ts
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/playwright-e2e.config.ts b/test-storybooks/portable-stories-kitchen-sink/react/playwright-e2e.config.ts
new file mode 100644
index 000000000000..2cab98e5196a
--- /dev/null
+++ b/test-storybooks/portable-stories-kitchen-sink/react/playwright-e2e.config.ts
@@ -0,0 +1,61 @@
+import { defineConfig, devices } from '@playwright/test';
+import path from 'node:path';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './e2e-tests',
+  outputDir: './test-results',
+  /* Maximum time one test can run for. */
+  timeout: (process.env.CI ? 60 : 30) * 1000,
+  /* Run tests in files in parallel */
+  fullyParallel: false,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  retries: 0,
+  /* Run tests serially to avoid side effects */
+  workers: 1,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [
+    ['line'],
+    [
+      'junit',
+      {
+        embedAnnotationsAsProperties: true,
+        outputFile: path.join(__dirname, '..','..','..', 'test-results'),
+      },
+    ],
+  ],
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'retain-on-failure',
+    video: 'retain-on-failure',
+    // headless: false,
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+  ],
+
+  webServer: {
+    command: 'yarn storybook',
+    url: 'http://127.0.0.1:6006',
+    reuseExistingServer: true,
+    stdout: 'pipe',
+    stderr: 'pipe',
+  },
+});
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/pre-e2e.js b/test-storybooks/portable-stories-kitchen-sink/react/pre-e2e.js
new file mode 100644
index 000000000000..a684b479b9ce
--- /dev/null
+++ b/test-storybooks/portable-stories-kitchen-sink/react/pre-e2e.js
@@ -0,0 +1,10 @@
+/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/no-var-requires */
+const fs = require("node:fs");
+const path = require("node:path");
+
+const testStoryPath = path.resolve("stories/AddonTest.stories.tsx");
+
+console.log(`Pre-e2e script: clearing ${testStoryPath}`);
+const storyContent = fs.readFileSync(testStoryPath).toString();
+fs.writeFileSync(testStoryPath, storyContent.replace("forceFailure: true", "forceFailure: false"));
\ No newline at end of file
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/stories/AddonTest.stories.tsx b/test-storybooks/portable-stories-kitchen-sink/react/stories/AddonTest.stories.tsx
new file mode 100644
index 000000000000..650b091b33cb
--- /dev/null
+++ b/test-storybooks/portable-stories-kitchen-sink/react/stories/AddonTest.stories.tsx
@@ -0,0 +1,92 @@
+import { expect } from '@storybook/test';
+import { Meta, type StoryObj } from '@storybook/react'
+import { instrument } from '@storybook/instrumenter'
+
+declare global {
+  // eslint-disable-next-line no-var
+  var __vitest_browser__: boolean;
+}
+
+const Component = () => <button>test</button>
+
+const meta = {
+  title: 'Addons/Group/Test',
+  component: Component,
+} as Meta<typeof Component>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const { pass } = instrument({
+  pass: async () => {},
+}, { intercept: true })
+
+export const ExpectedFailure: Story = {
+  args: {
+    forceFailure: false,
+  },
+  play: async ({ args }) => {
+    await pass();
+    if(args.forceFailure) {
+      throw new Error('Expected failure');
+    }
+  }
+};
+
+export const ExpectedSuccess: Story = {
+  play: async () => {
+    await pass();
+  }
+};
+
+export const LongRunning: Story = {
+  loaders: [async () => new Promise((resolve) => setTimeout(resolve, 800))],
+};
+
+// Tests will pass in browser, but fail in CLI
+export const MismatchFailure: Story = {
+  play: async () => {
+    await pass();
+    if(!globalThis.__vitest_browser__) {
+      throw new Error('Expected failure');
+    }
+  }
+};
+
+// Tests will fail in browser, but pass in CLI
+export const MismatchSuccess: Story = {
+  play: async () => {
+    await pass();
+    if(globalThis.__vitest_browser__) {
+      throw new Error('Unexpected success');
+    }
+  },
+  tags: ['fail-on-purpose'],
+};
+
+export const PreviewHeadTest: Story = {
+  play: async () => {
+    const styles = window.getComputedStyle(document.body);
+    // set in preview-head.html
+    expect(styles.backgroundColor).toBe('rgb(250, 250, 210)');
+    // set in main.js#previewHead
+    expect(styles.borderColor).toBe('rgb(255, 0, 0)');
+  }
+};
+
+export const StaticDirTest: Story = {
+  play: async () => {
+    const path = '/test-static-dirs/static.js';
+    const { staticFunction } = await import(/* @vite-ignore */path);
+    expect(staticFunction()).toBe(true);
+  }
+}
+
+export const ViteFinalTest: Story = {
+  play: async () => {
+    // @ts-expect-error TS doesn't know about the alias
+    const { aliasedFunction } = await import('test-alias');
+    expect(aliasedFunction()).toBe(true);
+  }
+}
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/stories/Button.playwright.tsx b/test-storybooks/portable-stories-kitchen-sink/react/stories/Button.playwright.tsx
index db4590c82fab..ee201e587159 100644
--- a/test-storybooks/portable-stories-kitchen-sink/react/stories/Button.playwright.tsx
+++ b/test-storybooks/portable-stories-kitchen-sink/react/stories/Button.playwright.tsx
@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
+ 
 import { createTest } from '@storybook/react/experimental-playwright';
 import { test as base, expect } from '@playwright/experimental-ct-react';
 import stories, { SingleComposedStory, WithSpanishGlobal } from './Button.stories.playwright';
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/stories/Button.stories.tsx b/test-storybooks/portable-stories-kitchen-sink/react/stories/Button.stories.tsx
index 9d2cf8230964..2c976b43cc43 100644
--- a/test-storybooks/portable-stories-kitchen-sink/react/stories/Button.stories.tsx
+++ b/test-storybooks/portable-stories-kitchen-sink/react/stories/Button.stories.tsx
@@ -67,6 +67,8 @@ export const CSF3Primary: CSF3Story<ButtonProps> = {
     size: 'large',
     primary: true,
   },
+  // Accessibility is failing for the Button
+  tags: ['fail-on-purpose'],
 };
 
 export const CSF3Button: CSF3Story<ButtonProps> = {
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/stories/OtherComponent.stories.tsx b/test-storybooks/portable-stories-kitchen-sink/react/stories/OtherComponent.stories.tsx
new file mode 100644
index 000000000000..dd410fe9c748
--- /dev/null
+++ b/test-storybooks/portable-stories-kitchen-sink/react/stories/OtherComponent.stories.tsx
@@ -0,0 +1,22 @@
+import { Meta, type StoryObj } from '@storybook/react'
+
+const Component = () => <button>test</button>
+
+const meta = {
+  title: 'Addons/Group/Other',
+  component: Component,
+} as Meta<typeof Component>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Passes: Story = {
+};
+
+export const Fails: Story = {
+  play: async () => {
+    throw new Error('Expected failure');
+  },
+  tags: ['fail-on-purpose'],
+};
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/tsconfig.json b/test-storybooks/portable-stories-kitchen-sink/react/tsconfig.json
index 1c3515e8cbe6..148ab4620ec2 100644
--- a/test-storybooks/portable-stories-kitchen-sink/react/tsconfig.json
+++ b/test-storybooks/portable-stories-kitchen-sink/react/tsconfig.json
@@ -20,6 +20,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["stories", "playwright", "cypress"],
+  "include": ["stories", "playwright", "e2e-tests", "cypress"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/vitest.workspace.ts b/test-storybooks/portable-stories-kitchen-sink/react/vitest.workspace.ts
new file mode 100644
index 000000000000..effd954bd780
--- /dev/null
+++ b/test-storybooks/portable-stories-kitchen-sink/react/vitest.workspace.ts
@@ -0,0 +1,34 @@
+import { defineWorkspace } from "vitest/config";
+import { storybookTest } from "@storybook/experimental-addon-test/vitest-plugin";
+
+export default defineWorkspace([
+  {
+    extends: "vite.config.ts",
+    plugins: [
+      storybookTest(process.env.SKIP_FAIL_ON_PURPOSE ? {
+        tags: {
+          exclude: ["fail-on-purpose"],
+        }
+      } : undefined),
+    ],
+    test: {
+      name: "storybook",
+      pool: "threads",
+      deps: {
+        optimizer: {
+          web: { 
+            enabled: false
+          }
+        }
+      },
+      browser: {
+        enabled: true,
+        name: "chromium",
+        provider: "playwright",
+        headless: true,
+      },
+      setupFiles: ["./.storybook/vitest.setup.ts"],
+      environment: "happy-dom",
+    },
+  },
+]);
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/react/yarn.lock
index e69de29bb2d1..b8242119352f 100644
--- a/test-storybooks/portable-stories-kitchen-sink/react/yarn.lock
+++ b/test-storybooks/portable-stories-kitchen-sink/react/yarn.lock
@@ -0,0 +1,9319 @@
+# This file is generated by running "yarn install" inside your project.
+# Manual changes might be lost - proceed with caution!
+
+__metadata:
+  version: 8
+  cacheKey: 10
+
+"@adobe/css-tools@npm:^4.4.0":
+  version: 4.4.0
+  resolution: "@adobe/css-tools@npm:4.4.0"
+  checksum: 10/9c6315fe9efa5075d6ddb6ded7a1424bc9c41a01f2314b6bdcc368723985fe161008d03ddcc2b27b2da50cb9c14190fbce965d15cefe5f9a31bdd43f35b52115
+  languageName: node
+  linkType: hard
+
+"@ampproject/remapping@npm:^2.2.0, @ampproject/remapping@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "@ampproject/remapping@npm:2.3.0"
+  dependencies:
+    "@jridgewell/gen-mapping": "npm:^0.3.5"
+    "@jridgewell/trace-mapping": "npm:^0.3.24"
+  checksum: 10/f3451525379c68a73eb0a1e65247fbf28c0cccd126d93af21c75fceff77773d43c0d4a2d51978fb131aff25b5f2cb41a9fe48cc296e61ae65e679c4f6918b0ab
+  languageName: node
+  linkType: hard
+
+"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.25.7":
+  version: 7.25.7
+  resolution: "@babel/code-frame@npm:7.25.7"
+  dependencies:
+    "@babel/highlight": "npm:^7.25.7"
+    picocolors: "npm:^1.0.0"
+  checksum: 10/000fb8299fb35b6217d4f6c6580dcc1fa2f6c0f82d0a54b8a029966f633a8b19b490a7a906b56a94e9d8bee91c3bc44c74c44c33fb0abaa588202f6280186291
+  languageName: node
+  linkType: hard
+
+"@babel/compat-data@npm:^7.25.7":
+  version: 7.25.8
+  resolution: "@babel/compat-data@npm:7.25.8"
+  checksum: 10/269fcb0d89e02e36c8a11e0c1b960a6b4204e88f59f20c374d28f8e318f4cd5ded42dfedc4b54162065e6a10f71c0de651f5ed3f9b45d3a4b52240196df85726
+  languageName: node
+  linkType: hard
+
+"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.18.9, @babel/core@npm:^7.23.9, @babel/core@npm:^7.25.2":
+  version: 7.25.8
+  resolution: "@babel/core@npm:7.25.8"
+  dependencies:
+    "@ampproject/remapping": "npm:^2.2.0"
+    "@babel/code-frame": "npm:^7.25.7"
+    "@babel/generator": "npm:^7.25.7"
+    "@babel/helper-compilation-targets": "npm:^7.25.7"
+    "@babel/helper-module-transforms": "npm:^7.25.7"
+    "@babel/helpers": "npm:^7.25.7"
+    "@babel/parser": "npm:^7.25.8"
+    "@babel/template": "npm:^7.25.7"
+    "@babel/traverse": "npm:^7.25.7"
+    "@babel/types": "npm:^7.25.8"
+    convert-source-map: "npm:^2.0.0"
+    debug: "npm:^4.1.0"
+    gensync: "npm:^1.0.0-beta.2"
+    json5: "npm:^2.2.3"
+    semver: "npm:^6.3.1"
+  checksum: 10/31eb1a8ca1a3cc0026060720eb290e68205d95c5c00fbd831e69ddc0810f5920b8eb2749db1889ac0a0312b6eddbf321d18a996a88858f3b75c9582bef9ec1e4
+  languageName: node
+  linkType: hard
+
+"@babel/generator@npm:^7.25.7, @babel/generator@npm:^7.7.2":
+  version: 7.25.7
+  resolution: "@babel/generator@npm:7.25.7"
+  dependencies:
+    "@babel/types": "npm:^7.25.7"
+    "@jridgewell/gen-mapping": "npm:^0.3.5"
+    "@jridgewell/trace-mapping": "npm:^0.3.25"
+    jsesc: "npm:^3.0.2"
+  checksum: 10/01542829621388077fa8a7464970c1db0f748f1482968dddf5332926afe4003f953cbe08e3bbbb0a335b11eba0126c9a81779bd1c5baed681a9ccec4ae63b217
+  languageName: node
+  linkType: hard
+
+"@babel/helper-compilation-targets@npm:^7.25.7":
+  version: 7.25.7
+  resolution: "@babel/helper-compilation-targets@npm:7.25.7"
+  dependencies:
+    "@babel/compat-data": "npm:^7.25.7"
+    "@babel/helper-validator-option": "npm:^7.25.7"
+    browserslist: "npm:^4.24.0"
+    lru-cache: "npm:^5.1.1"
+    semver: "npm:^6.3.1"
+  checksum: 10/bbf9be8480da3f9a89e36e9ea2e1c76601014c1074ccada7c2edb1adeb3b62bc402cc4abaf8d16760734b25eceb187a9510ce44f6a7a6f696ccc74f69283625b
+  languageName: node
+  linkType: hard
+
+"@babel/helper-module-imports@npm:^7.25.7":
+  version: 7.25.7
+  resolution: "@babel/helper-module-imports@npm:7.25.7"
+  dependencies:
+    "@babel/traverse": "npm:^7.25.7"
+    "@babel/types": "npm:^7.25.7"
+  checksum: 10/94556712c27058ea35a1a39e21a3a9f067cd699405b64333d7d92b2b3d2f24d6f0ffa51aedba0b908e320acb1854e70d296259622e636fb021eeae9a6d996f01
+  languageName: node
+  linkType: hard
+
+"@babel/helper-module-transforms@npm:^7.25.7":
+  version: 7.25.7
+  resolution: "@babel/helper-module-transforms@npm:7.25.7"
+  dependencies:
+    "@babel/helper-module-imports": "npm:^7.25.7"
+    "@babel/helper-simple-access": "npm:^7.25.7"
+    "@babel/helper-validator-identifier": "npm:^7.25.7"
+    "@babel/traverse": "npm:^7.25.7"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/480309b1272ceaa985de1393f0e4c41aede0d5921ca644cec5aeaf43c8e4192b6dd56a58ef6d7e9acd02a43184ab45d3b241fc8c3a0a00f9dbb30235fd8a1181
+  languageName: node
+  linkType: hard
+
+"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.25.7, @babel/helper-plugin-utils@npm:^7.8.0":
+  version: 7.25.7
+  resolution: "@babel/helper-plugin-utils@npm:7.25.7"
+  checksum: 10/e1b0ea5e67b05378d6360e3fc370e99bfb247eed9f68145b5cce541da703424e1887fb6fc60ab2f7f743c72dcbfbed79d3032af43f2c251c229c734dc2572a5b
+  languageName: node
+  linkType: hard
+
+"@babel/helper-simple-access@npm:^7.25.7":
+  version: 7.25.7
+  resolution: "@babel/helper-simple-access@npm:7.25.7"
+  dependencies:
+    "@babel/traverse": "npm:^7.25.7"
+    "@babel/types": "npm:^7.25.7"
+  checksum: 10/42da1c358f2516337a4f2927c77ebb952907543b9f85d7cb1e2b5b5f6d808cdc081ee66a73e2ecdf48c315d9b0c2a81a857d5e1923ea210b8e81aba5e6cd2b53
+  languageName: node
+  linkType: hard
+
+"@babel/helper-string-parser@npm:^7.25.7":
+  version: 7.25.7
+  resolution: "@babel/helper-string-parser@npm:7.25.7"
+  checksum: 10/2b8de9fa86c3f3090a349f1ce6e8ee2618a95355cbdafc6f228d82fa4808c84bf3d1d25290c6616d0a18b26b6cfeb6ec2aeebf01404bc8c60051d0094209f0e6
+  languageName: node
+  linkType: hard
+
+"@babel/helper-string-parser@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/helper-string-parser@npm:7.25.9"
+  checksum: 10/c28656c52bd48e8c1d9f3e8e68ecafd09d949c57755b0d353739eb4eae7ba4f7e67e92e4036f1cd43378cc1397a2c943ed7bcaf5949b04ab48607def0258b775
+  languageName: node
+  linkType: hard
+
+"@babel/helper-validator-identifier@npm:^7.25.7":
+  version: 7.25.7
+  resolution: "@babel/helper-validator-identifier@npm:7.25.7"
+  checksum: 10/ec6934cc47fc35baaeb968414a372b064f14f7b130cf6489a014c9486b0fd2549b3c6c682cc1fc35080075e8e38d96aeb40342d63d09fc1a62510c8ce25cde1e
+  languageName: node
+  linkType: hard
+
+"@babel/helper-validator-identifier@npm:^7.25.9":
+  version: 7.25.9
+  resolution: "@babel/helper-validator-identifier@npm:7.25.9"
+  checksum: 10/3f9b649be0c2fd457fa1957b694b4e69532a668866b8a0d81eabfa34ba16dbf3107b39e0e7144c55c3c652bf773ec816af8df4a61273a2bb4eb3145ca9cf478e
+  languageName: node
+  linkType: hard
+
+"@babel/helper-validator-option@npm:^7.25.7":
+  version: 7.25.7
+  resolution: "@babel/helper-validator-option@npm:7.25.7"
+  checksum: 10/3c46cbdd666d176f90a0b7e952a0c6e92184b66633336eca79aca243d1f86085ec339a6e45c3d44efa9e03f1829b470a350ddafa70926af6bbf1ac611284f8d3
+  languageName: node
+  linkType: hard
+
+"@babel/helpers@npm:^7.25.7":
+  version: 7.25.7
+  resolution: "@babel/helpers@npm:7.25.7"
+  dependencies:
+    "@babel/template": "npm:^7.25.7"
+    "@babel/types": "npm:^7.25.7"
+  checksum: 10/2632909f83aa99e8b0da4e10e5ab7fc4f0274e6497bb0f17071e004e037d25e4a595583620261dc21410a526fb32b4f7063c3e15e60ed7890a6f9b8ad52312c5
+  languageName: node
+  linkType: hard
+
+"@babel/highlight@npm:^7.25.7":
+  version: 7.25.7
+  resolution: "@babel/highlight@npm:7.25.7"
+  dependencies:
+    "@babel/helper-validator-identifier": "npm:^7.25.7"
+    chalk: "npm:^2.4.2"
+    js-tokens: "npm:^4.0.0"
+    picocolors: "npm:^1.0.0"
+  checksum: 10/823be2523d246dbf80aab3cc81c2a36c6111b16ac2949ef06789da54387824c2bfaa88c6627cdeb4ba7151d047a5d6765e49ebd0b478aba09759250111e65e08
+  languageName: node
+  linkType: hard
+
+"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.25.7, @babel/parser@npm:^7.25.8":
+  version: 7.25.8
+  resolution: "@babel/parser@npm:7.25.8"
+  dependencies:
+    "@babel/types": "npm:^7.25.8"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 10/0396eb71e379903cedb43862f84ebb1bec809c41e82b4894d2e6e83b8e8bc636ba6eff45382e615baefdb2399ede76ca82247ecc3a9877ac16eb3140074a3276
+  languageName: node
+  linkType: hard
+
+"@babel/parser@npm:^7.25.4":
+  version: 7.26.2
+  resolution: "@babel/parser@npm:7.26.2"
+  dependencies:
+    "@babel/types": "npm:^7.26.0"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 10/8baee43752a3678ad9f9e360ec845065eeee806f1fdc8e0f348a8a0e13eef0959dabed4a197c978896c493ea205c804d0a1187cc52e4a1ba017c7935bab4983d
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-syntax-async-generators@npm:^7.8.4":
+  version: 7.8.4
+  resolution: "@babel/plugin-syntax-async-generators@npm:7.8.4"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.8.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/7ed1c1d9b9e5b64ef028ea5e755c0be2d4e5e4e3d6cf7df757b9a8c4cfa4193d268176d0f1f7fbecdda6fe722885c7fda681f480f3741d8a2d26854736f05367
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-syntax-bigint@npm:^7.8.3":
+  version: 7.8.3
+  resolution: "@babel/plugin-syntax-bigint@npm:7.8.3"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.8.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/3a10849d83e47aec50f367a9e56a6b22d662ddce643334b087f9828f4c3dd73bdc5909aaeabe123fed78515767f9ca43498a0e621c438d1cd2802d7fae3c9648
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-syntax-class-properties@npm:^7.12.13":
+  version: 7.12.13
+  resolution: "@babel/plugin-syntax-class-properties@npm:7.12.13"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.12.13"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/24f34b196d6342f28d4bad303612d7ff566ab0a013ce89e775d98d6f832969462e7235f3e7eaf17678a533d4be0ba45d3ae34ab4e5a9dcbda5d98d49e5efa2fc
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-syntax-class-static-block@npm:^7.14.5":
+  version: 7.14.5
+  resolution: "@babel/plugin-syntax-class-static-block@npm:7.14.5"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.14.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/3e80814b5b6d4fe17826093918680a351c2d34398a914ce6e55d8083d72a9bdde4fbaf6a2dcea0e23a03de26dc2917ae3efd603d27099e2b98380345703bf948
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-syntax-import-attributes@npm:^7.24.7":
+  version: 7.25.7
+  resolution: "@babel/plugin-syntax-import-attributes@npm:7.25.7"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.25.7"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/7c5451e2d8351693acbc53b1e1f6951026e35899d22847a6d22424a1ee5c92c11ac6c6f209a9e18f85d7bb9267caaf2532653e892997cdcd51784106a5858b7e
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-syntax-import-meta@npm:^7.10.4":
+  version: 7.10.4
+  resolution: "@babel/plugin-syntax-import-meta@npm:7.10.4"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.10.4"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/166ac1125d10b9c0c430e4156249a13858c0366d38844883d75d27389621ebe651115cb2ceb6dc011534d5055719fa1727b59f39e1ab3ca97820eef3dcab5b9b
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-syntax-json-strings@npm:^7.8.3":
+  version: 7.8.3
+  resolution: "@babel/plugin-syntax-json-strings@npm:7.8.3"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.8.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/bf5aea1f3188c9a507e16efe030efb996853ca3cadd6512c51db7233cc58f3ac89ff8c6bdfb01d30843b161cfe7d321e1bf28da82f7ab8d7e6bc5464666f354a
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-syntax-jsx@npm:^7.7.2":
+  version: 7.25.7
+  resolution: "@babel/plugin-syntax-jsx@npm:7.25.7"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.25.7"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/243476a943a84b6b86e99076301e66f48268e8799564053e8feccab90da7944a0b42c91360216dbfb0b2958bbd0ed100d2c7b2db688dab83d19ff2745d4892eb
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-syntax-logical-assignment-operators@npm:^7.10.4":
+  version: 7.10.4
+  resolution: "@babel/plugin-syntax-logical-assignment-operators@npm:7.10.4"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.10.4"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/aff33577037e34e515911255cdbb1fd39efee33658aa00b8a5fd3a4b903585112d037cce1cc9e4632f0487dc554486106b79ccd5ea63a2e00df4363f6d4ff886
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-syntax-nullish-coalescing-operator@npm:^7.8.3":
+  version: 7.8.3
+  resolution: "@babel/plugin-syntax-nullish-coalescing-operator@npm:7.8.3"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.8.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/87aca4918916020d1fedba54c0e232de408df2644a425d153be368313fdde40d96088feed6c4e5ab72aac89be5d07fef2ddf329a15109c5eb65df006bf2580d1
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-syntax-numeric-separator@npm:^7.10.4":
+  version: 7.10.4
+  resolution: "@babel/plugin-syntax-numeric-separator@npm:7.10.4"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.10.4"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/01ec5547bd0497f76cc903ff4d6b02abc8c05f301c88d2622b6d834e33a5651aa7c7a3d80d8d57656a4588f7276eba357f6b7e006482f5b564b7a6488de493a1
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-syntax-object-rest-spread@npm:^7.8.3":
+  version: 7.8.3
+  resolution: "@babel/plugin-syntax-object-rest-spread@npm:7.8.3"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.8.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/fddcf581a57f77e80eb6b981b10658421bc321ba5f0a5b754118c6a92a5448f12a0c336f77b8abf734841e102e5126d69110a306eadb03ca3e1547cab31f5cbf
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-syntax-optional-catch-binding@npm:^7.8.3":
+  version: 7.8.3
+  resolution: "@babel/plugin-syntax-optional-catch-binding@npm:7.8.3"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.8.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/910d90e72bc90ea1ce698e89c1027fed8845212d5ab588e35ef91f13b93143845f94e2539d831dc8d8ededc14ec02f04f7bd6a8179edd43a326c784e7ed7f0b9
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-syntax-optional-chaining@npm:^7.8.3":
+  version: 7.8.3
+  resolution: "@babel/plugin-syntax-optional-chaining@npm:7.8.3"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.8.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/eef94d53a1453361553c1f98b68d17782861a04a392840341bc91780838dd4e695209c783631cf0de14c635758beafb6a3a65399846ffa4386bff90639347f30
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-syntax-private-property-in-object@npm:^7.14.5":
+  version: 7.14.5
+  resolution: "@babel/plugin-syntax-private-property-in-object@npm:7.14.5"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.14.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/b317174783e6e96029b743ccff2a67d63d38756876e7e5d0ba53a322e38d9ca452c13354a57de1ad476b4c066dbae699e0ca157441da611117a47af88985ecda
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-syntax-top-level-await@npm:^7.14.5":
+  version: 7.14.5
+  resolution: "@babel/plugin-syntax-top-level-await@npm:7.14.5"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.14.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/bbd1a56b095be7820029b209677b194db9b1d26691fe999856462e66b25b281f031f3dfd91b1619e9dcf95bebe336211833b854d0fb8780d618e35667c2d0d7e
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-syntax-typescript@npm:^7.7.2":
+  version: 7.25.7
+  resolution: "@babel/plugin-syntax-typescript@npm:7.25.7"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.25.7"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/f1492336230920cc4daa6e7aa3571253fb0c0fd05a1d0a7b5dc0a5b907f31945235ee8bf09c83f7738b89943a2320a61dda95e0db2b6310b07040aeda6be4f44
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-react-jsx-self@npm:^7.24.7":
+  version: 7.25.7
+  resolution: "@babel/plugin-transform-react-jsx-self@npm:7.25.7"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.25.7"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/5374a91374f8cd17e05be2a3fea36db79048402e988264afe563c136ab2b78991353f6f6e89391376431621714629eb87476ca714c298186fc6621c6cb01a458
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-react-jsx-source@npm:^7.24.7":
+  version: 7.25.7
+  resolution: "@babel/plugin-transform-react-jsx-source@npm:7.25.7"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.25.7"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 10/1d0c2b3c42ba23f90ff675de3dd32c9722cf4c940d3f39d43c68bcc9d6313b1350e6d5f2fd7f02f0aa411e484efda66ed98ea43fecf4357f80aed9356086a692
+  languageName: node
+  linkType: hard
+
+"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.17.8":
+  version: 7.25.7
+  resolution: "@babel/runtime@npm:7.25.7"
+  dependencies:
+    regenerator-runtime: "npm:^0.14.0"
+  checksum: 10/73411fe0f1bff3a962586cef05b30f49e554b6563767e6d84f7d79d605b2c20e7fc3df291a3aebef69043181a8f893afdab9e6672557a5c2d08b9377d6f678cd
+  languageName: node
+  linkType: hard
+
+"@babel/template@npm:^7.25.7, @babel/template@npm:^7.3.3":
+  version: 7.25.7
+  resolution: "@babel/template@npm:7.25.7"
+  dependencies:
+    "@babel/code-frame": "npm:^7.25.7"
+    "@babel/parser": "npm:^7.25.7"
+    "@babel/types": "npm:^7.25.7"
+  checksum: 10/49e1e88d2eac17d31ae28d6cf13d6d29c1f49384c4f056a6751c065d6565c351e62c01ce6b11fef5edb5f3a77c87e114ea7326ca384fa618b4834e10cf9b20f3
+  languageName: node
+  linkType: hard
+
+"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.25.7":
+  version: 7.25.7
+  resolution: "@babel/traverse@npm:7.25.7"
+  dependencies:
+    "@babel/code-frame": "npm:^7.25.7"
+    "@babel/generator": "npm:^7.25.7"
+    "@babel/parser": "npm:^7.25.7"
+    "@babel/template": "npm:^7.25.7"
+    "@babel/types": "npm:^7.25.7"
+    debug: "npm:^4.3.1"
+    globals: "npm:^11.1.0"
+  checksum: 10/5b2d332fcd6bc78e6500c997e79f7e2a54dfb357e06f0908cb7f0cdd9bb54e7fd3c5673f45993849d433d01ea6076a6d04b825958f0cfa01288ad55ffa5c286f
+  languageName: node
+  linkType: hard
+
+"@babel/types@npm:^7.0.0, @babel/types@npm:^7.18.9, @babel/types@npm:^7.20.7, @babel/types@npm:^7.25.7, @babel/types@npm:^7.25.8, @babel/types@npm:^7.3.3":
+  version: 7.25.8
+  resolution: "@babel/types@npm:7.25.8"
+  dependencies:
+    "@babel/helper-string-parser": "npm:^7.25.7"
+    "@babel/helper-validator-identifier": "npm:^7.25.7"
+    to-fast-properties: "npm:^2.0.0"
+  checksum: 10/973108dbb189916bb87360f2beff43ae97f1b08f1c071bc6499d363cce48b3c71674bf3b59dfd617f8c5062d1c76dc2a64232bc07b6ccef831fd0c06162d44d9
+  languageName: node
+  linkType: hard
+
+"@babel/types@npm:^7.25.4, @babel/types@npm:^7.26.0":
+  version: 7.26.0
+  resolution: "@babel/types@npm:7.26.0"
+  dependencies:
+    "@babel/helper-string-parser": "npm:^7.25.9"
+    "@babel/helper-validator-identifier": "npm:^7.25.9"
+  checksum: 10/40780741ecec886ed9edae234b5eb4976968cc70d72b4e5a40d55f83ff2cc457de20f9b0f4fe9d858350e43dab0ea496e7ef62e2b2f08df699481a76df02cd6e
+  languageName: node
+  linkType: hard
+
+"@bcoe/v8-coverage@npm:^0.2.3":
+  version: 0.2.3
+  resolution: "@bcoe/v8-coverage@npm:0.2.3"
+  checksum: 10/1a1f0e356a3bb30b5f1ced6f79c413e6ebacf130421f15fac5fcd8be5ddf98aedb4404d7f5624e3285b700e041f9ef938321f3ca4d359d5b716f96afa120d88d
+  languageName: node
+  linkType: hard
+
+"@bundled-es-modules/cookie@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "@bundled-es-modules/cookie@npm:2.0.1"
+  dependencies:
+    cookie: "npm:^0.7.2"
+  checksum: 10/0038a5e82c41bfcd722afedabeb6961a5f15747b3681d7f4b61e35eb1e33130039e10ee9250dc9c9e4d3915ce1aeee717c0fb92225111574f0a030411abc0987
+  languageName: node
+  linkType: hard
+
+"@bundled-es-modules/statuses@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "@bundled-es-modules/statuses@npm:1.0.1"
+  dependencies:
+    statuses: "npm:^2.0.1"
+  checksum: 10/9bf6a2bcf040a66fb805da0e1446041fd9def7468bb5da29c5ce02adf121a3f7cec123664308059a62a46fcaee666add83094b76df6dce72e5cafa8e6bebe60d
+  languageName: node
+  linkType: hard
+
+"@bundled-es-modules/tough-cookie@npm:^0.1.6":
+  version: 0.1.6
+  resolution: "@bundled-es-modules/tough-cookie@npm:0.1.6"
+  dependencies:
+    "@types/tough-cookie": "npm:^4.0.5"
+    tough-cookie: "npm:^4.1.4"
+  checksum: 10/4f24a820f02c08c3ca0ff21272317357152093f76f9c8cc182517f61fa426ae53dadc4d68a3d6da5078e8d73f0ff8c0907a9f994c0be756162ba9c7358533e57
+  languageName: node
+  linkType: hard
+
+"@colors/colors@npm:1.5.0":
+  version: 1.5.0
+  resolution: "@colors/colors@npm:1.5.0"
+  checksum: 10/9d226461c1e91e95f067be2bdc5e6f99cfe55a721f45afb44122e23e4b8602eeac4ff7325af6b5a369f36396ee1514d3809af3f57769066d80d83790d8e53339
+  languageName: node
+  linkType: hard
+
+"@cypress/request@npm:^3.0.4":
+  version: 3.0.5
+  resolution: "@cypress/request@npm:3.0.5"
+  dependencies:
+    aws-sign2: "npm:~0.7.0"
+    aws4: "npm:^1.8.0"
+    caseless: "npm:~0.12.0"
+    combined-stream: "npm:~1.0.6"
+    extend: "npm:~3.0.2"
+    forever-agent: "npm:~0.6.1"
+    form-data: "npm:~4.0.0"
+    http-signature: "npm:~1.4.0"
+    is-typedarray: "npm:~1.0.0"
+    isstream: "npm:~0.1.2"
+    json-stringify-safe: "npm:~5.0.1"
+    mime-types: "npm:~2.1.19"
+    performance-now: "npm:^2.1.0"
+    qs: "npm:6.13.0"
+    safe-buffer: "npm:^5.1.2"
+    tough-cookie: "npm:^4.1.3"
+    tunnel-agent: "npm:^0.6.0"
+    uuid: "npm:^8.3.2"
+  checksum: 10/41ea0de43c8be1f22b82ad8728505c8a155b8ac38be34fe404fbf1872aa631e7a990c913a5ceb4ef0e7c0d3ddd1b59f1637400379f1a50f6f79c7e70cb551574
+  languageName: node
+  linkType: hard
+
+"@cypress/xvfb@npm:^1.2.4":
+  version: 1.2.4
+  resolution: "@cypress/xvfb@npm:1.2.4"
+  dependencies:
+    debug: "npm:^3.1.0"
+    lodash.once: "npm:^4.1.1"
+  checksum: 10/cb995b069f8c4f1e7857049bda0bd73a58e0048ccaf276ef0e66d1e1c03ba6fa099b5d765ad12ea37a7e5b7685f7413a2b9a99b27891407565b915f4a2f919a7
+  languageName: node
+  linkType: hard
+
+"@esbuild/aix-ppc64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/aix-ppc64@npm:0.21.5"
+  conditions: os=aix & cpu=ppc64
+  languageName: node
+  linkType: hard
+
+"@esbuild/aix-ppc64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/aix-ppc64@npm:0.24.0"
+  conditions: os=aix & cpu=ppc64
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-arm64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/android-arm64@npm:0.21.5"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-arm64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/android-arm64@npm:0.24.0"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-arm@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/android-arm@npm:0.21.5"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-arm@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/android-arm@npm:0.24.0"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/android-x64@npm:0.21.5"
+  conditions: os=android & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/android-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/android-x64@npm:0.24.0"
+  conditions: os=android & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/darwin-arm64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/darwin-arm64@npm:0.21.5"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/darwin-arm64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/darwin-arm64@npm:0.24.0"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/darwin-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/darwin-x64@npm:0.21.5"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/darwin-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/darwin-x64@npm:0.24.0"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/freebsd-arm64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/freebsd-arm64@npm:0.21.5"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/freebsd-arm64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/freebsd-arm64@npm:0.24.0"
+  conditions: os=freebsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/freebsd-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/freebsd-x64@npm:0.21.5"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/freebsd-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/freebsd-x64@npm:0.24.0"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-arm64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-arm64@npm:0.21.5"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-arm64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-arm64@npm:0.24.0"
+  conditions: os=linux & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-arm@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-arm@npm:0.21.5"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-arm@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-arm@npm:0.24.0"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-ia32@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-ia32@npm:0.21.5"
+  conditions: os=linux & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-ia32@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-ia32@npm:0.24.0"
+  conditions: os=linux & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-loong64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-loong64@npm:0.21.5"
+  conditions: os=linux & cpu=loong64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-loong64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-loong64@npm:0.24.0"
+  conditions: os=linux & cpu=loong64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-mips64el@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-mips64el@npm:0.21.5"
+  conditions: os=linux & cpu=mips64el
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-mips64el@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-mips64el@npm:0.24.0"
+  conditions: os=linux & cpu=mips64el
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-ppc64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-ppc64@npm:0.21.5"
+  conditions: os=linux & cpu=ppc64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-ppc64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-ppc64@npm:0.24.0"
+  conditions: os=linux & cpu=ppc64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-riscv64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-riscv64@npm:0.21.5"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-riscv64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-riscv64@npm:0.24.0"
+  conditions: os=linux & cpu=riscv64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-s390x@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-s390x@npm:0.21.5"
+  conditions: os=linux & cpu=s390x
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-s390x@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-s390x@npm:0.24.0"
+  conditions: os=linux & cpu=s390x
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/linux-x64@npm:0.21.5"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/linux-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/linux-x64@npm:0.24.0"
+  conditions: os=linux & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/netbsd-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/netbsd-x64@npm:0.21.5"
+  conditions: os=netbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/netbsd-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/netbsd-x64@npm:0.24.0"
+  conditions: os=netbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/openbsd-arm64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/openbsd-arm64@npm:0.24.0"
+  conditions: os=openbsd & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/openbsd-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/openbsd-x64@npm:0.21.5"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/openbsd-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/openbsd-x64@npm:0.24.0"
+  conditions: os=openbsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/sunos-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/sunos-x64@npm:0.21.5"
+  conditions: os=sunos & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/sunos-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/sunos-x64@npm:0.24.0"
+  conditions: os=sunos & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-arm64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/win32-arm64@npm:0.21.5"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-arm64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/win32-arm64@npm:0.24.0"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-ia32@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/win32-ia32@npm:0.21.5"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-ia32@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/win32-ia32@npm:0.24.0"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-x64@npm:0.21.5":
+  version: 0.21.5
+  resolution: "@esbuild/win32-x64@npm:0.21.5"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@esbuild/win32-x64@npm:0.24.0":
+  version: 0.24.0
+  resolution: "@esbuild/win32-x64@npm:0.24.0"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@eslint-community/eslint-utils@npm:^4.2.0, @eslint-community/eslint-utils@npm:^4.4.0":
+  version: 4.4.0
+  resolution: "@eslint-community/eslint-utils@npm:4.4.0"
+  dependencies:
+    eslint-visitor-keys: "npm:^3.3.0"
+  peerDependencies:
+    eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+  checksum: 10/8d70bcdcd8cd279049183aca747d6c2ed7092a5cf0cf5916faac1ef37ffa74f0c245c2a3a3d3b9979d9dfdd4ca59257b4c5621db699d637b847a2c5e02f491c2
+  languageName: node
+  linkType: hard
+
+"@eslint-community/regexpp@npm:^4.5.1, @eslint-community/regexpp@npm:^4.6.1":
+  version: 4.11.1
+  resolution: "@eslint-community/regexpp@npm:4.11.1"
+  checksum: 10/934b6d3588c7f16b18d41efec4fdb89616c440b7e3256b8cb92cfd31ae12908600f2b986d6c1e61a84cbc10256b1dd3448cd1eec79904bd67ac365d0f1aba2e2
+  languageName: node
+  linkType: hard
+
+"@eslint/eslintrc@npm:^2.1.4":
+  version: 2.1.4
+  resolution: "@eslint/eslintrc@npm:2.1.4"
+  dependencies:
+    ajv: "npm:^6.12.4"
+    debug: "npm:^4.3.2"
+    espree: "npm:^9.6.0"
+    globals: "npm:^13.19.0"
+    ignore: "npm:^5.2.0"
+    import-fresh: "npm:^3.2.1"
+    js-yaml: "npm:^4.1.0"
+    minimatch: "npm:^3.1.2"
+    strip-json-comments: "npm:^3.1.1"
+  checksum: 10/7a3b14f4b40fc1a22624c3f84d9f467a3d9ea1ca6e9a372116cb92507e485260359465b58e25bcb6c9981b155416b98c9973ad9b796053fd7b3f776a6946bce8
+  languageName: node
+  linkType: hard
+
+"@eslint/js@npm:8.57.1":
+  version: 8.57.1
+  resolution: "@eslint/js@npm:8.57.1"
+  checksum: 10/7562b21be10c2adbfa4aa5bb2eccec2cb9ac649a3569560742202c8d1cb6c931ce634937a2f0f551e078403a1c1285d6c2c0aa345dafc986149665cd69fe8b59
+  languageName: node
+  linkType: hard
+
+"@humanwhocodes/config-array@npm:^0.13.0":
+  version: 0.13.0
+  resolution: "@humanwhocodes/config-array@npm:0.13.0"
+  dependencies:
+    "@humanwhocodes/object-schema": "npm:^2.0.3"
+    debug: "npm:^4.3.1"
+    minimatch: "npm:^3.0.5"
+  checksum: 10/524df31e61a85392a2433bf5d03164e03da26c03d009f27852e7dcfdafbc4a23f17f021dacf88e0a7a9fe04ca032017945d19b57a16e2676d9114c22a53a9d11
+  languageName: node
+  linkType: hard
+
+"@humanwhocodes/module-importer@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "@humanwhocodes/module-importer@npm:1.0.1"
+  checksum: 10/e993950e346331e5a32eefb27948ecdee2a2c4ab3f072b8f566cd213ef485dd50a3ca497050608db91006f5479e43f91a439aef68d2a313bd3ded06909c7c5b3
+  languageName: node
+  linkType: hard
+
+"@humanwhocodes/object-schema@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "@humanwhocodes/object-schema@npm:2.0.3"
+  checksum: 10/05bb99ed06c16408a45a833f03a732f59bf6184795d4efadd33238ff8699190a8c871ad1121241bb6501589a9598dc83bf25b99dcbcf41e155cdf36e35e937a3
+  languageName: node
+  linkType: hard
+
+"@inquirer/confirm@npm:^5.0.0":
+  version: 5.0.2
+  resolution: "@inquirer/confirm@npm:5.0.2"
+  dependencies:
+    "@inquirer/core": "npm:^10.1.0"
+    "@inquirer/type": "npm:^3.0.1"
+  peerDependencies:
+    "@types/node": ">=18"
+  checksum: 10/4e775b80b689adeb0b2852ed79b368ef23a82fe3d5f580a562f4af7cdf002a19e0ec1b3b95acc6d49427a72c0fcb5b6548e0cdcafe2f0d3f3d6a923e04aabd0c
+  languageName: node
+  linkType: hard
+
+"@inquirer/core@npm:^10.1.0":
+  version: 10.1.0
+  resolution: "@inquirer/core@npm:10.1.0"
+  dependencies:
+    "@inquirer/figures": "npm:^1.0.8"
+    "@inquirer/type": "npm:^3.0.1"
+    ansi-escapes: "npm:^4.3.2"
+    cli-width: "npm:^4.1.0"
+    mute-stream: "npm:^2.0.0"
+    signal-exit: "npm:^4.1.0"
+    strip-ansi: "npm:^6.0.1"
+    wrap-ansi: "npm:^6.2.0"
+    yoctocolors-cjs: "npm:^2.1.2"
+  checksum: 10/5d097d0484c1b758f788b792d29395199bdc84af3e8cd4d9273e31de2c5202839b6edf299056956044ba7fb097c4cee7b5c0288e094a380c045082b044f9946e
+  languageName: node
+  linkType: hard
+
+"@inquirer/figures@npm:^1.0.8":
+  version: 1.0.8
+  resolution: "@inquirer/figures@npm:1.0.8"
+  checksum: 10/0e5e4fbb15e799e818c598fcc3558ef076daf78662149711b046723fd6316381e95f7d5573d6ef0062095ad22c6ac98833033f0948df5c722932107a567fd9c3
+  languageName: node
+  linkType: hard
+
+"@inquirer/type@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "@inquirer/type@npm:3.0.1"
+  peerDependencies:
+    "@types/node": ">=18"
+  checksum: 10/af412f1e7541d43554b02199ae71a2039a1bff5dc51ceefd87de9ece55b199682733b28810fb4b6cb3ed4a159af4cc4a26d4bb29c58dd127e7d9dbda0797d8e7
+  languageName: node
+  linkType: hard
+
+"@isaacs/cliui@npm:^8.0.2":
+  version: 8.0.2
+  resolution: "@isaacs/cliui@npm:8.0.2"
+  dependencies:
+    string-width: "npm:^5.1.2"
+    string-width-cjs: "npm:string-width@^4.2.0"
+    strip-ansi: "npm:^7.0.1"
+    strip-ansi-cjs: "npm:strip-ansi@^6.0.1"
+    wrap-ansi: "npm:^8.1.0"
+    wrap-ansi-cjs: "npm:wrap-ansi@^7.0.0"
+  checksum: 10/e9ed5fd27c3aec1095e3a16e0c0cf148d1fee55a38665c35f7b3f86a9b5d00d042ddaabc98e8a1cb7463b9378c15f22a94eb35e99469c201453eb8375191f243
+  languageName: node
+  linkType: hard
+
+"@istanbuljs/load-nyc-config@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "@istanbuljs/load-nyc-config@npm:1.1.0"
+  dependencies:
+    camelcase: "npm:^5.3.1"
+    find-up: "npm:^4.1.0"
+    get-package-type: "npm:^0.1.0"
+    js-yaml: "npm:^3.13.1"
+    resolve-from: "npm:^5.0.0"
+  checksum: 10/b000a5acd8d4fe6e34e25c399c8bdbb5d3a202b4e10416e17bfc25e12bab90bb56d33db6089ae30569b52686f4b35ff28ef26e88e21e69821d2b85884bd055b8
+  languageName: node
+  linkType: hard
+
+"@istanbuljs/schema@npm:^0.1.2, @istanbuljs/schema@npm:^0.1.3":
+  version: 0.1.3
+  resolution: "@istanbuljs/schema@npm:0.1.3"
+  checksum: 10/a9b1e49acdf5efc2f5b2359f2df7f90c5c725f2656f16099e8b2cd3a000619ecca9fc48cf693ba789cf0fd989f6e0df6a22bc05574be4223ecdbb7997d04384b
+  languageName: node
+  linkType: hard
+
+"@jest/console@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "@jest/console@npm:29.7.0"
+  dependencies:
+    "@jest/types": "npm:^29.6.3"
+    "@types/node": "npm:*"
+    chalk: "npm:^4.0.0"
+    jest-message-util: "npm:^29.7.0"
+    jest-util: "npm:^29.7.0"
+    slash: "npm:^3.0.0"
+  checksum: 10/4a80c750e8a31f344233cb9951dee9b77bf6b89377cb131f8b3cde07ff218f504370133a5963f6a786af4d2ce7f85642db206ff7a15f99fe58df4c38ac04899e
+  languageName: node
+  linkType: hard
+
+"@jest/core@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "@jest/core@npm:29.7.0"
+  dependencies:
+    "@jest/console": "npm:^29.7.0"
+    "@jest/reporters": "npm:^29.7.0"
+    "@jest/test-result": "npm:^29.7.0"
+    "@jest/transform": "npm:^29.7.0"
+    "@jest/types": "npm:^29.6.3"
+    "@types/node": "npm:*"
+    ansi-escapes: "npm:^4.2.1"
+    chalk: "npm:^4.0.0"
+    ci-info: "npm:^3.2.0"
+    exit: "npm:^0.1.2"
+    graceful-fs: "npm:^4.2.9"
+    jest-changed-files: "npm:^29.7.0"
+    jest-config: "npm:^29.7.0"
+    jest-haste-map: "npm:^29.7.0"
+    jest-message-util: "npm:^29.7.0"
+    jest-regex-util: "npm:^29.6.3"
+    jest-resolve: "npm:^29.7.0"
+    jest-resolve-dependencies: "npm:^29.7.0"
+    jest-runner: "npm:^29.7.0"
+    jest-runtime: "npm:^29.7.0"
+    jest-snapshot: "npm:^29.7.0"
+    jest-util: "npm:^29.7.0"
+    jest-validate: "npm:^29.7.0"
+    jest-watcher: "npm:^29.7.0"
+    micromatch: "npm:^4.0.4"
+    pretty-format: "npm:^29.7.0"
+    slash: "npm:^3.0.0"
+    strip-ansi: "npm:^6.0.0"
+  peerDependencies:
+    node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+  peerDependenciesMeta:
+    node-notifier:
+      optional: true
+  checksum: 10/ab6ac2e562d083faac7d8152ec1cc4eccc80f62e9579b69ed40aedf7211a6b2d57024a6cd53c4e35fd051c39a236e86257d1d99ebdb122291969a0a04563b51e
+  languageName: node
+  linkType: hard
+
+"@jest/create-cache-key-function@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "@jest/create-cache-key-function@npm:29.7.0"
+  dependencies:
+    "@jest/types": "npm:^29.6.3"
+  checksum: 10/061ef63b13ec8c8e5d08e4456f03b5cf8c7f9c1cab4fed8402e1479153cafce6eea80420e308ef62027abb7e29b825fcfa06551856bd021d98e92e381bf91723
+  languageName: node
+  linkType: hard
+
+"@jest/environment@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "@jest/environment@npm:29.7.0"
+  dependencies:
+    "@jest/fake-timers": "npm:^29.7.0"
+    "@jest/types": "npm:^29.6.3"
+    "@types/node": "npm:*"
+    jest-mock: "npm:^29.7.0"
+  checksum: 10/90b5844a9a9d8097f2cf107b1b5e57007c552f64315da8c1f51217eeb0a9664889d3f145cdf8acf23a84f4d8309a6675e27d5b059659a004db0ea9546d1c81a8
+  languageName: node
+  linkType: hard
+
+"@jest/expect-utils@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "@jest/expect-utils@npm:29.7.0"
+  dependencies:
+    jest-get-type: "npm:^29.6.3"
+  checksum: 10/ef8d379778ef574a17bde2801a6f4469f8022a46a5f9e385191dc73bb1fc318996beaed4513fbd7055c2847227a1bed2469977821866534593a6e52a281499ee
+  languageName: node
+  linkType: hard
+
+"@jest/expect@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "@jest/expect@npm:29.7.0"
+  dependencies:
+    expect: "npm:^29.7.0"
+    jest-snapshot: "npm:^29.7.0"
+  checksum: 10/fea6c3317a8da5c840429d90bfe49d928e89c9e89fceee2149b93a11b7e9c73d2f6e4d7cdf647163da938fc4e2169e4490be6bae64952902bc7a701033fd4880
+  languageName: node
+  linkType: hard
+
+"@jest/fake-timers@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "@jest/fake-timers@npm:29.7.0"
+  dependencies:
+    "@jest/types": "npm:^29.6.3"
+    "@sinonjs/fake-timers": "npm:^10.0.2"
+    "@types/node": "npm:*"
+    jest-message-util: "npm:^29.7.0"
+    jest-mock: "npm:^29.7.0"
+    jest-util: "npm:^29.7.0"
+  checksum: 10/9b394e04ffc46f91725ecfdff34c4e043eb7a16e1d78964094c9db3fde0b1c8803e45943a980e8c740d0a3d45661906de1416ca5891a538b0660481a3a828c27
+  languageName: node
+  linkType: hard
+
+"@jest/globals@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "@jest/globals@npm:29.7.0"
+  dependencies:
+    "@jest/environment": "npm:^29.7.0"
+    "@jest/expect": "npm:^29.7.0"
+    "@jest/types": "npm:^29.6.3"
+    jest-mock: "npm:^29.7.0"
+  checksum: 10/97dbb9459135693ad3a422e65ca1c250f03d82b2a77f6207e7fa0edd2c9d2015fbe4346f3dc9ebff1678b9d8da74754d4d440b7837497f8927059c0642a22123
+  languageName: node
+  linkType: hard
+
+"@jest/reporters@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "@jest/reporters@npm:29.7.0"
+  dependencies:
+    "@bcoe/v8-coverage": "npm:^0.2.3"
+    "@jest/console": "npm:^29.7.0"
+    "@jest/test-result": "npm:^29.7.0"
+    "@jest/transform": "npm:^29.7.0"
+    "@jest/types": "npm:^29.6.3"
+    "@jridgewell/trace-mapping": "npm:^0.3.18"
+    "@types/node": "npm:*"
+    chalk: "npm:^4.0.0"
+    collect-v8-coverage: "npm:^1.0.0"
+    exit: "npm:^0.1.2"
+    glob: "npm:^7.1.3"
+    graceful-fs: "npm:^4.2.9"
+    istanbul-lib-coverage: "npm:^3.0.0"
+    istanbul-lib-instrument: "npm:^6.0.0"
+    istanbul-lib-report: "npm:^3.0.0"
+    istanbul-lib-source-maps: "npm:^4.0.0"
+    istanbul-reports: "npm:^3.1.3"
+    jest-message-util: "npm:^29.7.0"
+    jest-util: "npm:^29.7.0"
+    jest-worker: "npm:^29.7.0"
+    slash: "npm:^3.0.0"
+    string-length: "npm:^4.0.1"
+    strip-ansi: "npm:^6.0.0"
+    v8-to-istanbul: "npm:^9.0.1"
+  peerDependencies:
+    node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+  peerDependenciesMeta:
+    node-notifier:
+      optional: true
+  checksum: 10/a17d1644b26dea14445cedd45567f4ba7834f980be2ef74447204e14238f121b50d8b858fde648083d2cd8f305f81ba434ba49e37a5f4237a6f2a61180cc73dc
+  languageName: node
+  linkType: hard
+
+"@jest/schemas@npm:^29.6.3":
+  version: 29.6.3
+  resolution: "@jest/schemas@npm:29.6.3"
+  dependencies:
+    "@sinclair/typebox": "npm:^0.27.8"
+  checksum: 10/910040425f0fc93cd13e68c750b7885590b8839066dfa0cd78e7def07bbb708ad869381f725945d66f2284de5663bbecf63e8fdd856e2ae6e261ba30b1687e93
+  languageName: node
+  linkType: hard
+
+"@jest/source-map@npm:^29.6.3":
+  version: 29.6.3
+  resolution: "@jest/source-map@npm:29.6.3"
+  dependencies:
+    "@jridgewell/trace-mapping": "npm:^0.3.18"
+    callsites: "npm:^3.0.0"
+    graceful-fs: "npm:^4.2.9"
+  checksum: 10/bcc5a8697d471396c0003b0bfa09722c3cd879ad697eb9c431e6164e2ea7008238a01a07193dfe3cbb48b1d258eb7251f6efcea36f64e1ebc464ea3c03ae2deb
+  languageName: node
+  linkType: hard
+
+"@jest/test-result@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "@jest/test-result@npm:29.7.0"
+  dependencies:
+    "@jest/console": "npm:^29.7.0"
+    "@jest/types": "npm:^29.6.3"
+    "@types/istanbul-lib-coverage": "npm:^2.0.0"
+    collect-v8-coverage: "npm:^1.0.0"
+  checksum: 10/c073ab7dfe3c562bff2b8fee6cc724ccc20aa96bcd8ab48ccb2aa309b4c0c1923a9e703cea386bd6ae9b71133e92810475bb9c7c22328fc63f797ad3324ed189
+  languageName: node
+  linkType: hard
+
+"@jest/test-sequencer@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "@jest/test-sequencer@npm:29.7.0"
+  dependencies:
+    "@jest/test-result": "npm:^29.7.0"
+    graceful-fs: "npm:^4.2.9"
+    jest-haste-map: "npm:^29.7.0"
+    slash: "npm:^3.0.0"
+  checksum: 10/4420c26a0baa7035c5419b0892ff8ffe9a41b1583ec54a10db3037cd46a7e29dd3d7202f8aa9d376e9e53be5f8b1bc0d16e1de6880a6d319b033b01dc4c8f639
+  languageName: node
+  linkType: hard
+
+"@jest/transform@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "@jest/transform@npm:29.7.0"
+  dependencies:
+    "@babel/core": "npm:^7.11.6"
+    "@jest/types": "npm:^29.6.3"
+    "@jridgewell/trace-mapping": "npm:^0.3.18"
+    babel-plugin-istanbul: "npm:^6.1.1"
+    chalk: "npm:^4.0.0"
+    convert-source-map: "npm:^2.0.0"
+    fast-json-stable-stringify: "npm:^2.1.0"
+    graceful-fs: "npm:^4.2.9"
+    jest-haste-map: "npm:^29.7.0"
+    jest-regex-util: "npm:^29.6.3"
+    jest-util: "npm:^29.7.0"
+    micromatch: "npm:^4.0.4"
+    pirates: "npm:^4.0.4"
+    slash: "npm:^3.0.0"
+    write-file-atomic: "npm:^4.0.2"
+  checksum: 10/30f42293545ab037d5799c81d3e12515790bb58513d37f788ce32d53326d0d72ebf5b40f989e6896739aa50a5f77be44686e510966370d58511d5ad2637c68c1
+  languageName: node
+  linkType: hard
+
+"@jest/types@npm:^29.6.3":
+  version: 29.6.3
+  resolution: "@jest/types@npm:29.6.3"
+  dependencies:
+    "@jest/schemas": "npm:^29.6.3"
+    "@types/istanbul-lib-coverage": "npm:^2.0.0"
+    "@types/istanbul-reports": "npm:^3.0.0"
+    "@types/node": "npm:*"
+    "@types/yargs": "npm:^17.0.8"
+    chalk: "npm:^4.0.0"
+  checksum: 10/f74bf512fd09bbe2433a2ad460b04668b7075235eea9a0c77d6a42222c10a79b9747dc2b2a623f140ed40d6865a2ed8f538f3cbb75169120ea863f29a7ed76cd
+  languageName: node
+  linkType: hard
+
+"@joshwooding/vite-plugin-react-docgen-typescript@npm:0.4.2":
+  version: 0.4.2
+  resolution: "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.4.2"
+  dependencies:
+    magic-string: "npm:^0.27.0"
+    react-docgen-typescript: "npm:^2.2.2"
+  peerDependencies:
+    typescript: ">= 4.3.x"
+    vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10/0878171c598ee85997a2b9ea452715ea3df4c0faa3c646ffc0be62a772c3f4919986a9045864fe7cf2208b3f577bbe1e029f8ea3f3bf83f509be8d7a064f0396
+  languageName: node
+  linkType: hard
+
+"@jridgewell/gen-mapping@npm:^0.3.5":
+  version: 0.3.5
+  resolution: "@jridgewell/gen-mapping@npm:0.3.5"
+  dependencies:
+    "@jridgewell/set-array": "npm:^1.2.1"
+    "@jridgewell/sourcemap-codec": "npm:^1.4.10"
+    "@jridgewell/trace-mapping": "npm:^0.3.24"
+  checksum: 10/81587b3c4dd8e6c60252122937cea0c637486311f4ed208b52b62aae2e7a87598f63ec330e6cd0984af494bfb16d3f0d60d3b21d7e5b4aedd2602ff3fe9d32e2
+  languageName: node
+  linkType: hard
+
+"@jridgewell/resolve-uri@npm:^3.1.0":
+  version: 3.1.2
+  resolution: "@jridgewell/resolve-uri@npm:3.1.2"
+  checksum: 10/97106439d750a409c22c8bff822d648f6a71f3aa9bc8e5129efdc36343cd3096ddc4eeb1c62d2fe48e9bdd4db37b05d4646a17114ecebd3bbcacfa2de51c3c1d
+  languageName: node
+  linkType: hard
+
+"@jridgewell/set-array@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "@jridgewell/set-array@npm:1.2.1"
+  checksum: 10/832e513a85a588f8ed4f27d1279420d8547743cc37fcad5a5a76fc74bb895b013dfe614d0eed9cb860048e6546b798f8f2652020b4b2ba0561b05caa8c654b10
+  languageName: node
+  linkType: hard
+
+"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.13, @jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "@jridgewell/sourcemap-codec@npm:1.5.0"
+  checksum: 10/4ed6123217569a1484419ac53f6ea0d9f3b57e5b57ab30d7c267bdb27792a27eb0e4b08e84a2680aa55cc2f2b411ffd6ec3db01c44fdc6dc43aca4b55f8374fd
+  languageName: node
+  linkType: hard
+
+"@jridgewell/trace-mapping@npm:^0.3.12, @jridgewell/trace-mapping@npm:^0.3.18, @jridgewell/trace-mapping@npm:^0.3.23, @jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25":
+  version: 0.3.25
+  resolution: "@jridgewell/trace-mapping@npm:0.3.25"
+  dependencies:
+    "@jridgewell/resolve-uri": "npm:^3.1.0"
+    "@jridgewell/sourcemap-codec": "npm:^1.4.14"
+  checksum: 10/dced32160a44b49d531b80a4a2159dceab6b3ddf0c8e95a0deae4b0e894b172defa63d5ac52a19c2068e1fe7d31ea4ba931fbeec103233ecb4208953967120fc
+  languageName: node
+  linkType: hard
+
+"@mdx-js/react@npm:^3.0.0":
+  version: 3.1.0
+  resolution: "@mdx-js/react@npm:3.1.0"
+  dependencies:
+    "@types/mdx": "npm:^2.0.0"
+  peerDependencies:
+    "@types/react": ">=16"
+    react: ">=16"
+  checksum: 10/cf89d6392c76091622fb647f205e1ab5cbdf5edd4401dde7092138cefc9fbb6d61428aa63557de0bccca3695d5a8854dd4a93b34a27cb8e27369da7eaeaa3e73
+  languageName: node
+  linkType: hard
+
+"@mswjs/interceptors@npm:^0.37.0":
+  version: 0.37.3
+  resolution: "@mswjs/interceptors@npm:0.37.3"
+  dependencies:
+    "@open-draft/deferred-promise": "npm:^2.2.0"
+    "@open-draft/logger": "npm:^0.3.0"
+    "@open-draft/until": "npm:^2.0.0"
+    is-node-process: "npm:^1.2.0"
+    outvariant: "npm:^1.4.3"
+    strict-event-emitter: "npm:^0.5.1"
+  checksum: 10/3d3e2e073feead8702c18dc97e5201785865292b32bd882c4d80461adc3380483b33517c55d7c6c1e53723f5e2ecf50cca0412e6ecd2eb771f4eaabfa2138932
+  languageName: node
+  linkType: hard
+
+"@nodelib/fs.scandir@npm:2.1.5":
+  version: 2.1.5
+  resolution: "@nodelib/fs.scandir@npm:2.1.5"
+  dependencies:
+    "@nodelib/fs.stat": "npm:2.0.5"
+    run-parallel: "npm:^1.1.9"
+  checksum: 10/6ab2a9b8a1d67b067922c36f259e3b3dfd6b97b219c540877a4944549a4d49ea5ceba5663905ab5289682f1f3c15ff441d02f0447f620a42e1cb5e1937174d4b
+  languageName: node
+  linkType: hard
+
+"@nodelib/fs.stat@npm:2.0.5, @nodelib/fs.stat@npm:^2.0.2":
+  version: 2.0.5
+  resolution: "@nodelib/fs.stat@npm:2.0.5"
+  checksum: 10/012480b5ca9d97bff9261571dbbec7bbc6033f69cc92908bc1ecfad0792361a5a1994bc48674b9ef76419d056a03efadfce5a6cf6dbc0a36559571a7a483f6f0
+  languageName: node
+  linkType: hard
+
+"@nodelib/fs.walk@npm:^1.2.3, @nodelib/fs.walk@npm:^1.2.8":
+  version: 1.2.8
+  resolution: "@nodelib/fs.walk@npm:1.2.8"
+  dependencies:
+    "@nodelib/fs.scandir": "npm:2.1.5"
+    fastq: "npm:^1.6.0"
+  checksum: 10/40033e33e96e97d77fba5a238e4bba4487b8284678906a9f616b5579ddaf868a18874c0054a75402c9fbaaa033a25ceae093af58c9c30278e35c23c9479e79b0
+  languageName: node
+  linkType: hard
+
+"@npmcli/agent@npm:^2.0.0":
+  version: 2.2.2
+  resolution: "@npmcli/agent@npm:2.2.2"
+  dependencies:
+    agent-base: "npm:^7.1.0"
+    http-proxy-agent: "npm:^7.0.0"
+    https-proxy-agent: "npm:^7.0.1"
+    lru-cache: "npm:^10.0.1"
+    socks-proxy-agent: "npm:^8.0.3"
+  checksum: 10/96fc0036b101bae5032dc2a4cd832efb815ce9b33f9ee2f29909ee49d96a0026b3565f73c507a69eb8603f5cb32e0ae45a70cab1e2655990a4e06ae99f7f572a
+  languageName: node
+  linkType: hard
+
+"@npmcli/fs@npm:^3.1.0":
+  version: 3.1.1
+  resolution: "@npmcli/fs@npm:3.1.1"
+  dependencies:
+    semver: "npm:^7.3.5"
+  checksum: 10/1e0e04087049b24b38bc0b30d87a9388ee3ca1d3fdfc347c2f77d84fcfe6a51f250bc57ba2c1f614d7e4285c6c62bf8c769bc19aa0949ea39e5b043ee023b0bd
+  languageName: node
+  linkType: hard
+
+"@open-draft/deferred-promise@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "@open-draft/deferred-promise@npm:2.2.0"
+  checksum: 10/bc3bb1668a555bb87b33383cafcf207d9561e17d2ca0d9e61b7ce88e82b66e36a333d3676c1d39eb5848022c03c8145331fcdc828ba297f88cb1de9c5cef6c19
+  languageName: node
+  linkType: hard
+
+"@open-draft/logger@npm:^0.3.0":
+  version: 0.3.0
+  resolution: "@open-draft/logger@npm:0.3.0"
+  dependencies:
+    is-node-process: "npm:^1.2.0"
+    outvariant: "npm:^1.4.0"
+  checksum: 10/7a280f170bcd4e91d3eedbefe628efd10c3bd06dd2461d06a7fdbced89ef457a38785847f88cc630fb4fd7dfa176d6f77aed17e5a9b08000baff647433b5ff78
+  languageName: node
+  linkType: hard
+
+"@open-draft/until@npm:^2.0.0, @open-draft/until@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "@open-draft/until@npm:2.1.0"
+  checksum: 10/622be42950afc8e89715d0fd6d56cbdcd13e36625e23b174bd3d9f06f80e25f9adf75d6698af93bca1e1bf465b9ce00ec05214a12189b671fb9da0f58215b6f4
+  languageName: node
+  linkType: hard
+
+"@pkgjs/parseargs@npm:^0.11.0":
+  version: 0.11.0
+  resolution: "@pkgjs/parseargs@npm:0.11.0"
+  checksum: 10/115e8ceeec6bc69dff2048b35c0ab4f8bbee12d8bb6c1f4af758604586d802b6e669dcb02dda61d078de42c2b4ddce41b3d9e726d7daa6b4b850f4adbf7333ff
+  languageName: node
+  linkType: hard
+
+"@playwright/experimental-ct-core@npm:1.48.1":
+  version: 1.48.1
+  resolution: "@playwright/experimental-ct-core@npm:1.48.1"
+  dependencies:
+    playwright: "npm:1.48.1"
+    playwright-core: "npm:1.48.1"
+    vite: "npm:^5.2.8"
+  checksum: 10/a6ca8e997eb8d2bba490ba76c29300e9d5f26fb5f67678df471b335a491328f84fd2e48e2914be23d53a53cde5129b6a24237c0c3edd44db155112cd9c20092f
+  languageName: node
+  linkType: hard
+
+"@playwright/experimental-ct-react@npm:1.48.1":
+  version: 1.48.1
+  resolution: "@playwright/experimental-ct-react@npm:1.48.1"
+  dependencies:
+    "@playwright/experimental-ct-core": "npm:1.48.1"
+    "@vitejs/plugin-react": "npm:^4.2.1"
+  bin:
+    playwright: cli.js
+  checksum: 10/6b19ae040adb45078dbccd1600abc9b200085497eeb5cb2766cdb1f027513e9fb3eb00362dd58ecfe7cacf40b6db258b99bc3d1ea1321498ef820db4807fc2c4
+  languageName: node
+  linkType: hard
+
+"@playwright/test@npm:1.48.1":
+  version: 1.48.1
+  resolution: "@playwright/test@npm:1.48.1"
+  dependencies:
+    playwright: "npm:1.48.1"
+  bin:
+    playwright: cli.js
+  checksum: 10/26fe791868a965790bb39e434a799d743261fb073fa0bec49435e0f2d1aceca99dc2f408fc64b0e2d4c07984021059b27096d4477b989e990b551cf60e2652e6
+  languageName: node
+  linkType: hard
+
+"@polka/url@npm:^1.0.0-next.24":
+  version: 1.0.0-next.28
+  resolution: "@polka/url@npm:1.0.0-next.28"
+  checksum: 10/7402aaf1de781d0eb0870d50cbcd394f949aee11b38a267a5c3b4e3cfee117e920693e6e93ce24c87ae2d477a59634f39d9edde8e86471cae756839b07c79af7
+  languageName: node
+  linkType: hard
+
+"@rollup/pluginutils@npm:^5.0.2":
+  version: 5.1.2
+  resolution: "@rollup/pluginutils@npm:5.1.2"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+    estree-walker: "npm:^2.0.2"
+    picomatch: "npm:^2.3.1"
+  peerDependencies:
+    rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+  peerDependenciesMeta:
+    rollup:
+      optional: true
+  checksum: 10/cc1fe3285ab48915a6535ab2f0c90dc511bd3e63143f8e9994bb036c6c5071fd14d641cff6c89a7fde6a4faa85227d4e2cf46ee36b7d962099e0b9e4c9b8a4b0
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-android-arm-eabi@npm:4.24.0":
+  version: 4.24.0
+  resolution: "@rollup/rollup-android-arm-eabi@npm:4.24.0"
+  conditions: os=android & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-android-arm64@npm:4.24.0":
+  version: 4.24.0
+  resolution: "@rollup/rollup-android-arm64@npm:4.24.0"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-darwin-arm64@npm:4.24.0":
+  version: 4.24.0
+  resolution: "@rollup/rollup-darwin-arm64@npm:4.24.0"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-darwin-x64@npm:4.24.0":
+  version: 4.24.0
+  resolution: "@rollup/rollup-darwin-x64@npm:4.24.0"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-arm-gnueabihf@npm:4.24.0":
+  version: 4.24.0
+  resolution: "@rollup/rollup-linux-arm-gnueabihf@npm:4.24.0"
+  conditions: os=linux & cpu=arm & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-arm-musleabihf@npm:4.24.0":
+  version: 4.24.0
+  resolution: "@rollup/rollup-linux-arm-musleabihf@npm:4.24.0"
+  conditions: os=linux & cpu=arm & libc=musl
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-arm64-gnu@npm:4.24.0":
+  version: 4.24.0
+  resolution: "@rollup/rollup-linux-arm64-gnu@npm:4.24.0"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-arm64-musl@npm:4.24.0":
+  version: 4.24.0
+  resolution: "@rollup/rollup-linux-arm64-musl@npm:4.24.0"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-powerpc64le-gnu@npm:4.24.0":
+  version: 4.24.0
+  resolution: "@rollup/rollup-linux-powerpc64le-gnu@npm:4.24.0"
+  conditions: os=linux & cpu=ppc64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-riscv64-gnu@npm:4.24.0":
+  version: 4.24.0
+  resolution: "@rollup/rollup-linux-riscv64-gnu@npm:4.24.0"
+  conditions: os=linux & cpu=riscv64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-s390x-gnu@npm:4.24.0":
+  version: 4.24.0
+  resolution: "@rollup/rollup-linux-s390x-gnu@npm:4.24.0"
+  conditions: os=linux & cpu=s390x & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-x64-gnu@npm:4.24.0":
+  version: 4.24.0
+  resolution: "@rollup/rollup-linux-x64-gnu@npm:4.24.0"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-linux-x64-musl@npm:4.24.0":
+  version: 4.24.0
+  resolution: "@rollup/rollup-linux-x64-musl@npm:4.24.0"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-win32-arm64-msvc@npm:4.24.0":
+  version: 4.24.0
+  resolution: "@rollup/rollup-win32-arm64-msvc@npm:4.24.0"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-win32-ia32-msvc@npm:4.24.0":
+  version: 4.24.0
+  resolution: "@rollup/rollup-win32-ia32-msvc@npm:4.24.0"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@rollup/rollup-win32-x64-msvc@npm:4.24.0":
+  version: 4.24.0
+  resolution: "@rollup/rollup-win32-x64-msvc@npm:4.24.0"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@sinclair/typebox@npm:^0.27.8":
+  version: 0.27.8
+  resolution: "@sinclair/typebox@npm:0.27.8"
+  checksum: 10/297f95ff77c82c54de8c9907f186076e715ff2621c5222ba50b8d40a170661c0c5242c763cba2a4791f0f91cb1d8ffa53ea1d7294570cf8cd4694c0e383e484d
+  languageName: node
+  linkType: hard
+
+"@sinonjs/commons@npm:^3.0.0":
+  version: 3.0.1
+  resolution: "@sinonjs/commons@npm:3.0.1"
+  dependencies:
+    type-detect: "npm:4.0.8"
+  checksum: 10/a0af217ba7044426c78df52c23cedede6daf377586f3ac58857c565769358ab1f44ebf95ba04bbe38814fba6e316ca6f02870a009328294fc2c555d0f85a7117
+  languageName: node
+  linkType: hard
+
+"@sinonjs/fake-timers@npm:^10.0.2":
+  version: 10.3.0
+  resolution: "@sinonjs/fake-timers@npm:10.3.0"
+  dependencies:
+    "@sinonjs/commons": "npm:^3.0.0"
+  checksum: 10/78155c7bd866a85df85e22028e046b8d46cf3e840f72260954f5e3ed5bd97d66c595524305a6841ffb3f681a08f6e5cef572a2cce5442a8a232dc29fb409b83e
+  languageName: node
+  linkType: hard
+
+"@storybook/addon-a11y@portal:../../../code/addons/a11y::locator=portable-stories-react%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "@storybook/addon-a11y@portal:../../../code/addons/a11y::locator=portable-stories-react%40workspace%3A."
+  dependencies:
+    "@storybook/addon-highlight": "workspace:*"
+    "@storybook/test": "workspace:*"
+    axe-core: "npm:^4.2.0"
+    vitest-axe: "npm:^0.1.0"
+  peerDependencies:
+    storybook: "workspace:^"
+  languageName: node
+  linkType: soft
+
+"@storybook/addon-actions@portal:../../../code/addons/actions::locator=portable-stories-react%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "@storybook/addon-actions@portal:../../../code/addons/actions::locator=portable-stories-react%40workspace%3A."
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+    "@types/uuid": "npm:^9.0.1"
+    dequal: "npm:^2.0.2"
+    polished: "npm:^4.2.2"
+    uuid: "npm:^9.0.0"
+  peerDependencies:
+    storybook: "workspace:^"
+  languageName: node
+  linkType: soft
+
+"@storybook/addon-backgrounds@portal:../../../code/addons/backgrounds::locator=portable-stories-react%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "@storybook/addon-backgrounds@portal:../../../code/addons/backgrounds::locator=portable-stories-react%40workspace%3A."
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+    memoizerific: "npm:^1.11.3"
+    ts-dedent: "npm:^2.0.0"
+  peerDependencies:
+    storybook: "workspace:^"
+  languageName: node
+  linkType: soft
+
+"@storybook/addon-controls@portal:../../../code/addons/controls::locator=portable-stories-react%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "@storybook/addon-controls@portal:../../../code/addons/controls::locator=portable-stories-react%40workspace%3A."
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+    dequal: "npm:^2.0.2"
+    ts-dedent: "npm:^2.0.0"
+  peerDependencies:
+    storybook: "workspace:^"
+  languageName: node
+  linkType: soft
+
+"@storybook/addon-docs@portal:../../../code/addons/docs::locator=portable-stories-react%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "@storybook/addon-docs@portal:../../../code/addons/docs::locator=portable-stories-react%40workspace%3A."
+  dependencies:
+    "@mdx-js/react": "npm:^3.0.0"
+    "@storybook/blocks": "workspace:*"
+    "@storybook/csf-plugin": "workspace:*"
+    "@storybook/react-dom-shim": "workspace:*"
+    react: "npm:^16.8.0 || ^17.0.0 || ^18.0.0"
+    react-dom: "npm:^16.8.0 || ^17.0.0 || ^18.0.0"
+    ts-dedent: "npm:^2.0.0"
+  peerDependencies:
+    storybook: "workspace:^"
+  languageName: node
+  linkType: soft
+
+"@storybook/addon-essentials@portal:../../../code/addons/essentials::locator=portable-stories-react%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "@storybook/addon-essentials@portal:../../../code/addons/essentials::locator=portable-stories-react%40workspace%3A."
+  dependencies:
+    "@storybook/addon-actions": "workspace:*"
+    "@storybook/addon-backgrounds": "workspace:*"
+    "@storybook/addon-controls": "workspace:*"
+    "@storybook/addon-docs": "workspace:*"
+    "@storybook/addon-highlight": "workspace:*"
+    "@storybook/addon-measure": "workspace:*"
+    "@storybook/addon-outline": "workspace:*"
+    "@storybook/addon-toolbars": "workspace:*"
+    "@storybook/addon-viewport": "workspace:*"
+    ts-dedent: "npm:^2.0.0"
+  peerDependencies:
+    storybook: "workspace:^"
+  languageName: node
+  linkType: soft
+
+"@storybook/addon-highlight@portal:../../../code/addons/highlight::locator=portable-stories-react%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "@storybook/addon-highlight@portal:../../../code/addons/highlight::locator=portable-stories-react%40workspace%3A."
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+  peerDependencies:
+    storybook: "workspace:^"
+  languageName: node
+  linkType: soft
+
+"@storybook/addon-interactions@portal:../../../code/addons/interactions::locator=portable-stories-react%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "@storybook/addon-interactions@portal:../../../code/addons/interactions::locator=portable-stories-react%40workspace%3A."
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/instrumenter": "workspace:*"
+    "@storybook/test": "workspace:*"
+    polished: "npm:^4.2.2"
+    ts-dedent: "npm:^2.2.0"
+  peerDependencies:
+    storybook: "workspace:^"
+  languageName: node
+  linkType: soft
+
+"@storybook/addon-measure@portal:../../../code/addons/measure::locator=portable-stories-react%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "@storybook/addon-measure@portal:../../../code/addons/measure::locator=portable-stories-react%40workspace%3A."
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+    tiny-invariant: "npm:^1.3.1"
+  peerDependencies:
+    storybook: "workspace:^"
+  languageName: node
+  linkType: soft
+
+"@storybook/addon-outline@portal:../../../code/addons/outline::locator=portable-stories-react%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "@storybook/addon-outline@portal:../../../code/addons/outline::locator=portable-stories-react%40workspace%3A."
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+    ts-dedent: "npm:^2.0.0"
+  peerDependencies:
+    storybook: "workspace:^"
+  languageName: node
+  linkType: soft
+
+"@storybook/addon-toolbars@portal:../../../code/addons/toolbars::locator=portable-stories-react%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "@storybook/addon-toolbars@portal:../../../code/addons/toolbars::locator=portable-stories-react%40workspace%3A."
+  peerDependencies:
+    storybook: "workspace:^"
+  languageName: node
+  linkType: soft
+
+"@storybook/addon-viewport@portal:../../../code/addons/viewport::locator=portable-stories-react%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "@storybook/addon-viewport@portal:../../../code/addons/viewport::locator=portable-stories-react%40workspace%3A."
+  dependencies:
+    memoizerific: "npm:^1.11.3"
+  peerDependencies:
+    storybook: "workspace:^"
+  languageName: node
+  linkType: soft
+
+"@storybook/blocks@portal:../../../code/lib/blocks::locator=portable-stories-react%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "@storybook/blocks@portal:../../../code/lib/blocks::locator=portable-stories-react%40workspace%3A."
+  dependencies:
+    "@storybook/csf": "npm:0.1.12"
+    "@storybook/icons": "npm:^1.2.12"
+    ts-dedent: "npm:^2.0.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    storybook: "workspace:^"
+  peerDependenciesMeta:
+    react:
+      optional: true
+    react-dom:
+      optional: true
+  languageName: node
+  linkType: soft
+
+"@storybook/builder-vite@portal:../../../code/builders/builder-vite::locator=portable-stories-react%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "@storybook/builder-vite@portal:../../../code/builders/builder-vite::locator=portable-stories-react%40workspace%3A."
+  dependencies:
+    "@storybook/csf-plugin": "workspace:*"
+    browser-assert: "npm:^1.2.1"
+    ts-dedent: "npm:^2.0.0"
+  peerDependencies:
+    storybook: "workspace:^"
+    vite: ^4.0.0 || ^5.0.0 || ^6.0.0
+  languageName: node
+  linkType: soft
+
+"@storybook/components@file:../../../code/deprecated/components::locator=portable-stories-react%40workspace%3A.":
+  version: 8.5.0-alpha.20
+  resolution: "@storybook/components@file:../../../code/deprecated/components#../../../code/deprecated/components::hash=40954d&locator=portable-stories-react%40workspace%3A."
+  peerDependencies:
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+  checksum: 10/ff9107e9c84c5d522a0067f77e217a9963c4bdde27032fdd38efae906f67df7b65488969a9cee89715d49fa89213fe04a72af825ac118e72e835f4be648409ff
+  languageName: node
+  linkType: hard
+
+"@storybook/core@portal:../../../code/core::locator=portable-stories-react%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "@storybook/core@portal:../../../code/core::locator=portable-stories-react%40workspace%3A."
+  dependencies:
+    "@storybook/csf": "npm:0.1.12"
+    better-opn: "npm:^3.0.2"
+    browser-assert: "npm:^1.2.1"
+    esbuild: "npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0"
+    esbuild-register: "npm:^3.5.0"
+    jsdoc-type-pratt-parser: "npm:^4.0.0"
+    process: "npm:^0.11.10"
+    recast: "npm:^0.23.5"
+    semver: "npm:^7.6.2"
+    util: "npm:^0.12.5"
+    ws: "npm:^8.2.3"
+  peerDependencies:
+    prettier: ^2 || ^3
+  peerDependenciesMeta:
+    prettier:
+      optional: true
+  languageName: node
+  linkType: soft
+
+"@storybook/csf-plugin@portal:../../../code/lib/csf-plugin::locator=portable-stories-react%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "@storybook/csf-plugin@portal:../../../code/lib/csf-plugin::locator=portable-stories-react%40workspace%3A."
+  dependencies:
+    unplugin: "npm:^1.3.1"
+  peerDependencies:
+    storybook: "workspace:^"
+  languageName: node
+  linkType: soft
+
+"@storybook/csf@npm:0.1.12":
+  version: 0.1.12
+  resolution: "@storybook/csf@npm:0.1.12"
+  dependencies:
+    type-fest: "npm:^2.19.0"
+  checksum: 10/f661709de5bd68bfd4ced67df31ef26341168d6679bc13564cb024cfdbc8fdfa94d384267c20b3c858a3058b1ee8dbd71cea169245fcf7b28298890d6c3e1da4
+  languageName: node
+  linkType: hard
+
+"@storybook/csf@npm:^0.0.1":
+  version: 0.0.1
+  resolution: "@storybook/csf@npm:0.0.1"
+  dependencies:
+    lodash: "npm:^4.17.15"
+  checksum: 10/f6bb019bccd8abc14e45a85258158b7bd8cc525887ac8dc9151ed8c4908be3b5f5523da8a7a9b96ff11b13b6c1744e1a0e070560d63d836b950f595f9a5719d4
+  languageName: node
+  linkType: hard
+
+"@storybook/experimental-addon-test@file:../../../code/addons/test::locator=portable-stories-react%40workspace%3A.":
+  version: 8.5.0-alpha.20
+  resolution: "@storybook/experimental-addon-test@file:../../../code/addons/test#../../../code/addons/test::hash=1aa098&locator=portable-stories-react%40workspace%3A."
+  dependencies:
+    "@storybook/csf": "npm:0.1.12"
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/icons": "npm:^1.2.12"
+    "@storybook/instrumenter": "workspace:*"
+    "@storybook/test": "workspace:*"
+    polished: "npm:^4.2.2"
+    prompts: "npm:^2.4.0"
+    ts-dedent: "npm:^2.2.0"
+  peerDependencies:
+    "@vitest/browser": ^2.1.1
+    "@vitest/runner": ^2.1.1
+    storybook: "workspace:^"
+    vitest: ^2.1.1
+  peerDependenciesMeta:
+    "@vitest/browser":
+      optional: true
+    "@vitest/runner":
+      optional: true
+    vitest:
+      optional: true
+  checksum: 10/42188bb3814cae7c04df03c75994f8df971cc2ce71bda9e536211b96468bbdf2b8babc78526fdec1b2ddbd4d703118474f23c31f2bddffb6fa8947dc35ef0f19
+  languageName: node
+  linkType: hard
+
+"@storybook/global@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "@storybook/global@npm:5.0.0"
+  checksum: 10/0e7b495f4fe7f36447e793926f1c0460ec07fd66f0da68e3150da5878f6043c9eeb9b41614a45c5ec0d48d5d383c59ca8f88b6dc7882a2a784ac9b20375d8edb
+  languageName: node
+  linkType: hard
+
+"@storybook/icons@npm:^1.2.12":
+  version: 1.2.12
+  resolution: "@storybook/icons@npm:1.2.12"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 10/5df56f0856764ed7e4bb24ef7a08a8a9c93f8eedcb16dac062f1dfd3bd1fe6cb4a0aa5a0794083d95e31c04960d126a4d2028cfb4c53681bf05513bb38eae9d2
+  languageName: node
+  linkType: hard
+
+"@storybook/instrumenter@portal:../../../code/lib/instrumenter::locator=portable-stories-react%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "@storybook/instrumenter@portal:../../../code/lib/instrumenter::locator=portable-stories-react%40workspace%3A."
+  dependencies:
+    "@storybook/global": "npm:^5.0.0"
+    "@vitest/utils": "npm:^2.1.1"
+  peerDependencies:
+    storybook: "workspace:^"
+  languageName: node
+  linkType: soft
+
+"@storybook/manager-api@file:../../../code/deprecated/manager-api::locator=portable-stories-react%40workspace%3A.":
+  version: 8.5.0-alpha.20
+  resolution: "@storybook/manager-api@file:../../../code/deprecated/manager-api#../../../code/deprecated/manager-api::hash=92b213&locator=portable-stories-react%40workspace%3A."
+  peerDependencies:
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+  checksum: 10/c63e624ab2d90f2992ecb2a650d9e54ace0f7f699d425bc68f616f870651a2b5f3c6c7d66be84aaab9200a9f01686376a7532f905f0dbd4dddb5542afe855584
+  languageName: node
+  linkType: hard
+
+"@storybook/preview-api@file:../../../code/deprecated/preview-api::locator=portable-stories-react%40workspace%3A.":
+  version: 8.5.0-alpha.20
+  resolution: "@storybook/preview-api@file:../../../code/deprecated/preview-api#../../../code/deprecated/preview-api::hash=b70449&locator=portable-stories-react%40workspace%3A."
+  peerDependencies:
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+  checksum: 10/3251de34aca72eb6c82b7aa8fde6e877e0974294d97eb60f63819b890b399cd7703a4dfde151180cf81918b36b3523bdbafe0731d232bda7d77c9f3b8fc5b75b
+  languageName: node
+  linkType: hard
+
+"@storybook/react-dom-shim@portal:../../../code/lib/react-dom-shim::locator=portable-stories-react%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "@storybook/react-dom-shim@portal:../../../code/lib/react-dom-shim::locator=portable-stories-react%40workspace%3A."
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    storybook: "workspace:^"
+  languageName: node
+  linkType: soft
+
+"@storybook/react-vite@portal:../../../code/frameworks/react-vite::locator=portable-stories-react%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "@storybook/react-vite@portal:../../../code/frameworks/react-vite::locator=portable-stories-react%40workspace%3A."
+  dependencies:
+    "@joshwooding/vite-plugin-react-docgen-typescript": "npm:0.4.2"
+    "@rollup/pluginutils": "npm:^5.0.2"
+    "@storybook/builder-vite": "workspace:*"
+    "@storybook/react": "workspace:*"
+    find-up: "npm:^5.0.0"
+    magic-string: "npm:^0.30.0"
+    react-docgen: "npm:^7.0.0"
+    resolve: "npm:^1.22.8"
+    tsconfig-paths: "npm:^4.2.0"
+  peerDependencies:
+    "@storybook/test": "workspace:*"
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    storybook: "workspace:^"
+    vite: ^4.0.0 || ^5.0.0 || ^6.0.0
+  peerDependenciesMeta:
+    "@storybook/test":
+      optional: true
+  languageName: node
+  linkType: soft
+
+"@storybook/react@portal:../../../code/renderers/react::locator=portable-stories-react%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "@storybook/react@portal:../../../code/renderers/react::locator=portable-stories-react%40workspace%3A."
+  dependencies:
+    "@storybook/components": "workspace:*"
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/manager-api": "workspace:*"
+    "@storybook/preview-api": "workspace:*"
+    "@storybook/react-dom-shim": "workspace:*"
+    "@storybook/theming": "workspace:*"
+  peerDependencies:
+    "@storybook/test": "workspace:*"
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
+    storybook: "workspace:^"
+    typescript: ">= 4.2.x"
+  peerDependenciesMeta:
+    "@storybook/test":
+      optional: true
+    typescript:
+      optional: true
+  languageName: node
+  linkType: soft
+
+"@storybook/test@portal:../../../code/lib/test::locator=portable-stories-react%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "@storybook/test@portal:../../../code/lib/test::locator=portable-stories-react%40workspace%3A."
+  dependencies:
+    "@storybook/csf": "npm:0.1.12"
+    "@storybook/global": "npm:^5.0.0"
+    "@storybook/instrumenter": "workspace:*"
+    "@testing-library/dom": "npm:10.4.0"
+    "@testing-library/jest-dom": "npm:6.5.0"
+    "@testing-library/user-event": "npm:14.5.2"
+    "@vitest/expect": "npm:2.0.5"
+    "@vitest/spy": "npm:2.0.5"
+  peerDependencies:
+    storybook: "workspace:^"
+  languageName: node
+  linkType: soft
+
+"@storybook/theming@file:../../../code/deprecated/theming::locator=portable-stories-react%40workspace%3A.":
+  version: 8.5.0-alpha.20
+  resolution: "@storybook/theming@file:../../../code/deprecated/theming#../../../code/deprecated/theming::hash=db0fbd&locator=portable-stories-react%40workspace%3A."
+  peerDependencies:
+    storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
+  checksum: 10/de77ed744ce172b1007cf94b4b5ff1cf9cf8492d4ddb9ac1ca61d76b18ed73f76e911c1518c1b66ba37c8d2d4e0f63f2eb3bddc64cd0beb7d64f952a45f9b8b7
+  languageName: node
+  linkType: hard
+
+"@swc/core-darwin-arm64@npm:1.7.36":
+  version: 1.7.36
+  resolution: "@swc/core-darwin-arm64@npm:1.7.36"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@swc/core-darwin-x64@npm:1.7.36":
+  version: 1.7.36
+  resolution: "@swc/core-darwin-x64@npm:1.7.36"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@swc/core-linux-arm-gnueabihf@npm:1.7.36":
+  version: 1.7.36
+  resolution: "@swc/core-linux-arm-gnueabihf@npm:1.7.36"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@swc/core-linux-arm64-gnu@npm:1.7.36":
+  version: 1.7.36
+  resolution: "@swc/core-linux-arm64-gnu@npm:1.7.36"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@swc/core-linux-arm64-musl@npm:1.7.36":
+  version: 1.7.36
+  resolution: "@swc/core-linux-arm64-musl@npm:1.7.36"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@swc/core-linux-x64-gnu@npm:1.7.36":
+  version: 1.7.36
+  resolution: "@swc/core-linux-x64-gnu@npm:1.7.36"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@swc/core-linux-x64-musl@npm:1.7.36":
+  version: 1.7.36
+  resolution: "@swc/core-linux-x64-musl@npm:1.7.36"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@swc/core-win32-arm64-msvc@npm:1.7.36":
+  version: 1.7.36
+  resolution: "@swc/core-win32-arm64-msvc@npm:1.7.36"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@swc/core-win32-ia32-msvc@npm:1.7.36":
+  version: 1.7.36
+  resolution: "@swc/core-win32-ia32-msvc@npm:1.7.36"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@swc/core-win32-x64-msvc@npm:1.7.36":
+  version: 1.7.36
+  resolution: "@swc/core-win32-x64-msvc@npm:1.7.36"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@swc/core@npm:^1.4.2":
+  version: 1.7.36
+  resolution: "@swc/core@npm:1.7.36"
+  dependencies:
+    "@swc/core-darwin-arm64": "npm:1.7.36"
+    "@swc/core-darwin-x64": "npm:1.7.36"
+    "@swc/core-linux-arm-gnueabihf": "npm:1.7.36"
+    "@swc/core-linux-arm64-gnu": "npm:1.7.36"
+    "@swc/core-linux-arm64-musl": "npm:1.7.36"
+    "@swc/core-linux-x64-gnu": "npm:1.7.36"
+    "@swc/core-linux-x64-musl": "npm:1.7.36"
+    "@swc/core-win32-arm64-msvc": "npm:1.7.36"
+    "@swc/core-win32-ia32-msvc": "npm:1.7.36"
+    "@swc/core-win32-x64-msvc": "npm:1.7.36"
+    "@swc/counter": "npm:^0.1.3"
+    "@swc/types": "npm:^0.1.13"
+  peerDependencies:
+    "@swc/helpers": "*"
+  dependenciesMeta:
+    "@swc/core-darwin-arm64":
+      optional: true
+    "@swc/core-darwin-x64":
+      optional: true
+    "@swc/core-linux-arm-gnueabihf":
+      optional: true
+    "@swc/core-linux-arm64-gnu":
+      optional: true
+    "@swc/core-linux-arm64-musl":
+      optional: true
+    "@swc/core-linux-x64-gnu":
+      optional: true
+    "@swc/core-linux-x64-musl":
+      optional: true
+    "@swc/core-win32-arm64-msvc":
+      optional: true
+    "@swc/core-win32-ia32-msvc":
+      optional: true
+    "@swc/core-win32-x64-msvc":
+      optional: true
+  peerDependenciesMeta:
+    "@swc/helpers":
+      optional: true
+  checksum: 10/d78438192b8d956ba5d221915f81f3e31ac14d64188d2cd0f048f7c527c58fe7e04860c54f45c82b09db330e81b584b7bed17724e010495f7c4686555bdb3fa0
+  languageName: node
+  linkType: hard
+
+"@swc/counter@npm:^0.1.3":
+  version: 0.1.3
+  resolution: "@swc/counter@npm:0.1.3"
+  checksum: 10/df8f9cfba9904d3d60f511664c70d23bb323b3a0803ec9890f60133954173047ba9bdeabce28cd70ba89ccd3fd6c71c7b0bd58be85f611e1ffbe5d5c18616598
+  languageName: node
+  linkType: hard
+
+"@swc/jest@npm:^0.2.36":
+  version: 0.2.36
+  resolution: "@swc/jest@npm:0.2.36"
+  dependencies:
+    "@jest/create-cache-key-function": "npm:^29.7.0"
+    "@swc/counter": "npm:^0.1.3"
+    jsonc-parser: "npm:^3.2.0"
+  peerDependencies:
+    "@swc/core": "*"
+  checksum: 10/39c5699646f0e90400af106156e5604069e8a7d8216f2421e171837b086839176c16f69925ce6a5c4c48182005eed649bdf9664023708e169aa48814feecc0d8
+  languageName: node
+  linkType: hard
+
+"@swc/types@npm:^0.1.13":
+  version: 0.1.13
+  resolution: "@swc/types@npm:0.1.13"
+  dependencies:
+    "@swc/counter": "npm:^0.1.3"
+  checksum: 10/d0a50432917048cc69e30c82d1266e052a8e8d05ab202c5d74a5666be3748da4d2f99aaff46d91c0e3d285cf8f55270f8391cd578066fdecc3865733f8d5e14a
+  languageName: node
+  linkType: hard
+
+"@testing-library/dom@npm:10.4.0, @testing-library/dom@npm:^10.4.0":
+  version: 10.4.0
+  resolution: "@testing-library/dom@npm:10.4.0"
+  dependencies:
+    "@babel/code-frame": "npm:^7.10.4"
+    "@babel/runtime": "npm:^7.12.5"
+    "@types/aria-query": "npm:^5.0.1"
+    aria-query: "npm:5.3.0"
+    chalk: "npm:^4.1.0"
+    dom-accessibility-api: "npm:^0.5.9"
+    lz-string: "npm:^1.5.0"
+    pretty-format: "npm:^27.0.2"
+  checksum: 10/05825ee9a15b88cbdae12c137db7111c34069ed3c7a1bd03b6696cb1b37b29f6f2d2de581ebf03033e7df1ab7ebf08399310293f440a4845d95c02c0a9ecc899
+  languageName: node
+  linkType: hard
+
+"@testing-library/dom@npm:^9.0.0":
+  version: 9.3.4
+  resolution: "@testing-library/dom@npm:9.3.4"
+  dependencies:
+    "@babel/code-frame": "npm:^7.10.4"
+    "@babel/runtime": "npm:^7.12.5"
+    "@types/aria-query": "npm:^5.0.1"
+    aria-query: "npm:5.1.3"
+    chalk: "npm:^4.1.0"
+    dom-accessibility-api: "npm:^0.5.9"
+    lz-string: "npm:^1.5.0"
+    pretty-format: "npm:^27.0.2"
+  checksum: 10/510da752ea76f4a10a0a4e3a77917b0302cf03effe576cd3534cab7e796533ee2b0e9fb6fb11b911a1ebd7c70a0bb6f235bf4f816c9b82b95b8fe0cddfd10975
+  languageName: node
+  linkType: hard
+
+"@testing-library/jest-dom@npm:6.5.0":
+  version: 6.5.0
+  resolution: "@testing-library/jest-dom@npm:6.5.0"
+  dependencies:
+    "@adobe/css-tools": "npm:^4.4.0"
+    aria-query: "npm:^5.0.0"
+    chalk: "npm:^3.0.0"
+    css.escape: "npm:^1.5.1"
+    dom-accessibility-api: "npm:^0.6.3"
+    lodash: "npm:^4.17.21"
+    redent: "npm:^3.0.0"
+  checksum: 10/3d2080888af5fd7306f57448beb5a23f55d965e265b5e53394fffc112dfb0678d616a5274ff0200c46c7618f293520f86fc8562eecd8bdbc0dbb3294d63ec431
+  languageName: node
+  linkType: hard
+
+"@testing-library/react@npm:^14.2.1":
+  version: 14.3.1
+  resolution: "@testing-library/react@npm:14.3.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.12.5"
+    "@testing-library/dom": "npm:^9.0.0"
+    "@types/react-dom": "npm:^18.0.0"
+  peerDependencies:
+    react: ^18.0.0
+    react-dom: ^18.0.0
+  checksum: 10/83359dcdf9eaf067839f34604e1a181cbc14fc09f3a07672403700fcc6a900c4b8054ad1114fc24b4b9f89d84e2a09e1b7c9afce2306b1d4b4c9e30eb1cb12de
+  languageName: node
+  linkType: hard
+
+"@testing-library/user-event@npm:14.5.2, @testing-library/user-event@npm:^14.5.2":
+  version: 14.5.2
+  resolution: "@testing-library/user-event@npm:14.5.2"
+  peerDependencies:
+    "@testing-library/dom": ">=7.21.4"
+  checksum: 10/49821459d81c6bc435d97128d6386ca24f1e4b3ba8e46cb5a96fe3643efa6e002d88c1b02b7f2ec58da593e805c59b78d7fdf0db565c1f02ba782f63ee984040
+  languageName: node
+  linkType: hard
+
+"@tootallnate/once@npm:2":
+  version: 2.0.0
+  resolution: "@tootallnate/once@npm:2.0.0"
+  checksum: 10/ad87447820dd3f24825d2d947ebc03072b20a42bfc96cbafec16bff8bbda6c1a81fcb0be56d5b21968560c5359a0af4038a68ba150c3e1694fe4c109a063bed8
+  languageName: node
+  linkType: hard
+
+"@types/aria-query@npm:^5.0.1":
+  version: 5.0.4
+  resolution: "@types/aria-query@npm:5.0.4"
+  checksum: 10/c0084c389dc030daeaf0115a92ce43a3f4d42fc8fef2d0e22112d87a42798d4a15aac413019d4a63f868327d52ad6740ab99609462b442fe6b9286b172d2e82e
+  languageName: node
+  linkType: hard
+
+"@types/babel__core@npm:^7.1.14, @types/babel__core@npm:^7.18.0, @types/babel__core@npm:^7.20.5":
+  version: 7.20.5
+  resolution: "@types/babel__core@npm:7.20.5"
+  dependencies:
+    "@babel/parser": "npm:^7.20.7"
+    "@babel/types": "npm:^7.20.7"
+    "@types/babel__generator": "npm:*"
+    "@types/babel__template": "npm:*"
+    "@types/babel__traverse": "npm:*"
+  checksum: 10/c32838d280b5ab59d62557f9e331d3831f8e547ee10b4f85cb78753d97d521270cebfc73ce501e9fb27fe71884d1ba75e18658692c2f4117543f0fc4e3e118b3
+  languageName: node
+  linkType: hard
+
+"@types/babel__generator@npm:*":
+  version: 7.6.8
+  resolution: "@types/babel__generator@npm:7.6.8"
+  dependencies:
+    "@babel/types": "npm:^7.0.0"
+  checksum: 10/b53c215e9074c69d212402990b0ca8fa57595d09e10d94bda3130aa22b55d796e50449199867879e4ea0ee968f3a2099e009cfb21a726a53324483abbf25cd30
+  languageName: node
+  linkType: hard
+
+"@types/babel__template@npm:*":
+  version: 7.4.4
+  resolution: "@types/babel__template@npm:7.4.4"
+  dependencies:
+    "@babel/parser": "npm:^7.1.0"
+    "@babel/types": "npm:^7.0.0"
+  checksum: 10/d7a02d2a9b67e822694d8e6a7ddb8f2b71a1d6962dfd266554d2513eefbb205b33ca71a0d163b1caea3981ccf849211f9964d8bd0727124d18ace45aa6c9ae29
+  languageName: node
+  linkType: hard
+
+"@types/babel__traverse@npm:*, @types/babel__traverse@npm:^7.0.6, @types/babel__traverse@npm:^7.18.0":
+  version: 7.20.6
+  resolution: "@types/babel__traverse@npm:7.20.6"
+  dependencies:
+    "@babel/types": "npm:^7.20.7"
+  checksum: 10/63d13a3789aa1e783b87a8b03d9fb2c2c90078de7782422feff1631b8c2a25db626e63a63ac5a1465d47359201c73069dacb4b52149d17c568187625da3064ae
+  languageName: node
+  linkType: hard
+
+"@types/cookie@npm:^0.6.0":
+  version: 0.6.0
+  resolution: "@types/cookie@npm:0.6.0"
+  checksum: 10/b883348d5bf88695fbc2c2276b1c49859267a55cae3cf11ea1dccc1b3be15b466e637ce3242109ba27d616c77c6aa4efe521e3d557110b4fdd9bc332a12445c2
+  languageName: node
+  linkType: hard
+
+"@types/doctrine@npm:^0.0.9":
+  version: 0.0.9
+  resolution: "@types/doctrine@npm:0.0.9"
+  checksum: 10/64ef06e6eea2f4f9684d259fedbcb8bf21c954630b96ea2e04875ca42763552b0ba3b01b3dd27ec0f9ea6f8b3b0dba4965d31d5a925cd4c6225fd13a93ae9354
+  languageName: node
+  linkType: hard
+
+"@types/estree@npm:1.0.6, @types/estree@npm:^1.0.0":
+  version: 1.0.6
+  resolution: "@types/estree@npm:1.0.6"
+  checksum: 10/9d35d475095199c23e05b431bcdd1f6fec7380612aed068b14b2a08aa70494de8a9026765a5a91b1073f636fb0368f6d8973f518a31391d519e20c59388ed88d
+  languageName: node
+  linkType: hard
+
+"@types/graceful-fs@npm:^4.1.3":
+  version: 4.1.9
+  resolution: "@types/graceful-fs@npm:4.1.9"
+  dependencies:
+    "@types/node": "npm:*"
+  checksum: 10/79d746a8f053954bba36bd3d94a90c78de995d126289d656fb3271dd9f1229d33f678da04d10bce6be440494a5a73438e2e363e92802d16b8315b051036c5256
+  languageName: node
+  linkType: hard
+
+"@types/identity-obj-proxy@npm:^3":
+  version: 3.0.2
+  resolution: "@types/identity-obj-proxy@npm:3.0.2"
+  checksum: 10/77387ee587657ab24f12a1dee5c0e1386358d5c38cda5cac78bc5049340cb358e009f6254de3bbdee6a08e46f13b1552cd47a0bbd3e7a53ff469bf58a04ec6e9
+  languageName: node
+  linkType: hard
+
+"@types/istanbul-lib-coverage@npm:*, @types/istanbul-lib-coverage@npm:^2.0.0, @types/istanbul-lib-coverage@npm:^2.0.1":
+  version: 2.0.6
+  resolution: "@types/istanbul-lib-coverage@npm:2.0.6"
+  checksum: 10/3feac423fd3e5449485afac999dcfcb3d44a37c830af898b689fadc65d26526460bedb889db278e0d4d815a670331796494d073a10ee6e3a6526301fe7415778
+  languageName: node
+  linkType: hard
+
+"@types/istanbul-lib-report@npm:*":
+  version: 3.0.3
+  resolution: "@types/istanbul-lib-report@npm:3.0.3"
+  dependencies:
+    "@types/istanbul-lib-coverage": "npm:*"
+  checksum: 10/b91e9b60f865ff08cb35667a427b70f6c2c63e88105eadd29a112582942af47ed99c60610180aa8dcc22382fa405033f141c119c69b95db78c4c709fbadfeeb4
+  languageName: node
+  linkType: hard
+
+"@types/istanbul-reports@npm:^3.0.0":
+  version: 3.0.4
+  resolution: "@types/istanbul-reports@npm:3.0.4"
+  dependencies:
+    "@types/istanbul-lib-report": "npm:*"
+  checksum: 10/93eb18835770b3431f68ae9ac1ca91741ab85f7606f310a34b3586b5a34450ec038c3eed7ab19266635499594de52ff73723a54a72a75b9f7d6a956f01edee95
+  languageName: node
+  linkType: hard
+
+"@types/jsdom@npm:^20.0.0":
+  version: 20.0.1
+  resolution: "@types/jsdom@npm:20.0.1"
+  dependencies:
+    "@types/node": "npm:*"
+    "@types/tough-cookie": "npm:*"
+    parse5: "npm:^7.0.0"
+  checksum: 10/15fbb9a0bfb4a5845cf6e795f2fd12400aacfca53b8c7e5bca4a3e5e8fa8629f676327964d64258aefb127d2d8a2be86dad46359efbfca0e8c9c2b790e7f8a88
+  languageName: node
+  linkType: hard
+
+"@types/json-schema@npm:^7.0.12, @types/json-schema@npm:^7.0.9":
+  version: 7.0.15
+  resolution: "@types/json-schema@npm:7.0.15"
+  checksum: 10/1a3c3e06236e4c4aab89499c428d585527ce50c24fe8259e8b3926d3df4cfbbbcf306cfc73ddfb66cbafc973116efd15967020b0f738f63e09e64c7d260519e7
+  languageName: node
+  linkType: hard
+
+"@types/mdx@npm:^2.0.0":
+  version: 2.0.13
+  resolution: "@types/mdx@npm:2.0.13"
+  checksum: 10/b73ed5f08114879b9590dc6a9ee8b648643c57c708583cd24b2bc3cc8961361fc63139ac7e9291e7b3b6e6b45707749d01d6f9727ddec5533df75dc3b90871a4
+  languageName: node
+  linkType: hard
+
+"@types/node@npm:*":
+  version: 22.7.7
+  resolution: "@types/node@npm:22.7.7"
+  dependencies:
+    undici-types: "npm:~6.19.2"
+  checksum: 10/ada6c5f850fa09621e21923d7b17c3f3b5264c3b39c0953006f4a8b0b3d4b6d77ac02e2bbf8bae1d493abf81668804624470d895dd4483875fde8382b6eb7933
+  languageName: node
+  linkType: hard
+
+"@types/prop-types@npm:*":
+  version: 15.7.13
+  resolution: "@types/prop-types@npm:15.7.13"
+  checksum: 10/8935cad87c683c665d09a055919d617fe951cb3b2d5c00544e3a913f861a2bd8d2145b51c9aa6d2457d19f3107ab40784c40205e757232f6a80cc8b1c815513c
+  languageName: node
+  linkType: hard
+
+"@types/react-dom@npm:^18.0.0, @types/react-dom@npm:^18.2.19":
+  version: 18.3.1
+  resolution: "@types/react-dom@npm:18.3.1"
+  dependencies:
+    "@types/react": "npm:*"
+  checksum: 10/33f9ba79b26641ddf00a8699c30066b7e3573ab254e97475bf08f82fab83a6d3ce8d4ebad86afeb49bb8df3374390a9ba93125cece33badc4b3e8f7eac3c84d8
+  languageName: node
+  linkType: hard
+
+"@types/react@npm:*, @types/react@npm:^18.2.55":
+  version: 18.3.11
+  resolution: "@types/react@npm:18.3.11"
+  dependencies:
+    "@types/prop-types": "npm:*"
+    csstype: "npm:^3.0.2"
+  checksum: 10/a36f0707fdfe9fe19cbe5892bcdab0f042ecadb501ea4e1c39519943f3e74cffbd31e892d3860f5c87cf33f5f223552b246a552bed0087b95954f2cb39d5cf65
+  languageName: node
+  linkType: hard
+
+"@types/resolve@npm:^1.20.2":
+  version: 1.20.6
+  resolution: "@types/resolve@npm:1.20.6"
+  checksum: 10/dc35f5517606b6687cd971c0281ac58bdee2c50c051b030f04647d3991688be2259c304ee97e5b5d4b9936072c36767eb5933b54611a407d6557972bb6fea4f6
+  languageName: node
+  linkType: hard
+
+"@types/semver@npm:^7.3.12, @types/semver@npm:^7.5.0":
+  version: 7.5.8
+  resolution: "@types/semver@npm:7.5.8"
+  checksum: 10/3496808818ddb36deabfe4974fd343a78101fa242c4690044ccdc3b95dcf8785b494f5d628f2f47f38a702f8db9c53c67f47d7818f2be1b79f2efb09692e1178
+  languageName: node
+  linkType: hard
+
+"@types/sinonjs__fake-timers@npm:8.1.1":
+  version: 8.1.1
+  resolution: "@types/sinonjs__fake-timers@npm:8.1.1"
+  checksum: 10/567e01159b07eb19a56aa9a619bda963a3e2c1261b197b83fc664867228ce679e189450f0ae38483a08857155f94d9ae5d88e72c0f44f269103f63c2946a73ed
+  languageName: node
+  linkType: hard
+
+"@types/sizzle@npm:^2.3.2":
+  version: 2.3.8
+  resolution: "@types/sizzle@npm:2.3.8"
+  checksum: 10/2ac62443dc917f5f903cbd9afc51c7d6cc1c6569b4e1a15faf04aea5b13b486e7f208650014c3dc4fed34653eded3e00fe5abffe0e6300cbf0e8a01beebf11a6
+  languageName: node
+  linkType: hard
+
+"@types/stack-utils@npm:^2.0.0":
+  version: 2.0.3
+  resolution: "@types/stack-utils@npm:2.0.3"
+  checksum: 10/72576cc1522090fe497337c2b99d9838e320659ac57fa5560fcbdcbafcf5d0216c6b3a0a8a4ee4fdb3b1f5e3420aa4f6223ab57b82fef3578bec3206425c6cf5
+  languageName: node
+  linkType: hard
+
+"@types/statuses@npm:^2.0.4":
+  version: 2.0.5
+  resolution: "@types/statuses@npm:2.0.5"
+  checksum: 10/3f2609f660b45a878c6782f2fb2cef9f08bbd4e89194bf7512e747b8a73b056839be1ad6f64b1353765528cd8a5e93adeffc471cde24d0d9f7b528264e7154e5
+  languageName: node
+  linkType: hard
+
+"@types/tough-cookie@npm:*, @types/tough-cookie@npm:^4.0.5":
+  version: 4.0.5
+  resolution: "@types/tough-cookie@npm:4.0.5"
+  checksum: 10/01fd82efc8202670865928629697b62fe9bf0c0dcbc5b1c115831caeb073a2c0abb871ff393d7df1ae94ea41e256cb87d2a5a91fd03cdb1b0b4384e08d4ee482
+  languageName: node
+  linkType: hard
+
+"@types/uuid@npm:^9.0.1":
+  version: 9.0.8
+  resolution: "@types/uuid@npm:9.0.8"
+  checksum: 10/b8c60b7ba8250356b5088302583d1704a4e1a13558d143c549c408bf8920535602ffc12394ede77f8a8083511b023704bc66d1345792714002bfa261b17c5275
+  languageName: node
+  linkType: hard
+
+"@types/yargs-parser@npm:*":
+  version: 21.0.3
+  resolution: "@types/yargs-parser@npm:21.0.3"
+  checksum: 10/a794eb750e8ebc6273a51b12a0002de41343ffe46befef460bdbb57262d187fdf608bc6615b7b11c462c63c3ceb70abe2564c8dd8ee0f7628f38a314f74a9b9b
+  languageName: node
+  linkType: hard
+
+"@types/yargs@npm:^17.0.8":
+  version: 17.0.33
+  resolution: "@types/yargs@npm:17.0.33"
+  dependencies:
+    "@types/yargs-parser": "npm:*"
+  checksum: 10/16f6681bf4d99fb671bf56029141ed01db2862e3db9df7fc92d8bea494359ac96a1b4b1c35a836d1e95e665fb18ad753ab2015fc0db663454e8fd4e5d5e2ef91
+  languageName: node
+  linkType: hard
+
+"@types/yauzl@npm:^2.9.1":
+  version: 2.10.3
+  resolution: "@types/yauzl@npm:2.10.3"
+  dependencies:
+    "@types/node": "npm:*"
+  checksum: 10/5ee966ea7bd6b2802f31ad4281c92c4c0b6dfa593c378a2582c58541fa113bec3d70eb0696b34ad95e8e6861a884cba6c3e351285816693ed176222f840a8c08
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/eslint-plugin@npm:^6.21.0":
+  version: 6.21.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:6.21.0"
+  dependencies:
+    "@eslint-community/regexpp": "npm:^4.5.1"
+    "@typescript-eslint/scope-manager": "npm:6.21.0"
+    "@typescript-eslint/type-utils": "npm:6.21.0"
+    "@typescript-eslint/utils": "npm:6.21.0"
+    "@typescript-eslint/visitor-keys": "npm:6.21.0"
+    debug: "npm:^4.3.4"
+    graphemer: "npm:^1.4.0"
+    ignore: "npm:^5.2.4"
+    natural-compare: "npm:^1.4.0"
+    semver: "npm:^7.5.4"
+    ts-api-utils: "npm:^1.0.1"
+  peerDependencies:
+    "@typescript-eslint/parser": ^6.0.0 || ^6.0.0-alpha
+    eslint: ^7.0.0 || ^8.0.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10/a57de0f630789330204cc1531f86cfc68b391cafb1ba67c8992133f1baa2a09d629df66e71260b040de4c9a3ff1252952037093c4128b0d56c4dbb37720b4c1d
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/parser@npm:^6.21.0":
+  version: 6.21.0
+  resolution: "@typescript-eslint/parser@npm:6.21.0"
+  dependencies:
+    "@typescript-eslint/scope-manager": "npm:6.21.0"
+    "@typescript-eslint/types": "npm:6.21.0"
+    "@typescript-eslint/typescript-estree": "npm:6.21.0"
+    "@typescript-eslint/visitor-keys": "npm:6.21.0"
+    debug: "npm:^4.3.4"
+  peerDependencies:
+    eslint: ^7.0.0 || ^8.0.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10/4d51cdbc170e72275efc5ef5fce48a81ec431e4edde8374f4d0213d8d370a06823e1a61ae31d502a5f1b0d1f48fc4d29a1b1b5c2dcf809d66d3872ccf6e46ac7
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/scope-manager@npm:5.62.0":
+  version: 5.62.0
+  resolution: "@typescript-eslint/scope-manager@npm:5.62.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:5.62.0"
+    "@typescript-eslint/visitor-keys": "npm:5.62.0"
+  checksum: 10/e827770baa202223bc0387e2fd24f630690809e460435b7dc9af336c77322290a770d62bd5284260fa881c86074d6a9fd6c97b07382520b115f6786b8ed499da
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/scope-manager@npm:6.21.0":
+  version: 6.21.0
+  resolution: "@typescript-eslint/scope-manager@npm:6.21.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:6.21.0"
+    "@typescript-eslint/visitor-keys": "npm:6.21.0"
+  checksum: 10/fe91ac52ca8e09356a71dc1a2f2c326480f3cccfec6b2b6d9154c1a90651ab8ea270b07c67df5678956c3bbf0bbe7113ab68f68f21b20912ea528b1214197395
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/type-utils@npm:6.21.0":
+  version: 6.21.0
+  resolution: "@typescript-eslint/type-utils@npm:6.21.0"
+  dependencies:
+    "@typescript-eslint/typescript-estree": "npm:6.21.0"
+    "@typescript-eslint/utils": "npm:6.21.0"
+    debug: "npm:^4.3.4"
+    ts-api-utils: "npm:^1.0.1"
+  peerDependencies:
+    eslint: ^7.0.0 || ^8.0.0
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10/d03fb3ee1caa71f3ce053505f1866268d7ed79ffb7fed18623f4a1253f5b8f2ffc92636d6fd08fcbaf5bd265a6de77bf192c53105131e4724643dfc910d705fc
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/types@npm:5.62.0":
+  version: 5.62.0
+  resolution: "@typescript-eslint/types@npm:5.62.0"
+  checksum: 10/24e8443177be84823242d6729d56af2c4b47bfc664dd411a1d730506abf2150d6c31bdefbbc6d97c8f91043e3a50e0c698239dcb145b79bb6b0c34469aaf6c45
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/types@npm:6.21.0":
+  version: 6.21.0
+  resolution: "@typescript-eslint/types@npm:6.21.0"
+  checksum: 10/e26da86d6f36ca5b6ef6322619f8ec55aabcd7d43c840c977ae13ae2c964c3091fc92eb33730d8be08927c9de38466c5323e78bfb270a9ff1d3611fe821046c5
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/typescript-estree@npm:5.62.0":
+  version: 5.62.0
+  resolution: "@typescript-eslint/typescript-estree@npm:5.62.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:5.62.0"
+    "@typescript-eslint/visitor-keys": "npm:5.62.0"
+    debug: "npm:^4.3.4"
+    globby: "npm:^11.1.0"
+    is-glob: "npm:^4.0.3"
+    semver: "npm:^7.3.7"
+    tsutils: "npm:^3.21.0"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10/06c975eb5f44b43bd19fadc2e1023c50cf87038fe4c0dd989d4331c67b3ff509b17fa60a3251896668ab4d7322bdc56162a9926971218d2e1a1874d2bef9a52e
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/typescript-estree@npm:6.21.0":
+  version: 6.21.0
+  resolution: "@typescript-eslint/typescript-estree@npm:6.21.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:6.21.0"
+    "@typescript-eslint/visitor-keys": "npm:6.21.0"
+    debug: "npm:^4.3.4"
+    globby: "npm:^11.1.0"
+    is-glob: "npm:^4.0.3"
+    minimatch: "npm:9.0.3"
+    semver: "npm:^7.5.4"
+    ts-api-utils: "npm:^1.0.1"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  checksum: 10/b32fa35fca2a229e0f5f06793e5359ff9269f63e9705e858df95d55ca2cd7fdb5b3e75b284095a992c48c5fc46a1431a1a4b6747ede2dd08929dc1cbacc589b8
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/utils@npm:6.21.0":
+  version: 6.21.0
+  resolution: "@typescript-eslint/utils@npm:6.21.0"
+  dependencies:
+    "@eslint-community/eslint-utils": "npm:^4.4.0"
+    "@types/json-schema": "npm:^7.0.12"
+    "@types/semver": "npm:^7.5.0"
+    "@typescript-eslint/scope-manager": "npm:6.21.0"
+    "@typescript-eslint/types": "npm:6.21.0"
+    "@typescript-eslint/typescript-estree": "npm:6.21.0"
+    semver: "npm:^7.5.4"
+  peerDependencies:
+    eslint: ^7.0.0 || ^8.0.0
+  checksum: 10/b404a2c55a425a79d054346ae123087d30c7ecf7ed7abcf680c47bf70c1de4fabadc63434f3f460b2fa63df76bc9e4a0b9fa2383bb8a9fcd62733fb5c4e4f3e3
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/utils@npm:^5.45.0":
+  version: 5.62.0
+  resolution: "@typescript-eslint/utils@npm:5.62.0"
+  dependencies:
+    "@eslint-community/eslint-utils": "npm:^4.2.0"
+    "@types/json-schema": "npm:^7.0.9"
+    "@types/semver": "npm:^7.3.12"
+    "@typescript-eslint/scope-manager": "npm:5.62.0"
+    "@typescript-eslint/types": "npm:5.62.0"
+    "@typescript-eslint/typescript-estree": "npm:5.62.0"
+    eslint-scope: "npm:^5.1.1"
+    semver: "npm:^7.3.7"
+  peerDependencies:
+    eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
+  checksum: 10/15ef13e43998a082b15f85db979f8d3ceb1f9ce4467b8016c267b1738d5e7cdb12aa90faf4b4e6dd6486c236cf9d33c463200465cf25ff997dbc0f12358550a1
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/visitor-keys@npm:5.62.0":
+  version: 5.62.0
+  resolution: "@typescript-eslint/visitor-keys@npm:5.62.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:5.62.0"
+    eslint-visitor-keys: "npm:^3.3.0"
+  checksum: 10/dc613ab7569df9bbe0b2ca677635eb91839dfb2ca2c6fa47870a5da4f160db0b436f7ec0764362e756d4164e9445d49d5eb1ff0b87f4c058946ae9d8c92eb388
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/visitor-keys@npm:6.21.0":
+  version: 6.21.0
+  resolution: "@typescript-eslint/visitor-keys@npm:6.21.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:6.21.0"
+    eslint-visitor-keys: "npm:^3.4.1"
+  checksum: 10/30422cdc1e2ffad203df40351a031254b272f9c6f2b7e02e9bfa39e3fc2c7b1c6130333b0057412968deda17a3a68a578a78929a8139c6acef44d9d841dc72e1
+  languageName: node
+  linkType: hard
+
+"@ungap/structured-clone@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "@ungap/structured-clone@npm:1.2.0"
+  checksum: 10/c6fe89a505e513a7592e1438280db1c075764793a2397877ff1351721fe8792a966a5359769e30242b3cd023f2efb9e63ca2ca88019d73b564488cc20e3eab12
+  languageName: node
+  linkType: hard
+
+"@vitejs/plugin-react@npm:^4.2.1":
+  version: 4.3.3
+  resolution: "@vitejs/plugin-react@npm:4.3.3"
+  dependencies:
+    "@babel/core": "npm:^7.25.2"
+    "@babel/plugin-transform-react-jsx-self": "npm:^7.24.7"
+    "@babel/plugin-transform-react-jsx-source": "npm:^7.24.7"
+    "@types/babel__core": "npm:^7.20.5"
+    react-refresh: "npm:^0.14.2"
+  peerDependencies:
+    vite: ^4.2.0 || ^5.0.0
+  checksum: 10/816b47c54aefce198ce2fb2b3e63b5f158ab33b04713dbec0e780a89c5126d4ea6b08544972464c43096b16e90e7f467fcf19692fad30d4f8ca5bf9a386f38b3
+  languageName: node
+  linkType: hard
+
+"@vitest/browser@npm:^2.1.3":
+  version: 2.1.8
+  resolution: "@vitest/browser@npm:2.1.8"
+  dependencies:
+    "@testing-library/dom": "npm:^10.4.0"
+    "@testing-library/user-event": "npm:^14.5.2"
+    "@vitest/mocker": "npm:2.1.8"
+    "@vitest/utils": "npm:2.1.8"
+    magic-string: "npm:^0.30.12"
+    msw: "npm:^2.6.4"
+    sirv: "npm:^3.0.0"
+    tinyrainbow: "npm:^1.2.0"
+    ws: "npm:^8.18.0"
+  peerDependencies:
+    playwright: "*"
+    vitest: 2.1.8
+    webdriverio: "*"
+  peerDependenciesMeta:
+    playwright:
+      optional: true
+    safaridriver:
+      optional: true
+    webdriverio:
+      optional: true
+  checksum: 10/6063e02222440347bbc23b2c54e259078aa83a29869337b9ffd642be5a4321ac3ddf3c0bbe4eac5237eb0bb8b9fa17d21d2c31299376de407716e3c7dd3b704c
+  languageName: node
+  linkType: hard
+
+"@vitest/coverage-v8@npm:^2.1.3":
+  version: 2.1.8
+  resolution: "@vitest/coverage-v8@npm:2.1.8"
+  dependencies:
+    "@ampproject/remapping": "npm:^2.3.0"
+    "@bcoe/v8-coverage": "npm:^0.2.3"
+    debug: "npm:^4.3.7"
+    istanbul-lib-coverage: "npm:^3.2.2"
+    istanbul-lib-report: "npm:^3.0.1"
+    istanbul-lib-source-maps: "npm:^5.0.6"
+    istanbul-reports: "npm:^3.1.7"
+    magic-string: "npm:^0.30.12"
+    magicast: "npm:^0.3.5"
+    std-env: "npm:^3.8.0"
+    test-exclude: "npm:^7.0.1"
+    tinyrainbow: "npm:^1.2.0"
+  peerDependencies:
+    "@vitest/browser": 2.1.8
+    vitest: 2.1.8
+  peerDependenciesMeta:
+    "@vitest/browser":
+      optional: true
+  checksum: 10/2e1e7fe2a20c1eec738f6d84d890bed4aa5138094943dd1229962c2c42428a1a517c8a4ad4fb52637d7494f044440e061e9bc5982a83df95223db185d5a28f4d
+  languageName: node
+  linkType: hard
+
+"@vitest/expect@npm:2.0.5":
+  version: 2.0.5
+  resolution: "@vitest/expect@npm:2.0.5"
+  dependencies:
+    "@vitest/spy": "npm:2.0.5"
+    "@vitest/utils": "npm:2.0.5"
+    chai: "npm:^5.1.1"
+    tinyrainbow: "npm:^1.2.0"
+  checksum: 10/ca9a218f50254b2259fd16166b2d8c9ccc8ee2cc068905e6b3d6281da10967b1590cc7d34b5fa9d429297f97e740450233745583b4cc12272ff11705faf70a37
+  languageName: node
+  linkType: hard
+
+"@vitest/expect@npm:2.1.8":
+  version: 2.1.8
+  resolution: "@vitest/expect@npm:2.1.8"
+  dependencies:
+    "@vitest/spy": "npm:2.1.8"
+    "@vitest/utils": "npm:2.1.8"
+    chai: "npm:^5.1.2"
+    tinyrainbow: "npm:^1.2.0"
+  checksum: 10/3594149dd67dfac884a90f8b6a35687cdddd2f5f764562819bf7b66ae2eacfd4aa5e8914155deb4082fbe5a3792dced2fd7e59a948ffafe67acba4d2229dfe5f
+  languageName: node
+  linkType: hard
+
+"@vitest/mocker@npm:2.1.8":
+  version: 2.1.8
+  resolution: "@vitest/mocker@npm:2.1.8"
+  dependencies:
+    "@vitest/spy": "npm:2.1.8"
+    estree-walker: "npm:^3.0.3"
+    magic-string: "npm:^0.30.12"
+  peerDependencies:
+    msw: ^2.4.9
+    vite: ^5.0.0
+  peerDependenciesMeta:
+    msw:
+      optional: true
+    vite:
+      optional: true
+  checksum: 10/f04060f42102caa4cca72059e63c1ecae8b8e091aaa61a2d4a914b129fc711ada4ad117eb0184e49e363757784ed1117fdbf9f4a81a45fe575fd92769740a970
+  languageName: node
+  linkType: hard
+
+"@vitest/pretty-format@npm:2.0.5":
+  version: 2.0.5
+  resolution: "@vitest/pretty-format@npm:2.0.5"
+  dependencies:
+    tinyrainbow: "npm:^1.2.0"
+  checksum: 10/70bf452dd0b8525e658795125b3f11110bd6baadfaa38c5bb91ca763bded35ec6dc80e27964ad4e91b91be6544d35e18ea7748c1997693988f975a7283c3e9a0
+  languageName: node
+  linkType: hard
+
+"@vitest/pretty-format@npm:2.1.8, @vitest/pretty-format@npm:^2.1.8":
+  version: 2.1.8
+  resolution: "@vitest/pretty-format@npm:2.1.8"
+  dependencies:
+    tinyrainbow: "npm:^1.2.0"
+  checksum: 10/f0f60c007424194887ad398d202867d58d850154de327993925041e2972357544eea95a22e0bb3a62a470b006ff8de5f691d2078708dcd7f625e24f8a06b26e7
+  languageName: node
+  linkType: hard
+
+"@vitest/runner@npm:2.1.8":
+  version: 2.1.8
+  resolution: "@vitest/runner@npm:2.1.8"
+  dependencies:
+    "@vitest/utils": "npm:2.1.8"
+    pathe: "npm:^1.1.2"
+  checksum: 10/27f265a3ab1e20297b948b06232bfa4dc9fda44d1f9bb6206baa9e6fa643b71143ebfd2d1771570296b7ee74a12d684e529a830f545ad61235cefb454e94a8e9
+  languageName: node
+  linkType: hard
+
+"@vitest/snapshot@npm:2.1.8":
+  version: 2.1.8
+  resolution: "@vitest/snapshot@npm:2.1.8"
+  dependencies:
+    "@vitest/pretty-format": "npm:2.1.8"
+    magic-string: "npm:^0.30.12"
+    pathe: "npm:^1.1.2"
+  checksum: 10/71edf4f574d317579c605ed0a7ecab7ee96fddcebc777bd130774a770ddc692c538f9f5b3dfde89af83ecb36f7338fe880943c83cede58f55e3556768a1a0749
+  languageName: node
+  linkType: hard
+
+"@vitest/spy@npm:2.0.5":
+  version: 2.0.5
+  resolution: "@vitest/spy@npm:2.0.5"
+  dependencies:
+    tinyspy: "npm:^3.0.0"
+  checksum: 10/ed19f4c3bb4d3853241e8070979615138e24403ce4c137fa48c903b3af2c8b3ada2cc26aca9c1aa323bb314a457a8130a29acbb18dafd4e42737deefb2abf1ca
+  languageName: node
+  linkType: hard
+
+"@vitest/spy@npm:2.1.8":
+  version: 2.1.8
+  resolution: "@vitest/spy@npm:2.1.8"
+  dependencies:
+    tinyspy: "npm:^3.0.2"
+  checksum: 10/9a1cb9cf6b23c122681469b5890d91ca26fc8d74953b3d46d293a5d2a4944490106891f6a178cd732ab7a8abbda339f43681c81d1594565ecc3bf3e7f9b7735f
+  languageName: node
+  linkType: hard
+
+"@vitest/ui@npm:^2.1.3":
+  version: 2.1.8
+  resolution: "@vitest/ui@npm:2.1.8"
+  dependencies:
+    "@vitest/utils": "npm:2.1.8"
+    fflate: "npm:^0.8.2"
+    flatted: "npm:^3.3.1"
+    pathe: "npm:^1.1.2"
+    sirv: "npm:^3.0.0"
+    tinyglobby: "npm:^0.2.10"
+    tinyrainbow: "npm:^1.2.0"
+  peerDependencies:
+    vitest: 2.1.8
+  checksum: 10/7ff0532b3b0e3f93c037cad3528b8fde8a93188f3222b92faae42e0fdd996e9284b362c4e5e9d725ce0a019870d3b0b7ad80c1874f74b43ffc5a1d703803fdd8
+  languageName: node
+  linkType: hard
+
+"@vitest/utils@npm:2.0.5":
+  version: 2.0.5
+  resolution: "@vitest/utils@npm:2.0.5"
+  dependencies:
+    "@vitest/pretty-format": "npm:2.0.5"
+    estree-walker: "npm:^3.0.3"
+    loupe: "npm:^3.1.1"
+    tinyrainbow: "npm:^1.2.0"
+  checksum: 10/d631d56d29c33bc8de631166b2b6691c470187a345469dfef7048befe6027e1c6ff9552f2ee11c8a247522c325c4a64bfcc73f8f0f0c525da39cb9f190f119f8
+  languageName: node
+  linkType: hard
+
+"@vitest/utils@npm:2.1.8, @vitest/utils@npm:^2.1.1":
+  version: 2.1.8
+  resolution: "@vitest/utils@npm:2.1.8"
+  dependencies:
+    "@vitest/pretty-format": "npm:2.1.8"
+    loupe: "npm:^3.1.2"
+    tinyrainbow: "npm:^1.2.0"
+  checksum: 10/be1f4254347199fb5c1d9de8e4537dad4af3f434c033e7cd023165bd4b7e9de16fa0f86664256ab331120585df95ed6be8eea58b209b510651b49f6482051733
+  languageName: node
+  linkType: hard
+
+"abab@npm:^2.0.6":
+  version: 2.0.6
+  resolution: "abab@npm:2.0.6"
+  checksum: 10/ebe95d7278999e605823fc515a3b05d689bc72e7f825536e73c95ebf621636874c6de1b749b3c4bf866b96ccd4b3a2802efa313d0e45ad51a413c8c73247db20
+  languageName: node
+  linkType: hard
+
+"abbrev@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "abbrev@npm:2.0.0"
+  checksum: 10/ca0a54e35bea4ece0ecb68a47b312e1a9a6f772408d5bcb9051230aaa94b0460671c5b5c9cb3240eb5b7bc94c52476550eb221f65a0bbd0145bdc9f3113a6707
+  languageName: node
+  linkType: hard
+
+"acorn-globals@npm:^7.0.0":
+  version: 7.0.1
+  resolution: "acorn-globals@npm:7.0.1"
+  dependencies:
+    acorn: "npm:^8.1.0"
+    acorn-walk: "npm:^8.0.2"
+  checksum: 10/2a2998a547af6d0db5f0cdb90acaa7c3cbca6709010e02121fb8b8617c0fbd8bab0b869579903fde358ac78454356a14fadcc1a672ecb97b04b1c2ccba955ce8
+  languageName: node
+  linkType: hard
+
+"acorn-jsx@npm:^5.3.2":
+  version: 5.3.2
+  resolution: "acorn-jsx@npm:5.3.2"
+  peerDependencies:
+    acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+  checksum: 10/d4371eaef7995530b5b5ca4183ff6f062ca17901a6d3f673c9ac011b01ede37e7a1f7f61f8f5cfe709e88054757bb8f3277dc4061087cdf4f2a1f90ccbcdb977
+  languageName: node
+  linkType: hard
+
+"acorn-walk@npm:^8.0.2":
+  version: 8.3.4
+  resolution: "acorn-walk@npm:8.3.4"
+  dependencies:
+    acorn: "npm:^8.11.0"
+  checksum: 10/871386764e1451c637bb8ab9f76f4995d408057e9909be6fb5ad68537ae3375d85e6a6f170b98989f44ab3ff6c74ad120bc2779a3d577606e7a0cd2b4efcaf77
+  languageName: node
+  linkType: hard
+
+"acorn@npm:^8.1.0, acorn@npm:^8.11.0, acorn@npm:^8.12.1, acorn@npm:^8.8.1, acorn@npm:^8.9.0":
+  version: 8.13.0
+  resolution: "acorn@npm:8.13.0"
+  bin:
+    acorn: bin/acorn
+  checksum: 10/33e3a03114b02b3bc5009463b3d9549b31a90ee38ebccd5e66515830a02acf62a90edcc12abfb6c9fb3837b6c17a3ec9b72b3bf52ac31d8ad8248a4af871e0f5
+  languageName: node
+  linkType: hard
+
+"agent-base@npm:6":
+  version: 6.0.2
+  resolution: "agent-base@npm:6.0.2"
+  dependencies:
+    debug: "npm:4"
+  checksum: 10/21fb903e0917e5cb16591b4d0ef6a028a54b83ac30cd1fca58dece3d4e0990512a8723f9f83130d88a41e2af8b1f7be1386fda3ea2d181bb1a62155e75e95e23
+  languageName: node
+  linkType: hard
+
+"agent-base@npm:^7.0.2, agent-base@npm:^7.1.0, agent-base@npm:^7.1.1":
+  version: 7.1.1
+  resolution: "agent-base@npm:7.1.1"
+  dependencies:
+    debug: "npm:^4.3.4"
+  checksum: 10/c478fec8f79953f118704d007a38f2a185458853f5c45579b9669372bd0e12602e88dc2ad0233077831504f7cd6fcc8251c383375bba5eaaf563b102938bda26
+  languageName: node
+  linkType: hard
+
+"aggregate-error@npm:^3.0.0":
+  version: 3.1.0
+  resolution: "aggregate-error@npm:3.1.0"
+  dependencies:
+    clean-stack: "npm:^2.0.0"
+    indent-string: "npm:^4.0.0"
+  checksum: 10/1101a33f21baa27a2fa8e04b698271e64616b886795fd43c31068c07533c7b3facfcaf4e9e0cab3624bd88f729a592f1c901a1a229c9e490eafce411a8644b79
+  languageName: node
+  linkType: hard
+
+"ajv@npm:^6.12.4":
+  version: 6.12.6
+  resolution: "ajv@npm:6.12.6"
+  dependencies:
+    fast-deep-equal: "npm:^3.1.1"
+    fast-json-stable-stringify: "npm:^2.0.0"
+    json-schema-traverse: "npm:^0.4.1"
+    uri-js: "npm:^4.2.2"
+  checksum: 10/48d6ad21138d12eb4d16d878d630079a2bda25a04e745c07846a4ad768319533031e28872a9b3c5790fa1ec41aabdf2abed30a56e5a03ebc2cf92184b8ee306c
+  languageName: node
+  linkType: hard
+
+"ansi-colors@npm:^4.1.1":
+  version: 4.1.3
+  resolution: "ansi-colors@npm:4.1.3"
+  checksum: 10/43d6e2fc7b1c6e4dc373de708ee76311ec2e0433e7e8bd3194e7ff123ea6a747428fc61afdcf5969da5be3a5f0fd054602bec56fc0ebe249ce2fcde6e649e3c2
+  languageName: node
+  linkType: hard
+
+"ansi-escapes@npm:^4.2.1, ansi-escapes@npm:^4.3.0, ansi-escapes@npm:^4.3.2":
+  version: 4.3.2
+  resolution: "ansi-escapes@npm:4.3.2"
+  dependencies:
+    type-fest: "npm:^0.21.3"
+  checksum: 10/8661034456193ffeda0c15c8c564a9636b0c04094b7f78bd01517929c17c504090a60f7a75f949f5af91289c264d3e1001d91492c1bd58efc8e100500ce04de2
+  languageName: node
+  linkType: hard
+
+"ansi-regex@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "ansi-regex@npm:5.0.1"
+  checksum: 10/2aa4bb54caf2d622f1afdad09441695af2a83aa3fe8b8afa581d205e57ed4261c183c4d3877cee25794443fde5876417d859c108078ab788d6af7e4fe52eb66b
+  languageName: node
+  linkType: hard
+
+"ansi-regex@npm:^6.0.1":
+  version: 6.1.0
+  resolution: "ansi-regex@npm:6.1.0"
+  checksum: 10/495834a53b0856c02acd40446f7130cb0f8284f4a39afdab20d5dc42b2e198b1196119fe887beed8f9055c4ff2055e3b2f6d4641d0be018cdfb64fedf6fc1aac
+  languageName: node
+  linkType: hard
+
+"ansi-styles@npm:^3.2.1":
+  version: 3.2.1
+  resolution: "ansi-styles@npm:3.2.1"
+  dependencies:
+    color-convert: "npm:^1.9.0"
+  checksum: 10/d85ade01c10e5dd77b6c89f34ed7531da5830d2cb5882c645f330079975b716438cd7ebb81d0d6e6b4f9c577f19ae41ab55f07f19786b02f9dfd9e0377395665
+  languageName: node
+  linkType: hard
+
+"ansi-styles@npm:^4.0.0, ansi-styles@npm:^4.1.0":
+  version: 4.3.0
+  resolution: "ansi-styles@npm:4.3.0"
+  dependencies:
+    color-convert: "npm:^2.0.1"
+  checksum: 10/b4494dfbfc7e4591b4711a396bd27e540f8153914123dccb4cdbbcb514015ada63a3809f362b9d8d4f6b17a706f1d7bea3c6f974b15fa5ae76b5b502070889ff
+  languageName: node
+  linkType: hard
+
+"ansi-styles@npm:^5.0.0":
+  version: 5.2.0
+  resolution: "ansi-styles@npm:5.2.0"
+  checksum: 10/d7f4e97ce0623aea6bc0d90dcd28881ee04cba06c570b97fd3391bd7a268eedfd9d5e2dd4fdcbdd82b8105df5faf6f24aaedc08eaf3da898e702db5948f63469
+  languageName: node
+  linkType: hard
+
+"ansi-styles@npm:^6.1.0":
+  version: 6.2.1
+  resolution: "ansi-styles@npm:6.2.1"
+  checksum: 10/70fdf883b704d17a5dfc9cde206e698c16bcd74e7f196ab821511651aee4f9f76c9514bdfa6ca3a27b5e49138b89cb222a28caf3afe4567570139577f991df32
+  languageName: node
+  linkType: hard
+
+"anymatch@npm:^3.0.3":
+  version: 3.1.3
+  resolution: "anymatch@npm:3.1.3"
+  dependencies:
+    normalize-path: "npm:^3.0.0"
+    picomatch: "npm:^2.0.4"
+  checksum: 10/3e044fd6d1d26545f235a9fe4d7a534e2029d8e59fa7fd9f2a6eb21230f6b5380ea1eaf55136e60cbf8e613544b3b766e7a6fa2102e2a3a117505466e3025dc2
+  languageName: node
+  linkType: hard
+
+"arch@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "arch@npm:2.2.0"
+  checksum: 10/e35dbc6d362297000ab90930069576ba165fe63cd52383efcce14bd66c1b16a91ce849e1fd239964ed029d5e0bdfc32f68e9c7331b7df6c84ddebebfdbf242f7
+  languageName: node
+  linkType: hard
+
+"argparse@npm:^1.0.7":
+  version: 1.0.10
+  resolution: "argparse@npm:1.0.10"
+  dependencies:
+    sprintf-js: "npm:~1.0.2"
+  checksum: 10/c6a621343a553ff3779390bb5ee9c2263d6643ebcd7843227bdde6cc7adbed796eb5540ca98db19e3fd7b4714e1faa51551f8849b268bb62df27ddb15cbcd91e
+  languageName: node
+  linkType: hard
+
+"argparse@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "argparse@npm:2.0.1"
+  checksum: 10/18640244e641a417ec75a9bd38b0b2b6b95af5199aa241b131d4b2fb206f334d7ecc600bd194861610a5579084978bfcbb02baa399dbe442d56d0ae5e60dbaef
+  languageName: node
+  linkType: hard
+
+"aria-query@npm:5.1.3":
+  version: 5.1.3
+  resolution: "aria-query@npm:5.1.3"
+  dependencies:
+    deep-equal: "npm:^2.0.5"
+  checksum: 10/e5da608a7c4954bfece2d879342b6c218b6b207e2d9e5af270b5e38ef8418f02d122afdc948b68e32649b849a38377785252059090d66fa8081da95d1609c0d2
+  languageName: node
+  linkType: hard
+
+"aria-query@npm:5.3.0":
+  version: 5.3.0
+  resolution: "aria-query@npm:5.3.0"
+  dependencies:
+    dequal: "npm:^2.0.3"
+  checksum: 10/c3e1ed127cc6886fea4732e97dd6d3c3938e64180803acfb9df8955517c4943760746ffaf4020ce8f7ffaa7556a3b5f85c3769a1f5ca74a1288e02d042f9ae4e
+  languageName: node
+  linkType: hard
+
+"aria-query@npm:^5.0.0":
+  version: 5.3.2
+  resolution: "aria-query@npm:5.3.2"
+  checksum: 10/b2fe9bc98bd401bc322ccb99717c1ae2aaf53ea0d468d6e7aebdc02fac736e4a99b46971ee05b783b08ade23c675b2d8b60e4a1222a95f6e27bc4d2a0bfdcc03
+  languageName: node
+  linkType: hard
+
+"array-buffer-byte-length@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "array-buffer-byte-length@npm:1.0.1"
+  dependencies:
+    call-bind: "npm:^1.0.5"
+    is-array-buffer: "npm:^3.0.4"
+  checksum: 10/53524e08f40867f6a9f35318fafe467c32e45e9c682ba67b11943e167344d2febc0f6977a17e699b05699e805c3e8f073d876f8bbf1b559ed494ad2cd0fae09e
+  languageName: node
+  linkType: hard
+
+"array-union@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "array-union@npm:2.1.0"
+  checksum: 10/5bee12395cba82da674931df6d0fea23c4aa4660cb3b338ced9f828782a65caa232573e6bf3968f23e0c5eb301764a382cef2f128b170a9dc59de0e36c39f98d
+  languageName: node
+  linkType: hard
+
+"asn1@npm:~0.2.3":
+  version: 0.2.6
+  resolution: "asn1@npm:0.2.6"
+  dependencies:
+    safer-buffer: "npm:~2.1.0"
+  checksum: 10/cf629291fee6c1a6f530549939433ebf32200d7849f38b810ff26ee74235e845c0c12b2ed0f1607ac17383d19b219b69cefa009b920dab57924c5c544e495078
+  languageName: node
+  linkType: hard
+
+"assert-plus@npm:1.0.0, assert-plus@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "assert-plus@npm:1.0.0"
+  checksum: 10/f4f991ae2df849cc678b1afba52d512a7cbf0d09613ba111e72255409ff9158550c775162a47b12d015d1b82b3c273e8e25df0e4783d3ddb008a293486d00a07
+  languageName: node
+  linkType: hard
+
+"assertion-error@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "assertion-error@npm:2.0.1"
+  checksum: 10/a0789dd882211b87116e81e2648ccb7f60340b34f19877dd020b39ebb4714e475eb943e14ba3e22201c221ef6645b7bfe10297e76b6ac95b48a9898c1211ce66
+  languageName: node
+  linkType: hard
+
+"ast-types@npm:^0.16.1":
+  version: 0.16.1
+  resolution: "ast-types@npm:0.16.1"
+  dependencies:
+    tslib: "npm:^2.0.1"
+  checksum: 10/f569b475eb1c8cb93888cb6e7b7e36dc43fa19a77e4eb132cbff6e3eb1598ca60f850db6e60b070e5a0ee8c1559fca921dac0916e576f2f104e198793b0bdd8d
+  languageName: node
+  linkType: hard
+
+"astral-regex@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "astral-regex@npm:2.0.0"
+  checksum: 10/876231688c66400473ba505731df37ea436e574dd524520294cc3bbc54ea40334865e01fa0d074d74d036ee874ee7e62f486ea38bc421ee8e6a871c06f011766
+  languageName: node
+  linkType: hard
+
+"async@npm:^3.2.0":
+  version: 3.2.6
+  resolution: "async@npm:3.2.6"
+  checksum: 10/cb6e0561a3c01c4b56a799cc8bab6ea5fef45f069ab32500b6e19508db270ef2dffa55e5aed5865c5526e9907b1f8be61b27530823b411ffafb5e1538c86c368
+  languageName: node
+  linkType: hard
+
+"asynckit@npm:^0.4.0":
+  version: 0.4.0
+  resolution: "asynckit@npm:0.4.0"
+  checksum: 10/3ce727cbc78f69d6a4722517a58ee926c8c21083633b1d3fdf66fd688f6c127a53a592141bd4866f9b63240a86e9d8e974b13919450bd17fa33c2d22c4558ad8
+  languageName: node
+  linkType: hard
+
+"at-least-node@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "at-least-node@npm:1.0.0"
+  checksum: 10/463e2f8e43384f1afb54bc68485c436d7622acec08b6fad269b421cb1d29cebb5af751426793d0961ed243146fe4dc983402f6d5a51b720b277818dbf6f2e49e
+  languageName: node
+  linkType: hard
+
+"available-typed-arrays@npm:^1.0.7":
+  version: 1.0.7
+  resolution: "available-typed-arrays@npm:1.0.7"
+  dependencies:
+    possible-typed-array-names: "npm:^1.0.0"
+  checksum: 10/6c9da3a66caddd83c875010a1ca8ef11eac02ba15fb592dc9418b2b5e7b77b645fa7729380a92d9835c2f05f2ca1b6251f39b993e0feb3f1517c74fa1af02cab
+  languageName: node
+  linkType: hard
+
+"aws-sign2@npm:~0.7.0":
+  version: 0.7.0
+  resolution: "aws-sign2@npm:0.7.0"
+  checksum: 10/2ac497d739f71be3264cf096a33ab256a1fea7fe80b87dc51ec29374505bd5a661279ef1c22989d68528ea61ed634021ca63b31cf1d3c2a3682ffc106f7d0e96
+  languageName: node
+  linkType: hard
+
+"aws4@npm:^1.8.0":
+  version: 1.13.2
+  resolution: "aws4@npm:1.13.2"
+  checksum: 10/290b9f84facbad013747725bfd8b4c42d0b3b04b5620d8418f0219832ef95a7dc597a4af7b1589ae7fce18bacde96f40911c3cda36199dd04d9f8e01f72fa50a
+  languageName: node
+  linkType: hard
+
+"axe-core@npm:^4.2.0, axe-core@npm:^4.4.2":
+  version: 4.10.2
+  resolution: "axe-core@npm:4.10.2"
+  checksum: 10/a69423b2ff16c15922c4ea7cf9cc5112728a2817bbe0f2cc212248d648885ffd1ba554e3a341dfc289cd9e67fc0d06f333b5c6837c5c38ca6652507381216fc1
+  languageName: node
+  linkType: hard
+
+"babel-jest@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "babel-jest@npm:29.7.0"
+  dependencies:
+    "@jest/transform": "npm:^29.7.0"
+    "@types/babel__core": "npm:^7.1.14"
+    babel-plugin-istanbul: "npm:^6.1.1"
+    babel-preset-jest: "npm:^29.6.3"
+    chalk: "npm:^4.0.0"
+    graceful-fs: "npm:^4.2.9"
+    slash: "npm:^3.0.0"
+  peerDependencies:
+    "@babel/core": ^7.8.0
+  checksum: 10/8a0953bd813b3a8926008f7351611055548869e9a53dd36d6e7e96679001f71e65fd7dbfe253265c3ba6a4e630dc7c845cf3e78b17d758ef1880313ce8fba258
+  languageName: node
+  linkType: hard
+
+"babel-plugin-istanbul@npm:^6.1.1":
+  version: 6.1.1
+  resolution: "babel-plugin-istanbul@npm:6.1.1"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.0.0"
+    "@istanbuljs/load-nyc-config": "npm:^1.0.0"
+    "@istanbuljs/schema": "npm:^0.1.2"
+    istanbul-lib-instrument: "npm:^5.0.4"
+    test-exclude: "npm:^6.0.0"
+  checksum: 10/ffd436bb2a77bbe1942a33245d770506ab2262d9c1b3c1f1da7f0592f78ee7445a95bc2efafe619dd9c1b6ee52c10033d6c7d29ddefe6f5383568e60f31dfe8d
+  languageName: node
+  linkType: hard
+
+"babel-plugin-jest-hoist@npm:^29.6.3":
+  version: 29.6.3
+  resolution: "babel-plugin-jest-hoist@npm:29.6.3"
+  dependencies:
+    "@babel/template": "npm:^7.3.3"
+    "@babel/types": "npm:^7.3.3"
+    "@types/babel__core": "npm:^7.1.14"
+    "@types/babel__traverse": "npm:^7.0.6"
+  checksum: 10/9bfa86ec4170bd805ab8ca5001ae50d8afcb30554d236ba4a7ffc156c1a92452e220e4acbd98daefc12bf0216fccd092d0a2efed49e7e384ec59e0597a926d65
+  languageName: node
+  linkType: hard
+
+"babel-preset-current-node-syntax@npm:^1.0.0":
+  version: 1.1.0
+  resolution: "babel-preset-current-node-syntax@npm:1.1.0"
+  dependencies:
+    "@babel/plugin-syntax-async-generators": "npm:^7.8.4"
+    "@babel/plugin-syntax-bigint": "npm:^7.8.3"
+    "@babel/plugin-syntax-class-properties": "npm:^7.12.13"
+    "@babel/plugin-syntax-class-static-block": "npm:^7.14.5"
+    "@babel/plugin-syntax-import-attributes": "npm:^7.24.7"
+    "@babel/plugin-syntax-import-meta": "npm:^7.10.4"
+    "@babel/plugin-syntax-json-strings": "npm:^7.8.3"
+    "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.8.3"
+    "@babel/plugin-syntax-numeric-separator": "npm:^7.10.4"
+    "@babel/plugin-syntax-object-rest-spread": "npm:^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding": "npm:^7.8.3"
+    "@babel/plugin-syntax-optional-chaining": "npm:^7.8.3"
+    "@babel/plugin-syntax-private-property-in-object": "npm:^7.14.5"
+    "@babel/plugin-syntax-top-level-await": "npm:^7.14.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/46331111ae72b7121172fd9e6a4a7830f651ad44bf26dbbf77b3c8a60a18009411a3eacb5e72274004290c110371230272109957d5224d155436b4794ead2f1b
+  languageName: node
+  linkType: hard
+
+"babel-preset-jest@npm:^29.6.3":
+  version: 29.6.3
+  resolution: "babel-preset-jest@npm:29.6.3"
+  dependencies:
+    babel-plugin-jest-hoist: "npm:^29.6.3"
+    babel-preset-current-node-syntax: "npm:^1.0.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 10/aa4ff2a8a728d9d698ed521e3461a109a1e66202b13d3494e41eea30729a5e7cc03b3a2d56c594423a135429c37bf63a9fa8b0b9ce275298be3095a88c69f6fb
+  languageName: node
+  linkType: hard
+
+"balanced-match@npm:^1.0.0":
+  version: 1.0.2
+  resolution: "balanced-match@npm:1.0.2"
+  checksum: 10/9706c088a283058a8a99e0bf91b0a2f75497f185980d9ffa8b304de1d9e58ebda7c72c07ebf01dadedaac5b2907b2c6f566f660d62bd336c3468e960403b9d65
+  languageName: node
+  linkType: hard
+
+"base64-js@npm:^1.3.1":
+  version: 1.5.1
+  resolution: "base64-js@npm:1.5.1"
+  checksum: 10/669632eb3745404c2f822a18fc3a0122d2f9a7a13f7fb8b5823ee19d1d2ff9ee5b52c53367176ea4ad093c332fd5ab4bd0ebae5a8e27917a4105a4cfc86b1005
+  languageName: node
+  linkType: hard
+
+"bcrypt-pbkdf@npm:^1.0.0":
+  version: 1.0.2
+  resolution: "bcrypt-pbkdf@npm:1.0.2"
+  dependencies:
+    tweetnacl: "npm:^0.14.3"
+  checksum: 10/13a4cde058250dbf1fa77a4f1b9a07d32ae2e3b9e28e88a0c7a1827835bc3482f3e478c4a0cfd4da6ff0c46dae07da1061123a995372b32cc563d9975f975404
+  languageName: node
+  linkType: hard
+
+"better-opn@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "better-opn@npm:3.0.2"
+  dependencies:
+    open: "npm:^8.0.4"
+  checksum: 10/24668e5a837d0d2c0edf17ad5ebcfeb00a8a5578a5eb09f7a409e1a60617cdfea40b8ebfc95e5f12d9568157930d033e6805788fcf0780413ac982c95d3745d1
+  languageName: node
+  linkType: hard
+
+"blob-util@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "blob-util@npm:2.0.2"
+  checksum: 10/b2c5a20c677f2a6c3821cf13c5522d64af96e666bc40cce6b43f87d16e89a55e2eab2f6264ec3f36d7f810eba848aa7e2bc611e47c14eb6395136c0b0a8b29ea
+  languageName: node
+  linkType: hard
+
+"bluebird@npm:^3.7.2":
+  version: 3.7.2
+  resolution: "bluebird@npm:3.7.2"
+  checksum: 10/007c7bad22c5d799c8dd49c85b47d012a1fe3045be57447721e6afbd1d5be43237af1db62e26cb9b0d9ba812d2e4ca3bac82f6d7e016b6b88de06ee25ceb96e7
+  languageName: node
+  linkType: hard
+
+"brace-expansion@npm:^1.1.7":
+  version: 1.1.11
+  resolution: "brace-expansion@npm:1.1.11"
+  dependencies:
+    balanced-match: "npm:^1.0.0"
+    concat-map: "npm:0.0.1"
+  checksum: 10/faf34a7bb0c3fcf4b59c7808bc5d2a96a40988addf2e7e09dfbb67a2251800e0d14cd2bfc1aa79174f2f5095c54ff27f46fb1289fe2d77dac755b5eb3434cc07
+  languageName: node
+  linkType: hard
+
+"brace-expansion@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "brace-expansion@npm:2.0.1"
+  dependencies:
+    balanced-match: "npm:^1.0.0"
+  checksum: 10/a61e7cd2e8a8505e9f0036b3b6108ba5e926b4b55089eeb5550cd04a471fe216c96d4fe7e4c7f995c728c554ae20ddfc4244cad10aef255e72b62930afd233d1
+  languageName: node
+  linkType: hard
+
+"braces@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "braces@npm:3.0.3"
+  dependencies:
+    fill-range: "npm:^7.1.1"
+  checksum: 10/fad11a0d4697a27162840b02b1fad249c1683cbc510cd5bf1a471f2f8085c046d41094308c577a50a03a579dd99d5a6b3724c4b5e8b14df2c4443844cfcda2c6
+  languageName: node
+  linkType: hard
+
+"browser-assert@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "browser-assert@npm:1.2.1"
+  checksum: 10/8b2407cd04c1ed592cf892dec35942b7d72635829221e0788c9a16c4d2afa8b7156bc9705b1c4b32c30d88136c576fda3cbcb8f494d6f865264c706ea8798d92
+  languageName: node
+  linkType: hard
+
+"browserslist@npm:^4.24.0":
+  version: 4.24.0
+  resolution: "browserslist@npm:4.24.0"
+  dependencies:
+    caniuse-lite: "npm:^1.0.30001663"
+    electron-to-chromium: "npm:^1.5.28"
+    node-releases: "npm:^2.0.18"
+    update-browserslist-db: "npm:^1.1.0"
+  bin:
+    browserslist: cli.js
+  checksum: 10/26c1b8ba257a0b51b102080ba9d42945af2abaa8c4cf6da21cd47b3f123fc1e81640203b293214356c2c17d9d265bb3a5ed428b6d302f383576dd6ce8fd5036c
+  languageName: node
+  linkType: hard
+
+"bser@npm:2.1.1":
+  version: 2.1.1
+  resolution: "bser@npm:2.1.1"
+  dependencies:
+    node-int64: "npm:^0.4.0"
+  checksum: 10/edba1b65bae682450be4117b695997972bd9a3c4dfee029cab5bcb72ae5393a79a8f909b8bc77957eb0deec1c7168670f18f4d5c556f46cdd3bca5f3b3a8d020
+  languageName: node
+  linkType: hard
+
+"buffer-crc32@npm:~0.2.3":
+  version: 0.2.13
+  resolution: "buffer-crc32@npm:0.2.13"
+  checksum: 10/06252347ae6daca3453b94e4b2f1d3754a3b146a111d81c68924c22d91889a40623264e95e67955b1cb4a68cbedf317abeabb5140a9766ed248973096db5ce1c
+  languageName: node
+  linkType: hard
+
+"buffer-from@npm:^1.0.0":
+  version: 1.1.2
+  resolution: "buffer-from@npm:1.1.2"
+  checksum: 10/0448524a562b37d4d7ed9efd91685a5b77a50672c556ea254ac9a6d30e3403a517d8981f10e565db24e8339413b43c97ca2951f10e399c6125a0d8911f5679bb
+  languageName: node
+  linkType: hard
+
+"buffer@npm:^5.7.1":
+  version: 5.7.1
+  resolution: "buffer@npm:5.7.1"
+  dependencies:
+    base64-js: "npm:^1.3.1"
+    ieee754: "npm:^1.1.13"
+  checksum: 10/997434d3c6e3b39e0be479a80288875f71cd1c07d75a3855e6f08ef848a3c966023f79534e22e415ff3a5112708ce06127277ab20e527146d55c84566405c7c6
+  languageName: node
+  linkType: hard
+
+"cac@npm:^6.7.14":
+  version: 6.7.14
+  resolution: "cac@npm:6.7.14"
+  checksum: 10/002769a0fbfc51c062acd2a59df465a2a947916b02ac50b56c69ec6c018ee99ac3e7f4dd7366334ea847f1ecacf4defaa61bcd2ac283db50156ce1f1d8c8ad42
+  languageName: node
+  linkType: hard
+
+"cacache@npm:^18.0.0":
+  version: 18.0.4
+  resolution: "cacache@npm:18.0.4"
+  dependencies:
+    "@npmcli/fs": "npm:^3.1.0"
+    fs-minipass: "npm:^3.0.0"
+    glob: "npm:^10.2.2"
+    lru-cache: "npm:^10.0.1"
+    minipass: "npm:^7.0.3"
+    minipass-collect: "npm:^2.0.1"
+    minipass-flush: "npm:^1.0.5"
+    minipass-pipeline: "npm:^1.2.4"
+    p-map: "npm:^4.0.0"
+    ssri: "npm:^10.0.0"
+    tar: "npm:^6.1.11"
+    unique-filename: "npm:^3.0.0"
+  checksum: 10/ca2f7b2d3003f84d362da9580b5561058ccaecd46cba661cbcff0375c90734b610520d46b472a339fd032d91597ad6ed12dde8af81571197f3c9772b5d35b104
+  languageName: node
+  linkType: hard
+
+"cachedir@npm:^2.3.0":
+  version: 2.4.0
+  resolution: "cachedir@npm:2.4.0"
+  checksum: 10/43198514eaa61f65b5535ed29ad651f22836fba3868ed58a6a87731f05462f317d39098fa3ac778801c25455483c9b7f32a2fcad1f690a978947431f12a0f4d0
+  languageName: node
+  linkType: hard
+
+"call-bind@npm:^1.0.2, call-bind@npm:^1.0.5, call-bind@npm:^1.0.7":
+  version: 1.0.7
+  resolution: "call-bind@npm:1.0.7"
+  dependencies:
+    es-define-property: "npm:^1.0.0"
+    es-errors: "npm:^1.3.0"
+    function-bind: "npm:^1.1.2"
+    get-intrinsic: "npm:^1.2.4"
+    set-function-length: "npm:^1.2.1"
+  checksum: 10/cd6fe658e007af80985da5185bff7b55e12ef4c2b6f41829a26ed1eef254b1f1c12e3dfd5b2b068c6ba8b86aba62390842d81752e67dcbaec4f6f76e7113b6b7
+  languageName: node
+  linkType: hard
+
+"callsites@npm:^3.0.0":
+  version: 3.1.0
+  resolution: "callsites@npm:3.1.0"
+  checksum: 10/072d17b6abb459c2ba96598918b55868af677154bec7e73d222ef95a8fdb9bbf7dae96a8421085cdad8cd190d86653b5b6dc55a4484f2e5b2e27d5e0c3fc15b3
+  languageName: node
+  linkType: hard
+
+"camelcase@npm:^5.3.1":
+  version: 5.3.1
+  resolution: "camelcase@npm:5.3.1"
+  checksum: 10/e6effce26b9404e3c0f301498184f243811c30dfe6d0b9051863bd8e4034d09c8c2923794f280d6827e5aa055f6c434115ff97864a16a963366fb35fd673024b
+  languageName: node
+  linkType: hard
+
+"camelcase@npm:^6.2.0":
+  version: 6.3.0
+  resolution: "camelcase@npm:6.3.0"
+  checksum: 10/8c96818a9076434998511251dcb2761a94817ea17dbdc37f47ac080bd088fc62c7369429a19e2178b993497132c8cbcf5cc1f44ba963e76782ba469c0474938d
+  languageName: node
+  linkType: hard
+
+"caniuse-lite@npm:^1.0.30001663":
+  version: 1.0.30001669
+  resolution: "caniuse-lite@npm:1.0.30001669"
+  checksum: 10/cd0b481bb997703cb7651e55666b4aa4e7b4ecf9784796e2393179a15e55c71a6abc6ff865c922bbd3bbfa4a4bf0530d8da13989b97ff8c7850c8a5bd4e00491
+  languageName: node
+  linkType: hard
+
+"caseless@npm:~0.12.0":
+  version: 0.12.0
+  resolution: "caseless@npm:0.12.0"
+  checksum: 10/ea1efdf430975fdbac3505cdd21007f7ac5aa29b6d4d1c091f965853cd1bf87e4b08ea07b31a6d688b038872b7cdf0589d9262d59c699d199585daad052aeb20
+  languageName: node
+  linkType: hard
+
+"chai@npm:^5.1.1, chai@npm:^5.1.2":
+  version: 5.1.2
+  resolution: "chai@npm:5.1.2"
+  dependencies:
+    assertion-error: "npm:^2.0.1"
+    check-error: "npm:^2.1.1"
+    deep-eql: "npm:^5.0.1"
+    loupe: "npm:^3.1.0"
+    pathval: "npm:^2.0.0"
+  checksum: 10/e8c2bbc83cb5a2f87130d93056d4cfbbe04106e12aa798b504816dbe3fa538a9f68541b472e56cbf0f54558b501d7e31867d74b8218abcd5a8cc8ba536fba46c
+  languageName: node
+  linkType: hard
+
+"chalk@npm:^2.4.2":
+  version: 2.4.2
+  resolution: "chalk@npm:2.4.2"
+  dependencies:
+    ansi-styles: "npm:^3.2.1"
+    escape-string-regexp: "npm:^1.0.5"
+    supports-color: "npm:^5.3.0"
+  checksum: 10/3d1d103433166f6bfe82ac75724951b33769675252d8417317363ef9d54699b7c3b2d46671b772b893a8e50c3ece70c4b933c73c01e81bc60ea4df9b55afa303
+  languageName: node
+  linkType: hard
+
+"chalk@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "chalk@npm:3.0.0"
+  dependencies:
+    ansi-styles: "npm:^4.1.0"
+    supports-color: "npm:^7.1.0"
+  checksum: 10/37f90b31fd655fb49c2bd8e2a68aebefddd64522655d001ef417e6f955def0ed9110a867ffc878a533f2dafea5f2032433a37c8a7614969baa7f8a1cd424ddfc
+  languageName: node
+  linkType: hard
+
+"chalk@npm:^4.0.0, chalk@npm:^4.1.0, chalk@npm:^4.1.2":
+  version: 4.1.2
+  resolution: "chalk@npm:4.1.2"
+  dependencies:
+    ansi-styles: "npm:^4.1.0"
+    supports-color: "npm:^7.1.0"
+  checksum: 10/cb3f3e594913d63b1814d7ca7c9bafbf895f75fbf93b92991980610dfd7b48500af4e3a5d4e3a8f337990a96b168d7eb84ee55efdce965e2ee8efc20f8c8f139
+  languageName: node
+  linkType: hard
+
+"chalk@npm:^5.0.1":
+  version: 5.3.0
+  resolution: "chalk@npm:5.3.0"
+  checksum: 10/6373caaab21bd64c405bfc4bd9672b145647fc9482657b5ea1d549b3b2765054e9d3d928870cdf764fb4aad67555f5061538ff247b8310f110c5c888d92397ea
+  languageName: node
+  linkType: hard
+
+"char-regex@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "char-regex@npm:1.0.2"
+  checksum: 10/1ec5c2906adb9f84e7f6732a40baef05d7c85401b82ffcbc44b85fbd0f7a2b0c2a96f2eb9cf55cae3235dc12d4023003b88f09bcae8be9ae894f52ed746f4d48
+  languageName: node
+  linkType: hard
+
+"check-error@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "check-error@npm:2.1.1"
+  checksum: 10/d785ed17b1d4a4796b6e75c765a9a290098cf52ff9728ce0756e8ffd4293d2e419dd30c67200aee34202463b474306913f2fcfaf1890641026d9fc6966fea27a
+  languageName: node
+  linkType: hard
+
+"check-more-types@npm:^2.24.0":
+  version: 2.24.0
+  resolution: "check-more-types@npm:2.24.0"
+  checksum: 10/67c5288443bd73a81638e1185f8c5410d0edf6458c086149ef1cda95c07535b5dd5c11c426dc3ee8f0de0f3244aa2d4f2ba1937aaa8a94995589cdcce0bbccb9
+  languageName: node
+  linkType: hard
+
+"chownr@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "chownr@npm:2.0.0"
+  checksum: 10/c57cf9dd0791e2f18a5ee9c1a299ae6e801ff58fee96dc8bfd0dcb4738a6ce58dd252a3605b1c93c6418fe4f9d5093b28ffbf4d66648cb2a9c67eaef9679be2f
+  languageName: node
+  linkType: hard
+
+"ci-info@npm:^3.2.0":
+  version: 3.9.0
+  resolution: "ci-info@npm:3.9.0"
+  checksum: 10/75bc67902b4d1c7b435497adeb91598f6d52a3389398e44294f6601b20cfef32cf2176f7be0eb961d9e085bb333a8a5cae121cb22f81cf238ae7f58eb80e9397
+  languageName: node
+  linkType: hard
+
+"cjs-module-lexer@npm:^1.0.0":
+  version: 1.4.1
+  resolution: "cjs-module-lexer@npm:1.4.1"
+  checksum: 10/6e830a1e00a34d416949bbc1924f3e8da65cef4a6a09e2b7fa35722e2d1c34bf378d3baca987b698d1cbc3eb83e44b044039b4e82755c96f30e0f03d1d227637
+  languageName: node
+  linkType: hard
+
+"clean-stack@npm:^2.0.0":
+  version: 2.2.0
+  resolution: "clean-stack@npm:2.2.0"
+  checksum: 10/2ac8cd2b2f5ec986a3c743935ec85b07bc174d5421a5efc8017e1f146a1cf5f781ae962618f416352103b32c9cd7e203276e8c28241bbe946160cab16149fb68
+  languageName: node
+  linkType: hard
+
+"cli-cursor@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "cli-cursor@npm:3.1.0"
+  dependencies:
+    restore-cursor: "npm:^3.1.0"
+  checksum: 10/2692784c6cd2fd85cfdbd11f53aea73a463a6d64a77c3e098b2b4697a20443f430c220629e1ca3b195ea5ac4a97a74c2ee411f3807abf6df2b66211fec0c0a29
+  languageName: node
+  linkType: hard
+
+"cli-table3@npm:~0.6.1":
+  version: 0.6.5
+  resolution: "cli-table3@npm:0.6.5"
+  dependencies:
+    "@colors/colors": "npm:1.5.0"
+    string-width: "npm:^4.2.0"
+  dependenciesMeta:
+    "@colors/colors":
+      optional: true
+  checksum: 10/8dca71256f6f1367bab84c33add3f957367c7c43750a9828a4212ebd31b8df76bd7419d386e3391ac7419698a8540c25f1a474584028f35b170841cde2e055c5
+  languageName: node
+  linkType: hard
+
+"cli-truncate@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "cli-truncate@npm:2.1.0"
+  dependencies:
+    slice-ansi: "npm:^3.0.0"
+    string-width: "npm:^4.2.0"
+  checksum: 10/976f1887de067a8cd6ec830a7a8508336aebe6cec79b521d98ed13f67ef073b637f7305675b6247dd22f9e9cf045ec55fe746c7bdb288fbe8db0dfdc9fd52e55
+  languageName: node
+  linkType: hard
+
+"cli-width@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "cli-width@npm:4.1.0"
+  checksum: 10/b58876fbf0310a8a35c79b72ecfcf579b354e18ad04e6b20588724ea2b522799a758507a37dfe132fafaf93a9922cafd9514d9e1598e6b2cd46694853aed099f
+  languageName: node
+  linkType: hard
+
+"cliui@npm:^8.0.1":
+  version: 8.0.1
+  resolution: "cliui@npm:8.0.1"
+  dependencies:
+    string-width: "npm:^4.2.0"
+    strip-ansi: "npm:^6.0.1"
+    wrap-ansi: "npm:^7.0.0"
+  checksum: 10/eaa5561aeb3135c2cddf7a3b3f562fc4238ff3b3fc666869ef2adf264be0f372136702f16add9299087fb1907c2e4ec5dbfe83bd24bce815c70a80c6c1a2e950
+  languageName: node
+  linkType: hard
+
+"co@npm:^4.6.0":
+  version: 4.6.0
+  resolution: "co@npm:4.6.0"
+  checksum: 10/a5d9f37091c70398a269e625cedff5622f200ed0aa0cff22ee7b55ed74a123834b58711776eb0f1dc58eb6ebbc1185aa7567b57bd5979a948c6e4f85073e2c05
+  languageName: node
+  linkType: hard
+
+"collect-v8-coverage@npm:^1.0.0":
+  version: 1.0.2
+  resolution: "collect-v8-coverage@npm:1.0.2"
+  checksum: 10/30ea7d5c9ee51f2fdba4901d4186c5b7114a088ef98fd53eda3979da77eed96758a2cae81cc6d97e239aaea6065868cf908b24980663f7b7e96aa291b3e12fa4
+  languageName: node
+  linkType: hard
+
+"color-convert@npm:^1.9.0":
+  version: 1.9.3
+  resolution: "color-convert@npm:1.9.3"
+  dependencies:
+    color-name: "npm:1.1.3"
+  checksum: 10/ffa319025045f2973919d155f25e7c00d08836b6b33ea2d205418c59bd63a665d713c52d9737a9e0fe467fb194b40fbef1d849bae80d674568ee220a31ef3d10
+  languageName: node
+  linkType: hard
+
+"color-convert@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "color-convert@npm:2.0.1"
+  dependencies:
+    color-name: "npm:~1.1.4"
+  checksum: 10/fa00c91b4332b294de06b443923246bccebe9fab1b253f7fe1772d37b06a2269b4039a85e309abe1fe11b267b11c08d1d0473fda3badd6167f57313af2887a64
+  languageName: node
+  linkType: hard
+
+"color-name@npm:1.1.3":
+  version: 1.1.3
+  resolution: "color-name@npm:1.1.3"
+  checksum: 10/09c5d3e33d2105850153b14466501f2bfb30324a2f76568a408763a3b7433b0e50e5b4ab1947868e65cb101bb7cb75029553f2c333b6d4b8138a73fcc133d69d
+  languageName: node
+  linkType: hard
+
+"color-name@npm:~1.1.4":
+  version: 1.1.4
+  resolution: "color-name@npm:1.1.4"
+  checksum: 10/b0445859521eb4021cd0fb0cc1a75cecf67fceecae89b63f62b201cca8d345baf8b952c966862a9d9a2632987d4f6581f0ec8d957dfacece86f0a7919316f610
+  languageName: node
+  linkType: hard
+
+"colorette@npm:^2.0.16":
+  version: 2.0.20
+  resolution: "colorette@npm:2.0.20"
+  checksum: 10/0b8de48bfa5d10afc160b8eaa2b9938f34a892530b2f7d7897e0458d9535a066e3998b49da9d21161c78225b272df19ae3a64d6df28b4c9734c0e55bbd02406f
+  languageName: node
+  linkType: hard
+
+"combined-stream@npm:^1.0.8, combined-stream@npm:~1.0.6":
+  version: 1.0.8
+  resolution: "combined-stream@npm:1.0.8"
+  dependencies:
+    delayed-stream: "npm:~1.0.0"
+  checksum: 10/2e969e637d05d09fa50b02d74c83a1186f6914aae89e6653b62595cc75a221464f884f55f231b8f4df7a49537fba60bdc0427acd2bf324c09a1dbb84837e36e4
+  languageName: node
+  linkType: hard
+
+"commander@npm:^6.2.1":
+  version: 6.2.1
+  resolution: "commander@npm:6.2.1"
+  checksum: 10/25b88c2efd0380c84f7844b39cf18510da7bfc5013692d68cdc65f764a1c34e6c8a36ea6d72b6620e3710a930cf8fab2695bdec2bf7107a0f4fa30a3ef3b7d0e
+  languageName: node
+  linkType: hard
+
+"common-tags@npm:^1.8.0":
+  version: 1.8.2
+  resolution: "common-tags@npm:1.8.2"
+  checksum: 10/c665d0f463ee79dda801471ad8da6cb33ff7332ba45609916a508ad3d77ba07ca9deeb452e83f81f24c2b081e2c1315347f23d239210e63d1c5e1a0c7c019fe2
+  languageName: node
+  linkType: hard
+
+"concat-map@npm:0.0.1":
+  version: 0.0.1
+  resolution: "concat-map@npm:0.0.1"
+  checksum: 10/9680699c8e2b3af0ae22592cb764acaf973f292a7b71b8a06720233011853a58e256c89216a10cbe889727532fd77f8bcd49a760cedfde271b8e006c20e079f2
+  languageName: node
+  linkType: hard
+
+"convert-source-map@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "convert-source-map@npm:2.0.0"
+  checksum: 10/c987be3ec061348cdb3c2bfb924bec86dea1eacad10550a85ca23edb0fe3556c3a61c7399114f3331ccb3499d7fd0285ab24566e5745929412983494c3926e15
+  languageName: node
+  linkType: hard
+
+"cookie@npm:^0.7.2":
+  version: 0.7.2
+  resolution: "cookie@npm:0.7.2"
+  checksum: 10/24b286c556420d4ba4e9bc09120c9d3db7d28ace2bd0f8ccee82422ce42322f73c8312441271e5eefafbead725980e5996cc02766dbb89a90ac7f5636ede608f
+  languageName: node
+  linkType: hard
+
+"core-util-is@npm:1.0.2":
+  version: 1.0.2
+  resolution: "core-util-is@npm:1.0.2"
+  checksum: 10/d0f7587346b44a1fe6c269267e037dd34b4787191e473c3e685f507229d88561c40eb18872fabfff02977301815d474300b7bfbd15396c13c5377393f7e87ec3
+  languageName: node
+  linkType: hard
+
+"create-jest@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "create-jest@npm:29.7.0"
+  dependencies:
+    "@jest/types": "npm:^29.6.3"
+    chalk: "npm:^4.0.0"
+    exit: "npm:^0.1.2"
+    graceful-fs: "npm:^4.2.9"
+    jest-config: "npm:^29.7.0"
+    jest-util: "npm:^29.7.0"
+    prompts: "npm:^2.0.1"
+  bin:
+    create-jest: bin/create-jest.js
+  checksum: 10/847b4764451672b4174be4d5c6d7d63442ec3aa5f3de52af924e4d996d87d7801c18e125504f25232fc75840f6625b3ac85860fac6ce799b5efae7bdcaf4a2b7
+  languageName: node
+  linkType: hard
+
+"cross-spawn@npm:^7.0.0, cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.3":
+  version: 7.0.3
+  resolution: "cross-spawn@npm:7.0.3"
+  dependencies:
+    path-key: "npm:^3.1.0"
+    shebang-command: "npm:^2.0.0"
+    which: "npm:^2.0.1"
+  checksum: 10/e1a13869d2f57d974de0d9ef7acbf69dc6937db20b918525a01dacb5032129bd552d290d886d981e99f1b624cb03657084cc87bd40f115c07ecf376821c729ce
+  languageName: node
+  linkType: hard
+
+"css.escape@npm:^1.5.1":
+  version: 1.5.1
+  resolution: "css.escape@npm:1.5.1"
+  checksum: 10/f6d38088d870a961794a2580b2b2af1027731bb43261cfdce14f19238a88664b351cc8978abc20f06cc6bbde725699dec8deb6fe9816b139fc3f2af28719e774
+  languageName: node
+  linkType: hard
+
+"cssom@npm:^0.5.0":
+  version: 0.5.0
+  resolution: "cssom@npm:0.5.0"
+  checksum: 10/b502a315b1ce020a692036cc38cb36afa44157219b80deadfa040ab800aa9321fcfbecf02fd2e6ec87db169715e27978b4ab3701f916461e9cf7808899f23b54
+  languageName: node
+  linkType: hard
+
+"cssom@npm:~0.3.6":
+  version: 0.3.8
+  resolution: "cssom@npm:0.3.8"
+  checksum: 10/49eacc88077555e419646c0ea84ddc73c97e3a346ad7cb95e22f9413a9722d8964b91d781ce21d378bd5ae058af9a745402383fa4e35e9cdfd19654b63f892a9
+  languageName: node
+  linkType: hard
+
+"cssstyle@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "cssstyle@npm:2.3.0"
+  dependencies:
+    cssom: "npm:~0.3.6"
+  checksum: 10/46f7f05a153446c4018b0454ee1464b50f606cb1803c90d203524834b7438eb52f3b173ba0891c618f380ced34ee12020675dc0052a7f1be755fe4ebc27ee977
+  languageName: node
+  linkType: hard
+
+"csstype@npm:^3.0.2":
+  version: 3.1.3
+  resolution: "csstype@npm:3.1.3"
+  checksum: 10/f593cce41ff5ade23f44e77521e3a1bcc2c64107041e1bf6c3c32adc5187d0d60983292fda326154d20b01079e24931aa5b08e4467cc488b60bb1e7f6d478ade
+  languageName: node
+  linkType: hard
+
+"cypress@npm:^13.6.4":
+  version: 13.15.0
+  resolution: "cypress@npm:13.15.0"
+  dependencies:
+    "@cypress/request": "npm:^3.0.4"
+    "@cypress/xvfb": "npm:^1.2.4"
+    "@types/sinonjs__fake-timers": "npm:8.1.1"
+    "@types/sizzle": "npm:^2.3.2"
+    arch: "npm:^2.2.0"
+    blob-util: "npm:^2.0.2"
+    bluebird: "npm:^3.7.2"
+    buffer: "npm:^5.7.1"
+    cachedir: "npm:^2.3.0"
+    chalk: "npm:^4.1.0"
+    check-more-types: "npm:^2.24.0"
+    cli-cursor: "npm:^3.1.0"
+    cli-table3: "npm:~0.6.1"
+    commander: "npm:^6.2.1"
+    common-tags: "npm:^1.8.0"
+    dayjs: "npm:^1.10.4"
+    debug: "npm:^4.3.4"
+    enquirer: "npm:^2.3.6"
+    eventemitter2: "npm:6.4.7"
+    execa: "npm:4.1.0"
+    executable: "npm:^4.1.1"
+    extract-zip: "npm:2.0.1"
+    figures: "npm:^3.2.0"
+    fs-extra: "npm:^9.1.0"
+    getos: "npm:^3.2.1"
+    is-ci: "npm:^3.0.1"
+    is-installed-globally: "npm:~0.4.0"
+    lazy-ass: "npm:^1.6.0"
+    listr2: "npm:^3.8.3"
+    lodash: "npm:^4.17.21"
+    log-symbols: "npm:^4.0.0"
+    minimist: "npm:^1.2.8"
+    ospath: "npm:^1.2.2"
+    pretty-bytes: "npm:^5.6.0"
+    process: "npm:^0.11.10"
+    proxy-from-env: "npm:1.0.0"
+    request-progress: "npm:^3.0.0"
+    semver: "npm:^7.5.3"
+    supports-color: "npm:^8.1.1"
+    tmp: "npm:~0.2.3"
+    untildify: "npm:^4.0.0"
+    yauzl: "npm:^2.10.0"
+  bin:
+    cypress: bin/cypress
+  checksum: 10/eb1012234716ae912ad579839dee63f4abcfcfcfd1e5f9281d3d4d69f164d6ba98fac9ecee6432924c72344f5e3c58e694f4a0066ae9ba4b9b81e7fd0aa64f9f
+  languageName: node
+  linkType: hard
+
+"dashdash@npm:^1.12.0":
+  version: 1.14.1
+  resolution: "dashdash@npm:1.14.1"
+  dependencies:
+    assert-plus: "npm:^1.0.0"
+  checksum: 10/137b287fa021201ce100cef772c8eeeaaafdd2aa7282864022acf3b873021e54cb809e9c060fa164840bf54ff72d00d6e2d8da1ee5a86d7200eeefa1123a8f7f
+  languageName: node
+  linkType: hard
+
+"data-urls@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "data-urls@npm:3.0.2"
+  dependencies:
+    abab: "npm:^2.0.6"
+    whatwg-mimetype: "npm:^3.0.0"
+    whatwg-url: "npm:^11.0.0"
+  checksum: 10/033fc3dd0fba6d24bc9a024ddcf9923691dd24f90a3d26f6545d6a2f71ec6956f93462f2cdf2183cc46f10dc01ed3bcb36731a8208456eb1a08147e571fe2a76
+  languageName: node
+  linkType: hard
+
+"dayjs@npm:^1.10.4":
+  version: 1.11.13
+  resolution: "dayjs@npm:1.11.13"
+  checksum: 10/7374d63ab179b8d909a95e74790def25c8986e329ae989840bacb8b1888be116d20e1c4eee75a69ea0dfbae13172efc50ef85619d304ee7ca3c01d5878b704f5
+  languageName: node
+  linkType: hard
+
+"debug@npm:4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.4, debug@npm:^4.3.7":
+  version: 4.3.7
+  resolution: "debug@npm:4.3.7"
+  dependencies:
+    ms: "npm:^2.1.3"
+  peerDependenciesMeta:
+    supports-color:
+      optional: true
+  checksum: 10/71168908b9a78227ab29d5d25fe03c5867750e31ce24bf2c44a86efc5af041758bb56569b0a3d48a9b5344c00a24a777e6f4100ed6dfd9534a42c1dde285125a
+  languageName: node
+  linkType: hard
+
+"debug@npm:^3.1.0":
+  version: 3.2.7
+  resolution: "debug@npm:3.2.7"
+  dependencies:
+    ms: "npm:^2.1.1"
+  checksum: 10/d86fd7be2b85462297ea16f1934dc219335e802f629ca9a69b63ed8ed041dda492389bb2ee039217c02e5b54792b1c51aa96ae954cf28634d363a2360c7a1639
+  languageName: node
+  linkType: hard
+
+"decimal.js@npm:^10.4.2":
+  version: 10.4.3
+  resolution: "decimal.js@npm:10.4.3"
+  checksum: 10/de663a7bc4d368e3877db95fcd5c87b965569b58d16cdc4258c063d231ca7118748738df17cd638f7e9dd0be8e34cec08d7234b20f1f2a756a52fc5a38b188d0
+  languageName: node
+  linkType: hard
+
+"dedent@npm:^1.0.0":
+  version: 1.5.3
+  resolution: "dedent@npm:1.5.3"
+  peerDependencies:
+    babel-plugin-macros: ^3.1.0
+  peerDependenciesMeta:
+    babel-plugin-macros:
+      optional: true
+  checksum: 10/e5277f6268f288649503125b781a7b7a2c9b22d011139688c0b3619fe40121e600eb1f077c891938d4b2428bdb6326cc3c77a763e4b1cc681bd9666ab1bad2a1
+  languageName: node
+  linkType: hard
+
+"deep-eql@npm:^5.0.1":
+  version: 5.0.2
+  resolution: "deep-eql@npm:5.0.2"
+  checksum: 10/a529b81e2ef8821621d20a36959a0328873a3e49d393ad11f8efe8559f31239494c2eb889b80342808674c475802ba95b9d6c4c27641b9a029405104c1b59fcf
+  languageName: node
+  linkType: hard
+
+"deep-equal@npm:^2.0.5":
+  version: 2.2.3
+  resolution: "deep-equal@npm:2.2.3"
+  dependencies:
+    array-buffer-byte-length: "npm:^1.0.0"
+    call-bind: "npm:^1.0.5"
+    es-get-iterator: "npm:^1.1.3"
+    get-intrinsic: "npm:^1.2.2"
+    is-arguments: "npm:^1.1.1"
+    is-array-buffer: "npm:^3.0.2"
+    is-date-object: "npm:^1.0.5"
+    is-regex: "npm:^1.1.4"
+    is-shared-array-buffer: "npm:^1.0.2"
+    isarray: "npm:^2.0.5"
+    object-is: "npm:^1.1.5"
+    object-keys: "npm:^1.1.1"
+    object.assign: "npm:^4.1.4"
+    regexp.prototype.flags: "npm:^1.5.1"
+    side-channel: "npm:^1.0.4"
+    which-boxed-primitive: "npm:^1.0.2"
+    which-collection: "npm:^1.0.1"
+    which-typed-array: "npm:^1.1.13"
+  checksum: 10/1ce49d0b71d0f14d8ef991a742665eccd488dfc9b3cada069d4d7a86291e591c92d2589c832811dea182b4015736b210acaaebce6184be356c1060d176f5a05f
+  languageName: node
+  linkType: hard
+
+"deep-is@npm:^0.1.3":
+  version: 0.1.4
+  resolution: "deep-is@npm:0.1.4"
+  checksum: 10/ec12d074aef5ae5e81fa470b9317c313142c9e8e2afe3f8efa124db309720db96d1d222b82b84c834e5f87e7a614b44a4684b6683583118b87c833b3be40d4d8
+  languageName: node
+  linkType: hard
+
+"deepmerge@npm:^4.2.2":
+  version: 4.3.1
+  resolution: "deepmerge@npm:4.3.1"
+  checksum: 10/058d9e1b0ff1a154468bf3837aea436abcfea1ba1d165ddaaf48ca93765fdd01a30d33c36173da8fbbed951dd0a267602bc782fe288b0fc4b7e1e7091afc4529
+  languageName: node
+  linkType: hard
+
+"define-data-property@npm:^1.0.1, define-data-property@npm:^1.1.4":
+  version: 1.1.4
+  resolution: "define-data-property@npm:1.1.4"
+  dependencies:
+    es-define-property: "npm:^1.0.0"
+    es-errors: "npm:^1.3.0"
+    gopd: "npm:^1.0.1"
+  checksum: 10/abdcb2505d80a53524ba871273e5da75e77e52af9e15b3aa65d8aad82b8a3a424dad7aee2cc0b71470ac7acf501e08defac362e8b6a73cdb4309f028061df4ae
+  languageName: node
+  linkType: hard
+
+"define-lazy-prop@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "define-lazy-prop@npm:2.0.0"
+  checksum: 10/0115fdb065e0490918ba271d7339c42453d209d4cb619dfe635870d906731eff3e1ade8028bb461ea27ce8264ec5e22c6980612d332895977e89c1bbc80fcee2
+  languageName: node
+  linkType: hard
+
+"define-properties@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "define-properties@npm:1.2.1"
+  dependencies:
+    define-data-property: "npm:^1.0.1"
+    has-property-descriptors: "npm:^1.0.0"
+    object-keys: "npm:^1.1.1"
+  checksum: 10/b4ccd00597dd46cb2d4a379398f5b19fca84a16f3374e2249201992f36b30f6835949a9429669ee6b41b6e837205a163eadd745e472069e70dfc10f03e5fcc12
+  languageName: node
+  linkType: hard
+
+"delayed-stream@npm:~1.0.0":
+  version: 1.0.0
+  resolution: "delayed-stream@npm:1.0.0"
+  checksum: 10/46fe6e83e2cb1d85ba50bd52803c68be9bd953282fa7096f51fc29edd5d67ff84ff753c51966061e5ba7cb5e47ef6d36a91924eddb7f3f3483b1c560f77a0020
+  languageName: node
+  linkType: hard
+
+"dequal@npm:^2.0.2, dequal@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "dequal@npm:2.0.3"
+  checksum: 10/6ff05a7561f33603df87c45e389c9ac0a95e3c056be3da1a0c4702149e3a7f6fe5ffbb294478687ba51a9e95f3a60e8b6b9005993acd79c292c7d15f71964b6b
+  languageName: node
+  linkType: hard
+
+"detect-newline@npm:^3.0.0":
+  version: 3.1.0
+  resolution: "detect-newline@npm:3.1.0"
+  checksum: 10/ae6cd429c41ad01b164c59ea36f264a2c479598e61cba7c99da24175a7ab80ddf066420f2bec9a1c57a6bead411b4655ff15ad7d281c000a89791f48cbe939e7
+  languageName: node
+  linkType: hard
+
+"diff-sequences@npm:^29.6.3":
+  version: 29.6.3
+  resolution: "diff-sequences@npm:29.6.3"
+  checksum: 10/179daf9d2f9af5c57ad66d97cb902a538bcf8ed64963fa7aa0c329b3de3665ce2eb6ffdc2f69f29d445fa4af2517e5e55e5b6e00c00a9ae4f43645f97f7078cb
+  languageName: node
+  linkType: hard
+
+"dir-glob@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "dir-glob@npm:3.0.1"
+  dependencies:
+    path-type: "npm:^4.0.0"
+  checksum: 10/fa05e18324510d7283f55862f3161c6759a3f2f8dbce491a2fc14c8324c498286c54282c1f0e933cb930da8419b30679389499b919122952a4f8592362ef4615
+  languageName: node
+  linkType: hard
+
+"doctrine@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "doctrine@npm:3.0.0"
+  dependencies:
+    esutils: "npm:^2.0.2"
+  checksum: 10/b4b28f1df5c563f7d876e7461254a4597b8cabe915abe94d7c5d1633fed263fcf9a85e8d3836591fc2d040108e822b0d32758e5ec1fe31c590dc7e08086e3e48
+  languageName: node
+  linkType: hard
+
+"dom-accessibility-api@npm:^0.5.14, dom-accessibility-api@npm:^0.5.9":
+  version: 0.5.16
+  resolution: "dom-accessibility-api@npm:0.5.16"
+  checksum: 10/377b4a7f9eae0a5d72e1068c369c99e0e4ca17fdfd5219f3abd32a73a590749a267475a59d7b03a891f9b673c27429133a818c44b2e47e32fec024b34274e2ca
+  languageName: node
+  linkType: hard
+
+"dom-accessibility-api@npm:^0.6.3":
+  version: 0.6.3
+  resolution: "dom-accessibility-api@npm:0.6.3"
+  checksum: 10/83d3371f8226487fbad36e160d44f1d9017fb26d46faba6a06fcad15f34633fc827b8c3e99d49f71d5f3253d866e2131826866fd0a3c86626f8eccfc361881ff
+  languageName: node
+  linkType: hard
+
+"domexception@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "domexception@npm:4.0.0"
+  dependencies:
+    webidl-conversions: "npm:^7.0.0"
+  checksum: 10/4ed443227d2871d76c58d852b2e93c68e0443815b2741348f20881bedee8c1ad4f9bfc5d30c7dec433cd026b57da63407c010260b1682fef4c8847e7181ea43f
+  languageName: node
+  linkType: hard
+
+"eastasianwidth@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "eastasianwidth@npm:0.2.0"
+  checksum: 10/9b1d3e1baefeaf7d70799db8774149cef33b97183a6addceeba0cf6b85ba23ee2686f302f14482006df32df75d32b17c509c143a3689627929e4a8efaf483952
+  languageName: node
+  linkType: hard
+
+"ecc-jsbn@npm:~0.1.1":
+  version: 0.1.2
+  resolution: "ecc-jsbn@npm:0.1.2"
+  dependencies:
+    jsbn: "npm:~0.1.0"
+    safer-buffer: "npm:^2.1.0"
+  checksum: 10/d43591f2396196266e186e6d6928038cc11c76c3699a912cb9c13757060f7bbc7f17f47c4cb16168cdeacffc7965aef021142577e646fb3cb88810c15173eb57
+  languageName: node
+  linkType: hard
+
+"electron-to-chromium@npm:^1.5.28":
+  version: 1.5.41
+  resolution: "electron-to-chromium@npm:1.5.41"
+  checksum: 10/74e1773d954ddbea82036715f91d2ef78246c9747ac58c00efa4eae3957a29a86b9ef41adfd1a33b5e563cecfc587ad90d0b513673fce65f505af6f2e90e1777
+  languageName: node
+  linkType: hard
+
+"emittery@npm:^0.13.1":
+  version: 0.13.1
+  resolution: "emittery@npm:0.13.1"
+  checksum: 10/fbe214171d878b924eedf1757badf58a5dce071cd1fa7f620fa841a0901a80d6da47ff05929d53163105e621ce11a71b9d8acb1148ffe1745e045145f6e69521
+  languageName: node
+  linkType: hard
+
+"emoji-regex@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "emoji-regex@npm:8.0.0"
+  checksum: 10/c72d67a6821be15ec11997877c437491c313d924306b8da5d87d2a2bcc2cec9903cb5b04ee1a088460501d8e5b44f10df82fdc93c444101a7610b80c8b6938e1
+  languageName: node
+  linkType: hard
+
+"emoji-regex@npm:^9.2.2":
+  version: 9.2.2
+  resolution: "emoji-regex@npm:9.2.2"
+  checksum: 10/915acf859cea7131dac1b2b5c9c8e35c4849e325a1d114c30adb8cd615970f6dca0e27f64f3a4949d7d6ed86ecd79a1c5c63f02e697513cddd7b5835c90948b8
+  languageName: node
+  linkType: hard
+
+"encoding@npm:^0.1.13":
+  version: 0.1.13
+  resolution: "encoding@npm:0.1.13"
+  dependencies:
+    iconv-lite: "npm:^0.6.2"
+  checksum: 10/bb98632f8ffa823996e508ce6a58ffcf5856330fde839ae42c9e1f436cc3b5cc651d4aeae72222916545428e54fd0f6aa8862fd8d25bdbcc4589f1e3f3715e7f
+  languageName: node
+  linkType: hard
+
+"end-of-stream@npm:^1.1.0":
+  version: 1.4.4
+  resolution: "end-of-stream@npm:1.4.4"
+  dependencies:
+    once: "npm:^1.4.0"
+  checksum: 10/530a5a5a1e517e962854a31693dbb5c0b2fc40b46dad2a56a2deec656ca040631124f4795823acc68238147805f8b021abbe221f4afed5ef3c8e8efc2024908b
+  languageName: node
+  linkType: hard
+
+"enquirer@npm:^2.3.6":
+  version: 2.4.1
+  resolution: "enquirer@npm:2.4.1"
+  dependencies:
+    ansi-colors: "npm:^4.1.1"
+    strip-ansi: "npm:^6.0.1"
+  checksum: 10/b3726486cd98f0d458a851a03326a2a5dd4d84f37ff94ff2a2960c915e0fc865865da3b78f0877dc36ac5c1189069eca603e82ec63d5bc6b0dd9985bf6426d7a
+  languageName: node
+  linkType: hard
+
+"entities@npm:^4.5.0":
+  version: 4.5.0
+  resolution: "entities@npm:4.5.0"
+  checksum: 10/ede2a35c9bce1aeccd055a1b445d41c75a14a2bb1cd22e242f20cf04d236cdcd7f9c859eb83f76885327bfae0c25bf03303665ee1ce3d47c5927b98b0e3e3d48
+  languageName: node
+  linkType: hard
+
+"env-paths@npm:^2.2.0":
+  version: 2.2.1
+  resolution: "env-paths@npm:2.2.1"
+  checksum: 10/65b5df55a8bab92229ab2b40dad3b387fad24613263d103a97f91c9fe43ceb21965cd3392b1ccb5d77088021e525c4e0481adb309625d0cb94ade1d1fb8dc17e
+  languageName: node
+  linkType: hard
+
+"err-code@npm:^2.0.2":
+  version: 2.0.3
+  resolution: "err-code@npm:2.0.3"
+  checksum: 10/1d20d825cdcce8d811bfbe86340f4755c02655a7feb2f13f8c880566d9d72a3f6c92c192a6867632e490d6da67b678271f46e01044996a6443e870331100dfdd
+  languageName: node
+  linkType: hard
+
+"error-ex@npm:^1.3.1":
+  version: 1.3.2
+  resolution: "error-ex@npm:1.3.2"
+  dependencies:
+    is-arrayish: "npm:^0.2.1"
+  checksum: 10/d547740aa29c34e753fb6fed2c5de81802438529c12b3673bd37b6bb1fe49b9b7abdc3c11e6062fe625d8a296b3cf769a80f878865e25e685f787763eede3ffb
+  languageName: node
+  linkType: hard
+
+"es-define-property@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "es-define-property@npm:1.0.0"
+  dependencies:
+    get-intrinsic: "npm:^1.2.4"
+  checksum: 10/f66ece0a887b6dca71848fa71f70461357c0e4e7249696f81bad0a1f347eed7b31262af4a29f5d726dc026426f085483b6b90301855e647aa8e21936f07293c6
+  languageName: node
+  linkType: hard
+
+"es-errors@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "es-errors@npm:1.3.0"
+  checksum: 10/96e65d640156f91b707517e8cdc454dd7d47c32833aa3e85d79f24f9eb7ea85f39b63e36216ef0114996581969b59fe609a94e30316b08f5f4df1d44134cf8d5
+  languageName: node
+  linkType: hard
+
+"es-get-iterator@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "es-get-iterator@npm:1.1.3"
+  dependencies:
+    call-bind: "npm:^1.0.2"
+    get-intrinsic: "npm:^1.1.3"
+    has-symbols: "npm:^1.0.3"
+    is-arguments: "npm:^1.1.1"
+    is-map: "npm:^2.0.2"
+    is-set: "npm:^2.0.2"
+    is-string: "npm:^1.0.7"
+    isarray: "npm:^2.0.5"
+    stop-iteration-iterator: "npm:^1.0.0"
+  checksum: 10/bc2194befbe55725f9489098626479deee3c801eda7e83ce0dff2eb266a28dc808edb9b623ff01d31ebc1328f09d661333d86b601036692c2e3c1a6942319433
+  languageName: node
+  linkType: hard
+
+"es-module-lexer@npm:^1.5.4":
+  version: 1.5.4
+  resolution: "es-module-lexer@npm:1.5.4"
+  checksum: 10/f29c7c97a58eb17640dcbd71bd6ef754ad4f58f95c3073894573d29dae2cad43ecd2060d97ed5b866dfb7804d5590fb7de1d2c5339a5fceae8bd60b580387fc5
+  languageName: node
+  linkType: hard
+
+"esbuild-register@npm:^3.5.0":
+  version: 3.6.0
+  resolution: "esbuild-register@npm:3.6.0"
+  dependencies:
+    debug: "npm:^4.3.4"
+  peerDependencies:
+    esbuild: ">=0.12 <1"
+  checksum: 10/4ae1a016e3dad5b53c3d68cf07e31d8c1cec1a0b584038ece726097ac80bd33ab48fb224c766c9b341c04793837e652461eaca9327a116e7564f553b61ccca71
+  languageName: node
+  linkType: hard
+
+"esbuild@npm:^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0":
+  version: 0.24.0
+  resolution: "esbuild@npm:0.24.0"
+  dependencies:
+    "@esbuild/aix-ppc64": "npm:0.24.0"
+    "@esbuild/android-arm": "npm:0.24.0"
+    "@esbuild/android-arm64": "npm:0.24.0"
+    "@esbuild/android-x64": "npm:0.24.0"
+    "@esbuild/darwin-arm64": "npm:0.24.0"
+    "@esbuild/darwin-x64": "npm:0.24.0"
+    "@esbuild/freebsd-arm64": "npm:0.24.0"
+    "@esbuild/freebsd-x64": "npm:0.24.0"
+    "@esbuild/linux-arm": "npm:0.24.0"
+    "@esbuild/linux-arm64": "npm:0.24.0"
+    "@esbuild/linux-ia32": "npm:0.24.0"
+    "@esbuild/linux-loong64": "npm:0.24.0"
+    "@esbuild/linux-mips64el": "npm:0.24.0"
+    "@esbuild/linux-ppc64": "npm:0.24.0"
+    "@esbuild/linux-riscv64": "npm:0.24.0"
+    "@esbuild/linux-s390x": "npm:0.24.0"
+    "@esbuild/linux-x64": "npm:0.24.0"
+    "@esbuild/netbsd-x64": "npm:0.24.0"
+    "@esbuild/openbsd-arm64": "npm:0.24.0"
+    "@esbuild/openbsd-x64": "npm:0.24.0"
+    "@esbuild/sunos-x64": "npm:0.24.0"
+    "@esbuild/win32-arm64": "npm:0.24.0"
+    "@esbuild/win32-ia32": "npm:0.24.0"
+    "@esbuild/win32-x64": "npm:0.24.0"
+  dependenciesMeta:
+    "@esbuild/aix-ppc64":
+      optional: true
+    "@esbuild/android-arm":
+      optional: true
+    "@esbuild/android-arm64":
+      optional: true
+    "@esbuild/android-x64":
+      optional: true
+    "@esbuild/darwin-arm64":
+      optional: true
+    "@esbuild/darwin-x64":
+      optional: true
+    "@esbuild/freebsd-arm64":
+      optional: true
+    "@esbuild/freebsd-x64":
+      optional: true
+    "@esbuild/linux-arm":
+      optional: true
+    "@esbuild/linux-arm64":
+      optional: true
+    "@esbuild/linux-ia32":
+      optional: true
+    "@esbuild/linux-loong64":
+      optional: true
+    "@esbuild/linux-mips64el":
+      optional: true
+    "@esbuild/linux-ppc64":
+      optional: true
+    "@esbuild/linux-riscv64":
+      optional: true
+    "@esbuild/linux-s390x":
+      optional: true
+    "@esbuild/linux-x64":
+      optional: true
+    "@esbuild/netbsd-x64":
+      optional: true
+    "@esbuild/openbsd-arm64":
+      optional: true
+    "@esbuild/openbsd-x64":
+      optional: true
+    "@esbuild/sunos-x64":
+      optional: true
+    "@esbuild/win32-arm64":
+      optional: true
+    "@esbuild/win32-ia32":
+      optional: true
+    "@esbuild/win32-x64":
+      optional: true
+  bin:
+    esbuild: bin/esbuild
+  checksum: 10/500f83a1216d6548053007b85c070d8293395db344605b17418c6cf1217e5e8d338fa77fc8af27c23faa121c5528e5b0004d46d3a0cdeb87d48f1b5fa0164bc5
+  languageName: node
+  linkType: hard
+
+"esbuild@npm:^0.21.3":
+  version: 0.21.5
+  resolution: "esbuild@npm:0.21.5"
+  dependencies:
+    "@esbuild/aix-ppc64": "npm:0.21.5"
+    "@esbuild/android-arm": "npm:0.21.5"
+    "@esbuild/android-arm64": "npm:0.21.5"
+    "@esbuild/android-x64": "npm:0.21.5"
+    "@esbuild/darwin-arm64": "npm:0.21.5"
+    "@esbuild/darwin-x64": "npm:0.21.5"
+    "@esbuild/freebsd-arm64": "npm:0.21.5"
+    "@esbuild/freebsd-x64": "npm:0.21.5"
+    "@esbuild/linux-arm": "npm:0.21.5"
+    "@esbuild/linux-arm64": "npm:0.21.5"
+    "@esbuild/linux-ia32": "npm:0.21.5"
+    "@esbuild/linux-loong64": "npm:0.21.5"
+    "@esbuild/linux-mips64el": "npm:0.21.5"
+    "@esbuild/linux-ppc64": "npm:0.21.5"
+    "@esbuild/linux-riscv64": "npm:0.21.5"
+    "@esbuild/linux-s390x": "npm:0.21.5"
+    "@esbuild/linux-x64": "npm:0.21.5"
+    "@esbuild/netbsd-x64": "npm:0.21.5"
+    "@esbuild/openbsd-x64": "npm:0.21.5"
+    "@esbuild/sunos-x64": "npm:0.21.5"
+    "@esbuild/win32-arm64": "npm:0.21.5"
+    "@esbuild/win32-ia32": "npm:0.21.5"
+    "@esbuild/win32-x64": "npm:0.21.5"
+  dependenciesMeta:
+    "@esbuild/aix-ppc64":
+      optional: true
+    "@esbuild/android-arm":
+      optional: true
+    "@esbuild/android-arm64":
+      optional: true
+    "@esbuild/android-x64":
+      optional: true
+    "@esbuild/darwin-arm64":
+      optional: true
+    "@esbuild/darwin-x64":
+      optional: true
+    "@esbuild/freebsd-arm64":
+      optional: true
+    "@esbuild/freebsd-x64":
+      optional: true
+    "@esbuild/linux-arm":
+      optional: true
+    "@esbuild/linux-arm64":
+      optional: true
+    "@esbuild/linux-ia32":
+      optional: true
+    "@esbuild/linux-loong64":
+      optional: true
+    "@esbuild/linux-mips64el":
+      optional: true
+    "@esbuild/linux-ppc64":
+      optional: true
+    "@esbuild/linux-riscv64":
+      optional: true
+    "@esbuild/linux-s390x":
+      optional: true
+    "@esbuild/linux-x64":
+      optional: true
+    "@esbuild/netbsd-x64":
+      optional: true
+    "@esbuild/openbsd-x64":
+      optional: true
+    "@esbuild/sunos-x64":
+      optional: true
+    "@esbuild/win32-arm64":
+      optional: true
+    "@esbuild/win32-ia32":
+      optional: true
+    "@esbuild/win32-x64":
+      optional: true
+  bin:
+    esbuild: bin/esbuild
+  checksum: 10/d2ff2ca84d30cce8e871517374d6c2290835380dc7cd413b2d49189ed170d45e407be14de2cb4794cf76f75cf89955c4714726ebd3de7444b3046f5cab23ab6b
+  languageName: node
+  linkType: hard
+
+"escalade@npm:^3.1.1, escalade@npm:^3.2.0":
+  version: 3.2.0
+  resolution: "escalade@npm:3.2.0"
+  checksum: 10/9d7169e3965b2f9ae46971afa392f6e5a25545ea30f2e2dd99c9b0a95a3f52b5653681a84f5b2911a413ddad2d7a93d3514165072f349b5ffc59c75a899970d6
+  languageName: node
+  linkType: hard
+
+"escape-string-regexp@npm:^1.0.5":
+  version: 1.0.5
+  resolution: "escape-string-regexp@npm:1.0.5"
+  checksum: 10/6092fda75c63b110c706b6a9bfde8a612ad595b628f0bd2147eea1d3406723020810e591effc7db1da91d80a71a737a313567c5abb3813e8d9c71f4aa595b410
+  languageName: node
+  linkType: hard
+
+"escape-string-regexp@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "escape-string-regexp@npm:2.0.0"
+  checksum: 10/9f8a2d5743677c16e85c810e3024d54f0c8dea6424fad3c79ef6666e81dd0846f7437f5e729dfcdac8981bc9e5294c39b4580814d114076b8d36318f46ae4395
+  languageName: node
+  linkType: hard
+
+"escape-string-regexp@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "escape-string-regexp@npm:4.0.0"
+  checksum: 10/98b48897d93060f2322108bf29db0feba7dd774be96cd069458d1453347b25ce8682ecc39859d4bca2203cc0ab19c237bcc71755eff49a0f8d90beadeeba5cc5
+  languageName: node
+  linkType: hard
+
+"escodegen@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "escodegen@npm:2.1.0"
+  dependencies:
+    esprima: "npm:^4.0.1"
+    estraverse: "npm:^5.2.0"
+    esutils: "npm:^2.0.2"
+    source-map: "npm:~0.6.1"
+  dependenciesMeta:
+    source-map:
+      optional: true
+  bin:
+    escodegen: bin/escodegen.js
+    esgenerate: bin/esgenerate.js
+  checksum: 10/47719a65b2888b4586e3fa93769068b275961c13089e90d5d01a96a6e8e95871b1c3893576814c8fbf08a4a31a496f37e7b2c937cf231270f4d81de012832c7c
+  languageName: node
+  linkType: hard
+
+"eslint-plugin-react-hooks@npm:^4.6.0":
+  version: 4.6.2
+  resolution: "eslint-plugin-react-hooks@npm:4.6.2"
+  peerDependencies:
+    eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
+  checksum: 10/5a0680941f34e70cf505bcb6082df31a3e445d193ee95a88ff3483041eb944f4cefdaf7e81b0eb1feb4eeceee8c7c6ddb8a2a6e8c4c0388514a42e16ac7b7a69
+  languageName: node
+  linkType: hard
+
+"eslint-plugin-react-refresh@npm:^0.4.5":
+  version: 0.4.13
+  resolution: "eslint-plugin-react-refresh@npm:0.4.13"
+  peerDependencies:
+    eslint: ">=7"
+  checksum: 10/a266b11fb457687ff3ac29b9d854a22e32ca0a6f087efe848a3b18a70eee1ed11e1b636a71cadb9441cb7438560742176540553c5f0dafdcc3914ddb44e298ee
+  languageName: node
+  linkType: hard
+
+"eslint-plugin-storybook@npm:^0.6.15":
+  version: 0.6.15
+  resolution: "eslint-plugin-storybook@npm:0.6.15"
+  dependencies:
+    "@storybook/csf": "npm:^0.0.1"
+    "@typescript-eslint/utils": "npm:^5.45.0"
+    requireindex: "npm:^1.1.0"
+    ts-dedent: "npm:^2.2.0"
+  peerDependencies:
+    eslint: ">=6"
+  checksum: 10/0c278594c8474ce2f176ffc6610240ae9d6c8f9dafbff02be61e6ae05f15081ce858c5b16e64d8995a3a3777c9d1725953fcde4312efab9118aa544a75b27c46
+  languageName: node
+  linkType: hard
+
+"eslint-scope@npm:^5.1.1":
+  version: 5.1.1
+  resolution: "eslint-scope@npm:5.1.1"
+  dependencies:
+    esrecurse: "npm:^4.3.0"
+    estraverse: "npm:^4.1.1"
+  checksum: 10/c541ef384c92eb5c999b7d3443d80195fcafb3da335500946f6db76539b87d5826c8f2e1d23bf6afc3154ba8cd7c8e566f8dc00f1eea25fdf3afc8fb9c87b238
+  languageName: node
+  linkType: hard
+
+"eslint-scope@npm:^7.2.2":
+  version: 7.2.2
+  resolution: "eslint-scope@npm:7.2.2"
+  dependencies:
+    esrecurse: "npm:^4.3.0"
+    estraverse: "npm:^5.2.0"
+  checksum: 10/5c660fb905d5883ad018a6fea2b49f3cb5b1cbf2cd4bd08e98646e9864f9bc2c74c0839bed2d292e90a4a328833accc197c8f0baed89cbe8d605d6f918465491
+  languageName: node
+  linkType: hard
+
+"eslint-visitor-keys@npm:^3.3.0, eslint-visitor-keys@npm:^3.4.1, eslint-visitor-keys@npm:^3.4.3":
+  version: 3.4.3
+  resolution: "eslint-visitor-keys@npm:3.4.3"
+  checksum: 10/3f357c554a9ea794b094a09bd4187e5eacd1bc0d0653c3adeb87962c548e6a1ab8f982b86963ae1337f5d976004146536dcee5d0e2806665b193fbfbf1a9231b
+  languageName: node
+  linkType: hard
+
+"eslint@npm:^8.56.0":
+  version: 8.57.1
+  resolution: "eslint@npm:8.57.1"
+  dependencies:
+    "@eslint-community/eslint-utils": "npm:^4.2.0"
+    "@eslint-community/regexpp": "npm:^4.6.1"
+    "@eslint/eslintrc": "npm:^2.1.4"
+    "@eslint/js": "npm:8.57.1"
+    "@humanwhocodes/config-array": "npm:^0.13.0"
+    "@humanwhocodes/module-importer": "npm:^1.0.1"
+    "@nodelib/fs.walk": "npm:^1.2.8"
+    "@ungap/structured-clone": "npm:^1.2.0"
+    ajv: "npm:^6.12.4"
+    chalk: "npm:^4.0.0"
+    cross-spawn: "npm:^7.0.2"
+    debug: "npm:^4.3.2"
+    doctrine: "npm:^3.0.0"
+    escape-string-regexp: "npm:^4.0.0"
+    eslint-scope: "npm:^7.2.2"
+    eslint-visitor-keys: "npm:^3.4.3"
+    espree: "npm:^9.6.1"
+    esquery: "npm:^1.4.2"
+    esutils: "npm:^2.0.2"
+    fast-deep-equal: "npm:^3.1.3"
+    file-entry-cache: "npm:^6.0.1"
+    find-up: "npm:^5.0.0"
+    glob-parent: "npm:^6.0.2"
+    globals: "npm:^13.19.0"
+    graphemer: "npm:^1.4.0"
+    ignore: "npm:^5.2.0"
+    imurmurhash: "npm:^0.1.4"
+    is-glob: "npm:^4.0.0"
+    is-path-inside: "npm:^3.0.3"
+    js-yaml: "npm:^4.1.0"
+    json-stable-stringify-without-jsonify: "npm:^1.0.1"
+    levn: "npm:^0.4.1"
+    lodash.merge: "npm:^4.6.2"
+    minimatch: "npm:^3.1.2"
+    natural-compare: "npm:^1.4.0"
+    optionator: "npm:^0.9.3"
+    strip-ansi: "npm:^6.0.1"
+    text-table: "npm:^0.2.0"
+  bin:
+    eslint: bin/eslint.js
+  checksum: 10/5504fa24879afdd9f9929b2fbfc2ee9b9441a3d464efd9790fbda5f05738858530182029f13323add68d19fec749d3ab4a70320ded091ca4432b1e9cc4ed104c
+  languageName: node
+  linkType: hard
+
+"espree@npm:^9.6.0, espree@npm:^9.6.1":
+  version: 9.6.1
+  resolution: "espree@npm:9.6.1"
+  dependencies:
+    acorn: "npm:^8.9.0"
+    acorn-jsx: "npm:^5.3.2"
+    eslint-visitor-keys: "npm:^3.4.1"
+  checksum: 10/255ab260f0d711a54096bdeda93adff0eadf02a6f9b92f02b323e83a2b7fc258797919437ad331efec3930475feb0142c5ecaaf3cdab4befebd336d47d3f3134
+  languageName: node
+  linkType: hard
+
+"esprima@npm:^4.0.0, esprima@npm:^4.0.1, esprima@npm:~4.0.0":
+  version: 4.0.1
+  resolution: "esprima@npm:4.0.1"
+  bin:
+    esparse: ./bin/esparse.js
+    esvalidate: ./bin/esvalidate.js
+  checksum: 10/f1d3c622ad992421362294f7acf866aa9409fbad4eb2e8fa230bd33944ce371d32279667b242d8b8907ec2b6ad7353a717f3c0e60e748873a34a7905174bc0eb
+  languageName: node
+  linkType: hard
+
+"esquery@npm:^1.4.2":
+  version: 1.6.0
+  resolution: "esquery@npm:1.6.0"
+  dependencies:
+    estraverse: "npm:^5.1.0"
+  checksum: 10/c587fb8ec9ed83f2b1bc97cf2f6854cc30bf784a79d62ba08c6e358bf22280d69aee12827521cf38e69ae9761d23fb7fde593ce315610f85655c139d99b05e5a
+  languageName: node
+  linkType: hard
+
+"esrecurse@npm:^4.3.0":
+  version: 4.3.0
+  resolution: "esrecurse@npm:4.3.0"
+  dependencies:
+    estraverse: "npm:^5.2.0"
+  checksum: 10/44ffcd89e714ea6b30143e7f119b104fc4d75e77ee913f34d59076b40ef2d21967f84e019f84e1fd0465b42cdbf725db449f232b5e47f29df29ed76194db8e16
+  languageName: node
+  linkType: hard
+
+"estraverse@npm:^4.1.1":
+  version: 4.3.0
+  resolution: "estraverse@npm:4.3.0"
+  checksum: 10/3f67ad02b6dbfaddd9ea459cf2b6ef4ecff9a6082a7af9d22e445b9abc082ad9ca47e1825557b293fcdae477f4714e561123e30bb6a5b2f184fb2bad4a9497eb
+  languageName: node
+  linkType: hard
+
+"estraverse@npm:^5.1.0, estraverse@npm:^5.2.0":
+  version: 5.3.0
+  resolution: "estraverse@npm:5.3.0"
+  checksum: 10/37cbe6e9a68014d34dbdc039f90d0baf72436809d02edffcc06ba3c2a12eb298048f877511353b130153e532aac8d68ba78430c0dd2f44806ebc7c014b01585e
+  languageName: node
+  linkType: hard
+
+"estree-walker@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "estree-walker@npm:2.0.2"
+  checksum: 10/b02109c5d46bc2ed47de4990eef770f7457b1159a229f0999a09224d2b85ffeed2d7679cffcff90aeb4448e94b0168feb5265b209cdec29aad50a3d6e93d21e2
+  languageName: node
+  linkType: hard
+
+"estree-walker@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "estree-walker@npm:3.0.3"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+  checksum: 10/a65728d5727b71de172c5df323385755a16c0fdab8234dc756c3854cfee343261ddfbb72a809a5660fac8c75d960bb3e21aa898c2d7e9b19bb298482ca58a3af
+  languageName: node
+  linkType: hard
+
+"esutils@npm:^2.0.2":
+  version: 2.0.3
+  resolution: "esutils@npm:2.0.3"
+  checksum: 10/b23acd24791db11d8f65be5ea58fd9a6ce2df5120ae2da65c16cfc5331ff59d5ac4ef50af66cd4bde238881503ec839928a0135b99a036a9cdfa22d17fd56cdb
+  languageName: node
+  linkType: hard
+
+"eventemitter2@npm:6.4.7":
+  version: 6.4.7
+  resolution: "eventemitter2@npm:6.4.7"
+  checksum: 10/df2a733ee3a7ac6e7f6988cebbaac5b14b46bf82f700f1ec86f9e3f3d095dba20f9aa5c29d9d62a6f50fd943f798f7f2a38c4e1b45148f6f7cec7586a8ac6881
+  languageName: node
+  linkType: hard
+
+"execa@npm:4.1.0":
+  version: 4.1.0
+  resolution: "execa@npm:4.1.0"
+  dependencies:
+    cross-spawn: "npm:^7.0.0"
+    get-stream: "npm:^5.0.0"
+    human-signals: "npm:^1.1.1"
+    is-stream: "npm:^2.0.0"
+    merge-stream: "npm:^2.0.0"
+    npm-run-path: "npm:^4.0.0"
+    onetime: "npm:^5.1.0"
+    signal-exit: "npm:^3.0.2"
+    strip-final-newline: "npm:^2.0.0"
+  checksum: 10/ed58e41fe424797f3d837c8fb622548eeb72fa03324f2676af95f806568904eb55f196127a097f87d4517cab524c169ece13e6c9e201867de57b089584864b8f
+  languageName: node
+  linkType: hard
+
+"execa@npm:^5.0.0":
+  version: 5.1.1
+  resolution: "execa@npm:5.1.1"
+  dependencies:
+    cross-spawn: "npm:^7.0.3"
+    get-stream: "npm:^6.0.0"
+    human-signals: "npm:^2.1.0"
+    is-stream: "npm:^2.0.0"
+    merge-stream: "npm:^2.0.0"
+    npm-run-path: "npm:^4.0.1"
+    onetime: "npm:^5.1.2"
+    signal-exit: "npm:^3.0.3"
+    strip-final-newline: "npm:^2.0.0"
+  checksum: 10/8ada91f2d70f7dff702c861c2c64f21dfdc1525628f3c0454fd6f02fce65f7b958616cbd2b99ca7fa4d474e461a3d363824e91b3eb881705231abbf387470597
+  languageName: node
+  linkType: hard
+
+"executable@npm:^4.1.1":
+  version: 4.1.1
+  resolution: "executable@npm:4.1.1"
+  dependencies:
+    pify: "npm:^2.2.0"
+  checksum: 10/f01927ce59bccec804e171bf859a26e362c1f50aa9ebc69f7cafdcce3859d29d4b6267fd47237c18b0a1830614bd3f0ee14b7380d9bad18a4e7af9b5f0b6984f
+  languageName: node
+  linkType: hard
+
+"exit@npm:^0.1.2":
+  version: 0.1.2
+  resolution: "exit@npm:0.1.2"
+  checksum: 10/387555050c5b3c10e7a9e8df5f43194e95d7737c74532c409910e585d5554eaff34960c166643f5e23d042196529daad059c292dcf1fb61b8ca878d3677f4b87
+  languageName: node
+  linkType: hard
+
+"expect-type@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "expect-type@npm:1.1.0"
+  checksum: 10/05fca80ddc7d493a89361f783c6b000750fa04a8226bc24701f3b90adb0efc2fb467f2a0baaed4015a02d8b9034ef5bb87521df9dba980f50b1105bd596ef833
+  languageName: node
+  linkType: hard
+
+"expect@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "expect@npm:29.7.0"
+  dependencies:
+    "@jest/expect-utils": "npm:^29.7.0"
+    jest-get-type: "npm:^29.6.3"
+    jest-matcher-utils: "npm:^29.7.0"
+    jest-message-util: "npm:^29.7.0"
+    jest-util: "npm:^29.7.0"
+  checksum: 10/63f97bc51f56a491950fb525f9ad94f1916e8a014947f8d8445d3847a665b5471b768522d659f5e865db20b6c2033d2ac10f35fcbd881a4d26407a4f6f18451a
+  languageName: node
+  linkType: hard
+
+"exponential-backoff@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "exponential-backoff@npm:3.1.1"
+  checksum: 10/2d9bbb6473de7051f96790d5f9a678f32e60ed0aa70741dc7fdc96fec8d631124ec3374ac144387604f05afff9500f31a1d45bd9eee4cdc2e4f9ad2d9b9d5dbd
+  languageName: node
+  linkType: hard
+
+"extend@npm:~3.0.2":
+  version: 3.0.2
+  resolution: "extend@npm:3.0.2"
+  checksum: 10/59e89e2dc798ec0f54b36d82f32a27d5f6472c53974f61ca098db5d4648430b725387b53449a34df38fd0392045434426b012f302b3cc049a6500ccf82877e4e
+  languageName: node
+  linkType: hard
+
+"extract-zip@npm:2.0.1":
+  version: 2.0.1
+  resolution: "extract-zip@npm:2.0.1"
+  dependencies:
+    "@types/yauzl": "npm:^2.9.1"
+    debug: "npm:^4.1.1"
+    get-stream: "npm:^5.1.0"
+    yauzl: "npm:^2.10.0"
+  dependenciesMeta:
+    "@types/yauzl":
+      optional: true
+  bin:
+    extract-zip: cli.js
+  checksum: 10/8cbda9debdd6d6980819cc69734d874ddd71051c9fe5bde1ef307ebcedfe949ba57b004894b585f758b7c9eeeea0e3d87f2dda89b7d25320459c2c9643ebb635
+  languageName: node
+  linkType: hard
+
+"extsprintf@npm:1.3.0":
+  version: 1.3.0
+  resolution: "extsprintf@npm:1.3.0"
+  checksum: 10/26967d6c7ecbfb5bc5b7a6c43503dc5fafd9454802037e9fa1665e41f615da4ff5918bd6cb871a3beabed01a31eca1ccd0bdfb41231f50ad50d405a430f78377
+  languageName: node
+  linkType: hard
+
+"extsprintf@npm:^1.2.0":
+  version: 1.4.1
+  resolution: "extsprintf@npm:1.4.1"
+  checksum: 10/bfd6d55f3c0c04d826fe0213264b383c03f32825af6b1ff777f3f2dc49467e599361993568d75b7b19a8ea1bb08c8e7cd8c3d87d179ced91bb0dcf81ca6938e0
+  languageName: node
+  linkType: hard
+
+"fast-deep-equal@npm:^3.1.1, fast-deep-equal@npm:^3.1.3":
+  version: 3.1.3
+  resolution: "fast-deep-equal@npm:3.1.3"
+  checksum: 10/e21a9d8d84f53493b6aa15efc9cfd53dd5b714a1f23f67fb5dc8f574af80df889b3bce25dc081887c6d25457cce704e636395333abad896ccdec03abaf1f3f9d
+  languageName: node
+  linkType: hard
+
+"fast-glob@npm:^3.2.9":
+  version: 3.3.2
+  resolution: "fast-glob@npm:3.3.2"
+  dependencies:
+    "@nodelib/fs.stat": "npm:^2.0.2"
+    "@nodelib/fs.walk": "npm:^1.2.3"
+    glob-parent: "npm:^5.1.2"
+    merge2: "npm:^1.3.0"
+    micromatch: "npm:^4.0.4"
+  checksum: 10/222512e9315a0efca1276af9adb2127f02105d7288fa746145bf45e2716383fb79eb983c89601a72a399a56b7c18d38ce70457c5466218c5f13fad957cee16df
+  languageName: node
+  linkType: hard
+
+"fast-json-stable-stringify@npm:^2.0.0, fast-json-stable-stringify@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "fast-json-stable-stringify@npm:2.1.0"
+  checksum: 10/2c20055c1fa43c922428f16ca8bb29f2807de63e5c851f665f7ac9790176c01c3b40335257736b299764a8d383388dabc73c8083b8e1bc3d99f0a941444ec60e
+  languageName: node
+  linkType: hard
+
+"fast-levenshtein@npm:^2.0.6":
+  version: 2.0.6
+  resolution: "fast-levenshtein@npm:2.0.6"
+  checksum: 10/eb7e220ecf2bab5159d157350b81d01f75726a4382f5a9266f42b9150c4523b9795f7f5d9fbbbeaeac09a441b2369f05ee02db48ea938584205530fe5693cfe1
+  languageName: node
+  linkType: hard
+
+"fastq@npm:^1.6.0":
+  version: 1.17.1
+  resolution: "fastq@npm:1.17.1"
+  dependencies:
+    reusify: "npm:^1.0.4"
+  checksum: 10/a443180068b527dd7b3a63dc7f2a47ceca2f3e97b9c00a1efe5538757e6cc4056a3526df94308075d7727561baf09ebaa5b67da8dcbddb913a021c5ae69d1f69
+  languageName: node
+  linkType: hard
+
+"fb-watchman@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "fb-watchman@npm:2.0.2"
+  dependencies:
+    bser: "npm:2.1.1"
+  checksum: 10/4f95d336fb805786759e383fd7fff342ceb7680f53efcc0ef82f502eb479ce35b98e8b207b6dfdfeea0eba845862107dc73813775fc6b56b3098c6e90a2dad77
+  languageName: node
+  linkType: hard
+
+"fd-slicer@npm:~1.1.0":
+  version: 1.1.0
+  resolution: "fd-slicer@npm:1.1.0"
+  dependencies:
+    pend: "npm:~1.2.0"
+  checksum: 10/db3e34fa483b5873b73f248e818f8a8b59a6427fd8b1436cd439c195fdf11e8659419404826059a642b57d18075c856d06d6a50a1413b714f12f833a9341ead3
+  languageName: node
+  linkType: hard
+
+"fdir@npm:^6.4.2":
+  version: 6.4.2
+  resolution: "fdir@npm:6.4.2"
+  peerDependencies:
+    picomatch: ^3 || ^4
+  peerDependenciesMeta:
+    picomatch:
+      optional: true
+  checksum: 10/5ff80d1d2034e75cc68be175401c9f64c4938a6b2c1e9a0c27f2d211ffbe491fd86d29e4576825d9da8aff9bd465f0283427c2dddc11653457906c46d3bbc448
+  languageName: node
+  linkType: hard
+
+"fflate@npm:^0.8.2":
+  version: 0.8.2
+  resolution: "fflate@npm:0.8.2"
+  checksum: 10/2bd26ba6d235d428de793c6a0cd1aaa96a06269ebd4e21b46c8fd1bd136abc631acf27e188d47c3936db090bf3e1ede11d15ce9eae9bffdc4bfe1b9dc66ca9cb
+  languageName: node
+  linkType: hard
+
+"figures@npm:^3.2.0":
+  version: 3.2.0
+  resolution: "figures@npm:3.2.0"
+  dependencies:
+    escape-string-regexp: "npm:^1.0.5"
+  checksum: 10/a3bf94e001be51d3770500789157f067218d4bc681a65e1f69d482de15120bcac822dceb1a7b3803f32e4e3a61a46df44f7f2c8ba95d6375e7491502e0dd3d97
+  languageName: node
+  linkType: hard
+
+"file-entry-cache@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "file-entry-cache@npm:6.0.1"
+  dependencies:
+    flat-cache: "npm:^3.0.4"
+  checksum: 10/099bb9d4ab332cb93c48b14807a6918a1da87c45dce91d4b61fd40e6505d56d0697da060cb901c729c90487067d93c9243f5da3dc9c41f0358483bfdebca736b
+  languageName: node
+  linkType: hard
+
+"fill-range@npm:^7.1.1":
+  version: 7.1.1
+  resolution: "fill-range@npm:7.1.1"
+  dependencies:
+    to-regex-range: "npm:^5.0.1"
+  checksum: 10/a7095cb39e5bc32fada2aa7c7249d3f6b01bd1ce461a61b0adabacccabd9198500c6fb1f68a7c851a657e273fce2233ba869638897f3d7ed2e87a2d89b4436ea
+  languageName: node
+  linkType: hard
+
+"find-up@npm:^4.0.0, find-up@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "find-up@npm:4.1.0"
+  dependencies:
+    locate-path: "npm:^5.0.0"
+    path-exists: "npm:^4.0.0"
+  checksum: 10/4c172680e8f8c1f78839486e14a43ef82e9decd0e74145f40707cc42e7420506d5ec92d9a11c22bd2c48fb0c384ea05dd30e10dd152fefeec6f2f75282a8b844
+  languageName: node
+  linkType: hard
+
+"find-up@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "find-up@npm:5.0.0"
+  dependencies:
+    locate-path: "npm:^6.0.0"
+    path-exists: "npm:^4.0.0"
+  checksum: 10/07955e357348f34660bde7920783204ff5a26ac2cafcaa28bace494027158a97b9f56faaf2d89a6106211a8174db650dd9f503f9c0d526b1202d5554a00b9095
+  languageName: node
+  linkType: hard
+
+"flat-cache@npm:^3.0.4":
+  version: 3.2.0
+  resolution: "flat-cache@npm:3.2.0"
+  dependencies:
+    flatted: "npm:^3.2.9"
+    keyv: "npm:^4.5.3"
+    rimraf: "npm:^3.0.2"
+  checksum: 10/02381c6ece5e9fa5b826c9bbea481d7fd77645d96e4b0b1395238124d581d10e56f17f723d897b6d133970f7a57f0fab9148cbbb67237a0a0ffe794ba60c0c70
+  languageName: node
+  linkType: hard
+
+"flatted@npm:^3.2.9":
+  version: 3.3.1
+  resolution: "flatted@npm:3.3.1"
+  checksum: 10/7b8376061d5be6e0d3658bbab8bde587647f68797cf6bfeae9dea0e5137d9f27547ab92aaff3512dd9d1299086a6d61be98e9d48a56d17531b634f77faadbc49
+  languageName: node
+  linkType: hard
+
+"flatted@npm:^3.3.1":
+  version: 3.3.2
+  resolution: "flatted@npm:3.3.2"
+  checksum: 10/ac3c159742e01d0e860a861164bcfd35bb567ccbebb8a0dd041e61cf3c64a435b917dd1e7ed1c380c2ebca85735fb16644485ec33665bc6aafc3b316aa1eed44
+  languageName: node
+  linkType: hard
+
+"for-each@npm:^0.3.3":
+  version: 0.3.3
+  resolution: "for-each@npm:0.3.3"
+  dependencies:
+    is-callable: "npm:^1.1.3"
+  checksum: 10/fdac0cde1be35610bd635ae958422e8ce0cc1313e8d32ea6d34cfda7b60850940c1fd07c36456ad76bd9c24aef6ff5e03b02beb58c83af5ef6c968a64eada676
+  languageName: node
+  linkType: hard
+
+"foreground-child@npm:^3.1.0":
+  version: 3.3.0
+  resolution: "foreground-child@npm:3.3.0"
+  dependencies:
+    cross-spawn: "npm:^7.0.0"
+    signal-exit: "npm:^4.0.1"
+  checksum: 10/e3a60480f3a09b12273ce2c5fcb9514d98dd0e528f58656a1b04680225f918d60a2f81f6a368f2f3b937fcee9cfc0cbf16f1ad9a0bc6a3a6e103a84c9a90087e
+  languageName: node
+  linkType: hard
+
+"forever-agent@npm:~0.6.1":
+  version: 0.6.1
+  resolution: "forever-agent@npm:0.6.1"
+  checksum: 10/c1e1644d5e074ac063ecbc3fb8582013ef91fff0e3fa41e76db23d2f62bc6d9677aac86db950917deed4fe1fdd772df780cfaa352075f23deec9c015313afb97
+  languageName: node
+  linkType: hard
+
+"form-data@npm:^4.0.0, form-data@npm:~4.0.0":
+  version: 4.0.1
+  resolution: "form-data@npm:4.0.1"
+  dependencies:
+    asynckit: "npm:^0.4.0"
+    combined-stream: "npm:^1.0.8"
+    mime-types: "npm:^2.1.12"
+  checksum: 10/6adb1cff557328bc6eb8a68da205f9ae44ab0e88d4d9237aaf91eed591ffc64f77411efb9016af7d87f23d0a038c45a788aa1c6634e51175c4efa36c2bc53774
+  languageName: node
+  linkType: hard
+
+"fs-extra@npm:^9.1.0":
+  version: 9.1.0
+  resolution: "fs-extra@npm:9.1.0"
+  dependencies:
+    at-least-node: "npm:^1.0.0"
+    graceful-fs: "npm:^4.2.0"
+    jsonfile: "npm:^6.0.1"
+    universalify: "npm:^2.0.0"
+  checksum: 10/08600da1b49552ed23dfac598c8fc909c66776dd130fea54fbcad22e330f7fcc13488bb995f6bc9ce5651aa35b65702faf616fe76370ee56f1aade55da982dca
+  languageName: node
+  linkType: hard
+
+"fs-minipass@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "fs-minipass@npm:2.1.0"
+  dependencies:
+    minipass: "npm:^3.0.0"
+  checksum: 10/03191781e94bc9a54bd376d3146f90fe8e082627c502185dbf7b9b3032f66b0b142c1115f3b2cc5936575fc1b44845ce903dd4c21bec2a8d69f3bd56f9cee9ec
+  languageName: node
+  linkType: hard
+
+"fs-minipass@npm:^3.0.0":
+  version: 3.0.3
+  resolution: "fs-minipass@npm:3.0.3"
+  dependencies:
+    minipass: "npm:^7.0.3"
+  checksum: 10/af143246cf6884fe26fa281621d45cfe111d34b30535a475bfa38dafe343dadb466c047a924ffc7d6b7b18265df4110224ce3803806dbb07173bf2087b648d7f
+  languageName: node
+  linkType: hard
+
+"fs.realpath@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "fs.realpath@npm:1.0.0"
+  checksum: 10/e703107c28e362d8d7b910bbcbfd371e640a3bb45ae157a362b5952c0030c0b6d4981140ec319b347bce7adc025dd7813da1ff908a945ac214d64f5402a51b96
+  languageName: node
+  linkType: hard
+
+"fsevents@npm:2.3.2":
+  version: 2.3.2
+  resolution: "fsevents@npm:2.3.2"
+  dependencies:
+    node-gyp: "npm:latest"
+  checksum: 10/6b5b6f5692372446ff81cf9501c76e3e0459a4852b3b5f1fc72c103198c125a6b8c72f5f166bdd76ffb2fca261e7f6ee5565daf80dca6e571e55bcc589cc1256
+  conditions: os=darwin
+  languageName: node
+  linkType: hard
+
+"fsevents@npm:^2.3.2, fsevents@npm:~2.3.2, fsevents@npm:~2.3.3":
+  version: 2.3.3
+  resolution: "fsevents@npm:2.3.3"
+  dependencies:
+    node-gyp: "npm:latest"
+  checksum: 10/4c1ade961ded57cdbfbb5cac5106ec17bc8bccd62e16343c569a0ceeca83b9dfef87550b4dc5cbb89642da412b20c5071f304c8c464b80415446e8e155a038c0
+  conditions: os=darwin
+  languageName: node
+  linkType: hard
+
+"fsevents@patch:fsevents@npm%3A2.3.2#optional!builtin<compat/fsevents>":
+  version: 2.3.2
+  resolution: "fsevents@patch:fsevents@npm%3A2.3.2#optional!builtin<compat/fsevents>::version=2.3.2&hash=df0bf1"
+  dependencies:
+    node-gyp: "npm:latest"
+  conditions: os=darwin
+  languageName: node
+  linkType: hard
+
+"fsevents@patch:fsevents@npm%3A^2.3.2#optional!builtin<compat/fsevents>, fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin<compat/fsevents>, fsevents@patch:fsevents@npm%3A~2.3.3#optional!builtin<compat/fsevents>":
+  version: 2.3.3
+  resolution: "fsevents@patch:fsevents@npm%3A2.3.3#optional!builtin<compat/fsevents>::version=2.3.3&hash=df0bf1"
+  dependencies:
+    node-gyp: "npm:latest"
+  conditions: os=darwin
+  languageName: node
+  linkType: hard
+
+"function-bind@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "function-bind@npm:1.1.2"
+  checksum: 10/185e20d20f10c8d661d59aac0f3b63b31132d492e1b11fcc2a93cb2c47257ebaee7407c38513efd2b35cafdf972d9beb2ea4593c1e0f3bf8f2744836928d7454
+  languageName: node
+  linkType: hard
+
+"functions-have-names@npm:^1.2.3":
+  version: 1.2.3
+  resolution: "functions-have-names@npm:1.2.3"
+  checksum: 10/0ddfd3ed1066a55984aaecebf5419fbd9344a5c38dd120ffb0739fac4496758dcf371297440528b115e4367fc46e3abc86a2cc0ff44612181b175ae967a11a05
+  languageName: node
+  linkType: hard
+
+"gensync@npm:^1.0.0-beta.2":
+  version: 1.0.0-beta.2
+  resolution: "gensync@npm:1.0.0-beta.2"
+  checksum: 10/17d8333460204fbf1f9160d067e1e77f908a5447febb49424b8ab043026049835c9ef3974445c57dbd39161f4d2b04356d7de12b2eecaa27a7a7ea7d871cbedd
+  languageName: node
+  linkType: hard
+
+"get-caller-file@npm:^2.0.5":
+  version: 2.0.5
+  resolution: "get-caller-file@npm:2.0.5"
+  checksum: 10/b9769a836d2a98c3ee734a88ba712e62703f1df31b94b784762c433c27a386dd6029ff55c2a920c392e33657d80191edbf18c61487e198844844516f843496b9
+  languageName: node
+  linkType: hard
+
+"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.2, get-intrinsic@npm:^1.2.4":
+  version: 1.2.4
+  resolution: "get-intrinsic@npm:1.2.4"
+  dependencies:
+    es-errors: "npm:^1.3.0"
+    function-bind: "npm:^1.1.2"
+    has-proto: "npm:^1.0.1"
+    has-symbols: "npm:^1.0.3"
+    hasown: "npm:^2.0.0"
+  checksum: 10/85bbf4b234c3940edf8a41f4ecbd4e25ce78e5e6ad4e24ca2f77037d983b9ef943fd72f00f3ee97a49ec622a506b67db49c36246150377efcda1c9eb03e5f06d
+  languageName: node
+  linkType: hard
+
+"get-package-type@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "get-package-type@npm:0.1.0"
+  checksum: 10/bba0811116d11e56d702682ddef7c73ba3481f114590e705fc549f4d868972263896af313c57a25c076e3c0d567e11d919a64ba1b30c879be985fc9d44f96148
+  languageName: node
+  linkType: hard
+
+"get-stream@npm:^5.0.0, get-stream@npm:^5.1.0":
+  version: 5.2.0
+  resolution: "get-stream@npm:5.2.0"
+  dependencies:
+    pump: "npm:^3.0.0"
+  checksum: 10/13a73148dca795e41421013da6e3ebff8ccb7fba4d2f023fd0c6da2c166ec4e789bec9774a73a7b49c08daf2cae552f8a3e914042ac23b5f59dd278cc8f9cbfb
+  languageName: node
+  linkType: hard
+
+"get-stream@npm:^6.0.0":
+  version: 6.0.1
+  resolution: "get-stream@npm:6.0.1"
+  checksum: 10/781266d29725f35c59f1d214aedc92b0ae855800a980800e2923b3fbc4e56b3cb6e462c42e09a1cf1a00c64e056a78fa407cbe06c7c92b7e5cd49b4b85c2a497
+  languageName: node
+  linkType: hard
+
+"getos@npm:^3.2.1":
+  version: 3.2.1
+  resolution: "getos@npm:3.2.1"
+  dependencies:
+    async: "npm:^3.2.0"
+  checksum: 10/228bede057f5cbed93dc6a66ce459a0364059faa2869682547663302f612e6295f13d3ad2a54ebbed573a9eb7f8124508b24409df6bcda6e15906c357526d11f
+  languageName: node
+  linkType: hard
+
+"getpass@npm:^0.1.1":
+  version: 0.1.7
+  resolution: "getpass@npm:0.1.7"
+  dependencies:
+    assert-plus: "npm:^1.0.0"
+  checksum: 10/ab18d55661db264e3eac6012c2d3daeafaab7a501c035ae0ccb193c3c23e9849c6e29b6ac762b9c2adae460266f925d55a3a2a3a3c8b94be2f222df94d70c046
+  languageName: node
+  linkType: hard
+
+"glob-parent@npm:^5.1.2":
+  version: 5.1.2
+  resolution: "glob-parent@npm:5.1.2"
+  dependencies:
+    is-glob: "npm:^4.0.1"
+  checksum: 10/32cd106ce8c0d83731966d31517adb766d02c3812de49c30cfe0675c7c0ae6630c11214c54a5ae67aca882cf738d27fd7768f21aa19118b9245950554be07247
+  languageName: node
+  linkType: hard
+
+"glob-parent@npm:^6.0.2":
+  version: 6.0.2
+  resolution: "glob-parent@npm:6.0.2"
+  dependencies:
+    is-glob: "npm:^4.0.3"
+  checksum: 10/c13ee97978bef4f55106b71e66428eb1512e71a7466ba49025fc2aec59a5bfb0954d5abd58fc5ee6c9b076eef4e1f6d3375c2e964b88466ca390da4419a786a8
+  languageName: node
+  linkType: hard
+
+"glob@npm:^10.2.2, glob@npm:^10.3.10, glob@npm:^10.4.1":
+  version: 10.4.5
+  resolution: "glob@npm:10.4.5"
+  dependencies:
+    foreground-child: "npm:^3.1.0"
+    jackspeak: "npm:^3.1.2"
+    minimatch: "npm:^9.0.4"
+    minipass: "npm:^7.1.2"
+    package-json-from-dist: "npm:^1.0.0"
+    path-scurry: "npm:^1.11.1"
+  bin:
+    glob: dist/esm/bin.mjs
+  checksum: 10/698dfe11828b7efd0514cd11e573eaed26b2dff611f0400907281ce3eab0c1e56143ef9b35adc7c77ecc71fba74717b510c7c223d34ca8a98ec81777b293d4ac
+  languageName: node
+  linkType: hard
+
+"glob@npm:^7.1.3, glob@npm:^7.1.4":
+  version: 7.2.3
+  resolution: "glob@npm:7.2.3"
+  dependencies:
+    fs.realpath: "npm:^1.0.0"
+    inflight: "npm:^1.0.4"
+    inherits: "npm:2"
+    minimatch: "npm:^3.1.1"
+    once: "npm:^1.3.0"
+    path-is-absolute: "npm:^1.0.0"
+  checksum: 10/59452a9202c81d4508a43b8af7082ca5c76452b9fcc4a9ab17655822e6ce9b21d4f8fbadabe4fe3faef448294cec249af305e2cd824b7e9aaf689240e5e96a7b
+  languageName: node
+  linkType: hard
+
+"global-dirs@npm:^3.0.0":
+  version: 3.0.1
+  resolution: "global-dirs@npm:3.0.1"
+  dependencies:
+    ini: "npm:2.0.0"
+  checksum: 10/70147b80261601fd40ac02a104581432325c1c47329706acd773f3a6ce99bb36d1d996038c85ccacd482ad22258ec233c586b6a91535b1a116b89663d49d6438
+  languageName: node
+  linkType: hard
+
+"globals@npm:^11.1.0":
+  version: 11.12.0
+  resolution: "globals@npm:11.12.0"
+  checksum: 10/9f054fa38ff8de8fa356502eb9d2dae0c928217b8b5c8de1f09f5c9b6c8a96d8b9bd3afc49acbcd384a98a81fea713c859e1b09e214c60509517bb8fc2bc13c2
+  languageName: node
+  linkType: hard
+
+"globals@npm:^13.19.0":
+  version: 13.24.0
+  resolution: "globals@npm:13.24.0"
+  dependencies:
+    type-fest: "npm:^0.20.2"
+  checksum: 10/62c5b1997d06674fc7191d3e01e324d3eda4d65ac9cc4e78329fa3b5c4fd42a0e1c8722822497a6964eee075255ce21ccf1eec2d83f92ef3f06653af4d0ee28e
+  languageName: node
+  linkType: hard
+
+"globby@npm:^11.1.0":
+  version: 11.1.0
+  resolution: "globby@npm:11.1.0"
+  dependencies:
+    array-union: "npm:^2.1.0"
+    dir-glob: "npm:^3.0.1"
+    fast-glob: "npm:^3.2.9"
+    ignore: "npm:^5.2.0"
+    merge2: "npm:^1.4.1"
+    slash: "npm:^3.0.0"
+  checksum: 10/288e95e310227bbe037076ea81b7c2598ccbc3122d87abc6dab39e1eec309aa14f0e366a98cdc45237ffcfcbad3db597778c0068217dcb1950fef6249104e1b1
+  languageName: node
+  linkType: hard
+
+"gopd@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "gopd@npm:1.0.1"
+  dependencies:
+    get-intrinsic: "npm:^1.1.3"
+  checksum: 10/5fbc7ad57b368ae4cd2f41214bd947b045c1a4be2f194a7be1778d71f8af9dbf4004221f3b6f23e30820eb0d052b4f819fe6ebe8221e2a3c6f0ee4ef173421ca
+  languageName: node
+  linkType: hard
+
+"graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9":
+  version: 4.2.11
+  resolution: "graceful-fs@npm:4.2.11"
+  checksum: 10/bf152d0ed1dc159239db1ba1f74fdbc40cb02f626770dcd5815c427ce0688c2635a06ed69af364396da4636d0408fcf7d4afdf7881724c3307e46aff30ca49e2
+  languageName: node
+  linkType: hard
+
+"graphemer@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "graphemer@npm:1.4.0"
+  checksum: 10/6dd60dba97007b21e3a829fab3f771803cc1292977fe610e240ea72afd67e5690ac9eeaafc4a99710e78962e5936ab5a460787c2a1180f1cb0ccfac37d29f897
+  languageName: node
+  linkType: hard
+
+"graphql@npm:^16.8.1":
+  version: 16.9.0
+  resolution: "graphql@npm:16.9.0"
+  checksum: 10/5833f82bb6c31bec120bbf9cd400eda873e1bb7ef5c17974fa262cd82dc68728fda5d4cb859dc8aaa4c4fe4f6fe1103a9c47efc01a12c02ae5cb581d8e4029e2
+  languageName: node
+  linkType: hard
+
+"harmony-reflect@npm:^1.4.6":
+  version: 1.6.2
+  resolution: "harmony-reflect@npm:1.6.2"
+  checksum: 10/69d30ebfb5dbd6ff0553725c7922404cf1dfe5390db1618298eed27fe6c9bd2f3f677727e9da969d21648f4a6a39041e2f46e99976be4385f9e34bac23058cd4
+  languageName: node
+  linkType: hard
+
+"has-bigints@npm:^1.0.1":
+  version: 1.0.2
+  resolution: "has-bigints@npm:1.0.2"
+  checksum: 10/4e0426c900af034d12db14abfece02ce7dbf53f2022d28af1a97913ff4c07adb8799476d57dc44fbca0e07d1dbda2a042c2928b1f33d3f09c15de0640a7fb81b
+  languageName: node
+  linkType: hard
+
+"has-flag@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "has-flag@npm:3.0.0"
+  checksum: 10/4a15638b454bf086c8148979aae044dd6e39d63904cd452d970374fa6a87623423da485dfb814e7be882e05c096a7ccf1ebd48e7e7501d0208d8384ff4dea73b
+  languageName: node
+  linkType: hard
+
+"has-flag@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "has-flag@npm:4.0.0"
+  checksum: 10/261a1357037ead75e338156b1f9452c016a37dcd3283a972a30d9e4a87441ba372c8b81f818cd0fbcd9c0354b4ae7e18b9e1afa1971164aef6d18c2b6095a8ad
+  languageName: node
+  linkType: hard
+
+"has-property-descriptors@npm:^1.0.0, has-property-descriptors@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "has-property-descriptors@npm:1.0.2"
+  dependencies:
+    es-define-property: "npm:^1.0.0"
+  checksum: 10/2d8c9ab8cebb572e3362f7d06139a4592105983d4317e68f7adba320fe6ddfc8874581e0971e899e633fd5f72e262830edce36d5a0bc863dad17ad20572484b2
+  languageName: node
+  linkType: hard
+
+"has-proto@npm:^1.0.1":
+  version: 1.0.3
+  resolution: "has-proto@npm:1.0.3"
+  checksum: 10/0b67c2c94e3bea37db3e412e3c41f79d59259875e636ba471e94c009cdfb1fa82bf045deeffafc7dbb9c148e36cae6b467055aaa5d9fad4316e11b41e3ba551a
+  languageName: node
+  linkType: hard
+
+"has-symbols@npm:^1.0.2, has-symbols@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "has-symbols@npm:1.0.3"
+  checksum: 10/464f97a8202a7690dadd026e6d73b1ceeddd60fe6acfd06151106f050303eaa75855aaa94969df8015c11ff7c505f196114d22f7386b4a471038da5874cf5e9b
+  languageName: node
+  linkType: hard
+
+"has-tostringtag@npm:^1.0.0, has-tostringtag@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "has-tostringtag@npm:1.0.2"
+  dependencies:
+    has-symbols: "npm:^1.0.3"
+  checksum: 10/c74c5f5ceee3c8a5b8bc37719840dc3749f5b0306d818974141dda2471a1a2ca6c8e46b9d6ac222c5345df7a901c9b6f350b1e6d62763fec877e26609a401bfe
+  languageName: node
+  linkType: hard
+
+"hasown@npm:^2.0.0, hasown@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "hasown@npm:2.0.2"
+  dependencies:
+    function-bind: "npm:^1.1.2"
+  checksum: 10/7898a9c1788b2862cf0f9c345a6bec77ba4a0c0983c7f19d610c382343d4f98fa260686b225dfb1f88393a66679d2ec58ee310c1d6868c081eda7918f32cc70a
+  languageName: node
+  linkType: hard
+
+"headers-polyfill@npm:^4.0.2":
+  version: 4.0.3
+  resolution: "headers-polyfill@npm:4.0.3"
+  checksum: 10/3a008aa2ef71591e2077706efb48db1b2729b90cf646cc217f9b69744e35cca4ba463f39debb6000904aa7de4fada2e5cc682463025d26bcc469c1d99fa5af27
+  languageName: node
+  linkType: hard
+
+"html-encoding-sniffer@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "html-encoding-sniffer@npm:3.0.0"
+  dependencies:
+    whatwg-encoding: "npm:^2.0.0"
+  checksum: 10/707a812ec2acaf8bb5614c8618dc81e2fb6b4399d03e95ff18b65679989a072f4e919b9bef472039301a1bbfba64063ba4c79ea6e851c653ac9db80dbefe8fe5
+  languageName: node
+  linkType: hard
+
+"html-escaper@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "html-escaper@npm:2.0.2"
+  checksum: 10/034d74029dcca544a34fb6135e98d427acd73019796ffc17383eaa3ec2fe1c0471dcbbc8f8ed39e46e86d43ccd753a160631615e4048285e313569609b66d5b7
+  languageName: node
+  linkType: hard
+
+"http-cache-semantics@npm:^4.1.1":
+  version: 4.1.1
+  resolution: "http-cache-semantics@npm:4.1.1"
+  checksum: 10/362d5ed66b12ceb9c0a328fb31200b590ab1b02f4a254a697dc796850cc4385603e75f53ec59f768b2dad3bfa1464bd229f7de278d2899a0e3beffc634b6683f
+  languageName: node
+  linkType: hard
+
+"http-proxy-agent@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "http-proxy-agent@npm:5.0.0"
+  dependencies:
+    "@tootallnate/once": "npm:2"
+    agent-base: "npm:6"
+    debug: "npm:4"
+  checksum: 10/5ee19423bc3e0fd5f23ce991b0755699ad2a46a440ce9cec99e8126bb98448ad3479d2c0ea54be5519db5b19a4ffaa69616bac01540db18506dd4dac3dc418f0
+  languageName: node
+  linkType: hard
+
+"http-proxy-agent@npm:^7.0.0":
+  version: 7.0.2
+  resolution: "http-proxy-agent@npm:7.0.2"
+  dependencies:
+    agent-base: "npm:^7.1.0"
+    debug: "npm:^4.3.4"
+  checksum: 10/d062acfa0cb82beeb558f1043c6ba770ea892b5fb7b28654dbc70ea2aeea55226dd34c02a294f6c1ca179a5aa483c4ea641846821b182edbd9cc5d89b54c6848
+  languageName: node
+  linkType: hard
+
+"http-signature@npm:~1.4.0":
+  version: 1.4.0
+  resolution: "http-signature@npm:1.4.0"
+  dependencies:
+    assert-plus: "npm:^1.0.0"
+    jsprim: "npm:^2.0.2"
+    sshpk: "npm:^1.18.0"
+  checksum: 10/f9f5eed4ac5db5e1ec6d00652680c7d8b76d553560017e34505c0c22c37abb2e6d22b9268ed4a8542aa9746852a2d64850531091e443393c9c8e0f4fd4174455
+  languageName: node
+  linkType: hard
+
+"https-proxy-agent@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "https-proxy-agent@npm:5.0.1"
+  dependencies:
+    agent-base: "npm:6"
+    debug: "npm:4"
+  checksum: 10/f0dce7bdcac5e8eaa0be3c7368bb8836ed010fb5b6349ffb412b172a203efe8f807d9a6681319105ea1b6901e1972c7b5ea899672a7b9aad58309f766dcbe0df
+  languageName: node
+  linkType: hard
+
+"https-proxy-agent@npm:^7.0.1":
+  version: 7.0.5
+  resolution: "https-proxy-agent@npm:7.0.5"
+  dependencies:
+    agent-base: "npm:^7.0.2"
+    debug: "npm:4"
+  checksum: 10/6679d46159ab3f9a5509ee80c3a3fc83fba3a920a5e18d32176c3327852c3c00ad640c0c4210a8fd70ea3c4a6d3a1b375bf01942516e7df80e2646bdc77658ab
+  languageName: node
+  linkType: hard
+
+"human-signals@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "human-signals@npm:1.1.1"
+  checksum: 10/6a58224dffcef5588910b1028bda8623c9a7053460a1fe3367e61921a6b5f6b93aba30f323868a958f968d7de3f5f78421f11d4d9f7e9563b1bd2b00ed9a4deb
+  languageName: node
+  linkType: hard
+
+"human-signals@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "human-signals@npm:2.1.0"
+  checksum: 10/df59be9e0af479036798a881d1f136c4a29e0b518d4abb863afbd11bf30efa3eeb1d0425fc65942dcc05ab3bf40205ea436b0ff389f2cd20b75b8643d539bf86
+  languageName: node
+  linkType: hard
+
+"iconv-lite@npm:0.6.3, iconv-lite@npm:^0.6.2":
+  version: 0.6.3
+  resolution: "iconv-lite@npm:0.6.3"
+  dependencies:
+    safer-buffer: "npm:>= 2.1.2 < 3.0.0"
+  checksum: 10/24e3292dd3dadaa81d065c6f8c41b274a47098150d444b96e5f53b4638a9a71482921ea6a91a1f59bb71d9796de25e04afd05919fa64c360347ba65d3766f10f
+  languageName: node
+  linkType: hard
+
+"identity-obj-proxy@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "identity-obj-proxy@npm:3.0.0"
+  dependencies:
+    harmony-reflect: "npm:^1.4.6"
+  checksum: 10/66fe4d2ffc67655174f6abe100ab3b36d2f5e4de5b28a7c3121e5f51bd4e7c8c1bee4f9a41ce0586ace57fb63bfedbfc39508b7cb43b9e3ed6dc42f762158b4e
+  languageName: node
+  linkType: hard
+
+"ieee754@npm:^1.1.13":
+  version: 1.2.1
+  resolution: "ieee754@npm:1.2.1"
+  checksum: 10/d9f2557a59036f16c282aaeb107832dc957a93d73397d89bbad4eb1130560560eb695060145e8e6b3b498b15ab95510226649a0b8f52ae06583575419fe10fc4
+  languageName: node
+  linkType: hard
+
+"ignore@npm:^5.2.0, ignore@npm:^5.2.4":
+  version: 5.3.2
+  resolution: "ignore@npm:5.3.2"
+  checksum: 10/cceb6a457000f8f6a50e1196429750d782afce5680dd878aa4221bd79972d68b3a55b4b1458fc682be978f4d3c6a249046aa0880637367216444ab7b014cfc98
+  languageName: node
+  linkType: hard
+
+"import-fresh@npm:^3.2.1":
+  version: 3.3.0
+  resolution: "import-fresh@npm:3.3.0"
+  dependencies:
+    parent-module: "npm:^1.0.0"
+    resolve-from: "npm:^4.0.0"
+  checksum: 10/2cacfad06e652b1edc50be650f7ec3be08c5e5a6f6d12d035c440a42a8cc028e60a5b99ca08a77ab4d6b1346da7d971915828f33cdab730d3d42f08242d09baa
+  languageName: node
+  linkType: hard
+
+"import-local@npm:^3.0.2":
+  version: 3.2.0
+  resolution: "import-local@npm:3.2.0"
+  dependencies:
+    pkg-dir: "npm:^4.2.0"
+    resolve-cwd: "npm:^3.0.0"
+  bin:
+    import-local-fixture: fixtures/cli.js
+  checksum: 10/0b0b0b412b2521739fbb85eeed834a3c34de9bc67e670b3d0b86248fc460d990a7b116ad056c084b87a693ef73d1f17268d6a5be626bb43c998a8b1c8a230004
+  languageName: node
+  linkType: hard
+
+"imurmurhash@npm:^0.1.4":
+  version: 0.1.4
+  resolution: "imurmurhash@npm:0.1.4"
+  checksum: 10/2d30b157a91fe1c1d7c6f653cbf263f039be6c5bfa959245a16d4ee191fc0f2af86c08545b6e6beeb041c56b574d2d5b9f95343d378ab49c0f37394d541e7fc8
+  languageName: node
+  linkType: hard
+
+"indent-string@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "indent-string@npm:4.0.0"
+  checksum: 10/cd3f5cbc9ca2d624c6a1f53f12e6b341659aba0e2d3254ae2b4464aaea8b4294cdb09616abbc59458f980531f2429784ed6a420d48d245bcad0811980c9efae9
+  languageName: node
+  linkType: hard
+
+"inflight@npm:^1.0.4":
+  version: 1.0.6
+  resolution: "inflight@npm:1.0.6"
+  dependencies:
+    once: "npm:^1.3.0"
+    wrappy: "npm:1"
+  checksum: 10/d2ebd65441a38c8336c223d1b80b921b9fa737e37ea466fd7e253cb000c64ae1f17fa59e68130ef5bda92cfd8d36b83d37dab0eb0a4558bcfec8e8cdfd2dcb67
+  languageName: node
+  linkType: hard
+
+"inherits@npm:2, inherits@npm:^2.0.3":
+  version: 2.0.4
+  resolution: "inherits@npm:2.0.4"
+  checksum: 10/cd45e923bee15186c07fa4c89db0aace24824c482fb887b528304694b2aa6ff8a898da8657046a5dcf3e46cd6db6c61629551f9215f208d7c3f157cf9b290521
+  languageName: node
+  linkType: hard
+
+"ini@npm:2.0.0":
+  version: 2.0.0
+  resolution: "ini@npm:2.0.0"
+  checksum: 10/04e24ba05c4f6947e15560824e153b4610bceea2f5a3ab68651d221a4aab3c77d4e3e90a917ebc8bf5ad71a30a8575de56c39d6b4c4b1375a28016b9f3625f9d
+  languageName: node
+  linkType: hard
+
+"internal-slot@npm:^1.0.4":
+  version: 1.0.7
+  resolution: "internal-slot@npm:1.0.7"
+  dependencies:
+    es-errors: "npm:^1.3.0"
+    hasown: "npm:^2.0.0"
+    side-channel: "npm:^1.0.4"
+  checksum: 10/3e66720508831153ecf37d13def9f6856f9f2960989ec8a0a0476c98f887fca9eff0163127466485cb825c900c2d6fc601aa9117b7783b90ffce23a71ea5d053
+  languageName: node
+  linkType: hard
+
+"ip-address@npm:^9.0.5":
+  version: 9.0.5
+  resolution: "ip-address@npm:9.0.5"
+  dependencies:
+    jsbn: "npm:1.1.0"
+    sprintf-js: "npm:^1.1.3"
+  checksum: 10/1ed81e06721af012306329b31f532b5e24e00cb537be18ddc905a84f19fe8f83a09a1699862bf3a1ec4b9dea93c55a3fa5faf8b5ea380431469df540f38b092c
+  languageName: node
+  linkType: hard
+
+"is-arguments@npm:^1.0.4, is-arguments@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "is-arguments@npm:1.1.1"
+  dependencies:
+    call-bind: "npm:^1.0.2"
+    has-tostringtag: "npm:^1.0.0"
+  checksum: 10/a170c7e26082e10de9be6e96d32ae3db4d5906194051b792e85fae3393b53cf2cb5b3557863e5c8ccbab55e2fd8f2f75aa643d437613f72052cf0356615c34be
+  languageName: node
+  linkType: hard
+
+"is-array-buffer@npm:^3.0.2, is-array-buffer@npm:^3.0.4":
+  version: 3.0.4
+  resolution: "is-array-buffer@npm:3.0.4"
+  dependencies:
+    call-bind: "npm:^1.0.2"
+    get-intrinsic: "npm:^1.2.1"
+  checksum: 10/34a26213d981d58b30724ef37a1e0682f4040d580fa9ff58fdfdd3cefcb2287921718c63971c1c404951e7b747c50fdc7caf6e867e951353fa71b369c04c969b
+  languageName: node
+  linkType: hard
+
+"is-arrayish@npm:^0.2.1":
+  version: 0.2.1
+  resolution: "is-arrayish@npm:0.2.1"
+  checksum: 10/73ced84fa35e59e2c57da2d01e12cd01479f381d7f122ce41dcbb713f09dbfc651315832cd2bf8accba7681a69e4d6f1e03941d94dd10040d415086360e7005e
+  languageName: node
+  linkType: hard
+
+"is-bigint@npm:^1.0.1":
+  version: 1.0.4
+  resolution: "is-bigint@npm:1.0.4"
+  dependencies:
+    has-bigints: "npm:^1.0.1"
+  checksum: 10/cc981cf0564c503aaccc1e5f39e994ae16ae2d1a8fcd14721f14ad431809071f39ec568cfceef901cff408045f1a6d6bac90d1b43eeb0b8e3bc34c8eb1bdb4c4
+  languageName: node
+  linkType: hard
+
+"is-boolean-object@npm:^1.1.0":
+  version: 1.1.2
+  resolution: "is-boolean-object@npm:1.1.2"
+  dependencies:
+    call-bind: "npm:^1.0.2"
+    has-tostringtag: "npm:^1.0.0"
+  checksum: 10/ba794223b56a49a9f185e945eeeb6b7833b8ea52a335cec087d08196cf27b538940001615d3bb976511287cefe94e5907d55f00bb49580533f9ca9b4515fcc2e
+  languageName: node
+  linkType: hard
+
+"is-callable@npm:^1.1.3":
+  version: 1.2.7
+  resolution: "is-callable@npm:1.2.7"
+  checksum: 10/48a9297fb92c99e9df48706241a189da362bff3003354aea4048bd5f7b2eb0d823cd16d0a383cece3d76166ba16d85d9659165ac6fcce1ac12e6c649d66dbdb9
+  languageName: node
+  linkType: hard
+
+"is-ci@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "is-ci@npm:3.0.1"
+  dependencies:
+    ci-info: "npm:^3.2.0"
+  bin:
+    is-ci: bin.js
+  checksum: 10/192c66dc7826d58f803ecae624860dccf1899fc1f3ac5505284c0a5cf5f889046ffeb958fa651e5725d5705c5bcb14f055b79150ea5fcad7456a9569de60260e
+  languageName: node
+  linkType: hard
+
+"is-core-module@npm:^2.13.0":
+  version: 2.15.1
+  resolution: "is-core-module@npm:2.15.1"
+  dependencies:
+    hasown: "npm:^2.0.2"
+  checksum: 10/77316d5891d5743854bcef2cd2f24c5458fb69fbc9705c12ca17d54a2017a67d0693bbf1ba8c77af376c0eef6bf6d1b27a4ab08e4db4e69914c3789bdf2ceec5
+  languageName: node
+  linkType: hard
+
+"is-date-object@npm:^1.0.5":
+  version: 1.0.5
+  resolution: "is-date-object@npm:1.0.5"
+  dependencies:
+    has-tostringtag: "npm:^1.0.0"
+  checksum: 10/cc80b3a4b42238fa0d358b9a6230dae40548b349e64a477cb7c5eff9b176ba194c11f8321daaf6dd157e44073e9b7fd01f87db1f14952a88d5657acdcd3a56e2
+  languageName: node
+  linkType: hard
+
+"is-docker@npm:^2.0.0, is-docker@npm:^2.1.1":
+  version: 2.2.1
+  resolution: "is-docker@npm:2.2.1"
+  bin:
+    is-docker: cli.js
+  checksum: 10/3fef7ddbf0be25958e8991ad941901bf5922ab2753c46980b60b05c1bf9c9c2402d35e6dc32e4380b980ef5e1970a5d9d5e5aa2e02d77727c3b6b5e918474c56
+  languageName: node
+  linkType: hard
+
+"is-extglob@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "is-extglob@npm:2.1.1"
+  checksum: 10/df033653d06d0eb567461e58a7a8c9f940bd8c22274b94bf7671ab36df5719791aae15eef6d83bbb5e23283967f2f984b8914559d4449efda578c775c4be6f85
+  languageName: node
+  linkType: hard
+
+"is-fullwidth-code-point@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "is-fullwidth-code-point@npm:3.0.0"
+  checksum: 10/44a30c29457c7fb8f00297bce733f0a64cd22eca270f83e58c105e0d015e45c019491a4ab2faef91ab51d4738c670daff901c799f6a700e27f7314029e99e348
+  languageName: node
+  linkType: hard
+
+"is-generator-fn@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "is-generator-fn@npm:2.1.0"
+  checksum: 10/a6ad5492cf9d1746f73b6744e0c43c0020510b59d56ddcb78a91cbc173f09b5e6beff53d75c9c5a29feb618bfef2bf458e025ecf3a57ad2268e2fb2569f56215
+  languageName: node
+  linkType: hard
+
+"is-generator-function@npm:^1.0.7":
+  version: 1.0.10
+  resolution: "is-generator-function@npm:1.0.10"
+  dependencies:
+    has-tostringtag: "npm:^1.0.0"
+  checksum: 10/499a3ce6361064c3bd27fbff5c8000212d48506ebe1977842bbd7b3e708832d0deb1f4cc69186ece3640770e8c4f1287b24d99588a0b8058b2dbdd344bc1f47f
+  languageName: node
+  linkType: hard
+
+"is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3":
+  version: 4.0.3
+  resolution: "is-glob@npm:4.0.3"
+  dependencies:
+    is-extglob: "npm:^2.1.1"
+  checksum: 10/3ed74f2b0cdf4f401f38edb0442ddfde3092d79d7d35c9919c86641efdbcbb32e45aa3c0f70ce5eecc946896cd5a0f26e4188b9f2b881876f7cb6c505b82da11
+  languageName: node
+  linkType: hard
+
+"is-installed-globally@npm:~0.4.0":
+  version: 0.4.0
+  resolution: "is-installed-globally@npm:0.4.0"
+  dependencies:
+    global-dirs: "npm:^3.0.0"
+    is-path-inside: "npm:^3.0.2"
+  checksum: 10/5294d21c82cb9beedd693ce1dfb12117c4db36d6e35edc9dc6bf06cb300d23c96520d1bfb063386b054268ae3d7255c3f09393b52218cc26ace99b217bf37c93
+  languageName: node
+  linkType: hard
+
+"is-lambda@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "is-lambda@npm:1.0.1"
+  checksum: 10/93a32f01940220532e5948538699ad610d5924ac86093fcee83022252b363eb0cc99ba53ab084a04e4fb62bf7b5731f55496257a4c38adf87af9c4d352c71c35
+  languageName: node
+  linkType: hard
+
+"is-map@npm:^2.0.2, is-map@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "is-map@npm:2.0.3"
+  checksum: 10/8de7b41715b08bcb0e5edb0fb9384b80d2d5bcd10e142188f33247d19ff078abaf8e9b6f858e2302d8d05376a26a55cd23a3c9f8ab93292b02fcd2cc9e4e92bb
+  languageName: node
+  linkType: hard
+
+"is-node-process@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "is-node-process@npm:1.2.0"
+  checksum: 10/930765cdc6d81ab8f1bbecbea4a8d35c7c6d88a3ff61f3630e0fc7f22d624d7661c1df05c58547d0eb6a639dfa9304682c8e342c4113a6ed51472b704cee2928
+  languageName: node
+  linkType: hard
+
+"is-number-object@npm:^1.0.4":
+  version: 1.0.7
+  resolution: "is-number-object@npm:1.0.7"
+  dependencies:
+    has-tostringtag: "npm:^1.0.0"
+  checksum: 10/8700dcf7f602e0a9625830541345b8615d04953655acbf5c6d379c58eb1af1465e71227e95d501343346e1d49b6f2d53cbc166b1fc686a7ec19151272df582f9
+  languageName: node
+  linkType: hard
+
+"is-number@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "is-number@npm:7.0.0"
+  checksum: 10/6a6c3383f68afa1e05b286af866017c78f1226d43ac8cb064e115ff9ed85eb33f5c4f7216c96a71e4dfea289ef52c5da3aef5bbfade8ffe47a0465d70c0c8e86
+  languageName: node
+  linkType: hard
+
+"is-path-inside@npm:^3.0.2, is-path-inside@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "is-path-inside@npm:3.0.3"
+  checksum: 10/abd50f06186a052b349c15e55b182326f1936c89a78bf6c8f2b707412517c097ce04bc49a0ca221787bc44e1049f51f09a2ffb63d22899051988d3a618ba13e9
+  languageName: node
+  linkType: hard
+
+"is-potential-custom-element-name@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "is-potential-custom-element-name@npm:1.0.1"
+  checksum: 10/ced7bbbb6433a5b684af581872afe0e1767e2d1146b2207ca0068a648fb5cab9d898495d1ac0583524faaf24ca98176a7d9876363097c2d14fee6dd324f3a1ab
+  languageName: node
+  linkType: hard
+
+"is-regex@npm:^1.1.4":
+  version: 1.1.4
+  resolution: "is-regex@npm:1.1.4"
+  dependencies:
+    call-bind: "npm:^1.0.2"
+    has-tostringtag: "npm:^1.0.0"
+  checksum: 10/36d9174d16d520b489a5e9001d7d8d8624103b387be300c50f860d9414556d0485d74a612fdafc6ebbd5c89213d947dcc6b6bff6b2312093f71ea03cbb19e564
+  languageName: node
+  linkType: hard
+
+"is-set@npm:^2.0.2, is-set@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "is-set@npm:2.0.3"
+  checksum: 10/5685df33f0a4a6098a98c72d94d67cad81b2bc72f1fb2091f3d9283c4a1c582123cd709145b02a9745f0ce6b41e3e43f1c944496d1d74d4ea43358be61308669
+  languageName: node
+  linkType: hard
+
+"is-shared-array-buffer@npm:^1.0.2":
+  version: 1.0.3
+  resolution: "is-shared-array-buffer@npm:1.0.3"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+  checksum: 10/bc5402900dc62b96ebb2548bf5b0a0bcfacc2db122236fe3ab3b3e3c884293a0d5eb777e73f059bcbf8dc8563bb65eae972fee0fb97e38a9ae27c8678f62bcfe
+  languageName: node
+  linkType: hard
+
+"is-stream@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "is-stream@npm:2.0.1"
+  checksum: 10/b8e05ccdf96ac330ea83c12450304d4a591f9958c11fd17bed240af8d5ffe08aedafa4c0f4cfccd4d28dc9d4d129daca1023633d5c11601a6cbc77521f6fae66
+  languageName: node
+  linkType: hard
+
+"is-string@npm:^1.0.5, is-string@npm:^1.0.7":
+  version: 1.0.7
+  resolution: "is-string@npm:1.0.7"
+  dependencies:
+    has-tostringtag: "npm:^1.0.0"
+  checksum: 10/2bc292fe927493fb6dfc3338c099c3efdc41f635727c6ebccf704aeb2a27bca7acb9ce6fd34d103db78692b10b22111a8891de26e12bfa1c5e11e263c99d1fef
+  languageName: node
+  linkType: hard
+
+"is-symbol@npm:^1.0.3":
+  version: 1.0.4
+  resolution: "is-symbol@npm:1.0.4"
+  dependencies:
+    has-symbols: "npm:^1.0.2"
+  checksum: 10/a47dd899a84322528b71318a89db25c7ecdec73197182dad291df15ffea501e17e3c92c8de0bfb50e63402747399981a687b31c519971b1fa1a27413612be929
+  languageName: node
+  linkType: hard
+
+"is-typed-array@npm:^1.1.3":
+  version: 1.1.13
+  resolution: "is-typed-array@npm:1.1.13"
+  dependencies:
+    which-typed-array: "npm:^1.1.14"
+  checksum: 10/f850ba08286358b9a11aee6d93d371a45e3c59b5953549ee1c1a9a55ba5c1dd1bd9952488ae194ad8f32a9cf5e79c8fa5f0cc4d78c00720aa0bbcf238b38062d
+  languageName: node
+  linkType: hard
+
+"is-typedarray@npm:~1.0.0":
+  version: 1.0.0
+  resolution: "is-typedarray@npm:1.0.0"
+  checksum: 10/4b433bfb0f9026f079f4eb3fbaa4ed2de17c9995c3a0b5c800bec40799b4b2a8b4e051b1ada77749deb9ded4ae52fe2096973f3a93ff83df1a5a7184a669478c
+  languageName: node
+  linkType: hard
+
+"is-unicode-supported@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "is-unicode-supported@npm:0.1.0"
+  checksum: 10/a2aab86ee7712f5c2f999180daaba5f361bdad1efadc9610ff5b8ab5495b86e4f627839d085c6530363c6d6d4ecbde340fb8e54bdb83da4ba8e0865ed5513c52
+  languageName: node
+  linkType: hard
+
+"is-weakmap@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "is-weakmap@npm:2.0.2"
+  checksum: 10/a7b7e23206c542dcf2fa0abc483142731788771527e90e7e24f658c0833a0d91948a4f7b30d78f7a65255a48512e41a0288b778ba7fc396137515c12e201fd11
+  languageName: node
+  linkType: hard
+
+"is-weakset@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "is-weakset@npm:2.0.3"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+    get-intrinsic: "npm:^1.2.4"
+  checksum: 10/40159582ff1b44fc40085f631baf19f56479b05af2faede65b4e6a0b6acab745c13fd070e35b475aafd8a1ee50879ba5a3f1265125b46bebdb446b6be1f62165
+  languageName: node
+  linkType: hard
+
+"is-wsl@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "is-wsl@npm:2.2.0"
+  dependencies:
+    is-docker: "npm:^2.0.0"
+  checksum: 10/20849846ae414997d290b75e16868e5261e86ff5047f104027026fd61d8b5a9b0b3ade16239f35e1a067b3c7cc02f70183cb661010ed16f4b6c7c93dad1b19d8
+  languageName: node
+  linkType: hard
+
+"isarray@npm:^2.0.5":
+  version: 2.0.5
+  resolution: "isarray@npm:2.0.5"
+  checksum: 10/1d8bc7911e13bb9f105b1b3e0b396c787a9e63046af0b8fe0ab1414488ab06b2b099b87a2d8a9e31d21c9a6fad773c7fc8b257c4880f2d957274479d28ca3414
+  languageName: node
+  linkType: hard
+
+"isexe@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "isexe@npm:2.0.0"
+  checksum: 10/7c9f715c03aff08f35e98b1fadae1b9267b38f0615d501824f9743f3aab99ef10e303ce7db3f186763a0b70a19de5791ebfc854ff884d5a8c4d92211f642ec92
+  languageName: node
+  linkType: hard
+
+"isexe@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "isexe@npm:3.1.1"
+  checksum: 10/7fe1931ee4e88eb5aa524cd3ceb8c882537bc3a81b02e438b240e47012eef49c86904d0f0e593ea7c3a9996d18d0f1f3be8d3eaa92333977b0c3a9d353d5563e
+  languageName: node
+  linkType: hard
+
+"isstream@npm:~0.1.2":
+  version: 0.1.2
+  resolution: "isstream@npm:0.1.2"
+  checksum: 10/22d9c181015226d4534a227539256897bbbcb7edd1066ca4fc4d3a06dbd976325dfdd16b3983c7d236a89f256805c1a685a772e0364e98873d3819b064ad35a1
+  languageName: node
+  linkType: hard
+
+"istanbul-lib-coverage@npm:^3.0.0, istanbul-lib-coverage@npm:^3.2.0, istanbul-lib-coverage@npm:^3.2.2":
+  version: 3.2.2
+  resolution: "istanbul-lib-coverage@npm:3.2.2"
+  checksum: 10/40bbdd1e937dfd8c830fa286d0f665e81b7a78bdabcd4565f6d5667c99828bda3db7fb7ac6b96a3e2e8a2461ddbc5452d9f8bc7d00cb00075fa6a3e99f5b6a81
+  languageName: node
+  linkType: hard
+
+"istanbul-lib-instrument@npm:^5.0.4":
+  version: 5.2.1
+  resolution: "istanbul-lib-instrument@npm:5.2.1"
+  dependencies:
+    "@babel/core": "npm:^7.12.3"
+    "@babel/parser": "npm:^7.14.7"
+    "@istanbuljs/schema": "npm:^0.1.2"
+    istanbul-lib-coverage: "npm:^3.2.0"
+    semver: "npm:^6.3.0"
+  checksum: 10/bbc4496c2f304d799f8ec22202ab38c010ac265c441947f075c0f7d46bd440b45c00e46017cf9053453d42182d768b1d6ed0e70a142c95ab00df9843aa5ab80e
+  languageName: node
+  linkType: hard
+
+"istanbul-lib-instrument@npm:^6.0.0":
+  version: 6.0.3
+  resolution: "istanbul-lib-instrument@npm:6.0.3"
+  dependencies:
+    "@babel/core": "npm:^7.23.9"
+    "@babel/parser": "npm:^7.23.9"
+    "@istanbuljs/schema": "npm:^0.1.3"
+    istanbul-lib-coverage: "npm:^3.2.0"
+    semver: "npm:^7.5.4"
+  checksum: 10/aa5271c0008dfa71b6ecc9ba1e801bf77b49dc05524e8c30d58aaf5b9505e0cd12f25f93165464d4266a518c5c75284ecb598fbd89fec081ae77d2c9d3327695
+  languageName: node
+  linkType: hard
+
+"istanbul-lib-report@npm:^3.0.0, istanbul-lib-report@npm:^3.0.1":
+  version: 3.0.1
+  resolution: "istanbul-lib-report@npm:3.0.1"
+  dependencies:
+    istanbul-lib-coverage: "npm:^3.0.0"
+    make-dir: "npm:^4.0.0"
+    supports-color: "npm:^7.1.0"
+  checksum: 10/86a83421ca1cf2109a9f6d193c06c31ef04a45e72a74579b11060b1e7bb9b6337a4e6f04abfb8857e2d569c271273c65e855ee429376a0d7c91ad91db42accd1
+  languageName: node
+  linkType: hard
+
+"istanbul-lib-source-maps@npm:^4.0.0":
+  version: 4.0.1
+  resolution: "istanbul-lib-source-maps@npm:4.0.1"
+  dependencies:
+    debug: "npm:^4.1.1"
+    istanbul-lib-coverage: "npm:^3.0.0"
+    source-map: "npm:^0.6.1"
+  checksum: 10/5526983462799aced011d776af166e350191b816821ea7bcf71cab3e5272657b062c47dc30697a22a43656e3ced78893a42de677f9ccf276a28c913190953b82
+  languageName: node
+  linkType: hard
+
+"istanbul-lib-source-maps@npm:^5.0.6":
+  version: 5.0.6
+  resolution: "istanbul-lib-source-maps@npm:5.0.6"
+  dependencies:
+    "@jridgewell/trace-mapping": "npm:^0.3.23"
+    debug: "npm:^4.1.1"
+    istanbul-lib-coverage: "npm:^3.0.0"
+  checksum: 10/569dd0a392ee3464b1fe1accbaef5cc26de3479eacb5b91d8c67ebb7b425d39fd02247d85649c3a0e9c29b600809fa60b5af5a281a75a89c01f385b1e24823a2
+  languageName: node
+  linkType: hard
+
+"istanbul-reports@npm:^3.1.3, istanbul-reports@npm:^3.1.7":
+  version: 3.1.7
+  resolution: "istanbul-reports@npm:3.1.7"
+  dependencies:
+    html-escaper: "npm:^2.0.0"
+    istanbul-lib-report: "npm:^3.0.0"
+  checksum: 10/f1faaa4684efaf57d64087776018d7426312a59aa6eeb4e0e3a777347d23cd286ad18f427e98f0e3dee666103d7404c9d7abc5f240406a912fa16bd6695437fa
+  languageName: node
+  linkType: hard
+
+"jackspeak@npm:^3.1.2":
+  version: 3.4.3
+  resolution: "jackspeak@npm:3.4.3"
+  dependencies:
+    "@isaacs/cliui": "npm:^8.0.2"
+    "@pkgjs/parseargs": "npm:^0.11.0"
+  dependenciesMeta:
+    "@pkgjs/parseargs":
+      optional: true
+  checksum: 10/96f8786eaab98e4bf5b2a5d6d9588ea46c4d06bbc4f2eb861fdd7b6b182b16f71d8a70e79820f335d52653b16d4843b29dd9cdcf38ae80406756db9199497cf3
+  languageName: node
+  linkType: hard
+
+"jest-changed-files@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "jest-changed-files@npm:29.7.0"
+  dependencies:
+    execa: "npm:^5.0.0"
+    jest-util: "npm:^29.7.0"
+    p-limit: "npm:^3.1.0"
+  checksum: 10/3d93742e56b1a73a145d55b66e96711fbf87ef89b96c2fab7cfdfba8ec06612591a982111ca2b712bb853dbc16831ec8b43585a2a96b83862d6767de59cbf83d
+  languageName: node
+  linkType: hard
+
+"jest-circus@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "jest-circus@npm:29.7.0"
+  dependencies:
+    "@jest/environment": "npm:^29.7.0"
+    "@jest/expect": "npm:^29.7.0"
+    "@jest/test-result": "npm:^29.7.0"
+    "@jest/types": "npm:^29.6.3"
+    "@types/node": "npm:*"
+    chalk: "npm:^4.0.0"
+    co: "npm:^4.6.0"
+    dedent: "npm:^1.0.0"
+    is-generator-fn: "npm:^2.0.0"
+    jest-each: "npm:^29.7.0"
+    jest-matcher-utils: "npm:^29.7.0"
+    jest-message-util: "npm:^29.7.0"
+    jest-runtime: "npm:^29.7.0"
+    jest-snapshot: "npm:^29.7.0"
+    jest-util: "npm:^29.7.0"
+    p-limit: "npm:^3.1.0"
+    pretty-format: "npm:^29.7.0"
+    pure-rand: "npm:^6.0.0"
+    slash: "npm:^3.0.0"
+    stack-utils: "npm:^2.0.3"
+  checksum: 10/716a8e3f40572fd0213bcfc1da90274bf30d856e5133af58089a6ce45089b63f4d679bd44e6be9d320e8390483ebc3ae9921981993986d21639d9019b523123d
+  languageName: node
+  linkType: hard
+
+"jest-cli@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "jest-cli@npm:29.7.0"
+  dependencies:
+    "@jest/core": "npm:^29.7.0"
+    "@jest/test-result": "npm:^29.7.0"
+    "@jest/types": "npm:^29.6.3"
+    chalk: "npm:^4.0.0"
+    create-jest: "npm:^29.7.0"
+    exit: "npm:^0.1.2"
+    import-local: "npm:^3.0.2"
+    jest-config: "npm:^29.7.0"
+    jest-util: "npm:^29.7.0"
+    jest-validate: "npm:^29.7.0"
+    yargs: "npm:^17.3.1"
+  peerDependencies:
+    node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+  peerDependenciesMeta:
+    node-notifier:
+      optional: true
+  bin:
+    jest: bin/jest.js
+  checksum: 10/6cc62b34d002c034203065a31e5e9a19e7c76d9e8ef447a6f70f759c0714cb212c6245f75e270ba458620f9c7b26063cd8cf6cd1f7e3afd659a7cc08add17307
+  languageName: node
+  linkType: hard
+
+"jest-config@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "jest-config@npm:29.7.0"
+  dependencies:
+    "@babel/core": "npm:^7.11.6"
+    "@jest/test-sequencer": "npm:^29.7.0"
+    "@jest/types": "npm:^29.6.3"
+    babel-jest: "npm:^29.7.0"
+    chalk: "npm:^4.0.0"
+    ci-info: "npm:^3.2.0"
+    deepmerge: "npm:^4.2.2"
+    glob: "npm:^7.1.3"
+    graceful-fs: "npm:^4.2.9"
+    jest-circus: "npm:^29.7.0"
+    jest-environment-node: "npm:^29.7.0"
+    jest-get-type: "npm:^29.6.3"
+    jest-regex-util: "npm:^29.6.3"
+    jest-resolve: "npm:^29.7.0"
+    jest-runner: "npm:^29.7.0"
+    jest-util: "npm:^29.7.0"
+    jest-validate: "npm:^29.7.0"
+    micromatch: "npm:^4.0.4"
+    parse-json: "npm:^5.2.0"
+    pretty-format: "npm:^29.7.0"
+    slash: "npm:^3.0.0"
+    strip-json-comments: "npm:^3.1.1"
+  peerDependencies:
+    "@types/node": "*"
+    ts-node: ">=9.0.0"
+  peerDependenciesMeta:
+    "@types/node":
+      optional: true
+    ts-node:
+      optional: true
+  checksum: 10/6bdf570e9592e7d7dd5124fc0e21f5fe92bd15033513632431b211797e3ab57eaa312f83cc6481b3094b72324e369e876f163579d60016677c117ec4853cf02b
+  languageName: node
+  linkType: hard
+
+"jest-diff@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "jest-diff@npm:29.7.0"
+  dependencies:
+    chalk: "npm:^4.0.0"
+    diff-sequences: "npm:^29.6.3"
+    jest-get-type: "npm:^29.6.3"
+    pretty-format: "npm:^29.7.0"
+  checksum: 10/6f3a7eb9cd9de5ea9e5aa94aed535631fa6f80221832952839b3cb59dd419b91c20b73887deb0b62230d06d02d6b6cf34ebb810b88d904bb4fe1e2e4f0905c98
+  languageName: node
+  linkType: hard
+
+"jest-docblock@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "jest-docblock@npm:29.7.0"
+  dependencies:
+    detect-newline: "npm:^3.0.0"
+  checksum: 10/8d48818055bc96c9e4ec2e217a5a375623c0d0bfae8d22c26e011074940c202aa2534a3362294c81d981046885c05d304376afba9f2874143025981148f3e96d
+  languageName: node
+  linkType: hard
+
+"jest-each@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "jest-each@npm:29.7.0"
+  dependencies:
+    "@jest/types": "npm:^29.6.3"
+    chalk: "npm:^4.0.0"
+    jest-get-type: "npm:^29.6.3"
+    jest-util: "npm:^29.7.0"
+    pretty-format: "npm:^29.7.0"
+  checksum: 10/bd1a077654bdaa013b590deb5f7e7ade68f2e3289180a8c8f53bc8a49f3b40740c0ec2d3a3c1aee906f682775be2bebbac37491d80b634d15276b0aa0f2e3fda
+  languageName: node
+  linkType: hard
+
+"jest-environment-jsdom@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "jest-environment-jsdom@npm:29.7.0"
+  dependencies:
+    "@jest/environment": "npm:^29.7.0"
+    "@jest/fake-timers": "npm:^29.7.0"
+    "@jest/types": "npm:^29.6.3"
+    "@types/jsdom": "npm:^20.0.0"
+    "@types/node": "npm:*"
+    jest-mock: "npm:^29.7.0"
+    jest-util: "npm:^29.7.0"
+    jsdom: "npm:^20.0.0"
+  peerDependencies:
+    canvas: ^2.5.0
+  peerDependenciesMeta:
+    canvas:
+      optional: true
+  checksum: 10/23bbfc9bca914baef4b654f7983175a4d49b0f515a5094ebcb8f819f28ec186f53c0ba06af1855eac04bab1457f4ea79dae05f70052cf899863e8096daa6e0f5
+  languageName: node
+  linkType: hard
+
+"jest-environment-node@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "jest-environment-node@npm:29.7.0"
+  dependencies:
+    "@jest/environment": "npm:^29.7.0"
+    "@jest/fake-timers": "npm:^29.7.0"
+    "@jest/types": "npm:^29.6.3"
+    "@types/node": "npm:*"
+    jest-mock: "npm:^29.7.0"
+    jest-util: "npm:^29.7.0"
+  checksum: 10/9cf7045adf2307cc93aed2f8488942e39388bff47ec1df149a997c6f714bfc66b2056768973770d3f8b1bf47396c19aa564877eb10ec978b952c6018ed1bd637
+  languageName: node
+  linkType: hard
+
+"jest-get-type@npm:^29.6.3":
+  version: 29.6.3
+  resolution: "jest-get-type@npm:29.6.3"
+  checksum: 10/88ac9102d4679d768accae29f1e75f592b760b44277df288ad76ce5bf038c3f5ce3719dea8aa0f035dac30e9eb034b848ce716b9183ad7cc222d029f03e92205
+  languageName: node
+  linkType: hard
+
+"jest-haste-map@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "jest-haste-map@npm:29.7.0"
+  dependencies:
+    "@jest/types": "npm:^29.6.3"
+    "@types/graceful-fs": "npm:^4.1.3"
+    "@types/node": "npm:*"
+    anymatch: "npm:^3.0.3"
+    fb-watchman: "npm:^2.0.0"
+    fsevents: "npm:^2.3.2"
+    graceful-fs: "npm:^4.2.9"
+    jest-regex-util: "npm:^29.6.3"
+    jest-util: "npm:^29.7.0"
+    jest-worker: "npm:^29.7.0"
+    micromatch: "npm:^4.0.4"
+    walker: "npm:^1.0.8"
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  checksum: 10/8531b42003581cb18a69a2774e68c456fb5a5c3280b1b9b77475af9e346b6a457250f9d756bfeeae2fe6cbc9ef28434c205edab9390ee970a919baddfa08bb85
+  languageName: node
+  linkType: hard
+
+"jest-leak-detector@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "jest-leak-detector@npm:29.7.0"
+  dependencies:
+    jest-get-type: "npm:^29.6.3"
+    pretty-format: "npm:^29.7.0"
+  checksum: 10/e3950e3ddd71e1d0c22924c51a300a1c2db6cf69ec1e51f95ccf424bcc070f78664813bef7aed4b16b96dfbdeea53fe358f8aeaaea84346ae15c3735758f1605
+  languageName: node
+  linkType: hard
+
+"jest-matcher-utils@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "jest-matcher-utils@npm:29.7.0"
+  dependencies:
+    chalk: "npm:^4.0.0"
+    jest-diff: "npm:^29.7.0"
+    jest-get-type: "npm:^29.6.3"
+    pretty-format: "npm:^29.7.0"
+  checksum: 10/981904a494299cf1e3baed352f8a3bd8b50a8c13a662c509b6a53c31461f94ea3bfeffa9d5efcfeb248e384e318c87de7e3baa6af0f79674e987482aa189af40
+  languageName: node
+  linkType: hard
+
+"jest-message-util@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "jest-message-util@npm:29.7.0"
+  dependencies:
+    "@babel/code-frame": "npm:^7.12.13"
+    "@jest/types": "npm:^29.6.3"
+    "@types/stack-utils": "npm:^2.0.0"
+    chalk: "npm:^4.0.0"
+    graceful-fs: "npm:^4.2.9"
+    micromatch: "npm:^4.0.4"
+    pretty-format: "npm:^29.7.0"
+    slash: "npm:^3.0.0"
+    stack-utils: "npm:^2.0.3"
+  checksum: 10/31d53c6ed22095d86bab9d14c0fa70c4a92c749ea6ceece82cf30c22c9c0e26407acdfbdb0231435dc85a98d6d65ca0d9cbcd25cd1abb377fe945e843fb770b9
+  languageName: node
+  linkType: hard
+
+"jest-mock@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "jest-mock@npm:29.7.0"
+  dependencies:
+    "@jest/types": "npm:^29.6.3"
+    "@types/node": "npm:*"
+    jest-util: "npm:^29.7.0"
+  checksum: 10/ae51d1b4f898724be5e0e52b2268a68fcd876d9b20633c864a6dd6b1994cbc48d62402b0f40f3a1b669b30ebd648821f086c26c08ffde192ced951ff4670d51c
+  languageName: node
+  linkType: hard
+
+"jest-pnp-resolver@npm:^1.2.2":
+  version: 1.2.3
+  resolution: "jest-pnp-resolver@npm:1.2.3"
+  peerDependencies:
+    jest-resolve: "*"
+  peerDependenciesMeta:
+    jest-resolve:
+      optional: true
+  checksum: 10/db1a8ab2cb97ca19c01b1cfa9a9c8c69a143fde833c14df1fab0766f411b1148ff0df878adea09007ac6a2085ec116ba9a996a6ad104b1e58c20adbf88eed9b2
+  languageName: node
+  linkType: hard
+
+"jest-regex-util@npm:^29.6.3":
+  version: 29.6.3
+  resolution: "jest-regex-util@npm:29.6.3"
+  checksum: 10/0518beeb9bf1228261695e54f0feaad3606df26a19764bc19541e0fc6e2a3737191904607fb72f3f2ce85d9c16b28df79b7b1ec9443aa08c3ef0e9efda6f8f2a
+  languageName: node
+  linkType: hard
+
+"jest-resolve-dependencies@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "jest-resolve-dependencies@npm:29.7.0"
+  dependencies:
+    jest-regex-util: "npm:^29.6.3"
+    jest-snapshot: "npm:^29.7.0"
+  checksum: 10/1e206f94a660d81e977bcfb1baae6450cb4a81c92e06fad376cc5ea16b8e8c6ea78c383f39e95591a9eb7f925b6a1021086c38941aa7c1b8a6a813c2f6e93675
+  languageName: node
+  linkType: hard
+
+"jest-resolve@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "jest-resolve@npm:29.7.0"
+  dependencies:
+    chalk: "npm:^4.0.0"
+    graceful-fs: "npm:^4.2.9"
+    jest-haste-map: "npm:^29.7.0"
+    jest-pnp-resolver: "npm:^1.2.2"
+    jest-util: "npm:^29.7.0"
+    jest-validate: "npm:^29.7.0"
+    resolve: "npm:^1.20.0"
+    resolve.exports: "npm:^2.0.0"
+    slash: "npm:^3.0.0"
+  checksum: 10/faa466fd9bc69ea6c37a545a7c6e808e073c66f46ab7d3d8a6ef084f8708f201b85d5fe1799789578b8b47fa1de47b9ee47b414d1863bc117a49e032ba77b7c7
+  languageName: node
+  linkType: hard
+
+"jest-runner@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "jest-runner@npm:29.7.0"
+  dependencies:
+    "@jest/console": "npm:^29.7.0"
+    "@jest/environment": "npm:^29.7.0"
+    "@jest/test-result": "npm:^29.7.0"
+    "@jest/transform": "npm:^29.7.0"
+    "@jest/types": "npm:^29.6.3"
+    "@types/node": "npm:*"
+    chalk: "npm:^4.0.0"
+    emittery: "npm:^0.13.1"
+    graceful-fs: "npm:^4.2.9"
+    jest-docblock: "npm:^29.7.0"
+    jest-environment-node: "npm:^29.7.0"
+    jest-haste-map: "npm:^29.7.0"
+    jest-leak-detector: "npm:^29.7.0"
+    jest-message-util: "npm:^29.7.0"
+    jest-resolve: "npm:^29.7.0"
+    jest-runtime: "npm:^29.7.0"
+    jest-util: "npm:^29.7.0"
+    jest-watcher: "npm:^29.7.0"
+    jest-worker: "npm:^29.7.0"
+    p-limit: "npm:^3.1.0"
+    source-map-support: "npm:0.5.13"
+  checksum: 10/9d8748a494bd90f5c82acea99be9e99f21358263ce6feae44d3f1b0cd90991b5df5d18d607e73c07be95861ee86d1cbab2a3fc6ca4b21805f07ac29d47c1da1e
+  languageName: node
+  linkType: hard
+
+"jest-runtime@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "jest-runtime@npm:29.7.0"
+  dependencies:
+    "@jest/environment": "npm:^29.7.0"
+    "@jest/fake-timers": "npm:^29.7.0"
+    "@jest/globals": "npm:^29.7.0"
+    "@jest/source-map": "npm:^29.6.3"
+    "@jest/test-result": "npm:^29.7.0"
+    "@jest/transform": "npm:^29.7.0"
+    "@jest/types": "npm:^29.6.3"
+    "@types/node": "npm:*"
+    chalk: "npm:^4.0.0"
+    cjs-module-lexer: "npm:^1.0.0"
+    collect-v8-coverage: "npm:^1.0.0"
+    glob: "npm:^7.1.3"
+    graceful-fs: "npm:^4.2.9"
+    jest-haste-map: "npm:^29.7.0"
+    jest-message-util: "npm:^29.7.0"
+    jest-mock: "npm:^29.7.0"
+    jest-regex-util: "npm:^29.6.3"
+    jest-resolve: "npm:^29.7.0"
+    jest-snapshot: "npm:^29.7.0"
+    jest-util: "npm:^29.7.0"
+    slash: "npm:^3.0.0"
+    strip-bom: "npm:^4.0.0"
+  checksum: 10/59eb58eb7e150e0834a2d0c0d94f2a0b963ae7182cfa6c63f2b49b9c6ef794e5193ef1634e01db41420c36a94cefc512cdd67a055cd3e6fa2f41eaf0f82f5a20
+  languageName: node
+  linkType: hard
+
+"jest-snapshot@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "jest-snapshot@npm:29.7.0"
+  dependencies:
+    "@babel/core": "npm:^7.11.6"
+    "@babel/generator": "npm:^7.7.2"
+    "@babel/plugin-syntax-jsx": "npm:^7.7.2"
+    "@babel/plugin-syntax-typescript": "npm:^7.7.2"
+    "@babel/types": "npm:^7.3.3"
+    "@jest/expect-utils": "npm:^29.7.0"
+    "@jest/transform": "npm:^29.7.0"
+    "@jest/types": "npm:^29.6.3"
+    babel-preset-current-node-syntax: "npm:^1.0.0"
+    chalk: "npm:^4.0.0"
+    expect: "npm:^29.7.0"
+    graceful-fs: "npm:^4.2.9"
+    jest-diff: "npm:^29.7.0"
+    jest-get-type: "npm:^29.6.3"
+    jest-matcher-utils: "npm:^29.7.0"
+    jest-message-util: "npm:^29.7.0"
+    jest-util: "npm:^29.7.0"
+    natural-compare: "npm:^1.4.0"
+    pretty-format: "npm:^29.7.0"
+    semver: "npm:^7.5.3"
+  checksum: 10/cb19a3948256de5f922d52f251821f99657339969bf86843bd26cf3332eae94883e8260e3d2fba46129a27c3971c1aa522490e460e16c7fad516e82d10bbf9f8
+  languageName: node
+  linkType: hard
+
+"jest-util@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "jest-util@npm:29.7.0"
+  dependencies:
+    "@jest/types": "npm:^29.6.3"
+    "@types/node": "npm:*"
+    chalk: "npm:^4.0.0"
+    ci-info: "npm:^3.2.0"
+    graceful-fs: "npm:^4.2.9"
+    picomatch: "npm:^2.2.3"
+  checksum: 10/30d58af6967e7d42bd903ccc098f3b4d3859ed46238fbc88d4add6a3f10bea00c226b93660285f058bc7a65f6f9529cf4eb80f8d4707f79f9e3a23686b4ab8f3
+  languageName: node
+  linkType: hard
+
+"jest-validate@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "jest-validate@npm:29.7.0"
+  dependencies:
+    "@jest/types": "npm:^29.6.3"
+    camelcase: "npm:^6.2.0"
+    chalk: "npm:^4.0.0"
+    jest-get-type: "npm:^29.6.3"
+    leven: "npm:^3.1.0"
+    pretty-format: "npm:^29.7.0"
+  checksum: 10/8ee1163666d8eaa16d90a989edba2b4a3c8ab0ffaa95ad91b08ca42b015bfb70e164b247a5b17f9de32d096987cada63ed8491ab82761bfb9a28bc34b27ae161
+  languageName: node
+  linkType: hard
+
+"jest-watcher@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "jest-watcher@npm:29.7.0"
+  dependencies:
+    "@jest/test-result": "npm:^29.7.0"
+    "@jest/types": "npm:^29.6.3"
+    "@types/node": "npm:*"
+    ansi-escapes: "npm:^4.2.1"
+    chalk: "npm:^4.0.0"
+    emittery: "npm:^0.13.1"
+    jest-util: "npm:^29.7.0"
+    string-length: "npm:^4.0.1"
+  checksum: 10/4f616e0345676631a7034b1d94971aaa719f0cd4a6041be2aa299be437ea047afd4fe05c48873b7963f5687a2f6c7cbf51244be8b14e313b97bfe32b1e127e55
+  languageName: node
+  linkType: hard
+
+"jest-worker@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "jest-worker@npm:29.7.0"
+  dependencies:
+    "@types/node": "npm:*"
+    jest-util: "npm:^29.7.0"
+    merge-stream: "npm:^2.0.0"
+    supports-color: "npm:^8.0.0"
+  checksum: 10/364cbaef00d8a2729fc760227ad34b5e60829e0869bd84976bdfbd8c0d0f9c2f22677b3e6dd8afa76ed174765351cd12bae3d4530c62eefb3791055127ca9745
+  languageName: node
+  linkType: hard
+
+"jest@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "jest@npm:29.7.0"
+  dependencies:
+    "@jest/core": "npm:^29.7.0"
+    "@jest/types": "npm:^29.6.3"
+    import-local: "npm:^3.0.2"
+    jest-cli: "npm:^29.7.0"
+  peerDependencies:
+    node-notifier: ^8.0.1 || ^9.0.0 || ^10.0.0
+  peerDependenciesMeta:
+    node-notifier:
+      optional: true
+  bin:
+    jest: bin/jest.js
+  checksum: 10/97023d78446098c586faaa467fbf2c6b07ff06e2c85a19e3926adb5b0effe9ac60c4913ae03e2719f9c01ae8ffd8d92f6b262cedb9555ceeb5d19263d8c6362a
+  languageName: node
+  linkType: hard
+
+"js-tokens@npm:^3.0.0 || ^4.0.0, js-tokens@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "js-tokens@npm:4.0.0"
+  checksum: 10/af37d0d913fb56aec6dc0074c163cc71cd23c0b8aad5c2350747b6721d37ba118af35abdd8b33c47ec2800de07dedb16a527ca9c530ee004093e04958bd0cbf2
+  languageName: node
+  linkType: hard
+
+"js-yaml@npm:^3.13.1":
+  version: 3.14.1
+  resolution: "js-yaml@npm:3.14.1"
+  dependencies:
+    argparse: "npm:^1.0.7"
+    esprima: "npm:^4.0.0"
+  bin:
+    js-yaml: bin/js-yaml.js
+  checksum: 10/9e22d80b4d0105b9899135365f746d47466ed53ef4223c529b3c0f7a39907743fdbd3c4379f94f1106f02755b5e90b2faaf84801a891135544e1ea475d1a1379
+  languageName: node
+  linkType: hard
+
+"js-yaml@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "js-yaml@npm:4.1.0"
+  dependencies:
+    argparse: "npm:^2.0.1"
+  bin:
+    js-yaml: bin/js-yaml.js
+  checksum: 10/c138a34a3fd0d08ebaf71273ad4465569a483b8a639e0b118ff65698d257c2791d3199e3f303631f2cb98213fa7b5f5d6a4621fd0fff819421b990d30d967140
+  languageName: node
+  linkType: hard
+
+"jsbn@npm:1.1.0":
+  version: 1.1.0
+  resolution: "jsbn@npm:1.1.0"
+  checksum: 10/bebe7ae829bbd586ce8cbe83501dd8cb8c282c8902a8aeeed0a073a89dc37e8103b1244f3c6acd60278bcbfe12d93a3f83c9ac396868a3b3bbc3c5e5e3b648ef
+  languageName: node
+  linkType: hard
+
+"jsbn@npm:~0.1.0":
+  version: 0.1.1
+  resolution: "jsbn@npm:0.1.1"
+  checksum: 10/5450133242845100e694f0ef9175f44c012691a9b770b2571e677314e6f70600abb10777cdfc9a0c6a9f2ac6d134577403633de73e2fcd0f97875a67744e2d14
+  languageName: node
+  linkType: hard
+
+"jsdoc-type-pratt-parser@npm:^4.0.0":
+  version: 4.1.0
+  resolution: "jsdoc-type-pratt-parser@npm:4.1.0"
+  checksum: 10/30d88f95f6cbb4a1aa6d4b0d0ae46eb1096e606235ecaf9bab7a3ed5da860516b5d1cd967182765002f292c627526db918f3e56d34637bcf810e6ef84d403f3f
+  languageName: node
+  linkType: hard
+
+"jsdom@npm:^20.0.0":
+  version: 20.0.3
+  resolution: "jsdom@npm:20.0.3"
+  dependencies:
+    abab: "npm:^2.0.6"
+    acorn: "npm:^8.8.1"
+    acorn-globals: "npm:^7.0.0"
+    cssom: "npm:^0.5.0"
+    cssstyle: "npm:^2.3.0"
+    data-urls: "npm:^3.0.2"
+    decimal.js: "npm:^10.4.2"
+    domexception: "npm:^4.0.0"
+    escodegen: "npm:^2.0.0"
+    form-data: "npm:^4.0.0"
+    html-encoding-sniffer: "npm:^3.0.0"
+    http-proxy-agent: "npm:^5.0.0"
+    https-proxy-agent: "npm:^5.0.1"
+    is-potential-custom-element-name: "npm:^1.0.1"
+    nwsapi: "npm:^2.2.2"
+    parse5: "npm:^7.1.1"
+    saxes: "npm:^6.0.0"
+    symbol-tree: "npm:^3.2.4"
+    tough-cookie: "npm:^4.1.2"
+    w3c-xmlserializer: "npm:^4.0.0"
+    webidl-conversions: "npm:^7.0.0"
+    whatwg-encoding: "npm:^2.0.0"
+    whatwg-mimetype: "npm:^3.0.0"
+    whatwg-url: "npm:^11.0.0"
+    ws: "npm:^8.11.0"
+    xml-name-validator: "npm:^4.0.0"
+  peerDependencies:
+    canvas: ^2.5.0
+  peerDependenciesMeta:
+    canvas:
+      optional: true
+  checksum: 10/a4cdcff5b07eed87da90b146b82936321533b5efe8124492acf7160ebd5b9cf2b3c2435683592bf1cffb479615245756efb6c173effc1906f845a86ed22af985
+  languageName: node
+  linkType: hard
+
+"jsesc@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "jsesc@npm:3.0.2"
+  bin:
+    jsesc: bin/jsesc
+  checksum: 10/8e5a7de6b70a8bd71f9cb0b5a7ade6a73ae6ab55e697c74cc997cede97417a3a65ed86c36f7dd6125fe49766e8386c845023d9e213916ca92c9dfdd56e2babf3
+  languageName: node
+  linkType: hard
+
+"json-buffer@npm:3.0.1":
+  version: 3.0.1
+  resolution: "json-buffer@npm:3.0.1"
+  checksum: 10/82876154521b7b68ba71c4f969b91572d1beabadd87bd3a6b236f85fbc7dc4695089191ed60bb59f9340993c51b33d479f45b6ba9f3548beb519705281c32c3c
+  languageName: node
+  linkType: hard
+
+"json-parse-even-better-errors@npm:^2.3.0":
+  version: 2.3.1
+  resolution: "json-parse-even-better-errors@npm:2.3.1"
+  checksum: 10/5f3a99009ed5f2a5a67d06e2f298cc97bc86d462034173308156f15b43a6e850be8511dc204b9b94566305da2947f7d90289657237d210351a39059ff9d666cf
+  languageName: node
+  linkType: hard
+
+"json-schema-traverse@npm:^0.4.1":
+  version: 0.4.1
+  resolution: "json-schema-traverse@npm:0.4.1"
+  checksum: 10/7486074d3ba247769fda17d5181b345c9fb7d12e0da98b22d1d71a5db9698d8b4bd900a3ec1a4ffdd60846fc2556274a5c894d0c48795f14cb03aeae7b55260b
+  languageName: node
+  linkType: hard
+
+"json-schema@npm:0.4.0":
+  version: 0.4.0
+  resolution: "json-schema@npm:0.4.0"
+  checksum: 10/8b3b64eff4a807dc2a3045b104ed1b9335cd8d57aa74c58718f07f0f48b8baa3293b00af4dcfbdc9144c3aafea1e97982cc27cc8e150fc5d93c540649507a458
+  languageName: node
+  linkType: hard
+
+"json-stable-stringify-without-jsonify@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "json-stable-stringify-without-jsonify@npm:1.0.1"
+  checksum: 10/12786c2e2f22c27439e6db0532ba321f1d0617c27ad8cb1c352a0e9249a50182fd1ba8b52a18899291604b0c32eafa8afd09e51203f19109a0537f68db2b652d
+  languageName: node
+  linkType: hard
+
+"json-stringify-safe@npm:~5.0.1":
+  version: 5.0.1
+  resolution: "json-stringify-safe@npm:5.0.1"
+  checksum: 10/59169a081e4eeb6f9559ae1f938f656191c000e0512aa6df9f3c8b2437a4ab1823819c6b9fd1818a4e39593ccfd72e9a051fdd3e2d1e340ed913679e888ded8c
+  languageName: node
+  linkType: hard
+
+"json5@npm:^2.2.2, json5@npm:^2.2.3":
+  version: 2.2.3
+  resolution: "json5@npm:2.2.3"
+  bin:
+    json5: lib/cli.js
+  checksum: 10/1db67b853ff0de3534085d630691d3247de53a2ed1390ba0ddff681ea43e9b3e30ecbdb65c5e9aab49435e44059c23dbd6fee8ee619419ba37465bb0dd7135da
+  languageName: node
+  linkType: hard
+
+"jsonc-parser@npm:^3.2.0":
+  version: 3.3.1
+  resolution: "jsonc-parser@npm:3.3.1"
+  checksum: 10/9b0dc391f20b47378f843ef1e877e73ec652a5bdc3c5fa1f36af0f119a55091d147a86c1ee86a232296f55c929bba174538c2bf0312610e0817a22de131cc3f4
+  languageName: node
+  linkType: hard
+
+"jsonfile@npm:^6.0.1":
+  version: 6.1.0
+  resolution: "jsonfile@npm:6.1.0"
+  dependencies:
+    graceful-fs: "npm:^4.1.6"
+    universalify: "npm:^2.0.0"
+  dependenciesMeta:
+    graceful-fs:
+      optional: true
+  checksum: 10/03014769e7dc77d4cf05fa0b534907270b60890085dd5e4d60a382ff09328580651da0b8b4cdf44d91e4c8ae64d91791d965f05707beff000ed494a38b6fec85
+  languageName: node
+  linkType: hard
+
+"jsprim@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "jsprim@npm:2.0.2"
+  dependencies:
+    assert-plus: "npm:1.0.0"
+    extsprintf: "npm:1.3.0"
+    json-schema: "npm:0.4.0"
+    verror: "npm:1.10.0"
+  checksum: 10/fcfca5b55f83e1b8be5f932c71754bd37afd2611f81685abd05689e8ce718a91155ff7bd5b94c65ce483a787b5c43c6d0c18c1d2259fca5bb61a3f8ea2e29c0a
+  languageName: node
+  linkType: hard
+
+"keyv@npm:^4.5.3":
+  version: 4.5.4
+  resolution: "keyv@npm:4.5.4"
+  dependencies:
+    json-buffer: "npm:3.0.1"
+  checksum: 10/167eb6ef64cc84b6fa0780ee50c9de456b422a1e18802209234f7c2cf7eae648c7741f32e50d7e24ccb22b24c13154070b01563d642755b156c357431a191e75
+  languageName: node
+  linkType: hard
+
+"kleur@npm:^3.0.3":
+  version: 3.0.3
+  resolution: "kleur@npm:3.0.3"
+  checksum: 10/0c0ecaf00a5c6173d25059c7db2113850b5457016dfa1d0e3ef26da4704fbb186b4938d7611246d86f0ddf1bccf26828daa5877b1f232a65e7373d0122a83e7f
+  languageName: node
+  linkType: hard
+
+"lazy-ass@npm:^1.6.0":
+  version: 1.6.0
+  resolution: "lazy-ass@npm:1.6.0"
+  checksum: 10/3969ebef060b6f665fc78310ec769f7d2945db2d5af2b6663eda1bc9ec45c845deba9c4a3f75f124ce2c76fedf56514a063ee5c2affc8bc94963fbbddb442a88
+  languageName: node
+  linkType: hard
+
+"leven@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "leven@npm:3.1.0"
+  checksum: 10/638401d534585261b6003db9d99afd244dfe82d75ddb6db5c0df412842d5ab30b2ef18de471aaec70fe69a46f17b4ae3c7f01d8a4e6580ef7adb9f4273ad1e55
+  languageName: node
+  linkType: hard
+
+"levn@npm:^0.4.1":
+  version: 0.4.1
+  resolution: "levn@npm:0.4.1"
+  dependencies:
+    prelude-ls: "npm:^1.2.1"
+    type-check: "npm:~0.4.0"
+  checksum: 10/2e4720ff79f21ae08d42374b0a5c2f664c5be8b6c8f565bb4e1315c96ed3a8acaa9de788ffed82d7f2378cf36958573de07ef92336cb5255ed74d08b8318c9ee
+  languageName: node
+  linkType: hard
+
+"lines-and-columns@npm:^1.1.6":
+  version: 1.2.4
+  resolution: "lines-and-columns@npm:1.2.4"
+  checksum: 10/0c37f9f7fa212b38912b7145e1cd16a5f3cd34d782441c3e6ca653485d326f58b3caccda66efce1c5812bde4961bbde3374fae4b0d11bf1226152337f3894aa5
+  languageName: node
+  linkType: hard
+
+"listr2@npm:^3.8.3":
+  version: 3.14.0
+  resolution: "listr2@npm:3.14.0"
+  dependencies:
+    cli-truncate: "npm:^2.1.0"
+    colorette: "npm:^2.0.16"
+    log-update: "npm:^4.0.0"
+    p-map: "npm:^4.0.0"
+    rfdc: "npm:^1.3.0"
+    rxjs: "npm:^7.5.1"
+    through: "npm:^2.3.8"
+    wrap-ansi: "npm:^7.0.0"
+  peerDependencies:
+    enquirer: ">= 2.3.0 < 3"
+  peerDependenciesMeta:
+    enquirer:
+      optional: true
+  checksum: 10/cebbd692330279ea82f05468cbb0a16f5b40015a6163e0a2fb04ef168da8e2d6c54e129148e90112d92e7f9ecb85a56e6b88d867a58a8ebdf36e0c98df49ae5c
+  languageName: node
+  linkType: hard
+
+"locate-path@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "locate-path@npm:5.0.0"
+  dependencies:
+    p-locate: "npm:^4.1.0"
+  checksum: 10/83e51725e67517287d73e1ded92b28602e3ae5580b301fe54bfb76c0c723e3f285b19252e375712316774cf52006cb236aed5704692c32db0d5d089b69696e30
+  languageName: node
+  linkType: hard
+
+"locate-path@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "locate-path@npm:6.0.0"
+  dependencies:
+    p-locate: "npm:^5.0.0"
+  checksum: 10/72eb661788a0368c099a184c59d2fee760b3831c9c1c33955e8a19ae4a21b4116e53fa736dc086cdeb9fce9f7cc508f2f92d2d3aae516f133e16a2bb59a39f5a
+  languageName: node
+  linkType: hard
+
+"lodash-es@npm:^4.17.21":
+  version: 4.17.21
+  resolution: "lodash-es@npm:4.17.21"
+  checksum: 10/03f39878ea1e42b3199bd3f478150ab723f93cc8730ad86fec1f2804f4a07c6e30deaac73cad53a88e9c3db33348bb8ceeb274552390e7a75d7849021c02df43
+  languageName: node
+  linkType: hard
+
+"lodash.merge@npm:^4.6.2":
+  version: 4.6.2
+  resolution: "lodash.merge@npm:4.6.2"
+  checksum: 10/d0ea2dd0097e6201be083865d50c3fb54fbfbdb247d9cc5950e086c991f448b7ab0cdab0d57eacccb43473d3f2acd21e134db39f22dac2d6c9ba6bf26978e3d6
+  languageName: node
+  linkType: hard
+
+"lodash.once@npm:^4.1.1":
+  version: 4.1.1
+  resolution: "lodash.once@npm:4.1.1"
+  checksum: 10/202f2c8c3d45e401b148a96de228e50ea6951ee5a9315ca5e15733d5a07a6b1a02d9da1e7fdf6950679e17e8ca8f7190ec33cae47beb249b0c50019d753f38f3
+  languageName: node
+  linkType: hard
+
+"lodash@npm:^4.17.15, lodash@npm:^4.17.21":
+  version: 4.17.21
+  resolution: "lodash@npm:4.17.21"
+  checksum: 10/c08619c038846ea6ac754abd6dd29d2568aa705feb69339e836dfa8d8b09abbb2f859371e86863eda41848221f9af43714491467b5b0299122431e202bb0c532
+  languageName: node
+  linkType: hard
+
+"log-symbols@npm:^4.0.0":
+  version: 4.1.0
+  resolution: "log-symbols@npm:4.1.0"
+  dependencies:
+    chalk: "npm:^4.1.0"
+    is-unicode-supported: "npm:^0.1.0"
+  checksum: 10/fce1497b3135a0198803f9f07464165e9eb83ed02ceb2273930a6f8a508951178d8cf4f0378e9d28300a2ed2bc49050995d2bd5f53ab716bb15ac84d58c6ef74
+  languageName: node
+  linkType: hard
+
+"log-update@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "log-update@npm:4.0.0"
+  dependencies:
+    ansi-escapes: "npm:^4.3.0"
+    cli-cursor: "npm:^3.1.0"
+    slice-ansi: "npm:^4.0.0"
+    wrap-ansi: "npm:^6.2.0"
+  checksum: 10/ae2f85bbabc1906034154fb7d4c4477c79b3e703d22d78adee8b3862fa913942772e7fa11713e3d96fb46de4e3cabefbf5d0a544344f03b58d3c4bff52aa9eb2
+  languageName: node
+  linkType: hard
+
+"loose-envify@npm:^1.1.0":
+  version: 1.4.0
+  resolution: "loose-envify@npm:1.4.0"
+  dependencies:
+    js-tokens: "npm:^3.0.0 || ^4.0.0"
+  bin:
+    loose-envify: cli.js
+  checksum: 10/6517e24e0cad87ec9888f500c5b5947032cdfe6ef65e1c1936a0c48a524b81e65542c9c3edc91c97d5bddc806ee2a985dbc79be89215d613b1de5db6d1cfe6f4
+  languageName: node
+  linkType: hard
+
+"loupe@npm:^3.1.0, loupe@npm:^3.1.1, loupe@npm:^3.1.2":
+  version: 3.1.2
+  resolution: "loupe@npm:3.1.2"
+  checksum: 10/8f5734e53fb64cd914aa7d986e01b6d4c2e3c6c56dcbd5428d71c2703f0ab46b5ab9f9eeaaf2b485e8a1c43f865bdd16ec08ae1a661c8f55acdbd9f4d59c607a
+  languageName: node
+  linkType: hard
+
+"lru-cache@npm:^10.0.1, lru-cache@npm:^10.2.0":
+  version: 10.4.3
+  resolution: "lru-cache@npm:10.4.3"
+  checksum: 10/e6e90267360476720fa8e83cc168aa2bf0311f3f2eea20a6ba78b90a885ae72071d9db132f40fda4129c803e7dcec3a6b6a6fbb44ca90b081630b810b5d6a41a
+  languageName: node
+  linkType: hard
+
+"lru-cache@npm:^5.1.1":
+  version: 5.1.1
+  resolution: "lru-cache@npm:5.1.1"
+  dependencies:
+    yallist: "npm:^3.0.2"
+  checksum: 10/951d2673dcc64a7fb888bf3d13bc2fdf923faca97d89cdb405ba3dfff77e2b26e5798d405e78fcd7094c9e7b8b4dab2ddc5a4f8a11928af24a207b7c738ca3f8
+  languageName: node
+  linkType: hard
+
+"lz-string@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "lz-string@npm:1.5.0"
+  bin:
+    lz-string: bin/bin.js
+  checksum: 10/e86f0280e99a8d8cd4eef24d8601ddae15ce54e43ac9990dfcb79e1e081c255ad24424a30d78d2ad8e51a8ce82a66a930047fed4b4aa38c6f0b392ff9300edfc
+  languageName: node
+  linkType: hard
+
+"magic-string@npm:^0.27.0":
+  version: 0.27.0
+  resolution: "magic-string@npm:0.27.0"
+  dependencies:
+    "@jridgewell/sourcemap-codec": "npm:^1.4.13"
+  checksum: 10/10a18a48d22fb14467d6cb4204aba58d6790ae7ba023835dc7a65e310cf216f042a17fab1155ba43e47117310a9b7c3fd3bb79f40be40f5124d6b1af9e96399b
+  languageName: node
+  linkType: hard
+
+"magic-string@npm:^0.30.0":
+  version: 0.30.12
+  resolution: "magic-string@npm:0.30.12"
+  dependencies:
+    "@jridgewell/sourcemap-codec": "npm:^1.5.0"
+  checksum: 10/98016180a52b28efc1362152b45671067facccdaead6b70c1c14c566cba98491bc2e1336474b0996397730dca24400e85649da84d3da62b2560ed03c067573e6
+  languageName: node
+  linkType: hard
+
+"magic-string@npm:^0.30.12":
+  version: 0.30.14
+  resolution: "magic-string@npm:0.30.14"
+  dependencies:
+    "@jridgewell/sourcemap-codec": "npm:^1.5.0"
+  checksum: 10/8ca0f8937c2824e48ebc70e7e065a193c467713639cc6e5972aaba0fa5417b375a6f62c383410a19a66e618c386bb7253fbd3ccbfb0144bb310f0ba772121f12
+  languageName: node
+  linkType: hard
+
+"magicast@npm:^0.3.5":
+  version: 0.3.5
+  resolution: "magicast@npm:0.3.5"
+  dependencies:
+    "@babel/parser": "npm:^7.25.4"
+    "@babel/types": "npm:^7.25.4"
+    source-map-js: "npm:^1.2.0"
+  checksum: 10/3a2dba6b0bdde957797361d09c7931ebdc1b30231705360eeb40ed458d28e1c3112841c3ed4e1b87ceb28f741e333c7673cd961193aa9fdb4f4946b202e6205a
+  languageName: node
+  linkType: hard
+
+"make-dir@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "make-dir@npm:4.0.0"
+  dependencies:
+    semver: "npm:^7.5.3"
+  checksum: 10/bf0731a2dd3aab4db6f3de1585cea0b746bb73eb5a02e3d8d72757e376e64e6ada190b1eddcde5b2f24a81b688a9897efd5018737d05e02e2a671dda9cff8a8a
+  languageName: node
+  linkType: hard
+
+"make-fetch-happen@npm:^13.0.0":
+  version: 13.0.1
+  resolution: "make-fetch-happen@npm:13.0.1"
+  dependencies:
+    "@npmcli/agent": "npm:^2.0.0"
+    cacache: "npm:^18.0.0"
+    http-cache-semantics: "npm:^4.1.1"
+    is-lambda: "npm:^1.0.1"
+    minipass: "npm:^7.0.2"
+    minipass-fetch: "npm:^3.0.0"
+    minipass-flush: "npm:^1.0.5"
+    minipass-pipeline: "npm:^1.2.4"
+    negotiator: "npm:^0.6.3"
+    proc-log: "npm:^4.2.0"
+    promise-retry: "npm:^2.0.1"
+    ssri: "npm:^10.0.0"
+  checksum: 10/11bae5ad6ac59b654dbd854f30782f9de052186c429dfce308eda42374528185a100ee40ac9ffdc36a2b6c821ecaba43913e4730a12f06f15e895ea9cb23fa59
+  languageName: node
+  linkType: hard
+
+"makeerror@npm:1.0.12":
+  version: 1.0.12
+  resolution: "makeerror@npm:1.0.12"
+  dependencies:
+    tmpl: "npm:1.0.5"
+  checksum: 10/4c66ddfc654537333da952c084f507fa4c30c707b1635344eb35be894d797ba44c901a9cebe914aa29a7f61357543ba09b09dddbd7f65b4aee756b450f169f40
+  languageName: node
+  linkType: hard
+
+"map-or-similar@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "map-or-similar@npm:1.5.0"
+  checksum: 10/3cf43bcd0e7af41d7bade5f8b5be6bb9d021cc47e6008ad545d071cf3a709ba782884002f9eec6ccd51f572fc17841e07bf74628e0bc3694c33f4622b03e4b4c
+  languageName: node
+  linkType: hard
+
+"memoizerific@npm:^1.11.3":
+  version: 1.11.3
+  resolution: "memoizerific@npm:1.11.3"
+  dependencies:
+    map-or-similar: "npm:^1.5.0"
+  checksum: 10/72b6b80699777d000f03db6e15fdabcd4afe77feb45be51fe195cb230c64a368fcfcfbb976375eac3283bd8193d6b1a67ac3081cae07f64fca73f1aa568d59e3
+  languageName: node
+  linkType: hard
+
+"merge-stream@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "merge-stream@npm:2.0.0"
+  checksum: 10/6fa4dcc8d86629705cea944a4b88ef4cb0e07656ebf223fa287443256414283dd25d91c1cd84c77987f2aec5927af1a9db6085757cb43d90eb170ebf4b47f4f4
+  languageName: node
+  linkType: hard
+
+"merge2@npm:^1.3.0, merge2@npm:^1.4.1":
+  version: 1.4.1
+  resolution: "merge2@npm:1.4.1"
+  checksum: 10/7268db63ed5169466540b6fb947aec313200bcf6d40c5ab722c22e242f651994619bcd85601602972d3c85bd2cc45a358a4c61937e9f11a061919a1da569b0c2
+  languageName: node
+  linkType: hard
+
+"micromatch@npm:^4.0.4":
+  version: 4.0.8
+  resolution: "micromatch@npm:4.0.8"
+  dependencies:
+    braces: "npm:^3.0.3"
+    picomatch: "npm:^2.3.1"
+  checksum: 10/6bf2a01672e7965eb9941d1f02044fad2bd12486b5553dc1116ff24c09a8723157601dc992e74c911d896175918448762df3b3fd0a6b61037dd1a9766ddfbf58
+  languageName: node
+  linkType: hard
+
+"mime-db@npm:1.52.0":
+  version: 1.52.0
+  resolution: "mime-db@npm:1.52.0"
+  checksum: 10/54bb60bf39e6f8689f6622784e668a3d7f8bed6b0d886f5c3c446cb3284be28b30bf707ed05d0fe44a036f8469976b2629bbea182684977b084de9da274694d7
+  languageName: node
+  linkType: hard
+
+"mime-types@npm:^2.1.12, mime-types@npm:~2.1.19":
+  version: 2.1.35
+  resolution: "mime-types@npm:2.1.35"
+  dependencies:
+    mime-db: "npm:1.52.0"
+  checksum: 10/89aa9651b67644035de2784a6e665fc685d79aba61857e02b9c8758da874a754aed4a9aced9265f5ed1171fd934331e5516b84a7f0218031b6fa0270eca1e51a
+  languageName: node
+  linkType: hard
+
+"mimic-fn@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "mimic-fn@npm:2.1.0"
+  checksum: 10/d2421a3444848ce7f84bd49115ddacff29c15745db73f54041edc906c14b131a38d05298dae3081667627a59b2eb1ca4b436ff2e1b80f69679522410418b478a
+  languageName: node
+  linkType: hard
+
+"min-indent@npm:^1.0.0, min-indent@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "min-indent@npm:1.0.1"
+  checksum: 10/bfc6dd03c5eaf623a4963ebd94d087f6f4bbbfd8c41329a7f09706b0cb66969c4ddd336abeb587bc44bc6f08e13bf90f0b374f9d71f9f01e04adc2cd6f083ef1
+  languageName: node
+  linkType: hard
+
+"minimatch@npm:9.0.3":
+  version: 9.0.3
+  resolution: "minimatch@npm:9.0.3"
+  dependencies:
+    brace-expansion: "npm:^2.0.1"
+  checksum: 10/c81b47d28153e77521877649f4bab48348d10938df9e8147a58111fe00ef89559a2938de9f6632910c4f7bf7bb5cd81191a546167e58d357f0cfb1e18cecc1c5
+  languageName: node
+  linkType: hard
+
+"minimatch@npm:^3.0.4, minimatch@npm:^3.0.5, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2":
+  version: 3.1.2
+  resolution: "minimatch@npm:3.1.2"
+  dependencies:
+    brace-expansion: "npm:^1.1.7"
+  checksum: 10/e0b25b04cd4ec6732830344e5739b13f8690f8a012d73445a4a19fbc623f5dd481ef7a5827fde25954cd6026fede7574cc54dc4643c99d6c6b653d6203f94634
+  languageName: node
+  linkType: hard
+
+"minimatch@npm:^9.0.4":
+  version: 9.0.5
+  resolution: "minimatch@npm:9.0.5"
+  dependencies:
+    brace-expansion: "npm:^2.0.1"
+  checksum: 10/dd6a8927b063aca6d910b119e1f2df6d2ce7d36eab91de83167dd136bb85e1ebff97b0d3de1cb08bd1f7e018ca170b4962479fefab5b2a69e2ae12cb2edc8348
+  languageName: node
+  linkType: hard
+
+"minimist@npm:^1.2.6, minimist@npm:^1.2.8":
+  version: 1.2.8
+  resolution: "minimist@npm:1.2.8"
+  checksum: 10/908491b6cc15a6c440ba5b22780a0ba89b9810e1aea684e253e43c4e3b8d56ec1dcdd7ea96dde119c29df59c936cde16062159eae4225c691e19c70b432b6e6f
+  languageName: node
+  linkType: hard
+
+"minipass-collect@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "minipass-collect@npm:2.0.1"
+  dependencies:
+    minipass: "npm:^7.0.3"
+  checksum: 10/b251bceea62090f67a6cced7a446a36f4cd61ee2d5cea9aee7fff79ba8030e416327a1c5aa2908dc22629d06214b46d88fdab8c51ac76bacbf5703851b5ad342
+  languageName: node
+  linkType: hard
+
+"minipass-fetch@npm:^3.0.0":
+  version: 3.0.5
+  resolution: "minipass-fetch@npm:3.0.5"
+  dependencies:
+    encoding: "npm:^0.1.13"
+    minipass: "npm:^7.0.3"
+    minipass-sized: "npm:^1.0.3"
+    minizlib: "npm:^2.1.2"
+  dependenciesMeta:
+    encoding:
+      optional: true
+  checksum: 10/c669948bec1373313aaa8f104b962a3ced9f45c49b26366a4b0ae27ccdfa9c5740d72c8a84d3f8623d7a61c5fc7afdfda44789008c078f61a62441142efc4a97
+  languageName: node
+  linkType: hard
+
+"minipass-flush@npm:^1.0.5":
+  version: 1.0.5
+  resolution: "minipass-flush@npm:1.0.5"
+  dependencies:
+    minipass: "npm:^3.0.0"
+  checksum: 10/56269a0b22bad756a08a94b1ffc36b7c9c5de0735a4dd1ab2b06c066d795cfd1f0ac44a0fcae13eece5589b908ecddc867f04c745c7009be0b566421ea0944cf
+  languageName: node
+  linkType: hard
+
+"minipass-pipeline@npm:^1.2.4":
+  version: 1.2.4
+  resolution: "minipass-pipeline@npm:1.2.4"
+  dependencies:
+    minipass: "npm:^3.0.0"
+  checksum: 10/b14240dac0d29823c3d5911c286069e36d0b81173d7bdf07a7e4a91ecdef92cdff4baaf31ea3746f1c61e0957f652e641223970870e2353593f382112257971b
+  languageName: node
+  linkType: hard
+
+"minipass-sized@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "minipass-sized@npm:1.0.3"
+  dependencies:
+    minipass: "npm:^3.0.0"
+  checksum: 10/40982d8d836a52b0f37049a0a7e5d0f089637298e6d9b45df9c115d4f0520682a78258905e5c8b180fb41b593b0a82cc1361d2c74b45f7ada66334f84d1ecfdd
+  languageName: node
+  linkType: hard
+
+"minipass@npm:^3.0.0":
+  version: 3.3.6
+  resolution: "minipass@npm:3.3.6"
+  dependencies:
+    yallist: "npm:^4.0.0"
+  checksum: 10/a5c6ef069f70d9a524d3428af39f2b117ff8cd84172e19b754e7264a33df460873e6eb3d6e55758531580970de50ae950c496256bb4ad3691a2974cddff189f0
+  languageName: node
+  linkType: hard
+
+"minipass@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "minipass@npm:5.0.0"
+  checksum: 10/61682162d29f45d3152b78b08bab7fb32ca10899bc5991ffe98afc18c9e9543bd1e3be94f8b8373ba6262497db63607079dc242ea62e43e7b2270837b7347c93
+  languageName: node
+  linkType: hard
+
+"minipass@npm:^5.0.0 || ^6.0.2 || ^7.0.0, minipass@npm:^7.0.2, minipass@npm:^7.0.3, minipass@npm:^7.1.2":
+  version: 7.1.2
+  resolution: "minipass@npm:7.1.2"
+  checksum: 10/c25f0ee8196d8e6036661104bacd743785b2599a21de5c516b32b3fa2b83113ac89a2358465bc04956baab37ffb956ae43be679b2262bf7be15fce467ccd7950
+  languageName: node
+  linkType: hard
+
+"minizlib@npm:^2.1.1, minizlib@npm:^2.1.2":
+  version: 2.1.2
+  resolution: "minizlib@npm:2.1.2"
+  dependencies:
+    minipass: "npm:^3.0.0"
+    yallist: "npm:^4.0.0"
+  checksum: 10/ae0f45436fb51344dcb87938446a32fbebb540d0e191d63b35e1c773d47512e17307bf54aa88326cc6d176594d00e4423563a091f7266c2f9a6872cdc1e234d1
+  languageName: node
+  linkType: hard
+
+"mkdirp@npm:^1.0.3":
+  version: 1.0.4
+  resolution: "mkdirp@npm:1.0.4"
+  bin:
+    mkdirp: bin/cmd.js
+  checksum: 10/d71b8dcd4b5af2fe13ecf3bd24070263489404fe216488c5ba7e38ece1f54daf219e72a833a3a2dc404331e870e9f44963a33399589490956bff003a3404d3b2
+  languageName: node
+  linkType: hard
+
+"mrmime@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "mrmime@npm:2.0.0"
+  checksum: 10/8d95f714ea200c6cf3e3777cbc6168be04b05ac510090a9b41eef5ec081efeb1d1de3e535ffb9c9689fffcc42f59864fd52a500e84a677274f070adeea615c45
+  languageName: node
+  linkType: hard
+
+"ms@npm:^2.1.1, ms@npm:^2.1.3":
+  version: 2.1.3
+  resolution: "ms@npm:2.1.3"
+  checksum: 10/aa92de608021b242401676e35cfa5aa42dd70cbdc082b916da7fb925c542173e36bce97ea3e804923fe92c0ad991434e4a38327e15a1b5b5f945d66df615ae6d
+  languageName: node
+  linkType: hard
+
+"msw@npm:^2.6.4":
+  version: 2.6.6
+  resolution: "msw@npm:2.6.6"
+  dependencies:
+    "@bundled-es-modules/cookie": "npm:^2.0.1"
+    "@bundled-es-modules/statuses": "npm:^1.0.1"
+    "@bundled-es-modules/tough-cookie": "npm:^0.1.6"
+    "@inquirer/confirm": "npm:^5.0.0"
+    "@mswjs/interceptors": "npm:^0.37.0"
+    "@open-draft/deferred-promise": "npm:^2.2.0"
+    "@open-draft/until": "npm:^2.1.0"
+    "@types/cookie": "npm:^0.6.0"
+    "@types/statuses": "npm:^2.0.4"
+    chalk: "npm:^4.1.2"
+    graphql: "npm:^16.8.1"
+    headers-polyfill: "npm:^4.0.2"
+    is-node-process: "npm:^1.2.0"
+    outvariant: "npm:^1.4.3"
+    path-to-regexp: "npm:^6.3.0"
+    strict-event-emitter: "npm:^0.5.1"
+    type-fest: "npm:^4.26.1"
+    yargs: "npm:^17.7.2"
+  peerDependencies:
+    typescript: ">= 4.8.x"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  bin:
+    msw: cli/index.js
+  checksum: 10/7762ba5f1570789328af27167e03c2b8eb4981faa476ae47d74c125c90ddc1792bc28b9ce1100bbc4e105b55e3e7d65e7cae8d27fa7677b6516e42a63c38b7a3
+  languageName: node
+  linkType: hard
+
+"mute-stream@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "mute-stream@npm:2.0.0"
+  checksum: 10/d2e4fd2f5aa342b89b98134a8d899d8ef9b0a6d69274c4af9df46faa2d97aeb1f2ce83d867880d6de63643c52386579b99139801e24e7526c3b9b0a6d1e18d6c
+  languageName: node
+  linkType: hard
+
+"nanoid@npm:^3.3.7":
+  version: 3.3.7
+  resolution: "nanoid@npm:3.3.7"
+  bin:
+    nanoid: bin/nanoid.cjs
+  checksum: 10/ac1eb60f615b272bccb0e2b9cd933720dad30bf9708424f691b8113826bb91aca7e9d14ef5d9415a6ba15c266b37817256f58d8ce980c82b0ba3185352565679
+  languageName: node
+  linkType: hard
+
+"natural-compare@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "natural-compare@npm:1.4.0"
+  checksum: 10/23ad088b08f898fc9b53011d7bb78ec48e79de7627e01ab5518e806033861bef68d5b0cd0e2205c2f36690ac9571ff6bcb05eb777ced2eeda8d4ac5b44592c3d
+  languageName: node
+  linkType: hard
+
+"negotiator@npm:^0.6.3":
+  version: 0.6.4
+  resolution: "negotiator@npm:0.6.4"
+  checksum: 10/d98c04a136583afd055746168f1067d58ce4bfe6e4c73ca1d339567f81ea1f7e665b5bd1e81f4771c67b6c2ea89b21cb2adaea2b16058c7dc31317778f931dab
+  languageName: node
+  linkType: hard
+
+"node-gyp@npm:latest":
+  version: 10.2.0
+  resolution: "node-gyp@npm:10.2.0"
+  dependencies:
+    env-paths: "npm:^2.2.0"
+    exponential-backoff: "npm:^3.1.1"
+    glob: "npm:^10.3.10"
+    graceful-fs: "npm:^4.2.6"
+    make-fetch-happen: "npm:^13.0.0"
+    nopt: "npm:^7.0.0"
+    proc-log: "npm:^4.1.0"
+    semver: "npm:^7.3.5"
+    tar: "npm:^6.2.1"
+    which: "npm:^4.0.0"
+  bin:
+    node-gyp: bin/node-gyp.js
+  checksum: 10/41773093b1275751dec942b985982fd4e7a69b88cae719b868babcef3880ee6168aaec8dcaa8cd0b9fa7c84873e36cc549c6cac6a124ee65ba4ce1f1cc108cfe
+  languageName: node
+  linkType: hard
+
+"node-int64@npm:^0.4.0":
+  version: 0.4.0
+  resolution: "node-int64@npm:0.4.0"
+  checksum: 10/b7afc2b65e56f7035b1a2eec57ae0fbdee7d742b1cdcd0f4387562b6527a011ab1cbe9f64cc8b3cca61e3297c9637c8bf61cec2e6b8d3a711d4b5267dfafbe02
+  languageName: node
+  linkType: hard
+
+"node-releases@npm:^2.0.18":
+  version: 2.0.18
+  resolution: "node-releases@npm:2.0.18"
+  checksum: 10/241e5fa9556f1c12bafb83c6c3e94f8cf3d8f2f8f904906ecef6e10bcaa1d59aa61212d4651bec70052015fc54bd3fdcdbe7fc0f638a17e6685aa586c076ec4e
+  languageName: node
+  linkType: hard
+
+"nopt@npm:^7.0.0":
+  version: 7.2.1
+  resolution: "nopt@npm:7.2.1"
+  dependencies:
+    abbrev: "npm:^2.0.0"
+  bin:
+    nopt: bin/nopt.js
+  checksum: 10/95a1f6dec8a81cd18cdc2fed93e6f0b4e02cf6bdb4501c848752c6e34f9883d9942f036a5e3b21a699047d8a448562d891e67492df68ec9c373e6198133337ae
+  languageName: node
+  linkType: hard
+
+"normalize-path@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "normalize-path@npm:3.0.0"
+  checksum: 10/88eeb4da891e10b1318c4b2476b6e2ecbeb5ff97d946815ffea7794c31a89017c70d7f34b3c2ebf23ef4e9fc9fb99f7dffe36da22011b5b5c6ffa34f4873ec20
+  languageName: node
+  linkType: hard
+
+"npm-run-path@npm:^4.0.0, npm-run-path@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "npm-run-path@npm:4.0.1"
+  dependencies:
+    path-key: "npm:^3.0.0"
+  checksum: 10/5374c0cea4b0bbfdfae62da7bbdf1e1558d338335f4cacf2515c282ff358ff27b2ecb91ffa5330a8b14390ac66a1e146e10700440c1ab868208430f56b5f4d23
+  languageName: node
+  linkType: hard
+
+"nwsapi@npm:^2.2.2":
+  version: 2.2.13
+  resolution: "nwsapi@npm:2.2.13"
+  checksum: 10/f7f30a236f2ee513ea8042f1a987481dc2b900167c47f7163882f0fcfe7ccb57b5c8daaf2c91008dc20a204fcd79e050aee25001433ad99990bbed5a8c74121c
+  languageName: node
+  linkType: hard
+
+"object-inspect@npm:^1.13.1":
+  version: 1.13.2
+  resolution: "object-inspect@npm:1.13.2"
+  checksum: 10/7ef65583b6397570a17c56f0c1841e0920e83900f2c94638927abb7b81ac08a19c7aae135bd9dcca96208cac0c7332b4650fb927f027b0cf92d71df2990d0561
+  languageName: node
+  linkType: hard
+
+"object-is@npm:^1.1.5":
+  version: 1.1.6
+  resolution: "object-is@npm:1.1.6"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+    define-properties: "npm:^1.2.1"
+  checksum: 10/4f6f544773a595da21c69a7531e0e1d6250670f4e09c55f47eb02c516035cfcb1b46ceb744edfd3ecb362309dbccb6d7f88e43bf42e4d4595ac10a329061053a
+  languageName: node
+  linkType: hard
+
+"object-keys@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "object-keys@npm:1.1.1"
+  checksum: 10/3d81d02674115973df0b7117628ea4110d56042e5326413e4b4313f0bcdf7dd78d4a3acef2c831463fa3796a66762c49daef306f4a0ea1af44877d7086d73bde
+  languageName: node
+  linkType: hard
+
+"object.assign@npm:^4.1.4":
+  version: 4.1.5
+  resolution: "object.assign@npm:4.1.5"
+  dependencies:
+    call-bind: "npm:^1.0.5"
+    define-properties: "npm:^1.2.1"
+    has-symbols: "npm:^1.0.3"
+    object-keys: "npm:^1.1.1"
+  checksum: 10/dbb22da4cda82e1658349ea62b80815f587b47131b3dd7a4ab7f84190ab31d206bbd8fe7e26ae3220c55b65725ac4529825f6142154211220302aa6b1518045d
+  languageName: node
+  linkType: hard
+
+"once@npm:^1.3.0, once@npm:^1.3.1, once@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "once@npm:1.4.0"
+  dependencies:
+    wrappy: "npm:1"
+  checksum: 10/cd0a88501333edd640d95f0d2700fbde6bff20b3d4d9bdc521bdd31af0656b5706570d6c6afe532045a20bb8dc0849f8332d6f2a416e0ba6d3d3b98806c7db68
+  languageName: node
+  linkType: hard
+
+"onetime@npm:^5.1.0, onetime@npm:^5.1.2":
+  version: 5.1.2
+  resolution: "onetime@npm:5.1.2"
+  dependencies:
+    mimic-fn: "npm:^2.1.0"
+  checksum: 10/e9fd0695a01cf226652f0385bf16b7a24153dbbb2039f764c8ba6d2306a8506b0e4ce570de6ad99c7a6eb49520743afdb66edd95ee979c1a342554ed49a9aadd
+  languageName: node
+  linkType: hard
+
+"open@npm:^8.0.4":
+  version: 8.4.2
+  resolution: "open@npm:8.4.2"
+  dependencies:
+    define-lazy-prop: "npm:^2.0.0"
+    is-docker: "npm:^2.1.1"
+    is-wsl: "npm:^2.2.0"
+  checksum: 10/acd81a1d19879c818acb3af2d2e8e9d81d17b5367561e623248133deb7dd3aefaed527531df2677d3e6aaf0199f84df57b6b2262babff8bf46ea0029aac536c9
+  languageName: node
+  linkType: hard
+
+"optionator@npm:^0.9.3":
+  version: 0.9.4
+  resolution: "optionator@npm:0.9.4"
+  dependencies:
+    deep-is: "npm:^0.1.3"
+    fast-levenshtein: "npm:^2.0.6"
+    levn: "npm:^0.4.1"
+    prelude-ls: "npm:^1.2.1"
+    type-check: "npm:^0.4.0"
+    word-wrap: "npm:^1.2.5"
+  checksum: 10/a8398559c60aef88d7f353a4f98dcdff6090a4e70f874c827302bf1213d9106a1c4d5fcb68dacb1feb3c30a04c4102f41047aa55d4c576b863d6fc876e001af6
+  languageName: node
+  linkType: hard
+
+"ospath@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "ospath@npm:1.2.2"
+  checksum: 10/505f48a4f4f1c557d6c656ec985707726e3714721680139be037613e903aa8c8fa4ddd8d1342006f9b2dc0065e6e20f8b7bea2ee05354f31257044790367b347
+  languageName: node
+  linkType: hard
+
+"outvariant@npm:^1.4.0, outvariant@npm:^1.4.3":
+  version: 1.4.3
+  resolution: "outvariant@npm:1.4.3"
+  checksum: 10/3a7582745850cb344d49641867a4c080858c54f4091afd91b9c0765ba6e471c2bc841348f0fff344845ddd0a4db42fd5d68c6f7ebaf32d4b676a3a9987b2488a
+  languageName: node
+  linkType: hard
+
+"p-limit@npm:^2.2.0":
+  version: 2.3.0
+  resolution: "p-limit@npm:2.3.0"
+  dependencies:
+    p-try: "npm:^2.0.0"
+  checksum: 10/84ff17f1a38126c3314e91ecfe56aecbf36430940e2873dadaa773ffe072dc23b7af8e46d4b6485d302a11673fe94c6b67ca2cfbb60c989848b02100d0594ac1
+  languageName: node
+  linkType: hard
+
+"p-limit@npm:^3.0.2, p-limit@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "p-limit@npm:3.1.0"
+  dependencies:
+    yocto-queue: "npm:^0.1.0"
+  checksum: 10/7c3690c4dbf62ef625671e20b7bdf1cbc9534e83352a2780f165b0d3ceba21907e77ad63401708145ca4e25bfc51636588d89a8c0aeb715e6c37d1c066430360
+  languageName: node
+  linkType: hard
+
+"p-locate@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "p-locate@npm:4.1.0"
+  dependencies:
+    p-limit: "npm:^2.2.0"
+  checksum: 10/513bd14a455f5da4ebfcb819ef706c54adb09097703de6aeaa5d26fe5ea16df92b48d1ac45e01e3944ce1e6aa2a66f7f8894742b8c9d6e276e16cd2049a2b870
+  languageName: node
+  linkType: hard
+
+"p-locate@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "p-locate@npm:5.0.0"
+  dependencies:
+    p-limit: "npm:^3.0.2"
+  checksum: 10/1623088f36cf1cbca58e9b61c4e62bf0c60a07af5ae1ca99a720837356b5b6c5ba3eb1b2127e47a06865fee59dd0453cad7cc844cda9d5a62ac1a5a51b7c86d3
+  languageName: node
+  linkType: hard
+
+"p-map@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "p-map@npm:4.0.0"
+  dependencies:
+    aggregate-error: "npm:^3.0.0"
+  checksum: 10/7ba4a2b1e24c05e1fc14bbaea0fc6d85cf005ae7e9c9425d4575550f37e2e584b1af97bcde78eacd7559208f20995988d52881334db16cf77bc1bcf68e48ed7c
+  languageName: node
+  linkType: hard
+
+"p-try@npm:^2.0.0":
+  version: 2.2.0
+  resolution: "p-try@npm:2.2.0"
+  checksum: 10/f8a8e9a7693659383f06aec604ad5ead237c7a261c18048a6e1b5b85a5f8a067e469aa24f5bc009b991ea3b058a87f5065ef4176793a200d4917349881216cae
+  languageName: node
+  linkType: hard
+
+"package-json-from-dist@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "package-json-from-dist@npm:1.0.1"
+  checksum: 10/58ee9538f2f762988433da00e26acc788036914d57c71c246bf0be1b60cdbd77dd60b6a3e1a30465f0b248aeb80079e0b34cb6050b1dfa18c06953bb1cbc7602
+  languageName: node
+  linkType: hard
+
+"parent-module@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "parent-module@npm:1.0.1"
+  dependencies:
+    callsites: "npm:^3.0.0"
+  checksum: 10/6ba8b255145cae9470cf5551eb74be2d22281587af787a2626683a6c20fbb464978784661478dd2a3f1dad74d1e802d403e1b03c1a31fab310259eec8ac560ff
+  languageName: node
+  linkType: hard
+
+"parse-json@npm:^5.2.0":
+  version: 5.2.0
+  resolution: "parse-json@npm:5.2.0"
+  dependencies:
+    "@babel/code-frame": "npm:^7.0.0"
+    error-ex: "npm:^1.3.1"
+    json-parse-even-better-errors: "npm:^2.3.0"
+    lines-and-columns: "npm:^1.1.6"
+  checksum: 10/62085b17d64da57f40f6afc2ac1f4d95def18c4323577e1eced571db75d9ab59b297d1d10582920f84b15985cbfc6b6d450ccbf317644cfa176f3ed982ad87e2
+  languageName: node
+  linkType: hard
+
+"parse5@npm:^7.0.0, parse5@npm:^7.1.1":
+  version: 7.2.0
+  resolution: "parse5@npm:7.2.0"
+  dependencies:
+    entities: "npm:^4.5.0"
+  checksum: 10/49dabfe848f00e8cad8d9198a094d667fbdecbfa5143ddf8fb708e499b5ba76426c16135c8993b1d8e01827b92e8cfab0a9a248afa6ad7cc6f38aecf5bd017e6
+  languageName: node
+  linkType: hard
+
+"path-exists@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "path-exists@npm:4.0.0"
+  checksum: 10/505807199dfb7c50737b057dd8d351b82c033029ab94cb10a657609e00c1bc53b951cfdbccab8de04c5584d5eff31128ce6afd3db79281874a5ef2adbba55ed1
+  languageName: node
+  linkType: hard
+
+"path-is-absolute@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "path-is-absolute@npm:1.0.1"
+  checksum: 10/060840f92cf8effa293bcc1bea81281bd7d363731d214cbe5c227df207c34cd727430f70c6037b5159c8a870b9157cba65e775446b0ab06fd5ecc7e54615a3b8
+  languageName: node
+  linkType: hard
+
+"path-key@npm:^3.0.0, path-key@npm:^3.1.0":
+  version: 3.1.1
+  resolution: "path-key@npm:3.1.1"
+  checksum: 10/55cd7a9dd4b343412a8386a743f9c746ef196e57c823d90ca3ab917f90ab9f13dd0ded27252ba49dbdfcab2b091d998bc446f6220cd3cea65db407502a740020
+  languageName: node
+  linkType: hard
+
+"path-parse@npm:^1.0.7":
+  version: 1.0.7
+  resolution: "path-parse@npm:1.0.7"
+  checksum: 10/49abf3d81115642938a8700ec580da6e830dde670be21893c62f4e10bd7dd4c3742ddc603fe24f898cba7eb0c6bc1777f8d9ac14185d34540c6d4d80cd9cae8a
+  languageName: node
+  linkType: hard
+
+"path-scurry@npm:^1.11.1":
+  version: 1.11.1
+  resolution: "path-scurry@npm:1.11.1"
+  dependencies:
+    lru-cache: "npm:^10.2.0"
+    minipass: "npm:^5.0.0 || ^6.0.2 || ^7.0.0"
+  checksum: 10/5e8845c159261adda6f09814d7725683257fcc85a18f329880ab4d7cc1d12830967eae5d5894e453f341710d5484b8fdbbd4d75181b4d6e1eb2f4dc7aeadc434
+  languageName: node
+  linkType: hard
+
+"path-to-regexp@npm:^6.3.0":
+  version: 6.3.0
+  resolution: "path-to-regexp@npm:6.3.0"
+  checksum: 10/6822f686f01556d99538b350722ef761541ec0ce95ca40ce4c29e20a5b492fe8361961f57993c71b2418de12e604478dcf7c430de34b2c31a688363a7a944d9c
+  languageName: node
+  linkType: hard
+
+"path-type@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "path-type@npm:4.0.0"
+  checksum: 10/5b1e2daa247062061325b8fdbfd1fb56dde0a448fb1455453276ea18c60685bdad23a445dc148cf87bc216be1573357509b7d4060494a6fd768c7efad833ee45
+  languageName: node
+  linkType: hard
+
+"pathe@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "pathe@npm:1.1.2"
+  checksum: 10/f201d796351bf7433d147b92c20eb154a4e0ea83512017bf4ec4e492a5d6e738fb45798be4259a61aa81270179fce11026f6ff0d3fa04173041de044defe9d80
+  languageName: node
+  linkType: hard
+
+"pathval@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "pathval@npm:2.0.0"
+  checksum: 10/b91575bf9cdf01757afd7b5e521eb8a0b874a49bc972d08e0047cfea0cd3c019f5614521d4bc83d2855e3fcc331db6817dfd533dd8f3d90b16bc76fad2450fc1
+  languageName: node
+  linkType: hard
+
+"pend@npm:~1.2.0":
+  version: 1.2.0
+  resolution: "pend@npm:1.2.0"
+  checksum: 10/6c72f5243303d9c60bd98e6446ba7d30ae29e3d56fdb6fae8767e8ba6386f33ee284c97efe3230a0d0217e2b1723b8ab490b1bbf34fcbb2180dbc8a9de47850d
+  languageName: node
+  linkType: hard
+
+"performance-now@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "performance-now@npm:2.1.0"
+  checksum: 10/534e641aa8f7cba160f0afec0599b6cecefbb516a2e837b512be0adbe6c1da5550e89c78059c7fabc5c9ffdf6627edabe23eb7c518c4500067a898fa65c2b550
+  languageName: node
+  linkType: hard
+
+"picocolors@npm:^1.0.0, picocolors@npm:^1.1.0":
+  version: 1.1.1
+  resolution: "picocolors@npm:1.1.1"
+  checksum: 10/e1cf46bf84886c79055fdfa9dcb3e4711ad259949e3565154b004b260cd356c5d54b31a1437ce9782624bf766272fe6b0154f5f0c744fb7af5d454d2b60db045
+  languageName: node
+  linkType: hard
+
+"picomatch@npm:^2.0.4, picomatch@npm:^2.2.3, picomatch@npm:^2.3.1":
+  version: 2.3.1
+  resolution: "picomatch@npm:2.3.1"
+  checksum: 10/60c2595003b05e4535394d1da94850f5372c9427ca4413b71210f437f7b2ca091dbd611c45e8b37d10036fa8eade25c1b8951654f9d3973bfa66a2ff4d3b08bc
+  languageName: node
+  linkType: hard
+
+"picomatch@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "picomatch@npm:4.0.2"
+  checksum: 10/ce617b8da36797d09c0baacb96ca8a44460452c89362d7cb8f70ca46b4158ba8bc3606912de7c818eb4a939f7f9015cef3c766ec8a0c6bfc725fdc078e39c717
+  languageName: node
+  linkType: hard
+
+"pify@npm:^2.2.0":
+  version: 2.3.0
+  resolution: "pify@npm:2.3.0"
+  checksum: 10/9503aaeaf4577acc58642ad1d25c45c6d90288596238fb68f82811c08104c800e5a7870398e9f015d82b44ecbcbef3dc3d4251a1cbb582f6e5959fe09884b2ba
+  languageName: node
+  linkType: hard
+
+"pirates@npm:^4.0.4":
+  version: 4.0.6
+  resolution: "pirates@npm:4.0.6"
+  checksum: 10/d02dda76f4fec1cbdf395c36c11cf26f76a644f9f9a1bfa84d3167d0d3154d5289aacc72677aa20d599bb4a6937a471de1b65c995e2aea2d8687cbcd7e43ea5f
+  languageName: node
+  linkType: hard
+
+"pkg-dir@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "pkg-dir@npm:4.2.0"
+  dependencies:
+    find-up: "npm:^4.0.0"
+  checksum: 10/9863e3f35132bf99ae1636d31ff1e1e3501251d480336edb1c211133c8d58906bed80f154a1d723652df1fda91e01c7442c2eeaf9dc83157c7ae89087e43c8d6
+  languageName: node
+  linkType: hard
+
+"playwright-core@npm:1.48.1":
+  version: 1.48.1
+  resolution: "playwright-core@npm:1.48.1"
+  bin:
+    playwright-core: cli.js
+  checksum: 10/81b51d288be78b75898470eb192ef0bc65594eebfb5f7602d83ba2505e1d2163c9923a0d7bae46779d5f3a16e1daf392acfbccde01d9f302cdf90bf2b21b8988
+  languageName: node
+  linkType: hard
+
+"playwright@npm:1.48.1":
+  version: 1.48.1
+  resolution: "playwright@npm:1.48.1"
+  dependencies:
+    fsevents: "npm:2.3.2"
+    playwright-core: "npm:1.48.1"
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  bin:
+    playwright: cli.js
+  checksum: 10/39e231af3d9e576ba835813c5319b8773d8536ba54c7e34c7004cf06fadb412b6bbfc91badf4bb5cda3f138e5a8994c314de4c76d06d9424430e415f86fb3dd1
+  languageName: node
+  linkType: hard
+
+"polished@npm:^4.2.2":
+  version: 4.3.1
+  resolution: "polished@npm:4.3.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.17.8"
+  checksum: 10/0902fe2eb16aecde1587a00efee7db8081b1331ac7bcfb6e61214d266388723a84858d732ad9395028e0aecd2bb8d0c39cc03d14b4c24c22329a0e40c38141eb
+  languageName: node
+  linkType: hard
+
+"portable-stories-react@workspace:.":
+  version: 0.0.0-use.local
+  resolution: "portable-stories-react@workspace:."
+  dependencies:
+    "@playwright/experimental-ct-react": "npm:1.48.1"
+    "@playwright/test": "npm:1.48.1"
+    "@storybook/addon-a11y": "npm:^8.0.0"
+    "@storybook/addon-actions": "npm:^8.0.0"
+    "@storybook/addon-controls": "npm:^8.0.0"
+    "@storybook/addon-essentials": "npm:^8.0.0"
+    "@storybook/addon-interactions": "npm:^8.0.0"
+    "@storybook/experimental-addon-test": "npm:^8.0.0"
+    "@storybook/react": "npm:^8.0.0"
+    "@storybook/react-vite": "npm:^8.0.0"
+    "@storybook/test": "npm:^8.0.0"
+    "@swc/core": "npm:^1.4.2"
+    "@swc/jest": "npm:^0.2.36"
+    "@testing-library/jest-dom": "npm:6.5.0"
+    "@testing-library/react": "npm:^14.2.1"
+    "@types/identity-obj-proxy": "npm:^3"
+    "@types/react": "npm:^18.2.55"
+    "@types/react-dom": "npm:^18.2.19"
+    "@typescript-eslint/eslint-plugin": "npm:^6.21.0"
+    "@typescript-eslint/parser": "npm:^6.21.0"
+    "@vitejs/plugin-react": "npm:^4.2.1"
+    "@vitest/browser": "npm:^2.1.3"
+    "@vitest/coverage-v8": "npm:^2.1.3"
+    "@vitest/ui": "npm:^2.1.3"
+    cypress: "npm:^13.6.4"
+    eslint: "npm:^8.56.0"
+    eslint-plugin-react-hooks: "npm:^4.6.0"
+    eslint-plugin-react-refresh: "npm:^0.4.5"
+    eslint-plugin-storybook: "npm:^0.6.15"
+    identity-obj-proxy: "npm:^3.0.0"
+    jest: "npm:^29.7.0"
+    jest-environment-jsdom: "npm:^29.7.0"
+    react: "npm:^18.2.0"
+    react-dom: "npm:^18.2.0"
+    storybook: "npm:^8.0.0"
+    typescript: "npm:^5.2.2"
+    vite: "npm:^5.1.1"
+    vitest: "npm:^2.1.3"
+  languageName: unknown
+  linkType: soft
+
+"possible-typed-array-names@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "possible-typed-array-names@npm:1.0.0"
+  checksum: 10/8ed3e96dfeea1c5880c1f4c9cb707e5fb26e8be22f14f82ef92df20fd2004e635c62ba47fbe8f2bb63bfd80dac1474be2fb39798da8c2feba2815435d1f749af
+  languageName: node
+  linkType: hard
+
+"postcss@npm:^8.4.43":
+  version: 8.4.47
+  resolution: "postcss@npm:8.4.47"
+  dependencies:
+    nanoid: "npm:^3.3.7"
+    picocolors: "npm:^1.1.0"
+    source-map-js: "npm:^1.2.1"
+  checksum: 10/f2b50ba9b6fcb795232b6bb20de7cdc538c0025989a8ed9c4438d1960196ba3b7eaff41fdb1a5c701b3504651ea87aeb685577707f0ae4d6ce6f3eae5df79a81
+  languageName: node
+  linkType: hard
+
+"prelude-ls@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "prelude-ls@npm:1.2.1"
+  checksum: 10/0b9d2c76801ca652a7f64892dd37b7e3fab149a37d2424920099bf894acccc62abb4424af2155ab36dea8744843060a2d8ddc983518d0b1e22265a22324b72ed
+  languageName: node
+  linkType: hard
+
+"pretty-bytes@npm:^5.6.0":
+  version: 5.6.0
+  resolution: "pretty-bytes@npm:5.6.0"
+  checksum: 10/9c082500d1e93434b5b291bd651662936b8bd6204ec9fa17d563116a192d6d86b98f6d328526b4e8d783c07d5499e2614a807520249692da9ec81564b2f439cd
+  languageName: node
+  linkType: hard
+
+"pretty-format@npm:^27.0.2":
+  version: 27.5.1
+  resolution: "pretty-format@npm:27.5.1"
+  dependencies:
+    ansi-regex: "npm:^5.0.1"
+    ansi-styles: "npm:^5.0.0"
+    react-is: "npm:^17.0.1"
+  checksum: 10/248990cbef9e96fb36a3e1ae6b903c551ca4ddd733f8d0912b9cc5141d3d0b3f9f8dfb4d799fb1c6723382c9c2083ffbfa4ad43ff9a0e7535d32d41fd5f01da6
+  languageName: node
+  linkType: hard
+
+"pretty-format@npm:^29.7.0":
+  version: 29.7.0
+  resolution: "pretty-format@npm:29.7.0"
+  dependencies:
+    "@jest/schemas": "npm:^29.6.3"
+    ansi-styles: "npm:^5.0.0"
+    react-is: "npm:^18.0.0"
+  checksum: 10/dea96bc83c83cd91b2bfc55757b6b2747edcaac45b568e46de29deee80742f17bc76fe8898135a70d904f4928eafd8bb693cd1da4896e8bdd3c5e82cadf1d2bb
+  languageName: node
+  linkType: hard
+
+"proc-log@npm:^4.1.0, proc-log@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "proc-log@npm:4.2.0"
+  checksum: 10/4e1394491b717f6c1ade15c570ecd4c2b681698474d3ae2d303c1e4b6ab9455bd5a81566211e82890d5a5ae9859718cc6954d5150bb18b09b72ecb297beae90a
+  languageName: node
+  linkType: hard
+
+"process@npm:^0.11.10":
+  version: 0.11.10
+  resolution: "process@npm:0.11.10"
+  checksum: 10/dbaa7e8d1d5cf375c36963ff43116772a989ef2bb47c9bdee20f38fd8fc061119cf38140631cf90c781aca4d3f0f0d2c834711952b728953f04fd7d238f59f5b
+  languageName: node
+  linkType: hard
+
+"promise-retry@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "promise-retry@npm:2.0.1"
+  dependencies:
+    err-code: "npm:^2.0.2"
+    retry: "npm:^0.12.0"
+  checksum: 10/96e1a82453c6c96eef53a37a1d6134c9f2482f94068f98a59145d0986ca4e497bf110a410adf73857e588165eab3899f0ebcf7b3890c1b3ce802abc0d65967d4
+  languageName: node
+  linkType: hard
+
+"prompts@npm:^2.0.1, prompts@npm:^2.4.0":
+  version: 2.4.2
+  resolution: "prompts@npm:2.4.2"
+  dependencies:
+    kleur: "npm:^3.0.3"
+    sisteransi: "npm:^1.0.5"
+  checksum: 10/c52536521a4d21eff4f2f2aa4572446cad227464066365a7167e52ccf8d9839c099f9afec1aba0eed3d5a2514b3e79e0b3e7a1dc326b9acde6b75d27ed74b1a9
+  languageName: node
+  linkType: hard
+
+"proxy-from-env@npm:1.0.0":
+  version: 1.0.0
+  resolution: "proxy-from-env@npm:1.0.0"
+  checksum: 10/f26b59c0f21dd118c23a0eb1f5250848a23b5029ec5c9f2b4011b6439b19fa83da50858d84e9261da94aa4e67778c1bac5483afce884b7770a96895a4e6b9a19
+  languageName: node
+  linkType: hard
+
+"psl@npm:^1.1.33":
+  version: 1.9.0
+  resolution: "psl@npm:1.9.0"
+  checksum: 10/d07879d4bfd0ac74796306a8e5a36a93cfb9c4f4e8ee8e63fbb909066c192fe1008cd8f12abd8ba2f62ca28247949a20c8fb32e1d18831d9e71285a1569720f9
+  languageName: node
+  linkType: hard
+
+"pump@npm:^3.0.0":
+  version: 3.0.2
+  resolution: "pump@npm:3.0.2"
+  dependencies:
+    end-of-stream: "npm:^1.1.0"
+    once: "npm:^1.3.1"
+  checksum: 10/e0c4216874b96bd25ddf31a0b61a5613e26cc7afa32379217cf39d3915b0509def3565f5f6968fafdad2894c8bbdbd67d340e84f3634b2a29b950cffb6442d9f
+  languageName: node
+  linkType: hard
+
+"punycode@npm:^2.1.0, punycode@npm:^2.1.1":
+  version: 2.3.1
+  resolution: "punycode@npm:2.3.1"
+  checksum: 10/febdc4362bead22f9e2608ff0171713230b57aff9dddc1c273aa2a651fbd366f94b7d6a71d78342a7c0819906750351ca7f2edd26ea41b626d87d6a13d1bd059
+  languageName: node
+  linkType: hard
+
+"pure-rand@npm:^6.0.0":
+  version: 6.1.0
+  resolution: "pure-rand@npm:6.1.0"
+  checksum: 10/256aa4bcaf9297256f552914e03cbdb0039c8fe1db11fa1e6d3f80790e16e563eb0a859a1e61082a95e224fc0c608661839439f8ecc6a3db4e48d46d99216ee4
+  languageName: node
+  linkType: hard
+
+"qs@npm:6.13.0":
+  version: 6.13.0
+  resolution: "qs@npm:6.13.0"
+  dependencies:
+    side-channel: "npm:^1.0.6"
+  checksum: 10/f548b376e685553d12e461409f0d6e5c59ec7c7d76f308e2a888fd9db3e0c5e89902bedd0754db3a9038eda5f27da2331a6f019c8517dc5e0a16b3c9a6e9cef8
+  languageName: node
+  linkType: hard
+
+"querystringify@npm:^2.1.1":
+  version: 2.2.0
+  resolution: "querystringify@npm:2.2.0"
+  checksum: 10/46ab16f252fd892fc29d6af60966d338cdfeea68a231e9457631ffd22d67cec1e00141e0a5236a2eb16c0d7d74175d9ec1d6f963660c6f2b1c2fc85b194c5680
+  languageName: node
+  linkType: hard
+
+"queue-microtask@npm:^1.2.2":
+  version: 1.2.3
+  resolution: "queue-microtask@npm:1.2.3"
+  checksum: 10/72900df0616e473e824202113c3df6abae59150dfb73ed13273503127235320e9c8ca4aaaaccfd58cf417c6ca92a6e68ee9a5c3182886ae949a768639b388a7b
+  languageName: node
+  linkType: hard
+
+"react-docgen-typescript@npm:^2.2.2":
+  version: 2.2.2
+  resolution: "react-docgen-typescript@npm:2.2.2"
+  peerDependencies:
+    typescript: ">= 4.3.x"
+  checksum: 10/081fc3a876f53b9eeffcff357e5b6c190db799d50edcf11b187857d8cb8cce28000ed777ed16dd52a1c955f332612ef6b1f02cf8adcbcb084b8da9ff1ae5fd13
+  languageName: node
+  linkType: hard
+
+"react-docgen@npm:^7.0.0":
+  version: 7.1.0
+  resolution: "react-docgen@npm:7.1.0"
+  dependencies:
+    "@babel/core": "npm:^7.18.9"
+    "@babel/traverse": "npm:^7.18.9"
+    "@babel/types": "npm:^7.18.9"
+    "@types/babel__core": "npm:^7.18.0"
+    "@types/babel__traverse": "npm:^7.18.0"
+    "@types/doctrine": "npm:^0.0.9"
+    "@types/resolve": "npm:^1.20.2"
+    doctrine: "npm:^3.0.0"
+    resolve: "npm:^1.22.1"
+    strip-indent: "npm:^4.0.0"
+  checksum: 10/ce1f6e4394375307ecf268ef0b3e41fd75a6b050e70053c6e64b72f108d7606a4b8de6c0f1dab2759bc80864db01be38a9245e2d71024d2ed3d3e0179bd02140
+  languageName: node
+  linkType: hard
+
+"react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react-dom@npm:^18.2.0":
+  version: 18.3.1
+  resolution: "react-dom@npm:18.3.1"
+  dependencies:
+    loose-envify: "npm:^1.1.0"
+    scheduler: "npm:^0.23.2"
+  peerDependencies:
+    react: ^18.3.1
+  checksum: 10/3f4b73a3aa083091173b29812b10394dd06f4ac06aff410b74702cfb3aa29d7b0ced208aab92d5272919b612e5cda21aeb1d54191848cf6e46e9e354f3541f81
+  languageName: node
+  linkType: hard
+
+"react-is@npm:^17.0.1":
+  version: 17.0.2
+  resolution: "react-is@npm:17.0.2"
+  checksum: 10/73b36281e58eeb27c9cc6031301b6ae19ecdc9f18ae2d518bdb39b0ac564e65c5779405d623f1df9abf378a13858b79442480244bd579968afc1faf9a2ce5e05
+  languageName: node
+  linkType: hard
+
+"react-is@npm:^18.0.0":
+  version: 18.3.1
+  resolution: "react-is@npm:18.3.1"
+  checksum: 10/d5f60c87d285af24b1e1e7eaeb123ec256c3c8bdea7061ab3932e3e14685708221bf234ec50b21e10dd07f008f1b966a2730a0ce4ff67905b3872ff2042aec22
+  languageName: node
+  linkType: hard
+
+"react-refresh@npm:^0.14.2":
+  version: 0.14.2
+  resolution: "react-refresh@npm:0.14.2"
+  checksum: 10/512abf97271ab8623486061be04b608c39d932e3709f9af1720b41573415fa4993d0009fa5138b6705b60a98f4102f744d4e26c952b14f41a0e455521c6be4cc
+  languageName: node
+  linkType: hard
+
+"react@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react@npm:^18.2.0":
+  version: 18.3.1
+  resolution: "react@npm:18.3.1"
+  dependencies:
+    loose-envify: "npm:^1.1.0"
+  checksum: 10/261137d3f3993eaa2368a83110466fc0e558bc2c7f7ae7ca52d94f03aac945f45146bd85e5f481044db1758a1dbb57879e2fcdd33924e2dde1bdc550ce73f7bf
+  languageName: node
+  linkType: hard
+
+"recast@npm:^0.23.5":
+  version: 0.23.9
+  resolution: "recast@npm:0.23.9"
+  dependencies:
+    ast-types: "npm:^0.16.1"
+    esprima: "npm:~4.0.0"
+    source-map: "npm:~0.6.1"
+    tiny-invariant: "npm:^1.3.3"
+    tslib: "npm:^2.0.1"
+  checksum: 10/d60584be179d81a82fbe58b5bbe009aa42831ee114a21a3e3a22bda91334e0b8a1a4610dca8ecb7f9ea1426da4febc08134d3003085ad6ecee478d1808eb8796
+  languageName: node
+  linkType: hard
+
+"redent@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "redent@npm:3.0.0"
+  dependencies:
+    indent-string: "npm:^4.0.0"
+    strip-indent: "npm:^3.0.0"
+  checksum: 10/fa1ef20404a2d399235e83cc80bd55a956642e37dd197b4b612ba7327bf87fa32745aeb4a1634b2bab25467164ab4ed9c15be2c307923dd08b0fe7c52431ae6b
+  languageName: node
+  linkType: hard
+
+"regenerator-runtime@npm:^0.14.0":
+  version: 0.14.1
+  resolution: "regenerator-runtime@npm:0.14.1"
+  checksum: 10/5db3161abb311eef8c45bcf6565f4f378f785900ed3945acf740a9888c792f75b98ecb77f0775f3bf95502ff423529d23e94f41d80c8256e8fa05ed4b07cf471
+  languageName: node
+  linkType: hard
+
+"regexp.prototype.flags@npm:^1.5.1":
+  version: 1.5.3
+  resolution: "regexp.prototype.flags@npm:1.5.3"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+    define-properties: "npm:^1.2.1"
+    es-errors: "npm:^1.3.0"
+    set-function-name: "npm:^2.0.2"
+  checksum: 10/fe17bc4eebbc72945aaf9dd059eb7784a5ca453a67cc4b5b3e399ab08452c9a05befd92063e2c52e7b24d9238c60031656af32dd57c555d1ba6330dbf8c23b43
+  languageName: node
+  linkType: hard
+
+"request-progress@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "request-progress@npm:3.0.0"
+  dependencies:
+    throttleit: "npm:^1.0.0"
+  checksum: 10/c25b1c75fb0a0c3b38874abd7ebd58e320c55bc17a48e76772b26828d9e0f688741e144d31b678af9cf447cba32ae153efad05f8a2db225eb07135a613d3162b
+  languageName: node
+  linkType: hard
+
+"require-directory@npm:^2.1.1":
+  version: 2.1.1
+  resolution: "require-directory@npm:2.1.1"
+  checksum: 10/a72468e2589270d91f06c7d36ec97a88db53ae5d6fe3787fadc943f0b0276b10347f89b363b2a82285f650bdcc135ad4a257c61bdd4d00d6df1fa24875b0ddaf
+  languageName: node
+  linkType: hard
+
+"requireindex@npm:^1.1.0":
+  version: 1.2.0
+  resolution: "requireindex@npm:1.2.0"
+  checksum: 10/266d1cb31f6cbc4b6cf2e898f5bbc45581f7919bcf61bba5c45d0adb69b722b9ff5a13727be3350cde4520d7cd37f39df45d58a29854baaa4552cd6b05ae4a1a
+  languageName: node
+  linkType: hard
+
+"requires-port@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "requires-port@npm:1.0.0"
+  checksum: 10/878880ee78ccdce372784f62f52a272048e2d0827c29ae31e7f99da18b62a2b9463ea03a75f277352f4697c100183debb0532371ad515a2d49d4bfe596dd4c20
+  languageName: node
+  linkType: hard
+
+"resolve-cwd@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "resolve-cwd@npm:3.0.0"
+  dependencies:
+    resolve-from: "npm:^5.0.0"
+  checksum: 10/546e0816012d65778e580ad62b29e975a642989108d9a3c5beabfb2304192fa3c9f9146fbdfe213563c6ff51975ae41bac1d3c6e047dd9572c94863a057b4d81
+  languageName: node
+  linkType: hard
+
+"resolve-from@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "resolve-from@npm:4.0.0"
+  checksum: 10/91eb76ce83621eea7bbdd9b55121a5c1c4a39e54a9ce04a9ad4517f102f8b5131c2cf07622c738a6683991bf54f2ce178f5a42803ecbd527ddc5105f362cc9e3
+  languageName: node
+  linkType: hard
+
+"resolve-from@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "resolve-from@npm:5.0.0"
+  checksum: 10/be18a5e4d76dd711778664829841cde690971d02b6cbae277735a09c1c28f407b99ef6ef3cd585a1e6546d4097b28df40ed32c4a287b9699dcf6d7f208495e23
+  languageName: node
+  linkType: hard
+
+"resolve.exports@npm:^2.0.0":
+  version: 2.0.2
+  resolution: "resolve.exports@npm:2.0.2"
+  checksum: 10/f1cc0b6680f9a7e0345d783e0547f2a5110d8336b3c2a4227231dd007271ffd331fd722df934f017af90bae0373920ca0d4005da6f76cb3176c8ae426370f893
+  languageName: node
+  linkType: hard
+
+"resolve@npm:^1.20.0, resolve@npm:^1.22.1, resolve@npm:^1.22.8":
+  version: 1.22.8
+  resolution: "resolve@npm:1.22.8"
+  dependencies:
+    is-core-module: "npm:^2.13.0"
+    path-parse: "npm:^1.0.7"
+    supports-preserve-symlinks-flag: "npm:^1.0.0"
+  bin:
+    resolve: bin/resolve
+  checksum: 10/c473506ee01eb45cbcfefb68652ae5759e092e6b0fb64547feadf9736a6394f258fbc6f88e00c5ca36d5477fbb65388b272432a3600fa223062e54333c156753
+  languageName: node
+  linkType: hard
+
+"resolve@patch:resolve@npm%3A^1.20.0#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.1#optional!builtin<compat/resolve>, resolve@patch:resolve@npm%3A^1.22.8#optional!builtin<compat/resolve>":
+  version: 1.22.8
+  resolution: "resolve@patch:resolve@npm%3A1.22.8#optional!builtin<compat/resolve>::version=1.22.8&hash=c3c19d"
+  dependencies:
+    is-core-module: "npm:^2.13.0"
+    path-parse: "npm:^1.0.7"
+    supports-preserve-symlinks-flag: "npm:^1.0.0"
+  bin:
+    resolve: bin/resolve
+  checksum: 10/f345cd37f56a2c0275e3fe062517c650bb673815d885e7507566df589375d165bbbf4bdb6aa95600a9bc55f4744b81f452b5a63f95b9f10a72787dba3c90890a
+  languageName: node
+  linkType: hard
+
+"restore-cursor@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "restore-cursor@npm:3.1.0"
+  dependencies:
+    onetime: "npm:^5.1.0"
+    signal-exit: "npm:^3.0.2"
+  checksum: 10/f877dd8741796b909f2a82454ec111afb84eb45890eb49ac947d87991379406b3b83ff9673a46012fca0d7844bb989f45cc5b788254cf1a39b6b5a9659de0630
+  languageName: node
+  linkType: hard
+
+"retry@npm:^0.12.0":
+  version: 0.12.0
+  resolution: "retry@npm:0.12.0"
+  checksum: 10/1f914879f97e7ee931ad05fe3afa629bd55270fc6cf1c1e589b6a99fab96d15daad0fa1a52a00c729ec0078045fe3e399bd4fd0c93bcc906957bdc17f89cb8e6
+  languageName: node
+  linkType: hard
+
+"reusify@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "reusify@npm:1.0.4"
+  checksum: 10/14222c9e1d3f9ae01480c50d96057228a8524706db79cdeb5a2ce5bb7070dd9f409a6f84a02cbef8cdc80d39aef86f2dd03d155188a1300c599b05437dcd2ffb
+  languageName: node
+  linkType: hard
+
+"rfdc@npm:^1.3.0":
+  version: 1.4.1
+  resolution: "rfdc@npm:1.4.1"
+  checksum: 10/2f3d11d3d8929b4bfeefc9acb03aae90f971401de0add5ae6c5e38fec14f0405e6a4aad8fdb76344bfdd20c5193110e3750cbbd28ba86d73729d222b6cf4a729
+  languageName: node
+  linkType: hard
+
+"rimraf@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "rimraf@npm:3.0.2"
+  dependencies:
+    glob: "npm:^7.1.3"
+  bin:
+    rimraf: bin.js
+  checksum: 10/063ffaccaaaca2cfd0ef3beafb12d6a03dd7ff1260d752d62a6077b5dfff6ae81bea571f655bb6b589d366930ec1bdd285d40d560c0dae9b12f125e54eb743d5
+  languageName: node
+  linkType: hard
+
+"rollup@npm:^4.20.0":
+  version: 4.24.0
+  resolution: "rollup@npm:4.24.0"
+  dependencies:
+    "@rollup/rollup-android-arm-eabi": "npm:4.24.0"
+    "@rollup/rollup-android-arm64": "npm:4.24.0"
+    "@rollup/rollup-darwin-arm64": "npm:4.24.0"
+    "@rollup/rollup-darwin-x64": "npm:4.24.0"
+    "@rollup/rollup-linux-arm-gnueabihf": "npm:4.24.0"
+    "@rollup/rollup-linux-arm-musleabihf": "npm:4.24.0"
+    "@rollup/rollup-linux-arm64-gnu": "npm:4.24.0"
+    "@rollup/rollup-linux-arm64-musl": "npm:4.24.0"
+    "@rollup/rollup-linux-powerpc64le-gnu": "npm:4.24.0"
+    "@rollup/rollup-linux-riscv64-gnu": "npm:4.24.0"
+    "@rollup/rollup-linux-s390x-gnu": "npm:4.24.0"
+    "@rollup/rollup-linux-x64-gnu": "npm:4.24.0"
+    "@rollup/rollup-linux-x64-musl": "npm:4.24.0"
+    "@rollup/rollup-win32-arm64-msvc": "npm:4.24.0"
+    "@rollup/rollup-win32-ia32-msvc": "npm:4.24.0"
+    "@rollup/rollup-win32-x64-msvc": "npm:4.24.0"
+    "@types/estree": "npm:1.0.6"
+    fsevents: "npm:~2.3.2"
+  dependenciesMeta:
+    "@rollup/rollup-android-arm-eabi":
+      optional: true
+    "@rollup/rollup-android-arm64":
+      optional: true
+    "@rollup/rollup-darwin-arm64":
+      optional: true
+    "@rollup/rollup-darwin-x64":
+      optional: true
+    "@rollup/rollup-linux-arm-gnueabihf":
+      optional: true
+    "@rollup/rollup-linux-arm-musleabihf":
+      optional: true
+    "@rollup/rollup-linux-arm64-gnu":
+      optional: true
+    "@rollup/rollup-linux-arm64-musl":
+      optional: true
+    "@rollup/rollup-linux-powerpc64le-gnu":
+      optional: true
+    "@rollup/rollup-linux-riscv64-gnu":
+      optional: true
+    "@rollup/rollup-linux-s390x-gnu":
+      optional: true
+    "@rollup/rollup-linux-x64-gnu":
+      optional: true
+    "@rollup/rollup-linux-x64-musl":
+      optional: true
+    "@rollup/rollup-win32-arm64-msvc":
+      optional: true
+    "@rollup/rollup-win32-ia32-msvc":
+      optional: true
+    "@rollup/rollup-win32-x64-msvc":
+      optional: true
+    fsevents:
+      optional: true
+  bin:
+    rollup: dist/bin/rollup
+  checksum: 10/291dce8f180628a73d6749119a3e50aa917c416075302bc6f6ac655affc7f0ce9d7f025bef7318d424d0c5623dcb83e360f9ea0125273b6a2285c232172800cc
+  languageName: node
+  linkType: hard
+
+"run-parallel@npm:^1.1.9":
+  version: 1.2.0
+  resolution: "run-parallel@npm:1.2.0"
+  dependencies:
+    queue-microtask: "npm:^1.2.2"
+  checksum: 10/cb4f97ad25a75ebc11a8ef4e33bb962f8af8516bb2001082ceabd8902e15b98f4b84b4f8a9b222e5d57fc3bd1379c483886ed4619367a7680dad65316993021d
+  languageName: node
+  linkType: hard
+
+"rxjs@npm:^7.5.1":
+  version: 7.8.1
+  resolution: "rxjs@npm:7.8.1"
+  dependencies:
+    tslib: "npm:^2.1.0"
+  checksum: 10/b10cac1a5258f885e9dd1b70d23c34daeb21b61222ee735d2ec40a8685bdca40429000703a44f0e638c27a684ac139e1c37e835d2a0dc16f6fc061a138ae3abb
+  languageName: node
+  linkType: hard
+
+"safe-buffer@npm:^5.0.1, safe-buffer@npm:^5.1.2":
+  version: 5.2.1
+  resolution: "safe-buffer@npm:5.2.1"
+  checksum: 10/32872cd0ff68a3ddade7a7617b8f4c2ae8764d8b7d884c651b74457967a9e0e886267d3ecc781220629c44a865167b61c375d2da6c720c840ecd73f45d5d9451
+  languageName: node
+  linkType: hard
+
+"safer-buffer@npm:>= 2.1.2 < 3.0.0, safer-buffer@npm:^2.0.2, safer-buffer@npm:^2.1.0, safer-buffer@npm:~2.1.0":
+  version: 2.1.2
+  resolution: "safer-buffer@npm:2.1.2"
+  checksum: 10/7eaf7a0cf37cc27b42fb3ef6a9b1df6e93a1c6d98c6c6702b02fe262d5fcbd89db63320793b99b21cb5348097d0a53de81bd5f4e8b86e20cc9412e3f1cfb4e83
+  languageName: node
+  linkType: hard
+
+"saxes@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "saxes@npm:6.0.0"
+  dependencies:
+    xmlchars: "npm:^2.2.0"
+  checksum: 10/97b50daf6ca3a153e89842efa18a862e446248296622b7473c169c84c823ee8a16e4a43bac2f73f11fc8cb9168c73fbb0d73340f26552bac17970e9052367aa9
+  languageName: node
+  linkType: hard
+
+"scheduler@npm:^0.23.2":
+  version: 0.23.2
+  resolution: "scheduler@npm:0.23.2"
+  dependencies:
+    loose-envify: "npm:^1.1.0"
+  checksum: 10/e8d68b89d18d5b028223edf090092846868a765a591944760942b77ea1f69b17235f7e956696efbb62c8130ab90af7e0949bfb8eba7896335507317236966bc9
+  languageName: node
+  linkType: hard
+
+"semver@npm:^6.3.0, semver@npm:^6.3.1":
+  version: 6.3.1
+  resolution: "semver@npm:6.3.1"
+  bin:
+    semver: bin/semver.js
+  checksum: 10/1ef3a85bd02a760c6ef76a45b8c1ce18226de40831e02a00bad78485390b98b6ccaa31046245fc63bba4a47a6a592b6c7eedc65cc47126e60489f9cc1ce3ed7e
+  languageName: node
+  linkType: hard
+
+"semver@npm:^7.3.5, semver@npm:^7.3.7, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.2":
+  version: 7.6.3
+  resolution: "semver@npm:7.6.3"
+  bin:
+    semver: bin/semver.js
+  checksum: 10/36b1fbe1a2b6f873559cd57b238f1094a053dbfd997ceeb8757d79d1d2089c56d1321b9f1069ce263dc64cfa922fa1d2ad566b39426fe1ac6c723c1487589e10
+  languageName: node
+  linkType: hard
+
+"set-function-length@npm:^1.2.1":
+  version: 1.2.2
+  resolution: "set-function-length@npm:1.2.2"
+  dependencies:
+    define-data-property: "npm:^1.1.4"
+    es-errors: "npm:^1.3.0"
+    function-bind: "npm:^1.1.2"
+    get-intrinsic: "npm:^1.2.4"
+    gopd: "npm:^1.0.1"
+    has-property-descriptors: "npm:^1.0.2"
+  checksum: 10/505d62b8e088468917ca4e3f8f39d0e29f9a563b97dbebf92f4bd2c3172ccfb3c5b8e4566d5fcd00784a00433900e7cb8fbc404e2dbd8c3818ba05bb9d4a8a6d
+  languageName: node
+  linkType: hard
+
+"set-function-name@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "set-function-name@npm:2.0.2"
+  dependencies:
+    define-data-property: "npm:^1.1.4"
+    es-errors: "npm:^1.3.0"
+    functions-have-names: "npm:^1.2.3"
+    has-property-descriptors: "npm:^1.0.2"
+  checksum: 10/c7614154a53ebf8c0428a6c40a3b0b47dac30587c1a19703d1b75f003803f73cdfa6a93474a9ba678fa565ef5fbddc2fae79bca03b7d22ab5fd5163dbe571a74
+  languageName: node
+  linkType: hard
+
+"shebang-command@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "shebang-command@npm:2.0.0"
+  dependencies:
+    shebang-regex: "npm:^3.0.0"
+  checksum: 10/6b52fe87271c12968f6a054e60f6bde5f0f3d2db483a1e5c3e12d657c488a15474121a1d55cd958f6df026a54374ec38a4a963988c213b7570e1d51575cea7fa
+  languageName: node
+  linkType: hard
+
+"shebang-regex@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "shebang-regex@npm:3.0.0"
+  checksum: 10/1a2bcae50de99034fcd92ad4212d8e01eedf52c7ec7830eedcf886622804fe36884278f2be8be0ea5fde3fd1c23911643a4e0f726c8685b61871c8908af01222
+  languageName: node
+  linkType: hard
+
+"side-channel@npm:^1.0.4, side-channel@npm:^1.0.6":
+  version: 1.0.6
+  resolution: "side-channel@npm:1.0.6"
+  dependencies:
+    call-bind: "npm:^1.0.7"
+    es-errors: "npm:^1.3.0"
+    get-intrinsic: "npm:^1.2.4"
+    object-inspect: "npm:^1.13.1"
+  checksum: 10/eb10944f38cebad8ad643dd02657592fa41273ce15b8bfa928d3291aff2d30c20ff777cfe908f76ccc4551ace2d1245822fdc576657cce40e9066c638ca8fa4d
+  languageName: node
+  linkType: hard
+
+"siginfo@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "siginfo@npm:2.0.0"
+  checksum: 10/e93ff66c6531a079af8fb217240df01f980155b5dc408d2d7bebc398dd284e383eb318153bf8acd4db3c4fe799aa5b9a641e38b0ba3b1975700b1c89547ea4e7
+  languageName: node
+  linkType: hard
+
+"signal-exit@npm:^3.0.2, signal-exit@npm:^3.0.3, signal-exit@npm:^3.0.7":
+  version: 3.0.7
+  resolution: "signal-exit@npm:3.0.7"
+  checksum: 10/a2f098f247adc367dffc27845853e9959b9e88b01cb301658cfe4194352d8d2bb32e18467c786a7fe15f1d44b233ea35633d076d5e737870b7139949d1ab6318
+  languageName: node
+  linkType: hard
+
+"signal-exit@npm:^4.0.1, signal-exit@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "signal-exit@npm:4.1.0"
+  checksum: 10/c9fa63bbbd7431066174a48ba2dd9986dfd930c3a8b59de9c29d7b6854ec1c12a80d15310869ea5166d413b99f041bfa3dd80a7947bcd44ea8e6eb3ffeabfa1f
+  languageName: node
+  linkType: hard
+
+"sirv@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "sirv@npm:3.0.0"
+  dependencies:
+    "@polka/url": "npm:^1.0.0-next.24"
+    mrmime: "npm:^2.0.0"
+    totalist: "npm:^3.0.0"
+  checksum: 10/94dbd5df7cf4965f7c5941767117cbf9709e1d25de1d619a114c3f77fc63c124b5a5255717af2a0de637bb83d0b0defd0822d01420764b56432b53281b1d675d
+  languageName: node
+  linkType: hard
+
+"sisteransi@npm:^1.0.5":
+  version: 1.0.5
+  resolution: "sisteransi@npm:1.0.5"
+  checksum: 10/aba6438f46d2bfcef94cf112c835ab395172c75f67453fe05c340c770d3c402363018ae1ab4172a1026a90c47eaccf3af7b6ff6fa749a680c2929bd7fa2b37a4
+  languageName: node
+  linkType: hard
+
+"slash@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "slash@npm:3.0.0"
+  checksum: 10/94a93fff615f25a999ad4b83c9d5e257a7280c90a32a7cb8b4a87996e4babf322e469c42b7f649fd5796edd8687652f3fb452a86dc97a816f01113183393f11c
+  languageName: node
+  linkType: hard
+
+"slice-ansi@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "slice-ansi@npm:3.0.0"
+  dependencies:
+    ansi-styles: "npm:^4.0.0"
+    astral-regex: "npm:^2.0.0"
+    is-fullwidth-code-point: "npm:^3.0.0"
+  checksum: 10/5ec6d022d12e016347e9e3e98a7eb2a592213a43a65f1b61b74d2c78288da0aded781f665807a9f3876b9daa9ad94f64f77d7633a0458876c3a4fdc4eb223f24
+  languageName: node
+  linkType: hard
+
+"slice-ansi@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "slice-ansi@npm:4.0.0"
+  dependencies:
+    ansi-styles: "npm:^4.0.0"
+    astral-regex: "npm:^2.0.0"
+    is-fullwidth-code-point: "npm:^3.0.0"
+  checksum: 10/4a82d7f085b0e1b070e004941ada3c40d3818563ac44766cca4ceadd2080427d337554f9f99a13aaeb3b4a94d9964d9466c807b3d7b7541d1ec37ee32d308756
+  languageName: node
+  linkType: hard
+
+"smart-buffer@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "smart-buffer@npm:4.2.0"
+  checksum: 10/927484aa0b1640fd9473cee3e0a0bcad6fce93fd7bbc18bac9ad0c33686f5d2e2c422fba24b5899c184524af01e11dd2bd051c2bf2b07e47aff8ca72cbfc60d2
+  languageName: node
+  linkType: hard
+
+"socks-proxy-agent@npm:^8.0.3":
+  version: 8.0.4
+  resolution: "socks-proxy-agent@npm:8.0.4"
+  dependencies:
+    agent-base: "npm:^7.1.1"
+    debug: "npm:^4.3.4"
+    socks: "npm:^2.8.3"
+  checksum: 10/c8e7c2b398338b49a0a0f4d2bae5c0602aeeca6b478b99415927b6c5db349ca258448f2c87c6958ebf83eea17d42cbc5d1af0bfecb276cac10b9658b0f07f7d7
+  languageName: node
+  linkType: hard
+
+"socks@npm:^2.8.3":
+  version: 2.8.3
+  resolution: "socks@npm:2.8.3"
+  dependencies:
+    ip-address: "npm:^9.0.5"
+    smart-buffer: "npm:^4.2.0"
+  checksum: 10/ffcb622c22481dfcd7589aae71fbfd71ca34334064d181df64bf8b7feaeee19706aba4cffd1de35cc7bbaeeaa0af96be2d7f40fcbc7bc0ab69533a7ae9ffc4fb
+  languageName: node
+  linkType: hard
+
+"source-map-js@npm:^1.2.0, source-map-js@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "source-map-js@npm:1.2.1"
+  checksum: 10/ff9d8c8bf096d534a5b7707e0382ef827b4dd360a577d3f34d2b9f48e12c9d230b5747974ee7c607f0df65113732711bb701fe9ece3c7edbd43cb2294d707df3
+  languageName: node
+  linkType: hard
+
+"source-map-support@npm:0.5.13":
+  version: 0.5.13
+  resolution: "source-map-support@npm:0.5.13"
+  dependencies:
+    buffer-from: "npm:^1.0.0"
+    source-map: "npm:^0.6.0"
+  checksum: 10/d1514a922ac9c7e4786037eeff6c3322f461cd25da34bb9fefb15387b3490531774e6e31d95ab6d5b84a3e139af9c3a570ccaee6b47bd7ea262691ed3a8bc34e
+  languageName: node
+  linkType: hard
+
+"source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.1":
+  version: 0.6.1
+  resolution: "source-map@npm:0.6.1"
+  checksum: 10/59ef7462f1c29d502b3057e822cdbdae0b0e565302c4dd1a95e11e793d8d9d62006cdc10e0fd99163ca33ff2071360cf50ee13f90440806e7ed57d81cba2f7ff
+  languageName: node
+  linkType: hard
+
+"sprintf-js@npm:^1.1.3":
+  version: 1.1.3
+  resolution: "sprintf-js@npm:1.1.3"
+  checksum: 10/e7587128c423f7e43cc625fe2f87e6affdf5ca51c1cc468e910d8aaca46bb44a7fbcfa552f787b1d3987f7043aeb4527d1b99559e6621e01b42b3f45e5a24cbb
+  languageName: node
+  linkType: hard
+
+"sprintf-js@npm:~1.0.2":
+  version: 1.0.3
+  resolution: "sprintf-js@npm:1.0.3"
+  checksum: 10/c34828732ab8509c2741e5fd1af6b767c3daf2c642f267788f933a65b1614943c282e74c4284f4fa749c264b18ee016a0d37a3e5b73aee446da46277d3a85daa
+  languageName: node
+  linkType: hard
+
+"sshpk@npm:^1.18.0":
+  version: 1.18.0
+  resolution: "sshpk@npm:1.18.0"
+  dependencies:
+    asn1: "npm:~0.2.3"
+    assert-plus: "npm:^1.0.0"
+    bcrypt-pbkdf: "npm:^1.0.0"
+    dashdash: "npm:^1.12.0"
+    ecc-jsbn: "npm:~0.1.1"
+    getpass: "npm:^0.1.1"
+    jsbn: "npm:~0.1.0"
+    safer-buffer: "npm:^2.0.2"
+    tweetnacl: "npm:~0.14.0"
+  bin:
+    sshpk-conv: bin/sshpk-conv
+    sshpk-sign: bin/sshpk-sign
+    sshpk-verify: bin/sshpk-verify
+  checksum: 10/858339d43e3c6b6a848772a66f69442ce74f1a37655d9f35ba9d1f85329499ff0000af9f8ab83dbb39ad24c0c370edabe0be1e39863f70c6cded9924b8458c34
+  languageName: node
+  linkType: hard
+
+"ssri@npm:^10.0.0":
+  version: 10.0.6
+  resolution: "ssri@npm:10.0.6"
+  dependencies:
+    minipass: "npm:^7.0.3"
+  checksum: 10/f92c1b3cc9bfd0a925417412d07d999935917bc87049f43ebec41074661d64cf720315661844106a77da9f8204b6d55ae29f9514e673083cae39464343af2a8b
+  languageName: node
+  linkType: hard
+
+"stack-utils@npm:^2.0.3":
+  version: 2.0.6
+  resolution: "stack-utils@npm:2.0.6"
+  dependencies:
+    escape-string-regexp: "npm:^2.0.0"
+  checksum: 10/cdc988acbc99075b4b036ac6014e5f1e9afa7e564482b687da6384eee6a1909d7eaffde85b0a17ffbe186c5247faf6c2b7544e802109f63b72c7be69b13151bb
+  languageName: node
+  linkType: hard
+
+"stackback@npm:0.0.2":
+  version: 0.0.2
+  resolution: "stackback@npm:0.0.2"
+  checksum: 10/2d4dc4e64e2db796de4a3c856d5943daccdfa3dd092e452a1ce059c81e9a9c29e0b9badba91b43ef0d5ff5c04ee62feb3bcc559a804e16faf447bac2d883aa99
+  languageName: node
+  linkType: hard
+
+"statuses@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "statuses@npm:2.0.1"
+  checksum: 10/18c7623fdb8f646fb213ca4051be4df7efb3484d4ab662937ca6fbef7ced9b9e12842709872eb3020cc3504b93bde88935c9f6417489627a7786f24f8031cbcb
+  languageName: node
+  linkType: hard
+
+"std-env@npm:^3.8.0":
+  version: 3.8.0
+  resolution: "std-env@npm:3.8.0"
+  checksum: 10/034176196cfcaaab16dbdd96fc9e925a9544799fb6dc5a3e36fe43270f3a287c7f779d785b89edaf22cef2b5f1dcada2aae67430b8602e785ee74bdb3f671768
+  languageName: node
+  linkType: hard
+
+"stop-iteration-iterator@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "stop-iteration-iterator@npm:1.0.0"
+  dependencies:
+    internal-slot: "npm:^1.0.4"
+  checksum: 10/2a23a36f4f6bfa63f46ae2d53a3f80fe8276110b95a55345d8ed3d92125413494033bc8697eb774e8f7aeb5725f70e3d69753caa2ecacdac6258c16fa8aa8b0f
+  languageName: node
+  linkType: hard
+
+"storybook@portal:../../../code/lib/cli::locator=portable-stories-react%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "storybook@portal:../../../code/lib/cli::locator=portable-stories-react%40workspace%3A."
+  dependencies:
+    "@storybook/core": "workspace:*"
+  peerDependencies:
+    prettier: ^2 || ^3
+  peerDependenciesMeta:
+    prettier:
+      optional: true
+  bin:
+    getstorybook: ./bin/index.cjs
+    sb: ./bin/index.cjs
+    storybook: ./bin/index.cjs
+  languageName: node
+  linkType: soft
+
+"strict-event-emitter@npm:^0.5.1":
+  version: 0.5.1
+  resolution: "strict-event-emitter@npm:0.5.1"
+  checksum: 10/25c84d88be85940d3547db665b871bfecea4ea0bedfeb22aae8db48126820cfb2b0bc2fba695392592a09b1aa36b686d6eede499e1ecd151593c03fe5a50d512
+  languageName: node
+  linkType: hard
+
+"string-length@npm:^4.0.1":
+  version: 4.0.2
+  resolution: "string-length@npm:4.0.2"
+  dependencies:
+    char-regex: "npm:^1.0.2"
+    strip-ansi: "npm:^6.0.0"
+  checksum: 10/ce85533ef5113fcb7e522bcf9e62cb33871aa99b3729cec5595f4447f660b0cefd542ca6df4150c97a677d58b0cb727a3fe09ac1de94071d05526c73579bf505
+  languageName: node
+  linkType: hard
+
+"string-width-cjs@npm:string-width@^4.2.0, string-width@npm:^4.1.0, string-width@npm:^4.2.0, string-width@npm:^4.2.3":
+  version: 4.2.3
+  resolution: "string-width@npm:4.2.3"
+  dependencies:
+    emoji-regex: "npm:^8.0.0"
+    is-fullwidth-code-point: "npm:^3.0.0"
+    strip-ansi: "npm:^6.0.1"
+  checksum: 10/e52c10dc3fbfcd6c3a15f159f54a90024241d0f149cf8aed2982a2d801d2e64df0bf1dc351cf8e95c3319323f9f220c16e740b06faecd53e2462df1d2b5443fb
+  languageName: node
+  linkType: hard
+
+"string-width@npm:^5.0.1, string-width@npm:^5.1.2":
+  version: 5.1.2
+  resolution: "string-width@npm:5.1.2"
+  dependencies:
+    eastasianwidth: "npm:^0.2.0"
+    emoji-regex: "npm:^9.2.2"
+    strip-ansi: "npm:^7.0.1"
+  checksum: 10/7369deaa29f21dda9a438686154b62c2c5f661f8dda60449088f9f980196f7908fc39fdd1803e3e01541970287cf5deae336798337e9319a7055af89dafa7193
+  languageName: node
+  linkType: hard
+
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1, strip-ansi@npm:^6.0.0, strip-ansi@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "strip-ansi@npm:6.0.1"
+  dependencies:
+    ansi-regex: "npm:^5.0.1"
+  checksum: 10/ae3b5436d34fadeb6096367626ce987057713c566e1e7768818797e00ac5d62023d0f198c4e681eae9e20701721980b26a64a8f5b91238869592a9c6800719a2
+  languageName: node
+  linkType: hard
+
+"strip-ansi@npm:^7.0.1":
+  version: 7.1.0
+  resolution: "strip-ansi@npm:7.1.0"
+  dependencies:
+    ansi-regex: "npm:^6.0.1"
+  checksum: 10/475f53e9c44375d6e72807284024ac5d668ee1d06010740dec0b9744f2ddf47de8d7151f80e5f6190fc8f384e802fdf9504b76a7e9020c9faee7103623338be2
+  languageName: node
+  linkType: hard
+
+"strip-bom@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "strip-bom@npm:3.0.0"
+  checksum: 10/8d50ff27b7ebe5ecc78f1fe1e00fcdff7af014e73cf724b46fb81ef889eeb1015fc5184b64e81a2efe002180f3ba431bdd77e300da5c6685d702780fbf0c8d5b
+  languageName: node
+  linkType: hard
+
+"strip-bom@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "strip-bom@npm:4.0.0"
+  checksum: 10/9dbcfbaf503c57c06af15fe2c8176fb1bf3af5ff65003851a102749f875a6dbe0ab3b30115eccf6e805e9d756830d3e40ec508b62b3f1ddf3761a20ebe29d3f3
+  languageName: node
+  linkType: hard
+
+"strip-final-newline@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "strip-final-newline@npm:2.0.0"
+  checksum: 10/69412b5e25731e1938184b5d489c32e340605bb611d6140344abc3421b7f3c6f9984b21dff296dfcf056681b82caa3bb4cc996a965ce37bcfad663e92eae9c64
+  languageName: node
+  linkType: hard
+
+"strip-indent@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "strip-indent@npm:3.0.0"
+  dependencies:
+    min-indent: "npm:^1.0.0"
+  checksum: 10/18f045d57d9d0d90cd16f72b2313d6364fd2cb4bf85b9f593523ad431c8720011a4d5f08b6591c9d580f446e78855c5334a30fb91aa1560f5d9f95ed1b4a0530
+  languageName: node
+  linkType: hard
+
+"strip-indent@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "strip-indent@npm:4.0.0"
+  dependencies:
+    min-indent: "npm:^1.0.1"
+  checksum: 10/06cbcd93da721c46bc13caeb1c00af93a9b18146a1c95927672d2decab6a25ad83662772417cea9317a2507fb143253ecc23c4415b64f5828cef9b638a744598
+  languageName: node
+  linkType: hard
+
+"strip-json-comments@npm:^3.1.1":
+  version: 3.1.1
+  resolution: "strip-json-comments@npm:3.1.1"
+  checksum: 10/492f73e27268f9b1c122733f28ecb0e7e8d8a531a6662efbd08e22cccb3f9475e90a1b82cab06a392f6afae6d2de636f977e231296400d0ec5304ba70f166443
+  languageName: node
+  linkType: hard
+
+"supports-color@npm:^5.3.0":
+  version: 5.5.0
+  resolution: "supports-color@npm:5.5.0"
+  dependencies:
+    has-flag: "npm:^3.0.0"
+  checksum: 10/5f505c6fa3c6e05873b43af096ddeb22159831597649881aeb8572d6fe3b81e798cc10840d0c9735e0026b250368851b7f77b65e84f4e4daa820a4f69947f55b
+  languageName: node
+  linkType: hard
+
+"supports-color@npm:^7.1.0":
+  version: 7.2.0
+  resolution: "supports-color@npm:7.2.0"
+  dependencies:
+    has-flag: "npm:^4.0.0"
+  checksum: 10/c8bb7afd564e3b26b50ca6ee47572c217526a1389fe018d00345856d4a9b08ffbd61fadaf283a87368d94c3dcdb8f5ffe2650a5a65863e21ad2730ca0f05210a
+  languageName: node
+  linkType: hard
+
+"supports-color@npm:^8.0.0, supports-color@npm:^8.1.1":
+  version: 8.1.1
+  resolution: "supports-color@npm:8.1.1"
+  dependencies:
+    has-flag: "npm:^4.0.0"
+  checksum: 10/157b534df88e39c5518c5e78c35580c1eca848d7dbaf31bbe06cdfc048e22c7ff1a9d046ae17b25691128f631a51d9ec373c1b740c12ae4f0de6e292037e4282
+  languageName: node
+  linkType: hard
+
+"supports-preserve-symlinks-flag@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "supports-preserve-symlinks-flag@npm:1.0.0"
+  checksum: 10/a9dc19ae2220c952bd2231d08ddeecb1b0328b61e72071ff4000c8384e145cc07c1c0bdb3b5a1cb06e186a7b2790f1dee793418b332f6ddf320de25d9125be7e
+  languageName: node
+  linkType: hard
+
+"symbol-tree@npm:^3.2.4":
+  version: 3.2.4
+  resolution: "symbol-tree@npm:3.2.4"
+  checksum: 10/c09a00aadf279d47d0c5c46ca3b6b2fbaeb45f0a184976d599637d412d3a70bbdc043ff33effe1206dea0e36e0ad226cb957112e7ce9a4bf2daedf7fa4f85c53
+  languageName: node
+  linkType: hard
+
+"tar@npm:^6.1.11, tar@npm:^6.2.1":
+  version: 6.2.1
+  resolution: "tar@npm:6.2.1"
+  dependencies:
+    chownr: "npm:^2.0.0"
+    fs-minipass: "npm:^2.0.0"
+    minipass: "npm:^5.0.0"
+    minizlib: "npm:^2.1.1"
+    mkdirp: "npm:^1.0.3"
+    yallist: "npm:^4.0.0"
+  checksum: 10/bfbfbb2861888077fc1130b84029cdc2721efb93d1d1fb80f22a7ac3a98ec6f8972f29e564103bbebf5e97be67ebc356d37fa48dbc4960600a1eb7230fbd1ea0
+  languageName: node
+  linkType: hard
+
+"test-exclude@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "test-exclude@npm:6.0.0"
+  dependencies:
+    "@istanbuljs/schema": "npm:^0.1.2"
+    glob: "npm:^7.1.4"
+    minimatch: "npm:^3.0.4"
+  checksum: 10/8fccb2cb6c8fcb6bb4115394feb833f8b6cf4b9503ec2485c2c90febf435cac62abe882a0c5c51a37b9bbe70640cdd05acf5f45e486ac4583389f4b0855f69e5
+  languageName: node
+  linkType: hard
+
+"test-exclude@npm:^7.0.1":
+  version: 7.0.1
+  resolution: "test-exclude@npm:7.0.1"
+  dependencies:
+    "@istanbuljs/schema": "npm:^0.1.2"
+    glob: "npm:^10.4.1"
+    minimatch: "npm:^9.0.4"
+  checksum: 10/e6f6f4e1df2e7810e082e8d7dfc53be51a931e6e87925f5e1c2ef92cc1165246ba3bf2dae6b5d86251c16925683dba906bd41e40169ebc77120a2d1b5a0dbbe0
+  languageName: node
+  linkType: hard
+
+"text-table@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "text-table@npm:0.2.0"
+  checksum: 10/4383b5baaeffa9bb4cda2ac33a4aa2e6d1f8aaf811848bf73513a9b88fd76372dc461f6fd6d2e9cb5100f48b473be32c6f95bd983509b7d92bb4d92c10747452
+  languageName: node
+  linkType: hard
+
+"throttleit@npm:^1.0.0":
+  version: 1.0.1
+  resolution: "throttleit@npm:1.0.1"
+  checksum: 10/17f1aba82192d8b4f5be5f7e7955acd2db0b60557a2e041900bcb685c03fc0a42e44fae955741c2994ec314918c6c1c2c179bfe17b1fbb4a011c506e9ea7cc33
+  languageName: node
+  linkType: hard
+
+"through@npm:^2.3.8":
+  version: 2.3.8
+  resolution: "through@npm:2.3.8"
+  checksum: 10/5da78346f70139a7d213b65a0106f3c398d6bc5301f9248b5275f420abc2c4b1e77c2abc72d218dedc28c41efb2e7c312cb76a7730d04f9c2d37d247da3f4198
+  languageName: node
+  linkType: hard
+
+"tiny-invariant@npm:^1.3.1, tiny-invariant@npm:^1.3.3":
+  version: 1.3.3
+  resolution: "tiny-invariant@npm:1.3.3"
+  checksum: 10/5e185c8cc2266967984ce3b352a4e57cb89dad5a8abb0dea21468a6ecaa67cd5bb47a3b7a85d08041008644af4f667fb8b6575ba38ba5fb00b3b5068306e59fe
+  languageName: node
+  linkType: hard
+
+"tinybench@npm:^2.9.0":
+  version: 2.9.0
+  resolution: "tinybench@npm:2.9.0"
+  checksum: 10/cfa1e1418e91289219501703c4693c70708c91ffb7f040fd318d24aef419fb5a43e0c0160df9471499191968b2451d8da7f8087b08c3133c251c40d24aced06c
+  languageName: node
+  linkType: hard
+
+"tinyexec@npm:^0.3.1":
+  version: 0.3.1
+  resolution: "tinyexec@npm:0.3.1"
+  checksum: 10/0537c70590d52d354f40c0255ff0f654a3d18ddb3812b440ddf9d436edf516c8057838ad5a38744c0c59670ec03e3cf23fbe04ae3d49f031d948274e99002569
+  languageName: node
+  linkType: hard
+
+"tinyglobby@npm:^0.2.10":
+  version: 0.2.10
+  resolution: "tinyglobby@npm:0.2.10"
+  dependencies:
+    fdir: "npm:^6.4.2"
+    picomatch: "npm:^4.0.2"
+  checksum: 10/10c976866d849702edc47fc3fef27d63f074c40f75ef17171ecc1452967900699fa1e62373681dd58e673ddff2e3f6094bcd0a2101e3e4b30f4c2b9da41397f2
+  languageName: node
+  linkType: hard
+
+"tinypool@npm:^1.0.1":
+  version: 1.0.2
+  resolution: "tinypool@npm:1.0.2"
+  checksum: 10/6109322f14b3763f65c8fa49fddab72cd3edd96b82dd50e05e63de74867329ff5353bff4377281ec963213d9314f37f4a353e9ee34bbac85fd4c1e4a568d6076
+  languageName: node
+  linkType: hard
+
+"tinyrainbow@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "tinyrainbow@npm:1.2.0"
+  checksum: 10/2924444db6804355e5ba2b6e586c7f77329d93abdd7257a069a0f4530dff9f16de484e80479094e3f39273462541b003a65ee3a6afc2d12555aa745132deba5d
+  languageName: node
+  linkType: hard
+
+"tinyspy@npm:^3.0.0, tinyspy@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "tinyspy@npm:3.0.2"
+  checksum: 10/5db671b2ff5cd309de650c8c4761ca945459d7204afb1776db9a04fb4efa28a75f08517a8620c01ee32a577748802231ad92f7d5b194dc003ee7f987a2a06337
+  languageName: node
+  linkType: hard
+
+"tmp@npm:~0.2.3":
+  version: 0.2.3
+  resolution: "tmp@npm:0.2.3"
+  checksum: 10/7b13696787f159c9754793a83aa79a24f1522d47b87462ddb57c18ee93ff26c74cbb2b8d9138f571d2e0e765c728fb2739863a672b280528512c6d83d511c6fa
+  languageName: node
+  linkType: hard
+
+"tmpl@npm:1.0.5":
+  version: 1.0.5
+  resolution: "tmpl@npm:1.0.5"
+  checksum: 10/cd922d9b853c00fe414c5a774817be65b058d54a2d01ebb415840960406c669a0fc632f66df885e24cb022ec812739199ccbdb8d1164c3e513f85bfca5ab2873
+  languageName: node
+  linkType: hard
+
+"to-fast-properties@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "to-fast-properties@npm:2.0.0"
+  checksum: 10/be2de62fe58ead94e3e592680052683b1ec986c72d589e7b21e5697f8744cdbf48c266fa72f6c15932894c10187b5f54573a3bcf7da0bfd964d5caf23d436168
+  languageName: node
+  linkType: hard
+
+"to-regex-range@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "to-regex-range@npm:5.0.1"
+  dependencies:
+    is-number: "npm:^7.0.0"
+  checksum: 10/10dda13571e1f5ad37546827e9b6d4252d2e0bc176c24a101252153ef435d83696e2557fe128c4678e4e78f5f01e83711c703eef9814eb12dab028580d45980a
+  languageName: node
+  linkType: hard
+
+"totalist@npm:^3.0.0":
+  version: 3.0.1
+  resolution: "totalist@npm:3.0.1"
+  checksum: 10/5132d562cf88ff93fd710770a92f31dbe67cc19b5c6ccae2efc0da327f0954d211bbfd9456389655d726c624f284b4a23112f56d1da931ca7cfabbe1f45e778a
+  languageName: node
+  linkType: hard
+
+"tough-cookie@npm:^4.1.2, tough-cookie@npm:^4.1.3, tough-cookie@npm:^4.1.4":
+  version: 4.1.4
+  resolution: "tough-cookie@npm:4.1.4"
+  dependencies:
+    psl: "npm:^1.1.33"
+    punycode: "npm:^2.1.1"
+    universalify: "npm:^0.2.0"
+    url-parse: "npm:^1.5.3"
+  checksum: 10/75663f4e2cd085f16af0b217e4218772adf0617fb3227171102618a54ce0187a164e505d61f773ed7d65988f8ff8a8f935d381f87da981752c1171b076b4afac
+  languageName: node
+  linkType: hard
+
+"tr46@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "tr46@npm:3.0.0"
+  dependencies:
+    punycode: "npm:^2.1.1"
+  checksum: 10/b09a15886cbfaee419a3469081223489051ce9dca3374dd9500d2378adedbee84a3c73f83bfdd6bb13d53657753fc0d4e20a46bfcd3f1b9057ef528426ad7ce4
+  languageName: node
+  linkType: hard
+
+"ts-api-utils@npm:^1.0.1":
+  version: 1.3.0
+  resolution: "ts-api-utils@npm:1.3.0"
+  peerDependencies:
+    typescript: ">=4.2.0"
+  checksum: 10/3ee44faa24410cd649b5c864e068d438aa437ef64e9e4a66a41646a6d3024d3097a695eeb3fb26ee364705d3cb9653a65756d009e6a53badb6066a5f447bf7ed
+  languageName: node
+  linkType: hard
+
+"ts-dedent@npm:^2.0.0, ts-dedent@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "ts-dedent@npm:2.2.0"
+  checksum: 10/93ed8f7878b6d5ed3c08d99b740010eede6bccfe64bce61c5a4da06a2c17d6ddbb80a8c49c2d15251de7594a4f93ffa21dd10e7be75ef66a4dc9951b4a94e2af
+  languageName: node
+  linkType: hard
+
+"tsconfig-paths@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "tsconfig-paths@npm:4.2.0"
+  dependencies:
+    json5: "npm:^2.2.2"
+    minimist: "npm:^1.2.6"
+    strip-bom: "npm:^3.0.0"
+  checksum: 10/5e55cc2fb6b800eb72011522e10edefccb45b1f9af055681a51354c9b597d1390c6fa9cc356b8c7529f195ac8a90a78190d563159f3a1eed10e01bbd4d01a8ab
+  languageName: node
+  linkType: hard
+
+"tslib@npm:^1.8.1":
+  version: 1.14.1
+  resolution: "tslib@npm:1.14.1"
+  checksum: 10/7dbf34e6f55c6492637adb81b555af5e3b4f9cc6b998fb440dac82d3b42bdc91560a35a5fb75e20e24a076c651438234da6743d139e4feabf0783f3cdfe1dddb
+  languageName: node
+  linkType: hard
+
+"tslib@npm:^2.0.1, tslib@npm:^2.1.0":
+  version: 2.8.0
+  resolution: "tslib@npm:2.8.0"
+  checksum: 10/1bc7c43937477059b4d26f2dbde7e49ef0fb4f38f3014e0603eaea76d6a885742c8b1762af45949145e5e7408a736d20ded949da99dabc8ccba1fc5531d2d927
+  languageName: node
+  linkType: hard
+
+"tsutils@npm:^3.21.0":
+  version: 3.21.0
+  resolution: "tsutils@npm:3.21.0"
+  dependencies:
+    tslib: "npm:^1.8.1"
+  peerDependencies:
+    typescript: ">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta"
+  checksum: 10/ea036bec1dd024e309939ffd49fda7a351c0e87a1b8eb049570dd119d447250e2c56e0e6c00554e8205760e7417793fdebff752a46e573fbe07d4f375502a5b2
+  languageName: node
+  linkType: hard
+
+"tunnel-agent@npm:^0.6.0":
+  version: 0.6.0
+  resolution: "tunnel-agent@npm:0.6.0"
+  dependencies:
+    safe-buffer: "npm:^5.0.1"
+  checksum: 10/7f0d9ed5c22404072b2ae8edc45c071772affd2ed14a74f03b4e71b4dd1a14c3714d85aed64abcaaee5fec2efc79002ba81155c708f4df65821b444abb0cfade
+  languageName: node
+  linkType: hard
+
+"tweetnacl@npm:^0.14.3, tweetnacl@npm:~0.14.0":
+  version: 0.14.5
+  resolution: "tweetnacl@npm:0.14.5"
+  checksum: 10/04ee27901cde46c1c0a64b9584e04c96c5fe45b38c0d74930710751ea991408b405747d01dfae72f80fc158137018aea94f9c38c651cb9c318f0861a310c3679
+  languageName: node
+  linkType: hard
+
+"type-check@npm:^0.4.0, type-check@npm:~0.4.0":
+  version: 0.4.0
+  resolution: "type-check@npm:0.4.0"
+  dependencies:
+    prelude-ls: "npm:^1.2.1"
+  checksum: 10/14687776479d048e3c1dbfe58a2409e00367810d6960c0f619b33793271ff2a27f81b52461f14a162f1f89a9b1d8da1b237fc7c99b0e1fdcec28ec63a86b1fec
+  languageName: node
+  linkType: hard
+
+"type-detect@npm:4.0.8":
+  version: 4.0.8
+  resolution: "type-detect@npm:4.0.8"
+  checksum: 10/5179e3b8ebc51fce1b13efb75fdea4595484433f9683bbc2dca6d99789dba4e602ab7922d2656f2ce8383987467f7770131d4a7f06a26287db0615d2f4c4ce7d
+  languageName: node
+  linkType: hard
+
+"type-fest@npm:^0.20.2":
+  version: 0.20.2
+  resolution: "type-fest@npm:0.20.2"
+  checksum: 10/8907e16284b2d6cfa4f4817e93520121941baba36b39219ea36acfe64c86b9dbc10c9941af450bd60832c8f43464974d51c0957f9858bc66b952b66b6914cbb9
+  languageName: node
+  linkType: hard
+
+"type-fest@npm:^0.21.3":
+  version: 0.21.3
+  resolution: "type-fest@npm:0.21.3"
+  checksum: 10/f4254070d9c3d83a6e573bcb95173008d73474ceadbbf620dd32d273940ca18734dff39c2b2480282df9afe5d1675ebed5499a00d791758748ea81f61a38961f
+  languageName: node
+  linkType: hard
+
+"type-fest@npm:^2.19.0":
+  version: 2.19.0
+  resolution: "type-fest@npm:2.19.0"
+  checksum: 10/7bf9e8fdf34f92c8bb364c0af14ca875fac7e0183f2985498b77be129dc1b3b1ad0a6b3281580f19e48c6105c037fb966ad9934520c69c6434d17fd0af4eed78
+  languageName: node
+  linkType: hard
+
+"type-fest@npm:^4.26.1":
+  version: 4.26.1
+  resolution: "type-fest@npm:4.26.1"
+  checksum: 10/b82676194f80af228cb852e320d2ea8381c89d667d2e4d9f2bdfc8f254bccc039c7741a90c53617a4de0c9fdca8265ed18eb0888cd628f391c5c381c33a9f94b
+  languageName: node
+  linkType: hard
+
+"typescript@npm:^5.2.2":
+  version: 5.6.3
+  resolution: "typescript@npm:5.6.3"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10/c328e418e124b500908781d9f7b9b93cf08b66bf5936d94332b463822eea2f4e62973bfb3b8a745fdc038785cb66cf59d1092bac3ec2ac6a3e5854687f7833f1
+  languageName: node
+  linkType: hard
+
+"typescript@patch:typescript@npm%3A^5.2.2#optional!builtin<compat/typescript>":
+  version: 5.6.3
+  resolution: "typescript@patch:typescript@npm%3A5.6.3#optional!builtin<compat/typescript>::version=5.6.3&hash=b45daf"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10/dc4bec403cd33a204b655b1152a096a08e7bad2c931cb59ef8ff26b6f2aa541bf98f09fc157958a60c921b1983a8dde9a85b692f9de60fa8f574fd131e3ae4dd
+  languageName: node
+  linkType: hard
+
+"undici-types@npm:~6.19.2":
+  version: 6.19.8
+  resolution: "undici-types@npm:6.19.8"
+  checksum: 10/cf0b48ed4fc99baf56584afa91aaffa5010c268b8842f62e02f752df209e3dea138b372a60a963b3b2576ed932f32329ce7ddb9cb5f27a6c83040d8cd74b7a70
+  languageName: node
+  linkType: hard
+
+"unique-filename@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "unique-filename@npm:3.0.0"
+  dependencies:
+    unique-slug: "npm:^4.0.0"
+  checksum: 10/8e2f59b356cb2e54aab14ff98a51ac6c45781d15ceaab6d4f1c2228b780193dc70fae4463ce9e1df4479cb9d3304d7c2043a3fb905bdeca71cc7e8ce27e063df
+  languageName: node
+  linkType: hard
+
+"unique-slug@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "unique-slug@npm:4.0.0"
+  dependencies:
+    imurmurhash: "npm:^0.1.4"
+  checksum: 10/40912a8963fc02fb8b600cf50197df4a275c602c60de4cac4f75879d3c48558cfac48de08a25cc10df8112161f7180b3bbb4d662aadb711568602f9eddee54f0
+  languageName: node
+  linkType: hard
+
+"universalify@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "universalify@npm:0.2.0"
+  checksum: 10/e86134cb12919d177c2353196a4cc09981524ee87abf621f7bc8d249dbbbebaec5e7d1314b96061497981350df786e4c5128dbf442eba104d6e765bc260678b5
+  languageName: node
+  linkType: hard
+
+"universalify@npm:^2.0.0":
+  version: 2.0.1
+  resolution: "universalify@npm:2.0.1"
+  checksum: 10/ecd8469fe0db28e7de9e5289d32bd1b6ba8f7183db34f3bfc4ca53c49891c2d6aa05f3fb3936a81285a905cc509fb641a0c3fc131ec786167eff41236ae32e60
+  languageName: node
+  linkType: hard
+
+"unplugin@npm:^1.3.1":
+  version: 1.14.1
+  resolution: "unplugin@npm:1.14.1"
+  dependencies:
+    acorn: "npm:^8.12.1"
+    webpack-virtual-modules: "npm:^0.6.2"
+  peerDependencies:
+    webpack-sources: ^3
+  peerDependenciesMeta:
+    webpack-sources:
+      optional: true
+  checksum: 10/ad82ec5b8de5ae4fb7d24f8ed7d71071e15855d335365d7ab6f2e074d5d666589dd52e9f2a16017da19d7c43f60e50e09bc529420bf9f29ac7c90cc3cf13ef28
+  languageName: node
+  linkType: hard
+
+"untildify@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "untildify@npm:4.0.0"
+  checksum: 10/39ced9c418a74f73f0a56e1ba4634b4d959422dff61f4c72a8e39f60b99380c1b45ed776fbaa0a4101b157e4310d873ad7d114e8534ca02609b4916bb4187fb9
+  languageName: node
+  linkType: hard
+
+"update-browserslist-db@npm:^1.1.0":
+  version: 1.1.1
+  resolution: "update-browserslist-db@npm:1.1.1"
+  dependencies:
+    escalade: "npm:^3.2.0"
+    picocolors: "npm:^1.1.0"
+  peerDependencies:
+    browserslist: ">= 4.21.0"
+  bin:
+    update-browserslist-db: cli.js
+  checksum: 10/7678dd8609750588d01aa7460e8eddf2ff9d16c2a52fb1811190e0d056390f1fdffd94db3cf8fb209cf634ab4fa9407886338711c71cc6ccade5eeb22b093734
+  languageName: node
+  linkType: hard
+
+"uri-js@npm:^4.2.2":
+  version: 4.4.1
+  resolution: "uri-js@npm:4.4.1"
+  dependencies:
+    punycode: "npm:^2.1.0"
+  checksum: 10/b271ca7e3d46b7160222e3afa3e531505161c9a4e097febae9664e4b59912f4cbe94861361a4175edac3a03fee99d91e44b6a58c17a634bc5a664b19fc76fbcb
+  languageName: node
+  linkType: hard
+
+"url-parse@npm:^1.5.3":
+  version: 1.5.10
+  resolution: "url-parse@npm:1.5.10"
+  dependencies:
+    querystringify: "npm:^2.1.1"
+    requires-port: "npm:^1.0.0"
+  checksum: 10/c9e96bc8c5b34e9f05ddfeffc12f6aadecbb0d971b3cc26015b58d5b44676a99f50d5aeb1e5c9e61fa4d49961ae3ab1ae997369ed44da51b2f5ac010d188e6ad
+  languageName: node
+  linkType: hard
+
+"util@npm:^0.12.5":
+  version: 0.12.5
+  resolution: "util@npm:0.12.5"
+  dependencies:
+    inherits: "npm:^2.0.3"
+    is-arguments: "npm:^1.0.4"
+    is-generator-function: "npm:^1.0.7"
+    is-typed-array: "npm:^1.1.3"
+    which-typed-array: "npm:^1.1.2"
+  checksum: 10/61a10de7753353dd4d744c917f74cdd7d21b8b46379c1e48e1c4fd8e83f8190e6bd9978fc4e5102ab6a10ebda6019d1b36572fa4a325e175ec8b789a121f6147
+  languageName: node
+  linkType: hard
+
+"uuid@npm:^8.3.2":
+  version: 8.3.2
+  resolution: "uuid@npm:8.3.2"
+  bin:
+    uuid: dist/bin/uuid
+  checksum: 10/9a5f7aa1d6f56dd1e8d5f2478f855f25c645e64e26e347a98e98d95781d5ed20062d6cca2eecb58ba7c84bc3910be95c0451ef4161906abaab44f9cb68ffbdd1
+  languageName: node
+  linkType: hard
+
+"uuid@npm:^9.0.0":
+  version: 9.0.1
+  resolution: "uuid@npm:9.0.1"
+  bin:
+    uuid: dist/bin/uuid
+  checksum: 10/9d0b6adb72b736e36f2b1b53da0d559125ba3e39d913b6072f6f033e0c87835b414f0836b45bcfaf2bdf698f92297fea1c3cc19b0b258bc182c9c43cc0fab9f2
+  languageName: node
+  linkType: hard
+
+"v8-to-istanbul@npm:^9.0.1":
+  version: 9.3.0
+  resolution: "v8-to-istanbul@npm:9.3.0"
+  dependencies:
+    "@jridgewell/trace-mapping": "npm:^0.3.12"
+    "@types/istanbul-lib-coverage": "npm:^2.0.1"
+    convert-source-map: "npm:^2.0.0"
+  checksum: 10/fb1d70f1176cb9dc46cabbb3fd5c52c8f3e8738b61877b6e7266029aed0870b04140e3f9f4550ac32aebcfe1d0f38b0bac57e1e8fb97d68fec82f2b416148166
+  languageName: node
+  linkType: hard
+
+"verror@npm:1.10.0":
+  version: 1.10.0
+  resolution: "verror@npm:1.10.0"
+  dependencies:
+    assert-plus: "npm:^1.0.0"
+    core-util-is: "npm:1.0.2"
+    extsprintf: "npm:^1.2.0"
+  checksum: 10/da548149dd9c130a8a2587c9ee71ea30128d1526925707e2d01ed9c5c45c9e9f86733c66a328247cdd5f7c1516fb25b0f959ba754bfbe15072aa99ff96468a29
+  languageName: node
+  linkType: hard
+
+"vite-node@npm:2.1.8":
+  version: 2.1.8
+  resolution: "vite-node@npm:2.1.8"
+  dependencies:
+    cac: "npm:^6.7.14"
+    debug: "npm:^4.3.7"
+    es-module-lexer: "npm:^1.5.4"
+    pathe: "npm:^1.1.2"
+    vite: "npm:^5.0.0"
+  bin:
+    vite-node: vite-node.mjs
+  checksum: 10/0ff0ed7a6fb234d3ddc4946e4c1150229980cac9f34fb4bd7f443aab0aae2da5b73ac20ff68af1df476545807dc23189247194e8cea0dcdfa394311c73f04429
+  languageName: node
+  linkType: hard
+
+"vite@npm:^5.0.0, vite@npm:^5.1.1, vite@npm:^5.2.8":
+  version: 5.4.9
+  resolution: "vite@npm:5.4.9"
+  dependencies:
+    esbuild: "npm:^0.21.3"
+    fsevents: "npm:~2.3.3"
+    postcss: "npm:^8.4.43"
+    rollup: "npm:^4.20.0"
+  peerDependencies:
+    "@types/node": ^18.0.0 || >=20.0.0
+    less: "*"
+    lightningcss: ^1.21.0
+    sass: "*"
+    sass-embedded: "*"
+    stylus: "*"
+    sugarss: "*"
+    terser: ^5.4.0
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  peerDependenciesMeta:
+    "@types/node":
+      optional: true
+    less:
+      optional: true
+    lightningcss:
+      optional: true
+    sass:
+      optional: true
+    sass-embedded:
+      optional: true
+    stylus:
+      optional: true
+    sugarss:
+      optional: true
+    terser:
+      optional: true
+  bin:
+    vite: bin/vite.js
+  checksum: 10/60dfb3912ba6367d2d128e798d899caae3f4ec58990657b9f679c4d9de21ddec7eba5f6ad3d4fa0e8ea31771d477521b8e757a622ecc54829d73cb7f7c146bc4
+  languageName: node
+  linkType: hard
+
+"vitest-axe@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "vitest-axe@npm:0.1.0"
+  dependencies:
+    aria-query: "npm:^5.0.0"
+    axe-core: "npm:^4.4.2"
+    chalk: "npm:^5.0.1"
+    dom-accessibility-api: "npm:^0.5.14"
+    lodash-es: "npm:^4.17.21"
+    redent: "npm:^3.0.0"
+  peerDependencies:
+    vitest: ">=0.16.0"
+  checksum: 10/2304b352ce001b86f57ca23e2e47e708a36a41783ebf130a84c86b2d75fe7161888ae78fa9de69ced3eb0865bfe0ce076e2c86b2161f7ffc1afaa76fcd11942e
+  languageName: node
+  linkType: hard
+
+"vitest@npm:^2.1.3":
+  version: 2.1.8
+  resolution: "vitest@npm:2.1.8"
+  dependencies:
+    "@vitest/expect": "npm:2.1.8"
+    "@vitest/mocker": "npm:2.1.8"
+    "@vitest/pretty-format": "npm:^2.1.8"
+    "@vitest/runner": "npm:2.1.8"
+    "@vitest/snapshot": "npm:2.1.8"
+    "@vitest/spy": "npm:2.1.8"
+    "@vitest/utils": "npm:2.1.8"
+    chai: "npm:^5.1.2"
+    debug: "npm:^4.3.7"
+    expect-type: "npm:^1.1.0"
+    magic-string: "npm:^0.30.12"
+    pathe: "npm:^1.1.2"
+    std-env: "npm:^3.8.0"
+    tinybench: "npm:^2.9.0"
+    tinyexec: "npm:^0.3.1"
+    tinypool: "npm:^1.0.1"
+    tinyrainbow: "npm:^1.2.0"
+    vite: "npm:^5.0.0"
+    vite-node: "npm:2.1.8"
+    why-is-node-running: "npm:^2.3.0"
+  peerDependencies:
+    "@edge-runtime/vm": "*"
+    "@types/node": ^18.0.0 || >=20.0.0
+    "@vitest/browser": 2.1.8
+    "@vitest/ui": 2.1.8
+    happy-dom: "*"
+    jsdom: "*"
+  peerDependenciesMeta:
+    "@edge-runtime/vm":
+      optional: true
+    "@types/node":
+      optional: true
+    "@vitest/browser":
+      optional: true
+    "@vitest/ui":
+      optional: true
+    happy-dom:
+      optional: true
+    jsdom:
+      optional: true
+  bin:
+    vitest: vitest.mjs
+  checksum: 10/c2552c068f6faac82eb4e6debb9ed505c0e8016fd6e0a0f0e0dbb5b5417922fbcde80c54af0d3b5a5503a5d6ad6862b6e95b9b59b8b7e98bb553217b9c6fc227
+  languageName: node
+  linkType: hard
+
+"w3c-xmlserializer@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "w3c-xmlserializer@npm:4.0.0"
+  dependencies:
+    xml-name-validator: "npm:^4.0.0"
+  checksum: 10/9a00c412b5496f4f040842c9520bc0aaec6e0c015d06412a91a723cd7d84ea605ab903965f546b4ecdb3eae267f5145ba08565222b1d6cb443ee488cda9a0aee
+  languageName: node
+  linkType: hard
+
+"walker@npm:^1.0.8":
+  version: 1.0.8
+  resolution: "walker@npm:1.0.8"
+  dependencies:
+    makeerror: "npm:1.0.12"
+  checksum: 10/ad7a257ea1e662e57ef2e018f97b3c02a7240ad5093c392186ce0bcf1f1a60bbadd520d073b9beb921ed99f64f065efb63dfc8eec689a80e569f93c1c5d5e16c
+  languageName: node
+  linkType: hard
+
+"webidl-conversions@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "webidl-conversions@npm:7.0.0"
+  checksum: 10/4c4f65472c010eddbe648c11b977d048dd96956a625f7f8b9d64e1b30c3c1f23ea1acfd654648426ce5c743c2108a5a757c0592f02902cf7367adb7d14e67721
+  languageName: node
+  linkType: hard
+
+"webpack-virtual-modules@npm:^0.6.2":
+  version: 0.6.2
+  resolution: "webpack-virtual-modules@npm:0.6.2"
+  checksum: 10/d9a0d035f7ec0c7f1055aaf88bfe48b7f96458043916a1b2926d9012fd61de3810a6b768e31a8cd4b3c84a9b6d55824361a9dd20aaf9f5ccfb6f017af216a178
+  languageName: node
+  linkType: hard
+
+"whatwg-encoding@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "whatwg-encoding@npm:2.0.0"
+  dependencies:
+    iconv-lite: "npm:0.6.3"
+  checksum: 10/162d712d88fd134a4fe587e53302da812eb4215a1baa4c394dfd86eff31d0a079ff932c05233857997de07481093358d6e7587997358f49b8a580a777be22089
+  languageName: node
+  linkType: hard
+
+"whatwg-mimetype@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "whatwg-mimetype@npm:3.0.0"
+  checksum: 10/96f9f628c663c2ae05412c185ca81b3df54bcb921ab52fe9ebc0081c1720f25d770665401eb2338ab7f48c71568133845638e18a81ed52ab5d4dcef7d22b40ef
+  languageName: node
+  linkType: hard
+
+"whatwg-url@npm:^11.0.0":
+  version: 11.0.0
+  resolution: "whatwg-url@npm:11.0.0"
+  dependencies:
+    tr46: "npm:^3.0.0"
+    webidl-conversions: "npm:^7.0.0"
+  checksum: 10/dfcd51c6f4bfb54685528fb10927f3fd3d7c809b5671beef4a8cdd7b1408a7abf3343a35bc71dab83a1424f1c1e92cc2700d7930d95d231df0fac361de0c7648
+  languageName: node
+  linkType: hard
+
+"which-boxed-primitive@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "which-boxed-primitive@npm:1.0.2"
+  dependencies:
+    is-bigint: "npm:^1.0.1"
+    is-boolean-object: "npm:^1.1.0"
+    is-number-object: "npm:^1.0.4"
+    is-string: "npm:^1.0.5"
+    is-symbol: "npm:^1.0.3"
+  checksum: 10/9c7ca7855255f25ac47f4ce8b59c4cc33629e713fd7a165c9d77a2bb47bf3d9655a5664660c70337a3221cf96742f3589fae15a3a33639908d33e29aa2941efb
+  languageName: node
+  linkType: hard
+
+"which-collection@npm:^1.0.1":
+  version: 1.0.2
+  resolution: "which-collection@npm:1.0.2"
+  dependencies:
+    is-map: "npm:^2.0.3"
+    is-set: "npm:^2.0.3"
+    is-weakmap: "npm:^2.0.2"
+    is-weakset: "npm:^2.0.3"
+  checksum: 10/674bf659b9bcfe4055f08634b48a8588e879161b9fefed57e9ec4ff5601e4d50a05ccd76cf10f698ef5873784e5df3223336d56c7ce88e13bcf52ebe582fc8d7
+  languageName: node
+  linkType: hard
+
+"which-typed-array@npm:^1.1.13, which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.2":
+  version: 1.1.15
+  resolution: "which-typed-array@npm:1.1.15"
+  dependencies:
+    available-typed-arrays: "npm:^1.0.7"
+    call-bind: "npm:^1.0.7"
+    for-each: "npm:^0.3.3"
+    gopd: "npm:^1.0.1"
+    has-tostringtag: "npm:^1.0.2"
+  checksum: 10/c3b6a99beadc971baa53c3ee5b749f2b9bdfa3b3b9a70650dd8511a48b61d877288b498d424712e9991d16019633086bd8b5923369460d93463c5825fa36c448
+  languageName: node
+  linkType: hard
+
+"which@npm:^2.0.1":
+  version: 2.0.2
+  resolution: "which@npm:2.0.2"
+  dependencies:
+    isexe: "npm:^2.0.0"
+  bin:
+    node-which: ./bin/node-which
+  checksum: 10/4782f8a1d6b8fc12c65e968fea49f59752bf6302dc43036c3bf87da718a80710f61a062516e9764c70008b487929a73546125570acea95c5b5dcc8ac3052c70f
+  languageName: node
+  linkType: hard
+
+"which@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "which@npm:4.0.0"
+  dependencies:
+    isexe: "npm:^3.1.1"
+  bin:
+    node-which: bin/which.js
+  checksum: 10/f17e84c042592c21e23c8195108cff18c64050b9efb8459589116999ea9da6dd1509e6a1bac3aeebefd137be00fabbb61b5c2bc0aa0f8526f32b58ee2f545651
+  languageName: node
+  linkType: hard
+
+"why-is-node-running@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "why-is-node-running@npm:2.3.0"
+  dependencies:
+    siginfo: "npm:^2.0.0"
+    stackback: "npm:0.0.2"
+  bin:
+    why-is-node-running: cli.js
+  checksum: 10/0de6e6cd8f2f94a8b5ca44e84cf1751eadcac3ebedcdc6e5fbbe6c8011904afcbc1a2777c53496ec02ced7b81f2e7eda61e76bf8262a8bc3ceaa1f6040508051
+  languageName: node
+  linkType: hard
+
+"word-wrap@npm:^1.2.5":
+  version: 1.2.5
+  resolution: "word-wrap@npm:1.2.5"
+  checksum: 10/1ec6f6089f205f83037be10d0c4b34c9183b0b63fca0834a5b3cee55dd321429d73d40bb44c8fc8471b5203d6e8f8275717f49a8ff4b2b0ab41d7e1b563e0854
+  languageName: node
+  linkType: hard
+
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0, wrap-ansi@npm:^7.0.0":
+  version: 7.0.0
+  resolution: "wrap-ansi@npm:7.0.0"
+  dependencies:
+    ansi-styles: "npm:^4.0.0"
+    string-width: "npm:^4.1.0"
+    strip-ansi: "npm:^6.0.0"
+  checksum: 10/cebdaeca3a6880da410f75209e68cd05428580de5ad24535f22696d7d9cab134d1f8498599f344c3cf0fb37c1715807a183778d8c648d6cc0cb5ff2bb4236540
+  languageName: node
+  linkType: hard
+
+"wrap-ansi@npm:^6.2.0":
+  version: 6.2.0
+  resolution: "wrap-ansi@npm:6.2.0"
+  dependencies:
+    ansi-styles: "npm:^4.0.0"
+    string-width: "npm:^4.1.0"
+    strip-ansi: "npm:^6.0.0"
+  checksum: 10/0d64f2d438e0b555e693b95aee7b2689a12c3be5ac458192a1ce28f542a6e9e59ddfecc37520910c2c88eb1f82a5411260566dba5064e8f9895e76e169e76187
+  languageName: node
+  linkType: hard
+
+"wrap-ansi@npm:^8.1.0":
+  version: 8.1.0
+  resolution: "wrap-ansi@npm:8.1.0"
+  dependencies:
+    ansi-styles: "npm:^6.1.0"
+    string-width: "npm:^5.0.1"
+    strip-ansi: "npm:^7.0.1"
+  checksum: 10/7b1e4b35e9bb2312d2ee9ee7dc95b8cb5f8b4b5a89f7dde5543fe66c1e3715663094defa50d75454ac900bd210f702d575f15f3f17fa9ec0291806d2578d1ddf
+  languageName: node
+  linkType: hard
+
+"wrappy@npm:1":
+  version: 1.0.2
+  resolution: "wrappy@npm:1.0.2"
+  checksum: 10/159da4805f7e84a3d003d8841557196034155008f817172d4e986bd591f74aa82aa7db55929a54222309e01079a65a92a9e6414da5a6aa4b01ee44a511ac3ee5
+  languageName: node
+  linkType: hard
+
+"write-file-atomic@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "write-file-atomic@npm:4.0.2"
+  dependencies:
+    imurmurhash: "npm:^0.1.4"
+    signal-exit: "npm:^3.0.7"
+  checksum: 10/3be1f5508a46c190619d5386b1ac8f3af3dbe951ed0f7b0b4a0961eed6fc626bd84b50cf4be768dabc0a05b672f5d0c5ee7f42daa557b14415d18c3a13c7d246
+  languageName: node
+  linkType: hard
+
+"ws@npm:^8.11.0, ws@npm:^8.18.0, ws@npm:^8.2.3":
+  version: 8.18.0
+  resolution: "ws@npm:8.18.0"
+  peerDependencies:
+    bufferutil: ^4.0.1
+    utf-8-validate: ">=5.0.2"
+  peerDependenciesMeta:
+    bufferutil:
+      optional: true
+    utf-8-validate:
+      optional: true
+  checksum: 10/70dfe53f23ff4368d46e4c0b1d4ca734db2c4149c6f68bc62cb16fc21f753c47b35fcc6e582f3bdfba0eaeb1c488cddab3c2255755a5c3eecb251431e42b3ff6
+  languageName: node
+  linkType: hard
+
+"xml-name-validator@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "xml-name-validator@npm:4.0.0"
+  checksum: 10/f9582a3f281f790344a471c207516e29e293c6041b2c20d84dd6e58832cd7c19796c47e108fd4fd4b164a5e72ad94f2268f8ace8231cde4a2c6428d6aa220f92
+  languageName: node
+  linkType: hard
+
+"xmlchars@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "xmlchars@npm:2.2.0"
+  checksum: 10/4ad5924974efd004a47cce6acf5c0269aee0e62f9a805a426db3337af7bcbd331099df174b024ace4fb18971b8a56de386d2e73a1c4b020e3abd63a4a9b917f1
+  languageName: node
+  linkType: hard
+
+"y18n@npm:^5.0.5":
+  version: 5.0.8
+  resolution: "y18n@npm:5.0.8"
+  checksum: 10/5f1b5f95e3775de4514edbb142398a2c37849ccfaf04a015be5d75521e9629d3be29bd4432d23c57f37e5b61ade592fb0197022e9993f81a06a5afbdcda9346d
+  languageName: node
+  linkType: hard
+
+"yallist@npm:^3.0.2":
+  version: 3.1.1
+  resolution: "yallist@npm:3.1.1"
+  checksum: 10/9af0a4329c3c6b779ac4736c69fae4190ac03029fa27c1aef4e6bcc92119b73dea6fe5db5fe881fb0ce2a0e9539a42cdf60c7c21eda04d1a0b8c082e38509efb
+  languageName: node
+  linkType: hard
+
+"yallist@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "yallist@npm:4.0.0"
+  checksum: 10/4cb02b42b8a93b5cf50caf5d8e9beb409400a8a4d85e83bb0685c1457e9ac0b7a00819e9f5991ac25ffabb56a78e2f017c1acc010b3a1babfe6de690ba531abd
+  languageName: node
+  linkType: hard
+
+"yargs-parser@npm:^21.1.1":
+  version: 21.1.1
+  resolution: "yargs-parser@npm:21.1.1"
+  checksum: 10/9dc2c217ea3bf8d858041252d43e074f7166b53f3d010a8c711275e09cd3d62a002969a39858b92bbda2a6a63a585c7127014534a560b9c69ed2d923d113406e
+  languageName: node
+  linkType: hard
+
+"yargs@npm:^17.3.1, yargs@npm:^17.7.2":
+  version: 17.7.2
+  resolution: "yargs@npm:17.7.2"
+  dependencies:
+    cliui: "npm:^8.0.1"
+    escalade: "npm:^3.1.1"
+    get-caller-file: "npm:^2.0.5"
+    require-directory: "npm:^2.1.1"
+    string-width: "npm:^4.2.3"
+    y18n: "npm:^5.0.5"
+    yargs-parser: "npm:^21.1.1"
+  checksum: 10/abb3e37678d6e38ea85485ed86ebe0d1e3464c640d7d9069805ea0da12f69d5a32df8e5625e370f9c96dd1c2dc088ab2d0a4dd32af18222ef3c4224a19471576
+  languageName: node
+  linkType: hard
+
+"yauzl@npm:^2.10.0":
+  version: 2.10.0
+  resolution: "yauzl@npm:2.10.0"
+  dependencies:
+    buffer-crc32: "npm:~0.2.3"
+    fd-slicer: "npm:~1.1.0"
+  checksum: 10/1e4c311050dc0cf2ee3dbe8854fe0a6cde50e420b3e561a8d97042526b4cf7a0718d6c8d89e9e526a152f4a9cec55bcea9c3617264115f48bd6704cf12a04445
+  languageName: node
+  linkType: hard
+
+"yocto-queue@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "yocto-queue@npm:0.1.0"
+  checksum: 10/f77b3d8d00310def622123df93d4ee654fc6a0096182af8bd60679ddcdfb3474c56c6c7190817c84a2785648cdee9d721c0154eb45698c62176c322fb46fc700
+  languageName: node
+  linkType: hard
+
+"yoctocolors-cjs@npm:^2.1.2":
+  version: 2.1.2
+  resolution: "yoctocolors-cjs@npm:2.1.2"
+  checksum: 10/d731e3ba776a0ee19021d909787942933a6c2eafb2bbe85541f0c59aa5c7d475ce86fcb860d5803105e32244c3dd5ba875b87c4c6bf2d6f297da416aa54e556f
+  languageName: node
+  linkType: hard
diff --git a/test-storybooks/portable-stories-kitchen-sink/svelte/package.json b/test-storybooks/portable-stories-kitchen-sink/svelte/package.json
index 9128cf58d986..ad5699a549c7 100644
--- a/test-storybooks/portable-stories-kitchen-sink/svelte/package.json
+++ b/test-storybooks/portable-stories-kitchen-sink/svelte/package.json
@@ -8,13 +8,13 @@
     "cypress": "echo 'No cypress setup yet'",
     "dev": "vite",
     "jest": "echo 'No jest setup yet'",
-    "playwright": "echo 'No Playwright setup yet'",
+    "playwright-ct": "echo 'No Playwright setup yet'",
     "preview": "vite preview",
     "storybook": "STORYBOOK_TELEMETRY_URL=\"http://localhost:6007/event-log\" storybook dev -p 6006",
     "vitest": "vitest"
   },
   "resolutions": {
-    "@playwright/test": "1.46.0",
+    "@playwright/test": "1.48.1",
     "@storybook/addon-a11y": "portal:../../../code/addons/a11y",
     "@storybook/addon-actions": "portal:../../../code/addons/actions",
     "@storybook/addon-backgrounds": "portal:../../../code/addons/backgrounds",
@@ -77,11 +77,11 @@
     "@storybook/web-components": "portal:../../../code/renderers/web-components",
     "@storybook/web-components-vite": "portal:../../../code/frameworks/web-components-vite",
     "@storybook/web-components-webpack5": "portal:../../../code/frameworks/web-components-webpack5",
-    "playwright": "1.46.0",
+    "playwright": "1.48.1",
     "storybook": "portal:../../../code/lib/cli"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-svelte": "1.46.0",
+    "@playwright/experimental-ct-svelte": "1.48.1",
     "@storybook/addon-essentials": "8.0.0-rc.2",
     "@storybook/addon-interactions": "8.0.0-rc.2",
     "@storybook/svelte": "8.0.0-rc.2",
@@ -92,7 +92,7 @@
     "@tsconfig/svelte": "^5.0.2",
     "@types/node": "^22",
     "cypress": "^13.6.6",
-    "jsdom": "^24.0.0",
+    "happy-dom": "^15.11.7",
     "storybook": "8.0.0-rc.2",
     "svelte": "^4.2.11",
     "svelte-check": "^3.6.4",
diff --git a/test-storybooks/portable-stories-kitchen-sink/svelte/vite.config.ts b/test-storybooks/portable-stories-kitchen-sink/svelte/vite.config.ts
index 161976e6ed91..6e2bef8799d2 100644
--- a/test-storybooks/portable-stories-kitchen-sink/svelte/vite.config.ts
+++ b/test-storybooks/portable-stories-kitchen-sink/svelte/vite.config.ts
@@ -1,11 +1,10 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from 'vitest/config'
 import { svelte } from '@sveltejs/vite-plugin-svelte'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [svelte()],
-  //@ts-ignore
   test: {
-    environment: 'jsdom'
+    environment: 'happy-dom'
   }
 })
diff --git a/test-storybooks/portable-stories-kitchen-sink/vue3/package.json b/test-storybooks/portable-stories-kitchen-sink/vue3/package.json
index 888c0a3c561f..f286a9ce6258 100644
--- a/test-storybooks/portable-stories-kitchen-sink/vue3/package.json
+++ b/test-storybooks/portable-stories-kitchen-sink/vue3/package.json
@@ -9,13 +9,13 @@
     "dev": "vite",
     "jest": "echo 'Jest tests are not implemented!'",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "playwright": "playwright test",
+    "playwright-ct": "playwright test",
     "preview": "vite preview",
     "storybook": "STORYBOOK_TELEMETRY_URL=\"http://localhost:6007/event-log\" storybook dev -p 6006",
     "vitest": "echo 'Vitest tests are implemented in the renderer directory instead!'"
   },
   "resolutions": {
-    "@playwright/test": "1.46.0",
+    "@playwright/test": "1.48.1",
     "@storybook/addon-a11y": "file:../../../code/addons/a11y",
     "@storybook/addon-actions": "file:../../../code/addons/actions",
     "@storybook/addon-backgrounds": "file:../../../code/addons/backgrounds",
@@ -78,14 +78,14 @@
     "@storybook/web-components": "file:../../../code/renderers/web-components",
     "@storybook/web-components-vite": "file:../../../code/frameworks/web-components-vite",
     "@storybook/web-components-webpack5": "file:../../../code/frameworks/web-components-webpack5",
-    "playwright": "1.46.0",
+    "playwright": "1.48.1",
     "storybook": "file:../../../code/lib/cli"
   },
   "dependencies": {
     "vue": "^3.4.19"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-vue": "1.46.0",
+    "@playwright/experimental-ct-vue": "1.48.1",
     "@storybook/addon-essentials": "^8.0.0",
     "@storybook/addon-interactions": "^8.0.0",
     "@storybook/test": "^8.0.0",