diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json
index 3657895794d1..9e272a673991 100644
--- a/code/addons/interactions/package.json
+++ b/code/addons/interactions/package.json
@@ -89,7 +89,7 @@
   "devDependencies": {
     "@storybook/jest": "^0.0.10",
     "@storybook/testing-library": "0.0.14-next.0",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "formik": "^2.2.9",
     "typescript": "^4.9.3"
   },
diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json
index e8e835007c56..32d2498be2d2 100644
--- a/code/frameworks/angular/package.json
+++ b/code/frameworks/angular/package.json
@@ -47,7 +47,7 @@
     "@storybook/node-logger": "7.0.0-alpha.52",
     "@storybook/store": "7.0.0-alpha.52",
     "@storybook/types": "7.0.0-alpha.52",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "@types/react": "^16.14.34",
     "@types/react-dom": "^16.9.14",
     "@types/semver": "^7.3.4",
diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json
index 8fec7293e724..538d3162f32a 100644
--- a/code/frameworks/html-webpack5/package.json
+++ b/code/frameworks/html-webpack5/package.json
@@ -54,7 +54,7 @@
     "@storybook/core-common": "7.0.0-alpha.52",
     "@storybook/html": "7.0.0-alpha.52",
     "@storybook/preset-html-webpack": "7.0.0-alpha.52",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "global": "^4.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0"
diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json
index 110f70a23319..3ea87a8bb663 100644
--- a/code/frameworks/nextjs/package.json
+++ b/code/frameworks/nextjs/package.json
@@ -65,7 +65,7 @@
     "@storybook/node-logger": "7.0.0-alpha.52",
     "@storybook/preset-react-webpack": "7.0.0-alpha.52",
     "@storybook/react": "7.0.0-alpha.52",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "find-up": "^5.0.0",
     "fs-extra": "^9.0.1",
     "image-size": "^1.0.0",
diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json
index a1568f10b917..6342edfa57c4 100644
--- a/code/frameworks/preact-webpack5/package.json
+++ b/code/frameworks/preact-webpack5/package.json
@@ -54,7 +54,7 @@
     "@storybook/core-common": "7.0.0-alpha.52",
     "@storybook/preact": "7.0.0-alpha.52",
     "@storybook/preset-preact-webpack": "7.0.0-alpha.52",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0"
   },
diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json
index cd1d2fc5f1bb..f828bcbc5238 100644
--- a/code/frameworks/react-vite/package.json
+++ b/code/frameworks/react-vite/package.json
@@ -67,7 +67,7 @@
     "vite": "^3.1.3"
   },
   "devDependencies": {
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "typescript": "^4.9.3",
     "vite": "^3.1.3"
   },
diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json
index eece030e924d..d4a8f42d0d07 100644
--- a/code/frameworks/react-webpack5/package.json
+++ b/code/frameworks/react-webpack5/package.json
@@ -54,7 +54,7 @@
     "@storybook/builder-webpack5": "7.0.0-alpha.52",
     "@storybook/preset-react-webpack": "7.0.0-alpha.52",
     "@storybook/react": "7.0.0-alpha.52",
-    "@types/node": "^16.0.0 || ^18.0.0"
+    "@types/node": "^16.0.0"
   },
   "devDependencies": {
     "jest-specific-snapshot": "^6.0.0",
diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json
index 3915169aa641..2818fc34c1a3 100644
--- a/code/frameworks/server-webpack5/package.json
+++ b/code/frameworks/server-webpack5/package.json
@@ -54,7 +54,7 @@
     "@storybook/core-common": "7.0.0-alpha.52",
     "@storybook/preset-server-webpack": "7.0.0-alpha.52",
     "@storybook/server": "7.0.0-alpha.52",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0"
   },
diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json
index a4134222a971..d90dc53c5dbf 100644
--- a/code/frameworks/svelte-vite/package.json
+++ b/code/frameworks/svelte-vite/package.json
@@ -67,7 +67,7 @@
     "vite": "^3.1.3"
   },
   "devDependencies": {
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "typescript": "^4.9.3",
     "vite": "^3.1.3"
   },
diff --git a/code/frameworks/vue-webpack5/package.json b/code/frameworks/vue-webpack5/package.json
index 11c51707f26a..f638d17edd66 100644
--- a/code/frameworks/vue-webpack5/package.json
+++ b/code/frameworks/vue-webpack5/package.json
@@ -54,7 +54,7 @@
     "@storybook/core-common": "7.0.0-alpha.52",
     "@storybook/preset-vue-webpack": "7.0.0-alpha.52",
     "@storybook/vue": "7.0.0-alpha.52",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0"
   },
diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json
index 4a79a609cd62..ac53438f83a4 100644
--- a/code/frameworks/vue3-vite/package.json
+++ b/code/frameworks/vue3-vite/package.json
@@ -65,7 +65,7 @@
     "vue-docgen-api": "^4.40.0"
   },
   "devDependencies": {
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "typescript": "^4.9.3",
     "vite": "^3.1.3"
   },
diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json
index 0d75336f71dc..142183db5562 100644
--- a/code/frameworks/vue3-webpack5/package.json
+++ b/code/frameworks/vue3-webpack5/package.json
@@ -54,7 +54,7 @@
     "@storybook/core-common": "7.0.0-alpha.52",
     "@storybook/preset-vue3-webpack": "7.0.0-alpha.52",
     "@storybook/vue3": "7.0.0-alpha.52",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0"
   },
diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json
index 131a40e68959..be6eecd96ba4 100644
--- a/code/frameworks/web-components-vite/package.json
+++ b/code/frameworks/web-components-vite/package.json
@@ -64,7 +64,7 @@
     "vite": "3"
   },
   "devDependencies": {
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "typescript": "^4.9.3",
     "vite": "^3.1.0"
   },
diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json
index b8c4565b4534..b3c46b7b2690 100644
--- a/code/frameworks/web-components-webpack5/package.json
+++ b/code/frameworks/web-components-webpack5/package.json
@@ -57,7 +57,7 @@
     "@storybook/core-common": "7.0.0-alpha.52",
     "@storybook/preset-web-components-webpack": "7.0.0-alpha.52",
     "@storybook/web-components": "7.0.0-alpha.52",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0"
   },
diff --git a/code/lib/api/package.json b/code/lib/api/package.json
index da3d208a2ba8..45177466b690 100644
--- a/code/lib/api/package.json
+++ b/code/lib/api/package.json
@@ -24,11 +24,6 @@
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
-    "./shortcut": {
-      "require": "./dist/shortcut.js",
-      "import": "./dist/shortcut.mjs",
-      "types": "./dist/shortcut.d.ts"
-    },
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -79,8 +74,7 @@
   },
   "bundler": {
     "entries": [
-      "./src/index.tsx",
-      "./src/shortcut.ts"
+      "./src/index.tsx"
     ]
   },
   "gitHead": "d2494e3f51ce0f55bcb1ef693a6477c669fbe666"
diff --git a/code/lib/api/shortcut.d.ts b/code/lib/api/shortcut.d.ts
deleted file mode 100644
index 26c2671b9af5..000000000000
--- a/code/lib/api/shortcut.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export type KeyCollection = string[];
-
-export function shortcutToHumanString(shortcut: KeyCollection): string;
-export function eventToShortcut(e: KeyboardEvent): KeyCollection | null;
-export function shortcutMatchesShortcut(
-  inputShortcut: KeyCollection,
-  shortcut: KeyCollection
-): boolean;
diff --git a/code/lib/api/shortcut.js b/code/lib/api/shortcut.js
deleted file mode 100644
index 9fb9988699cd..000000000000
--- a/code/lib/api/shortcut.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from './dist/shortcut';
diff --git a/code/lib/api/src/index.tsx b/code/lib/api/src/index.tsx
index ff0e9cee8388..380bd9085972 100644
--- a/code/lib/api/src/index.tsx
+++ b/code/lib/api/src/index.tsx
@@ -64,6 +64,7 @@ import * as url from './modules/url';
 import * as version from './modules/versions';
 // eslint-disable-next-line import/no-cycle
 import * as globals from './modules/globals';
+import { eventToShortcut, shortcutMatchesShortcut, shortcutToHumanString } from './lib/shortcut';
 
 const { ActiveTabs } = layout;
 
@@ -480,3 +481,5 @@ export function useArgTypes(): API_ArgTypes {
   const current = useCurrentStory();
   return (current?.type === 'story' && current.argTypes) || {};
 }
+
+export { eventToShortcut, shortcutToHumanString, shortcutMatchesShortcut };
diff --git a/code/lib/builder-manager/src/index.ts b/code/lib/builder-manager/src/index.ts
index 84eac54e7937..cda53d1161d3 100644
--- a/code/lib/builder-manager/src/index.ts
+++ b/code/lib/builder-manager/src/index.ts
@@ -125,8 +125,8 @@ const starter: StarterFunction = async function* starterGeneratorFn({
 
   const coreDirOrigin = join(dirname(require.resolve('@storybook/manager/package.json')), 'dist');
 
-  router.use(`/sb-addons`, express.static(addonsDir));
-  router.use(`/sb-manager`, express.static(coreDirOrigin));
+  router.use(`/sb-addons`, express.static(addonsDir, { immutable: true, maxAge: '5m' }));
+  router.use(`/sb-manager`, express.static(coreDirOrigin, { immutable: true, maxAge: '5m' }));
 
   const { cssFiles, jsFiles } = await readOrderedFiles(addonsDir, compilation?.outputFiles);
 
diff --git a/code/lib/builder-manager/src/utils/template.ts b/code/lib/builder-manager/src/utils/template.ts
index 4e0210f9509a..48d402a9328d 100644
--- a/code/lib/builder-manager/src/utils/template.ts
+++ b/code/lib/builder-manager/src/utils/template.ts
@@ -57,7 +57,7 @@ export const renderHTML = async (
   refs: Promise<Record<string, Ref>>,
   logLevel: Promise<string>,
   docsOptions: Promise<DocsOptions>,
-  { versionCheck, releaseNotesData, docsMode, previewUrl, serverChannelUrl }: Options
+  { versionCheck, releaseNotesData, previewUrl, serverChannelUrl, configType }: Options
 ) => {
   const customHeadRef = await customHead;
   const titleRef = await title;
@@ -71,6 +71,7 @@ export const renderHTML = async (
       REFS: JSON.stringify(await refs, null, 2),
       LOGLEVEL: JSON.stringify(await logLevel, null, 2),
       DOCS_OPTIONS: JSON.stringify(await docsOptions, null, 2),
+      CONFIG_TYPE: JSON.stringify(await configType, null, 2),
       // These two need to be double stringified because the UI expects a string
       VERSIONCHECK: JSON.stringify(JSON.stringify(versionCheck), null, 2),
       RELEASE_NOTES_DATA: JSON.stringify(JSON.stringify(releaseNotesData), null, 2),
diff --git a/code/lib/builder-manager/templates/template.ejs b/code/lib/builder-manager/templates/template.ejs
index d513ace5dd3f..2fd986bf3c4b 100644
--- a/code/lib/builder-manager/templates/template.ejs
+++ b/code/lib/builder-manager/templates/template.ejs
@@ -8,6 +8,8 @@
     <link rel="shortcut icon" href="./favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
+    <link href="./sb-preview/runtime.mjs" rel="preload" as="script">
+
     <% if (typeof head !== 'undefined') { %> <%- head %> <% } %>
 
     <style>
@@ -33,10 +35,12 @@
     </script>
     <% } %>
 
-    <script src="./sb-manager/runtime.mjs" type="module"></script>
+    <script type="module">
+      import './sb-manager/runtime.mjs';
 
-    <% files.js.forEach(file => { %>
-    <script src="<%= file %>" type="module"></script>
-    <% }); %>
+      <% files.js.forEach(file => { %>
+      import './<%= file %>';
+      <% }); %>
+    </script>    
   </body>
 </html>
diff --git a/code/lib/builder-vite/input/iframe.html b/code/lib/builder-vite/input/iframe.html
index abb2f1373a15..c26846fa2b73 100644
--- a/code/lib/builder-vite/input/iframe.html
+++ b/code/lib/builder-vite/input/iframe.html
@@ -14,17 +14,22 @@
       window.STORIES = '[STORIES HERE]';
       window.DOCS_OPTIONS = '[DOCS_OPTIONS HERE]';
       window.SERVER_CHANNEL_URL = '[SERVER_CHANNEL_URL HERE]';
-
+      
       // We do this so that "module && module.hot" etc. in Storybook source code
       // doesn't fail (it will simply be disabled)
       window.module = undefined;
-    </script>
+      </script>
     <!-- [HEAD HTML SNIPPET HERE] -->
   </head>
   <body>
     <!-- [BODY HTML SNIPPET HERE] -->
     <div id="storybook-root"></div>
     <div id="storybook-docs"></div>
-    <script type="module" src="/virtual:/@storybook/builder-vite/vite-app.js"></script>
+    <script type="module">
+      /* eslint-disable import/no-absolute-path, import/extensions, import/no-unresolved */
+      
+      import '/sb-preview/runtime.mjs';
+      import '/virtual:/@storybook/builder-vite/vite-app.js';
+    </script>
   </body>
 </html>
diff --git a/code/lib/builder-vite/package.json b/code/lib/builder-vite/package.json
index 2d620ddd9f67..00aacc9e40c7 100644
--- a/code/lib/builder-vite/package.json
+++ b/code/lib/builder-vite/package.json
@@ -41,18 +41,22 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
+    "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
     "@joshwooding/vite-plugin-react-docgen-typescript": "0.0.5",
     "@storybook/client-api": "7.0.0-alpha.52",
     "@storybook/client-logger": "7.0.0-alpha.52",
     "@storybook/core-common": "7.0.0-alpha.52",
     "@storybook/mdx2-csf": "next",
     "@storybook/node-logger": "7.0.0-alpha.52",
+    "@storybook/preview": "7.0.0-alpha.52",
     "@storybook/preview-web": "7.0.0-alpha.52",
     "@storybook/source-loader": "7.0.0-alpha.52",
     "@storybook/types": "7.0.0-alpha.52",
     "@vitejs/plugin-react": "^2.0.0",
     "browser-assert": "^1.2.1",
     "es-module-lexer": "^0.9.3",
+    "express": "^4.17.1",
+    "fs-extra": "^9.0.1",
     "glob": "^7.2.0",
     "glob-promise": "^4.2.0",
     "magic-string": "^0.26.1",
@@ -61,7 +65,7 @@
   },
   "devDependencies": {
     "@types/express": "^4.17.13",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "typescript": "^4.9.3",
     "vite": "^3.1.3"
   },
diff --git a/code/lib/builder-vite/src/index.ts b/code/lib/builder-vite/src/index.ts
index 8f4aa2570b7f..b397f3b7438b 100644
--- a/code/lib/builder-vite/src/index.ts
+++ b/code/lib/builder-vite/src/index.ts
@@ -1,9 +1,11 @@
 // noinspection JSUnusedGlobalSymbols
 
-import * as fs from 'fs';
+import * as fs from 'fs-extra';
 import type { Builder, StorybookConfig as StorybookBaseConfig, Options } from '@storybook/types';
-import type { RequestHandler, Request, Response } from 'express';
+import type { RequestHandler } from 'express';
 import type { InlineConfig, UserConfig, ViteDevServer } from 'vite';
+import express from 'express';
+import { dirname, join, parse } from 'path';
 import { transformIframeHtml } from './transform-iframe-html';
 import { createViteServer } from './vite-server';
 import { build as viteBuild } from './build';
@@ -44,7 +46,7 @@ function iframeMiddleware(options: ExtendedOptions, server: ViteDevServer): Requ
       return;
     }
 
-    const indexHtml = fs.readFileSync(
+    const indexHtml = await fs.readFile(
       require.resolve('@storybook/builder-vite/input/iframe.html'),
       'utf-8'
     );
@@ -75,12 +77,10 @@ export const start: ViteBuilder['start'] = async ({
 }) => {
   server = await createViteServer(options as ExtendedOptions, devServer);
 
-  // Just mock this endpoint (which is really Webpack-specific) so we don't get spammed with 404 in browser devtools
-  // TODO: we should either show some sort of progress from Vite, or just try to disable the whole Loader in the Manager UI.
-  router.get('/progress', (req: Request, res: Response) => {
-    res.header('Cache-Control', 'no-cache');
-    res.header('Content-Type', 'text/event-stream');
-  });
+  const previewResolvedDir = dirname(require.resolve('@storybook/preview/package.json'));
+  const previewDirOrigin = join(previewResolvedDir, 'dist');
+
+  router.use(`/sb-preview`, express.static(previewDirOrigin, { immutable: true, maxAge: '5m' }));
 
   router.use(iframeMiddleware(options as ExtendedOptions, server));
   router.use(server.middlewares);
@@ -93,5 +93,23 @@ export const start: ViteBuilder['start'] = async ({
 };
 
 export const build: ViteBuilder['build'] = async ({ options }) => {
-  return viteBuild(options as ExtendedOptions);
+  const viteCompilation = viteBuild(options as ExtendedOptions);
+
+  const previewResolvedDir = dirname(require.resolve('@storybook/preview/package.json'));
+  const previewDirOrigin = join(previewResolvedDir, 'dist');
+  const previewDirTarget = join(options.outputDir || '', `sb-preview`);
+
+  const previewFiles = fs.copy(previewDirOrigin, previewDirTarget, {
+    filter: (src) => {
+      const { ext } = parse(src);
+      if (ext) {
+        return ext === '.mjs';
+      }
+      return true;
+    },
+  });
+
+  const [out] = await Promise.all([viteCompilation, previewFiles]);
+
+  return out;
 };
diff --git a/code/lib/builder-vite/src/optimizeDeps.ts b/code/lib/builder-vite/src/optimizeDeps.ts
index c9f1bf398e73..1aaf071638ab 100644
--- a/code/lib/builder-vite/src/optimizeDeps.ts
+++ b/code/lib/builder-vite/src/optimizeDeps.ts
@@ -1,6 +1,8 @@
 import * as path from 'path';
 import { normalizePath, resolveConfig } from 'vite';
-import type { InlineConfig as ViteInlineConfig } from 'vite';
+import type { InlineConfig as ViteInlineConfig, UserConfig } from 'vite';
+import { globalExternals } from '@fal-works/esbuild-plugin-global-externals';
+import { definitions } from '@storybook/preview/globals';
 import { listStories } from './list-stories';
 
 import type { ExtendedOptions } from './types';
@@ -113,11 +115,16 @@ export async function getOptimizeDeps(config: ViteInlineConfig, options: Extende
   const resolve = resolvedConfig.createResolver({ asSrc: false });
   const include = await asyncFilter(INCLUDE_CANDIDATES, async (id) => Boolean(await resolve(id)));
 
-  return {
+  const optimizeDeps: UserConfig['optimizeDeps'] = {
     // We don't need to resolve the glob since vite supports globs for entries.
     entries: stories,
     // We need Vite to precompile these dependencies, because they contain non-ESM code that would break
     // if we served it directly to the browser.
     include,
+    esbuildOptions: {
+      plugins: [globalExternals(definitions)],
+    },
   };
+
+  return optimizeDeps;
 }
diff --git a/code/lib/builder-vite/src/plugins/code-generator-plugin.ts b/code/lib/builder-vite/src/plugins/code-generator-plugin.ts
index e4460515a45c..7c7f6956f797 100644
--- a/code/lib/builder-vite/src/plugins/code-generator-plugin.ts
+++ b/code/lib/builder-vite/src/plugins/code-generator-plugin.ts
@@ -101,6 +101,10 @@ export function codeGeneratorPlugin(options: ExtendedOptions): Plugin {
       if (source === virtualAddonSetupFile) {
         return virtualAddonSetupFile;
       }
+      if (source === '/sb-preview/runtime.mjs') {
+        return '/sb-preview/runtime.mjs';
+      }
+
       return undefined;
     },
     async load(id) {
@@ -127,6 +131,11 @@ export function codeGeneratorPlugin(options: ExtendedOptions): Plugin {
         return generateIframeScriptCode(options);
       }
 
+      // This is handled by the express router, not vite
+      if (id === '/sb-preview/runtime.mjs') {
+        return '';
+      }
+
       if (id === iframeId) {
         return fs.readFileSync(
           require.resolve('@storybook/builder-vite/input/iframe.html'),
diff --git a/code/lib/builder-vite/src/vite-config.ts b/code/lib/builder-vite/src/vite-config.ts
index fd0b872ac914..a7de14c33fab 100644
--- a/code/lib/builder-vite/src/vite-config.ts
+++ b/code/lib/builder-vite/src/vite-config.ts
@@ -5,6 +5,7 @@ import type {
   InlineConfig as ViteInlineConfig,
   PluginOption,
   UserConfig as ViteConfig,
+  InlineConfig,
 } from 'vite';
 import viteReact from '@vitejs/plugin-react';
 import { isPreservingSymlinks, getFrameworkName } from '@storybook/core-common';
@@ -42,12 +43,13 @@ export async function commonConfig(
 
   const { config: userConfig = {} } = (await loadConfigFromFile(configEnv)) ?? {};
 
-  const sbConfig = {
+  const sbConfig: InlineConfig = {
     configFile: false,
     cacheDir: 'node_modules/.cache/.vite-storybook',
     root: path.resolve(options.configDir, '..'),
     // Allow storybook deployed as subfolder.  See https://github.com/storybookjs/builder-vite/issues/238
     base: './',
+
     plugins: await pluginConfig(options),
     resolve: {
       preserveSymlinks: isPreservingSymlinks(),
diff --git a/code/lib/builder-webpack5/package.json b/code/lib/builder-webpack5/package.json
index 43a3f49dd771..af07e5b26709 100644
--- a/code/lib/builder-webpack5/package.json
+++ b/code/lib/builder-webpack5/package.json
@@ -36,6 +36,7 @@
       "types": "./dist/presets/preview-preset.d.ts"
     },
     "./templates/virtualModuleModernEntry.js.handlebars": "./templates/virtualModuleModernEntry.js.handlebars",
+    "./templates/preview.ejs": "./templates/preview.ejs",
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -65,18 +66,21 @@
     "@storybook/core-events": "7.0.0-alpha.52",
     "@storybook/core-webpack": "7.0.0-alpha.52",
     "@storybook/node-logger": "7.0.0-alpha.52",
+    "@storybook/preview": "7.0.0-alpha.52",
     "@storybook/preview-web": "7.0.0-alpha.52",
     "@storybook/router": "7.0.0-alpha.52",
     "@storybook/store": "7.0.0-alpha.52",
     "@storybook/theming": "7.0.0-alpha.52",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "@types/semver": "^7.3.4",
     "babel-loader": "^8.3.0",
     "babel-plugin-named-exports-order": "^0.0.2",
     "browser-assert": "^1.2.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "css-loader": "^6.7.1",
+    "express": "^4.17.1",
     "fork-ts-checker-webpack-plugin": "^7.2.8",
+    "fs-extra": "^9.0.1",
     "global": "^4.4.0",
     "html-webpack-plugin": "^5.5.0",
     "path-browserify": "^1.0.1",
@@ -93,10 +97,12 @@
     "webpack-virtual-modules": "^0.4.3"
   },
   "devDependencies": {
+    "@types/pretty-hrtime": "^1.0.0",
     "@types/terser-webpack-plugin": "^5.2.0",
     "@types/webpack-dev-middleware": "^5.3.0",
     "@types/webpack-hot-middleware": "^2.25.6",
     "@types/webpack-virtual-modules": "^0.1.1",
+    "pretty-hrtime": "^1.0.3",
     "typescript": "^4.9.3"
   },
   "peerDependencies": {
diff --git a/code/lib/builder-webpack5/src/index.ts b/code/lib/builder-webpack5/src/index.ts
index d8ae375a5559..bb3097da7dd3 100644
--- a/code/lib/builder-webpack5/src/index.ts
+++ b/code/lib/builder-webpack5/src/index.ts
@@ -3,13 +3,24 @@ import webpack, { ProgressPlugin } from 'webpack';
 import webpackDevMiddleware from 'webpack-dev-middleware';
 import webpackHotMiddleware from 'webpack-hot-middleware';
 import { logger } from '@storybook/node-logger';
-import { useProgressReporting } from '@storybook/core-common';
 import type { Builder, Options } from '@storybook/types';
 import { checkWebpackVersion } from '@storybook/core-webpack';
-import { join } from 'path';
+import { dirname, join, parse } from 'path';
+import express from 'express';
+import fs from 'fs-extra';
+import { PREVIEW_BUILDER_PROGRESS } from '@storybook/core-events';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import prettyTime from 'pretty-hrtime';
 
 export * from './types';
 
+export const printDuration = (startTime: [number, number]) =>
+  prettyTime(process.hrtime(startTime))
+    .replace(' ms', ' milliseconds')
+    .replace(' s', ' seconds')
+    .replace(' m', ' minutes');
+
 let compilation: ReturnType<typeof webpackDevMiddleware> | undefined;
 let reject: (reason?: any) => void;
 
@@ -98,6 +109,7 @@ const starter: StarterFunction = async function* starterGeneratorFn({
   startTime,
   options,
   router,
+  channel,
 }) {
   const webpackInstance = await executor.get(options);
   yield;
@@ -120,9 +132,40 @@ const starter: StarterFunction = async function* starterGeneratorFn({
     };
   }
 
-  const { handler, modulesCount } = await useProgressReporting(router, startTime, options);
   yield;
-  new ProgressPlugin({ handler, modulesCount }).apply(compiler);
+  const modulesCount = (await options.cache?.get('modulesCount').catch(() => {})) || 1000;
+  let totalModules: number;
+  let value = 0;
+
+  new ProgressPlugin({
+    handler: (newValue, message, arg3) => {
+      value = Math.max(newValue, value); // never go backwards
+      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 complete = parseInt(counts[1], 10);
+        const total = parseInt(counts[2], 10);
+        if (!Number.isNaN(complete) && !Number.isNaN(total)) {
+          (progress as any).modules = { complete, total };
+          totalModules = total;
+        }
+      }
+
+      if (value === 1) {
+        if (options.cache) {
+          options.cache.set('modulesCount', totalModules);
+        }
+
+        if (!progress.message) {
+          progress.message = `Completed in ${printDuration(startTime)}.`;
+        }
+      }
+
+      channel.emit(PREVIEW_BUILDER_PROGRESS, [progress]);
+    },
+    modulesCount,
+  }).apply(compiler);
 
   const middlewareOptions: Parameters<typeof webpackDevMiddleware>[1] = {
     publicPath: config.output?.publicPath as string,
@@ -131,6 +174,11 @@ const starter: StarterFunction = async function* starterGeneratorFn({
 
   compilation = webpackDevMiddleware(compiler, middlewareOptions);
 
+  const previewResolvedDir = dirname(require.resolve('@storybook/preview/package.json'));
+  const previewDirOrigin = join(previewResolvedDir, 'dist');
+
+  router.use(`/sb-preview`, express.static(previewDirOrigin, { immutable: true, maxAge: '5m' }));
+
   router.use(compilation);
   router.use(webpackHotMiddleware(compiler as any));
 
@@ -181,7 +229,7 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
     } as any as Stats;
   }
 
-  return new Promise<Stats>((succeed, fail) => {
+  const webpackCompilation = new Promise<Stats>((succeed, fail) => {
     compiler.run((error, stats) => {
       if (error || !stats || stats.hasErrors()) {
         logger.error('=> Failed to build the preview');
@@ -238,6 +286,24 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
       });
     });
   });
+
+  const previewResolvedDir = dirname(require.resolve('@storybook/preview/package.json'));
+  const previewDirOrigin = join(previewResolvedDir, 'dist');
+  const previewDirTarget = join(options.outputDir || '', `sb-preview`);
+
+  const previewFiles = fs.copy(previewDirOrigin, previewDirTarget, {
+    filter: (src) => {
+      const { ext } = parse(src);
+      if (ext) {
+        return ext === '.mjs';
+      }
+      return true;
+    },
+  });
+
+  const [webpackCompilationOutput] = await Promise.all([webpackCompilation, previewFiles]);
+
+  return webpackCompilationOutput;
 };
 
 export const start = async (options: BuilderStartOptions) => {
diff --git a/code/lib/builder-webpack5/src/presets/preview-preset.ts b/code/lib/builder-webpack5/src/presets/preview-preset.ts
index 4d8daace20ad..9614abcb2d1f 100644
--- a/code/lib/builder-webpack5/src/presets/preview-preset.ts
+++ b/code/lib/builder-webpack5/src/presets/preview-preset.ts
@@ -30,3 +30,6 @@ export const babel = async (config: any, options: any) => ({
 });
 
 export const babelLoaderRef = () => require.resolve('babel-loader');
+
+export const previewMainTemplate = () =>
+  require.resolve('@storybook/builder-webpack5/templates/preview.ejs');
diff --git a/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
index 78dedb2d0df9..19d84baa03a4 100644
--- a/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -1,4 +1,4 @@
-import path from 'path';
+import { dirname, join, resolve } from 'path';
 import { DefinePlugin, HotModuleReplacementPlugin, ProgressPlugin, ProvidePlugin } from 'webpack';
 import type { Configuration } from 'webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
@@ -24,27 +24,17 @@ import type { BuilderOptions, TypescriptOptions } from '../types';
 import { createBabelLoader } from './babel-loader-preview';
 
 const storybookPaths: Record<string, string> = {
-  global: path.dirname(require.resolve(`global/package.json`)),
+  global: dirname(require.resolve(`global/package.json`)),
   ...[
-    'addons',
+    // these packages are not pre-bundled because of react dependencies
     'api',
-    'store',
-    'channels',
-    'channel-postmessage',
-    'channel-websocket',
     'components',
-    'core-events',
     'router',
     'theming',
-    'preview-web',
-    'client-api',
-    'client-logger',
   ].reduce(
     (acc, sbPackage) => ({
       ...acc,
-      [`@storybook/${sbPackage}`]: path.dirname(
-        require.resolve(`@storybook/${sbPackage}/package.json`)
-      ),
+      [`@storybook/${sbPackage}`]: dirname(require.resolve(`@storybook/${sbPackage}/package.json`)),
     }),
     {}
   ),
@@ -54,7 +44,7 @@ export default async (
   options: Options & Record<string, any> & { typescriptOptions: TypescriptOptions }
 ): Promise<Configuration> => {
   const {
-    outputDir = path.join('.', 'public'),
+    outputDir = join('.', 'public'),
     quiet,
     packageJson,
     configType,
@@ -66,21 +56,42 @@ export default async (
     serverChannelUrl,
   } = options;
 
-  const frameworkOptions = await presets.apply('frameworkOptions');
-
   const isProd = configType === 'PRODUCTION';
-  const envs = await presets.apply<Record<string, string>>('env');
-  const logLevel = await presets.apply('logLevel', undefined);
+  const workingDir = process.cwd();
+
+  const [
+    coreOptions,
+    frameworkOptions,
+    envs,
+    logLevel,
+    headHtmlSnippet,
+    bodyHtmlSnippet,
+    template,
+    docsOptions,
+    entries,
+    nonNormalizedStories,
+  ] = await Promise.all([
+    presets.apply<CoreConfig>('core'),
+    presets.apply('frameworkOptions'),
+    presets.apply<Record<string, string>>('env'),
+    presets.apply('logLevel', undefined),
+    presets.apply('previewHead'),
+    presets.apply('previewBody'),
+    presets.apply<string>('previewMainTemplate'),
+    presets.apply<DocsOptions>('docs'),
+    presets.apply<string[]>('entries', [], options),
+    presets.apply('stories', [], options),
+  ]);
+
+  const stories = normalizeStories(nonNormalizedStories, {
+    configDir: options.configDir,
+    workingDir,
+  });
 
-  const headHtmlSnippet = await presets.apply('previewHead');
-  const bodyHtmlSnippet = await presets.apply('previewBody');
-  const template = await presets.apply<string>('previewMainTemplate');
-  const coreOptions = await presets.apply<CoreConfig>('core');
   const builderOptions: BuilderOptions =
     typeof coreOptions.builder === 'string'
       ? {}
       : coreOptions.builder?.options || ({} as BuilderOptions);
-  const docsOptions = await presets.apply<DocsOptions>('docs');
 
   const previewAnnotations = [
     ...(await presets.apply<PreviewAnnotation[]>('previewAnnotations', [], options)).map(
@@ -97,21 +108,15 @@ export default async (
     ),
     loadPreviewOrConfigFile(options),
   ].filter(Boolean);
-  const entries = (await presets.apply('entries', [], options)) as string[];
-  const workingDir = process.cwd();
-  const stories = normalizeStories(await presets.apply('stories', [], options), {
-    configDir: options.configDir,
-    workingDir,
-  });
 
   const virtualModuleMapping: Record<string, string> = {};
   if (features?.storyStoreV7) {
     const storiesFilename = 'storybook-stories.js';
-    const storiesPath = path.resolve(path.join(workingDir, storiesFilename));
+    const storiesPath = resolve(join(workingDir, storiesFilename));
 
     const needPipelinedImport = !!builderOptions.lazyCompilation && !isProd;
     virtualModuleMapping[storiesPath] = toImportFn(stories, { needPipelinedImport });
-    const configEntryPath = path.resolve(path.join(workingDir, 'storybook-config-entry.js'));
+    const configEntryPath = resolve(join(workingDir, 'storybook-config-entry.js'));
     virtualModuleMapping[configEntryPath] = handlebars(
       await readTemplate(
         require.resolve(
@@ -128,14 +133,12 @@ export default async (
   } else {
     const rendererName = await getRendererName(options);
 
-    const rendererInitEntry = path.resolve(
-      path.join(workingDir, 'storybook-init-renderer-entry.js')
-    );
+    const rendererInitEntry = resolve(join(workingDir, 'storybook-init-renderer-entry.js'));
     virtualModuleMapping[rendererInitEntry] = `import '${rendererName}';`;
     entries.push(rendererInitEntry);
 
     const entryTemplate = await readTemplate(
-      path.join(__dirname, '..', '..', 'templates', 'virtualModuleEntry.template.js')
+      join(__dirname, '..', '..', 'templates', 'virtualModuleEntry.template.js')
     );
 
     previewAnnotations.forEach((previewAnnotationFilename: string | undefined) => {
@@ -159,12 +162,12 @@ export default async (
     });
     if (stories.length > 0) {
       const storyTemplate = await readTemplate(
-        path.join(__dirname, '..', '..', 'templates', 'virtualModuleStory.template.js')
+        join(__dirname, '..', '..', 'templates', 'virtualModuleStory.template.js')
       );
       // NOTE: this file has a `.cjs` extension as it is a CJS file (from `dist/cjs`) and runs
       // in the user's webpack mode, which may be strict about the use of require/import.
       // See https://github.com/storybookjs/storybook/issues/14877
-      const storiesFilename = path.resolve(path.join(workingDir, `generated-stories-entry.cjs`));
+      const storiesFilename = resolve(join(workingDir, `generated-stories-entry.cjs`));
       virtualModuleMapping[storiesFilename] = interpolate(storyTemplate, {
         rendererName,
       })
@@ -192,7 +195,7 @@ export default async (
     devtool: 'cheap-module-source-map',
     entry: entries,
     output: {
-      path: path.resolve(process.cwd(), outputDir),
+      path: resolve(process.cwd(), outputDir),
       filename: isProd ? '[name].[contenthash:8].iframe.bundle.js' : '[name].iframe.bundle.js',
       publicPath: '',
     },
@@ -203,6 +206,29 @@ export default async (
     watchOptions: {
       ignored: /node_modules/,
     },
+    externals: {
+      ...[
+        // these packages are pre-bundled, so they are mapped to global shims
+        'channels',
+        'channel-postmessage',
+        'channel-websocket',
+        'core-events',
+        'client-logger',
+        'addons',
+        'store',
+        'preview-web',
+        'client-api',
+        'core-client',
+      ].reduce(
+        (acc, sbPackage) => ({
+          ...acc,
+          [`@storybook/${sbPackage}`]: `__STORYBOOK_MODULE_${sbPackage
+            .toUpperCase()
+            .replaceAll('-', '_')}__`,
+        }),
+        {}
+      ),
+    },
     ignoreWarnings: [
       {
         message: /export '\S+' was not found in 'global'/,
diff --git a/code/lib/core-common/templates/preview.ejs b/code/lib/builder-webpack5/templates/preview.ejs
similarity index 85%
rename from code/lib/core-common/templates/preview.ejs
rename to code/lib/builder-webpack5/templates/preview.ejs
index 19d86834ef5a..b3f05805236a 100644
--- a/code/lib/core-common/templates/preview.ejs
+++ b/code/lib/builder-webpack5/templates/preview.ejs
@@ -36,8 +36,13 @@
           <% } %>
       <% } %>
     </script>
-    <% } %> <% htmlWebpackPlugin.files.js.forEach(file => { %>
-    <script src="<%= file %>"></script>
-    <% }); %>
+    <% } %>
+    <script type="module">
+      import './sb-preview/runtime.mjs';
+
+      <% htmlWebpackPlugin.files.js.forEach(file => { %>
+      import './<%= file %>';
+      <% }); %>
+    </script>    
   </body>
 </html>
diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json
index 9d636b478021..827b7633d2a5 100644
--- a/code/lib/core-common/package.json
+++ b/code/lib/core-common/package.json
@@ -51,7 +51,7 @@
     "@storybook/types": "7.0.0-alpha.52",
     "@types/babel__core": "^7.1.20",
     "@types/express": "^4.7.0",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "@types/pretty-hrtime": "^1.0.0",
     "chalk": "^4.1.0",
     "esbuild": "^0.14.48",
diff --git a/code/lib/core-common/src/index.ts b/code/lib/core-common/src/index.ts
index 7a142a288dde..8def5570ddfb 100644
--- a/code/lib/core-common/src/index.ts
+++ b/code/lib/core-common/src/index.ts
@@ -23,7 +23,6 @@ export * from './utils/load-preview-or-config-file';
 export * from './utils/log-config';
 export * from './utils/normalize-stories';
 export * from './utils/paths';
-export * from './utils/progress-reporting';
 export * from './utils/readTemplate';
 export * from './utils/resolve-path-in-sb-cache';
 export * from './utils/symlinks';
diff --git a/code/lib/core-common/src/presets.ts b/code/lib/core-common/src/presets.ts
index 7a3f2ba529ff..167dae9b30ca 100644
--- a/code/lib/core-common/src/presets.ts
+++ b/code/lib/core-common/src/presets.ts
@@ -244,10 +244,6 @@ async function loadPresets(
     return [];
   }
 
-  if (!level) {
-    logger.info('=> Loading presets');
-  }
-
   return (
     await Promise.all(presets.map(async (preset) => loadPreset(preset, level, storybookOptions)))
   ).reduce((acc, loaded) => {
diff --git a/code/lib/core-common/src/utils/progress-reporting.ts b/code/lib/core-common/src/utils/progress-reporting.ts
deleted file mode 100644
index 64422373499e..000000000000
--- a/code/lib/core-common/src/utils/progress-reporting.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import type { Router, Request, Response } from 'express';
-import { printDuration } from './print-duration';
-
-export const useProgressReporting = async (
-  router: Router,
-  startTime: [number, number],
-  options: any
-): Promise<{ handler: any; modulesCount: number }> => {
-  let value = 0;
-  let totalModules: number;
-  let reportProgress: (progress?: {
-    value?: number;
-    message: string;
-    modules?: any;
-  }) => void = () => {};
-
-  router.get('/progress', (request: Request, response: Response) => {
-    let closed = false;
-    const close = () => {
-      closed = true;
-      response.end();
-    };
-    response.on('close', close);
-
-    if (closed || response.writableEnded) return;
-    response.setHeader('Cache-Control', 'no-cache');
-    response.setHeader('Content-Type', 'text/event-stream');
-    response.setHeader('Connection', 'keep-alive');
-    response.flushHeaders();
-
-    reportProgress = (progress: any) => {
-      if (closed || response.writableEnded) return;
-      response.write(`data: ${JSON.stringify(progress)}\n\n`);
-      response.flush();
-      if (progress.value === 1) close();
-    };
-  });
-
-  const handler = (newValue: number, message: string, arg3: any) => {
-    value = Math.max(newValue, value); // never go backwards
-    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 complete = parseInt(counts[1], 10);
-      const total = parseInt(counts[2], 10);
-      if (!Number.isNaN(complete) && !Number.isNaN(total)) {
-        (progress as any).modules = { complete, total };
-        totalModules = total;
-      }
-    }
-
-    if (value === 1) {
-      if (options.cache) {
-        options.cache.set('modulesCount', totalModules);
-      }
-
-      if (!progress.message) {
-        progress.message = `Completed in ${printDuration(startTime)}.`;
-      }
-    }
-    reportProgress(progress);
-  };
-
-  const modulesCount = (await options.cache?.get('modulesCount').catch(() => {})) || 1000;
-  return { handler, modulesCount };
-};
diff --git a/code/lib/core-common/src/utils/template.ts b/code/lib/core-common/src/utils/template.ts
index b9902a627f6f..47541f40b454 100644
--- a/code/lib/core-common/src/utils/template.ts
+++ b/code/lib/core-common/src/utils/template.ts
@@ -36,7 +36,3 @@ export function getPreviewHeadTemplate(
 
   return interpolate(result, interpolations);
 }
-
-export function getPreviewMainTemplate() {
-  return `${sync(__dirname)}/templates/preview.ejs`;
-}
diff --git a/code/lib/core-events/src/index.ts b/code/lib/core-events/src/index.ts
index 4ce90cc37f7a..a995c2b8c80c 100644
--- a/code/lib/core-events/src/index.ts
+++ b/code/lib/core-events/src/index.ts
@@ -51,6 +51,8 @@ enum events {
   REGISTER_SUBSCRIPTION = 'registerSubscription',
   // Tell the manager that the user pressed a key in the preview
   PREVIEW_KEYDOWN = 'previewKeydown',
+  // Tell the preview that the builder is in progress
+  PREVIEW_BUILDER_PROGRESS = 'preview_builder_progress',
   // Used in the manager to change the story selection
   SELECT_STORY = 'selectStory',
   STORIES_COLLAPSE_ALL = 'storiesCollapseAll',
@@ -70,41 +72,42 @@ export default events;
 export const {
   CHANNEL_CREATED,
   CONFIG_ERROR,
-  STORY_INDEX_INVALIDATED,
-  STORY_SPECIFIED,
-  SET_STORIES,
-  SET_INDEX,
-  SET_CONFIG,
-  SET_CURRENT_STORY,
   CURRENT_STORY_WAS_SET,
+  DOCS_RENDERED,
   FORCE_RE_RENDER,
   FORCE_REMOUNT,
-  STORY_PREPARED,
-  STORY_CHANGED,
-  STORY_UNCHANGED,
-  PRELOAD_ENTRIES,
-  STORY_RENDERED,
-  STORY_MISSING,
-  STORY_ERRORED,
-  STORY_THREW_EXCEPTION,
-  STORY_RENDER_PHASE_CHANGED,
-  PLAY_FUNCTION_THREW_EXCEPTION,
-  UPDATE_STORY_ARGS,
-  STORY_ARGS_UPDATED,
-  RESET_STORY_ARGS,
-  SET_GLOBALS,
-  UPDATE_GLOBALS,
   GLOBALS_UPDATED,
-  REGISTER_SUBSCRIPTION,
+  NAVIGATE_URL,
+  PLAY_FUNCTION_THREW_EXCEPTION,
+  PRELOAD_ENTRIES,
+  PREVIEW_BUILDER_PROGRESS,
   PREVIEW_KEYDOWN,
+  REGISTER_SUBSCRIPTION,
+  RESET_STORY_ARGS,
   SELECT_STORY,
-  STORIES_COLLAPSE_ALL,
-  STORIES_EXPAND_ALL,
-  DOCS_RENDERED,
+  SET_CONFIG,
+  SET_CURRENT_STORY,
+  SET_GLOBALS,
+  SET_INDEX,
+  SET_STORIES,
   SHARED_STATE_CHANGED,
   SHARED_STATE_SET,
-  NAVIGATE_URL,
+  STORIES_COLLAPSE_ALL,
+  STORIES_EXPAND_ALL,
+  STORY_ARGS_UPDATED,
+  STORY_CHANGED,
+  STORY_ERRORED,
+  STORY_INDEX_INVALIDATED,
+  STORY_MISSING,
+  STORY_PREPARED,
+  STORY_RENDER_PHASE_CHANGED,
+  STORY_RENDERED,
+  STORY_SPECIFIED,
+  STORY_THREW_EXCEPTION,
+  STORY_UNCHANGED,
+  UPDATE_GLOBALS,
   UPDATE_QUERY_PARAMS,
+  UPDATE_STORY_ARGS,
 } = events;
 
 // Used to break out of the current render without showing a redbox
diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json
index e4398e14a1ac..b55ea310f229 100644
--- a/code/lib/core-server/package.json
+++ b/code/lib/core-server/package.json
@@ -46,7 +46,7 @@
     "@storybook/store": "7.0.0-alpha.52",
     "@storybook/telemetry": "7.0.0-alpha.52",
     "@storybook/types": "7.0.0-alpha.52",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "@types/node-fetch": "^2.5.7",
     "@types/pretty-hrtime": "^1.0.0",
     "@types/semver": "^7.3.4",
diff --git a/code/lib/core-server/src/build-dev.ts b/code/lib/core-server/src/build-dev.ts
index b7a808babc15..cd708c8c4ed9 100644
--- a/code/lib/core-server/src/build-dev.ts
+++ b/code/lib/core-server/src/build-dev.ts
@@ -25,7 +25,7 @@ import { outputStats } from './utils/output-stats';
 import { outputStartupInformation } from './utils/output-startup-information';
 import { updateCheck } from './utils/update-check';
 import { getServerPort, getServerChannelUrl } from './utils/server-address';
-import { getBuilders } from './utils/get-builders';
+import { getManagerBuilder, getPreviewBuilder } from './utils/get-builders';
 
 export async function buildDevStandalone(options: CLIOptions & LoadOptions & BuilderOptions) {
   const { packageJson, versionUpdates, releaseNotes } = options;
@@ -76,16 +76,23 @@ export async function buildDevStandalone(options: CLIOptions & LoadOptions & Bui
     logger.warn(`you have not specified a framework in your ${options.configDir}/main.js`);
   }
 
-  logger.info('=> Loading presets');
+  // 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: [],
     ...options,
   });
 
-  const [previewBuilder, managerBuilder] = await getBuilders({ ...options, presets });
-  const { renderer } = await presets.apply<CoreConfig>('core', undefined);
+  const { renderer, builder } = await presets.apply<CoreConfig>('core', undefined);
+  const builderName = typeof builder === 'string' ? builder : builder?.name;
+  const [previewBuilder, managerBuilder] = await Promise.all([
+    getPreviewBuilder(builderName, options.configDir),
+    getManagerBuilder(),
+  ]);
 
+  // Load second pass: all presets are applied in order
   presets = await loadAllPresets({
     corePresets: [
       require.resolve('./presets/common-preset'),
diff --git a/code/lib/core-server/src/core-presets.disabled-test.ts b/code/lib/core-server/src/core-presets.disabled-test.ts
deleted file mode 100644
index 495ae1e3b73a..000000000000
--- a/code/lib/core-server/src/core-presets.disabled-test.ts
+++ /dev/null
@@ -1,312 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import 'jest-specific-snapshot';
-import path from 'path';
-import { mkdtemp as mkdtempCb } from 'fs';
-import os from 'os';
-import { promisify } from 'util';
-import type { Configuration } from 'webpack';
-import {
-  resolvePathInStorybookCache,
-  createFileSystemCache,
-  getProjectRoot,
-} from '@storybook/core-common';
-import { executor as previewExecutor } from '@storybook/builder-webpack5';
-import { executor as managerExecutor } from '@storybook/builder-manager';
-
-import { sync as readUpSync } from 'read-pkg-up';
-import { buildDevStandalone } from './build-dev';
-import { buildStaticStandalone } from './build-static';
-
-import { outputStats } from './utils/output-stats';
-
-// @ts-expect-error (not strict)
-const { SNAPSHOT_OS } = global;
-const mkdtemp = promisify(mkdtempCb);
-const { packageJson } = readUpSync({ cwd: __dirname });
-
-// this only applies to this file
-jest.setTimeout(10000);
-
-// FIXME: this doesn't work
-
-jest.mock('webpack', () => {
-  const value = jest.fn(() => false);
-  const actual = jest.requireActual('webpack');
-
-  Object.keys(actual).forEach((key) => {
-    // @ts-expect-error (not strict)
-    value[key] = actual[key];
-  });
-  return value;
-});
-
-jest.mock('@storybook/telemetry', () => ({
-  getStorybookMetadata: jest.fn(() => ({})),
-  telemetry: jest.fn(() => ({})),
-}));
-jest.mock('fs-extra', () => ({
-  copy: jest.fn(() => undefined),
-  emptyDir: jest.fn(() => undefined),
-  ensureDir: jest.fn(() => true),
-  ensureFile: jest.fn(() => undefined),
-  pathExists: jest.fn(() => true),
-  readFile: jest.fn((f) => ''),
-  readJSON: jest.fn(() => ({})),
-  remove: jest.fn(() => undefined),
-  writeFile: jest.fn(() => undefined),
-  writeJSON: jest.fn(() => undefined),
-}));
-
-jest.mock('./utils/StoryIndexGenerator', () => {
-  const { StoryIndexGenerator } = jest.requireActual('./utils/StoryIndexGenerator');
-  return {
-    StoryIndexGenerator: class extends StoryIndexGenerator {
-      initialize() {
-        return Promise.resolve(undefined);
-      }
-
-      getIndex() {
-        return { stories: {}, v: 3 };
-      }
-    },
-  };
-});
-
-jest.mock('./utils/stories-json', () => ({
-  extractStoriesJson: () => Promise.resolve(),
-  useStoriesJson: () => {},
-}));
-
-// we're not in the right directory for auto-title to work, so just
-// stub it out
-jest.mock('@storybook/store', () => {
-  const actualStore = jest.requireActual('@storybook/store');
-  return {
-    ...actualStore,
-    autoTitle: () => 'auto-title',
-    autoTitleFromSpecifier: () => 'auto-title-from-specifier',
-  };
-});
-
-jest.mock('http', () => ({
-  ...jest.requireActual('http'),
-  // @ts-expect-error (not strict)
-  createServer: () => ({ listen: (_options, cb) => cb(), on: jest.fn() }),
-}));
-jest.mock('ws');
-jest.mock('@storybook/node-logger', () => ({
-  logger: {
-    info: jest.fn(),
-    warn: jest.fn(),
-    error: jest.fn(),
-    line: jest.fn(),
-    trace: jest.fn(),
-  },
-}));
-jest.mock('./utils/output-startup-information', () => ({
-  outputStartupInformation: jest.fn(),
-}));
-
-jest.mock('./utils/output-stats');
-jest.mock('./utils/open-in-browser', () => ({
-  openInBrowser: jest.fn(),
-}));
-
-const cache = createFileSystemCache({
-  basePath: resolvePathInStorybookCache('dev-server'),
-  ns: 'storybook-test', // Optional. A grouping namespace for items.
-});
-
-const managerOnly = false;
-const baseOptions = {
-  ignorePreview: managerOnly,
-  // FIXME: this should just be ignorePreview everywhere
-  managerOnly, // production
-  docsMode: false,
-  cache,
-  configDir: path.resolve(`${__dirname}/__for-testing__/`),
-  ci: true,
-  managerCache: false,
-};
-
-const ROOT = getProjectRoot();
-const CWD = process.cwd();
-const NODE_MODULES = /.*node_modules/g;
-const cleanRoots = (obj: any): any => {
-  if (!obj) return obj;
-  if (typeof obj === 'string')
-    return obj.replace(CWD, 'CWD').replace(ROOT, 'ROOT').replace(NODE_MODULES, 'NODE_MODULES');
-  if (Array.isArray(obj)) return obj.map(cleanRoots);
-  if (obj instanceof RegExp) return cleanRoots(obj.toString());
-  if (typeof obj === 'object') {
-    return Object.fromEntries(
-      Object.entries(obj).map(([key, val]) => {
-        if (key === 'version' && typeof val === 'string') {
-          return [key, '*'];
-        }
-        return [key, cleanRoots(val)];
-      })
-    );
-  }
-  return obj;
-};
-
-const getConfig = (fn: any, name: string): Configuration | null => {
-  const call = fn.mock.calls.find((c: any) => c[0].name === name);
-  if (!call) {
-    return null;
-  }
-  return call[0];
-};
-
-const prepareSnap = (
-  get: any,
-  name: string
-): Pick<Configuration, 'module' | 'entry' | 'plugins'> => {
-  const config = getConfig(get(), name);
-  if (!config) {
-    return null;
-  }
-
-  const keys = Object.keys(config);
-  const { module, entry, plugins } = config;
-
-  return cleanRoots({ keys, module, entry, plugins: plugins.map((p) => p.constructor.name) });
-};
-
-const snap = (name: string) => `__snapshots__/${name}`;
-
-// FIXME: we no longer have test cases
-// eslint-disable-next-line jest/no-disabled-tests
-describe.skip('FIXME', () => {
-  // @ts-expect-error (not strict)
-  describe.each([[]])('%s', (example: string) => {
-    describe.each([
-      ['manager', managerExecutor],
-      ['preview', previewExecutor],
-    ])('%s', (component, executor) => {
-      beforeEach(async () => {
-        jest.clearAllMocks();
-        await cache.clear();
-      });
-
-      it.each([
-        ['prod', buildStaticStandalone],
-        ['dev', buildDevStandalone],
-      ])('%s', async (mode, builder) => {
-        const options = {
-          ...baseOptions,
-          configDir: path.resolve(`${__dirname}/../../../examples/${example}/.storybook`),
-          // Only add an outputDir in production mode.
-          outputDir:
-            mode === 'prod'
-              ? await mkdtemp(path.join(os.tmpdir(), 'storybook-static-'))
-              : undefined,
-          ignorePreview: component === 'manager',
-          managerCache: component === 'preview',
-          packageJson,
-        };
-        await builder(options);
-        const config = prepareSnap(executor.get, component);
-        expect(config).toMatchSpecificSnapshot(
-          snap(`${example}_${component}-${mode}-${SNAPSHOT_OS}`)
-        );
-      });
-    });
-  });
-});
-
-const progressPlugin = (config: any) =>
-  config.plugins.find((p: any) => p.constructor.name === 'ProgressPlugin');
-
-describe('dev cli flags', () => {
-  beforeEach(async () => {
-    jest.clearAllMocks();
-    await cache.clear();
-  });
-
-  const cliOptions = { ...baseOptions, packageJson };
-
-  // eslint-disable-next-line jest/no-disabled-tests
-  it.skip('baseline', async () => {
-    await buildDevStandalone(cliOptions);
-    const config = getConfig(previewExecutor.get, 'preview');
-    expect(progressPlugin(config)).toBeTruthy();
-  });
-
-  // eslint-disable-next-line jest/no-disabled-tests
-  it.skip('--quiet', async () => {
-    const options = { ...cliOptions, quiet: true };
-    await buildDevStandalone(options);
-    const config = getConfig(previewExecutor.get, 'preview');
-    expect(progressPlugin(config)).toBeFalsy();
-  });
-
-  it('--webpack-stats-json calls output-stats', async () => {
-    await buildDevStandalone(cliOptions);
-    expect(outputStats).not.toHaveBeenCalled();
-
-    await buildDevStandalone({ ...cliOptions, webpackStatsJson: '/tmp/dir' });
-    expect(outputStats).toHaveBeenCalledWith(
-      '/tmp/dir',
-      expect.objectContaining({ toJson: expect.any(Function) })
-    );
-  });
-
-  describe.each([
-    ['root directory /', '/', "Won't remove directory '/'. Check your outputDir!"],
-    ['empty string ""', '', "Won't remove current directory. Check your outputDir!"],
-  ])('Invalid outputDir must throw: %s', (_, outputDir, expectedErrorMessage) => {
-    const optionsWithInvalidDir = {
-      ...cliOptions,
-      outputDir,
-    };
-
-    it('production mode', async () => {
-      expect.assertions(1);
-      await expect(buildStaticStandalone(optionsWithInvalidDir)).rejects.toThrow(
-        expectedErrorMessage
-      );
-    });
-  });
-
-  describe('Invalid staticDir must throw: root directory /', () => {
-    const optionsWithInvalidStaticDir = {
-      ...cliOptions,
-      staticDir: ['/'],
-    };
-
-    it('production mode', async () => {
-      expect.assertions(1);
-      // @ts-expect-error (not strict)
-      await expect(buildStaticStandalone(optionsWithInvalidStaticDir)).rejects.toThrow(
-        "Won't copy root directory. Check your staticDirs!"
-      );
-    });
-  });
-});
-
-describe('build cli flags', () => {
-  beforeEach(async () => {
-    jest.clearAllMocks();
-    await cache.clear();
-  });
-  const cliOptions = {
-    ...baseOptions,
-    outputDir: `${__dirname}/storybook-static`,
-    packageJson,
-  };
-
-  it('does not call output-stats', async () => {
-    await buildStaticStandalone(cliOptions);
-    expect(outputStats).not.toHaveBeenCalled();
-  });
-
-  it('--webpack-stats-json calls output-stats', async () => {
-    await buildStaticStandalone({ ...cliOptions, webpackStatsJson: '/tmp/dir' });
-    expect(outputStats).toHaveBeenCalledWith(
-      '/tmp/dir',
-      expect.objectContaining({ toJson: expect.any(Function) })
-    );
-  });
-});
diff --git a/code/lib/core-server/src/dev-server.ts b/code/lib/core-server/src/dev-server.ts
index 300e52dcdd78..3659420170f9 100644
--- a/code/lib/core-server/src/dev-server.ts
+++ b/code/lib/core-server/src/dev-server.ts
@@ -18,10 +18,11 @@ import { getServer } from './utils/server-init';
 import { useStatics } from './utils/server-statics';
 import { useStoriesJson } from './utils/stories-json';
 import { useStorybookMetadata } from './utils/metadata';
+import type { ServerChannel } from './utils/get-server-channel';
 import { getServerChannel } from './utils/get-server-channel';
 
 import { openInBrowser } from './utils/open-in-browser';
-import { getBuilders } from './utils/get-builders';
+import { getManagerBuilder, getPreviewBuilder } from './utils/get-builders';
 import { StoryIndexGenerator } from './utils/StoryIndexGenerator';
 import { summarizeIndex } from './utils/summarizeIndex';
 
@@ -37,62 +38,24 @@ const versionStatus = (versionCheck: VersionCheck) => {
 };
 
 export async function storybookDevServer(options: Options) {
-  const startTime = process.hrtime();
   const app = express();
-  const server = await getServer(app, options);
-  const serverChannel = getServerChannel(server);
 
-  const features = await options.presets.apply<StorybookConfig['features']>('features');
-  const core = await options.presets.apply<CoreConfig>('core');
-  // try get index generator, if failed, send telemetry without storyCount, then rethrow the error
-  let initializedStoryIndexGenerator: Promise<StoryIndexGenerator> = Promise.resolve(undefined);
-  if (features?.buildStoriesJson || features?.storyStoreV7) {
-    const workingDir = process.cwd();
-    const directories = {
-      configDir: options.configDir,
-      workingDir,
-    };
-    const normalizedStories = normalizeStories(await options.presets.apply('stories'), directories);
-    const storyIndexers = await options.presets.apply('storyIndexers', []);
-    const docsOptions = await options.presets.apply<DocsOptions>('docs', {});
+  const [server, features, core] = await Promise.all([
+    getServer(app, options),
+    options.presets.apply<StorybookConfig['features']>('features'),
+    options.presets.apply<CoreConfig>('core'),
+  ]);
 
-    const generator = new StoryIndexGenerator(normalizedStories, {
-      ...directories,
-      storyIndexers,
-      docs: docsOptions,
-      workingDir,
-      storiesV2Compatibility: !features?.breakingChangesV7 && !features?.storyStoreV7,
-      storyStoreV7: features?.storyStoreV7,
-    });
-
-    initializedStoryIndexGenerator = generator.initialize().then(() => generator);
-
-    useStoriesJson({
-      router,
-      initializedStoryIndexGenerator,
-      normalizedStories,
-      serverChannel,
-      workingDir,
-    });
-  }
+  const serverChannel = getServerChannel(server);
 
-  if (!core?.disableTelemetry) {
-    initializedStoryIndexGenerator.then(async (generator) => {
-      const storyIndex = await generator?.getIndex();
-      const { versionCheck, versionUpdates } = options;
-      const payload = storyIndex
-        ? {
-            versionStatus: versionUpdates ? versionStatus(versionCheck) : 'disabled',
-            storyIndex: summarizeIndex(storyIndex),
-          }
-        : undefined;
-      telemetry('dev', payload, { configDir: options.configDir });
-    });
-  }
+  // try get index generator, if failed, send telemetry without storyCount, then rethrow the error
+  const initializedStoryIndexGenerator: Promise<StoryIndexGenerator> = getStoryIndexGenerator(
+    features,
+    options,
+    serverChannel
+  );
 
-  if (!core?.disableProjectJson) {
-    useStorybookMetadata(router, options.configDir);
-  }
+  doTelemetry(core, initializedStoryIndexGenerator, options);
 
   app.use(compression({ level: 1 }));
 
@@ -119,8 +82,7 @@ export async function storybookDevServer(options: Options) {
   }
 
   // User's own static files
-
-  await useStatics(router, options);
+  const usingStatics = useStatics(router, options);
 
   getMiddleware(options.configDir)(router);
   app.use(router);
@@ -129,49 +91,131 @@ export async function storybookDevServer(options: Options) {
   const proto = options.https ? 'https' : 'http';
   const { address, networkAddress } = getServerAddresses(port, host, proto);
 
-  await new Promise<void>((resolve, reject) => {
-    // FIXME: Following line doesn't match TypeScript signature at all 🤔
-    // @ts-expect-error (Converted from ts-ignore)
+  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()));
   });
 
-  const [previewBuilder, managerBuilder] = await getBuilders(options);
+  const builderName = typeof core?.builder === 'string' ? core.builder : core?.builder?.name;
+
+  const [previewBuilder, managerBuilder] = await Promise.all([
+    getPreviewBuilder(builderName, options.configDir),
+    getManagerBuilder(),
+  ]);
 
   if (options.debugWebpack) {
     logConfig('Preview webpack config', await previewBuilder.getConfig(options));
   }
 
+  Promise.all([initializedStoryIndexGenerator, listening, usingStatics]).then(async () => {
+    if (!options.ci && !options.smokeTest && options.open) {
+      openInBrowser(host ? networkAddress : address);
+    }
+  });
+
   const managerResult = await managerBuilder.start({
-    startTime,
+    startTime: process.hrtime(),
     options,
     router,
     server,
+    channel: serverChannel,
   });
 
   let previewResult;
+
   if (!options.ignorePreview) {
-    try {
-      previewResult = await previewBuilder.start({
-        startTime,
+    previewResult = await previewBuilder
+      .start({
+        startTime: process.hrtime(),
         options,
         router,
         server,
+        channel: serverChannel,
+      })
+      .catch(async (e: any) => {
+        await managerBuilder?.bail().catch();
+        // For some reason, even when Webpack fails e.g. wrong main.js config,
+        // the preview may continue to print to stdout, which can affect output
+        // when we catch this error and process those errors (e.g. telemetry)
+        // gets overwritten by preview progress output. Therefore, we should bail the preview too.
+        await previewBuilder?.bail().catch();
+
+        // re-throw the error
+        throw e;
       });
-    } catch (error) {
-      await managerBuilder?.bail();
-      // For some reason, even when Webpack fails e.g. wrong main.js config,
-      // the preview may continue to print to stdout, which can affect output
-      // when we catch this error and process those errors (e.g. telemetry)
-      // gets overwritten by preview progress output. Therefore, we should bail the preview too.
-      await previewBuilder?.bail().catch();
-      throw error;
-    }
   }
 
-  // TODO #13083 Move this to before starting the previewBuilder - when compiling the preview is so fast that it will be done before the browser is done opening
-  if (!options.ci && !options.smokeTest && options.open) {
-    openInBrowser(host ? networkAddress : address);
+  return { previewResult, managerResult, address, networkAddress };
+}
+async function doTelemetry(
+  core: CoreConfig,
+  initializedStoryIndexGenerator: Promise<StoryIndexGenerator>,
+  options: Options
+) {
+  if (!core?.disableTelemetry) {
+    initializedStoryIndexGenerator.then(async (generator) => {
+      const storyIndex = await generator?.getIndex();
+      const { versionCheck, versionUpdates } = options;
+      const payload = storyIndex
+        ? {
+            versionStatus: versionUpdates ? versionStatus(versionCheck) : 'disabled',
+            storyIndex: summarizeIndex(storyIndex),
+          }
+        : undefined;
+      telemetry('dev', payload, { configDir: options.configDir });
+    });
+  }
+
+  if (!core?.disableProjectJson) {
+    useStorybookMetadata(router, options.configDir);
   }
+}
 
-  return { previewResult, managerResult, address, networkAddress };
+async function getStoryIndexGenerator(
+  features: {
+    postcss?: boolean;
+    buildStoriesJson?: boolean;
+    previewCsfV3?: boolean;
+    storyStoreV7?: boolean;
+    breakingChangesV7?: boolean;
+    interactionsDebugger?: boolean;
+    babelModeV7?: boolean;
+    argTypeTargetsV7?: boolean;
+    warnOnLegacyHierarchySeparator?: boolean;
+  },
+  options: Options,
+  serverChannel: ServerChannel
+) {
+  let initializedStoryIndexGenerator: Promise<StoryIndexGenerator> = Promise.resolve(undefined);
+  if (features?.buildStoriesJson || features?.storyStoreV7) {
+    const workingDir = process.cwd();
+    const directories = {
+      configDir: options.configDir,
+      workingDir,
+    };
+    const stories = options.presets.apply('stories');
+    const storyIndexers = options.presets.apply('storyIndexers', []);
+    const docsOptions = options.presets.apply<DocsOptions>('docs', {});
+    const normalizedStories = normalizeStories(await stories, directories);
+
+    const generator = new StoryIndexGenerator(normalizedStories, {
+      ...directories,
+      storyIndexers: await storyIndexers,
+      docs: await docsOptions,
+      workingDir,
+      storiesV2Compatibility: !features?.breakingChangesV7 && !features?.storyStoreV7,
+      storyStoreV7: features?.storyStoreV7,
+    });
+
+    initializedStoryIndexGenerator = generator.initialize().then(() => generator);
+
+    useStoriesJson({
+      router,
+      initializedStoryIndexGenerator,
+      normalizedStories,
+      serverChannel,
+      workingDir,
+    });
+  }
+  return initializedStoryIndexGenerator;
 }
diff --git a/code/lib/core-server/src/index.ts b/code/lib/core-server/src/index.ts
index 41d3a3b563cc..1b7764d305d9 100644
--- a/code/lib/core-server/src/index.ts
+++ b/code/lib/core-server/src/index.ts
@@ -1,11 +1,7 @@
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path="./typings.d.ts" />
 
-export {
-  getPreviewHeadTemplate,
-  getPreviewBodyTemplate,
-  getPreviewMainTemplate,
-} from '@storybook/core-common';
+export { getPreviewHeadTemplate, getPreviewBodyTemplate } from '@storybook/core-common';
 
 export * from './build-static';
 export * from './build-dev';
diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts
index 4b325f4a7ab6..0f615d27f7e0 100644
--- a/code/lib/core-server/src/presets/common-preset.ts
+++ b/code/lib/core-server/src/presets/common-preset.ts
@@ -1,11 +1,6 @@
 import fs from 'fs-extra';
 import { deprecate } from '@storybook/node-logger';
-import {
-  getPreviewBodyTemplate,
-  getPreviewHeadTemplate,
-  getPreviewMainTemplate,
-  loadEnvs,
-} from '@storybook/core-common';
+import { getPreviewBodyTemplate, getPreviewHeadTemplate, loadEnvs } from '@storybook/core-common';
 import type {
   CLIOptions,
   CoreCommon_IndexerOptions,
@@ -41,8 +36,6 @@ export const previewBody = async (base: any, { configDir, presets }: Options) =>
   return getPreviewBodyTemplate(configDir, interpolations);
 };
 
-export const previewMainTemplate = () => getPreviewMainTemplate();
-
 export const typescript = () => ({
   check: false,
   // 'react-docgen' faster but produces lower quality typescript results
diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
index e361efbb83d6..aa8552c781c6 100644
--- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts
+++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
@@ -268,6 +268,7 @@ export class StoryIndexGenerator {
       const importPath = slash(normalizedPath);
 
       const content = await fs.readFile(absolutePath, 'utf8');
+
       const result: {
         title?: ComponentTitle;
         of?: Path;
diff --git a/code/lib/core-server/src/utils/get-builders.ts b/code/lib/core-server/src/utils/get-builders.ts
index c21a157cfb93..11ee9514a2d6 100644
--- a/code/lib/core-server/src/utils/get-builders.ts
+++ b/code/lib/core-server/src/utils/get-builders.ts
@@ -1,10 +1,13 @@
 import type { Options, CoreConfig, Builder } from '@storybook/types';
 
-async function getManagerBuilder() {
+export async function getManagerBuilder(): Promise<Builder<unknown>> {
   return import('@storybook/builder-manager');
 }
 
-async function getPreviewBuilder(builderName: string, configDir: string) {
+export async function getPreviewBuilder(
+  builderName: string,
+  configDir: string
+): Promise<Builder<unknown>> {
   let builderPackage: string;
   if (builderName) {
     builderPackage = require.resolve(
diff --git a/code/lib/core-server/src/utils/get-server-channel.ts b/code/lib/core-server/src/utils/get-server-channel.ts
index df4b50603fa3..348a980d0303 100644
--- a/code/lib/core-server/src/utils/get-server-channel.ts
+++ b/code/lib/core-server/src/utils/get-server-channel.ts
@@ -18,7 +18,7 @@ export class ServerChannel {
     });
   }
 
-  emit(type: string, args: any[] = []) {
+  emit(type: string, args: any = []) {
     const event = { type, args };
     const data = stringify(event, { maxDepth: 15, allowFunction: true });
     Array.from(this.webSocketServer.clients)
diff --git a/code/lib/core-server/src/utils/open-in-browser.ts b/code/lib/core-server/src/utils/open-in-browser.ts
index 8f04d83723b3..9cb05bbda5ac 100644
--- a/code/lib/core-server/src/utils/open-in-browser.ts
+++ b/code/lib/core-server/src/utils/open-in-browser.ts
@@ -7,7 +7,7 @@ import { dedent } from 'ts-dedent';
 export function openInBrowser(address: string) {
   getDefaultBrowser(async (err: any, res: any) => {
     try {
-      if (res && (res.isChrome || res.isChromium)) {
+      if (res && (res.isChrome || res.isChromium || res.identity === 'com.brave.browser')) {
         // We use betterOpn for Chrome because it is better at handling which chrome tab
         // or window the preview loads in.
         betterOpn(address);
diff --git a/code/lib/core-server/src/utils/stories-json.test.ts b/code/lib/core-server/src/utils/stories-json.test.ts
index ad5169fe8004..5cee7cfd53b5 100644
--- a/code/lib/core-server/src/utils/stories-json.test.ts
+++ b/code/lib/core-server/src/utils/stories-json.test.ts
@@ -899,7 +899,7 @@ describe('useStoriesJson', () => {
     });
 
     it('debounces invalidation events', async () => {
-      (debounce as jest.Mock).mockImplementation(jest.requireActual('lodash/debounce'));
+      (debounce as jest.Mock).mockImplementation(jest.requireActual('lodash/debounce') as any);
 
       const mockServerChannel = { emit: jest.fn() } as any as ServerChannel;
       useStoriesJson({
diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json
index 7f09615c6d05..09124e43ae31 100644
--- a/code/lib/core-webpack/package.json
+++ b/code/lib/core-webpack/package.json
@@ -45,7 +45,7 @@
     "@storybook/core-common": "7.0.0-alpha.52",
     "@storybook/node-logger": "7.0.0-alpha.52",
     "@storybook/types": "7.0.0-alpha.52",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
diff --git a/code/lib/preview/README.md b/code/lib/preview/README.md
new file mode 100644
index 000000000000..cb44e3b4b07e
--- /dev/null
+++ b/code/lib/preview/README.md
@@ -0,0 +1,94 @@
+# Preview (Web)
+
+This is the main API for the (web) version of the Storybook Preview.
+
+The preview's job is:
+
+1. Read and update the URL (via the URL Store)
+
+2. Listen to instructions on the channel and emit events as things occur.
+
+3. Render the current selection to the web view in either story or docs mode.
+
+## V7 Store vs Legacy (V6)
+
+The story store is designed to load stories 'on demand', and will operate in this fashion if the `storyStoreV7` feature is enabled.
+
+However, for back-compat reasons, in v6 mode, we need to load all stories, synchronously on bootup, emitting the `SET_STORIES` event.
+
+In V7 mode we do not emit that event, instead preferring the `STORY_PREPARED` event, with the data for the single story being rendered.
+
+## Initialization
+
+The preview is `initialized` in two ways.
+
+### V7 Mode:
+
+- `importFn` - is an async `import()` function
+
+- `getProjectAnnotations` - is a simple function that evaluations `preview.js` and addon config files and combines them. If it errors, the Preview will show the error.
+
+- No `getStoryIndex` function is passed, instead the preview creates a `StoryIndexClient` that pulls `stories.json` from node and watches the event stream for invalidation events.
+
+### V6 Mode
+
+- `importFn` - is a simulated `import()` function, that is synchronous, see `client-api` for details.
+- `getProjectAnnotations` - also evaluates `preview.js` et al, but watches for calls to `setStories`, and passes them to the `ClientApi`
+- `getStoryIndex` is a local function (that must be called _after_ `getProjectAnnotations`) that gets the list of stories added.
+
+See `client-api` for more details on this process.
+
+## Story Rendering and interruptions
+
+The Preview is split into three parts responsible for state management:
+
+- `PreviewWeb` - which story is rendered, receives events and (maybe) changes/re-renders stories
+- `StoryRender` - (imports +) prepares the story, renders it through the various phases
+- `DocsRender` - if a story renders in docs mode, it is "transformed" into a `DocsRender` once we know.
+
+A rendering story goes through these phases:
+
+- `preparing` - (maybe async) import the story file and prepare the story function.
+- `loading` - async loaders are running
+- `rendering` - the `renderToDOM` function for the framework is running
+- `playing` - the `play` function is running
+- `completed` - the story is done.
+
+It also has two error states:
+
+- `aborted` - the story was stopped midway (see below)
+- `errored` - there was an error thrown somewhere along the way.
+
+### Re-rendering and aborting
+
+A story may re-render due to various events, which can have implications if the story is not in the `completed` phase:
+
+- `UPDATE_STORY_ARGS` / `UPDATE_GLOBALS` -- change of inputs
+- `FORCE_RE_RENDER` - re-render unchanged
+
+If these events happen during a render:
+
+- if the story is `preparing` or `loading`, leave thing unchanged and let the new `args`/`globals` be picked up by the render phase
+- otherwise, use the result of the previous `loaders` run, and simply re-render over the top
+
+- `FORCE_REMOUNT` - remount (or equivalent) the component and re-render.
+
+If this happens during a render, treat `loading` similarly, but:
+
+- if the story is `rendering`, start a new render and abort the previous render immediately afterwards
+- if the story is `playing`, attempt to abort the previous play function, and start a new render.
+
+### Changing story
+
+Also the `SET_CURRENT_STORY` event may change the current story. We need to check:
+
+- If the `storyId` changed
+- If the `viewMode` changed
+- If the story implementation changed (i.e if HMR occurred).
+
+If the _previous_ story is still `preparing`, we cannot know if the implementation changed, so we
+abort the preparing immediately, and let the new story take over.
+
+Otherwise, if all of the above are the same, we do nothing.
+
+If they are different, and the old story is not `completed`, we try to abort it immediately. If that fails (e.g. the `play` function doesn't respond to the `abort` event), then we reload the window.
diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json
new file mode 100644
index 000000000000..44c3da39bc81
--- /dev/null
+++ b/code/lib/preview/package.json
@@ -0,0 +1,105 @@
+{
+  "name": "@storybook/preview",
+  "version": "7.0.0-alpha.52",
+  "description": "",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/code/lib/preview",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "code/lib/preview"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": "./dist/runtime.mjs",
+      "require": "./dist/runtime.js",
+      "types": "./dist/runtime.d.ts"
+    },
+    "./globals": {
+      "import": "./dist/globals.mjs",
+      "require": "./dist/globals.js",
+      "types": "./dist/globals.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/runtime.js",
+  "module": "dist/runtime.mjs",
+  "types": "dist/runtime.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/runtime.d.ts"
+      ],
+      "globals": [
+        "dist/globals.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
+    "prep": "../../../scripts/prepare/bundle.ts"
+  },
+  "dependencies": {
+    "@types/shelljs": "^0.8.7",
+    "fs-extra": "^9.0.1",
+    "shelljs": "^0.8.5"
+  },
+  "devDependencies": {
+    "@storybook/api": "7.0.0-alpha.52",
+    "@storybook/channel-postmessage": "7.0.0-alpha.52",
+    "@storybook/channel-websocket": "7.0.0-alpha.52",
+    "@storybook/channels": "7.0.0-alpha.52",
+    "@storybook/client-logger": "7.0.0-alpha.52",
+    "@storybook/core-client": "7.0.0-alpha.52",
+    "@storybook/core-common": "7.0.0-alpha.52",
+    "@storybook/core-events": "7.0.0-alpha.52",
+    "@storybook/csf": "next",
+    "@storybook/preview-web": "7.0.0-alpha.52",
+    "@storybook/router": "7.0.0-alpha.52",
+    "@storybook/theming": "7.0.0-alpha.52",
+    "@storybook/types": "7.0.0-alpha.52",
+    "@types/qs": "^6.9.5",
+    "@types/webpack-env": "^1.16.4",
+    "ansi-to-html": "^0.6.11",
+    "dequal": "^2.0.2",
+    "global": "^4.4.0",
+    "lodash": "^4.17.21",
+    "memoizerific": "^1.11.3",
+    "qs": "^6.10.0",
+    "react": "16.14.0",
+    "slash": "^3.0.0",
+    "synchronous-promise": "^2.0.15",
+    "ts-dedent": "^2.0.0",
+    "ts-jest": "^28.0.8",
+    "typescript": "~4.6.3",
+    "util-deprecate": "^1.0.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "pre": "./scripts/generate-exports-file.ts",
+    "entries": [
+      "./src/runtime.ts",
+      "./src/globals.ts"
+    ]
+  },
+  "gitHead": "d2494e3f51ce0f55bcb1ef693a6477c669fbe666"
+}
diff --git a/code/lib/preview/scripts/generate-exports-file.ts b/code/lib/preview/scripts/generate-exports-file.ts
new file mode 100644
index 000000000000..6a27d1707413
--- /dev/null
+++ b/code/lib/preview/scripts/generate-exports-file.ts
@@ -0,0 +1,40 @@
+/* eslint-disable import/no-extraneous-dependencies, no-console */
+import fs from 'fs-extra';
+import path from 'path';
+import shelljs from 'shelljs';
+import { dedent } from 'ts-dedent';
+
+const removeDefault = (input: string) => input !== 'default';
+
+const location = path.join(__dirname, '..', 'src', 'globals', 'exports.ts');
+
+const run = async () => {
+  const { values } = await import('../src/globals/runtime');
+  const data = Object.entries(values).reduce<Record<string, string[]>>((acc, [key, value]) => {
+    acc[key] = Object.keys(value).filter(removeDefault);
+    return acc;
+  }, {});
+
+  console.log('Generating...');
+  await fs.ensureFile(location);
+  await fs.writeFile(
+    location,
+    dedent`
+      // this file is generated by generate-exports-file.ts
+      // this is done to prevent runtime dependencies from making it's way into the build/start script of the manager
+      // the manager builder needs to know which dependencies are 'globalized' in the ui
+
+      export default ${JSON.stringify(data, null, 2)} as const;`
+  );
+
+  console.log('Linting...');
+  shelljs.exec(`yarn lint:js:cmd --fix ${location}`, {
+    cwd: path.join(__dirname, '..', '..', '..'),
+  });
+  console.log('Done!');
+};
+
+run().catch((e) => {
+  console.error(e);
+  process.exitCode = 1;
+});
diff --git a/code/lib/preview/src/globals.ts b/code/lib/preview/src/globals.ts
new file mode 100644
index 000000000000..d516acc55516
--- /dev/null
+++ b/code/lib/preview/src/globals.ts
@@ -0,0 +1 @@
+export * from './globals/definitions';
diff --git a/code/lib/preview/src/globals/definitions.ts b/code/lib/preview/src/globals/definitions.ts
new file mode 100644
index 000000000000..7a614b42c3f7
--- /dev/null
+++ b/code/lib/preview/src/globals/definitions.ts
@@ -0,0 +1,35 @@
+import type { ModuleInfo } from '@fal-works/esbuild-plugin-global-externals';
+import Exports from './exports';
+import { Keys } from './types';
+import type { Definitions } from './types';
+
+/*
+ * We create a map of a module's name to a ModuleInfo.
+ * Which is a config object for a esbuild-plugin, to swap a import of a module to a reference of a global variable.
+ * To get this plugin to do the best job it can, it needs to know all the exports in the ModuleInfo config object.
+ * We generate this information via a script into `exports.ts`.
+ *
+ * It's really important that there are no actual to the runtime of the modules, hence the cumbersome generation.
+ * But we also want to ensure we don't miss any exports, or globals.
+ *
+ * So in order to add additional modules to be swapped for globals, you need to add them to:
+ * - `Keys` in `types.ts`
+ * - `values` in `runtime.ts`.
+ *
+ * If you forget to do either, TypeScript will complain.
+ *
+ * This `definitions.ts` file is consumed by the `builder-*` package,
+ * The `runtime.ts` file is used inside the preview's browser code runtime.
+ */
+
+const createModuleInfo = (m: keyof typeof Keys): Required<ModuleInfo> => ({
+  type: 'esm',
+  varName: Keys[m],
+  namedExports: Exports[m],
+  defaultExport: true,
+});
+
+export const definitions = Object.keys(Keys).reduce<Definitions>((acc, key) => {
+  acc[key as keyof typeof Keys] = createModuleInfo(key as keyof typeof Keys);
+  return acc;
+}, {} as Definitions);
diff --git a/code/lib/preview/src/globals/exports.ts b/code/lib/preview/src/globals/exports.ts
new file mode 100644
index 000000000000..0d621b77e43f
--- /dev/null
+++ b/code/lib/preview/src/globals/exports.ts
@@ -0,0 +1,200 @@
+// this file is generated by generate-exports-file.ts
+// this is done to prevent runtime dependencies from making it's way into the build/start script of the manager
+// the manager builder needs to know which dependencies are 'globalized' in the ui
+
+export default {
+  '@storybook/addons': [
+    'AddonStore',
+    'HooksContext',
+    'addons',
+    'applyHooks',
+    'isSupportedType',
+    'makeDecorator',
+    'mockChannel',
+    'types',
+    'useArgs',
+    'useCallback',
+    'useChannel',
+    'useEffect',
+    'useGlobals',
+    'useMemo',
+    'useParameter',
+    'useReducer',
+    'useRef',
+    'useState',
+    'useStoryContext',
+  ],
+  '@storybook/channel-postmessage': ['KEY', 'PostmsgTransport', 'createChannel'],
+  '@storybook/channel-websocket': ['WebsocketTransport', 'createChannel'],
+  '@storybook/channels': ['Channel'],
+  '@storybook/client-api': [
+    'ClientApi',
+    'addArgTypes',
+    'addArgTypesEnhancer',
+    'addArgs',
+    'addArgsEnhancer',
+    'addDecorator',
+    'addLoader',
+    'addParameters',
+    'addStepRunner',
+    'getQueryParam',
+    'getQueryParams',
+    'setGlobalRender',
+    'DEEPLY_EQUAL',
+    'HooksContext',
+    'NO_TARGET_NAME',
+    'StoryStore',
+    'applyHooks',
+    'combineArgs',
+    'combineParameters',
+    'composeConfigs',
+    'composeStepRunners',
+    'composeStories',
+    'composeStory',
+    'decorateStory',
+    'deepDiff',
+    'defaultDecorateStory',
+    'filterArgTypes',
+    'getArrayField',
+    'getField',
+    'getObjectField',
+    'getSingletonField',
+    'getValuesFromArgTypes',
+    'groupArgsByTarget',
+    'inferControls',
+    'mapArgsToTypes',
+    'noTargetArgs',
+    'normalizeComponentAnnotations',
+    'normalizeInputType',
+    'normalizeInputTypes',
+    'normalizeProjectAnnotations',
+    'normalizeStory',
+    'prepareStory',
+    'processCSFFile',
+    'sanitizeStoryContextUpdate',
+    'setProjectAnnotations',
+    'sortStoriesV6',
+    'sortStoriesV7',
+    'useAddonState',
+    'useArgs',
+    'useCallback',
+    'useChannel',
+    'useEffect',
+    'useGlobals',
+    'useMemo',
+    'useParameter',
+    'useReducer',
+    'useRef',
+    'useSharedState',
+    'useState',
+    'useStoryContext',
+    'userOrAutoTitle',
+    'userOrAutoTitleFromSpecifier',
+    'validateOptions',
+  ],
+  '@storybook/client-logger': ['deprecate', 'logger', 'once', 'pretty'],
+  '@storybook/core-client': ['ClientApi', 'StoryStore', 'start'],
+  '@storybook/core-events': [
+    'CHANNEL_CREATED',
+    'CONFIG_ERROR',
+    'CURRENT_STORY_WAS_SET',
+    'DOCS_RENDERED',
+    'FORCE_REMOUNT',
+    'FORCE_RE_RENDER',
+    'GLOBALS_UPDATED',
+    'IGNORED_EXCEPTION',
+    'NAVIGATE_URL',
+    'PLAY_FUNCTION_THREW_EXCEPTION',
+    'PRELOAD_ENTRIES',
+    'PREVIEW_BUILDER_PROGRESS',
+    'PREVIEW_KEYDOWN',
+    'REGISTER_SUBSCRIPTION',
+    'RESET_STORY_ARGS',
+    'SELECT_STORY',
+    'SET_CONFIG',
+    'SET_CURRENT_STORY',
+    'SET_GLOBALS',
+    'SET_INDEX',
+    'SET_STORIES',
+    'SHARED_STATE_CHANGED',
+    'SHARED_STATE_SET',
+    'STORIES_COLLAPSE_ALL',
+    'STORIES_EXPAND_ALL',
+    'STORY_ARGS_UPDATED',
+    'STORY_CHANGED',
+    'STORY_ERRORED',
+    'STORY_INDEX_INVALIDATED',
+    'STORY_MISSING',
+    'STORY_PREPARED',
+    'STORY_RENDERED',
+    'STORY_RENDER_PHASE_CHANGED',
+    'STORY_SPECIFIED',
+    'STORY_THREW_EXCEPTION',
+    'STORY_UNCHANGED',
+    'UPDATE_GLOBALS',
+    'UPDATE_QUERY_PARAMS',
+    'UPDATE_STORY_ARGS',
+  ],
+  '@storybook/preview-web': [
+    'DocsContext',
+    'Preview',
+    'PreviewWeb',
+    'PreviewWithSelection',
+    'composeConfigs',
+    'simulateDOMContentLoaded',
+    'simulatePageLoad',
+  ],
+  '@storybook/store': [
+    'DEEPLY_EQUAL',
+    'HooksContext',
+    'NO_TARGET_NAME',
+    'StoryStore',
+    'applyHooks',
+    'combineArgs',
+    'combineParameters',
+    'composeConfigs',
+    'composeStepRunners',
+    'composeStories',
+    'composeStory',
+    'decorateStory',
+    'deepDiff',
+    'defaultDecorateStory',
+    'filterArgTypes',
+    'getArrayField',
+    'getField',
+    'getObjectField',
+    'getSingletonField',
+    'getValuesFromArgTypes',
+    'groupArgsByTarget',
+    'inferControls',
+    'mapArgsToTypes',
+    'noTargetArgs',
+    'normalizeComponentAnnotations',
+    'normalizeInputType',
+    'normalizeInputTypes',
+    'normalizeProjectAnnotations',
+    'normalizeStory',
+    'prepareStory',
+    'processCSFFile',
+    'sanitizeStoryContextUpdate',
+    'setProjectAnnotations',
+    'sortStoriesV6',
+    'sortStoriesV7',
+    'useAddonState',
+    'useArgs',
+    'useCallback',
+    'useChannel',
+    'useEffect',
+    'useGlobals',
+    'useMemo',
+    'useParameter',
+    'useReducer',
+    'useRef',
+    'useSharedState',
+    'useState',
+    'useStoryContext',
+    'userOrAutoTitle',
+    'userOrAutoTitleFromSpecifier',
+    'validateOptions',
+  ],
+} as const;
diff --git a/code/lib/preview/src/globals/runtime.ts b/code/lib/preview/src/globals/runtime.ts
new file mode 100644
index 000000000000..360a7e63dd67
--- /dev/null
+++ b/code/lib/preview/src/globals/runtime.ts
@@ -0,0 +1,26 @@
+import * as ADDONS from '../modules/addons';
+import * as CHANNEL_POSTMESSAGE from '../modules/channel-postmessage';
+import * as CHANNEL_WEBSOCKET from '../modules/channel-websocket';
+import * as CHANNELS from '../modules/channels';
+import * as CLIENT_API from '../modules/client-api';
+import * as CLIENT_LOGGER from '../modules/client-logger';
+import * as CORE_CLIENT from '../modules/core-client';
+import * as CORE_EVENTS from '../modules/core-events';
+import * as PREVIEW_WEB from '../modules/preview-web';
+import * as STORE from '../modules/store';
+
+import type { Keys } from './types';
+
+// Here we map the name of a module to their VALUE in the global scope.
+export const values: Required<Record<keyof typeof Keys, any>> = {
+  '@storybook/addons': ADDONS,
+  '@storybook/channel-postmessage': CHANNEL_POSTMESSAGE,
+  '@storybook/channel-websocket': CHANNEL_WEBSOCKET,
+  '@storybook/channels': CHANNELS,
+  '@storybook/client-api': CLIENT_API,
+  '@storybook/client-logger': CLIENT_LOGGER,
+  '@storybook/core-client': CORE_CLIENT,
+  '@storybook/core-events': CORE_EVENTS,
+  '@storybook/preview-web': PREVIEW_WEB,
+  '@storybook/store': STORE,
+};
diff --git a/code/lib/preview/src/globals/types.ts b/code/lib/preview/src/globals/types.ts
new file mode 100644
index 000000000000..aa49fddc2cca
--- /dev/null
+++ b/code/lib/preview/src/globals/types.ts
@@ -0,0 +1,17 @@
+import type { ModuleInfo } from '@fal-works/esbuild-plugin-global-externals';
+
+// Here we map the name of a module to their NAME in the global scope.
+export enum Keys {
+  '@storybook/addons' = '__STORYBOOK_MODULE_ADDONS__',
+  '@storybook/channel-postmessage' = '__STORYBOOK_MODULE_CHANNEL_POSTMESSAGE__',
+  '@storybook/channel-websocket' = '__STORYBOOK_MODULE_CHANNEL_WEBSOCKET__',
+  '@storybook/channels' = '__STORYBOOK_MODULE_CHANNELS__',
+  '@storybook/client-api' = '__STORYBOOK_MODULE_CLIENT_API__',
+  '@storybook/client-logger' = '__STORYBOOK_MODULE_CLIENT_LOGGER__',
+  '@storybook/core-client' = '__STORYBOOK_MODULE_CORE_CLIENT__',
+  '@storybook/core-events' = '__STORYBOOK_MODULE_CORE_EVENTS__',
+  '@storybook/preview-web' = '__STORYBOOK_MODULE_PREVIEW_WEB__',
+  '@storybook/store' = '__STORYBOOK_MODULE_STORE__',
+}
+
+export type Definitions = Required<Record<keyof typeof Keys, Required<ModuleInfo>>>;
diff --git a/code/lib/preview/src/modules/addons.ts b/code/lib/preview/src/modules/addons.ts
new file mode 100644
index 000000000000..610dab5bfd22
--- /dev/null
+++ b/code/lib/preview/src/modules/addons.ts
@@ -0,0 +1,2 @@
+/* eslint-disable import/no-extraneous-dependencies */
+export * from '@storybook/addons';
diff --git a/code/lib/preview/src/modules/channel-postmessage.ts b/code/lib/preview/src/modules/channel-postmessage.ts
new file mode 100644
index 000000000000..3dd21c5dcd52
--- /dev/null
+++ b/code/lib/preview/src/modules/channel-postmessage.ts
@@ -0,0 +1,2 @@
+/* eslint-disable import/no-extraneous-dependencies */
+export * from '@storybook/channel-postmessage';
diff --git a/code/lib/preview/src/modules/channel-websocket.ts b/code/lib/preview/src/modules/channel-websocket.ts
new file mode 100644
index 000000000000..c1fa4d433cb2
--- /dev/null
+++ b/code/lib/preview/src/modules/channel-websocket.ts
@@ -0,0 +1,2 @@
+/* eslint-disable import/no-extraneous-dependencies */
+export * from '@storybook/channel-websocket';
diff --git a/code/lib/preview/src/modules/channels.ts b/code/lib/preview/src/modules/channels.ts
new file mode 100644
index 000000000000..f26adfc4bf6e
--- /dev/null
+++ b/code/lib/preview/src/modules/channels.ts
@@ -0,0 +1,2 @@
+/* eslint-disable import/no-extraneous-dependencies */
+export * from '@storybook/channels';
diff --git a/code/lib/preview/src/modules/client-api.ts b/code/lib/preview/src/modules/client-api.ts
new file mode 100644
index 000000000000..f7fa2dedcc6a
--- /dev/null
+++ b/code/lib/preview/src/modules/client-api.ts
@@ -0,0 +1,2 @@
+/* eslint-disable import/no-extraneous-dependencies */
+export * from '@storybook/client-api';
diff --git a/code/lib/preview/src/modules/client-logger.ts b/code/lib/preview/src/modules/client-logger.ts
new file mode 100644
index 000000000000..8af8721e54ad
--- /dev/null
+++ b/code/lib/preview/src/modules/client-logger.ts
@@ -0,0 +1,2 @@
+/* eslint-disable import/no-extraneous-dependencies */
+export * from '@storybook/client-logger';
diff --git a/code/lib/preview/src/modules/core-client.ts b/code/lib/preview/src/modules/core-client.ts
new file mode 100644
index 000000000000..97d155a29697
--- /dev/null
+++ b/code/lib/preview/src/modules/core-client.ts
@@ -0,0 +1,2 @@
+/* eslint-disable import/no-extraneous-dependencies */
+export * from '@storybook/core-client';
diff --git a/code/lib/preview/src/modules/core-events.ts b/code/lib/preview/src/modules/core-events.ts
new file mode 100644
index 000000000000..2278f6494343
--- /dev/null
+++ b/code/lib/preview/src/modules/core-events.ts
@@ -0,0 +1,2 @@
+/* eslint-disable import/no-extraneous-dependencies */
+export * from '@storybook/core-events';
diff --git a/code/lib/preview/src/modules/preview-web.ts b/code/lib/preview/src/modules/preview-web.ts
new file mode 100644
index 000000000000..d044c8dea7c1
--- /dev/null
+++ b/code/lib/preview/src/modules/preview-web.ts
@@ -0,0 +1,2 @@
+/* eslint-disable import/no-extraneous-dependencies */
+export * from '@storybook/preview-web';
diff --git a/code/lib/preview/src/modules/store.ts b/code/lib/preview/src/modules/store.ts
new file mode 100644
index 000000000000..ae79f8208a78
--- /dev/null
+++ b/code/lib/preview/src/modules/store.ts
@@ -0,0 +1,2 @@
+/* eslint-disable import/no-extraneous-dependencies */
+export * from '@storybook/store';
diff --git a/code/lib/preview/src/runtime.ts b/code/lib/preview/src/runtime.ts
new file mode 100644
index 000000000000..da695b49cf8f
--- /dev/null
+++ b/code/lib/preview/src/runtime.ts
@@ -0,0 +1,9 @@
+import { values } from './globals/runtime';
+import { Keys } from './globals/types';
+
+const getKeys = Object.keys as <T extends object>(obj: T) => Array<keyof T>;
+
+// Apply all the globals
+getKeys(Keys).forEach((key) => {
+  (globalThis as any)[Keys[key]] = values[key];
+});
diff --git a/code/lib/preview/tsconfig.json b/code/lib/preview/tsconfig.json
new file mode 100644
index 000000000000..beef63b30edb
--- /dev/null
+++ b/code/lib/preview/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "strict": true,
+    "strictPropertyInitialization": false,
+    "useUnknownInCatchVariables": false,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*"],
+  "exclude": []
+}
diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json
index 5e356298a9b0..6848a1b94fc9 100644
--- a/code/lib/theming/package.json
+++ b/code/lib/theming/package.json
@@ -57,7 +57,7 @@
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@types/fs-extra": "^9.0.6",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "deep-object-diff": "^1.1.0",
     "fs-extra": "^9.0.1",
     "global": "^4.4.0",
diff --git a/code/lib/types/package.json b/code/lib/types/package.json
index 4bde4aa5a038..4b26ddf57983 100644
--- a/code/lib/types/package.json
+++ b/code/lib/types/package.json
@@ -48,7 +48,7 @@
   },
   "devDependencies": {
     "@storybook/csf": "next",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "synchronous-promise": "^2.0.15",
     "typescript": "^4.9.3"
   },
diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts
index c18b53afb1a7..df30a85b45bd 100644
--- a/code/lib/types/src/modules/core-common.ts
+++ b/code/lib/types/src/modules/core-common.ts
@@ -15,6 +15,10 @@ import type { Parameters, Tag } from './csf';
 export type BuilderName = 'webpack5' | '@storybook/builder-webpack5' | string;
 export type RendererName = string;
 
+interface ServerChannel {
+  emit(type: string, args?: any): void;
+}
+
 export interface CoreConfig {
   builder?:
     | BuilderName
@@ -188,6 +192,7 @@ export interface Builder<Config, BuilderStats extends Stats = Stats> {
     startTime: ReturnType<typeof process.hrtime>;
     router: Router;
     server: Server;
+    channel: ServerChannel;
   }) => Promise<void | {
     stats?: BuilderStats;
     totalTime: ReturnType<typeof process.hrtime>;
diff --git a/code/package.json b/code/package.json
index eaddfde7787a..db3acfd01306 100644
--- a/code/package.json
+++ b/code/package.json
@@ -244,7 +244,7 @@
     "@types/fs-extra": "^9.0.6",
     "@types/js-yaml": "^3.12.6",
     "@types/lodash": "^4.14.167",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "@types/node-cleanup": "^2.1.1",
     "@types/prompts": "2.0.11",
     "@types/react": "^16.14.34",
diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json
index 09a8b16a17ff..316ac43db8a4 100644
--- a/code/presets/html-webpack/package.json
+++ b/code/presets/html-webpack/package.json
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "@storybook/core-webpack": "7.0.0-alpha.52",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "html-loader": "^3.1.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json
index b9ed55aa7e0e..7e6e594d10c2 100644
--- a/code/presets/preact-webpack/package.json
+++ b/code/presets/preact-webpack/package.json
@@ -52,7 +52,7 @@
   "dependencies": {
     "@babel/plugin-transform-react-jsx": "^7.19.0",
     "@storybook/core-webpack": "7.0.0-alpha.52",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0"
   },
diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json
index fa8f0b4952fd..0187d9cd6113 100644
--- a/code/presets/react-webpack/package.json
+++ b/code/presets/react-webpack/package.json
@@ -79,7 +79,7 @@
     "@storybook/node-logger": "7.0.0-alpha.52",
     "@storybook/react": "7.0.0-alpha.52",
     "@storybook/react-docgen-typescript-plugin": "1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "@types/semver": "^7.3.4",
     "babel-plugin-add-react-displayname": "^0.0.5",
     "babel-plugin-react-docgen": "^4.2.1",
diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json
index ea7abc7d483f..d0f6cdaff6d3 100644
--- a/code/presets/server-webpack/package.json
+++ b/code/presets/server-webpack/package.json
@@ -58,7 +58,7 @@
     "@storybook/core-server": "7.0.0-alpha.52",
     "@storybook/core-webpack": "7.0.0-alpha.52",
     "@storybook/server": "7.0.0-alpha.52",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "global": "^4.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
diff --git a/code/presets/vue-webpack/package.json b/code/presets/vue-webpack/package.json
index da9ff5a99dde..5ea2b9e96fbe 100644
--- a/code/presets/vue-webpack/package.json
+++ b/code/presets/vue-webpack/package.json
@@ -62,7 +62,7 @@
   "dependencies": {
     "@storybook/core-webpack": "7.0.0-alpha.52",
     "@storybook/docs-tools": "7.0.0-alpha.52",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "ts-loader": "^9.2.8",
diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json
index 915da88869f8..61c804ae15e3 100644
--- a/code/presets/vue3-webpack/package.json
+++ b/code/presets/vue3-webpack/package.json
@@ -62,7 +62,7 @@
   "dependencies": {
     "@storybook/core-webpack": "7.0.0-alpha.52",
     "@storybook/docs-tools": "7.0.0-alpha.52",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "ts-loader": "^9.2.8",
diff --git a/code/presets/web-components-webpack/package.json b/code/presets/web-components-webpack/package.json
index b90f009d743c..d4347219c20b 100644
--- a/code/presets/web-components-webpack/package.json
+++ b/code/presets/web-components-webpack/package.json
@@ -56,7 +56,7 @@
     "@babel/plugin-syntax-import-meta": "^7.10.4",
     "@babel/preset-env": "^7.20.2",
     "@storybook/core-webpack": "7.0.0-alpha.52",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "babel-loader": "^7.0.0 || ^8.0.0",
     "babel-plugin-bundled-import-meta": "^0.3.1",
     "react": "16.14.0",
diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json
index 061005bacea9..24de0f33eee4 100644
--- a/code/renderers/react/package.json
+++ b/code/renderers/react/package.json
@@ -59,7 +59,7 @@
     "@storybook/store": "7.0.0-alpha.52",
     "@storybook/types": "7.0.0-alpha.52",
     "@types/estree": "^0.0.51",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "acorn": "^7.4.1",
     "acorn-jsx": "^5.3.1",
     "acorn-walk": "^7.2.0",
diff --git a/code/ui/components/src/Loader/Loader.tsx b/code/ui/components/src/Loader/Loader.tsx
index 56f38bed12da..c4f89c572a5d 100644
--- a/code/ui/components/src/Loader/Loader.tsx
+++ b/code/ui/components/src/Loader/Loader.tsx
@@ -1,13 +1,10 @@
-import global from 'global';
 import { transparentize } from 'polished';
 import type { ComponentProps, FC } from 'react';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { styled, keyframes } from '@storybook/theming';
 import { Icons } from '../icon/icon';
 import { rotate360 } from '../shared/animation';
 
-const { EventSource, CONFIG_TYPE } = global;
-
 const LoaderWrapper = styled.div<{ size?: number }>(({ size = 32 }) => ({
   borderRadius: '50%',
   cursor: 'progress',
@@ -107,7 +104,7 @@ interface LoaderProps {
   size?: number;
 }
 
-export const PureLoader: FC<LoaderProps & ComponentProps<typeof ProgressWrapper>> = ({
+export const Loader: FC<LoaderProps & ComponentProps<typeof ProgressWrapper>> = ({
   progress,
   error,
   size,
@@ -158,36 +155,3 @@ export const PureLoader: FC<LoaderProps & ComponentProps<typeof ProgressWrapper>
     />
   );
 };
-
-export const Loader: FC<ComponentProps<typeof PureLoader>> = (props) => {
-  const [progress, setProgress] = useState(undefined);
-  const [error, setError] = useState(undefined);
-
-  useEffect(() => {
-    // Don't listen for progress updates in static builds
-    // Event source is not defined in IE 11
-    if (CONFIG_TYPE !== 'DEVELOPMENT' || !EventSource) return undefined;
-
-    const eventSource = new EventSource('/progress');
-    let lastProgress: Progress;
-
-    eventSource.onmessage = (event: any) => {
-      try {
-        lastProgress = JSON.parse(event.data);
-        setProgress(lastProgress);
-      } catch (e) {
-        setError(e);
-        eventSource.close();
-      }
-    };
-
-    eventSource.onerror = () => {
-      if (lastProgress && lastProgress.value !== 1) setError(new Error('Connection closed'));
-      eventSource.close();
-    };
-
-    return () => eventSource.close();
-  }, []);
-
-  return <PureLoader progress={progress} error={error} {...props} />;
-};
diff --git a/code/ui/components/src/index.ts b/code/ui/components/src/index.ts
index e2b6ef984165..14f9e1681de2 100644
--- a/code/ui/components/src/index.ts
+++ b/code/ui/components/src/index.ts
@@ -72,7 +72,7 @@ export { StorybookLogo } from './brand/StorybookLogo';
 export { StorybookIcon } from './brand/StorybookIcon';
 
 // Loader
-export { Loader } from './Loader/Loader';
+export { Loader, PureLoader } from './Loader/Loader';
 
 // Utils
 export { getStoryHref } from './utils/getStoryHref';
diff --git a/code/ui/manager/scripts/generate-exports-file.ts b/code/ui/manager/scripts/generate-exports-file.ts
index c6cdbbd80a58..881233e37e18 100644
--- a/code/ui/manager/scripts/generate-exports-file.ts
+++ b/code/ui/manager/scripts/generate-exports-file.ts
@@ -4,14 +4,14 @@ import path from 'path';
 import shelljs from 'shelljs';
 import { dedent } from 'ts-dedent';
 
-const remove = () => (input: string) => input !== 'default';
+const removeDefault = (input: string) => input !== 'default';
 
 const location = path.join(__dirname, '..', 'src', 'globals', 'exports.ts');
 
 const run = async () => {
   const { values } = await import('../src/globals/runtime');
   const data = Object.entries(values).reduce<Record<string, string[]>>((acc, [key, value]) => {
-    acc[key] = Object.keys(value).filter(remove());
+    acc[key] = Object.keys(value).filter(removeDefault);
     return acc;
   }, {});
 
diff --git a/code/ui/manager/src/components/panel/panel.tsx b/code/ui/manager/src/components/panel/panel.tsx
index ad7141061cd6..c90e44f7676c 100644
--- a/code/ui/manager/src/components/panel/panel.tsx
+++ b/code/ui/manager/src/components/panel/panel.tsx
@@ -1,9 +1,9 @@
 import type { ReactElement } from 'react';
 import React, { Component, Fragment } from 'react';
-import { shortcutToHumanString } from '@storybook/api/shortcut';
 import { styled } from '@storybook/theming';
 import { Tabs, Icons, IconButton } from '@storybook/components';
 import type { State } from '@storybook/api';
+import { shortcutToHumanString } from '@storybook/api';
 
 const DesktopOnlyIconButton = styled(IconButton)({
   // Hides full screen icon at mobile breakpoint defined in app.js
diff --git a/code/ui/manager/src/components/preview/preview.tsx b/code/ui/manager/src/components/preview/preview.tsx
index 95f43812d033..d266fb6b3deb 100644
--- a/code/ui/manager/src/components/preview/preview.tsx
+++ b/code/ui/manager/src/components/preview/preview.tsx
@@ -1,11 +1,12 @@
-import React, { Fragment, useMemo, useEffect, useRef } from 'react';
+import React, { Fragment, useMemo, useEffect, useRef, useState } from 'react';
 import { Helmet } from 'react-helmet-async';
+import global from 'global';
 
 import { type API, Consumer, type Combo, merge } from '@storybook/api';
-import { SET_CURRENT_STORY } from '@storybook/core-events';
+import { PREVIEW_BUILDER_PROGRESS, SET_CURRENT_STORY } from '@storybook/core-events';
 import { addons, types, type Addon } from '@storybook/addons';
 
-import { Loader } from '@storybook/components';
+import { PureLoader } from '@storybook/components';
 import { Location } from '@storybook/router';
 
 import * as S from './utils/components';
@@ -59,9 +60,23 @@ const createCanvas = (id: string, baseUrl = 'iframe.html', withLoader = true): A
             [getElements, ...defaultWrappers]
           );
 
+          const [progress, setProgress] = useState(undefined);
+
+          useEffect(() => {
+            if (global.CONFIG_TYPE === 'DEVELOPMENT') {
+              const channel = addons.getServerChannel();
+
+              channel.on(PREVIEW_BUILDER_PROGRESS, (options) => {
+                setProgress(options);
+              });
+            }
+          }, []);
+
+          const refLoading = !!refs[refId] && !refs[refId].ready;
+          const rootLoading = !refId && !(progress?.value === 1 || progress === undefined);
           const isLoading = entry
-            ? !!refs[refId] && !refs[refId].ready
-            : !storiesFailed && !storiesConfigured;
+            ? refLoading || rootLoading
+            : (!storiesFailed && !storiesConfigured) || rootLoading;
 
           return (
             <ZoomConsumer>
@@ -70,7 +85,7 @@ const createCanvas = (id: string, baseUrl = 'iframe.html', withLoader = true): A
                   <>
                     {withLoader && isLoading && (
                       <S.LoaderWrapper>
-                        <Loader id="preview-loader" role="progressbar" />
+                        <PureLoader id="preview-loader" role="progressbar" progress={progress} />
                       </S.LoaderWrapper>
                     )}
                     <ApplyWrappers
diff --git a/code/ui/manager/src/components/preview/toolbar.tsx b/code/ui/manager/src/components/preview/toolbar.tsx
index 03d831780a51..c7212c968952 100644
--- a/code/ui/manager/src/components/preview/toolbar.tsx
+++ b/code/ui/manager/src/components/preview/toolbar.tsx
@@ -4,8 +4,15 @@ import React, { Fragment, useMemo } from 'react';
 import { styled } from '@storybook/theming';
 
 import { FlexBar, IconButton, Icons, Separator, TabButton, TabBar } from '@storybook/components';
-import { Consumer, type Combo, type API, type State, merge, type LeafEntry } from '@storybook/api';
-import { shortcutToHumanString } from '@storybook/api/shortcut';
+import {
+  shortcutToHumanString,
+  Consumer,
+  type Combo,
+  type API,
+  type State,
+  merge,
+  type LeafEntry,
+} from '@storybook/api';
 import { addons, type Addon, types } from '@storybook/addons';
 
 import { Location, type RenderData } from '@storybook/router';
diff --git a/code/ui/manager/src/containers/menu.tsx b/code/ui/manager/src/containers/menu.tsx
index cc85f23387f5..61d678674aff 100644
--- a/code/ui/manager/src/containers/menu.tsx
+++ b/code/ui/manager/src/containers/menu.tsx
@@ -5,7 +5,7 @@ import { Badge } from '@storybook/components';
 import type { API } from '@storybook/api';
 import { styled, useTheme } from '@storybook/theming';
 
-import { shortcutToHumanString } from '@storybook/api/shortcut';
+import { shortcutToHumanString } from '@storybook/api';
 import { MenuItemIcon } from '../components/sidebar/Menu';
 
 const focusableUIElements = {
diff --git a/code/ui/manager/src/globals/exports.ts b/code/ui/manager/src/globals/exports.ts
index 36634b34a47d..abe8d9da226d 100644
--- a/code/ui/manager/src/globals/exports.ts
+++ b/code/ui/manager/src/globals/exports.ts
@@ -78,6 +78,7 @@ export default {
     'P',
     'Placeholder',
     'Pre',
+    'PureLoader',
     'ResetWrapper',
     'ScrollArea',
     'Separator',
@@ -123,6 +124,7 @@ export default {
     'NAVIGATE_URL',
     'PLAY_FUNCTION_THREW_EXCEPTION',
     'PRELOAD_ENTRIES',
+    'PREVIEW_BUILDER_PROGRESS',
     'PREVIEW_KEYDOWN',
     'REGISTER_SUBSCRIPTION',
     'RESET_STORY_ARGS',
@@ -200,7 +202,10 @@ export default {
     'ManagerContext',
     'Provider',
     'combineParameters',
+    'eventToShortcut',
     'merge',
+    'shortcutMatchesShortcut',
+    'shortcutToHumanString',
     'useAddonState',
     'useArgTypes',
     'useArgs',
diff --git a/code/ui/manager/src/runtime.ts b/code/ui/manager/src/runtime.ts
index 81754fd99671..f0bd5588cadc 100644
--- a/code/ui/manager/src/runtime.ts
+++ b/code/ui/manager/src/runtime.ts
@@ -25,13 +25,14 @@ class ReactProvider extends Provider {
   constructor() {
     super();
 
-    const channel = postMessage.createChannel({ page: 'manager' });
+    const postMessageChannel = postMessage.createChannel({ page: 'manager' });
 
-    addons.setChannel(channel);
-    channel.emit(CHANNEL_CREATED);
+    addons.setChannel(postMessageChannel);
+
+    postMessageChannel.emit(CHANNEL_CREATED);
 
     this.addons = addons;
-    this.channel = channel;
+    this.channel = postMessageChannel;
 
     if (FEATURES?.storyStoreV7 && SERVER_CHANNEL_URL) {
       const serverChannel = webSocket.createChannel({ url: SERVER_CHANNEL_URL });
diff --git a/code/ui/manager/src/settings/shortcuts.tsx b/code/ui/manager/src/settings/shortcuts.tsx
index 9b0fb39a8ed8..38968f2d0403 100644
--- a/code/ui/manager/src/settings/shortcuts.tsx
+++ b/code/ui/manager/src/settings/shortcuts.tsx
@@ -2,11 +2,7 @@ import type { ComponentProps, FC } from 'react';
 import React, { Component } from 'react';
 import { styled, keyframes } from '@storybook/theming';
 
-import {
-  eventToShortcut,
-  shortcutToHumanString,
-  shortcutMatchesShortcut,
-} from '@storybook/api/shortcut';
+import { eventToShortcut, shortcutToHumanString, shortcutMatchesShortcut } from '@storybook/api';
 import { Form, Icons } from '@storybook/components';
 import SettingsFooter from './SettingsFooter';
 
diff --git a/code/yarn.lock b/code/yarn.lock
index 99a203e14381..4c74181ac4c4 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -212,20 +212,20 @@ __metadata:
   linkType: hard
 
 "@angular/common@npm:^13.3.6":
-  version: 13.3.11
-  resolution: "@angular/common@npm:13.3.11"
+  version: 13.3.12
+  resolution: "@angular/common@npm:13.3.12"
   dependencies:
     tslib: ^2.3.0
   peerDependencies:
-    "@angular/core": 13.3.11
+    "@angular/core": 13.3.12
     rxjs: ^6.5.3 || ^7.4.0
-  checksum: a2a16a3bc36f4509e7308343c9a71918ce8fd2334d030aeba63b720069004891c0538a4f3cda0aef7a4023e2613bce4f5656041b71850fbe50b2288491ec5ed6
+  checksum: 92e928d2e5803c975ea886b1e95df7c4de4ceffbbb85fe83651a03e2f1e5df83065ff8aa883a1083881ae9a2db0e7e68e91dfa89ce98ccbd64f64b53126b4d06
   languageName: node
   linkType: hard
 
 "@angular/compiler-cli@npm:^13.3.6":
-  version: 13.3.11
-  resolution: "@angular/compiler-cli@npm:13.3.11"
+  version: 13.3.12
+  resolution: "@angular/compiler-cli@npm:13.3.12"
   dependencies:
     "@babel/core": ^7.17.2
     chokidar: ^3.0.0
@@ -238,78 +238,78 @@ __metadata:
     tslib: ^2.3.0
     yargs: ^17.2.1
   peerDependencies:
-    "@angular/compiler": 13.3.11
+    "@angular/compiler": 13.3.12
     typescript: ">=4.4.2 <4.7"
   bin:
     ng-xi18n: bundles/src/bin/ng_xi18n.js
     ngc: bundles/src/bin/ngc.js
     ngcc: bundles/ngcc/main-ngcc.js
-  checksum: 1b92e64a542040fde59d6dd8e4863529b8de16e7a4e49526a4a5e8c0c897c8530db5127d373bb0ea55a8b994f85961aa2f807eaca292c60088c64f53cfec762c
+  checksum: 53ca9c978f23e1bd9677b88502e8f8cc356772bfe8ba03ac775496541750cb5afef194ad466874ccd2e7fcc81ece35b800dd81687028c65f304e9acbf8d9cdaa
   languageName: node
   linkType: hard
 
 "@angular/compiler@npm:^13.3.6":
-  version: 13.3.11
-  resolution: "@angular/compiler@npm:13.3.11"
+  version: 13.3.12
+  resolution: "@angular/compiler@npm:13.3.12"
   dependencies:
     tslib: ^2.3.0
-  checksum: 6dd0a8998d618280e41e56953cc41092fc50a2ddcd7b6a97f4d1320704de24c77afb0249ceba42cc7754eb9b8e94f0de9fbdcb294697019f6663ee0b50aa54a2
+  checksum: b028952c1aa4c8494ced5b4618caed86a22c40d1448707483c285e3d619b8ab48f08344cccc017034af7e536ba8f04927157073d1a62c8194574a7e6374c8b2f
   languageName: node
   linkType: hard
 
 "@angular/core@npm:^13.3.6":
-  version: 13.3.11
-  resolution: "@angular/core@npm:13.3.11"
+  version: 13.3.12
+  resolution: "@angular/core@npm:13.3.12"
   dependencies:
     tslib: ^2.3.0
   peerDependencies:
     rxjs: ^6.5.3 || ^7.4.0
     zone.js: ~0.11.4
-  checksum: 44f2ec422ad2d47899aeabf958bfab23ab429f0363e55617c7822b4c8634b0f91cc17b9f577fa1031401ed309a449fb50797d15c54da80281b86a79f7c136faa
+  checksum: 443b256b5d73ff41fc0b6f9590b4964e67552a65359901a7934c2de6eb3cda735f42bba7e19faee8c91ae13c99e914959d81229872210c1f6a57672f2433c88d
   languageName: node
   linkType: hard
 
 "@angular/forms@npm:^13.3.6":
-  version: 13.3.11
-  resolution: "@angular/forms@npm:13.3.11"
+  version: 13.3.12
+  resolution: "@angular/forms@npm:13.3.12"
   dependencies:
     tslib: ^2.3.0
   peerDependencies:
-    "@angular/common": 13.3.11
-    "@angular/core": 13.3.11
-    "@angular/platform-browser": 13.3.11
+    "@angular/common": 13.3.12
+    "@angular/core": 13.3.12
+    "@angular/platform-browser": 13.3.12
     rxjs: ^6.5.3 || ^7.4.0
-  checksum: 4f51e9f57c471efc52110e9e1bdbb6c995526183cd9cbcec5f2c4a1f10c9a8944f2eb9d8c8e668d4dae2ebf9b7236639535e48d516791610107440584697f7fa
+  checksum: 5cb3532858663ba3573a958e652f71a54b2a16a545a504b60c82dd96fd94b274efe04531e60f3678b8bc06f8300f2adbe279faca1e5de7f25fecbd6136748bf3
   languageName: node
   linkType: hard
 
 "@angular/platform-browser-dynamic@npm:^13.3.6":
-  version: 13.3.11
-  resolution: "@angular/platform-browser-dynamic@npm:13.3.11"
+  version: 13.3.12
+  resolution: "@angular/platform-browser-dynamic@npm:13.3.12"
   dependencies:
     tslib: ^2.3.0
   peerDependencies:
-    "@angular/common": 13.3.11
-    "@angular/compiler": 13.3.11
-    "@angular/core": 13.3.11
-    "@angular/platform-browser": 13.3.11
-  checksum: 28322db9e0fbde34d41d16b628ca6264b2a40d35f6b8ae1bb2bc1a35b47aeb0a869cbb50a3dddc1cae3f7b0ba37d0014d3a0d73c4ace068850eed7b5b9729032
+    "@angular/common": 13.3.12
+    "@angular/compiler": 13.3.12
+    "@angular/core": 13.3.12
+    "@angular/platform-browser": 13.3.12
+  checksum: d075cd570bc30af5084af7adde9c9db1bb181237b9f50210df5063aae03386f09d9a77b5d7967076653b90f529e33c0a9388298f63998659d7458fb0332897af
   languageName: node
   linkType: hard
 
 "@angular/platform-browser@npm:^13.3.6":
-  version: 13.3.11
-  resolution: "@angular/platform-browser@npm:13.3.11"
+  version: 13.3.12
+  resolution: "@angular/platform-browser@npm:13.3.12"
   dependencies:
     tslib: ^2.3.0
   peerDependencies:
-    "@angular/animations": 13.3.11
-    "@angular/common": 13.3.11
-    "@angular/core": 13.3.11
+    "@angular/animations": 13.3.12
+    "@angular/common": 13.3.12
+    "@angular/core": 13.3.12
   peerDependenciesMeta:
     "@angular/animations":
       optional: true
-  checksum: f1b2d4dccfb3114122fded47470e3bf34f049c0b98b8b95f16d8eea63109fd0e7fcce99b1833fe65844e7698650d9b7e5104c9c883fb8b443c0b061feb7fe850
+  checksum: db35e41ed9d37ddddc2bbdc2249312438e0c11ff15811c1e4567206427fab9a663a03efb11b675d9d9535f4ffd247d4ecff6389f15e53d594bd8b82ff2042f7f
   languageName: node
   linkType: hard
 
@@ -4237,100 +4237,100 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@next/env@npm:12.3.3":
-  version: 12.3.3
-  resolution: "@next/env@npm:12.3.3"
-  checksum: 3eecf70e002f6f5c608a3e550f07ab1503b87a3d822f5d8435f3857627510e1442bb82f7734398477b2d0b86dda084aa5ffffd4b52c21af97e1da5f225f4d0d5
+"@next/env@npm:12.3.4":
+  version: 12.3.4
+  resolution: "@next/env@npm:12.3.4"
+  checksum: 69d372906d54691e032b5d7481d56bc03698fe5a03ed76952e53236ae34b0e3a09b0e098dc1b1bfc4d7588b158392dc500888dbb01413883727adf9e0aec894b
   languageName: node
   linkType: hard
 
-"@next/swc-android-arm-eabi@npm:12.3.3":
-  version: 12.3.3
-  resolution: "@next/swc-android-arm-eabi@npm:12.3.3"
+"@next/swc-android-arm-eabi@npm:12.3.4":
+  version: 12.3.4
+  resolution: "@next/swc-android-arm-eabi@npm:12.3.4"
   conditions: os=android & cpu=arm
   languageName: node
   linkType: hard
 
-"@next/swc-android-arm64@npm:12.3.3":
-  version: 12.3.3
-  resolution: "@next/swc-android-arm64@npm:12.3.3"
+"@next/swc-android-arm64@npm:12.3.4":
+  version: 12.3.4
+  resolution: "@next/swc-android-arm64@npm:12.3.4"
   conditions: os=android & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-arm64@npm:12.3.3":
-  version: 12.3.3
-  resolution: "@next/swc-darwin-arm64@npm:12.3.3"
+"@next/swc-darwin-arm64@npm:12.3.4":
+  version: 12.3.4
+  resolution: "@next/swc-darwin-arm64@npm:12.3.4"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-darwin-x64@npm:12.3.3":
-  version: 12.3.3
-  resolution: "@next/swc-darwin-x64@npm:12.3.3"
+"@next/swc-darwin-x64@npm:12.3.4":
+  version: 12.3.4
+  resolution: "@next/swc-darwin-x64@npm:12.3.4"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
 
-"@next/swc-freebsd-x64@npm:12.3.3":
-  version: 12.3.3
-  resolution: "@next/swc-freebsd-x64@npm:12.3.3"
+"@next/swc-freebsd-x64@npm:12.3.4":
+  version: 12.3.4
+  resolution: "@next/swc-freebsd-x64@npm:12.3.4"
   conditions: os=freebsd & cpu=x64
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm-gnueabihf@npm:12.3.3":
-  version: 12.3.3
-  resolution: "@next/swc-linux-arm-gnueabihf@npm:12.3.3"
+"@next/swc-linux-arm-gnueabihf@npm:12.3.4":
+  version: 12.3.4
+  resolution: "@next/swc-linux-arm-gnueabihf@npm:12.3.4"
   conditions: os=linux & cpu=arm
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-gnu@npm:12.3.3":
-  version: 12.3.3
-  resolution: "@next/swc-linux-arm64-gnu@npm:12.3.3"
+"@next/swc-linux-arm64-gnu@npm:12.3.4":
+  version: 12.3.4
+  resolution: "@next/swc-linux-arm64-gnu@npm:12.3.4"
   conditions: os=linux & cpu=arm64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@next/swc-linux-arm64-musl@npm:12.3.3":
-  version: 12.3.3
-  resolution: "@next/swc-linux-arm64-musl@npm:12.3.3"
+"@next/swc-linux-arm64-musl@npm:12.3.4":
+  version: 12.3.4
+  resolution: "@next/swc-linux-arm64-musl@npm:12.3.4"
   conditions: os=linux & cpu=arm64 & libc=musl
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-gnu@npm:12.3.3":
-  version: 12.3.3
-  resolution: "@next/swc-linux-x64-gnu@npm:12.3.3"
+"@next/swc-linux-x64-gnu@npm:12.3.4":
+  version: 12.3.4
+  resolution: "@next/swc-linux-x64-gnu@npm:12.3.4"
   conditions: os=linux & cpu=x64 & libc=glibc
   languageName: node
   linkType: hard
 
-"@next/swc-linux-x64-musl@npm:12.3.3":
-  version: 12.3.3
-  resolution: "@next/swc-linux-x64-musl@npm:12.3.3"
+"@next/swc-linux-x64-musl@npm:12.3.4":
+  version: 12.3.4
+  resolution: "@next/swc-linux-x64-musl@npm:12.3.4"
   conditions: os=linux & cpu=x64 & libc=musl
   languageName: node
   linkType: hard
 
-"@next/swc-win32-arm64-msvc@npm:12.3.3":
-  version: 12.3.3
-  resolution: "@next/swc-win32-arm64-msvc@npm:12.3.3"
+"@next/swc-win32-arm64-msvc@npm:12.3.4":
+  version: 12.3.4
+  resolution: "@next/swc-win32-arm64-msvc@npm:12.3.4"
   conditions: os=win32 & cpu=arm64
   languageName: node
   linkType: hard
 
-"@next/swc-win32-ia32-msvc@npm:12.3.3":
-  version: 12.3.3
-  resolution: "@next/swc-win32-ia32-msvc@npm:12.3.3"
+"@next/swc-win32-ia32-msvc@npm:12.3.4":
+  version: 12.3.4
+  resolution: "@next/swc-win32-ia32-msvc@npm:12.3.4"
   conditions: os=win32 & cpu=ia32
   languageName: node
   linkType: hard
 
-"@next/swc-win32-x64-msvc@npm:12.3.3":
-  version: 12.3.3
-  resolution: "@next/swc-win32-x64-msvc@npm:12.3.3"
+"@next/swc-win32-x64-msvc@npm:12.3.4":
+  version: 12.3.4
+  resolution: "@next/swc-win32-x64-msvc@npm:12.3.4"
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -4956,11 +4956,11 @@ __metadata:
   linkType: hard
 
 "@pnpm/network.ca-file@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "@pnpm/network.ca-file@npm:1.0.1"
+  version: 1.0.2
+  resolution: "@pnpm/network.ca-file@npm:1.0.2"
   dependencies:
     graceful-fs: 4.2.10
-  checksum: 4f3ecff55585262709bb35590fc332ccfc6e0ec62ca53baff03e080661fa603d9b6b50e69151721bb3bb891383fc44e80792947d02cccef4647a1f91e3ed32b9
+  checksum: 95f6e0e38d047aca3283550719155ce7304ac00d98911e4ab026daedaf640a63bd83e3d13e17c623fa41ac72f3801382ba21260bcce431c14fbbc06430ecb776
   languageName: node
   linkType: hard
 
@@ -5277,7 +5277,7 @@ __metadata:
     "@storybook/testing-library": 0.0.14-next.0
     "@storybook/theming": 7.0.0-alpha.52
     "@storybook/types": 7.0.0-alpha.52
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     formik: ^2.2.9
     global: ^4.4.0
     jest-mock: ^27.0.6
@@ -5661,7 +5661,7 @@ __metadata:
     "@storybook/node-logger": 7.0.0-alpha.52
     "@storybook/store": 7.0.0-alpha.52
     "@storybook/types": 7.0.0-alpha.52
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     "@types/react": ^16.14.34
     "@types/react-dom": ^16.9.14
     "@types/rimraf": ^3.0.2
@@ -5842,20 +5842,24 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/builder-vite@workspace:lib/builder-vite"
   dependencies:
+    "@fal-works/esbuild-plugin-global-externals": ^2.1.2
     "@joshwooding/vite-plugin-react-docgen-typescript": 0.0.5
     "@storybook/client-api": 7.0.0-alpha.52
     "@storybook/client-logger": 7.0.0-alpha.52
     "@storybook/core-common": 7.0.0-alpha.52
     "@storybook/mdx2-csf": next
     "@storybook/node-logger": 7.0.0-alpha.52
+    "@storybook/preview": 7.0.0-alpha.52
     "@storybook/preview-web": 7.0.0-alpha.52
     "@storybook/source-loader": 7.0.0-alpha.52
     "@storybook/types": 7.0.0-alpha.52
     "@types/express": ^4.17.13
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     "@vitejs/plugin-react": ^2.0.0
     browser-assert: ^1.2.1
     es-module-lexer: ^0.9.3
+    express: ^4.17.1
+    fs-extra: ^9.0.1
     glob: ^7.2.0
     glob-promise: ^4.2.0
     magic-string: ^0.26.1
@@ -5890,11 +5894,13 @@ __metadata:
     "@storybook/core-events": 7.0.0-alpha.52
     "@storybook/core-webpack": 7.0.0-alpha.52
     "@storybook/node-logger": 7.0.0-alpha.52
+    "@storybook/preview": 7.0.0-alpha.52
     "@storybook/preview-web": 7.0.0-alpha.52
     "@storybook/router": 7.0.0-alpha.52
     "@storybook/store": 7.0.0-alpha.52
     "@storybook/theming": 7.0.0-alpha.52
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
+    "@types/pretty-hrtime": ^1.0.0
     "@types/semver": ^7.3.4
     "@types/terser-webpack-plugin": ^5.2.0
     "@types/webpack-dev-middleware": ^5.3.0
@@ -5905,10 +5911,13 @@ __metadata:
     browser-assert: ^1.2.1
     case-sensitive-paths-webpack-plugin: ^2.4.0
     css-loader: ^6.7.1
+    express: ^4.17.1
     fork-ts-checker-webpack-plugin: ^7.2.8
+    fs-extra: ^9.0.1
     global: ^4.4.0
     html-webpack-plugin: ^5.5.0
     path-browserify: ^1.0.1
+    pretty-hrtime: ^1.0.3
     process: ^0.11.10
     semver: ^7.3.7
     style-loader: ^3.3.1
@@ -6156,7 +6165,7 @@ __metadata:
     "@types/babel__core": ^7.1.20
     "@types/express": ^4.7.0
     "@types/mock-fs": ^4.13.1
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     "@types/picomatch": ^2.3.0
     "@types/pretty-hrtime": ^1.0.0
     chalk: ^4.1.0
@@ -6226,7 +6235,7 @@ __metadata:
     "@storybook/types": 7.0.0-alpha.52
     "@types/compression": ^1.7.0
     "@types/ip": ^1.1.0
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     "@types/node-fetch": ^2.5.7
     "@types/pretty-hrtime": ^1.0.0
     "@types/semver": ^7.3.4
@@ -6279,7 +6288,7 @@ __metadata:
     "@storybook/core-common": 7.0.0-alpha.52
     "@storybook/node-logger": 7.0.0-alpha.52
     "@storybook/types": 7.0.0-alpha.52
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     ts-dedent: ^2.0.0
     typescript: ^4.9.3
     webpack: 5
@@ -6418,7 +6427,7 @@ __metadata:
     "@storybook/core-common": 7.0.0-alpha.52
     "@storybook/html": 7.0.0-alpha.52
     "@storybook/preset-html-webpack": 7.0.0-alpha.52
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     global: ^4.4.0
     react: 16.14.0
     react-dom: 16.14.0
@@ -6605,7 +6614,7 @@ __metadata:
     "@storybook/node-logger": 7.0.0-alpha.52
     "@storybook/preset-react-webpack": 7.0.0-alpha.52
     "@storybook/react": 7.0.0-alpha.52
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     find-up: ^5.0.0
     fs-extra: ^9.0.1
     image-size: ^1.0.0
@@ -6670,7 +6679,7 @@ __metadata:
     "@storybook/core-common": 7.0.0-alpha.52
     "@storybook/preact": 7.0.0-alpha.52
     "@storybook/preset-preact-webpack": 7.0.0-alpha.52
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     preact: ^10.5.13
     react: 16.14.0
     react-dom: 16.14.0
@@ -6705,7 +6714,7 @@ __metadata:
   resolution: "@storybook/preset-html-webpack@workspace:presets/html-webpack"
   dependencies:
     "@storybook/core-webpack": 7.0.0-alpha.52
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     html-loader: ^3.1.0
     react: 16.14.0
     react-dom: 16.14.0
@@ -6722,7 +6731,7 @@ __metadata:
   dependencies:
     "@babel/plugin-transform-react-jsx": ^7.19.0
     "@storybook/core-webpack": 7.0.0-alpha.52
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     preact: ^10.5.13
     react: 16.14.0
     react-dom: 16.14.0
@@ -6745,7 +6754,7 @@ __metadata:
     "@storybook/node-logger": 7.0.0-alpha.52
     "@storybook/react": 7.0.0-alpha.52
     "@storybook/react-docgen-typescript-plugin": 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     "@types/semver": ^7.3.4
     "@types/util-deprecate": ^1.0.0
     babel-plugin-add-react-displayname: ^0.0.5
@@ -6776,7 +6785,7 @@ __metadata:
     "@storybook/core-server": 7.0.0-alpha.52
     "@storybook/core-webpack": 7.0.0-alpha.52
     "@storybook/server": 7.0.0-alpha.52
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     fs-extra: ^9.0.1
     global: ^4.4.0
     jest-specific-snapshot: ^6.0.0
@@ -6816,7 +6825,7 @@ __metadata:
   dependencies:
     "@storybook/core-webpack": 7.0.0-alpha.52
     "@storybook/docs-tools": 7.0.0-alpha.52
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     react: 16.14.0
     react-dom: 16.14.0
     ts-loader: ^9.2.8
@@ -6843,7 +6852,7 @@ __metadata:
   dependencies:
     "@storybook/core-webpack": 7.0.0-alpha.52
     "@storybook/docs-tools": 7.0.0-alpha.52
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     "@vue/compiler-sfc": ^3.2.33
     react: 16.14.0
     react-dom: 16.14.0
@@ -6870,7 +6879,7 @@ __metadata:
     "@babel/plugin-syntax-import-meta": ^7.10.4
     "@babel/preset-env": ^7.20.2
     "@storybook/core-webpack": 7.0.0-alpha.52
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     babel-loader: ^7.0.0 || ^8.0.0
     babel-plugin-bundled-import-meta: ^0.3.1
     lit-html: 2.0.2
@@ -6905,6 +6914,44 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@storybook/preview@7.0.0-alpha.52, @storybook/preview@workspace:lib/preview":
+  version: 0.0.0-use.local
+  resolution: "@storybook/preview@workspace:lib/preview"
+  dependencies:
+    "@storybook/api": 7.0.0-alpha.52
+    "@storybook/channel-postmessage": 7.0.0-alpha.52
+    "@storybook/channel-websocket": 7.0.0-alpha.52
+    "@storybook/channels": 7.0.0-alpha.52
+    "@storybook/client-logger": 7.0.0-alpha.52
+    "@storybook/core-client": 7.0.0-alpha.52
+    "@storybook/core-common": 7.0.0-alpha.52
+    "@storybook/core-events": 7.0.0-alpha.52
+    "@storybook/csf": next
+    "@storybook/preview-web": 7.0.0-alpha.52
+    "@storybook/router": 7.0.0-alpha.52
+    "@storybook/theming": 7.0.0-alpha.52
+    "@storybook/types": 7.0.0-alpha.52
+    "@types/qs": ^6.9.5
+    "@types/shelljs": ^0.8.7
+    "@types/webpack-env": ^1.16.4
+    ansi-to-html: ^0.6.11
+    dequal: ^2.0.2
+    fs-extra: ^9.0.1
+    global: ^4.4.0
+    lodash: ^4.17.21
+    memoizerific: ^1.11.3
+    qs: ^6.10.0
+    react: 16.14.0
+    shelljs: ^0.8.5
+    slash: ^3.0.0
+    synchronous-promise: ^2.0.15
+    ts-dedent: ^2.0.0
+    ts-jest: ^28.0.8
+    typescript: ~4.6.3
+    util-deprecate: ^1.0.2
+  languageName: unknown
+  linkType: soft
+
 "@storybook/react-docgen-typescript-plugin@npm:1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0":
   version: 1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0
   resolution: "@storybook/react-docgen-typescript-plugin@npm:1.0.2-canary.6.9d540b91e815f8fc2f8829189deb00553559ff63.0"
@@ -6936,7 +6983,7 @@ __metadata:
     "@storybook/client-api": 7.0.0-alpha.52
     "@storybook/preview-web": 7.0.0-alpha.52
     "@storybook/react": 7.0.0-alpha.52
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     "@vitejs/plugin-react": ^2.0.0
     ast-types: ^0.14.2
     magic-string: ^0.26.1
@@ -6956,7 +7003,7 @@ __metadata:
     "@storybook/builder-webpack5": 7.0.0-alpha.52
     "@storybook/preset-react-webpack": 7.0.0-alpha.52
     "@storybook/react": 7.0.0-alpha.52
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     jest-specific-snapshot: ^6.0.0
     typescript: ^4.9.3
   peerDependencies:
@@ -6983,7 +7030,7 @@ __metadata:
     "@storybook/store": 7.0.0-alpha.52
     "@storybook/types": 7.0.0-alpha.52
     "@types/estree": ^0.0.51
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     "@types/util-deprecate": ^1.0.0
     acorn: ^7.4.1
     acorn-jsx: ^5.3.1
@@ -7138,7 +7185,7 @@ __metadata:
     "@types/fs-extra": ^9.0.6
     "@types/js-yaml": ^3.12.6
     "@types/lodash": ^4.14.167
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     "@types/node-cleanup": ^2.1.1
     "@types/prompts": 2.0.11
     "@types/react": ^16.14.34
@@ -7327,7 +7374,7 @@ __metadata:
     "@storybook/core-common": 7.0.0-alpha.52
     "@storybook/preset-server-webpack": 7.0.0-alpha.52
     "@storybook/server": 7.0.0-alpha.52
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     react: 16.14.0
     react-dom: 16.14.0
     typescript: ^4.9.3
@@ -7406,7 +7453,7 @@ __metadata:
     "@storybook/preview-web": 7.0.0-alpha.52
     "@storybook/svelte": 7.0.0-alpha.52
     "@sveltejs/vite-plugin-svelte": ^1.0.0
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     magic-string: ^0.26.1
     svelte: ^3.0.0
     sveltedoc-parser: ^4.2.1
@@ -7506,7 +7553,7 @@ __metadata:
     "@emotion/use-insertion-effect-with-fallbacks": ^1.0.0
     "@storybook/client-logger": 7.0.0-alpha.52
     "@types/fs-extra": ^9.0.6
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     deep-object-diff: ^1.1.0
     fs-extra: ^9.0.1
     global: ^4.4.0
@@ -7543,7 +7590,7 @@ __metadata:
     "@storybook/csf": next
     "@types/babel__core": ^7.1.20
     "@types/express": ^4.7.0
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     express: ^4.17.1
     file-system-cache: ^2.0.0
     synchronous-promise: ^2.0.15
@@ -7582,7 +7629,7 @@ __metadata:
     "@storybook/core-common": 7.0.0-alpha.52
     "@storybook/preset-vue-webpack": 7.0.0-alpha.52
     "@storybook/vue": 7.0.0-alpha.52
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     react: 16.14.0
     react-dom: 16.14.0
     typescript: ^4.9.3
@@ -7611,7 +7658,7 @@ __metadata:
     "@storybook/core-server": 7.0.0-alpha.52
     "@storybook/preview-web": 7.0.0-alpha.52
     "@storybook/vue3": 7.0.0-alpha.52
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     "@vitejs/plugin-vue": ^3.0.0
     magic-string: ^0.26.1
     typescript: ^4.9.3
@@ -7628,7 +7675,7 @@ __metadata:
     "@storybook/core-common": 7.0.0-alpha.52
     "@storybook/preset-vue3-webpack": 7.0.0-alpha.52
     "@storybook/vue3": 7.0.0-alpha.52
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     "@vue/compiler-sfc": 3.0.0
     react: 16.14.0
     react-dom: 16.14.0
@@ -7713,7 +7760,7 @@ __metadata:
     "@storybook/node-logger": 7.0.0-alpha.52
     "@storybook/preview-web": 7.0.0-alpha.52
     "@storybook/web-components": 7.0.0-alpha.52
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     magic-string: ^0.26.1
     typescript: ^4.9.3
     vite: ^3.1.0
@@ -7729,7 +7776,7 @@ __metadata:
     "@storybook/core-common": 7.0.0-alpha.52
     "@storybook/preset-web-components-webpack": 7.0.0-alpha.52
     "@storybook/web-components": 7.0.0-alpha.52
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     lit-html: 2.0.2
     react: 16.14.0
     react-dom: 16.14.0
@@ -8444,13 +8491,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:*, @types/node@npm:>= 8, @types/node@npm:^16.0.0 || ^18.0.0, @types/node@npm:^18.7.20":
+"@types/node@npm:*, @types/node@npm:>= 8, @types/node@npm:^18.7.20":
   version: 18.11.9
   resolution: "@types/node@npm:18.11.9"
   checksum: aeaa925406f841c41679b32def9391a9892171e977105e025050e9f66e2830b4c50d0d974a1af0077ead3337a1f3bdf49ee7e7f402ebf2e034a3f97d9d240dba
   languageName: node
   linkType: hard
 
+"@types/node@npm:^16.0.0":
+  version: 16.18.3
+  resolution: "@types/node@npm:16.18.3"
+  checksum: 058ddd61a3d39f517bc9c30b82b9d6257d903e84c42ba66aae63bd13203b6deb2acf7f7e14caefd5d7cebadbe8c90604c04f9851cd41cd6a1bc2fc4dcec85f01
+  languageName: node
+  linkType: hard
+
 "@types/normalize-package-data@npm:^2.4.0":
   version: 2.4.1
   resolution: "@types/normalize-package-data@npm:2.4.1"
@@ -8957,12 +9011,12 @@ __metadata:
   linkType: hard
 
 "@typescript-eslint/eslint-plugin@npm:^5.43.0":
-  version: 5.43.0
-  resolution: "@typescript-eslint/eslint-plugin@npm:5.43.0"
+  version: 5.44.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:5.44.0"
   dependencies:
-    "@typescript-eslint/scope-manager": 5.43.0
-    "@typescript-eslint/type-utils": 5.43.0
-    "@typescript-eslint/utils": 5.43.0
+    "@typescript-eslint/scope-manager": 5.44.0
+    "@typescript-eslint/type-utils": 5.44.0
+    "@typescript-eslint/utils": 5.44.0
     debug: ^4.3.4
     ignore: ^5.2.0
     natural-compare-lite: ^1.4.0
@@ -8975,54 +9029,54 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 98f984ab9e0fbae0536a49f1d32c367ff54e3dbf4619710370c917abac865c90b363435a79b8860f6cdc34941661e3e321eca558f0584aaf0b937953ffb3d7cc
+  checksum: 1e8b19f7dae98ace600926d17d3317c5634a157d94831a2a83ab8d9cc973eb1c3769935a46b8885625e675f07e14efde195ef6a9beb33078a154c177a2da2d92
   languageName: node
   linkType: hard
 
 "@typescript-eslint/experimental-utils@npm:^5.43.0":
-  version: 5.43.0
-  resolution: "@typescript-eslint/experimental-utils@npm:5.43.0"
+  version: 5.44.0
+  resolution: "@typescript-eslint/experimental-utils@npm:5.44.0"
   dependencies:
-    "@typescript-eslint/utils": 5.43.0
+    "@typescript-eslint/utils": 5.44.0
   peerDependencies:
     eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  checksum: 28fbb4e62059dcb88b6397e81aa30053fbe30ccec76cdc6d947c305c8062e7b47306a13918483a63e4e97ca0871a9b22a481f4ef2b8316bac81e030becbfb3b1
+  checksum: 1b1e72341be6faafaac30f3926934db84bf10f27398ef5529dbba0807c4a75d57418fc12f15d85a84ce6e6af1f09374ea34b058d59674c9d8a8ae2173cc8c9d2
   languageName: node
   linkType: hard
 
 "@typescript-eslint/parser@npm:^5.43.0":
-  version: 5.43.0
-  resolution: "@typescript-eslint/parser@npm:5.43.0"
+  version: 5.44.0
+  resolution: "@typescript-eslint/parser@npm:5.44.0"
   dependencies:
-    "@typescript-eslint/scope-manager": 5.43.0
-    "@typescript-eslint/types": 5.43.0
-    "@typescript-eslint/typescript-estree": 5.43.0
+    "@typescript-eslint/scope-manager": 5.44.0
+    "@typescript-eslint/types": 5.44.0
+    "@typescript-eslint/typescript-estree": 5.44.0
     debug: ^4.3.4
   peerDependencies:
     eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: e32a411b08d22e5e33f1d8160ce45882ec7596d360de459bda2d30cc4f0eec71d0b05c99567c33529c18789e48e430f0b89634cf43481db010b3ab5ecca0f5a6
+  checksum: fc43a15f956fbae7cd995240c1a5cb5fd00933e2fea34964240ad92aa32313b6edef56f10e0fe946fc40d8a42172c27d8b6406056db36d17f9191b24f449b2f3
   languageName: node
   linkType: hard
 
-"@typescript-eslint/scope-manager@npm:5.43.0":
-  version: 5.43.0
-  resolution: "@typescript-eslint/scope-manager@npm:5.43.0"
+"@typescript-eslint/scope-manager@npm:5.44.0":
+  version: 5.44.0
+  resolution: "@typescript-eslint/scope-manager@npm:5.44.0"
   dependencies:
-    "@typescript-eslint/types": 5.43.0
-    "@typescript-eslint/visitor-keys": 5.43.0
-  checksum: f30f7ae64cf518123959c6189508372041a60acad8b412c5fe628214707161f7cb66730aca575be0bca2ccee83c2b59de6c1c139cfb269f6b344cd0921a466b4
+    "@typescript-eslint/types": 5.44.0
+    "@typescript-eslint/visitor-keys": 5.44.0
+  checksum: 5e8cc97ae8c0eefd8e399df9d34e1afc634f238b2e10a2bb10cdcd72fb186a06219f87b418dce6944c68cf24a279e526eb46c1d3f10f1c0a1b0c12a61c226f32
   languageName: node
   linkType: hard
 
-"@typescript-eslint/type-utils@npm:5.43.0":
-  version: 5.43.0
-  resolution: "@typescript-eslint/type-utils@npm:5.43.0"
+"@typescript-eslint/type-utils@npm:5.44.0":
+  version: 5.44.0
+  resolution: "@typescript-eslint/type-utils@npm:5.44.0"
   dependencies:
-    "@typescript-eslint/typescript-estree": 5.43.0
-    "@typescript-eslint/utils": 5.43.0
+    "@typescript-eslint/typescript-estree": 5.44.0
+    "@typescript-eslint/utils": 5.44.0
     debug: ^4.3.4
     tsutils: ^3.21.0
   peerDependencies:
@@ -9030,23 +9084,23 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 4ed87a1856ab556d2c456c6696ad791dc71b7ae4e745281eba148418695b2a5848403a607352516c8f2007b10dd4b0884a356e8edda51f1d6fcb52d4216c600a
+  checksum: 8e97d82d8465224148a18852ca3e9beaa0213e18d7161246a64923cb12efcf20a0d588a5be9d3cf81e344c65234d90ede00f29679a49d4aeee92f7220bd47b55
   languageName: node
   linkType: hard
 
-"@typescript-eslint/types@npm:5.43.0":
-  version: 5.43.0
-  resolution: "@typescript-eslint/types@npm:5.43.0"
-  checksum: 93feae3f3a51100f46076649cc02bcd80bdeec88670a8fdfa63927b614f90b039cf1ec4f98367107112e744b567d35eec5fedc465aaea0a92aa835933dfc45e5
+"@typescript-eslint/types@npm:5.44.0":
+  version: 5.44.0
+  resolution: "@typescript-eslint/types@npm:5.44.0"
+  checksum: 2829523bd0b0d94266c7ad3f42de8091327596e950d589fb55b7f46887663f882094fd0c812bfb3892197e598a6bad565bf2abb92acaa9cda8d4814a1faac3be
   languageName: node
   linkType: hard
 
-"@typescript-eslint/typescript-estree@npm:5.43.0":
-  version: 5.43.0
-  resolution: "@typescript-eslint/typescript-estree@npm:5.43.0"
+"@typescript-eslint/typescript-estree@npm:5.44.0":
+  version: 5.44.0
+  resolution: "@typescript-eslint/typescript-estree@npm:5.44.0"
   dependencies:
-    "@typescript-eslint/types": 5.43.0
-    "@typescript-eslint/visitor-keys": 5.43.0
+    "@typescript-eslint/types": 5.44.0
+    "@typescript-eslint/visitor-keys": 5.44.0
     debug: ^4.3.4
     globby: ^11.1.0
     is-glob: ^4.0.3
@@ -9055,35 +9109,35 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: ba08a7093d285966bef5938d3874bbad647ca929bae245e3d67ef22062868e540661b42c13a3166b052d8d6738f18ab83df9207fbd632ffdf255001f2f329ce8
+  checksum: ef82a0da1744af2cd61125bfa51cb667d28af519d4a0b14ada47345cc5de3f60ac12130bdadca84f12145deb5ec48596ff6bb9db77d5c131471a4b8b8e94922f
   languageName: node
   linkType: hard
 
-"@typescript-eslint/utils@npm:5.43.0":
-  version: 5.43.0
-  resolution: "@typescript-eslint/utils@npm:5.43.0"
+"@typescript-eslint/utils@npm:5.44.0":
+  version: 5.44.0
+  resolution: "@typescript-eslint/utils@npm:5.44.0"
   dependencies:
     "@types/json-schema": ^7.0.9
     "@types/semver": ^7.3.12
-    "@typescript-eslint/scope-manager": 5.43.0
-    "@typescript-eslint/types": 5.43.0
-    "@typescript-eslint/typescript-estree": 5.43.0
+    "@typescript-eslint/scope-manager": 5.44.0
+    "@typescript-eslint/types": 5.44.0
+    "@typescript-eslint/typescript-estree": 5.44.0
     eslint-scope: ^5.1.1
     eslint-utils: ^3.0.0
     semver: ^7.3.7
   peerDependencies:
     eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
-  checksum: 8e8ce2c710601cdaba8919382f81383aa0c4e8f0d01755cd35c7ad08e145b09bd43e1b7fa032bc685490057c89b84fc1082c3f4bde0bed20ef54363fcb7200c0
+  checksum: d6a76a9579633c7f1c5a310a968b59c3aa865a358f98dbe3c42b57a307d1a1ffa01bb03df07dee6386400a5230e9f8dba70158c7d6f5f5f66bdc2df3c04ef37b
   languageName: node
   linkType: hard
 
-"@typescript-eslint/visitor-keys@npm:5.43.0":
-  version: 5.43.0
-  resolution: "@typescript-eslint/visitor-keys@npm:5.43.0"
+"@typescript-eslint/visitor-keys@npm:5.44.0":
+  version: 5.44.0
+  resolution: "@typescript-eslint/visitor-keys@npm:5.44.0"
   dependencies:
-    "@typescript-eslint/types": 5.43.0
+    "@typescript-eslint/types": 5.44.0
     eslint-visitor-keys: ^3.3.0
-  checksum: 8a5511dcfffd0167d0db9f71b995ca79353b7fe196a91a6c64e2161640ad5fb622f402930bac81febde204fe7946940e395d3e31f9c8df69cb2a1349c5ac7ef7
+  checksum: 8043ab4e229fb086d10a0819bc9f3a3f434c5d65ab34b363c54056329396f9116ffc8debf7cf4288b85d8c7e601e5ecfce47de20143a7158804302fbb47e26b9
   languageName: node
   linkType: hard
 
@@ -9863,7 +9917,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.1.0, acorn@npm:^8.4.1, acorn@npm:^8.5.0, acorn@npm:^8.6.0, acorn@npm:^8.7.1, acorn@npm:^8.8.0":
+"acorn@npm:^8.1.0, acorn@npm:^8.4.1, acorn@npm:^8.5.0, acorn@npm:^8.6.0, acorn@npm:^8.7.1, acorn@npm:^8.8.0, acorn@npm:^8.8.1":
   version: 8.8.1
   resolution: "acorn@npm:8.8.1"
   bin:
@@ -10211,12 +10265,12 @@ __metadata:
   linkType: hard
 
 "anymatch@npm:^3.0.0, anymatch@npm:^3.0.3, anymatch@npm:~3.1.2":
-  version: 3.1.2
-  resolution: "anymatch@npm:3.1.2"
+  version: 3.1.3
+  resolution: "anymatch@npm:3.1.3"
   dependencies:
     normalize-path: ^3.0.0
     picomatch: ^2.0.4
-  checksum: 900645535aee46ed7958f4f5b5e38abcbf474b5230406e913de15fc9a1310f0d5322775deb609688efe31010fa57831e55d36040b19826c22ce61d537e9b9759
+  checksum: 57b06ae984bc32a0d22592c87384cd88fe4511b1dd7581497831c56d41939c8a001b28e7b853e1450f2bf61992dfcaa8ae2d0d161a0a90c4fb631ef07098fbac
   languageName: node
   linkType: hard
 
@@ -10413,7 +10467,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-includes@npm:^3.1.4, array-includes@npm:^3.1.5":
+"array-includes@npm:^3.1.4, array-includes@npm:^3.1.5, array-includes@npm:^3.1.6":
   version: 3.1.6
   resolution: "array-includes@npm:3.1.6"
   dependencies:
@@ -10500,7 +10554,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array.prototype.flatmap@npm:^1.3.0":
+"array.prototype.flatmap@npm:^1.3.1":
   version: 1.3.1
   resolution: "array.prototype.flatmap@npm:1.3.1"
   dependencies:
@@ -10525,6 +10579,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"array.prototype.tosorted@npm:^1.1.1":
+  version: 1.1.1
+  resolution: "array.prototype.tosorted@npm:1.1.1"
+  dependencies:
+    call-bind: ^1.0.2
+    define-properties: ^1.1.4
+    es-abstract: ^1.20.4
+    es-shim-unscopables: ^1.0.0
+    get-intrinsic: ^1.1.3
+  checksum: fd5f57aca3c7ddcd1bb83965457b625f3a67d8f334f5cbdb8ac8ef33d5b0d38281524114db2936f8c08048115d5158af216c94e6ae1eb966241b9b6f4ab8a7e8
+  languageName: node
+  linkType: hard
+
 "arrify@npm:^1.0.1":
   version: 1.0.1
   resolution: "arrify@npm:1.0.1"
@@ -12147,9 +12214,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.30001299, caniuse-lite@npm:^1.0.30001400, caniuse-lite@npm:^1.0.30001406, caniuse-lite@npm:^1.0.30001426":
-  version: 1.0.30001431
-  resolution: "caniuse-lite@npm:1.0.30001431"
-  checksum: 720e53b7e4afbb91cc7683d64037da23b98a3199b4d34cecbba3e702646910873c21df8e3aa7cea1c37095a99ca9aff24deff610dbccd61c0436907234d77e90
+  version: 1.0.30001434
+  resolution: "caniuse-lite@npm:1.0.30001434"
+  checksum: 3ebceec5ef7c5e8200a6f1ff24c40ec237f9d718838b0931bc670d42d4c47c446f52e80ccd9c05c84788d9fbe012a7c1afbb824374d4f357596789bc7dc83fd0
   languageName: node
   linkType: hard
 
@@ -13839,7 +13906,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"decimal.js@npm:^10.3.1, decimal.js@npm:^10.4.1":
+"decimal.js@npm:^10.3.1, decimal.js@npm:^10.4.2":
   version: 10.4.2
   resolution: "decimal.js@npm:10.4.2"
   checksum: 2f50de33c9c9fcd4c7ffd74cd02edecadeaa4d954e14ef721ee1d381d293c9237b1a90f54198b91f06fd5d3bb8b97079bba54fbc9ccd205d9e6bc8ffa82f6202
@@ -15476,11 +15543,11 @@ __metadata:
   linkType: hard
 
 "esbuild-wasm@npm:>=0.13.8":
-  version: 0.15.14
-  resolution: "esbuild-wasm@npm:0.15.14"
+  version: 0.15.15
+  resolution: "esbuild-wasm@npm:0.15.15"
   bin:
     esbuild: bin/esbuild
-  checksum: 174eaa1c598bbddef045965dba60181dccb3f2ac90098da6e4994e315371bce227c688d866e292621385c9a31ba8a0b756386aa0ca197b0158fda37a28d52ff0
+  checksum: 0a4f4aeae350269a404e8c015732a2fe7fda618b6adf742324e2d538891f563f6c2d7a901ae217dc62add1557916d7d5a6f1a1c333cc42686724ebe45aa330f5
   languageName: node
   linkType: hard
 
@@ -15955,26 +16022,27 @@ __metadata:
   linkType: hard
 
 "eslint-plugin-react@npm:^7.19.0, eslint-plugin-react@npm:^7.24.0, eslint-plugin-react@npm:^7.31.10":
-  version: 7.31.10
-  resolution: "eslint-plugin-react@npm:7.31.10"
+  version: 7.31.11
+  resolution: "eslint-plugin-react@npm:7.31.11"
   dependencies:
-    array-includes: ^3.1.5
-    array.prototype.flatmap: ^1.3.0
+    array-includes: ^3.1.6
+    array.prototype.flatmap: ^1.3.1
+    array.prototype.tosorted: ^1.1.1
     doctrine: ^2.1.0
     estraverse: ^5.3.0
     jsx-ast-utils: ^2.4.1 || ^3.0.0
     minimatch: ^3.1.2
-    object.entries: ^1.1.5
-    object.fromentries: ^2.0.5
-    object.hasown: ^1.1.1
-    object.values: ^1.1.5
+    object.entries: ^1.1.6
+    object.fromentries: ^2.0.6
+    object.hasown: ^1.1.2
+    object.values: ^1.1.6
     prop-types: ^15.8.1
     resolve: ^2.0.0-next.3
     semver: ^6.3.0
-    string.prototype.matchall: ^4.0.7
+    string.prototype.matchall: ^4.0.8
   peerDependencies:
     eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
-  checksum: 0a3ed9547e337f7eac4364f45229a8094ea4ac5073f1c4b8662f84c75284703bfebdf5dfe2cb55bcaeedec43f0445ed76ca650388f642d5ad1c9fe530bf3f159
+  checksum: 2f8d27adbfe1b551a170cc1340dd8bbecf6c9fdbfcde04dd1097bbf198e99f0c981af84bc3c69f851af5736cc4d6520687a03dfb3271717079f88983d79cb9cd
   languageName: node
   linkType: hard
 
@@ -16045,8 +16113,8 @@ __metadata:
   linkType: hard
 
 "eslint@npm:^8.27.0":
-  version: 8.27.0
-  resolution: "eslint@npm:8.27.0"
+  version: 8.28.0
+  resolution: "eslint@npm:8.28.0"
   dependencies:
     "@eslint/eslintrc": ^1.3.3
     "@humanwhocodes/config-array": ^0.11.6
@@ -16089,7 +16157,7 @@ __metadata:
     text-table: ^0.2.0
   bin:
     eslint: bin/eslint.js
-  checksum: 8fc3ecac3c620ca8758b63428981dee35758a312e607dfec0fd3815b9847b49e466ed7d0e2cadeb35e2a46d7f430581cc38e1e26bfd77728dde4e34bd9bd8686
+  checksum: 5378ee96346cf0c59e9a1de002f7bd19c2c0642ad8010f18254936563fa3cfd1d34fd420de5a31866aab1fa586875d39e4cef6b9367c2a361f2106723f900db2
   languageName: node
   linkType: hard
 
@@ -21392,9 +21460,9 @@ __metadata:
   linkType: hard
 
 "js-sdsl@npm:^4.1.4":
-  version: 4.1.5
-  resolution: "js-sdsl@npm:4.1.5"
-  checksum: d95116180b977da36ad23a4f242a8eb96da42910a3662143e07fa12a5276663564ea9102d8570b2e6b0918fe284f2924a173082b6f84d25df29fbec3f71aa42f
+  version: 4.2.0
+  resolution: "js-sdsl@npm:4.2.0"
+  checksum: fe6525d84fa506d56b1a6f7754da2702119786869eaa29ec6e7bd723db1e950b5ec2f2c1890fc4d7c705fe1e8ce545a0717c76ad1d60f683a24837ce27943352
   languageName: node
   linkType: hard
 
@@ -21553,16 +21621,16 @@ __metadata:
   linkType: hard
 
 "jsdom@npm:^20.0.0":
-  version: 20.0.2
-  resolution: "jsdom@npm:20.0.2"
+  version: 20.0.3
+  resolution: "jsdom@npm:20.0.3"
   dependencies:
     abab: ^2.0.6
-    acorn: ^8.8.0
+    acorn: ^8.8.1
     acorn-globals: ^7.0.0
     cssom: ^0.5.0
     cssstyle: ^2.3.0
     data-urls: ^3.0.2
-    decimal.js: ^10.4.1
+    decimal.js: ^10.4.2
     domexception: ^4.0.0
     escodegen: ^2.0.0
     form-data: ^4.0.0
@@ -21575,19 +21643,19 @@ __metadata:
     saxes: ^6.0.0
     symbol-tree: ^3.2.4
     tough-cookie: ^4.1.2
-    w3c-xmlserializer: ^3.0.0
+    w3c-xmlserializer: ^4.0.0
     webidl-conversions: ^7.0.0
     whatwg-encoding: ^2.0.0
     whatwg-mimetype: ^3.0.0
     whatwg-url: ^11.0.0
-    ws: ^8.9.0
+    ws: ^8.11.0
     xml-name-validator: ^4.0.0
   peerDependencies:
     canvas: ^2.5.0
   peerDependenciesMeta:
     canvas:
       optional: true
-  checksum: c6707fdfe92504dbef8ec1727ca638bba5b6c7e01b5fdda48d385e2e8f7e3d5b92f13380448ae9f28e2643a69010bef8ca0f691532390f99d4b722edfe1c8d76
+  checksum: b109073bb826a966db7828f46cb1d7371abecd30f182b143c52be5fe1ed84513bbbe995eb3d157241681fcd18331381e61e3dc004d4949f3a63bca02f6214902
   languageName: node
   linkType: hard
 
@@ -23105,11 +23173,11 @@ __metadata:
   linkType: hard
 
 "marked@npm:^4.0.12":
-  version: 4.2.2
-  resolution: "marked@npm:4.2.2"
+  version: 4.2.3
+  resolution: "marked@npm:4.2.3"
   bin:
     marked: bin/marked.js
-  checksum: 18aa3837d76e59f74de771ef0cc2a98fc7cc0e39b41aeccf9925fe650a8c92605b565c49a5eab90b397270acef7db71661bb4dcdd83ef06367d4cc2777be996e
+  checksum: 5926ad8971d2e7be16a0a24e0fea1d2ab6dda2694b54acabfe9a35641e0db7ca5324bf3032f09874f1a92a6dadb6d95719a0c3cdc6c2c6e3a026813144ce8f47
   languageName: node
   linkType: hard
 
@@ -23228,12 +23296,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"memfs@npm:^3.2.2, memfs@npm:^3.4.1, memfs@npm:^3.4.3":
-  version: 3.4.11
-  resolution: "memfs@npm:3.4.11"
+"memfs@npm:^3.2.2, memfs@npm:^3.4.1, memfs@npm:^3.4.12, memfs@npm:^3.4.3":
+  version: 3.4.12
+  resolution: "memfs@npm:3.4.12"
   dependencies:
     fs-monkey: ^1.0.3
-  checksum: 31792e27e6622d63e44aafccf9650d432ba51bcdfddf6ebefcf5fe7c5279da8a3d5481b1597bd21331e68f37c2040a496066c972cc66f18a5022d265c800d395
+  checksum: 60c44a3887fb02fc2f625dca0f801db5174cd9990ebb6aa5871b6800c442f2b5d1d900168db3a717c380dda76e3c891afc4623ac3a1568a2978bf05bbf727f23
   languageName: node
   linkType: hard
 
@@ -24081,23 +24149,23 @@ __metadata:
   linkType: hard
 
 "next@npm:^12.2.4":
-  version: 12.3.3
-  resolution: "next@npm:12.3.3"
-  dependencies:
-    "@next/env": 12.3.3
-    "@next/swc-android-arm-eabi": 12.3.3
-    "@next/swc-android-arm64": 12.3.3
-    "@next/swc-darwin-arm64": 12.3.3
-    "@next/swc-darwin-x64": 12.3.3
-    "@next/swc-freebsd-x64": 12.3.3
-    "@next/swc-linux-arm-gnueabihf": 12.3.3
-    "@next/swc-linux-arm64-gnu": 12.3.3
-    "@next/swc-linux-arm64-musl": 12.3.3
-    "@next/swc-linux-x64-gnu": 12.3.3
-    "@next/swc-linux-x64-musl": 12.3.3
-    "@next/swc-win32-arm64-msvc": 12.3.3
-    "@next/swc-win32-ia32-msvc": 12.3.3
-    "@next/swc-win32-x64-msvc": 12.3.3
+  version: 12.3.4
+  resolution: "next@npm:12.3.4"
+  dependencies:
+    "@next/env": 12.3.4
+    "@next/swc-android-arm-eabi": 12.3.4
+    "@next/swc-android-arm64": 12.3.4
+    "@next/swc-darwin-arm64": 12.3.4
+    "@next/swc-darwin-x64": 12.3.4
+    "@next/swc-freebsd-x64": 12.3.4
+    "@next/swc-linux-arm-gnueabihf": 12.3.4
+    "@next/swc-linux-arm64-gnu": 12.3.4
+    "@next/swc-linux-arm64-musl": 12.3.4
+    "@next/swc-linux-x64-gnu": 12.3.4
+    "@next/swc-linux-x64-musl": 12.3.4
+    "@next/swc-win32-arm64-msvc": 12.3.4
+    "@next/swc-win32-ia32-msvc": 12.3.4
+    "@next/swc-win32-x64-msvc": 12.3.4
     "@swc/helpers": 0.4.11
     caniuse-lite: ^1.0.30001406
     postcss: 8.4.14
@@ -24145,7 +24213,7 @@ __metadata:
       optional: true
   bin:
     next: dist/bin/next
-  checksum: 7af340ca49cf270e4b37cdd372c16a7ba1a3cadb1124f0a7a65a49d6fe8b4786070b31064c8e0baa1d4fd765788ed5249d6b31d4455962ab9e5657857f5bd15b
+  checksum: b802fcaa8a184ed73419f0be36b18394e6898be059c5a9bda637ff8ad0a411b85588a323cc33147ed19f89038d00c43fbfdc99adba5f88e1d3d96f34141ae323
   languageName: node
   linkType: hard
 
@@ -24793,7 +24861,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.entries@npm:^1.1.1, object.entries@npm:^1.1.2, object.entries@npm:^1.1.5":
+"object.entries@npm:^1.1.1, object.entries@npm:^1.1.2, object.entries@npm:^1.1.6":
   version: 1.1.6
   resolution: "object.entries@npm:1.1.6"
   dependencies:
@@ -24804,7 +24872,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.fromentries@npm:^2.0.5":
+"object.fromentries@npm:^2.0.5, object.fromentries@npm:^2.0.6":
   version: 2.0.6
   resolution: "object.fromentries@npm:2.0.6"
   dependencies:
@@ -24827,7 +24895,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.hasown@npm:^1.1.1":
+"object.hasown@npm:^1.1.2":
   version: 1.1.2
   resolution: "object.hasown@npm:1.1.2"
   dependencies:
@@ -24846,7 +24914,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.values@npm:^1.1.1, object.values@npm:^1.1.5":
+"object.values@npm:^1.1.1, object.values@npm:^1.1.5, object.values@npm:^1.1.6":
   version: 1.1.6
   resolution: "object.values@npm:1.1.6"
   dependencies:
@@ -25501,11 +25569,11 @@ __metadata:
   linkType: hard
 
 "parse5@npm:^7.0.0, parse5@npm:^7.1.1":
-  version: 7.1.1
-  resolution: "parse5@npm:7.1.1"
+  version: 7.1.2
+  resolution: "parse5@npm:7.1.2"
   dependencies:
     entities: ^4.4.0
-  checksum: 20d4ffb1eccad4a2d6c320d2d98b07814f43ab7762e11ffea247b0d54981646f99eeba4da16e06c568877e532ca32a6b5c5e4fafc4eb87daf890957050482435
+  checksum: 297d7af8224f4b5cb7f6617ecdae98eeaed7f8cbd78956c42785e230505d5a4f07cef352af10d3006fa5c1544b76b57784d3a22d861ae071bbc460c649482bf4
   languageName: node
   linkType: hard
 
@@ -26419,12 +26487,12 @@ __metadata:
   linkType: hard
 
 "postcss-selector-parser@npm:^6.0.0, postcss-selector-parser@npm:^6.0.10, postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4, postcss-selector-parser@npm:^6.0.9":
-  version: 6.0.10
-  resolution: "postcss-selector-parser@npm:6.0.10"
+  version: 6.0.11
+  resolution: "postcss-selector-parser@npm:6.0.11"
   dependencies:
     cssesc: ^3.0.0
     util-deprecate: ^1.0.2
-  checksum: a0b27c5e3f7604c8dc7cd83f145fdd7b21448e0d86072da99e0d78e536ba27aa9db2d42024c50aa530408ee517c4bdc0260529e1afb56608f9a82e839c207e82
+  checksum: 70be26abb75dec3c51be312a086e640aee4a32f18114cfbdf8feac0b6373a5494b5571370ab158174e1d692afc50c198d799ae9759afe5da1da1e629e465112c
   languageName: node
   linkType: hard
 
@@ -29002,8 +29070,8 @@ __metadata:
   linkType: hard
 
 "rollup@npm:^3.2.5":
-  version: 3.3.0
-  resolution: "rollup@npm:3.3.0"
+  version: 3.4.0
+  resolution: "rollup@npm:3.4.0"
   dependencies:
     fsevents: ~2.3.2
   dependenciesMeta:
@@ -29011,7 +29079,7 @@ __metadata:
       optional: true
   bin:
     rollup: dist/bin/rollup
-  checksum: f799a8319ee107f48abafac3e5fb99b63af7e01b50acf3c48e0e3d4fc1a638c0ac09788e4b7ec4590efc74a0a7fce125237743e354c452b314bc207a12aae272
+  checksum: 4c670338adbecf8d20d8e1c2d4593689d52f9d3b55fb87d147d1168612dfabc95e278d9d2748b60cb8c48b1009ef7063447f76140a003d4ee652e0cd7f30238a
   languageName: node
   linkType: hard
 
@@ -30516,7 +30584,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"string.prototype.matchall@npm:^4.0.7":
+"string.prototype.matchall@npm:^4.0.8":
   version: 4.0.8
   resolution: "string.prototype.matchall@npm:4.0.8"
   dependencies:
@@ -31723,7 +31791,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-jest@npm:^28.0.0":
+"ts-jest@npm:^28.0.0, ts-jest@npm:^28.0.8":
   version: 28.0.8
   resolution: "ts-jest@npm:28.0.8"
   dependencies:
@@ -32135,6 +32203,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@npm:~4.6.3":
+  version: 4.6.4
+  resolution: "typescript@npm:4.6.4"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 92e2c0328485a4f7bd7435f5b105f03addff32f867e241dc3be8c372ed801a138c732d9a55697696d2f82a80dd6ad4bddff1ad6b0d1884bf4a24b92e71094c44
+  languageName: node
+  linkType: hard
+
 "typescript@patch:typescript@*#~builtin<compat/typescript>, typescript@patch:typescript@^4.0.3#~builtin<compat/typescript>, typescript@patch:typescript@^4.9.3#~builtin<compat/typescript>":
   version: 4.9.3
   resolution: "typescript@patch:typescript@npm%3A4.9.3#~builtin<compat/typescript>::version=4.9.3&hash=701156"
@@ -32155,6 +32233,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@patch:typescript@~4.6.3#~builtin<compat/typescript>":
+  version: 4.6.4
+  resolution: "typescript@patch:typescript@npm%3A4.6.4#~builtin<compat/typescript>::version=4.6.4&hash=701156"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 0e3fa814d454942a689daf4c00f82328d323e7ecd4077e3265d45375e64642611631f4c882a71be87774468ba03793e9b8ff4bccfac3018194a9e36d8f72c251
+  languageName: node
+  linkType: hard
+
 "uglify-js@npm:^3.1.4":
   version: 3.17.4
   resolution: "uglify-js@npm:3.17.4"
@@ -33369,6 +33457,15 @@ __metadata:
   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: ^4.0.0
+  checksum: 02cc66d6efc590bd630086cd88252444120f5feec5c4043932b0d0f74f8b060512f79dc77eb093a7ad04b4f02f39da79ce4af47ceb600f2bf9eacdc83204b1a8
+  languageName: node
+  linkType: hard
+
 "wait-on@npm:^5.2.1":
   version: 5.3.0
   resolution: "wait-on@npm:5.3.0"
@@ -33506,18 +33603,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack-dev-middleware@npm:*, webpack-dev-middleware@npm:^5.3.0, webpack-dev-middleware@npm:^5.3.1":
-  version: 5.3.3
-  resolution: "webpack-dev-middleware@npm:5.3.3"
+"webpack-dev-middleware@npm:*":
+  version: 6.0.0
+  resolution: "webpack-dev-middleware@npm:6.0.0"
   dependencies:
     colorette: ^2.0.10
-    memfs: ^3.4.3
+    memfs: ^3.4.12
     mime-types: ^2.1.31
     range-parser: ^1.2.1
     schema-utils: ^4.0.0
   peerDependencies:
-    webpack: ^4.0.0 || ^5.0.0
-  checksum: 378ceed430b61c0b0eccdbb55a97173aa36231bb88e20ad12bafb3d553e542708fa31f08474b9c68d4ac95174a047def9e426e193b7134be3736afa66a0d1708
+    webpack: ^5.0.0
+  checksum: e205ee9d9f83939203a2b7a98fafb2d5ffe9541d576b949938fe380c8e4e16619a6a816fd3e56c34b1e9c93a2c742f8cfe5b6b010816bc99b114de50b3874a8b
   languageName: node
   linkType: hard
 
@@ -33536,6 +33633,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"webpack-dev-middleware@npm:^5.3.0, webpack-dev-middleware@npm:^5.3.1":
+  version: 5.3.3
+  resolution: "webpack-dev-middleware@npm:5.3.3"
+  dependencies:
+    colorette: ^2.0.10
+    memfs: ^3.4.3
+    mime-types: ^2.1.31
+    range-parser: ^1.2.1
+    schema-utils: ^4.0.0
+  peerDependencies:
+    webpack: ^4.0.0 || ^5.0.0
+  checksum: 378ceed430b61c0b0eccdbb55a97173aa36231bb88e20ad12bafb3d553e542708fa31f08474b9c68d4ac95174a047def9e426e193b7134be3736afa66a0d1708
+  languageName: node
+  linkType: hard
+
 "webpack-dev-server@npm:4.7.3":
   version: 4.7.3
   resolution: "webpack-dev-server@npm:4.7.3"
@@ -34080,7 +34192,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ws@npm:^8.1.0, ws@npm:^8.2.3, ws@npm:^8.9.0":
+"ws@npm:^8.1.0, ws@npm:^8.11.0, ws@npm:^8.2.3":
   version: 8.11.0
   resolution: "ws@npm:8.11.0"
   peerDependencies:
diff --git a/scripts/package.json b/scripts/package.json
index a741721e6a5a..f5235c33854e 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -81,7 +81,7 @@
     "@types/express": "^4.17.11",
     "@types/fs-extra": "^9.0.6",
     "@types/js-yaml": "^3.12.6",
-    "@types/node": "^16.0.0 || ^18.0.0",
+    "@types/node": "^16.0.0",
     "@types/node-cleanup": "^2.1.1",
     "@types/node-fetch": "^2.5.7",
     "@types/prompts": "2.0.11",
diff --git a/scripts/tasks/compile.ts b/scripts/tasks/compile.ts
index 6f6c097642bb..0387e77a0d7f 100644
--- a/scripts/tasks/compile.ts
+++ b/scripts/tasks/compile.ts
@@ -19,7 +19,7 @@ export const compile: Task = {
       // To check if the code has been compiled as we need, we check the compiled output of
       // `@storybook/store`. To check if it has been built for publishing (i.e. `--no-link`),
       // we check if it built types or references source files directly.
-      const contents = await readFile(resolve(codeDir, './lib/store/dist/index.d.ts'), 'utf8');
+      const contents = await readFile(resolve(codeDir, './lib/preview/dist/runtime.d.ts'), 'utf8');
       const isLinkedContents = contents.indexOf(linkedContents) !== -1;
       if (link) return isLinkedContents;
       return !isLinkedContents;
diff --git a/scripts/yarn.lock b/scripts/yarn.lock
index 8ec4709bac20..20de19def96b 100644
--- a/scripts/yarn.lock
+++ b/scripts/yarn.lock
@@ -3659,7 +3659,7 @@ __metadata:
     "@types/fs-extra": ^9.0.6
     "@types/js-yaml": ^3.12.6
     "@types/lodash": ^4
-    "@types/node": ^16.0.0 || ^18.0.0
+    "@types/node": ^16.0.0
     "@types/node-cleanup": ^2.1.1
     "@types/node-fetch": ^2.5.7
     "@types/prompts": 2.0.11
@@ -4257,10 +4257,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/node@npm:^16.0.0 || ^18.0.0":
-  version: 18.11.9
-  resolution: "@types/node@npm:18.11.9"
-  checksum: aeaa925406f841c41679b32def9391a9892171e977105e025050e9f66e2830b4c50d0d974a1af0077ead3337a1f3bdf49ee7e7f402ebf2e034a3f97d9d240dba
+"@types/node@npm:^16.0.0":
+  version: 16.18.3
+  resolution: "@types/node@npm:16.18.3"
+  checksum: 058ddd61a3d39f517bc9c30b82b9d6257d903e84c42ba66aae63bd13203b6deb2acf7f7e14caefd5d7cebadbe8c90604c04f9851cd41cd6a1bc2fc4dcec85f01
   languageName: node
   linkType: hard