@storybook/nextjs 9.2.0-alpha.3 → 10.0.0-beta.0

package/dist/preview.d.ts

@@ -1,18 +1,3 @@
-import { Addon_DecoratorFunction, Addon_LoaderFunction } from 'storybook/internal/types';
-
-declare const decorators: Addon_DecoratorFunction<any>[];
-declare const loaders: Addon_LoaderFunction;
-declare const parameters: {
-    docs: {
-        source: {
-            excludeDecorators: boolean;
-        };
-    };
-    react: {
-        rootOptions: {
-            onCaughtError(error: unknown): void;
-        };
-    };
-};
-
-export { decorators, loaders, parameters };
+// auto generated file from file:///home/runner/work/storybook/storybook/scripts/build/utils/generate-type-mappers.ts, do not edit
+export * from '../src/preview.tsx';
+export type * from '../src/preview.tsx';

package/dist/preview.d.tsx

@@ -0,0 +1,18 @@
+import { Addon_DecoratorFunction, Addon_LoaderFunction } from 'storybook/internal/types';
+
+declare const decorators: Addon_DecoratorFunction<any>[];
+declare const loaders: Addon_LoaderFunction;
+declare const parameters: {
+    docs: {
+        source: {
+            excludeDecorators: boolean;
+        };
+    };
+    react: {
+        rootOptions: {
+            onCaughtError(error: unknown): void;
+        };
+    };
+};
+
+export { decorators, loaders, parameters };

package/dist/preview.js

@@ -1 +1,11 @@
-"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preview_exports={};__export(preview_exports,{decorators:()=>decorators,loaders:()=>loaders,parameters:()=>parameters});module.exports=__toCommonJS(preview_exports);var import_navigation2=require("@storybook/nextjs/navigation.mock"),import_router2=require("@storybook/nextjs/router.mock"),import_is_next_router_error=require("next/dist/client/components/is-next-router-error");var import_config=require("next/config");(0,import_config.setConfig)(process.env.__NEXT_RUNTIME_CONFIG);var React2=__toESM(require("react"));var import_react=__toESM(require("react")),import_head_manager=__toESM(require("next/dist/client/head-manager")),import_head_manager_context=require("next/dist/shared/lib/head-manager-context.shared-runtime"),HeadManagerProvider=({children})=>{let headManager=(0,import_react.useMemo)(import_head_manager.default,[]);return headManager.getIsSsr=()=>!1,import_react.default.createElement(import_head_manager_context.HeadManagerContext.Provider,{value:headManager},children)},head_manager_provider_default=HeadManagerProvider;var HeadManagerDecorator=Story=>React2.createElement(head_manager_provider_default,null,React2.createElement(Story,null));var React3=__toESM(require("react")),import_image_context=require("@storybook/nextjs/dist/image-context"),ImageContext=import_image_context.ImageContext,ImageDecorator=(Story,{parameters:parameters2})=>parameters2.nextjs?.image?React3.createElement(ImageContext.Provider,{value:parameters2.nextjs.image},React3.createElement(Story,null)):React3.createElement(Story,null);var React6=__toESM(require("react")),import_redirect_boundary=require("next/dist/client/components/redirect-boundary");var import_react2=__toESM(require("react")),import_navigation=require("@storybook/nextjs/navigation.mock"),import_app_router_context=require("next/dist/shared/lib/app-router-context.shared-runtime"),import_hooks_client_context=require("next/dist/shared/lib/hooks-client-context.shared-runtime"),import_segment=require("next/dist/shared/lib/segment");var getParallelRoutes=segmentsList=>{let segment=segmentsList.shift();return segment?[segment,{children:getParallelRoutes(segmentsList)}]:[]},AppRouterProvider=({children,routeParams})=>{let{pathname,query,segments=[]}=routeParams,tree=[pathname,{children:getParallelRoutes([...segments])}],pathParams=(0,import_react2.useMemo)(()=>{let params={},currentSegments=routeParams.segments;if(currentSegments){if(Array.isArray(currentSegments)){for(let segmentEntry of currentSegments)if(Array.isArray(segmentEntry)&&segmentEntry.length===2&&typeof segmentEntry[0]=="string"){let key=segmentEntry[0],value=segmentEntry[1];params[key]=value}}else if(typeof currentSegments=="object"&&!Array.isArray(currentSegments)){let segmentObject=currentSegments;for(let key in segmentObject)Object.prototype.hasOwnProperty.call(segmentObject,key)&&(params[key]=segmentObject[key])}}return params},[routeParams.segments]),newLazyCacheNode={lazyData:null,rsc:null,prefetchRsc:null,head:null,prefetchHead:null,parallelRoutes:new Map,loading:null};return import_react2.default.createElement(import_hooks_client_context.PathParamsContext.Provider,{value:pathParams},import_react2.default.createElement(import_hooks_client_context.PathnameContext.Provider,{value:pathname},import_react2.default.createElement(import_hooks_client_context.SearchParamsContext.Provider,{value:new URLSearchParams(query)},import_react2.default.createElement(import_app_router_context.GlobalLayoutRouterContext.Provider,{value:{changeByServerResponse(){},buildId:"storybook",tree,focusAndScrollRef:{apply:!1,hashFragment:null,segmentPaths:[tree],onlyHashChange:!1},nextUrl:pathname}},import_react2.default.createElement(import_app_router_context.AppRouterContext.Provider,{value:(0,import_navigation.getRouter)()},import_react2.default.createElement(import_app_router_context.LayoutRouterContext.Provider,{value:{childNodes:new Map,tree,parentTree:tree,parentCacheNode:newLazyCacheNode,url:pathname,loading:null}},children))))))};var import_react3=__toESM(require("react")),import_router=require("@storybook/nextjs/router.mock"),import_router_context=require("next/dist/shared/lib/router-context.shared-runtime"),PageRouterProvider=({children})=>import_react3.default.createElement(import_router_context.RouterContext.Provider,{value:(0,import_router.getRouter)()},children);var defaultRouterParams={pathname:"/",query:{}},RouterDecorator=(Story,{parameters:parameters2})=>parameters2.nextjs?.appDirectory??!1?AppRouterProvider?React6.createElement(AppRouterProvider,{routeParams:{...defaultRouterParams,...parameters2.nextjs?.navigation}},React6.createElement(import_redirect_boundary.RedirectBoundary,null,React6.createElement(Story,null))):null:React6.createElement(PageRouterProvider,null,React6.createElement(Story,null));var React7=__toESM(require("react")),import_styled_jsx=require("styled-jsx"),StyledJsxDecorator=Story=>React7.createElement(import_styled_jsx.StyleRegistry,null,React7.createElement(Story,null));function addNextHeadCount(){let meta=document.createElement("meta");meta.name="next-head-count",meta.content="0",document.head.appendChild(meta)}function isAsyncClientComponentError(error){return typeof error=="string"&&(error.includes("Only Server Components can be async at the moment.")||error.includes("A component was suspended by an uncached promise.")||error.includes("async/await is not yet supported in Client Components"))}addNextHeadCount();var origConsoleError=globalThis.console.error;globalThis.console.error=(...args)=>{let error=args[0];(0,import_is_next_router_error.isNextRouterError)(error)||isAsyncClientComponentError(error)||origConsoleError.apply(globalThis.console,args)};globalThis.addEventListener("error",ev=>{if((0,import_is_next_router_error.isNextRouterError)(ev.error)||isAsyncClientComponentError(ev.error)){ev.preventDefault();return}});var decorators=[StyledJsxDecorator,ImageDecorator,RouterDecorator,HeadManagerDecorator],loaders=async({globals,parameters:parameters2})=>{let{router,appDirectory}=parameters2.nextjs??{};appDirectory?(0,import_navigation2.createNavigation)(router):(0,import_router2.createRouter)({locale:globals.locale,...router})},parameters={docs:{source:{excludeDecorators:!0}},react:{rootOptions:{onCaughtError(error){(0,import_is_next_router_error.isNextRouterError)(error)||console.error(error)}}}};0&&(module.exports={decorators,loaders,parameters});
+import {
+  decorators,
+  loaders,
+  parameters
+} from "./_browser-chunks/chunk-JOMP7DUK.js";
+import "./_browser-chunks/chunk-L5NVL7MD.js";
+export {
+  decorators,
+  loaders,
+  parameters
+};

package/dist/rsc/server-only.js

@@ -1 +1,7 @@
-"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var server_only_exports={};__export(server_only_exports,{default:()=>server_only_default});module.exports=__toCommonJS(server_only_exports);var server_only_default={};
+import "../_browser-chunks/chunk-L5NVL7MD.js";
+
+// src/rsc/server-only.ts
+var server_only_default = {};
+export {
+  server_only_default as default
+};

package/dist/swc/next-swc-loader-patch.js

@@ -1 +1,136 @@
-"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var next_swc_loader_patch_exports={};__export(next_swc_loader_patch_exports,{default:()=>swcLoader,pitch:()=>pitch,raw:()=>raw});module.exports=__toCommonJS(next_swc_loader_patch_exports);var import_node_path=require("path"),import_swc=require("next/dist/build/swc"),import_options=require("next/dist/build/swc/options"),mockCurrentTraceSpan={traceChild:name=>mockCurrentTraceSpan,traceAsyncFn:async fn=>fn()};async function loaderTransform(parentTrace,source,inputSourceMap){let filename=this.resourcePath,loaderOptions=this.getOptions()||{},{isServer,rootDir,pagesDir,appDir,hasReactRefresh,nextConfig,jsConfig,supportedBrowsers,swcCacheDir,serverComponents,isReactServerLayer}=loaderOptions,isPageFile=filename.startsWith(pagesDir),relativeFilePathFromRoot=(0,import_node_path.relative)(rootDir,filename),programmaticOptions={...(0,import_options.getLoaderSWCOptions)({pagesDir,appDir,filename,isServer,isPageFile,development:this.mode==="development",hasReactRefresh,modularizeImports:nextConfig?.modularizeImports,optimizePackageImports:nextConfig?.experimental?.optimizePackageImports,swcPlugins:nextConfig?.experimental?.swcPlugins,compilerOptions:nextConfig?.compiler,optimizeServerReact:nextConfig?.experimental?.optimizeServerReact,jsConfig,supportedBrowsers,swcCacheDir,relativeFilePathFromRoot,serverComponents,isReactServerLayer}),filename,inputSourceMap:inputSourceMap&&typeof inputSourceMap=="object"?JSON.stringify(inputSourceMap):void 0,sourceMaps:this.sourceMap,inlineSourcesContent:this.sourceMap,sourceFileName:filename};return programmaticOptions.env.bugfixes=!0,programmaticOptions.inputSourceMap||delete programmaticOptions.inputSourceMap,this.mode&&programmaticOptions.jsc&&programmaticOptions.jsc.transform&&programmaticOptions.jsc.transform.react&&!Object.prototype.hasOwnProperty.call(programmaticOptions.jsc.transform.react,"development")&&(programmaticOptions.jsc.transform.react.development=this.mode==="development"),parentTrace.traceChild("next-swc-transform").traceAsyncFn(()=>(0,import_swc.transform)(source,programmaticOptions).then(output=>{if(output.eliminatedPackages&&this.eliminatedPackages)for(let pkg of JSON.parse(output.eliminatedPackages))this.eliminatedPackages.add(pkg);return[output.code,output.map?JSON.parse(output.map):void 0]}))}var EXCLUDED_PATHS=/[\\/](cache[\\/][^\\/]+\.zip[\\/]node_modules|__virtual__)[\\/]/g;function pitch(){let callback=this.async();(async()=>{if(!process.versions.pnp&&!EXCLUDED_PATHS.test(this.resourcePath)&&this.loaders.length-1===this.loaderIndex&&(0,import_node_path.isAbsolute)(this.resourcePath)&&!await(0,import_swc.isWasm)()){let loaderSpan=mockCurrentTraceSpan.traceChild("next-swc-loader");return this.addDependency(this.resourcePath),loaderSpan.traceAsyncFn(()=>loaderTransform.call(this,loaderSpan))}return null})().then(r=>r?callback(null,...r):(callback(),null),callback)}function swcLoader(inputSource,inputSourceMap){let loaderSpan=mockCurrentTraceSpan.traceChild("next-swc-loader"),callback=this.async();loaderSpan.traceAsyncFn(()=>loaderTransform.call(this,loaderSpan,inputSource,inputSourceMap)).then(([transformedSource,outputSourceMap])=>{callback(null,transformedSource,outputSourceMap||inputSourceMap)},err=>{callback(err)})}var raw=!0;0&&(module.exports={pitch,raw});
+import CJS_COMPAT_NODE_URL_e3twfmexlgl from 'node:url';
+import CJS_COMPAT_NODE_PATH_e3twfmexlgl from 'node:path';
+import CJS_COMPAT_NODE_MODULE_e3twfmexlgl from "node:module";
+
+var __filename = CJS_COMPAT_NODE_URL_e3twfmexlgl.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_e3twfmexlgl.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_e3twfmexlgl.createRequire(import.meta.url);
+
+// ------------------------------------------------------------
+// end of CJS compatibility banner, injected by Storybook's esbuild configuration
+// ------------------------------------------------------------
+import {
+  __name
+} from "../_node-chunks/chunk-WCSGFZKZ.js";
+
+// src/swc/next-swc-loader-patch.ts
+import { isAbsolute, relative } from "node:path";
+import { isWasm, transform } from "next/dist/build/swc/index.js";
+import { getLoaderSWCOptions } from "next/dist/build/swc/options.js";
+var mockCurrentTraceSpan = {
+  traceChild: /* @__PURE__ */ __name((name) => mockCurrentTraceSpan, "traceChild"),
+  traceAsyncFn: /* @__PURE__ */ __name(async (fn) => fn(), "traceAsyncFn")
+};
+async function loaderTransform(parentTrace, source, inputSourceMap) {
+  const filename = this.resourcePath;
+  const loaderOptions = this.getOptions() || {};
+  const {
+    isServer,
+    rootDir,
+    pagesDir,
+    appDir,
+    hasReactRefresh,
+    nextConfig,
+    jsConfig,
+    supportedBrowsers,
+    swcCacheDir,
+    serverComponents,
+    isReactServerLayer
+  } = loaderOptions;
+  const isPageFile = filename.startsWith(pagesDir);
+  const relativeFilePathFromRoot = relative(rootDir, filename);
+  const swcOptions = getLoaderSWCOptions({
+    pagesDir,
+    appDir,
+    filename,
+    isServer,
+    isPageFile,
+    development: this.mode === "development",
+    hasReactRefresh,
+    modularizeImports: nextConfig?.modularizeImports,
+    optimizePackageImports: nextConfig?.experimental?.optimizePackageImports,
+    swcPlugins: nextConfig?.experimental?.swcPlugins,
+    compilerOptions: nextConfig?.compiler,
+    optimizeServerReact: nextConfig?.experimental?.optimizeServerReact,
+    jsConfig,
+    supportedBrowsers,
+    swcCacheDir,
+    relativeFilePathFromRoot,
+    serverComponents,
+    // @ts-expect-error Relevant for Next.js < 14.1
+    // TODO: Remove this when Next.js < 14.1 is no longer supported
+    isReactServerLayer
+  });
+  const programmaticOptions = {
+    ...swcOptions,
+    filename,
+    inputSourceMap: inputSourceMap && typeof inputSourceMap === "object" ? JSON.stringify(inputSourceMap) : void 0,
+    // Set the default sourcemap behavior based on Webpack's mapping flag,
+    sourceMaps: this.sourceMap,
+    inlineSourcesContent: this.sourceMap,
+    // Ensure that Webpack will get a full absolute path in the sourcemap
+    // so that it can properly map the module back to its internal cached
+    // modules.
+    sourceFileName: filename
+  };
+  programmaticOptions.env.bugfixes = true;
+  if (!programmaticOptions.inputSourceMap) {
+    delete programmaticOptions.inputSourceMap;
+  }
+  if (this.mode && programmaticOptions.jsc && programmaticOptions.jsc.transform && programmaticOptions.jsc.transform.react && !Object.prototype.hasOwnProperty.call(programmaticOptions.jsc.transform.react, "development")) {
+    programmaticOptions.jsc.transform.react.development = this.mode === "development";
+  }
+  const swcSpan = parentTrace.traceChild("next-swc-transform");
+  return swcSpan.traceAsyncFn(
+    () => transform(source, programmaticOptions).then((output) => {
+      if (output.eliminatedPackages && this.eliminatedPackages) {
+        for (const pkg of JSON.parse(output.eliminatedPackages)) {
+          this.eliminatedPackages.add(pkg);
+        }
+      }
+      return [output.code, output.map ? JSON.parse(output.map) : void 0];
+    })
+  );
+}
+__name(loaderTransform, "loaderTransform");
+var EXCLUDED_PATHS = /[\\/](cache[\\/][^\\/]+\.zip[\\/]node_modules|__virtual__)[\\/]/g;
+function pitch() {
+  const callback = this.async();
+  (async () => {
+    if (
+      // TODO: investigate swc file reading in PnP mode?
+      !process.versions.pnp && !EXCLUDED_PATHS.test(this.resourcePath) && this.loaders.length - 1 === this.loaderIndex && isAbsolute(this.resourcePath) && !await isWasm()
+    ) {
+      const loaderSpan = mockCurrentTraceSpan.traceChild("next-swc-loader");
+      this.addDependency(this.resourcePath);
+      return loaderSpan.traceAsyncFn(() => loaderTransform.call(this, loaderSpan));
+    }
+    return null;
+  })().then((r) => {
+    if (r) {
+      return callback(null, ...r);
+    }
+    callback();
+    return null;
+  }, callback);
+}
+__name(pitch, "pitch");
+function swcLoader(inputSource, inputSourceMap) {
+  const loaderSpan = mockCurrentTraceSpan.traceChild("next-swc-loader");
+  const callback = this.async();
+  loaderSpan.traceAsyncFn(() => loaderTransform.call(this, loaderSpan, inputSource, inputSourceMap)).then(
+    ([transformedSource, outputSourceMap]) => {
+      callback(null, transformedSource, outputSourceMap || inputSourceMap);
+    },
+    (err) => {
+      callback(err);
+    }
+  );
+}
+__name(swcLoader, "swcLoader");
+var raw = true;
+export {
+  swcLoader as default,
+  pitch,
+  raw
+};

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@storybook/nextjs",
-  "version": "9.2.0-alpha.3",
-  "description": "Storybook for Next.js",
+  "version": "10.0.0-beta.0",
+  "description": "Storybook for Next.js: Develop, document, and test UI components in isolation",
   "keywords": [
     "storybook",
-    "nextjs"
+    "next",
+    "next.js",
+    "webpack",
+    "component",
+    "components"
   ],
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/nextjs",
   "bugs": {
@@ -20,101 +24,47 @@
     "url": "https://opencollective.com/storybook"
   },
   "license": "MIT",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "node": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    },
-    "./dist/image-context": {
-      "types": "./dist/image-context.d.ts",
-      "import": "./dist/image-context.mjs",
-      "require": "./dist/image-context.js"
-    },
-    "./preset": {
-      "types": "./dist/preset.d.ts",
-      "require": "./dist/preset.js"
-    },
-    "./font/webpack/loader/storybook-nextjs-font-loader": {
-      "types": "./dist/font/webpack/loader/storybook-nextjs-font-loader.d.ts",
-      "import": "./dist/font/webpack/loader/storybook-nextjs-font-loader.mjs",
-      "require": "./dist/font/webpack/loader/storybook-nextjs-font-loader.js"
-    },
-    "./dist/preview.mjs": "./dist/preview.mjs",
-    "./next-image-loader-stub.js": {
-      "types": "./dist/next-image-loader-stub.d.ts",
-      "import": "./dist/next-image-loader-stub.mjs",
-      "require": "./dist/next-image-loader-stub.js"
-    },
-    "./dist/compatibility/draft-mode.compat": {
-      "types": "./dist/compatibility/draft-mode.compat.d.ts",
-      "import": "./dist/compatibility/draft-mode.compat.mjs",
-      "require": "./dist/compatibility/draft-mode.compat.js"
-    },
-    "./export-mocks": {
-      "types": "./dist/export-mocks/index.d.ts",
-      "import": "./dist/export-mocks/index.mjs",
-      "require": "./dist/export-mocks/index.js"
+      "default": "./dist/index.js"
     },
     "./cache.mock": {
       "types": "./dist/export-mocks/cache/index.d.ts",
-      "import": "./dist/export-mocks/cache/index.mjs",
-      "require": "./dist/export-mocks/cache/index.js"
+      "default": "./dist/export-mocks/cache/index.js"
     },
+    "./compatibility/draft-mode.compat": "./dist/compatibility/draft-mode.compat.js",
+    "./export-mocks": "./dist/export-mocks/index.js",
     "./headers.mock": {
       "types": "./dist/export-mocks/headers/index.d.ts",
-      "import": "./dist/export-mocks/headers/index.mjs",
-      "require": "./dist/export-mocks/headers/index.js"
+      "default": "./dist/export-mocks/headers/index.js"
     },
+    "./image-context": "./dist/image-context.js",
+    "./images/next-image": "./dist/images/next-image.js",
+    "./images/next-legacy-image": "./dist/images/next-legacy-image.js",
     "./navigation.mock": {
       "types": "./dist/export-mocks/navigation/index.d.ts",
-      "import": "./dist/export-mocks/navigation/index.mjs",
-      "require": "./dist/export-mocks/navigation/index.js"
-    },
-    "./router.mock": {
-      "types": "./dist/export-mocks/router/index.d.ts",
-      "import": "./dist/export-mocks/router/index.mjs",
-      "require": "./dist/export-mocks/router/index.js"
+      "default": "./dist/export-mocks/navigation/index.js"
     },
+    "./next-image-loader-stub": "./dist/next-image-loader-stub.js",
+    "./next-swc-loader-patch": "./dist/swc/next-swc-loader-patch.js",
     "./node": {
       "types": "./dist/node/index.d.ts",
-      "node": "./dist/node/index.js",
-      "import": "./dist/node/index.mjs",
-      "require": "./dist/node/index.js"
+      "default": "./dist/node/index.js"
     },
-    "./package.json": "./package.json"
-  },
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "*": [
-        "dist/index.d.ts"
-      ],
-      "dist/image-context": [
-        "dist/image-context.d.ts"
-      ],
-      "export-mocks": [
-        "dist/export-mocks/index.d.ts"
-      ],
-      "cache.mock": [
-        "dist/export-mocks/cache/index.d.ts"
-      ],
-      "headers.mock": [
-        "dist/export-mocks/headers/index.d.ts"
-      ],
-      "router.mock": [
-        "dist/export-mocks/router/index.d.ts"
-      ],
-      "navigation.mock": [
-        "dist/export-mocks/navigation/index.d.ts"
-      ],
-      "node": [
-        "dist/node/index.d.ts"
-      ]
-    }
+    "./package.json": "./package.json",
+    "./preset": "./dist/preset.js",
+    "./preview": {
+      "types": "./dist/preview.d.ts",
+      "default": "./dist/preview.js"
+    },
+    "./router.mock": {
+      "types": "./dist/export-mocks/router/index.d.ts",
+      "default": "./dist/export-mocks/router/index.js"
+    },
+    "./rsc/server-only": "./dist/rsc/server-only.js",
+    "./storybook-nextjs-font-loader": "./dist/font/webpack/loader/storybook-nextjs-font-loader.js"
   },
   "files": [
     "dist/**/*",
@@ -125,8 +75,8 @@
     "!src/**/*"
   ],
   "scripts": {
-    "check": "jiti ../../../scripts/prepare/check.ts",
-    "prep": "jiti ../../../scripts/prepare/bundle.ts"
+    "check": "jiti ../../../scripts/check/check-package.ts",
+    "prep": "jiti ../../../scripts/build/build-package.ts"
   },
   "dependencies": {
     "@babel/core": "^7.24.4",
@@ -143,9 +93,9 @@
     "@babel/preset-typescript": "^7.24.1",
     "@babel/runtime": "^7.24.4",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
-    "@storybook/builder-webpack5": "9.2.0-alpha.3",
-    "@storybook/preset-react-webpack": "9.2.0-alpha.3",
-    "@storybook/react": "9.2.0-alpha.3",
+    "@storybook/builder-webpack5": "10.0.0-beta.0",
+    "@storybook/preset-react-webpack": "10.0.0-beta.0",
+    "@storybook/react": "10.0.0-beta.0",
     "@types/semver": "^7.3.4",
     "babel-loader": "^9.1.3",
     "css-loader": "^6.7.3",
@@ -177,9 +127,9 @@
   },
   "peerDependencies": {
     "next": "^14.1.0 || ^15.0.0",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
-    "storybook": "^9.2.0-alpha.3",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "storybook": "^10.0.0-beta.0",
     "webpack": "^5.0.0"
   },
   "peerDependenciesMeta": {
@@ -190,39 +140,8 @@
       "optional": true
     }
   },
-  "engines": {
-    "node": ">=20.0.0"
-  },
   "publishConfig": {
     "access": "public"
   },
-  "bundler": {
-    "entries": [
-      "./src/image-context.ts",
-      "./src/index.ts",
-      "./src/preset.ts",
-      "./src/node/index.ts",
-      "./src/preview.tsx",
-      "./src/export-mocks/index.ts",
-      "./src/export-mocks/cache/index.ts",
-      "./src/export-mocks/headers/index.ts",
-      "./src/export-mocks/router/index.ts",
-      "./src/export-mocks/navigation/index.ts",
-      "./src/compatibility/draft-mode.compat.ts",
-      "./src/next-image-loader-stub.ts",
-      "./src/images/decorator.tsx",
-      "./src/images/next-legacy-image.tsx",
-      "./src/images/next-image.tsx",
-      "./src/font/webpack/loader/storybook-nextjs-font-loader.ts",
-      "./src/rsc/server-only.ts",
-      "./src/swc/next-swc-loader-patch.ts"
-    ],
-    "externals": [
-      "sb-original/next/image",
-      "sb-original/next/future/image",
-      "sb-original/next/legacy/image"
-    ],
-    "platform": "node"
-  },
-  "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684"
+  "gitHead": "a8e7fd8a655c69780bc20b9749d2699e45beae16"
 }

package/preset.js

@@ -1 +1 @@
-module.exports = require('./dist/preset');
+export * from './dist/preset.js';

package/template/cli/js/Configure.mdx

@@ -52,7 +52,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Add styling and CSS</h4>
       <p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
       <a
-        href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react"
+        href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react&ref=configure"
         target="_blank"
       >Learn more<RightArrow /></a>
     </div>
@@ -67,7 +67,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Provide context and mocking</h4>
       <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
       <a
-        href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react#context-for-mocking"
+        href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react&ref=configure#context-for-mocking"
         target="_blank"
       >Learn more<RightArrow /></a>
     </div>
@@ -85,7 +85,7 @@ export const RightArrow = () => <svg
         `staticDirs` configuration option to specify folders to load when
         starting Storybook.</p>
         <a
-          href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react"
+          href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -113,7 +113,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Auto-generate living,
           interactive reference documentation from your components and stories.</p>
         <a
-          href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react"
+          href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -128,7 +128,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Publish to Chromatic</h4>
         <p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
         <a
-          href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react#publish-storybook-with-chromatic"
+          href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react&ref=configure#publish-storybook-with-chromatic"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -144,7 +144,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
           implementation in one place.</p>
         <a
-          href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react#embed-storybook-in-figma-with-the-plugin"
+          href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react&ref=configure#embed-storybook-in-figma-with-the-plugin"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -160,7 +160,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
           complex.</p>
         <a
-          href="https://storybook.js.org/docs/writing-tests/?renderer=react"
+          href="https://storybook.js.org/docs/writing-tests/?renderer=react&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -175,7 +175,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Accessibility</h4>
         <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
         <a
-          href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react"
+          href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -190,7 +190,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Theming</h4>
         <p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
         <a
-          href="https://storybook.js.org/docs/configure/theming/?renderer=react"
+          href="https://storybook.js.org/docs/configure/theming/?renderer=react&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -202,7 +202,7 @@ export const RightArrow = () => <svg
     <h4>Addons</h4>
     <p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
     <a
-        href="https://storybook.js.org/addons/"
+        href="https://storybook.js.org/addons/?ref=configure"
         target="_blank"
       >Discover all addons<RightArrow /></a>
   </div>
@@ -281,7 +281,7 @@ export const RightArrow = () => <svg
       <p>Follow guided walkthroughs on for key workflows.</p>
 
       <a
-          href="https://storybook.js.org/tutorials/"
+          href="https://storybook.js.org/tutorials/?ref=configure"
           target="_blank"
         >Discover tutorials<RightArrow /></a>
     </div>

package/template/cli/ts/Configure.mdx

@@ -52,7 +52,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Add styling and CSS</h4>
       <p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
       <a
-        href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react"
+        href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react&ref=configure"
         target="_blank"
       >Learn more<RightArrow /></a>
     </div>
@@ -67,7 +67,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Provide context and mocking</h4>
       <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
       <a
-        href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react#context-for-mocking"
+        href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react&ref=configure#context-for-mocking"
         target="_blank"
       >Learn more<RightArrow /></a>
     </div>
@@ -85,7 +85,7 @@ export const RightArrow = () => <svg
         `staticDirs` configuration option to specify folders to load when
         starting Storybook.</p>
         <a
-          href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react"
+          href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -113,7 +113,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Auto-generate living,
           interactive reference documentation from your components and stories.</p>
         <a
-          href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react"
+          href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -128,7 +128,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Publish to Chromatic</h4>
         <p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
         <a
-          href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react#publish-storybook-with-chromatic"
+          href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react&ref=configure#publish-storybook-with-chromatic"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -144,7 +144,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
           implementation in one place.</p>
         <a
-          href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react#embed-storybook-in-figma-with-the-plugin"
+          href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react&ref=configure#embed-storybook-in-figma-with-the-plugin"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -160,7 +160,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
           complex.</p>
         <a
-          href="https://storybook.js.org/docs/writing-tests/?renderer=react"
+          href="https://storybook.js.org/docs/writing-tests/?renderer=react&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -175,7 +175,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Accessibility</h4>
         <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
         <a
-          href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react"
+          href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -190,7 +190,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Theming</h4>
         <p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
         <a
-          href="https://storybook.js.org/docs/configure/theming/?renderer=react"
+          href="https://storybook.js.org/docs/configure/theming/?renderer=react&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -202,7 +202,7 @@ export const RightArrow = () => <svg
     <h4>Addons</h4>
     <p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
     <a
-        href="https://storybook.js.org/addons/"
+        href="https://storybook.js.org/addons/?ref=configure"
         target="_blank"
       >Discover all addons<RightArrow /></a>
   </div>
@@ -281,7 +281,7 @@ export const RightArrow = () => <svg
       <p>Follow guided walkthroughs on for key workflows.</p>
 
       <a
-          href="https://storybook.js.org/tutorials/"
+          href="https://storybook.js.org/tutorials/?ref=configure"
           target="_blank"
         >Discover tutorials<RightArrow /></a>
     </div>