Merge branch 'next' into doctrineless

2025-04-07 07:21:17 +08:00 · 2024-05-14 23:06:44 +08:00 · 2024-05-14 23:06:44 +08:00 · b25d3bcc3e
commit b25d3bcc3e
parent 7b9f554e71 1ae28db81f
217 changed files with 1273 additions and 974 deletions
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@ -154,18 +154,6 @@ jobs:
          git merge ${{ github.ref_name }}
          git push origin ${{ steps.target.outputs.target }}

-      - name: Ensure `next` is a minor version ahead of `main`
-        if: steps.target.outputs.target == 'main'
-        run: |
-          git checkout next
-          git pull
-
-          yarn release:ensure-next-ahead --main-version "${{ steps.version.outputs.current-version }}"
-
-          git add ..
-          git diff --staged --quiet || git commit -m "Bump next to be one minor ahead of main [skip ci]"
-          git push origin next
-
      - name: Sync CHANGELOG.md from `main` to `next`
        if: steps.target.outputs.target == 'main'
        working-directory: .
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,113 @@
+## 8.1.0
+
+Storybook 8.1 is here with a tone of new features and bug fixes:
+
+- 🏷️ Static tag-based filtering
+- 🦺 Type-safe, standards-based module mocking
+- 🐣 New `beforeEach` test hook
+- 🧳 Portable Stories API for Playwright Component Testing
+- 🐕‍🦺 Support the new signal-based input & output functions in Angular
+- 2️⃣ Two new ways to create stories: generating them from story controls or from your components directly!
+
+<details>
+<summary>List of all updates</summary>
+
+  - Addon-actions: Fix falsy args printing as object - 22163 - [#26917](https://github.com/storybookjs/storybook/pull/26917), thanks @Fatcat560!
+  - Addon-docs: Fix MDX compilation with `@vitejs/plugin-react-swc` and plugins - [#26837](https://github.com/storybookjs/storybook/pull/26837), thanks @JReinhold!
+  - Addon-docs: Fix `providerImportSource` extension - [#26868](https://github.com/storybookjs/storybook/pull/26868), thanks @bashmish!
+  - Addon-docs: Fix `react-dom/server` imports breaking stories and docs - [#26557](https://github.com/storybookjs/storybook/pull/26557), thanks @JReinhold!
+  - Addon-docs: Support Stencil based display names in source snippets - [#26592](https://github.com/storybookjs/storybook/pull/26592), thanks @yannbf!
+  - Addon-docs: Fix `[Object object]` displayName in some JSX components - [#26566](https://github.com/storybookjs/storybook/pull/26566), thanks @yannbf!
+  - Angular: Add type support for Angular\'s input signals - [#26413](https://github.com/storybookjs/storybook/pull/26413), thanks @valentinpalkovic!
+  - Angular: Add type support for Angular\'s output signals - [#26546](https://github.com/storybookjs/storybook/pull/26546), thanks @valentinpalkovic!
+  - API: Add API access to sidebar renderLabel - [#27099](https://github.com/storybookjs/storybook/pull/27099), thanks @shilman!
+  - Args: Add possibility to mark controls as read-only - [#26577](https://github.com/storybookjs/storybook/pull/26577), thanks @valentinpalkovic!
+  - Automigrations: Fix name of VTA addon - [#26816](https://github.com/storybookjs/storybook/pull/26816), thanks @valentinpalkovic!
+  - Automigrations: Add migration note about new react-docgen default - [#26620](https://github.com/storybookjs/storybook/pull/26620), thanks @valentinpalkovic!
+  - Automigrations: Fix missing support for mts vite config - [#26441](https://github.com/storybookjs/storybook/pull/26441), thanks @drik98!
+  - Automigrations: Improve react-docgen automigration prompt - [#27106](https://github.com/storybookjs/storybook/pull/27106), thanks @valentinpalkovic!
+  - Blocks: Add `of` prop to `Subtitle` - [#22552](https://github.com/storybookjs/storybook/pull/22552), thanks @joaonunomota!
+  - Blocks: Add `of` prop to `Title` - [#23728](https://github.com/storybookjs/storybook/pull/23728), thanks @Sidnioulz!
+  - CLI: Add --config-dir flag to add command - [#26771](https://github.com/storybookjs/storybook/pull/26771), thanks @eric-blue!
+  - CLI: Add --config-dir flag to migrate command - [#26721](https://github.com/storybookjs/storybook/pull/26721), thanks @yannbf!
+  - CLI: Add main.js `docs.autodocs` automigration - [#27089](https://github.com/storybookjs/storybook/pull/27089), thanks @shilman!
+  - CLI: Add Visual Tests addon install auto-migration when upgrading to 8.0.x - [#26766](https://github.com/storybookjs/storybook/pull/26766), thanks @ndelangen!
+  - CLI: Automigrate improve upgrade storybook related packages - [#26497](https://github.com/storybookjs/storybook/pull/26497), thanks @ndelangen!
+  - CLI: Automigrations copy edits - [#26342](https://github.com/storybookjs/storybook/pull/26342), thanks @joevaugh4n!
+  - CLI: Fix eslint configuration for string `extends` - [#27097](https://github.com/storybookjs/storybook/pull/27097), thanks @shilman!
+  - CLI: Improve Yarn berry error parsing - [#26616](https://github.com/storybookjs/storybook/pull/26616), thanks @yannbf!
+  - CLI: Improve `vite-config-file.ts` - [#26375](https://github.com/storybookjs/storybook/pull/26375), thanks @joevaugh4n!
+  - CLI: Instruct the correct auto-migration command - [#26515](https://github.com/storybookjs/storybook/pull/26515), thanks @ndelangen!
+  - CLI: Introduce package manager fallback for initializing Storybook in an empty directory with yarn1 - [#26500](https://github.com/storybookjs/storybook/pull/26500), thanks @valentinpalkovic!
+  - CLI: Throw an error when running upgrade command in incorrect cwd - [#26585](https://github.com/storybookjs/storybook/pull/26585), thanks @yannbf!
+  - Codemods: Escape filename given as argument - [#26430](https://github.com/storybookjs/storybook/pull/26430), thanks @YukiKitagata!
+  - Controls: Add Channels API to search for files in the project root - [#26726](https://github.com/storybookjs/storybook/pull/26726), thanks @valentinpalkovic!
+  - Controls: Added server channel to create a new story - [#26769](https://github.com/storybookjs/storybook/pull/26769), thanks @valentinpalkovic!
+  - Controls: Add UI to create new story files - [#26875](https://github.com/storybookjs/storybook/pull/26875), thanks @valentinpalkovic!
+  - Controls: Fix crashing when docgen extraction partially fails - [#26862](https://github.com/storybookjs/storybook/pull/26862), thanks @yannbf!
+  - Controls: Fix disable condition in ArgControl component - [#26567](https://github.com/storybookjs/storybook/pull/26567), thanks @valentinpalkovic!
+  - Controls: Fix number controls do not reset - [#26372](https://github.com/storybookjs/storybook/pull/26372), thanks @jiyiru!
+  - Core: Add `duration` and `onClick` support to Notification API and improve Notification UI - [#26696](https://github.com/storybookjs/storybook/pull/26696), thanks @ghengeveld!
+  - Core: Drop unneeded `UPDATE_STORY_ARGS` which was for SSv6 - [#25993](https://github.com/storybookjs/storybook/pull/25993), thanks @tmeasday!
+  - Core: Ensure that simultaneous onStoriesChanged don\'t clobber each other - [#26882](https://github.com/storybookjs/storybook/pull/26882), thanks @tmeasday!
+  - Core: Fix filters not being applied in WebKit - [#26949](https://github.com/storybookjs/storybook/pull/26949), thanks @JReinhold!
+  - Core: Fix preloading too early - [#26442](https://github.com/storybookjs/storybook/pull/26442), thanks @ndelangen!
+  - Core: Implement file formatter - [#26809](https://github.com/storybookjs/storybook/pull/26809), thanks @valentinpalkovic!
+  - Core: Optimize clearNotification - [#26415](https://github.com/storybookjs/storybook/pull/26415), thanks @ndelangen!
+  - Core: Save from controls - [#26827](https://github.com/storybookjs/storybook/pull/26827), thanks @ndelangen!
+  - CSF: Allow default export without title or component attributes - [#26516](https://github.com/storybookjs/storybook/pull/26516), thanks @kasperpeulen!
+  - CSF: Fix typings for control and other properties of argTypes - [#26824](https://github.com/storybookjs/storybook/pull/26824), thanks @kasperpeulen!
+  - CSF: Make sure loaders/decorators can be used as array - [#26514](https://github.com/storybookjs/storybook/pull/26514), thanks @kasperpeulen!
+  - Dependencies: Upgrade @storybook/csf to 0.1.5 - [#26958](https://github.com/storybookjs/storybook/pull/26958), thanks @Cherry!
+  - Dependencies: Upgrade `@joshwooding/vite-plugin-react-docgen-typescript` to `0.3.1` - [#26673](https://github.com/storybookjs/storybook/pull/26673), thanks @joshwooding!
+  - Dependencies: Upgrade `ejs` to `3.1.10` - [#27054](https://github.com/storybookjs/storybook/pull/27054), thanks @RiuSalvi!
+  - Dependencies: Bump es-module-lexer - [#26737](https://github.com/storybookjs/storybook/pull/26737), thanks @valentinpalkovic!
+  - Dependencies: Update globby dependency - [#26733](https://github.com/storybookjs/storybook/pull/26733), thanks @valentinpalkovic!
+  - Dependencies: Update postcss-loader in Next.js framework - [#26707](https://github.com/storybookjs/storybook/pull/26707), thanks @valentinpalkovic!
+  - Doc Tools: Signature Type Error Handling - [#26774](https://github.com/storybookjs/storybook/pull/26774), thanks @ethriel3695!
+  - Indexer: Escape special characters in storyImport regex - [#22545](https://github.com/storybookjs/storybook/pull/22545), thanks @VojGin!
+  - Maintenance: Fix performance regressions  - [#26411](https://github.com/storybookjs/storybook/pull/26411), thanks @kasperpeulen!
+  - MDX: Do not transform `http://` links - [#26488](https://github.com/storybookjs/storybook/pull/26488), thanks @JReinhold!
+  - Next.js: Fix Compatibility with <v14.0.4 - [#27082](https://github.com/storybookjs/storybook/pull/27082), thanks @JReinhold!
+  - Next.js: Fix next/font usage on Windows machines - [#26700](https://github.com/storybookjs/storybook/pull/26700), thanks @valentinpalkovic!
+  - Next.js: Move sharp into optional deps - [#26787](https://github.com/storybookjs/storybook/pull/26787), thanks @shuta13!
+  - Next.js: Support v14.2 useParams functionality - [#26874](https://github.com/storybookjs/storybook/pull/26874), thanks @yannbf!
+  - Next.js: Implement next redirect and the RedirectBoundary - [#27050](https://github.com/storybookjs/storybook/pull/27050), thanks @yannbf!
+  - Next.js: Support path aliases when no base url is set - [#26651](https://github.com/storybookjs/storybook/pull/26651), thanks @yannbf!
+  - Node: Safe use of `document` for preview - [#24248](https://github.com/storybookjs/storybook/pull/24248), thanks @DylanPiercey!
+  - Onboarding: Improve UI - [#27074](https://github.com/storybookjs/storybook/pull/27074), thanks @ndelangen!
+  - Portable stories: Introduce experimental Playwright CT API and Support for more renderers - [#26063](https://github.com/storybookjs/storybook/pull/26063), thanks @yannbf!
+  - Portable stories: Make setProjectAnnotations accept multiple types of imports - [#26316](https://github.com/storybookjs/storybook/pull/26316), thanks @yannbf!
+  - Portable Stories: Remove link to missing docs - [#27075](https://github.com/storybookjs/storybook/pull/27075), thanks @JReinhold!
+  - Portable Stories: Warn when rendering stories without cleaning up first - [#27008](https://github.com/storybookjs/storybook/pull/27008), thanks @JReinhold!
+  - React-Docgen: Make sure to be able to handle empty unions - [#26639](https://github.com/storybookjs/storybook/pull/26639), thanks @kasperpeulen!
+  - React: Support v19 betas in peer dependencies - [#26960](https://github.com/storybookjs/storybook/pull/26960), thanks @JReinhold!
+  - React: Support v19 in `react-dom-shim` - [#26898](https://github.com/storybookjs/storybook/pull/26898), thanks @Tobbe!
+  - Tags: Add project tags, negation, `dev`/`autodocs`/`test` system tags - [#26634](https://github.com/storybookjs/storybook/pull/26634), thanks @shilman!
+  - Tags: Fix missing default tags if no `preview.js` - [#27098](https://github.com/storybookjs/storybook/pull/27098), thanks @shilman!
+  - Test: Add @storybook/test as dev dependency - [#26458](https://github.com/storybookjs/storybook/pull/26458), thanks @arnabsen!
+  - Test: Make spies reactive so that they can be logged by addon-actions - [#26740](https://github.com/storybookjs/storybook/pull/26740), thanks @kasperpeulen!
+  - Test: Remove chai as dependency of @storybook/test - [#26852](https://github.com/storybookjs/storybook/pull/26852), thanks @kasperpeulen!
+  - Test: Support module mocking with conditional subpath imports in `package.json`  - [#26688](https://github.com/storybookjs/storybook/pull/26688), thanks @kasperpeulen!
+  - Theming: Update emotion dependencies - [#26623](https://github.com/storybookjs/storybook/pull/26623), thanks @SimenB!
+  - Typescript: Add types for `experimental-playwright` entries without `type:bundler` - [#27107](https://github.com/storybookjs/storybook/pull/27107), thanks @ndelangen!
+  - UI: Add key property to list children in Highlight component - [#26471](https://github.com/storybookjs/storybook/pull/26471), thanks @valentinpalkovic!
+  - UI: Fix not re-rendering tabs on state change - [#26899](https://github.com/storybookjs/storybook/pull/26899), thanks @lifeiscontent!
+  - UI: Fix panel layout resizing do not apply when done too fast - [#26460](https://github.com/storybookjs/storybook/pull/26460), thanks @jorge-ji!
+  - UI: Fix search result color contrast - [#26287](https://github.com/storybookjs/storybook/pull/26287), thanks @winchesHe!
+  - UI: Fix sidebar search hanging when selecting a story in touch mode - [#26807](https://github.com/storybookjs/storybook/pull/26807), thanks @JReinhold!
+  - UI: Fix theming of elements inside bars - [#26527](https://github.com/storybookjs/storybook/pull/26527), thanks @valentinpalkovic!
+  - UI: Improve empty state of addon panel - [#26481](https://github.com/storybookjs/storybook/pull/26481), thanks @yannbf!
+  - UI: Replace the icon prop in the Manager API - [#26477](https://github.com/storybookjs/storybook/pull/26477), thanks @cdedreuille!
+  - Viewport: Fix missing style - [#26530](https://github.com/storybookjs/storybook/pull/26530), thanks @jpzwarte!
+  - Vite: Merge assetsInclude property with Storybook default values - [#26860](https://github.com/storybookjs/storybook/pull/26860), thanks @yuemori!
+  - Vue: Disable controls for events, slots, and expose - [#26751](https://github.com/storybookjs/storybook/pull/26751), thanks @shilman!
+  - Webpack: Bump webpack-dev-middleware to patch high security issue - [#26655](https://github.com/storybookjs/storybook/pull/26655), thanks @jwilliams-met!
+  - Webpack: Fix sourcemap generation in webpack react-docgen-loader - [#26676](https://github.com/storybookjs/storybook/pull/26676), thanks @valentinpalkovic!
+  - Webpack: Hide runtime errors - [#23175](https://github.com/storybookjs/storybook/pull/23175), thanks @donaldpipowitch!
+</details>
+
+
 ## 8.0.10

 - MDX: Don't transform `http://` links - [#26488](https://github.com/storybookjs/storybook/pull/26488), thanks @JReinhold!
--- a/CHANGELOG.prerelease.md
+++ b/CHANGELOG.prerelease.md
@ -1,3 +1,15 @@
+## 8.2.0-alpha.0
+
+
+## 8.1.0-beta.1
+
+- API: Add API access to sidebar renderLabel - [#27099](https://github.com/storybookjs/storybook/pull/27099), thanks @shilman!
+- CLI: Add main.js `docs.autodocs` automigration - [#27089](https://github.com/storybookjs/storybook/pull/27089), thanks @shilman!
+- CLI: Fix eslint configuration for string `extends` - [#27097](https://github.com/storybookjs/storybook/pull/27097), thanks @shilman!
+- Indexer: Escape special characters in storyImport regex - [#22545](https://github.com/storybookjs/storybook/pull/22545), thanks @VojGin!
+- Next.js: Fix Compatibility with <v14.0.4 - [#27082](https://github.com/storybookjs/storybook/pull/27082), thanks @JReinhold!
+- Tags: Fix missing default tags if no `preview.js` - [#27098](https://github.com/storybookjs/storybook/pull/27098), thanks @shilman!
+
 ## 8.1.0-beta.0

 - Dependencies: Upgrade `@joshwooding/vite-plugin-react-docgen-typescript` to `0.3.1` - [#26673](https://github.com/storybookjs/storybook/pull/26673), thanks @joshwooding!
--- a/code/addons/a11y/package.json
+++ b/code/addons/a11y/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-a11y",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Test component compliance with web accessibility standards",
  "keywords": [
    "a11y",
--- a/code/addons/actions/package.json
+++ b/code/addons/actions/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-actions",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Get UI feedback when an action is performed on an interactive element",
  "keywords": [
    "storybook",
--- a/code/addons/actions/src/addArgsHelpers.ts
+++ b/code/addons/actions/src/addArgsHelpers.ts
@ -51,13 +51,11 @@ export const addActionsFromArgTypes: ArgsEnhancer<Renderer> = (context) => {
    return {};
  }

-  const argTypesWithAction = Object.entries(argTypes).filter(
-    ([name, argType]) => !!argType['action']
-  );
+  const argTypesWithAction = Object.entries(argTypes).filter(([name, argType]) => !!argType.action);

  return argTypesWithAction.reduce((acc, [name, argType]) => {
    if (isInInitialArgs(name, initialArgs)) {
-      acc[name] = action(typeof argType['action'] === 'string' ? argType['action'] : name);
+      acc[name] = action(typeof argType.action === 'string' ? argType.action : name);
    }
    return acc;
  }, {} as Args);
--- a/code/addons/actions/src/decorator.ts
+++ b/code/addons/actions/src/decorator.ts
@ -62,8 +62,8 @@ export const withActions: <T extends Renderer>(storyFn: PartialStoryFn<T>) => T[
    parameterName: PARAM_KEY,
    skipIfNoParametersOrOptions: true,
    wrapper: (getStory, context, { parameters }) => {
-      if (parameters?.['handles']) {
-        applyEventHandlers(actions, ...parameters['handles']);
+      if (parameters?.handles) {
+        applyEventHandlers(actions, ...parameters.handles);
      }

      return getStory(context);
--- a/code/addons/backgrounds/package.json
+++ b/code/addons/backgrounds/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-backgrounds",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Switch backgrounds to view components in different settings",
  "keywords": [
    "addon",
--- a/code/addons/controls/package.json
+++ b/code/addons/controls/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-controls",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Interact with component inputs dynamically in the Storybook UI",
  "keywords": [
    "addon",
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-docs",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Document component usage and properties in Markdown",
  "keywords": [
    "addon",
--- a/code/addons/essentials/package.json
+++ b/code/addons/essentials/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-essentials",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Curated addons to bring out the best of Storybook",
  "keywords": [
    "addon",
--- a/code/addons/gfm/package.json
+++ b/code/addons/gfm/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-mdx-gfm",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "GitHub Flavored Markdown in Storybook",
  "keywords": [
    "addon",
--- a/code/addons/highlight/package.json
+++ b/code/addons/highlight/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-highlight",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Highlight DOM nodes within your stories",
  "keywords": [
    "storybook-addons",
--- a/code/addons/interactions/package.json
+++ b/code/addons/interactions/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-interactions",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Automate, test and debug user interactions",
  "keywords": [
    "storybook-addons",
--- a/code/addons/jest/package.json
+++ b/code/addons/jest/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-jest",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "React storybook addon that show component jest report",
  "keywords": [
    "addon",
--- a/code/addons/links/package.json
+++ b/code/addons/links/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-links",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Link stories together to build demos and prototypes with your UI components",
  "keywords": [
    "addon",
--- a/code/addons/measure/package.json
+++ b/code/addons/measure/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-measure",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Inspect layouts by visualizing the box model",
  "keywords": [
    "storybook-addons",
--- a/code/addons/onboarding/package.json
+++ b/code/addons/onboarding/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-onboarding",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
  "keywords": [
    "storybook-addons",
--- a/code/addons/outline/package.json
+++ b/code/addons/outline/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-outline",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Outline all elements with CSS to help with layout placement and alignment",
  "keywords": [
    "storybook-addons",
--- a/code/addons/storysource/package.json
+++ b/code/addons/storysource/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storysource",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "View a story’s source code to see how it works and paste into your app",
  "keywords": [
    "addon",
--- a/code/addons/themes/package.json
+++ b/code/addons/themes/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-themes",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Switch between multiple themes for you components in Storybook",
  "keywords": [
    "css",
--- a/code/addons/toolbars/package.json
+++ b/code/addons/toolbars/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-toolbars",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Create your own toolbar items that control story rendering",
  "keywords": [
    "addon",
--- a/code/addons/viewport/package.json
+++ b/code/addons/viewport/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-viewport",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
  "keywords": [
    "addon",
--- a/code/builders/builder-manager/package.json
+++ b/code/builders/builder-manager/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/builder-manager",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Storybook manager builder",
  "keywords": [
    "storybook"
--- a/code/builders/builder-vite/package.json
+++ b/code/builders/builder-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/builder-vite",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "A plugin to run and build Storybooks with Vite",
  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
  "bugs": {
--- a/code/builders/builder-webpack5/package.json
+++ b/code/builders/builder-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/builder-webpack5",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Storybook framework-agnostic API",
  "keywords": [
    "storybook"
@ -96,13 +96,12 @@
    "webpack": "5",
    "webpack-dev-middleware": "^6.1.2",
    "webpack-hot-middleware": "^2.25.1",
-    "webpack-virtual-modules": "^0.5.0"
+    "webpack-virtual-modules": "^0.6.0"
  },
  "devDependencies": {
    "@types/pretty-hrtime": "^1.0.0",
    "@types/terser-webpack-plugin": "^5.2.0",
    "@types/webpack-hot-middleware": "^2.25.6",
-    "@types/webpack-virtual-modules": "^0.1.1",
    "pretty-hrtime": "^1.0.3",
    "slash": "^5.0.0",
    "typescript": "^5.3.2"
--- a/code/frameworks/angular/package.json
+++ b/code/frameworks/angular/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/angular",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
  "keywords": [
    "storybook",
--- a/code/frameworks/angular/src/types.ts
+++ b/code/frameworks/angular/src/types.ts
@ -7,9 +7,10 @@ import {
  BuilderOptions,
  TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import { CompatibleString } from '@storybook/types';

-type FrameworkName = '@storybook/angular';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/angular'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;

 export type FrameworkOptions = AngularOptions & {
  builder?: BuilderOptions;
--- a/code/frameworks/ember/package.json
+++ b/code/frameworks/ember/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/ember",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember",
  "bugs": {
--- a/code/frameworks/ember/src/types.ts
+++ b/code/frameworks/ember/src/types.ts
@ -7,9 +7,10 @@ import type {
  BuilderOptions,
  TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';

-type FrameworkName = '@storybook/ember-webpack5';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/ember-webpack5'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;

 export type FrameworkOptions = {
  builder?: BuilderOptions;
--- a/code/frameworks/html-vite/package.json
+++ b/code/frameworks/html-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/html-vite",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -51,6 +51,7 @@
    "@storybook/core-server": "workspace:*",
    "@storybook/html": "workspace:*",
    "@storybook/node-logger": "workspace:*",
+    "@storybook/types": "workspace:*",
    "magic-string": "^0.30.0"
  },
  "devDependencies": {
--- a/code/frameworks/html-vite/src/types.ts
+++ b/code/frameworks/html-vite/src/types.ts
@ -1,8 +1,8 @@
-import type { StorybookConfig as StorybookConfigBase } from '@storybook/types';
+import type { StorybookConfig as StorybookConfigBase, CompatibleString } from '@storybook/types';
 import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';

-type FrameworkName = '@storybook/html-vite';
-type BuilderName = '@storybook/builder-vite';
+type FrameworkName = CompatibleString<'@storybook/html-vite'>;
+type BuilderName = CompatibleString<'@storybook/builder-vite'>;

 export type FrameworkOptions = {
  builder?: BuilderOptions;
--- a/code/frameworks/html-webpack5/package.json
+++ b/code/frameworks/html-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/html-webpack5",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -52,6 +52,7 @@
    "@storybook/global": "^5.0.0",
    "@storybook/html": "workspace:*",
    "@storybook/preset-html-webpack": "workspace:*",
+    "@storybook/types": "workspace:*",
    "@types/node": "^18.0.0"
  },
  "devDependencies": {
--- a/code/frameworks/html-webpack5/src/types.ts
+++ b/code/frameworks/html-webpack5/src/types.ts
@ -7,9 +7,10 @@ import type {
  BuilderOptions,
  TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';

-type FrameworkName = '@storybook/html-webpack5';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/html-webpack5'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;

 export type FrameworkOptions = {
  builder?: BuilderOptions;
--- a/code/frameworks/nextjs/package.json
+++ b/code/frameworks/nextjs/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/nextjs",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Storybook for Next.js",
  "keywords": [
    "storybook",
--- a/code/frameworks/nextjs/src/compatibility/compatibility-map.ts
+++ b/code/frameworks/nextjs/src/compatibility/compatibility-map.ts
@ -3,8 +3,12 @@ import semver from 'semver';
 import { getNextjsVersion, addScopedAlias } from '../utils';

 const mapping: Record<string, Record<string, string>> = {
-  '<14.0.0': {
+  '<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',
+  },
+  '<14.0.4': {
+    // https://github.com/vercel/next.js/blob/v14.0.4/packages/next/src/client/components/redirect-status-code.ts
    'next/dist/client/components/redirect-status-code':
      '@storybook/nextjs/dist/compatibility/redirect-status-code.compat',
  },
@ -14,7 +18,7 @@ export const getCompatibilityAliases = () => {
  const version = getNextjsVersion();
  const result: Record<string, string> = {};

-  Object.keys(mapping).filter((key) => {
+  Object.keys(mapping).forEach((key) => {
    if (semver.intersects(version, key)) {
      Object.assign(result, mapping[key]);
    }
--- a/code/frameworks/nextjs/src/swc/loader.ts
+++ b/code/frameworks/nextjs/src/swc/loader.ts
@ -4,9 +4,10 @@ import type { Options } from '@storybook/types';
 import type { NextConfig } from 'next';
 import path from 'path';
 import loadJsConfig from 'next/dist/build/load-jsconfig';
+import type { Configuration as WebpackConfig } from 'webpack';

 export const configureSWCLoader = async (
-  baseConfig: any,
+  baseConfig: WebpackConfig,
  options: Options,
  nextConfig: NextConfig
 ) => {
@ -18,33 +19,38 @@ export const configureSWCLoader = async (

  const { jsConfig } = await loadJsConfig(dir, nextConfig as any);

-  baseConfig.module.rules = [
-    ...baseConfig.module.rules,
-    {
-      test: /\.((c|m)?(j|t)sx?)$/,
-      include: [getProjectRoot()],
-      exclude: [/(node_modules)/, ...Object.keys(virtualModules)],
-      enforce: 'post',
-      use: {
-        // we use our own patch because we need to remove tracing from the original code
-        // which is not possible otherwise
-        loader: require.resolve('./swc/next-swc-loader-patch.js'),
-        options: {
-          isServer: false,
-          rootDir: dir,
-          pagesDir: `${dir}/pages`,
-          appDir: `${dir}/apps`,
-          hasReactRefresh: isDevelopment,
-          jsConfig,
-          nextConfig,
-          supportedBrowsers: require('next/dist/build/utils').getSupportedBrowsers(
-            dir,
-            isDevelopment
-          ),
-          swcCacheDir: path.join(dir, nextConfig?.distDir ?? '.next', 'cache', 'swc'),
-          bundleTarget: 'default',
-        },
+  const rawRule = baseConfig.module?.rules?.find(
+    (rule) => typeof rule === 'object' && rule?.resourceQuery?.toString() === '/raw/'
+  );
+
+  if (rawRule && typeof rawRule === 'object') {
+    rawRule.test = /^(?!__barrel_optimize__)/;
+  }
+
+  baseConfig.module?.rules?.push({
+    test: /\.((c|m)?(j|t)sx?)$/,
+    include: [getProjectRoot()],
+    exclude: [/(node_modules)/, ...Object.keys(virtualModules)],
+    enforce: 'post',
+    use: {
+      // we use our own patch because we need to remove tracing from the original code
+      // which is not possible otherwise
+      loader: require.resolve('./swc/next-swc-loader-patch.js'),
+      options: {
+        isServer: false,
+        rootDir: dir,
+        pagesDir: `${dir}/pages`,
+        appDir: `${dir}/apps`,
+        hasReactRefresh: isDevelopment,
+        jsConfig,
+        nextConfig,
+        supportedBrowsers: require('next/dist/build/utils').getSupportedBrowsers(
+          dir,
+          isDevelopment
+        ),
+        swcCacheDir: path.join(dir, nextConfig?.distDir ?? '.next', 'cache', 'swc'),
+        bundleTarget: 'default',
      },
    },
-  ];
+  });
 };
--- a/code/frameworks/nextjs/src/types.ts
+++ b/code/frameworks/nextjs/src/types.ts
@ -8,13 +8,15 @@ import type {
  BuilderOptions,
  TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';
+import type * as NextImage from 'next/image';

-type FrameworkName = '@storybook/nextjs';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/nextjs'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;

 export type FrameworkOptions = ReactOptions & {
  nextConfigPath?: string;
-
+  image?: Partial<NextImage.ImageProps>;
  builder?: BuilderOptions;
 };

--- a/code/frameworks/preact-vite/package.json
+++ b/code/frameworks/preact-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/preact-vite",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -48,7 +48,8 @@
  },
  "dependencies": {
    "@storybook/builder-vite": "workspace:*",
-    "@storybook/preact": "workspace:*"
+    "@storybook/preact": "workspace:*",
+    "@storybook/types": "workspace:*"
  },
  "devDependencies": {
    "@types/node": "^18.0.0",
--- a/code/frameworks/preact-vite/src/types.ts
+++ b/code/frameworks/preact-vite/src/types.ts
@ -1,8 +1,8 @@
-import type { StorybookConfig as StorybookConfigBase } from '@storybook/types';
+import type { CompatibleString, StorybookConfig as StorybookConfigBase } from '@storybook/types';
 import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';

-type FrameworkName = '@storybook/preact-vite';
-type BuilderName = '@storybook/builder-vite';
+type FrameworkName = CompatibleString<'@storybook/preact-vite'>;
+type BuilderName = CompatibleString<'@storybook/builder-vite'>;

 export type FrameworkOptions = {
  builder?: BuilderOptions;
--- a/code/frameworks/preact-webpack5/package.json
+++ b/code/frameworks/preact-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/preact-webpack5",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Storybook for Preact: Develop Preact Component in isolation.",
  "keywords": [
    "storybook"
@ -51,6 +51,7 @@
    "@storybook/core-common": "workspace:*",
    "@storybook/preact": "workspace:*",
    "@storybook/preset-preact-webpack": "workspace:*",
+    "@storybook/types": "workspace:*",
    "@types/node": "^18.0.0"
  },
  "devDependencies": {
--- a/code/frameworks/preact-webpack5/src/types.ts
+++ b/code/frameworks/preact-webpack5/src/types.ts
@ -7,9 +7,10 @@ import type {
  BuilderOptions,
  TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';

-type FrameworkName = '@storybook/preact-webpack5';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/preact-webpack5'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;

 export type FrameworkOptions = {
  builder?: BuilderOptions;
--- a/code/frameworks/react-vite/package.json
+++ b/code/frameworks/react-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/react-vite",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -52,6 +52,7 @@
    "@storybook/builder-vite": "workspace:*",
    "@storybook/node-logger": "workspace:*",
    "@storybook/react": "workspace:*",
+    "@storybook/types": "workspace:*",
    "find-up": "^5.0.0",
    "magic-string": "^0.30.0",
    "react-docgen": "^7.0.0",
--- a/code/frameworks/react-vite/src/plugins/docgen-handlers/actualNameHandler.ts
+++ b/code/frameworks/react-vite/src/plugins/docgen-handlers/actualNameHandler.ts
@ -15,6 +15,8 @@ import { utils } from 'react-docgen';
 const { getNameOrValue, isReactForwardRefCall } = utils;

 const actualNameHandler: Handler = function actualNameHandler(documentation, componentDefinition) {
+  documentation.set('definedInFile', componentDefinition.hub.file.opts.filename);
+
  if (
    (componentDefinition.isClassDeclaration() || componentDefinition.isFunctionDeclaration()) &&
    componentDefinition.has('id')
--- a/code/frameworks/react-vite/src/plugins/react-docgen.ts
+++ b/code/frameworks/react-vite/src/plugins/react-docgen.ts
@ -20,7 +20,7 @@ import {
 } from './docgen-resolver';
 import { logger } from '@storybook/node-logger';

-type DocObj = Documentation & { actualName: string };
+type DocObj = Documentation & { actualName: string; definedInFile: string };

 // TODO: None of these are able to be overridden, so `default` is aspirational here.
 const defaultHandlers = Object.values(docgenHandlers).map((handler) => handler);
@ -71,8 +71,8 @@ export async function reactDocgen({
        const s = new MagicString(src);

        docgenResults.forEach((info) => {
-          const { actualName, ...docgenInfo } = info;
-          if (actualName) {
+          const { actualName, definedInFile, ...docgenInfo } = info;
+          if (actualName && definedInFile == id) {
            const docNode = JSON.stringify(docgenInfo);
            s.append(`;${actualName}.__docgenInfo=${docNode}`);
          }
--- a/code/frameworks/react-vite/src/types.ts
+++ b/code/frameworks/react-vite/src/types.ts
@ -1,12 +1,13 @@
 import type {
+  CompatibleString,
  StorybookConfig as StorybookConfigBase,
  TypescriptOptions as TypescriptOptionsBase,
 } from '@storybook/types';
 import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';
 import type docgenTypescript from '@joshwooding/vite-plugin-react-docgen-typescript';

-type FrameworkName = '@storybook/react-vite';
-type BuilderName = '@storybook/builder-vite';
+type FrameworkName = CompatibleString<'@storybook/react-vite'>;
+type BuilderName = CompatibleString<'@storybook/builder-vite'>;

 export type FrameworkOptions = {
  builder?: BuilderOptions;
--- a/code/frameworks/react-webpack5/package.json
+++ b/code/frameworks/react-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/react-webpack5",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -50,6 +50,7 @@
    "@storybook/builder-webpack5": "workspace:*",
    "@storybook/preset-react-webpack": "workspace:*",
    "@storybook/react": "workspace:*",
+    "@storybook/types": "workspace:*",
    "@types/node": "^18.0.0"
  },
  "peerDependencies": {
--- a/code/frameworks/react-webpack5/src/types.ts
+++ b/code/frameworks/react-webpack5/src/types.ts
@ -8,9 +8,10 @@ import type {
  BuilderOptions,
  TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';

-type FrameworkName = '@storybook/react-webpack5';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/react-webpack5'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;

 export type FrameworkOptions = ReactOptions & {
  builder?: BuilderOptions;
--- a/code/frameworks/server-webpack5/package.json
+++ b/code/frameworks/server-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/server-webpack5",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -51,6 +51,7 @@
    "@storybook/core-common": "workspace:*",
    "@storybook/preset-server-webpack": "workspace:*",
    "@storybook/server": "workspace:*",
+    "@storybook/types": "workspace:*",
    "@types/node": "^18.0.0"
  },
  "devDependencies": {
--- a/code/frameworks/server-webpack5/src/types.ts
+++ b/code/frameworks/server-webpack5/src/types.ts
@ -7,9 +7,10 @@ import type {
  BuilderOptions,
  TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';

-type FrameworkName = '@storybook/server-webpack5';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/server-webpack5'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;

 export type FrameworkOptions = {
  builder?: BuilderOptions;
--- a/code/frameworks/svelte-vite/package.json
+++ b/code/frameworks/svelte-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/svelte-vite",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -50,6 +50,7 @@
    "@storybook/builder-vite": "workspace:*",
    "@storybook/node-logger": "workspace:*",
    "@storybook/svelte": "workspace:*",
+    "@storybook/types": "workspace:*",
    "magic-string": "^0.30.0",
    "svelte-preprocess": "^5.1.1",
    "sveltedoc-parser": "^4.2.1",
--- a/code/frameworks/svelte-vite/src/types.ts
+++ b/code/frameworks/svelte-vite/src/types.ts
@ -1,8 +1,8 @@
-import type { StorybookConfig as StorybookConfigBase } from '@storybook/types';
+import type { CompatibleString, StorybookConfig as StorybookConfigBase } from '@storybook/types';
 import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';

-type FrameworkName = '@storybook/svelte-vite';
-type BuilderName = '@storybook/builder-vite';
+type FrameworkName = CompatibleString<'@storybook/svelte-vite'>;
+type BuilderName = CompatibleString<'@storybook/builder-vite'>;

 export type FrameworkOptions = {
  builder?: BuilderOptions;
--- a/code/frameworks/svelte-webpack5/package.json
+++ b/code/frameworks/svelte-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/svelte-webpack5",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -50,7 +50,8 @@
    "@storybook/builder-webpack5": "workspace:*",
    "@storybook/core-common": "workspace:*",
    "@storybook/preset-svelte-webpack": "workspace:*",
-    "@storybook/svelte": "workspace:*"
+    "@storybook/svelte": "workspace:*",
+    "@storybook/types": "workspace:*"
  },
  "devDependencies": {
    "svelte": "^4.0.0",
--- a/code/frameworks/svelte-webpack5/src/types.ts
+++ b/code/frameworks/svelte-webpack5/src/types.ts
@ -8,9 +8,10 @@ import type {
  BuilderOptions,
  TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';

-type FrameworkName = '@storybook/svelte-webpack5';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/svelte-webpack5'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;

 export type FrameworkOptions = SvelteOptions & {
  builder?: BuilderOptions;
--- a/code/frameworks/sveltekit/package.json
+++ b/code/frameworks/sveltekit/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/sveltekit",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Storybook for SvelteKit",
  "keywords": [
    "storybook",
@ -56,7 +56,8 @@
    "@storybook/addon-actions": "workspace:*",
    "@storybook/builder-vite": "workspace:*",
    "@storybook/svelte": "workspace:*",
-    "@storybook/svelte-vite": "workspace:*"
+    "@storybook/svelte-vite": "workspace:*",
+    "@storybook/types": "workspace:*"
  },
  "devDependencies": {
    "@types/node": "^18.0.0",
--- a/code/frameworks/sveltekit/src/types.ts
+++ b/code/frameworks/sveltekit/src/types.ts
@ -1,10 +1,10 @@
 import type { BuilderOptions, StorybookConfigVite } from '@storybook/builder-vite';
-import type { StorybookConfig as StorybookConfigBase } from '@storybook/types';
+import type { CompatibleString, StorybookConfig as StorybookConfigBase } from '@storybook/types';
 import type { enhance } from './mocks/app/forms';
 import type { goto, invalidate, invalidateAll } from './mocks/app/navigation';

-type FrameworkName = '@storybook/sveltekit';
-type BuilderName = '@storybook/builder-vite';
+type FrameworkName = CompatibleString<'@storybook/sveltekit'>;
+type BuilderName = CompatibleString<'@storybook/builder-vite'>;

 export type FrameworkOptions = {
  builder?: BuilderOptions;
--- a/code/frameworks/vue3-vite/package.json
+++ b/code/frameworks/vue3-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/vue3-vite",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -49,11 +49,12 @@
  "dependencies": {
    "@storybook/builder-vite": "workspace:*",
    "@storybook/core-server": "workspace:*",
+    "@storybook/types": "workspace:*",
    "@storybook/vue3": "workspace:*",
    "find-package-json": "^1.2.0",
    "magic-string": "^0.30.0",
    "typescript": "^5.0.0",
-    "vue-component-meta": "^1.8.27",
+    "vue-component-meta": "^2.0.0",
    "vue-docgen-api": "^4.75.1"
  },
  "devDependencies": {
--- a/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts
+++ b/code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts
@ -5,8 +5,8 @@ import path from 'path';
 import type { PluginOption } from 'vite';
 import {
  TypeMeta,
-  createComponentMetaChecker,
-  createComponentMetaCheckerByJsonConfig,
+  createChecker,
+  createCheckerByJson,
  type ComponentMeta,
  type MetaCheckerOptions,
 } from 'vue-component-meta';
@ -19,7 +19,7 @@ type MetaSource = {
 } & ComponentMeta &
  MetaCheckerOptions['schema'];

-export async function vueComponentMeta(): Promise<PluginOption> {
+export async function vueComponentMeta(tsconfigPath = 'tsconfig.json'): Promise<PluginOption> {
  const { createFilter } = await import('vite');

  // exclude stories, virtual modules and storybook internals
@ -28,7 +28,7 @@ export async function vueComponentMeta(): Promise<PluginOption> {
  const include = /\.(vue|ts|js|tsx|jsx)$/;
  const filter = createFilter(include, exclude);

-  const checker = await createChecker();
+  const checker = await createVueComponentMetaChecker(tsconfigPath);

  return {
    name: 'storybook:vue-component-meta-plugin',
@ -126,9 +126,10 @@ export async function vueComponentMeta(): Promise<PluginOption> {
 }

 /**
- * Creates the vue-component-meta checker to use for extracting component meta/docs.
+ * Creates the `vue-component-meta` checker to use for extracting component meta/docs.
+ * Considers the given tsconfig file (will use a fallback checker if it does not exist or is not supported).
 */
-async function createChecker() {
+async function createVueComponentMetaChecker(tsconfigPath = 'tsconfig.json') {
  const checkerOptions: MetaCheckerOptions = {
    forceUseTs: true,
    noDeclarations: true,
@ -136,26 +137,18 @@ async function createChecker() {
  };

  const projectRoot = getProjectRoot();
-  const projectTsConfigPath = path.join(projectRoot, 'tsconfig.json');
+  const projectTsConfigPath = path.join(projectRoot, tsconfigPath);

-  const defaultChecker = createComponentMetaCheckerByJsonConfig(
-    projectRoot,
-    { include: ['**/*'] },
-    checkerOptions
-  );
+  const defaultChecker = createCheckerByJson(projectRoot, { include: ['**/*'] }, checkerOptions);

  // prefer the tsconfig.json file of the project to support alias resolution etc.
  if (await fileExists(projectTsConfigPath)) {
-    // tsconfig that uses references is currently not supported by vue-component-meta
-    // see: https://github.com/vuejs/language-tools/issues/3896
-    // so we return the no-tsconfig defaultChecker if tsconfig references are found
-    // remove this workaround once the above issue is fixed
+    // vue-component-meta does currently not resolve tsconfig references (see https://github.com/vuejs/language-tools/issues/3896)
+    // so we will return the defaultChecker if references are used.
+    // Otherwise vue-component-meta might not work at all for the Storybook docgen.
    const references = await getTsConfigReferences(projectTsConfigPath);
-    if (references.length > 0) {
-      // TODO: paths/aliases are not resolvable, find workaround for this
-      return defaultChecker;
-    }
-    return createComponentMetaChecker(projectTsConfigPath, checkerOptions);
+    if (references.length > 0) return defaultChecker;
+    return createChecker(projectTsConfigPath, checkerOptions);
  }

  return defaultChecker;
--- a/code/frameworks/vue3-vite/src/preset.ts
+++ b/code/frameworks/vue3-vite/src/preset.ts
@ -3,7 +3,7 @@ import { dirname, join } from 'path';
 import type { PluginOption } from 'vite';
 import { vueComponentMeta } from './plugins/vue-component-meta';
 import { vueDocgen } from './plugins/vue-docgen';
-import type { FrameworkOptions, StorybookConfig } from './types';
+import type { FrameworkOptions, StorybookConfig, VueDocgenPlugin } from './types';

 const getAbsolutePath = <I extends string>(input: I): I =>
  dirname(require.resolve(join(input, 'package.json'))) as any;
@ -20,11 +20,11 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) =
  const frameworkOptions: FrameworkOptions =
    typeof framework === 'string' ? {} : framework.options ?? {};

-  const docgenPlugin = frameworkOptions.docgen ?? 'vue-docgen-api';
+  const docgen = resolveDocgenOptions(frameworkOptions.docgen);

  // add docgen plugin depending on framework option
-  if (docgenPlugin === 'vue-component-meta') {
-    plugins.push(await vueComponentMeta());
+  if (docgen.plugin === 'vue-component-meta') {
+    plugins.push(await vueComponentMeta(docgen.tsconfig));
  } else {
    plugins.push(await vueDocgen());
  }
@ -39,3 +39,14 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) =
    },
  });
 };
+
+/**
+ * Resolves the docgen framework option.
+ */
+const resolveDocgenOptions = (
+  docgen?: FrameworkOptions['docgen']
+): { plugin: VueDocgenPlugin; tsconfig?: string } => {
+  if (!docgen) return { plugin: 'vue-docgen-api' };
+  if (typeof docgen === 'string') return { plugin: docgen };
+  return docgen;
+};
--- a/code/frameworks/vue3-vite/src/types.ts
+++ b/code/frameworks/vue3-vite/src/types.ts
@ -1,10 +1,10 @@
 import type { BuilderOptions, StorybookConfigVite } from '@storybook/builder-vite';
-import type { StorybookConfig as StorybookConfigBase } from '@storybook/types';
+import type { CompatibleString, StorybookConfig as StorybookConfigBase } from '@storybook/types';
 import type { ComponentMeta } from 'vue-component-meta';
 import type { ComponentDoc } from 'vue-docgen-api';

-type FrameworkName = '@storybook/vue3-vite';
-type BuilderName = '@storybook/builder-vite';
+type FrameworkName = CompatibleString<'@storybook/vue3-vite'>;
+type BuilderName = CompatibleString<'@storybook/builder-vite'>;

 /**
 * Available docgen plugins for vue.
@ -21,7 +21,21 @@ export type FrameworkOptions = {
   * "vue-component-meta" will become the new default in the future and "vue-docgen-api" will be removed.
   * @default "vue-docgen-api"
   */
-  docgen?: VueDocgenPlugin;
+  docgen?:
+    | VueDocgenPlugin
+    | {
+        plugin: 'vue-component-meta';
+        /**
+         * Tsconfig filename to use. Should be set if your main `tsconfig.json` includes references to other tsconfig files
+         * like `tsconfig.app.json`.
+         * Otherwise docgen might not be generated correctly (e.g. import aliases are not resolved).
+         *
+         * For further information, see our [docs](https://storybook.js.org/docs/get-started/vue3-vite#override-the-default-configuration).
+         *
+         * @default "tsconfig.json"
+         */
+        tsconfig: `tsconfig${string}.json`;
+      };
 };

 type StorybookConfigFramework = {
--- a/code/frameworks/vue3-webpack5/package.json
+++ b/code/frameworks/vue3-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/vue3-webpack5",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -50,6 +50,7 @@
    "@storybook/builder-webpack5": "workspace:*",
    "@storybook/core-common": "workspace:*",
    "@storybook/preset-vue3-webpack": "workspace:*",
+    "@storybook/types": "workspace:*",
    "@storybook/vue3": "workspace:*",
    "@types/node": "^18.0.0"
  },
--- a/code/frameworks/vue3-webpack5/src/types.ts
+++ b/code/frameworks/vue3-webpack5/src/types.ts
@ -7,9 +7,10 @@ import type {
  BuilderOptions,
  TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';
+import type { CompatibleString } from '@storybook/types';

-type FrameworkName = '@storybook/vue3-webpack5';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/vue3-webpack5'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;

 export type FrameworkOptions = {
  builder?: BuilderOptions;
--- 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.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -50,6 +50,7 @@
    "@storybook/builder-vite": "workspace:*",
    "@storybook/core-server": "workspace:*",
    "@storybook/node-logger": "workspace:*",
+    "@storybook/types": "workspace:*",
    "@storybook/web-components": "workspace:*",
    "magic-string": "^0.30.0"
  },
--- a/code/frameworks/web-components-vite/src/types.ts
+++ b/code/frameworks/web-components-vite/src/types.ts
@ -1,8 +1,8 @@
-import type { StorybookConfig as StorybookConfigBase } from '@storybook/types';
+import type { CompatibleString, StorybookConfig as StorybookConfigBase } from '@storybook/types';
 import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite';

-type FrameworkName = '@storybook/web-components-vite';
-type BuilderName = '@storybook/builder-vite';
+type FrameworkName = CompatibleString<'@storybook/web-components-vite'>;
+type BuilderName = CompatibleString<'@storybook/builder-vite'>;

 export type FrameworkOptions = {
  builder?: BuilderOptions;
--- 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.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
  "keywords": [
    "lit",
@ -52,6 +52,7 @@
  "dependencies": {
    "@storybook/builder-webpack5": "workspace:*",
    "@storybook/core-common": "workspace:*",
+    "@storybook/types": "workspace:*",
    "@storybook/web-components": "workspace:*",
    "@types/node": "^18.0.0"
  },
--- a/code/frameworks/web-components-webpack5/src/types.ts
+++ b/code/frameworks/web-components-webpack5/src/types.ts
@ -1,4 +1,5 @@
 import type {
+  CompatibleString,
  StorybookConfig as StorybookConfigBase,
  TypescriptOptions as TypescriptOptionsWebComponents,
 } from '@storybook/types';
@ -8,8 +9,8 @@ import type {
  TypescriptOptions as TypescriptOptionsBuilder,
 } from '@storybook/builder-webpack5';

-type FrameworkName = '@storybook/web-components-webpack5';
-type BuilderName = '@storybook/builder-webpack5';
+type FrameworkName = CompatibleString<'@storybook/web-components-webpack5'>;
+type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;

 export type FrameworkOptions = {
  builder?: BuilderOptions;
--- a/code/lib/channels/package.json
+++ b/code/lib/channels/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/channels",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "",
  "keywords": [
    "storybook"
--- a/code/lib/cli-sb/package.json
+++ b/code/lib/cli-sb/package.json
@ -1,6 +1,6 @@
 {
  "name": "sb",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Storybook CLI",
  "keywords": [
    "storybook"
--- a/code/lib/cli-storybook/package.json
+++ b/code/lib/cli-storybook/package.json
@ -1,6 +1,6 @@
 {
  "name": "storybook",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Storybook CLI",
  "keywords": [
    "storybook"
--- a/code/lib/cli/package.json
+++ b/code/lib/cli/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/cli",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Storybook's CLI - install, dev, build, upgrade, and more",
  "keywords": [
    "cli",
--- a/code/lib/cli/src/automigrate/fixes/autodocs-tags.test.ts
+++ b/code/lib/cli/src/automigrate/fixes/autodocs-tags.test.ts
@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest';
+import type { StorybookConfig } from '@storybook/types';
+import { autodocsTags } from './autodocs-tags';
+
+const check = async ({
+  main: mainConfig,
+  storybookVersion = '7.0.0',
+  previewConfigPath,
+}: {
+  main: Partial<StorybookConfig> & Record<string, unknown>;
+  storybookVersion?: string;
+  previewConfigPath?: string;
+}) => {
+  return autodocsTags.check({
+    packageManager: {} as any,
+    configDir: '',
+    mainConfig: mainConfig as any,
+    storybookVersion,
+    previewConfigPath,
+  });
+};
+
+it('with no docs setting', async () => {
+  await expect(
+    check({
+      main: {},
+    })
+  ).resolves.toBeFalsy();
+});
+
+describe('docs.autodocs = true', () => {
+  it('errors with no preview.js', async () => {
+    await expect(
+      check({
+        main: {
+          docs: { autodocs: true },
+        },
+      })
+    ).rejects.toThrowError();
+  });
+
+  it('continues with preview.js', async () => {
+    await expect(
+      check({
+        main: {
+          docs: { autodocs: true },
+        },
+        previewConfigPath: '.storybook/preview.js',
+      })
+    ).resolves.toBeTruthy();
+  });
+});
+
+describe('docs.autodocs != true', () => {
+  it('docs.autodocs = false', async () => {
+    await expect(
+      check({
+        main: {
+          docs: { autodocs: false },
+        },
+      })
+    ).resolves.toBeTruthy();
+  });
+
+  it('docs.autodocs = "tag"', async () => {
+    await expect(
+      check({
+        main: {
+          docs: { autodocs: 'tag' },
+        },
+      })
+    ).resolves.toBeTruthy();
+  });
+});
--- a/code/lib/cli/src/automigrate/fixes/autodocs-tags.ts
+++ b/code/lib/cli/src/automigrate/fixes/autodocs-tags.ts
@ -0,0 +1,90 @@
+import { dedent } from 'ts-dedent';
+import chalk from 'chalk';
+import type { DocsOptions } from '@storybook/types';
+import { readConfig, writeConfig } from '@storybook/csf-tools';
+import { updateMainConfig } from '../helpers/mainConfigFile';
+import type { Fix } from '../types';
+
+const logger = console;
+
+const MIGRATION =
+  'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-docsautodocs-is-deprecated';
+
+interface Options {
+  autodocs: DocsOptions['autodocs'];
+  mainConfigPath?: string;
+  previewConfigPath?: string;
+}
+
+/**
+ */
+export const autodocsTags: Fix<Options> = {
+  id: 'autodocs-tags',
+  versionRange: ['*.*.*', '>=8.0.*'],
+  async check({ mainConfig, mainConfigPath, previewConfigPath }) {
+    const autodocs = mainConfig?.docs?.autodocs;
+    if (autodocs === undefined) return null;
+
+    if (autodocs === true && !previewConfigPath) {
+      throw Error(dedent`
+        ❌ Failed to remove the deprecated ${chalk.cyan('docs.autodocs')} setting from ${chalk.cyan(
+          mainConfigPath
+        )}.
+        
+        There is no preview config file in which to add the ${chalk.cyan('autodocs')} tag.
+
+        Please perform the migration by hand: ${chalk.yellow(MIGRATION)}
+      `);
+      return null;
+    }
+
+    return { autodocs, mainConfigPath, previewConfigPath };
+  },
+
+  prompt({ autodocs, mainConfigPath, previewConfigPath }) {
+    let falseMessage = '',
+      trueMessage = '';
+
+    if (autodocs === false) {
+      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')}.
+      `;
+    } else if (autodocs === true) {
+      trueMessage = ` and update ${chalk.cyan(previewConfigPath)}`;
+    }
+
+    return dedent`
+      The ${chalk.cyan('docs.autodocs')} setting in ${chalk.cyan(
+        mainConfigPath
+      )} is deprecated.${falseMessage}
+        
+      Learn more: ${chalk.yellow(MIGRATION)}
+      
+      Remove ${chalk.cyan('docs.autodocs')}${trueMessage}?
+    `;
+  },
+
+  async run({ dryRun, mainConfigPath, result }) {
+    if (!dryRun) {
+      if (result.autodocs === true) {
+        logger.info(`✅ Adding "autodocs" tag to ${result.previewConfigPath}`);
+        const previewConfig = await readConfig(result.previewConfigPath!);
+        const tags = previewConfig.getFieldNode(['tags']);
+        if (tags) {
+          previewConfig.appendValueToArray(['tags'], 'autodocs');
+        } else {
+          previewConfig.setFieldValue(['tags'], ['autodocs']);
+        }
+        await writeConfig(previewConfig);
+      }
+
+      await updateMainConfig({ mainConfigPath, dryRun: !!dryRun }, async (main) => {
+        logger.info(`✅ Removing "docs.autodocs" from ${mainConfigPath}`);
+        main.removeField(['docs', 'autodocs']);
+      });
+    }
+  },
+};
--- a/code/lib/cli/src/automigrate/fixes/index.ts
+++ b/code/lib/cli/src/automigrate/fixes/index.ts
@ -28,6 +28,7 @@ import { mdx1to3 } from './mdx-1-to-3';
 import { addonPostCSS } from './addon-postcss';
 import { vta } from './vta';
 import { upgradeStorybookRelatedDependencies } from './upgrade-storybook-related-dependencies';
+import { autodocsTags } from './autodocs-tags';

 export * from '../types';

@ -60,6 +61,7 @@ export const allFixes: Fix[] = [
  mdx1to3,
  upgradeStorybookRelatedDependencies,
  vta,
+  autodocsTags,
 ];

 export const initFixes: Fix[] = [eslintPlugin];
--- a/code/lib/cli/src/automigrate/fixes/react-docgen.ts
+++ b/code/lib/cli/src/automigrate/fixes/react-docgen.ts
@ -62,7 +62,9 @@ export const reactDocgen: Fix<Options> = {
      For known "react-docgen" limitations, see: 
      ${chalk.yellow('https://github.com/storybookjs/storybook/issues/26606')}
      
-      Would you like to switch back to ${chalk.cyan('react-docgen-typescript')} in your Storybook?
+      Press Y to revert to ${chalk.cyan('react-docgen-typesript')}, press N to use ${chalk.cyan(
+        'react-docgen'
+      )}
    `;
    }
  },
--- a/code/lib/cli/src/automigrate/helpers/eslintPlugin.test.ts
+++ b/code/lib/cli/src/automigrate/helpers/eslintPlugin.test.ts
@ -0,0 +1,21 @@
+import { describe, it, expect } from 'vitest';
+import { normalizeExtends } from './eslintPlugin';
+
+describe('normalizeExtends', () => {
+  it('returns empty array when existingExtends is falsy', () => {
+    expect(normalizeExtends(null)).toEqual([]);
+    expect(normalizeExtends(undefined)).toEqual([]);
+  });
+
+  it('returns existingExtends when it is a string', () => {
+    expect(normalizeExtends('foo')).toEqual(['foo']);
+  });
+
+  it('returns existingExtends when it is an array', () => {
+    expect(normalizeExtends(['foo'])).toEqual(['foo']);
+  });
+
+  it('throws when existingExtends is not a string or array', () => {
+    expect(() => normalizeExtends(true)).toThrowError('Invalid eslint extends true');
+  });
+});
--- a/code/lib/cli/src/automigrate/helpers/eslintPlugin.ts
+++ b/code/lib/cli/src/automigrate/helpers/eslintPlugin.ts
@ -47,6 +47,13 @@ export async function extractEslintInfo(packageManager: JsPackageManager): Promi
  return { hasEslint, isStorybookPluginInstalled, eslintConfigFile };
 }

+export const normalizeExtends = (existingExtends: any): string[] => {
+  if (!existingExtends) return [];
+  if (typeof existingExtends === 'string') return [existingExtends];
+  if (Array.isArray(existingExtends)) return existingExtends;
+  throw new Error(`Invalid eslint extends ${existingExtends}`);
+};
+
 export async function configureEslintPlugin(
  eslintFile: string | undefined,
  packageManager: JsPackageManager
@ -55,38 +62,29 @@ export async function configureEslintPlugin(
    paddedLog(`Configuring Storybook ESLint plugin at ${eslintFile}`);
    if (eslintFile.endsWith('json')) {
      const eslintConfig = (await readJson(eslintFile)) as { extends?: string[] };
-      const existingConfigValue = Array.isArray(eslintConfig.extends)
-        ? eslintConfig.extends
-        : [eslintConfig.extends].filter(Boolean);
-      eslintConfig.extends = [
-        ...(existingConfigValue || []),
-        'plugin:storybook/recommended',
-      ] as string[];
+      const existingExtends = normalizeExtends(eslintConfig.extends).filter(Boolean);
+      eslintConfig.extends = [...existingExtends, 'plugin:storybook/recommended'] as string[];

      const eslintFileContents = await readFile(eslintFile, 'utf8');
      const spaces = detectIndent(eslintFileContents).amount || 2;
      await writeJson(eslintFile, eslintConfig, { spaces });
    } else {
      const eslint = await readConfig(eslintFile);
-      const extendsConfig = eslint.getFieldValue(['extends']) || [];
-      const existingConfigValue = Array.isArray(extendsConfig)
-        ? extendsConfig
-        : [extendsConfig].filter(Boolean);
-      eslint.setFieldValue(
-        ['extends'],
-        [...(existingConfigValue || []), 'plugin:storybook/recommended']
-      );
+      const existingExtends = normalizeExtends(eslint.getFieldValue(['extends'])).filter(Boolean);
+      eslint.setFieldValue(['extends'], [...existingExtends, 'plugin:storybook/recommended']);

      await writeConfig(eslint);
    }
  } else {
    paddedLog(`Configuring eslint-plugin-storybook in your package.json`);
    const packageJson = await packageManager.retrievePackageJson();
+    const existingExtends = normalizeExtends(packageJson.eslintConfig?.extends).filter(Boolean);
+
    await packageManager.writePackageJson({
      ...packageJson,
      eslintConfig: {
        ...packageJson.eslintConfig,
-        extends: [...(packageJson.eslintConfig?.extends || []), 'plugin:storybook/recommended'],
+        extends: [...existingExtends, 'plugin:storybook/recommended'],
      },
    });
  }
--- a/code/lib/cli/src/generate.ts
+++ b/code/lib/cli/src/generate.ts
@ -58,6 +58,17 @@ command('init')
  .option('-y --yes', 'Answer yes to all prompts')
  .option('-b --builder <webpack5 | vite>', 'Builder library')
  .option('-l --linkable', 'Prepare installation for link (contributor helper)')
+  // due to how Commander handles default values and negated options, we have to elevate the default into Commander, and we have to specify `--dev`
+  // alongside `--no-dev` even if we are unlikely to directly use `--dev`. https://github.com/tj/commander.js/issues/2068#issuecomment-1804524585
+  .option(
+    '--dev',
+    'Launch the development server after completing initialization. Enabled by default',
+    process.env.CI !== 'true' && process.env.IN_STORYBOOK_SANDBOX !== 'true'
+  )
+  .option(
+    '--no-dev',
+    'Complete the initialization of Storybook without launching the Storybook development server'
+  )
  .action((options: CommandOptions) => {
    initiate(options).catch(() => process.exit(1));
  });
--- a/code/lib/cli/src/generators/SVELTE/index.ts
+++ b/code/lib/cli/src/generators/SVELTE/index.ts
@ -3,7 +3,8 @@ import type { Generator } from '../types';

 const generator: Generator = async (packageManager, npmOptions, options) => {
  await baseGenerator(packageManager, npmOptions, options, 'svelte', {
-    extensions: ['js', 'jsx', 'ts', 'tsx', 'svelte'],
+    extensions: ['js', 'ts', 'svelte'],
+    extraAddons: ['@storybook/addon-svelte-csf'],
  });
 };

--- a/code/lib/cli/src/generators/SVELTEKIT/index.ts
+++ b/code/lib/cli/src/generators/SVELTEKIT/index.ts
@ -8,7 +8,10 @@ const generator: Generator = async (packageManager, npmOptions, options) => {
    npmOptions,
    { ...options, builder: CoreBuilder.Vite },
    'svelte',
-    undefined,
+    {
+      extensions: ['js', 'ts', 'svelte'],
+      extraAddons: ['@storybook/addon-svelte-csf'],
+    },
    'sveltekit'
  );
 };
--- a/code/lib/cli/src/generators/types.ts
+++ b/code/lib/cli/src/generators/types.ts
@ -53,4 +53,5 @@ export type CommandOptions = {
  disableTelemetry?: boolean;
  enableCrashReports?: boolean;
  debug?: boolean;
+  dev?: boolean;
 };
--- a/code/lib/cli/src/initiate.ts
+++ b/code/lib/cli/src/initiate.ts
@ -405,7 +405,7 @@ export async function doInitiate(options: CommandOptions): Promise<
  );

  return {
-    shouldRunDev: process.env.CI !== 'true' && process.env.IN_STORYBOOK_SANDBOX !== 'true',
+    shouldRunDev: !!options.dev,
    projectType,
    packageManager,
    storybookCommand,
--- a/code/lib/cli/src/sandbox.ts
+++ b/code/lib/cli/src/sandbox.ts
@ -225,6 +225,7 @@ export const sandbox = async ({
        process.chdir(templateDestination);
        // we run doInitiate, instead of initiate, to avoid sending this init event to telemetry, because it's not a real world project
        await doInitiate({
+          dev: process.env.CI !== 'true' && process.env.IN_STORYBOOK_SANBOX !== 'true',
          ...options,
        });
        process.chdir(before);
--- a/code/lib/client-logger/package.json
+++ b/code/lib/client-logger/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/client-logger",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "",
  "keywords": [
    "storybook"
--- a/code/lib/codemod/package.json
+++ b/code/lib/codemod/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/codemod",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "A collection of codemod scripts written with JSCodeshift",
  "keywords": [
    "storybook"
--- a/code/lib/core-common/package.json
+++ b/code/lib/core-common/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/core-common",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Storybook framework-agnostic API",
  "keywords": [
    "storybook"
--- a/code/lib/core-common/src/utils/get-storybook-info.ts
+++ b/code/lib/core-common/src/utils/get-storybook-info.ts
@ -96,7 +96,7 @@ export const findConfigFile = (prefix: string, configDir: string) => {

 export const getConfigInfo = (packageJson: PackageJson, configDir?: string) => {
  let storybookConfigDir = configDir ?? '.storybook';
-  const storybookScript = packageJson.scripts?.['storybook'];
+  const storybookScript = packageJson.scripts?.storybook;
  if (storybookScript && !configDir) {
    const configParam = getStorybookConfiguration(storybookScript, '-c', '--config-dir');
    if (configParam) storybookConfigDir = configParam;
--- a/code/lib/core-common/src/versions.ts
+++ b/code/lib/core-common/src/versions.ts
@ -1,83 +1,83 @@
 // auto generated file, do not edit
 export default {
-  '@storybook/addon-a11y': '8.1.0-beta.0',
-  '@storybook/addon-actions': '8.1.0-beta.0',
-  '@storybook/addon-backgrounds': '8.1.0-beta.0',
-  '@storybook/addon-controls': '8.1.0-beta.0',
-  '@storybook/addon-docs': '8.1.0-beta.0',
-  '@storybook/addon-essentials': '8.1.0-beta.0',
-  '@storybook/addon-highlight': '8.1.0-beta.0',
-  '@storybook/addon-interactions': '8.1.0-beta.0',
-  '@storybook/addon-jest': '8.1.0-beta.0',
-  '@storybook/addon-links': '8.1.0-beta.0',
-  '@storybook/addon-mdx-gfm': '8.1.0-beta.0',
-  '@storybook/addon-measure': '8.1.0-beta.0',
-  '@storybook/addon-onboarding': '8.1.0-beta.0',
-  '@storybook/addon-outline': '8.1.0-beta.0',
-  '@storybook/addon-storysource': '8.1.0-beta.0',
-  '@storybook/addon-themes': '8.1.0-beta.0',
-  '@storybook/addon-toolbars': '8.1.0-beta.0',
-  '@storybook/addon-viewport': '8.1.0-beta.0',
-  '@storybook/angular': '8.1.0-beta.0',
-  '@storybook/blocks': '8.1.0-beta.0',
-  '@storybook/builder-manager': '8.1.0-beta.0',
-  '@storybook/builder-vite': '8.1.0-beta.0',
-  '@storybook/builder-webpack5': '8.1.0-beta.0',
-  '@storybook/channels': '8.1.0-beta.0',
-  '@storybook/cli': '8.1.0-beta.0',
-  '@storybook/client-logger': '8.1.0-beta.0',
-  '@storybook/codemod': '8.1.0-beta.0',
-  '@storybook/components': '8.1.0-beta.0',
-  '@storybook/core-common': '8.1.0-beta.0',
-  '@storybook/core-events': '8.1.0-beta.0',
-  '@storybook/core-server': '8.1.0-beta.0',
-  '@storybook/core-webpack': '8.1.0-beta.0',
-  '@storybook/csf-plugin': '8.1.0-beta.0',
-  '@storybook/csf-tools': '8.1.0-beta.0',
-  '@storybook/docs-tools': '8.1.0-beta.0',
-  '@storybook/ember': '8.1.0-beta.0',
-  '@storybook/html': '8.1.0-beta.0',
-  '@storybook/html-vite': '8.1.0-beta.0',
-  '@storybook/html-webpack5': '8.1.0-beta.0',
-  '@storybook/instrumenter': '8.1.0-beta.0',
-  '@storybook/manager': '8.1.0-beta.0',
-  '@storybook/manager-api': '8.1.0-beta.0',
-  '@storybook/nextjs': '8.1.0-beta.0',
-  '@storybook/node-logger': '8.1.0-beta.0',
-  '@storybook/preact': '8.1.0-beta.0',
-  '@storybook/preact-vite': '8.1.0-beta.0',
-  '@storybook/preact-webpack5': '8.1.0-beta.0',
-  '@storybook/preset-create-react-app': '8.1.0-beta.0',
-  '@storybook/preset-html-webpack': '8.1.0-beta.0',
-  '@storybook/preset-preact-webpack': '8.1.0-beta.0',
-  '@storybook/preset-react-webpack': '8.1.0-beta.0',
-  '@storybook/preset-server-webpack': '8.1.0-beta.0',
-  '@storybook/preset-svelte-webpack': '8.1.0-beta.0',
-  '@storybook/preset-vue3-webpack': '8.1.0-beta.0',
-  '@storybook/preview': '8.1.0-beta.0',
-  '@storybook/preview-api': '8.1.0-beta.0',
-  '@storybook/react': '8.1.0-beta.0',
-  '@storybook/react-dom-shim': '8.1.0-beta.0',
-  '@storybook/react-vite': '8.1.0-beta.0',
-  '@storybook/react-webpack5': '8.1.0-beta.0',
-  '@storybook/router': '8.1.0-beta.0',
-  '@storybook/server': '8.1.0-beta.0',
-  '@storybook/server-webpack5': '8.1.0-beta.0',
-  '@storybook/source-loader': '8.1.0-beta.0',
-  '@storybook/svelte': '8.1.0-beta.0',
-  '@storybook/svelte-vite': '8.1.0-beta.0',
-  '@storybook/svelte-webpack5': '8.1.0-beta.0',
-  '@storybook/sveltekit': '8.1.0-beta.0',
-  '@storybook/telemetry': '8.1.0-beta.0',
-  '@storybook/test': '8.1.0-beta.0',
-  '@storybook/theming': '8.1.0-beta.0',
-  '@storybook/types': '8.1.0-beta.0',
-  '@storybook/vue3': '8.1.0-beta.0',
-  '@storybook/vue3-vite': '8.1.0-beta.0',
-  '@storybook/vue3-webpack5': '8.1.0-beta.0',
-  '@storybook/web-components': '8.1.0-beta.0',
-  '@storybook/web-components-vite': '8.1.0-beta.0',
-  '@storybook/web-components-webpack5': '8.1.0-beta.0',
-  sb: '8.1.0-beta.0',
-  storybook: '8.1.0-beta.0',
+  '@storybook/addon-a11y': '8.2.0-alpha.0',
+  '@storybook/addon-actions': '8.2.0-alpha.0',
+  '@storybook/addon-backgrounds': '8.2.0-alpha.0',
+  '@storybook/addon-controls': '8.2.0-alpha.0',
+  '@storybook/addon-docs': '8.2.0-alpha.0',
+  '@storybook/addon-essentials': '8.2.0-alpha.0',
+  '@storybook/addon-highlight': '8.2.0-alpha.0',
+  '@storybook/addon-interactions': '8.2.0-alpha.0',
+  '@storybook/addon-jest': '8.2.0-alpha.0',
+  '@storybook/addon-links': '8.2.0-alpha.0',
+  '@storybook/addon-mdx-gfm': '8.2.0-alpha.0',
+  '@storybook/addon-measure': '8.2.0-alpha.0',
+  '@storybook/addon-onboarding': '8.2.0-alpha.0',
+  '@storybook/addon-outline': '8.2.0-alpha.0',
+  '@storybook/addon-storysource': '8.2.0-alpha.0',
+  '@storybook/addon-themes': '8.2.0-alpha.0',
+  '@storybook/addon-toolbars': '8.2.0-alpha.0',
+  '@storybook/addon-viewport': '8.2.0-alpha.0',
+  '@storybook/angular': '8.2.0-alpha.0',
+  '@storybook/blocks': '8.2.0-alpha.0',
+  '@storybook/builder-manager': '8.2.0-alpha.0',
+  '@storybook/builder-vite': '8.2.0-alpha.0',
+  '@storybook/builder-webpack5': '8.2.0-alpha.0',
+  '@storybook/channels': '8.2.0-alpha.0',
+  '@storybook/cli': '8.2.0-alpha.0',
+  '@storybook/client-logger': '8.2.0-alpha.0',
+  '@storybook/codemod': '8.2.0-alpha.0',
+  '@storybook/components': '8.2.0-alpha.0',
+  '@storybook/core-common': '8.2.0-alpha.0',
+  '@storybook/core-events': '8.2.0-alpha.0',
+  '@storybook/core-server': '8.2.0-alpha.0',
+  '@storybook/core-webpack': '8.2.0-alpha.0',
+  '@storybook/csf-plugin': '8.2.0-alpha.0',
+  '@storybook/csf-tools': '8.2.0-alpha.0',
+  '@storybook/docs-tools': '8.2.0-alpha.0',
+  '@storybook/ember': '8.2.0-alpha.0',
+  '@storybook/html': '8.2.0-alpha.0',
+  '@storybook/html-vite': '8.2.0-alpha.0',
+  '@storybook/html-webpack5': '8.2.0-alpha.0',
+  '@storybook/instrumenter': '8.2.0-alpha.0',
+  '@storybook/manager': '8.2.0-alpha.0',
+  '@storybook/manager-api': '8.2.0-alpha.0',
+  '@storybook/nextjs': '8.2.0-alpha.0',
+  '@storybook/node-logger': '8.2.0-alpha.0',
+  '@storybook/preact': '8.2.0-alpha.0',
+  '@storybook/preact-vite': '8.2.0-alpha.0',
+  '@storybook/preact-webpack5': '8.2.0-alpha.0',
+  '@storybook/preset-create-react-app': '8.2.0-alpha.0',
+  '@storybook/preset-html-webpack': '8.2.0-alpha.0',
+  '@storybook/preset-preact-webpack': '8.2.0-alpha.0',
+  '@storybook/preset-react-webpack': '8.2.0-alpha.0',
+  '@storybook/preset-server-webpack': '8.2.0-alpha.0',
+  '@storybook/preset-svelte-webpack': '8.2.0-alpha.0',
+  '@storybook/preset-vue3-webpack': '8.2.0-alpha.0',
+  '@storybook/preview': '8.2.0-alpha.0',
+  '@storybook/preview-api': '8.2.0-alpha.0',
+  '@storybook/react': '8.2.0-alpha.0',
+  '@storybook/react-dom-shim': '8.2.0-alpha.0',
+  '@storybook/react-vite': '8.2.0-alpha.0',
+  '@storybook/react-webpack5': '8.2.0-alpha.0',
+  '@storybook/router': '8.2.0-alpha.0',
+  '@storybook/server': '8.2.0-alpha.0',
+  '@storybook/server-webpack5': '8.2.0-alpha.0',
+  '@storybook/source-loader': '8.2.0-alpha.0',
+  '@storybook/svelte': '8.2.0-alpha.0',
+  '@storybook/svelte-vite': '8.2.0-alpha.0',
+  '@storybook/svelte-webpack5': '8.2.0-alpha.0',
+  '@storybook/sveltekit': '8.2.0-alpha.0',
+  '@storybook/telemetry': '8.2.0-alpha.0',
+  '@storybook/test': '8.2.0-alpha.0',
+  '@storybook/theming': '8.2.0-alpha.0',
+  '@storybook/types': '8.2.0-alpha.0',
+  '@storybook/vue3': '8.2.0-alpha.0',
+  '@storybook/vue3-vite': '8.2.0-alpha.0',
+  '@storybook/vue3-webpack5': '8.2.0-alpha.0',
+  '@storybook/web-components': '8.2.0-alpha.0',
+  '@storybook/web-components-vite': '8.2.0-alpha.0',
+  '@storybook/web-components-webpack5': '8.2.0-alpha.0',
+  sb: '8.2.0-alpha.0',
+  storybook: '8.2.0-alpha.0',
 };
--- a/code/lib/core-events/package.json
+++ b/code/lib/core-events/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/core-events",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Event names used in storybook core",
  "keywords": [
    "storybook"
--- a/code/lib/core-server/package.json
+++ b/code/lib/core-server/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/core-server",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Storybook framework-agnostic API",
  "keywords": [
    "storybook"
--- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts
+++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
@ -159,7 +159,7 @@ export class StoryIndexGenerator {
    );

    const previewCode = await this.getPreviewCode();
-    const projectTags = previewCode ? this.getProjectTags(previewCode) : [];
+    const projectTags = this.getProjectTags(previewCode);

    // Extract stories for each file
    await this.ensureExtracted({ projectTags });
@ -269,7 +269,9 @@ export class StoryIndexGenerator {
          if (!cacheEntry || cacheEntry.type !== 'stories') return false;

          return !!absoluteImports.find((storyImport) =>
-            fileName.match(new RegExp(`^${storyImport}(\\.[^.]+)?$`))
+            fileName.match(
+              new RegExp(`^${storyImport.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}(\\.[^.]+)?$`)
+            )
          );
        })
        .map(([_, cacheEntry]) => cacheEntry as StoriesCacheEntry)
@ -556,7 +558,7 @@ export class StoryIndexGenerator {
    if (this.lastError) throw this.lastError;

    const previewCode = await this.getPreviewCode();
-    const projectTags = previewCode ? this.getProjectTags(previewCode) : [];
+    const projectTags = this.getProjectTags(previewCode);

    // Extract any entries that are currently missing
    // Pull out each file's stories into a list of stories, to be composed and sorted
@ -665,11 +667,14 @@ export class StoryIndexGenerator {
    return previewFile && (await fs.readFile(previewFile, 'utf-8')).toString();
  }

-  getProjectTags(previewCode: string) {
-    const projectAnnotations = loadConfig(previewCode).parse();
+  getProjectTags(previewCode?: string) {
+    let projectTags = [];
    const defaultTags = ['dev', 'test'];
    const extraTags = this.options.docs.autodocs === true ? [AUTODOCS_TAG] : [];
-    const projectTags = projectAnnotations.getFieldValue(['tags']) ?? [];
+    if (previewCode) {
+      const projectAnnotations = loadConfig(previewCode).parse();
+      projectTags = projectAnnotations.getFieldValue(['tags']) ?? [];
+    }
    return [...defaultTags, ...projectTags, ...extraTags];
  }

--- a/code/lib/core-webpack/package.json
+++ b/code/lib/core-webpack/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/core-webpack",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Storybook framework-agnostic API",
  "keywords": [
    "storybook"
--- a/code/lib/csf-plugin/package.json
+++ b/code/lib/csf-plugin/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/csf-plugin",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Enrich CSF files via static analysis",
  "keywords": [
    "storybook"
--- a/code/lib/csf-tools/package.json
+++ b/code/lib/csf-tools/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/csf-tools",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Parse and manipulate CSF and Storybook config files",
  "keywords": [
    "storybook"
--- a/code/lib/docs-tools/package.json
+++ b/code/lib/docs-tools/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/docs-tools",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Shared utility functions for frameworks to implement docs",
  "keywords": [
    "storybook"
--- a/code/lib/instrumenter/package.json
+++ b/code/lib/instrumenter/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/instrumenter",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "",
  "keywords": [
    "storybook"
--- a/code/lib/manager-api/package.json
+++ b/code/lib/manager-api/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/manager-api",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "Core Storybook Manager API & Context",
  "keywords": [
    "storybook"
--- a/code/lib/manager-api/src/version.ts
+++ b/code/lib/manager-api/src/version.ts
@ -1 +1 @@
-export const version = '8.1.0-beta.0';
+export const version = '8.2.0-alpha.0';
--- a/code/lib/node-logger/package.json
+++ b/code/lib/node-logger/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/node-logger",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "",
  "keywords": [
    "storybook"
--- a/code/lib/preview-api/package.json
+++ b/code/lib/preview-api/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/preview-api",
-  "version": "8.1.0-beta.0",
+  "version": "8.2.0-alpha.0",
  "description": "",
  "keywords": [
    "storybook"
--- a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts
+++ b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts
@ -1,6 +1,4 @@
 /* eslint-disable @typescript-eslint/no-loop-func,no-underscore-dangle */
-import { dedent } from 'ts-dedent';
-
 import { global } from '@storybook/global';
 import type {
  Args,
@ -23,7 +21,6 @@ import type {
 } from '@storybook/types';
 import { type CleanupCallback, includeConditionalArg, combineTags } from '@storybook/csf';
 import { global as globalThis } from '@storybook/global';
-import { once } from '@storybook/client-logger';

 import { applyHooks } from '../../addons';
 import { combineParameters } from '../parameters';
@ -159,13 +156,6 @@ function preparePartialAnnotations<TRenderer extends Renderer>(
  // will have a limited cost. If this proves misguided, we can refactor it.

  const defaultTags = ['dev', 'test'];
-  if (typeof globalThis.DOCS_OPTIONS?.autodocs !== 'undefined') {
-    once.warn(dedent`
-      The \`docs.autodocs\` setting in '.storybook/main.js' is deprecated. Use \`tags: ['autodocs']\` in \`.storybook/preview.js\` instead.
-
-      For more info see: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-docsautodocs-is-deprecated
-    `);
-  }
  const extraTags = globalThis.DOCS_OPTIONS?.autodocs === true ? ['autodocs'] : [];

  const tags = combineTags(
--- a/Show More
+++ b/Show More