storybookjs/storybook

This system is the Storybook framework, a tool for developing, documenting, and testing UI components in isolation across multiple frontend frameworks. It provides a comprehensive ecosystem of builders, renderers, and addons that enable component-driven development, visual testing, and accessibility validation. The codebase also includes an agent evaluation suite designed to test AI coding assistants against Storybook workflows, alongside CLI tools for project scaffolding and automated migrations.

77 changes.

This period focused on modernizing Storybook's framework integrations by introducing Vite-based builders for React, Vue, Svelte, and Web Components, while deprecating legacy Webpack setups. The work also involved extensive updates to CLI templates and renderers to support Svelte 5, Angular standalone components, and modern testing utilities, alongside the introduction of new codemods and documentation generation improvements.

83 changes.

This period focused on the architectural overhaul of Storybook for versions 8 and 11, featuring a complete rewrite of the Vite builder, the introduction of a new Webpack 5 builder, and the extraction of the CLI into a dedicated package. It also established robust integration patterns for modern frameworks like Next.js, Vue 3, and Angular through comprehensive template stories, new Vite plugins, and automated migration tools.

94 changes.

This period focused on expanding Storybook's framework support by adding comprehensive templates and integration packages for Svelte, Vue, Preact, Next.js, TanStack React, and Angular Vite. Simultaneously, the project established a robust infrastructure for evaluating AI coding agents, introducing the @storybook/mcp package, dedicated plugins for Claude and Codex, and a comprehensive evaluation suite to test agent workflows.

A new Angular component (\DocButtonComponent\) and its corresponding Storybook story have been added to the \code/frameworks/angular/template/stories/argTypes/doc-button\ location. The component serves as a test case for JSDoc handling in Storybook Docs, featuring various input types (strings, numbers, enums, objects), default values, deprecation markers, and ignored properties. The story is written in CSF 3 format and demonstrates how argTypes and default values are rendered in the documentation table, including a template-based render example.

code/frameworks/angular/template/stories/argTypes/doc-button · high confidence

Added a comprehensive set of Storybook stories and components in the Angular basics template to demonstrate core Angular features, including component inheritance, OnPush change detection, custom pipes, dependency injection, and various styling approaches. The collection also includes examples for Angular forms (ControlValueAccessor), ng-content projection, lifecycle hooks (ngOnDestroy), and NgModule patterns such as forRoot() and custom providers.

code/frameworks/angular/template/stories/basics · high confidence

A new Angular template story has been added to demonstrate the \doc-injectable\ argType pattern. This includes a sample \DocInjectableService\ using Angular's \@Injectable\ decorator and a corresponding CSF 3 story that renders the service within a module metadata provider context, allowing users to see how injectable services are documented and tested in Angular components.

code/frameworks/angular/template/stories/argTypes/doc-injectable, code/frameworks/angular/template/stories/core/decorators/theme-decorator · high confidence

Introduced a new Angular pipe example (\DocPipe\) and its corresponding Storybook story within the \argTypes/doc-pipe\ template directory. This addition provides a concrete demonstration of how to document Angular pipes, including the pipe implementation that transforms strings to uppercase and a story configuration that renders the pipe in a template context, thereby enhancing the available examples for Angular users documenting component arguments.

code/frameworks/angular/template/stories/argTypes/doc-pipe · high confidence

Added new Angular template stories in the \componentWrapperDecorator\ directory that showcase how to use \componentWrapperDecorator\ and \moduleMetadata\ to wrap components with parent wrappers. The entry includes a \ParentComponent\ and \ChildComponent\ to demonstrate passing props and handling events through the decorator chain, providing concrete examples for users implementing similar UI structures in Angular.

code/frameworks/angular/template/stories/core/decorators/componentWrapperDecorator · high confidence

A new Storybook story has been added for the Angular framework that demonstrates how to configure the APP\_INITIALIZER token using a factory function. This story allows users to visualize and test the Button component within a context where an application initializer is registered via a factory provider, helping to validate integration patterns for app startup logic in Angular applications.

code/frameworks/angular/template/stories/others/app-initializer-use-factory · high confidence

A new story file has been added to the Angular template stories to demonstrate the \preserveWhitespaces\ component parameter. This example defines a standalone Angular component with \standalone: false\ and \preserveWhitespaces: true\, allowing users to see how whitespace preservation affects template rendering in Storybook.

code/frameworks/angular/template/stories/core/parameters · high confidence

New Angular components have been added to the storybook core module metadata stories to demonstrate dependency injection patterns. These include a custom pipe, a dummy service, a service component that fetches data asynchronously, and a token component that utilizes InjectionTokens for optional and required dependencies. All components are explicitly configured as non-standalone (\standalone: false\) to align with the project's module-based architecture.

code/frameworks/angular/template/stories/core/moduleMetadata/angular-src · high confidence

New Angular-specific template components (Button, Form, HTML, and Pre) have been added to the framework integration. The Button component supports primary/secondary styles and size variants, the Form component utilizes Angular signals and standalone module features for validation and success handling, the HTML component safely renders content via DomSanitizer, and the Pre component displays text or JSON objects. These components are exported via an index file to serve as the default UI primitives for Angular-based Storybook stories.

code/frameworks/angular/template/components, code/frameworks/web-components-vite/template · high confidence

New Storybook stories have been added to demonstrate Angular-specific features: the \moduleMetadata\ directory now includes examples for configuring module metadata via default decorators, per-story metadata, and merging default with story-level metadata, while the \styles\ directory adds stories showing how to apply inline component styles to Angular templates.

code/frameworks/angular/template/stories/core/moduleMetadata, code/frameworks/angular/template/stories/core/styles · high confidence

A new Ember CLI-based test storybook has been added to the \test-storybooks\ suite to validate Storybook's integration with Ember applications. This demo app includes a full Ember project structure (configuration, build output, and components) and is configured to use the \@storybook/ember\ framework with specific addons (a11y, docs, links). The setup enables addon documentation integration and configures Webpack fallbacks for Node.js built-in modules to ensure compatibility in the browser environment.

test-storybooks · high confidence

The React Native Storybook generator now includes dedicated entrypoint templates for both standard React Native (index.js) and Expo (index.expo.js) projects. These templates integrate the new @storybook/react-native-ui-lite package as the default UI component and configure AsyncStorage for persisting selection state, providing a more robust and modern starting point for users setting up Storybook in their React Native applications.

code/lib/create-storybook/templates/react-native · high confidence

The HTML renderer now includes a set of template components (Button, Form, Pre, Html) that are registered globally under \\_\_TEMPLATE\COMPONENTS\\_\. The Button component renders a clickable button using the provided label and click handler. The Form component creates a form with an input field, handles submission by preventing the default event, simulates a brief processing delay, and calls the \onSuccess\ callback with the input value. The Pre component displays text or JSON objects with a specific test ID and style. The Html component provides a basic div wrapper. These components are exported via an index file and made available to the HTML storybook renderer.

code/renderers/html/template/components · high confidence

The HTML/Vite project template now includes a complete set of Storybook examples for both JavaScript and TypeScript. This adds ESLint configuration, component implementations (Button, Header, Page), and corresponding story files that demonstrate component-driven development, including interaction testing for the Page component.

code/frameworks/html-vite/template · high confidence

The Next.js + Vite CLI template now includes the core TypeScript source files and story definitions for the example application. This adds the \Button\, \Header\, and \Page\ components along with their corresponding \.stories.ts\ files, providing a complete, runnable example for users scaffolding a new project with this framework combination.

code/frameworks/nextjs-vite/template/cli/ts · high confidence

The Next.js template now includes a comprehensive suite of Storybook stories demonstrating core Next.js 14 features, including dynamic imports, Google and local fonts, image optimization (with Avif and blur placeholders), navigation hooks (app router and legacy router), React Server Components (RSC), and styled JSX. These stories utilize the \@storybook/nextjs\ preset and \storybook/test\ for assertions, providing developers with verified examples of how to integrate and test Next.js-specific components in Storybook.

code/frameworks/nextjs/template/stories · high confidence

The nextjs-vite framework template now includes a comprehensive suite of example stories demonstrating Next.js capabilities, including navigation (Router and App Router), caching, dynamic imports, image optimization, fonts, server components, and server actions. These stories provide interactive examples and automated tests to help users verify their Next.js integration with Storybook.

code/frameworks/nextjs-vite/template/stories · high confidence

The next-image plugin now intercepts imports of \next/image\ and \next/legacy/image\, providing mocked components that render the original Next.js image with a default loader and context. It also handles static image assets (png, jpg, svg, etc.) by resolving them via Vite or Node require, probing their dimensions using probe-image-size, and generating virtual modules to ensure stable, short IDs even in deeply nested monorepo paths. This allows Storybook stories using Next.js image components to load and display correctly without the Next.js server.

code/lib/vite-plugin-storybook-nextjs/src/plugins/next-image · high confidence

The Storybook CLI now includes a dedicated generator for Nuxt projects, enabling users to scaffold Storybook configurations specifically for Nuxt applications. This generator automatically configures the Nuxt module (@nuxtjs/storybook), sets up story paths for Vue 3 components and MDX files (conditionally including MDX if the docs feature is enabled), and handles dependency installation requirements unique to Nuxt environments.

code/lib/create-storybook/src/generators/NUXT · high confidence

A new Vue 3 component template using the Options API has been added to the stories renderer. It demonstrates defining props with defaults (number, object, array, and complex function-based defaults) and typed emits with validation logic, providing a concrete example for users generating or inspecting component metadata in a Vite + TypeScript setup.

_code/renderers/vue3/template/stories\vue3-vite-default-ts/component-meta/options-api · high confidence

The CLI template for Preact now includes a Storybook configuration with ESLint rules tailored for Preact (disabling React-specific scope and prop-type checks). It provides example components (Button, Header, Page) with corresponding stories, including an interaction test on the Page component that simulates a user logging in via the Storybook test utilities.

code/frameworks/preact-vite/template · high confidence

The Preact renderer now includes a set of template components (Button, Form, Html, Pre) that are registered globally as \\_\_TEMPLATE\COMPONENTS\\_\. These components provide the basic UI primitives required for the Preact sandbox environment, enabling users to interact with standard form inputs, buttons, and HTML rendering within Preact-based stories.

code/renderers/preact/template/components · high confidence

The create-storybook tool now includes a dedicated generator for React Native Web projects using the Vite builder. This new generator automatically installs the necessary dependencies (vite, react-native-web, and prop-types for JavaScript projects) and cleans up any existing CSS files in the stories target directory during configuration, enabling users to scaffold React Native Web Storybook configurations more easily.

_code/lib/create-storybook/src/generators/REACT\_NATIVE\WEB · high confidence

New template directories for agent evaluation have been added, including a Reshaped Storybook setup and a standard Vite app. The Reshaped Storybook template configures Storybook with the 'slate' theme, integrates MSW for mocking, and sets up Vitest with Playwright for browser-based story testing. Both templates include necessary configuration files such as ESLint, PostCSS, TypeScript, and Vite configs, along with launch configurations for debugging Storybook.

agent-eval/templates · high confidence

The create-storybook tool now includes a dedicated generator for the SOLID framework. This new module registers SOLID as a supported project type, renderer, and framework, and configures it to use Vite as the default builder. When users generate a new Storybook configuration for SOLID, the tool will automatically set up the environment with component addition enabled by default.

code/lib/create-storybook/src/generators/SOLID · high confidence

The UI package now includes Storybook and Vitest configuration files to support component documentation and testing. This adds a Storybook setup using the React Vite framework with accessibility, documentation, and MCP addons, alongside a Vitest configuration that integrates Storybook tests via the addon-vitest plugin using Playwright for browser-based testing. Additionally, a new Card component is introduced with associated stories and TypeScript types, and a tsconfig.json is added to define the build environment for the package.

agent-eval/templates/monorepo/packages/ui · high confidence

The web-components template now includes Storybook integration for the \demo-wc-card\ component. This adds a story file (\demo-wc-card.stories.js\) demonstrating the card's front/back toggle, header, and prefix slot, along with \custom-elements.json\ and \custom-elements-experimental.json\ manifests that document the component's API (attributes, properties, events, CSS parts/variables) for Storybook's ArgsTable. A \preview.js\ configures Storybook to use the custom elements manifest, and a \script.stories.js\ file is added to demonstrate script rendering scenarios.

code/renderers/web-components/template/stories · high confidence

Added a new ColorPickerComponent and its associated Storybook stories to demonstrate the usage of Angular's model() signal for two-way data binding. The stories include a 'ControlsAndActions' story that verifies the component renders the initial color and correctly emits changes to the actions panel, and a 'TwoWayRoundTrip' story that validates the full cycle of live arg updates reaching the component and component emissions updating the story args.

_code/frameworks/angular/template/stories\_angular-cli-default-ts/model-signal, code/frameworks/angular/template/stories\angular-cli-prerelease/model-signal · high confidence

A new Storybook story has been added to the bench area that allows users to select and view ESBuild metafiles via a bundle analyzer iframe. The story dynamically loads metafile JSON files from the project, maps directory names to Storybook package names (handling special cases like 'core' mapping to 'storybook'), and provides a dropdown to switch between different package build outputs for inspection.

code/.storybook/bench · high confidence

A new Storybook story has been added for the '12009 unknown component' issue, demonstrating the Button component with the text 'Unknown component'. The story uses the CSF 3 format with explicit type imports and relies on auto-titling rather than a manual title configuration.

code/frameworks/angular/template/stories/others/issues · high confidence

The Svelte Vite CLI template now includes Storybook integration, providing ready-to-use component stories and documentation examples for both JavaScript and TypeScript projects. This adds example components (Button, Header, Page) with corresponding \.stories.svelte\ files using \@storybook/addon-svelte-csf\, along with dedicated docgen templates that demonstrate various TypeScript prop type patterns (inline, referenced, legacy) and JSDoc support to help users get started with component-driven development.

code/frameworks/react-vite/template, code/frameworks/svelte-vite/template · high confidence

The JavaScript SvelteKit CLI template now includes Storybook integration with pre-built component stories. New files for Button, Header, and Page components (along with their corresponding .stories.svelte files) are added to the template, providing a starting point for component-driven development and visual testing within the generated project.

code/frameworks/sveltekit/template/cli/js · high confidence

The Vue 3 Vite CLI template now includes Storybook integration with pre-built component stories and Vue components for both JavaScript and TypeScript projects. Users will receive Button, Header, and Page components along with their corresponding Storybook story definitions, enabling immediate component-driven development and interactive documentation out of the box.

code/frameworks/vue3-vite/template · high confidence

The SvelteKit skeleton template now includes a comprehensive set of Storybook stories demonstrating core framework modules. New \.svelte\ components and corresponding \.stories.js\ files cover \$app/environment\ (browser, dev, building, version), \$app/forms\ (form enhancement), \$app/navigation\ (goto, invalidate, push/replace state, afterNavigate), \$app/paths\ (assets, base), \$app/state\ (page, navigating, updated), and \$app/stores\ (page, navigating, updated via getStores). These stories allow users to visually inspect and interact with SvelteKit's built-in APIs in isolation, with mock parameters provided for deterministic testing of state and store values.

_code/frameworks/sveltekit/template/stories\svelte-kit-skeleton-ts · high confidence

The TanStack React CLI template now includes Storybook support via the new @storybook/tanstack-react framework. This adds example components (Button, Header, Page) and their corresponding Storybook stories, enabling users to visualize and interact with UI elements in Storybook. The Page component integrates with TanStack Router, and the stories demonstrate interaction testing and routing configuration specific to TanStack React.

code/frameworks/react-native-web-vite/template/cli/js, code/frameworks/tanstack-react/template/cli · high confidence

The Storybook CLI now includes a dedicated generator for TanStack React applications. When initializing a new project with this type, the setup automatically configures the React renderer, Vite builder, and the TanStack React framework, while also installing the @tanstack/react-query and @tanstack/react-router packages to support data fetching and routing out of the box.

code/lib/create-storybook/src/generators/TANSTACK · high confidence

A new TypeScript component template has been added to the Vue 3 renderer output for generating story metadata. This template defines a Vue 3 component using the \defineComponent\ API, accepting a required string prop \foo\ and an optional number prop \bar\, and renders these props as a JSON string for inspection.

_code/renderers/vue3/template/stories\vue3-vite-default-ts/component-meta/ts-component · high confidence

A new Vue 3 component has been added to the reference-type-events template to demonstrate how to define and emit typed events using TypeScript interfaces and the defineEmits helper. The component exposes three distinct events ('foo', 'bar', and 'baz') with varying payload structures, providing a concrete example for users to understand event typing in Vue 3 with Vite and TypeScript.

_code/renderers/vue3/template/stories\vue3-vite-default-ts/component-meta/reference-type-events · high confidence

The Vue 3 Vite TypeScript template now includes a set of story files under \component-meta\ that demonstrate how the \vue-component-meta\ docgen plugin handles specific Vue 3 features. New stories cover \defineModel\ bindings, slot bindings (including named and v-bind slots), TypeScript enum props (both imported and local enums), and named TypeScript exports. These additions ensure that the generated documentation correctly reflects control types and metadata for these modern Vue patterns.

_code/renderers/vue3/template/stories\vue3-vite-default-ts/component-meta · high confidence

The Vue 3 renderer now includes a set of template components (Button, Form, Html, and Pre) that are registered globally for use in generated projects. The Button component supports primary/secondary styles, three sizes (small, medium, large), and custom background colors. The Form component provides a basic input with submission handling and a completion state. The Html component renders raw HTML content, and the Pre component displays text or JSON objects with optional styling. These components are exported via an index file that assigns them to a global template registry.

code/renderers/vue3/template/components · high confidence

A new Vue 3 component template has been added to the stories renderer for the 'class-slots' component-meta scenario. This template defines a component with two typed slots ('default' accepting a number and 'foo' accepting a string) using TypeScript, ensuring type safety for slot content in generated stories.

_code/renderers/vue3/template/stories\vue3-vite-default-ts/component-meta/class-slots · high confidence

The onboarding flow now includes a guided intent survey, accessible via the checklist, which collects user preferences regarding their building focus, areas of interest, and discovery source. The survey is implemented as a controlled modal component that validates required selections before submission and sends the collected data as a new telemetry event upon completion.

code/addons/onboarding/src/features/IntentSurvey · high confidence

A local, self-contained bundle size analyzer (HTML, CSS, and JavaScript) has been added to the Storybook benchmarking tool. This standalone interface allows users to visualize esbuild metafiles directly within the Storybook environment, supporting treemap, sunburst, and flame chart views, as well as dark mode and large file handling.

code/.storybook/bench/bundle-analyzer · high confidence

Added a README.mdx file to the Angular ngx-translate template that provides documentation and code examples for configuring ngx-translate within Storybook, including setup via decorators and provider injection.

code/frameworks/angular/template/stories/others/ngx-translate · high confidence

New experiment definitions have been added to the agent-eval suite to standardize evaluation runs for Claude Code (Sonnet and Opus models) and OpenAI Codex (GPT-5.5). These configurations pin specific model versions and reasoning effort levels (medium or high) to ensure consistent results regardless of CLI defaults, and configure the agents to run via their direct APIs for both MCP and plugin integrations.

agent-eval/experiments · high confidence

The accessibility addon now includes a new set of renderer-agnostic stories located in \addons/a11y/template/stories\. These stories demonstrate how to configure and test accessibility rules using the \Html\ template component, covering scenarios such as violation detection, passing checks, context scoping (including Shadow DOM and iframe contexts), and configuration options like disabling specific checks or snapshots.

code/addons/a11y/template · high confidence

New signal-based button components and corresponding Storybook stories have been added to the Angular CLI templates (both default and prerelease sandboxes). These templates demonstrate how to use Angular's new \input\ and \output\ signals for component properties and events, providing a modern alternative to traditional decorators for users adopting the latest Angular APIs.

_code/frameworks/angular/template/stories\_angular-cli-default-ts/signal, code/frameworks/angular/template/stories\angular-cli-prerelease/signal · high confidence

The \storybook-addon-pseudo-states\ package has been added to the monorepo, enabling users to force and toggle CSS pseudo states (such as \:hover\, \:focus\, and \:active\) within Storybook. The addon works by rewriting document stylesheets to inject alternative class-based selectors (e.g., \.pseudo-hover\) and applying these classes to the story container or specific elements via the \pseudo\ parameter. It includes a manager toolbar for interactive toggling, supports targeting specific elements via CSS selectors, handles nested CSS rules and \@layer\ at-rules, and correctly manages Shadow DOM boundaries and portal elements.

code/addons/pseudo-states · high confidence

Added template story files (decorators, globals, parameters) to the Themes addon that demonstrate how to apply themes using class names, data attributes, and JSX providers. These stories utilize the internal \sb\theme\ global and the \\\_TEMPLATE\COMPONENTS\\_\ placeholder to showcase theme configuration via Storybook globals and parameters.

code/addons/themes/template · high confidence

The web-components renderer now includes a set of template components—Button, Form, Html, and Pre—registered in the global \\_\_TEMPLATE\COMPONENTS\\_\ object. These components render into the light DOM (via \createRenderRoot\ returning \this\) to facilitate testing and interaction, with the Button component supporting primary/secondary modes and sizes, the Form component handling submission events, the Html component injecting raw content, and the Pre component displaying text or JSON objects.

code/renderers/web-components/template/components · high confidence

A new demo web component, \demo-wc-card\, has been added to the web-components template stories. This component implements a flip-card UI pattern with front and back sides, allowing users to toggle between views via a button click. It supports customizable headers, data rows, and CSS properties for styling the header font size and front/back text colors, exposing \front\ and \back\ parts for further customization.

code/renderers/web-components/template/stories/demo-wc-card · high confidence

The test-storybooks/ember-cli location now includes a complete Ember CLI application structure, providing the foundational files (app.js, router, resolver, templates, and components) required to run Ember-based Storybook stories. This change establishes the necessary Ember environment for testing UI components within this specific test-storybook instance.

test-storybooks/ember-cli · high confidence

The Preact renderer template now includes a new story demonstrating React compatibility. A new \React.jsx\ file defines functional and class components using the React API, and \react-compat.stories.jsx\ renders these components to show how Preact handles React-style code.

code/renderers/preact/template/stories · high confidence

A new README.mdx file has been added to the core Angular template stories directory to document Storybook's native features. This file serves as a landing page for examples that highlight Storybook's built-in functionality without requiring additional addons.

code/frameworks/angular/template/stories/core · high confidence

A new Vue 3 component template has been added to the \ts-named-export\ location, demonstrating how to define components with named exports using TypeScript. The template includes two example components (\ComponentA\ and \ComponentB\) that utilize Vue's \defineComponent\ and \h\ function, showcasing prop definitions with JSDoc annotations for metadata like default values, control types, and groups. This serves as a reference implementation for generating stories from components that export their definitions by name rather than as default exports.

_code/renderers/vue3/template/stories\vue3-vite-default-ts/component-meta/ts-named-export · high confidence

New component templates have been added to the Vue 3 renderer storybook to support testing of component metadata extraction for the new \defineModel\ API and the \defineSlots\ type declaration. The \define-model\ template demonstrates a basic v-model binding using \defineModel\<string\>()\, while the \define-slots\ template showcases various slot definitions including typed props, named slots, and different binding patterns (default, named, and v-bind), enabling better validation of how these Vue 3.4+ features are reflected in component metadata.

_code/renderers/vue3/template/stories\_vue3-vite-default-ts/component-meta/define-model, code/renderers/vue3/template/stories\vue3-vite-default-ts/component-meta/define-slots · high confidence

The onboarding example-stories location now includes a new Button component (Button.tsx), its associated styles (button.css), and Storybook stories (Button.stories.tsx). This provides users with a concrete, customizable UI example demonstrating how to structure components and define stories within the onboarding addon context.

code/addons/onboarding/example-stories · high confidence

The agent-eval suite now includes new evaluation cases (803–806) that test an agent's ability to create, modify, and refactor React components. These scenarios provide specific source files, such as ReviewCard and AlertBanner components, along with utility functions like formatRating, to assess how well the agent can handle tasks like writing stories, performing non-visual refactors, and responding to browse requests within the reshaped UI library context.

(repo-wide) · high confidence

A new Vue 3 component template has been added to the storybook renderer configuration to demonstrate exposing specific reactive properties. The component uses \defineExpose\ to make a string label and a numeric count available to parent components, providing a concrete example for testing component metadata and exposed API reflection in the Vue 3 Vite default TypeScript template.

_code/renderers/vue3/template/stories\vue3-vite-default-ts/component-meta/reference-type-exposed · high confidence

The agent-eval directory now includes specific React component implementations used as test fixtures for various evaluation scenarios. A PlanCard component was added to the 906-existing-component-edit-story-reshaped-detailed scenario, utilizing the 'reshaped' library for styling. Additionally, simplified Button and StatusPill components were introduced across multiple scenarios (908, 910, 911, 912, 913, 914, 915) to support testing workflows such as running tests, fixing accessibility violations, and previewing stories by path or ID.

(repo-wide) · high confidence

A new script, \generate-tools-api-doc.ts\, has been added to the MCP addon scripts to automatically produce a Markdown reference of the Storybook AI surface. This tool captures MCP server instructions, tool definitions (rendered separately for review-enabled and review-disabled states), plugin skills, and CLI help output, converting internal JSON schemas into TypeScript types for clarity. This provides users with an up-to-date, machine-generated guide to the available tools and capabilities without manual maintenance.

code/addons/mcp/scripts · high confidence

New codemods are available to help upgrade Storybook stories to the Component Story Format (CSF) 3 structure. The \csf-2-to-3\ transform updates story exports from the CSF2 object format to the CSF3 object format, migrates TypeScript types (e.g., \ComponentStory\ to \StoryFn\), and removes redundant render functions. The \upgrade-deprecated-types\ codemod specifically targets and replaces legacy Storybook type imports with their modern equivalents. Additionally, \upgrade-hierarchy-separators\ updates story titles to use forward slashes instead of dots or pipes, and \find-implicit-spies\ warns about potential implicit spies in play functions.

code/lib/codemod/src/transforms · high confidence

The Storybook preview configuration for Vue 3 now automatically registers a global \GlobalButton\ component and installs a custom plugin that provides a \$greetingMessage\ method, along with providing a \someColor\ token, making these resources available across all stories without manual setup.

code/renderers/vue3/template/stories · high confidence

The ESLint plugin now explicitly exposes package metadata (name and version) via a \meta\ object on both the default export and the namespace export, ensuring consumers can programmatically identify the plugin version. Additionally, a new \test-utils\ module introduces a \StorybookRuleTester\ that extends \@typescript-eslint/rule-tester\ to automatically inject a default filename (\MyComponent.stories.js\) into test cases, simplifying the process of writing and running tests for Storybook-specific ESLint rules.

code/lib/eslint-plugin/src · high confidence

The ESLint plugin now ships with native support for ESLint's new flat configuration format. New TypeScript files have been added in the \src/configs/flat\ directory to export pre-configured rule sets, including \recommended\, \csf\ (Component Story Format), \csf-strict\, and \addon-interactions\. These configs allow users to easily adopt Storybook linting rules by importing the flat config objects directly, replacing the need for the older \.eslintrc\-based setup.

code/lib/eslint-plugin/src/configs/flat · high confidence

The ESLint plugin for Storybook now supports ESLint v9's flat configuration style (eslint.config.js) in addition to the legacy .eslintrc format, allowing users to integrate the plugin using the modern configuration approach. The plugin bundles its own CSF helpers, meaning users no longer need to install the full Storybook package just to load the ESLint plugin in shared monorepo presets. The plugin also adds support for running via oxlint and includes updated documentation and contributing guides.

code/lib/eslint-plugin · high confidence

The \vite-plugin-storybook-nextjs\ plugin now provides comprehensive mocks for several Next.js modules, allowing components using these APIs to run in Storybook and Vitest environments. New mocks include \next/cache\ (supporting \cacheLife\, \cacheTag\, and related utilities), \next/headers\ (mocking \headers()\ and \cookies()\), \next/dynamic\ (with support for \ssr: false\), \next/link\ (including \useLinkStatus\ and trailing slash normalization), and \next/navigation\/\next/router\ (mocking navigation actions and hooks). The plugin also aliases \server-only\ and \safe-stable-stringify\ to prevent runtime errors, and includes compatibility handling for Next.js versions prior to 15.

code/lib/vite-plugin-storybook-nextjs/src/plugins/next-mocks · high confidence

The agent-eval directory now includes expanded template sets for evaluating agent-generated code. A new monorepo template under \templates/monorepo\ provides a Vite-based React app structure (\index.html\, \main.tsx\) that consumes a shared \@acme/ui\ package, alongside design tokens (\colors.ts\) and UI components like \Badge\ and \StatusPill\. Additionally, the \templates/vite-app\ template has been enriched with new components (\Button\ with variant support, \Tag\ with tone-based styling) and an updated \App.tsx\ demonstrating a team notes interface. These additions provide more diverse codebases for testing agent capabilities in component creation, styling, and monorepo architecture.

(repo-wide) · high confidence

The agent-eval suite now includes a comprehensive set of new evaluation scenarios (701–813) that test an AI agent's ability to manage Storybook workflows. These new tests verify that agents can create and edit components, write stories for existing or empty projects, perform non-visual refactors, and handle documentation requests. The evaluations specifically check for correct integration with the Storybook ecosystem, including the use of the 'stories' skill, proper display review publishing, and valid launch configuration management. Additionally, the suite introduces checks for accessibility fixes and shared infrastructure changes, ensuring agents handle complex, multi-file updates correctly.

agent-eval/evals · high confidence

The HTML renderer now includes a \sourceDecorator\ that automatically extracts and displays the source code of stories in the documentation panel. This feature is enabled by default for args stories, using dynamic source generation (\SourceType.DYNAMIC\) to capture the rendered HTML. The renderer also introduces a \setProjectAnnotations\ API for configuring global preview settings and enhances \argTypes\ by default. Additionally, the renderer supports rendering stories from string templates, DOM elements, or component functions, and uses \happy-dom\ for testing.

code/renderers/html · high confidence

This change introduces the \@storybook/sveltekit\ framework, providing a dedicated integration for SvelteKit applications. It includes a preset that configures the Vite builder, disables incompatible SvelteKit plugins (such as \vite-plugin-sveltekit-guard\ and \vite-plugin-sveltekit-compile\), and applies configuration overrides to ensure SSR is disabled during the Storybook build process. The integration provides comprehensive mocks for SvelteKit's internal modules (\$app/navigation\, \$app/stores\, \$app/forms\, \$app/state\) to allow components using these features to render in Storybook. It also exposes a \setProjectAnnotations\ API for configuring global story settings and a \MockProvider\ decorator to manage SvelteKit context and state within stories.

code/frameworks/sveltekit · high confidence

Storybook now supports Preact with Vite as a first-class framework. This change introduces the \@storybook/preact-vite\ package, which provides the necessary preset and configuration to integrate Preact components with the Vite builder. Users can now develop, document, and test Preact UI components in isolation using the Vite build tool, leveraging the existing Storybook Preact renderer and Vite builder infrastructure.

code/frameworks/preact-vite · high confidence

This change introduces the \vite-plugin-storybook-nextjs\ package, which enables Storybook to work with Next.js applications by providing a Vite plugin that handles Next.js-specific configuration. The plugin automatically detects Next.js and Vite versions to apply appropriate compatibility layers, such as using native \tsconfigPaths\ on Vite 8+ or falling back to the \vite-tsconfig-paths\ plugin on earlier versions. It configures module resolution aliases for React and React DOM to use Next.js's compiled versions, ensures critical Next.js internal modules are pre-bundled via \optimizeDeps.include\ to prevent resolution errors in development, and supports Next.js features like \next/font\, \next/image\, \next/dynamic\, and environment variable injection. The implementation includes dedicated plugins for Next.js environment variables, SWC transformation, dynamic imports, image handling, and mocking, along with type definitions and tests to ensure stability across different Next.js and Vite versions.

code/lib/vite-plugin-storybook-nextjs/src · high confidence

Adds the new @storybook/addon-themes package, enabling users to switch between multiple themes (e.g., light/dark) for components in the Storybook preview. The addon provides decorators like withThemeByClassName, withThemeByDataAttribute, and withThemeFromJSXProvider to apply themes via CSS classes, data attributes, or JSX context. It includes a manager-side ThemeSwitcher tool for interactive switching and supports configuration via globals and parameters, with specific integration guides for libraries like MUI, Tailwind, and Bootstrap.

code/addons/themes · high confidence

Adds the new @storybook/addon-vitest package, which integrates Vitest test results directly into the Storybook UI. This includes a manager-side testing widget (TestProviderRender) that displays test statuses, progress, and error details, along with a GlobalErrorModal for handling fatal errors and unhandled exceptions. The addon also provides a postinstall script to automatically configure Vitest for Storybook projects, including specific auto-wiring logic for Angular projects via the storybookAngularVitest bridge, and exposes configuration options such as initialGlobals and coverage settings.

code/addons/vitest · high confidence

This change introduces the new \@storybook/angular-vite\ package, providing a Vite-based integration for Angular projects. It includes Angular Architect builders for \start-storybook\ and \build-storybook\ that merge browser target options (styles, assets, source maps) into the Storybook configuration, ensuring consistency with the Angular build. The package also provides client-side utilities like \argsToTemplate\ for generating Angular property and event bindings from story args, and integrates with the shared Compodoc adapter for extracting component metadata and arg types for the props table.

code/frameworks/angular-vite · high confidence

The \code/frameworks/angular-vite/template\ directory now contains the initial set of Angular component templates and stories for the new \@storybook/angular-vite\ framework. This includes standalone and non-standalone components (such as \ButtonComponent\, \HeaderComponent\, and \PageComponent\), along with their corresponding Storybook stories. The template also provides examples for advanced Angular features, including directives, injectables, pipes, complex selectors, enums, inheritance, \ng-content\, \OnPush\ change detection, and custom form value accessors, all importing from the new \@storybook/angular-vite\ package.

code/frameworks/angular-vite/template · high confidence

This change introduces the \@storybook/mcp\ package, providing a standalone, hosted runtime for Storybook's documentation tools. It exposes an MCP handler (\createStorybookMcpHandler\) that serves documentation tools (\docs-list\, \docs-show\, \docs-show-story\) via HTTP, allowing external agents to query component and story documentation without requiring a full Storybook installation. The package supports multi-source composition, enabling agents to fetch manifests from multiple Storybook instances (local and remote) through a unified interface, and includes server-level instructions to guide agent behavior.

code/lib/mcp/src · high confidence

Storybook now includes a dedicated framework for TanStack React, enabling developers to develop, document, and test UI components in isolation with built-in support for TanStack Router and TanStack Start. This release adds a new \@storybook/tanstack-react\ package that provides mocks for TanStack Router (including \Link\, \Navigate\, and hooks like \useNavigate\) to allow navigation testing without side effects, and mocks for TanStack Start server functions and server-only modules to ensure browser compatibility. The framework includes Vite plugins for module interception and server-code elimination, a custom \createFileRoute\ implementation to handle pathless file routes correctly, and a preset configuration that filters out incompatible plugins like Cloudflare's Vite plugin.

code/frameworks/tanstack-react · high confidence

A new \@storybook/vue3-vite\ framework package is added, providing a dedicated Vite-based builder for Vue 3 projects. This framework introduces support for \vue-component-meta\ (Volar) as a modern docgen engine, offering improved type documentation for props, events, and slots compared to the legacy \vue-docgen-api\. The \vue-docgen-api\ engine is now deprecated in favor of \vue-component-meta\ or the upcoming server-side docgen, and users can explicitly configure the docgen plugin via the framework options in \main.ts\.

code/frameworks/vue3-vite · high confidence

The \agent-eval\ directory now contains a complete evaluation framework for testing coding agents (Claude Code and Codex) against Storybook workflows. This includes a Next.js-based playground application (deployed to Vercel) for visualizing experiment results and transcripts, alongside the core evaluation logic using \@vercel/agent-eval\ 1.2.0. The suite supports running experiments in Vercel Sandboxes or local Docker environments, with configuration for API keys and sandbox access provided in \.env.example\. It also introduces LLM-judge matchers (\toSatisfyCriterion\, \toScoreAtLeast\) for automated behavioral assertions and includes design-system misuse metrics.

agent-eval · high confidence

Added a new \html-vite\ framework package that enables Storybook for HTML projects to use Vite as the build tool. This includes a preset configuration that wires up \@storybook/builder-vite\ and \@storybook/html/preset\, TypeScript definitions for the Vite-specific configuration schema, and a \defineMain\ helper for Node.js environments to streamline setup.

code/frameworks/html-vite · high confidence

This change adds a new Storybook framework for React Native Web that uses Vite as its build tool. It integrates the \vite-plugin-rnw\ to handle React Native Web compilation and \vite-tsconfig-paths\ for path alias resolution. Users can configure the framework via \main.ts\, specifying options such as \modulesToTranspile\ to ensure specific libraries (like \react-native\ or \expo\) are transpiled for the web, and \pluginReactOptions\ to customize the JSX runtime (defaulting to automatic) and Babel settings. The package exposes entry points for the preset, Vite plugin, and node-side configuration helpers.

code/frameworks/react-native-web-vite · high confidence

A new \code/lib/cli-sb\ package has been added to the repository, serving as a wrapper for the \@storybook/cli\ npm package. The package exposes an entry point (\index.js\) that dynamically imports the internal dispatcher, and includes configuration files for the NX build system (\project.json\) and Vitest testing (\vitest.config.ts\).

code/lib/cli-sb · high confidence

This change adds the Storybook plugin for Claude Code (and Claude Desktop), providing the necessary marketplace and plugin manifests (\marketplace.json\, \plugin.json\) to register and install the \storybook@storybook\ plugin. It includes a set of agent skills (\init\, \setup\, \stories\, \upgrade\) that guide the AI agent through initializing Storybook, configuring agentic workflows, generating stories, and upgrading the project. The plugin requires Storybook 10.6 (or the \next\ prerelease) and leverages the \@storybook/addon-mcp\ for tool access. Local development and validation scripts are also included to test the plugin installation and manifest correctness.

code/lib/claude-plugin · high confidence

This change adds the \@storybook/codex-plugin\ package, which packages Storybook as a plugin for the Codex agent. It includes a marketplace descriptor (\marketplace.json\) that registers Storybook as a local marketplace, enabling Codex to discover and install the plugin. The package provides lifecycle scripts to validate the marketplace layout, add the local marketplace to Codex for testing, and cleanly remove the plugin and its cache. It also includes documentation for local development and testing, ensuring agents can use Storybook's skills (init, setup, stories, upgrade) and tools via the Codex CLI without requiring a running MCP server.

code/lib/codex-plugin · high confidence

Adds a new Preact renderer to Storybook, enabling developers to build, document, and test Preact components in isolation. This change introduces the core rendering logic via \renderToCanvas\ and \render\ functions, a preset configuration that aliases React to Preact/compat, and entry points for preview and documentation modes. It also provides TypeScript definitions for \Meta\, \StoryObj\, and \Decorator\ types to ensure type safety for Preact component props and story arguments, along with a \setProjectAnnotations\ API for configuring global preview settings.

code/renderers/preact · high confidence

This change introduces the \@storybook/nextjs-vite\ framework, providing a new way to integrate Storybook with Next.js applications using the Vite builder. It includes a preset that configures Vite, handles PostCSS normalization for Next.js compatibility, and sets up aliases for \styled-jsx\. The framework provides comprehensive mocks for Next.js APIs, including \next/link\ (with trailing slash and \as\ prop support), \next/navigation\ (supporting catch-all routes and array parameters), \next/router\, \next/headers\, and \next/cache\. It also features decorators for Head Manager, Image handling, and routing (both App Router and Page Router), along with utilities for portable stories to reuse components outside of Storybook.

code/frameworks/nextjs-vite · high confidence

This change adds a new \web-components-vite\ framework package, enabling users to integrate Storybook with web components using the Vite builder. The package provides the necessary preset configuration to wire up the Vite builder and the web-components renderer, along with TypeScript types that define the \StorybookConfig\ interface and support for Custom Elements Manifests for server-side docgen. It also exposes a \defineMain\ helper for Node.js environments and re-exports core functionality from the \@storybook/web-components\ package.

code/frameworks/react-vite, code/frameworks/svelte-vite, code/frameworks/web-components-vite · high confidence

The \@storybook/builder-webpack5\ package is now available to build the Storybook preview iframe using Webpack 5. This builder includes a new change detection adapter that accurately tracks file additions, changes, and deletions during watch mode, and a module mocking system (via \WebpackMockPlugin\ and related loaders) that allows \sb.mock()\ calls in the preview config to replace modules with mocks or automocks. It also provides default Webpack configuration for CSS and static assets, and handles long chunk filenames to prevent filesystem issues.

code/builders/builder-webpack5 · high confidence

This change ports the agentic-reference evaluation infrastructure into the repository, establishing a new location for running and analyzing agent experiments. It adds a declarative registry of evaluation cases (\cases.ts\) that define how different design-system Storybook MCP variants (such as \full\, \basic-docs\, and \a11y\) are tested against specific agent workflows. The update includes a catalog of known issues (\KNOWN-ISSUES.md\) to serve as a baseline for LLM judges, distinguishing between planted defects and pre-existing bugs. Additionally, it introduces a golden-run fixture (\\_\fixtures\\_/golden-run/\) containing a captured transcript and result JSON to provide a permanent regression target for metric modules, alongside new utility modules (\collected-runs.ts\, \comparability.ts\) to manage run outcomes, classify errors, and group comparable runs for analysis.

agent-eval/lib/agentic-reference · high confidence

The \automigrate\ module now includes a dedicated \runCodemod\ utility that safely applies transformations to story files using parallel processing, real-path resolution for symbolic links, and configurable dry-run and formatting options. Additionally, multi-project automigrations are now supported, allowing fixes to be collected, deduplicated, and prompted across multiple Storybook configurations in a monorepo, with improved error handling and telemetry reporting.

code/lib/cli-storybook/src/automigrate · high confidence

A new \create-storybook\ library has been added to the monorepo, providing the core logic and CLI entry points for initializing Storybook in user projects. This change includes the necessary build configuration (\build-config.ts\) to expose the main library and binary, a project definition (\project.json\) for the build system, and a \tsconfig.json\ configured with \moduleResolution: bundler\ to support modern module resolution. The package also includes a \README.md\ with installation instructions and a \vitest.config.ts\ to enable local testing, effectively splitting out the CLI initialization functionality into its own distinct package.

code/lib/create-storybook · high confidence

The \create-storybook\ CLI now uses a set of dedicated services to manage the initialization process, replacing the previous monolithic approach. \AddonService\ handles the automatic selection and configuration of Storybook addons (such as Vitest, Docs, Onboarding, A11y, and MCP) based on the features selected by the user, including logic for webpack compiler addons. \FeatureCompatibilityService\ validates whether specific features like AI setup or testing are compatible with the detected project configuration. \FrameworkDetectionService\ identifies the correct framework and builder (Vite, Webpack 5, or Rsbuild) by inspecting config files and dependencies, prompting the user if multiple builders are found. \ProjectTypeService\ detects the project framework (e.g., React, Next.js, Vue, Angular) from package.json dependencies and peer dependencies. \TelemetryService\ tracks initialization steps, feature selections, and process ancestry for analytics. \VersionService\ manages version checks and CLI integration detection. Comprehensive tests have been added for all these services to ensure robust behavior.

code/lib/create-storybook/src/services · high confidence

Added new utility functions to the codemod library: \sanitizeName\ converts input strings into valid identifier formats by applying camelCase and capitalizing the first letter, while prepending an underscore if the result starts with a digit; \jscodeshiftToPrettierParser\ maps legacy jscodeshift parser names (such as 'babylon' or 'flow') to their corresponding Prettier parser equivalents. These utilities are supported by new unit tests using Vitest to verify the sanitization logic.

code/lib/codemod/src/lib · high confidence

This change adds the \@storybook/react-webpack5\ framework package, providing a dedicated entry point for React projects using Webpack 5. The package includes a preset that configures the Webpack 5 builder and React renderer, re-exports core Storybook React functionality, and exposes a \defineMain\ helper for Node-side configuration. It also introduces a \developmentModeForBuild\ feature flag that injects a \WebpackDefinePlugin\ to set \NODE\_ENV\ to 'development' during builds, and establishes the project structure with ESM exports, TypeScript types, and Vitest configuration.

code/frameworks/react-webpack5 · high confidence

The docgen harness now records and verifies per-component documentation baselines against built storybook sandboxes. This change adds a new baseline system that reads docgen snapshots from the built sandbox, filters out globally-referenced components, and compares the current output against committed baselines to detect regressions (such as lost components or arguments) versus neutral changes. It includes utilities for stable JSON serialization, path normalization, and detailed diff reporting to ensure that any drift in the generated documentation is caught and reviewed.

code/lib/docgen-harness/src/sandbox-baselines · high confidence

The server renderer now supports indexing stories defined in JSON and YAML files via a new experimental indexer in the preset, allowing users to define story metadata and tags in these formats. Additionally, the renderer provides a \renderToCanvas\ function that fetches HTML content from a server URL and injects it into the canvas, enabling server-side rendering workflows where story HTML is retrieved via fetch rather than client-side component mounting.

code/renderers/server · high confidence

This change adds the \@storybook/server-webpack5\ framework, enabling Storybook to develop and visualize UI components that are rendered by a backend server. Users can now configure Storybook to fetch HTML from a specified server URL, supporting both static parameters via query strings and dynamic parameters using args and controls. The package includes a preset that wires up the Webpack 5 builder and the server renderer, along with TypeScript definitions for the main configuration and a \defineMain\ helper for Node.js environments.

code/frameworks/server-webpack5 · high confidence

This change adds the shared foundation for the new docgen performance benchmarking suite within the \docgen-harness\ package. It introduces a robust argument parsing system with strict validation and Zod-based schemas, a version pinning mechanism to isolate specific package versions (including aliases), and a standardized series execution engine that measures cold/warm extraction times and memory metrics (RSS, heap, retained heap) across simulated saves. The suite also includes a configurable budget model to gate performance regressions on timing ratios and memory ceilings for supported engines (React legacy, React OSA, Vue docgen API, Vue component meta, and Compodoc), along with comprehensive test coverage for the parsing, statistics, and resolution logic.

code/lib/docgen-harness/src/perf/docgen-shared · high confidence

A new \bin.ts\ entry point and accompanying integration tests (\bin.test.ts\) provide a local stdio-based MCP server for the \@storybook/mcp\ package, allowing developers to run and test the docs tools directly via the command line (e.g., \node bin.ts --manifestsDir ./fixtures/default\). This complements the existing HTTP handler (\serve.ts\) by offering a simpler, interactive transport for manual driving and debugging of the documentation toolset without requiring a full web server setup.

code/lib/mcp · high confidence

A new Vite plugin, \vite-plugin-storybook-nextjs\, is introduced to enable Next.js features within Vite-based environments, serving as the foundation for the \@storybook/nextjs-vite\ framework and supporting portable stories in Vitest. The plugin allows developers to seamlessly integrate Next.js capabilities into Vite projects, with specific support for Next.js v14.1.0+ and Storybook 10+. It includes configuration options for handling Next.js images (with include/exclude patterns) and provides mocks for Next.js modules like navigation, router, and image components to ensure accurate testing in Vitest. The plugin also addresses limitations compared to the Webpack5-based integration, such as the removal of \next/font\ staticDir mapping and the requirement for SWC mode in Next.js.

code/lib/vite-plugin-storybook-nextjs · high confidence

The \agent-eval/lib\ directory now contains the core evaluation infrastructure for testing Storybook agent workflows. This includes \experiment.ts\ to define and scope eval lines (8xx core, 82x lifecycle, 9xx ported), \templates.ts\ to configure sandbox environments and handle review flags, \shell-parse.ts\ to parse and normalize CLI commands into structured workflow calls, and \test-utils.ts\ to provide assertion helpers for validating agent behavior. Additionally, \usage.ts\ aggregates token usage and estimates costs from agent transcripts, while corresponding test files (\templates.test.ts\, \test-utils.test.ts\) ensure the parsing and setup logic works correctly.

agent-eval/lib · high confidence

The CLI now includes dedicated commands to install and configure Storybook addons (\sb add\), upgrade existing projects to newer Storybook versions (\sb upgrade\), and generate isolated reproduction environments (\sb sandbox\). The \add\ command automatically resolves the correct addon version, updates the main configuration file, and runs any necessary post-installation setup scripts. The \upgrade\ command handles dependency updates, runs automigrations, and warns about deprecated packages like \@storybook/nextjs\. The \sandbox\ command allows users to quickly scaffold new projects using a variety of framework-specific templates (e.g., Next.js, Angular, Vue) to test compatibility or reproduce issues.

code/lib/cli-storybook/src · high confidence

A new codemod named 'csf-factories' has been added to the Storybook CLI to automate the migration of existing Storybook projects to the CSF Factories format. This tool updates story files, main configuration, and preview configuration files to use the new format. It also offers users the option to configure subpath imports in package.json for cleaner import paths in story files, with relative imports as the default fallback. The codemod includes logic to handle glob patterns for story discovery and synchronizes Storybook addons between main and preview configurations.

code/lib/cli-storybook/src/codemod · high confidence

The ESLint plugin now provides dedicated configuration presets (\recommended\, \csf\, \csf-strict\, and \addon-interactions\) to enforce Storybook-specific coding standards. These configs automatically apply rules such as \storybook/await-interactions\, \storybook/no-stories-of\, and \storybook/default-exports\ to story files and Storybook configuration files, helping developers catch common mistakes and maintain consistency in their component libraries.

code/lib/eslint-plugin/src/configs · high confidence

The ESLint plugin now includes several new rules to enforce Storybook Coding Standard Format (CSF) best practices and interaction patterns. The \await-interactions\ rule ensures that async interactions (such as \userEvent\ or \findBy\*\ queries) are properly awaited in play functions. The \context-in-play-function\ rule requires that the context object is passed when invoking another story's play function. For CSF compliance, \default-exports\ enforces default exports in story files, \csf-component\ requires the \component\ property in meta, \meta-inline-properties\ mandates inline values for \title\ and \args\, \meta-satisfies-type\ encourages using the \satisfies\ operator for type safety, and \hierarchy-separator\ flags deprecated \\|\ separators in titles in favor of \/\. Additionally, \no-redundant-story-name\ warns against explicit \name\ properties that duplicate the export name.

code/lib/eslint-plugin/src/rules · high confidence

The eval scripts now include dedicated drivers for the Claude and Codex agents, which execute prompts via their respective SDKs, enforce non-interactive approval policies, and disable Storybook telemetry. The evaluation harness has been updated to grade these trials by measuring the normalized gain in story-render success rates, while also recording build status, TypeScript errors, and ghost-story coverage. To keep logs readable, the system now truncates large tool outputs and command results to show line counts instead of full content.

scripts/eval · high confidence

This change introduces three new Model Context Protocol (MCP) tools—\docs.list\, \docs.show\, and \docs.showStory\—registered in the \register.ts\ module, enabling agents to programmatically discover and retrieve Storybook component and story documentation. The \docs.list\ tool provides a summary of available components and can optionally include specific story IDs via the \withStoryIds\ parameter. The \docs.show\ tool retrieves full documentation for a specific component, while \docs.showStory\ fetches details for a single story, accepting either a \storyId\ or a \componentId\/\storyName\ pair. These tools support multi-source compositions, allowing documentation to be aggregated from multiple Storybook instances, and include robust error handling for missing components or manifest fetch failures.

code/lib/mcp/src/tools · high confidence

A new generator module for the REACT\_NATIVE\_AND\_RNW project type has been introduced, consolidating the setup logic for React Native and React Native Web. This generator orchestrates the configuration and post-installation steps by delegating to the existing React Native and React Native Web generator modules, while explicitly disabling the automatic dev server launch (shouldRunDev: false) to account for the additional manual configuration required for React Native projects.

_code/lib/create-storybook/src/generators/REACT\_NATIVE\_AND\RNW · high confidence

The React Native generator in create-storybook now automatically scaffolds the Storybook configuration for React Native projects. It generates an entrypoint file (index.ts or index.js) inside the .rnstorybook directory, tailored for either standard React Native or Expo projects, and includes the LiteUI component. It also derives and adds platform-specific scripts (storybook:ios, storybook:android) that inject the STORYBOOK\_ENABLED environment variable, and applies a codemod to the metro.config file to wrap the configuration with withStorybook. For Expo projects, it additionally runs npx expo install --fix post-install to align native module versions.

_code/lib/create-storybook/src/generators/REACT\NATIVE · high confidence

Added MockProvider.svelte and app-state-mock.svelte.js to the SvelteKit static framework integration, enabling Storybook users to mock SvelteKit application contexts (such as page data, navigation state, and stores) and intercept navigation events like clicks and goto calls during component testing.

code/frameworks/sveltekit/static · high confidence

The onboarding addon now displays a visually rich splash screen featuring animated radial gradients, slide-in text, and a progress circle that counts down before dismissing. This component replaces the previous welcome modal, providing a more engaging entry point for users, with specific Storybook story configurations to handle its visual nature.

code/addons/onboarding/src/features/SplashScreen · high confidence

A new internal agent skill named 'minor-release' has been added to automate the creation of changelog entries for Storybook minor (X.Y.0) and major releases. This skill includes two helper scripts: one that aggregates unique changes from prereleases while filtering out patch-backported items, and another that assembles and writes the final changelog section (including highlights and a collapsible full list) to CHANGELOG.md. The skill is marked as internal so the skills CLI skips it during normal discovery.

.agents/skills/minor-release · high confidence

Added two new Cursor rules to guide AI behavior: \cursor-cloud.mdc\ provides setup notes for the Cursor Cloud agent VM, including Node version handling and compilation steps, while \spy-mocking.mdc\ enforces consistent, type-safe mocking patterns in Vitest tests using \vi.mock()\ with the \spy: true\ option.

.cursor/rules · high confidence

The docgen performance suite now includes dedicated harnesses for Compodoc, React (legacy react-docgen and react-docgen-typescript), and Vue (vue-docgen-api and vue-component-meta). The Compodoc engine measures cold and warm run times, peak RSS, and documentation counts while explicitly excluding inherited members to match Storybook's reading behavior. The React harnesses support 'whole-index' and 'first-story' extraction shapes with configurable component counts and scope (all vs. changed). The Vue harnesses support flat, workspace, and base-type-touch scenarios to measure performance across different project layouts and invalidation patterns. A crash-control engine is included as a negative control for the performance gate.

code/lib/docgen-harness/src/perf/docgen-perf/engines · high confidence

An internal agent skill named 'open-pr' has been added to automate the creation of draft pull requests following Storybook conventions. This skill includes a script to intelligently detect the correct base branch (supporting stacked/telescoped PRs) and guides the user through gathering context, selecting labels, and drafting the PR body using the standard template. The resulting PR is automatically assigned to the user and marked as a draft, with an option to trigger a canary release.

.agents/skills/open-pr · high confidence

Added mock implementations of the Codex in-app browser, the \node\_repl\ execution environment, and the Claude preview browser tools to the \agent-eval/lib/mcp\ directory. These mocks replicate the real server tool surfaces (including schemas, instructions, and response formats) and drive real headless Playwright Chromium instances to allow agent evaluations to run browser automation and JavaScript execution tasks in isolated sandboxes without requiring the proprietary desktop applications.

agent-eval/lib/mcp · high confidence

The docgen harness now includes two new CI regression gates: a memory gate that validates the OOM fix by asserting heap stability and crash-survival under tight caps, and a performance gate that enforces budgets on warm/cold extraction ratios and memory metrics across React, Vue, and Angular scenarios.

code/lib/docgen-harness/src/perf/docgen-perf · high confidence

The preview API now exposes \useStoryContext\ and \useParameter\ hooks, allowing addons to access the current story context and parameters within decorators and story functions. It also introduces \makeDecorator\, a utility for creating custom decorators that can wrap stories with additional functionality and accept configuration via parameters or options. These changes provide a more robust and flexible way to extend Storybook's preview behavior.

code/core/src/preview-api/modules/addons · high confidence

The agent-eval workspace now includes a comprehensive set of structured evaluation plans (plans/1-levels-create.plan.ts through 6-a11y.plan.ts) that define specific experimental arms—such as varying content levels, documentation types, and story kinds—to systematically measure their impact on UI creation and editing workflows. These plans are supported by new scripts (analyze-results.ts, compare-results.ts, check-playground-routes.mjs) and a Python-based statistics engine (compare\_stats.py) that enable offline analysis, statistical comparison of control vs. treatment cases, and automated route validation for the evaluation playground.

agent-eval/scripts · high confidence

The Next.js template stories have been expanded to showcase modern Next.js capabilities. A new NextHeader story demonstrates reading and writing cookies and headers via Server Components, utilizing the new @storybook/nextjs/headers.mock entrypoint for testing. A ServerActions story illustrates login, logout, and protected-route flows using 'use server' functions, revalidation, and navigation mocks. Additionally, a Redirect story validates state invalidation after navigation, and a GetImageProps story provides an example of responsive image art direction using picture elements.

_code/frameworks/nextjs/template/stories\nextjs-default-ts · high confidence

The JavaScript template for the Next.js-Vite framework now ships with a complete set of example UI components (Button, Header, Page) and their corresponding Storybook stories. Users will see pre-configured stories demonstrating component variations, automatic documentation generation via autodocs, and an interactive interaction test on the Page component that validates user login/logout flows using Storybook's testing utilities.

code/frameworks/nextjs-vite/template/cli/js · high confidence

The React renderer template now includes a set of new UI components (Button, Form, Html, Pre) that are registered globally under \\_\_TEMPLATE\COMPONENTS\\_\. This allows users to leverage these pre-built components for rendering content and handling interactions, such as form submissions, directly within the Storybook React environment.

code/renderers/react/template/components · high confidence

The server-webpack preset has been updated to handle .yaml and .yml story files in addition to JSON. It now includes a webpack loader and compiler that parse these YAML files and convert them into CSF (Component Story Format) modules, allowing users to define stories using YAML syntax.

code/presets/server-webpack · high confidence

The addon adds a new \display-review\ tool that pushes curated reviews of current changes and returns the review-page URL, and introduces \get-stories-by-component\ to map source files to stories via the reverse dependency graph, alongside \get-changed-stories\ for retrieving metadata on new or modified stories. The review workflow is now enabled by default for the \storybook ai\ CLI channel (via the trusted local-client header) while remaining opt-in for direct MCP clients via the \experimentalReview\ feature flag. It also supports multi-source composition with OAuth for private Storybooks, exposes serverless Storybook AI metadata from presets, and supports both v0 (inline) and v1 (split/ref) Storybook manifest formats. The addon now supports Storybook 10.5 prerelease packages and allows configuring a custom MCP endpoint path.

code/addons/mcp · high confidence

The \vite-plugin-storybook-nextjs\ now includes a new plugin that transforms Next.js dynamic imports using \require.resolveWeak\ into standard dynamic imports compatible with Vite. This change enables Storybook to correctly handle components utilizing \next/dynamic\ with \ssr=false\, ensuring that server-side rendering configurations are properly adapted for the Vite-based Storybook environment.

code/lib/vite-plugin-storybook-nextjs/src/plugins/next-dynamic · high confidence

The Storybook Next.js integration now supports Next.js font optimization via \next/font/google\ and \next/font/local\. This plugin intercepts font imports, fetches or processes the necessary font files, and injects the resulting \@font-face\ CSS and class names directly into the document head. This ensures that fonts defined using Next.js's font API render correctly within Storybook previews without requiring manual static configuration.

code/lib/vite-plugin-storybook-nextjs/src/plugins/next-font · high confidence

The Svelte renderer now provides a set of template components (Button, Form, Html, Pre) rewritten for Svelte 5, exposing them via the global \\_\_TEMPLATE\COMPONENTS\\_\ object for use in sandboxes and documentation. These components utilize Svelte 5 runes ($props, $state, $derived) to handle props, local state, and reactive logic, enabling features like the Button's style derivation, the Form's submission handling, and the Pre component's object-to-JSON formatting.

code/renderers/svelte/template/components · high confidence

The Svelte renderer now includes a set of template stories in the \code/renderers/svelte/template/stories\ directory to demonstrate and verify key rendering behaviors. These include \AsyncComponent.svelte\ and \settled.stories.ts\ to showcase support for async component mounting and the use of \tick()\ after mount, \decorators.stories.js\ to illustrate various decorator patterns (including props and args-based decorators), and \args.stories.js\ to verify that story args reset correctly by remounting the component. Additionally, \mount-in-play.stories.ts\ demonstrates programmatic mounting within play functions, and \Button.svelte\ serves as a wrapper for testing slot behavior and state updates.

code/renderers/svelte/template/stories · high confidence

The Vite builder now ships with a new \vite-mock\ plugin that scans the Storybook preview configuration for \sb.mock()\ calls and automatically intercepts or transforms those module imports during the build and development server phases. This allows developers to define mock implementations in their preview config that are seamlessly applied to the Vite dev server and production builds without manual setup.

code/builders/builder-vite/src/plugins/vite-mock · high confidence

The Vue 3 CLI template has been updated to use TypeScript and the Composition API (setup script syntax) for its core components (Button, Header, Page) and their corresponding Storybook stories. This change replaces the previous JavaScript-based templates, providing type safety and modern Vue 3 patterns out of the box for new projects generated via the CLI.

code/renderers/vue3/template/cli/ts · high confidence

The Vue 3 renderer now includes a portable-stories implementation, allowing users to compose and render stories outside the Storybook environment using \composeStories\ and \composeStory\. This feature supports CSF2 and CSF3 story formats, including loaders, play functions, and decorators. Additionally, the renderer has integrated \vue-component-meta\ for internal docgen extraction, enabling more accurate type inference for props, events, slots, and exposed members in the generated API documentation.

code/renderers/vue3 · high confidence

The Vue 3 Vite TypeScript template has been expanded with a suite of new story files demonstrating advanced Vue 3 capabilities. These include \ReactiveArgs\ and \ReactiveDecorators\ stories that verify args and slot content update reactively without losing component state, \ReactiveSlots\ and \ScopedSlots\ stories showing reactive slot content, and \CustomRender\ stories illustrating functional and options-API render functions. Additionally, \GlobalSetup\ and \GlobalUsage\ stories demonstrate global component injection and property access, while \mount-in-play\ shows programmatic mounting in play functions.

_code/renderers/vue3/template/stories\vue3-vite-default-ts · high confidence

The web-components renderer now supports server-side documentation generation by reading Custom Elements Manifests (custom-elements.json). Users can configure manifest paths via the \customElementsManifest\ framework option or by adding a \customElements\ field to \package.json\. When the \experimentalDocgenServer\ feature is enabled, the renderer parses these manifests to automatically populate component metadata, attributes, and descriptions in the Storybook UI, while also providing clear error messages for missing or invalid manifest files.

code/renderers/web-components · high confidence

The logic for parsing Compodoc documentation JSON and extracting component arg types has been extracted into a new, environment-agnostic package at \code/lib/angular-compodoc/src\. This change introduces a browser adapter (\browser.ts\) that bridges the shared parsing logic with the browser environment (handling global state and HTML unwrapping) and a Node-safe HTML-to-text utility (\html-to-text.ts\) to replace \DOMParser\ in server-side workers. The package exposes a unified API for extracting arg types, descriptions, and component data, ensuring consistent behavior across Storybook's preview and docgen worker contexts.

code/lib/angular-compodoc/src · high confidence

The \create-storybook\ initialization process now uses a centralized \GeneratorRegistry\ to manage framework-specific generators. This new architecture replaces the previous monolithic \baseGenerator\ approach with a modular system where each framework (React, Vue, Angular, Svelte, etc.) is defined as a distinct \GeneratorModule\ containing metadata and configuration logic. The registry handles registration and retrieval of these modules, allowing the CLI to dynamically select and execute the correct generator based on the detected project type. This change improves maintainability and extensibility by decoupling framework-specific setup logic from the core initialization flow.

code/lib/create-storybook/src/generators · high confidence

The preview initialization and story selection logic has been restructured into a new class hierarchy (Preview, PreviewWithSelection, PreviewWeb) to improve modularity and testability. This change introduces a dedicated UrlStore for parsing URL parameters (id, viewMode, args, globals) and a SelectionStore to manage the current story context, replacing the previous monolithic initialization approach. The WebView component now handles layout application and HTML lang attribute injection based on story parameters, while the new architecture supports better separation of concerns for core annotations, story rendering, and docs rendering.

code/core/src/preview-api/modules/preview-web · high confidence

The @storybook/addon-a11y addon has been refactored to enhance the user experience of accessibility testing. The A11YPanel now features a redesigned UI with tabs for Violations, Passes, and Inconclusive results, and includes a 'Run accessibility scan' button for manual testing modes. The underlying a11yRunner has been updated to queue axe-core executions to prevent parallel conflicts and automatically excludes internal Storybook elements from scans. Additionally, the addon now provides deep-linking capabilities by augmenting axe results with link paths, allowing users to jump directly to specific violations or passes from the report. The panel also handles discrepancies between CLI and browser test results, displaying specific messages when results differ.

code/addons/a11y · high confidence

The Next.js Storybook plugin now includes a local TypeScript declaration file for the synchronous, Buffer-only entrypoint of the \probe-image-size\ library. This change ensures type safety for internal code that uses the synchronous probing method, avoiding the need to rely on external or incomplete type definitions for this specific usage pattern.

code/lib/vite-plugin-storybook-nextjs/src/types · high confidence

An empty index.js file has been added to the Ember template components directory. This change ensures that the build process does not fail due to missing component definitions in this specific location, acting as a placeholder to satisfy the build system's requirements.

code/frameworks/ember/template/components · high confidence

The Angular component metadata pipeline has been rewritten to extract argTypes directly from TypeScript sources using the TypeScript compiler API, removing the dependency on the Compodoc tooling. This change introduces a new in-process analyzer and \AngularComponentMetaManager\ that resolves components, decorators, and inputs via the TypeScript Language Service, ensuring accurate handling of TypeScript-specific features such as signal inputs, generic signatures, and JSDoc extraction. The new \extractArgTypesFromData\ function provides corrected logic for the props table, including proper rendering of function controls, primitive union types, and literal default values, while hiding class internals by default and resolving named-type details for interfaces and enums.

code/lib/angular-cm/src · high confidence

The Angular framework integration has been refactored to use Angular DevKit builders (\@storybook/angular:build-storybook\ and \start-storybook\) instead of the previous Webpack-based approach. This change introduces a new build schema with options like \browserTarget\, \tsConfig\, \experimentalZoneless\, and \statsJson\, and updates the client-side rendering to use \bootstrapApplication\ with support for Angular's experimental zoneless change detection. The preset and entry points have been reorganized to align with the new builder architecture, improving compatibility with modern Angular CLI projects.

code/frameworks/angular · high confidence

The Angular Storybook generator now defaults to the Vite builder in non-interactive modes (CI, --yes, or no TTY), while still prompting users to choose between Vite and Webpack in interactive sessions. It installs the @analogjs/vite-plugin-angular for Vite projects and conditionally includes @angular/platform-browser-dynamic only for Webpack setups. The generator also pins @types/node to the minimum supported Node.js major version to ensure type resolution consistency across environments and removes Compodoc integration from Vite-initiated projects.

code/lib/create-storybook/src/generators/ANGULAR · high confidence

The project now enforces linting via lint-staged on every commit and conditionally recompiles Storybook when switching branches. The pre-commit hook runs lint-staged unless the SKIP\_STORYBOOK\_GIT\_HOOKS environment variable is set. The new post-checkout hook automatically runs yarn install and compiles Storybook only when the STORYBOOK\_COMPILE\_ON\_CHECKOUT environment variable is set to true and SKIP\_STORYBOOK\_GIT\_HOOKS is not set.

.husky · high confidence

The CLI now includes automigration fixes to update accessibility and testing setups. The \addon-a11y-parameters\ fix automatically renames the deprecated \parameters.a11y.element\ property to \parameters.a11y.context\ in preview and story files. The \addon-a11y-addon-test\ fix configures \parameters.a11y.test\ in the preview file when both \@storybook/addon-a11y\ and \@storybook/addon-vitest\ are installed. Additionally, the \addon-experimental-test\ fix migrates references from the renamed \@storybook/experimental-addon-test\ to \@storybook/addon-vitest\ across project files and \package.json\.

code/lib/cli-storybook/src/automigrate/fixes · high confidence

The CLI entry point has been refactored to split execution into a dedicated index.ts for Node.js version validation and a centralized run.ts for command logic. This change introduces a new --logfile option to write debug logs to a specified file, improves error handling via a centralized failure handler that ensures logs are written before exit, and standardizes logging levels and telemetry integration across all CLI commands.

code/lib/cli-storybook/src/bin · high confidence

The \@storybook/codemod\ package is now scaffolded with standard library configuration files, including \project.json\ for NX integration, \build-config.ts\ defining entry points for transforms like \csf-2-to-3\ and \upgrade-hierarchy-separators\, and \vitest.config.ts\ for testing. A comprehensive README has been added to document the CLI usage and available migration scripts, while \tsconfig.json\ is configured to allow JavaScript files for compatibility with existing codemod scripts.

code/lib/codemod · high confidence

The codemod execution engine has been refactored to use \tinyglobby\ for file discovery and \cross-spawn\ for command execution, replacing the previous \globby\ and \execa\ dependencies. This change enables the runner to automatically detect and pass multiple file extensions (e.g., \.ts\, \.tsx\) to jscodeshift in a single invocation, improving performance and compatibility. Additionally, a critical fix ensures that filenames containing spaces are correctly escaped when passed to the underlying process, preventing the \csf-2-to-3\ codemod from failing silently on such files. The entrypoint has also been converted to ESM TypeScript.

code/lib/codemod/src · high confidence

The Storybook global setup now explicitly registers aliases for React and Next.js dependencies (including react-dom/server and test-utils) to point to Next.js's compiled versions. This ensures that Storybook components resolve the correct internal implementations of these libraries, preventing mismatches between the Storybook runtime and the Next.js environment.

code/lib/vite-plugin-storybook-nextjs/src/mocks · high confidence

The \@storybook/nextjs\ framework is now officially deprecated and scheduled for removal in Storybook 12. Users are advised to migrate to \@storybook/nextjs-vite\ using the provided automigration commands (\storybook upgrade\ or \storybook migrate nextjs-to-nextjs-vite\). The framework package itself remains present in this version, providing the necessary build configuration, Babel plugins, and export mocks (such as \next/link\, \next/image\, and \next/navigation\) to support existing Next.js projects during the transition.

code/frameworks/nextjs · high confidence

The pre-build script now generates framework lists, version maps, and export definitions more reliably. It uses rolldown to bundle and analyze global package exports, sorts framework entries to ensure deterministic output, and implements atomic file writes (via temporary files and rename) to prevent race conditions when other build steps read the generated source files concurrently.

code/core/scripts · high confidence

The docgen harness in the compare directory now enforces stricter validation of documentation snapshots. For argTypes, it detects lost arguments, descriptions, default values, and type fidelity (including specific handling for legacy Angular inventing NaN/false defaults), while ignoring cosmetic changes like description content or added arguments. For snippets, it parses root elements and attributes to ensure structural equality, catching lost attributes or changed root tags. The harness also includes a robust snapshot parser that preserves exact byte-round-trip fidelity, handling edge cases like unescaped quotes and NaN values, and integrates with Vitest to gate recordings against regressions.

code/lib/docgen-harness/src/compare · high confidence

The ESLint plugin's internal utility layer has been restructured to improve reliability and reduce external dependencies. A new \ast.ts\ module centralizes TypeScript AST node type checks, while \create-storybook-rule.ts\ standardizes rule creation using \@typescript-eslint/utils\. The plugin now bundles CSF (Component Story Format) helpers directly rather than importing them from Storybook core, allowing the plugin to load independently without requiring a full Storybook installation. Additionally, \index.ts\ includes compatibility logic to support both ESLint v8.x and v9.x APIs, ensuring consistent behavior across different ESLint versions.

code/lib/eslint-plugin/src/utils · high confidence

The build and maintenance scripts for the ESLint plugin have been migrated from CommonJS to ES modules (ESM). This change introduces a new \generate-rule\ CLI that scaffolds new rule implementations, tests, and documentation, and replaces the previous configuration update logic with a suite of ESM scripts (\update-all\, \update-configs\, \update-lib-flat-configs\, etc.) that regenerate plugin configs, the main index, and the README rules list from metadata. Users benefit from a modernized, ESM-native development workflow for extending the plugin.

code/lib/eslint-plugin/scripts · high confidence

The Storybook preset for Ember has been restructured to handle HBS template compilation via Babel plugins (babel-plugin-htmlbars-inline-precompile and babel-plugin-ember-modules-api-polyfill) instead of the previous approach. This change introduces a new server-side preset (framework-preset-babel-ember) that configures the Webpack build to process Ember templates, and updates the client-side preview to render components using a dedicated \renderToCanvas\ function. The framework now also supports injecting polyfills into the template compiler via the \framework.options.polyfills\ configuration in main.js.

code/frameworks/ember · high confidence

The logic for parsing Compodoc's \documentation.json\ into Storybook argTypes has been extracted into a new, standalone \@storybook/angular-compodoc\ package. This centralizes the conversion logic previously duplicated in \@storybook/angular\ and \@storybook/angular-vite\, ensuring both call sites remain in sync. The package includes a browser adapter for preview-side usage and explicitly handles Angular's \model()\ quirk (where inputs and outputs share a name) by synthesizing the correct \fooChange\ output. This change is part of a broader refactoring to isolate the analyzer and prepare for the eventual deprecation of the Compodoc pipeline in Storybook 11.

code/lib/angular-compodoc · high confidence

The Storybook codemod helpers for migrating to CSF Factories have been enhanced to handle more complex configuration formats and clean up legacy code. The \config-to-csf-factory\ helper now robustly wraps \main\ and \preview\ configurations using \defineMain\ and \definePreview\, correctly handling mixed named and default exports, TypeScript \satisfies\/\as\ syntaxes, and preserving leading comments. It also prevents duplicate imports and skips already-transformed files. Additionally, a new \remove-unused-types\ helper automatically removes unused Storybook type imports (like \Meta\, \StoryObj\) and type aliases that reference them, ensuring migrated files remain clean.

code/lib/cli-storybook/src/codemod/helpers · high confidence

The plugin now includes robust utilities for handling Next.js configuration, specifically recovering from raw config cache issues and omitting the Turbopack-only Rust React Compiler flag when running under Vite. It also adds helpers for loading environment variables, eagerly initializing SWC bindings, finding Next.js directory structures with fallbacks, and resolving the closest package.json file across parent directories. Additionally, a new base64 URL encoding utility is provided for shared use across font and image plugins.

code/lib/vite-plugin-storybook-nextjs/src/utils · high confidence

The React renderer's documentation generation (docgen) now correctly handles a wider variety of component patterns, ensuring accurate prop tables and controls in the Docs panel. This update adds support for TypeScript union types (e.g., \React.ReactNode \| string\), imported generic types, and explicit \displayName\ overrides. It also improves parsing of JavaScript PropTypes, including \PropTypes.oneOf\ enums, nested \PropTypes.shape\ structures, and properties defined via static class fields or Higher-Order Components (HOCs). Additionally, \React.forwardRef\ components and default exports are now processed more reliably, providing consistent documentation regardless of how the component is structured.

code/renderers/react/template/stories/docgen-components · high confidence

The documentation generation plugin now correctly identifies the actual name of React components (such as class declarations, function declarations, arrow functions, and forward refs) instead of relying solely on the \displayName\ property. This ensures that the generated documentation is stored and displayed under the component's true identifier, fixing issues where names were incorrectly derived from display names.

code/frameworks/react-vite/src/plugins/docgen-handlers · high confidence

The internal Storybook instance has been reconfigured to serve as a comprehensive showcase for the framework's core, addons, and renderer capabilities. The main configuration now explicitly imports and registers a wide array of addons—including Vitest, accessibility, themes, onboarding, MCP, and pseudo-states—and organizes stories from core templates, manager/preview APIs, and various addon directories into a structured sidebar. The preview layer has been enhanced to support advanced testing and development workflows: it integrates the Vitest interactivity API for browser-mode testing, registers custom matchers (such as \toHaveLiveRegion\), and implements module auto-mocking for libraries like \lodash-es\ and \uuid\. Additionally, a new open-service debug service has been introduced, which exercises server-side service registration, queries, commands, and static snapshot generation, accessible via the \STORYBOOK\_OPEN\_SERVICE\_DEBUG\ environment flag. The manager UI has also been updated to improve sidebar labeling and include open-service sync test demos.

code/.storybook · high confidence

The Svelte renderer now includes new static components and utilities to support Svelte 5's run-time compilation model. This adds a DecoratorHandler to manage component wrapping and filter out internal docgen event props, a PreviewRender component to handle story execution and error boundaries, an AddStorybookIdDecorator for consistent ID assignment, and a createReactiveProps helper to ensure proper reactivity when passing props to Svelte 5 components.

code/renderers/svelte/static · high confidence

A new internal library, \angular-cm\, has been added to provide in-process Angular documentation generation. It reads component metadata directly from TypeScript sources using a warm LanguageService and emits Compodoc-shaped records, which are converted into argTypes. This serves as a successor to the deleted \@storybook/angular-compodoc\ pipeline, bundling into \@storybook/angular-vite\ to replace the external Compodoc dependency. The new analyzer inherits specific limitations from its predecessor, such as handling issues with numeric enums and skipped inherited inputs/outputs from compiled libraries.

code/lib/angular-cm · high confidence

The Links addon has been restructured with a new source layout and build configuration, introducing the \hrefToSync\ utility for generating immediate story URLs (enabling native browser link behaviors like middle-click) alongside the existing \hrefTo\ and \linkTo\ functions. The React-specific \LinkTo\ component is now explicitly exported from a dedicated subpath (\@storybook/addon-links/react\), and the addon's test suite has been migrated to Vitest with updated mocks and environment settings.

code/addons/links · high confidence

The sandbox generation scripts now use Yarn 4 instead of Yarn 1 or classic Yarn. To prevent installing packages that are too new for the target framework, the generation process enforces a 7-day minimum age gate on npm packages during installation. This ensures that sandboxes are scaffolded with stable, sufficiently aged dependencies.

scripts · high confidence

The Storybook initialization workflow has been refactored from a monolithic structure into a series of distinct, modular command classes (AddonConfigurationCommand, DependencyInstallationCommand, FinalizationCommand, FrameworkDetectionCommand, GeneratorExecutionCommand, and PreflightCheckCommand). This change improves maintainability and readability by separating concerns: framework and builder detection, dependency collection and installation, addon configuration (including specific postinstall logic for Vitest and a11y), and finalization steps like .gitignore updates and success messaging are now handled by their own dedicated components. The refactoring also introduces a centralized ErrorCollector for better error handling and telemetry, and updates the user-facing output to provide clearer, more structured feedback during the setup process.

code/lib/create-storybook/src/commands · high confidence

The Storybook CLI now prevents upgrades when projects use unsupported or deprecated setups, ensuring a smoother migration path. It blocks upgrades if the Node.js version is below 22.12, if major framework dependencies (React, Next.js, Angular, Preact, Svelte, Vue, Vite) are below their new minimums, or if legacy Webpack 5 framework packages are installed. It also specifically blocks Create React App projects, requires Vitest 4 when using the experimental test addon, and prevents upgrades if the deprecated React \legacyRootApi\ option is still present in the configuration. Additionally, the CLI now warns against skipping major versions (e.g., jumping from v8 to v10) and blocks downgrades entirely.

code/lib/cli-storybook/src/autoblock · high confidence

The Storybook CLI initialization process has been refactored to use a modular, command-based architecture. A new \DependencyCollector\ class now aggregates all dependencies before a single installation step, improving reliability and allowing for conflict detection. The main \initiate\ entry point orchestrates this via distinct execution steps (preflight, project detection, framework detection, user preferences, generator execution, dependency installation, addon configuration, and finalization). Additionally, scaffolding for new empty projects now supports React, Next.js, Vue, Angular, and Lit via Vite, with specific create scripts for npm, yarn, and pnpm.

code/lib/create-storybook/src · high confidence

The \core-webpack\ library now includes a new \importPipeline\ mechanism that serializes module imports to prevent Webpack from triggering concurrent compilations, which can cause issues with Hot Module Replacement. It also introduces \checkWebpackVersion\ to warn users if their installed Webpack version does not match the expected specifier, and provides updated \toImportFn\ and \toRequireContext\ utilities that generate import functions with improved path matching and \node\_modules\ exclusion logic. Additionally, \mergeConfigs\ has been refined to handle Webpack configuration merging with specific logic for plugins, rules, and resolve fields, and \loadCustomWebpackConfig\ now supports async loading of custom configuration files.

code/lib/core-webpack/src · high confidence

The automigration system now includes a set of new helper modules to improve configuration handling and package management during upgrades. The \consolidated-packages.ts\ module provides a mapping of deprecated Storybook packages to their new consolidated locations (e.g., \@storybook/channels\ to \storybook/internal/channels\), enabling the CLI to correctly update import paths. The \mainConfigFile.ts\ module introduces robust helpers for reading and writing the main Storybook configuration, including functions to extract framework, builder, and renderer names from both string and object-based config formats, as well as utilities to detect ESM vs. CommonJS usage and \\_\_dirname\ patterns. Additionally, \config-object.ts\ adds validation for configuration mutations, \logMigrationSummary.ts\ formats and displays migration results to users, \versionBoundary.ts\ handles semver comparisons for upgrade logic, and \testing-helpers.ts\ provides mocks for unit tests. These changes enhance the reliability and clarity of the \storybook automigrate\ command.

code/lib/cli-storybook/src/automigrate/helpers · high confidence

The Angular component meta analyzer has been rewritten as an in-process TypeScript analysis tool, removing the previous dependency on the external angular-compodoc binary. This change improves reliability and performance by analyzing Angular source files directly using a real TypeScript program, enabling accurate resolution of generic type parameters, input transforms, and decorator aliases (including those re-exported through barrel files). The analyzer now correctly handles complex inheritance scenarios, resolves const-referenced flags, and provides precise metadata for the props table, such as distinguishing required inputs and rendering generic type parameters.

code/lib/angular-cm/src/analyzer · high confidence

This change introduces new core server assets that define the HTML structure and configuration for the Storybook preview environment. It adds a TypeScript configuration (\addon.tsconfig.json\) to enforce React JSX settings, an AppleScript (\openBrowser.applescript\) to improve browser launching logic by reusing existing Chrome tabs, and new HTML templates (\base-preview-body.html\, \base-preview-head.html\, \template.ejs\) that establish the default layout, styling, and script loading for the preview iframe. These templates ensure consistent rendering of the preview UI, including error displays and loading states, while the AppleScript enhances the developer experience on macOS.

code/core/assets/server · high confidence

The code workspace now includes a dedicated Playwright configuration for end-to-end testing, a Vitest setup file with custom matchers and console mocking, and a Storybook-specific Vitest configuration. Additionally, linting rules have been updated via a new .oxlintrc.json file, and TypeScript configuration has been adjusted to support modern module resolution and strict type checking.

code · high confidence

The Next.js environment plugin now dynamically loads the correct environment definition logic based on the installed Next.js version, supporting both pre-15.4 and 15.4+ APIs to ensure compatibility. It also explicitly removes the \\_\_NEXT\_IMAGE\_OPTS\ environment variable from the Vite define configuration to prevent serialization issues when running tests in Vitest, while configuring the test optimizer to include Next.js dependencies.

code/lib/vite-plugin-storybook-nextjs/src/plugins/next-env · high confidence

The Next.js generator in create-storybook has been refactored to intelligently detect whether a project uses custom Webpack or Babel configurations. If such configurations are found, the generator now prompts the user to choose between the Vite or Webpack 5 builder, warning that Vite may not be compatible with custom setups. This improves the initialization experience by ensuring the selected builder aligns with the project's existing build tooling.

code/lib/create-storybook/src/generators/NEXTJS · high confidence

This update to the onboarding addon addresses several user-facing issues. It fixes z-index conflicts in modal elements and adds a wrapper to ensure tooltips render correctly without being obscured. The addon is now compatible with Storybook 8 selectors, and the confetti overlay no longer intercepts pointer events, allowing users to interact with underlying UI elements. Additionally, the guided tour logic has been refined to prevent returning to the splash screen and to ensure checklist tasks are not skipped when closing tooltips.

code/addons/onboarding · high confidence

The Preact CLI templates have been updated to align with Storybook 7, featuring a migration to the CSF3 story format and the use of the \storybook/test\ package for interaction testing and action spying. The generated components (Button, Header, Page) now include explicit \autodocs\ tags for automatic documentation generation, and the Page component's interaction test has been refactored to use \userEvent\ and \within\ for more robust component testing. Additionally, the ESLint configuration has been adjusted to disable the React JSX scope rule, which is unnecessary for Preact projects.

code/renderers/preact/template/cli · high confidence

The React generator in create-storybook has been refactored to use a new module definition pattern. It now explicitly declares the project type and renderer via metadata and returns a structured configuration object from its configure function. This object specifies extra packages to install (such as prop-types for JavaScript projects) and defines the webpack compiler strategy (using SWC for Webpack 5 builders), providing a more consistent and explicit configuration interface for React-based Storybook setups.

code/lib/create-storybook/src/generators/REACT · high confidence

The Storybook initialization CLI has been rewritten to use Commander for argument parsing, introducing a split between modern and legacy command paths based on flag validation. Users now have access to new flags including --features and --no-features to control Storybook capabilities, --agent/--no-agent to force or disable AI agent mode, and --logfile to specify custom debug log output paths. The CLI also enforces a minimum Node.js version check before execution and supports forcing specific package managers and builders via dedicated options.

code/lib/create-storybook/src/bin · high confidence

The ESLint plugin's build and documentation scripts have been migrated from CommonJS to ES modules, with the source code remaining ESM. This change introduces a new set of utility modules in the scripts/utils directory to manage rule categorization, documentation updates, and configuration formatting. Documentation generation now utilizes the oxfmt library to format Markdown files, automatically updating the main ESLint plugin README and individual rule documentation pages with current rule lists and category inclusions. The scripts also handle the mapping of rules to specific configurations (such as CSF, Recommended, and CSF-Strict) and manage linting configuration for Storybook-related files.

code/lib/eslint-plugin/scripts/utils · high confidence

The Ember and Vue 3 project generators have been rewritten to use a new modular structure that explicitly declares framework, renderer, and builder metadata. For Ember, the generator now specifies Webpack 5 as the builder override and returns a static directory configuration. For Vue 3, the generator conditionally includes specific packages (vue-loader and @vue/compiler-sfc) and configures the SWC webpack compiler only when Webpack 5 is selected, ensuring that dependencies and build settings are tailored to the chosen builder.

code/lib/create-storybook/src/generators/EMBER, code/lib/create-storybook/src/generators/VUE3 · high confidence

The Preact, Server, and Web Components generators have been restructured to explicitly declare their project type, renderer, and builder metadata via a new \defineGeneratorModule\ interface. This change replaces previous import patterns with \storybook/internal\ modules and standardizes how configuration details (such as webpack compilers and extra packages) are returned, improving consistency and usability in Storybook configuration generation.

code/lib/create-storybook/src/generators/PREACT, code/lib/create-storybook/src/generators/SERVER, code/lib/create-storybook/src/generators/WEB-COMPONENTS · medium confidence

The preview API store modules have been refactored to improve how story arguments and global settings are managed. A new ArgsStore class now handles argument persistence, applying deltas when initial arguments change and ensuring type safety via mapArgsToTypes. GlobalsStore has been updated to filter allowed globals and handle updates from persisted state. StoryIndexStore now uses memoization for import path lookups and includes specific logic to handle story specifiers correctly. Additionally, core annotations are now composed exactly once for CSF4 previews, preventing duplication. These changes enhance the reliability and performance of the preview API's internal state management.

code/core/src/preview-api/modules/store · high confidence

The addon-links template stories have been refactored to be renderer-agnostic, replacing renderer-specific implementations with generic HTML and Button components. The stories now use the \play\ function instead of \render\ for dynamic link generation and consistently apply \disableSnapshot\ for Chromatic configuration. New examples demonstrate the \hrefTo\, \hrefToSync\, and \linkTo\ functions, including support for callback-based navigation and MDX/autodocs linking.

code/addons/links/template · high confidence

Storybook 11 now requires Node.js 22.12 or later. This change ensures that consumers of the framework are running on a supported and stable Node.js version, aligning with modern JavaScript features and performance improvements available in the latest LTS releases.

code/core · high confidence

The Next.js SWC plugin in Storybook now correctly detects whether it is running in a browser context (Storybook preview) or a server context (Vitest). Previously, the plugin could incorrectly treat Storybook's browser environment as a server environment, causing SWC to fold expressions like \typeof window\ to \undefined\. The new logic checks for the presence of a \test\ configuration field to identify Vitest runs; if absent, it defaults to browser mode, ensuring that client-side code is transformed correctly in Storybook previews while server-side code remains appropriate for testing.

code/lib/vite-plugin-storybook-nextjs/src/plugins/next-swc · high confidence

The SWC utility module in the Vite Storybook plugin has been rewritten to mirror Next.js's internal compilation pipeline, introducing support for Next.js v16.2 and Next.js font loaders. This change ensures that Storybook components are transformed using the same compiler options as the Next.js application, including correct handling of CSS-in-JS libraries (Emotion, Styled Components), JSX runtime settings, and module types. It also adds a compatibility layer for the \getSupportedBrowsers\ API, which adapts to the import path changes introduced in Next.js v16.2, ensuring consistent build behavior across supported Next.js versions.

code/lib/vite-plugin-storybook-nextjs/src/utils/swc · high confidence

Storybook 11 now enforces a minimum Node.js version of 22.12. Users running older Node.js versions will be unable to use this release and must upgrade their runtime environment to proceed.

(repo-wide) · high confidence

The Storybook CLI package is now structured with dedicated configuration files for the build system (build-config.ts), the NX monorepo workspace (project.json), TypeScript compilation (tsconfig.json), and the Vitest test runner (vitest.config.ts). Additionally, a new README.md has been added to document the CLI commands (init, add, info, upgrade, migrate) and expose core APIs for addon authors, including components, theming utilities, and preview/manager APIs.

code/lib/cli-storybook · high confidence

The Storybook Doctor diagnostic tool has been expanded to provide more comprehensive health checks for your project. It now identifies incompatible Storybook packages (including those relying on legacy consolidated packages or outdated core dependencies), warns about mismatching versions between the Storybook CLI and framework packages, and flags duplicated dependencies that may cause unexpected behavior. These checks help users proactively resolve configuration issues before they lead to broken installations.

code/lib/cli-storybook/src/doctor · high confidence

The Svelte CLI templates (Button, Header, Page) have been rewritten to use Svelte 5 syntax, replacing legacy reactivity patterns with the new $props() and $state() runes. This change requires Svelte 5 or later; projects using older Svelte versions will need to upgrade to use these generated templates.

code/renderers/svelte/template/cli/js · high confidence

The Svelte project generator in create-storybook has been updated to automatically include the @storybook/addon-svelte-csf addon when scaffolding a new Svelte application. This ensures that generated projects are configured with the necessary component-story-format support for Svelte out of the box, replacing previous configuration methods.

code/lib/create-storybook/src/generators/SVELTE · high confidence

The Svelte renderer has been significantly refactored to support Svelte 5, migrating internal components and test fixtures to use Svelte 5 runes syntax (e.g., \$props()\, \$derived\) and the new \createRoot\ rendering API. The build system has been updated to use NX and Vitest, with entry points reorganized into \entry-preview\ and \entry-preview-docs\. Additionally, the renderer now includes a new \composeStories\ API for portable stories, enhanced decorator handling via \DecoratorHandler\, and improved source code generation that excludes decorators and handles Svelte-specific features like slots and runes.

code/renderers/svelte · high confidence

The SvelteKit generator in create-storybook has been refactored to define its configuration via a structured metadata object (specifying project type, renderer, framework, and builder) and a dedicated configure function. This change explicitly registers the @storybook/addon-svelte-csf addon and defines supported file extensions (js, ts, svelte) for SvelteKit projects, replacing previous implicit or bundled logic with a clearer, modular generator interface.

code/lib/create-storybook/src/generators/SVELTEKIT · high confidence

The Angular CLI-generated templates (button, header, page) now use Angular standalone components instead of NgModules, simplifying the project structure. Additionally, the Storybook story files have been updated to use the new \storybook/test\ package for interaction testing and action spying, replacing the previous \@storybook/test\ import path and aligning with modern Storybook practices.

code/frameworks/angular/template/cli · high confidence

The Angular Storybook templates now include a dedicated \.storybook/tsconfig.json\ that extends the application or library configuration and sets \moduleResolution\ to \bundler\. This change ensures that Storybook correctly resolves module dependencies and includes component sources in the TypeScript compilation context, improving compatibility with modern Angular build setups.

code/lib/create-storybook/templates/angular · high confidence

The Ember CLI template has been updated to align with Storybook 7 standards. The generated story file now imports actions and test utilities from the new scoped paths (\storybook/actions\ and \storybook/test\) instead of the legacy \@storybook/addon-actions\ and \@storybook/test\ packages. Additionally, the template includes explicit action handling in the CLI header story and ensures autodocs tags are correctly applied for automatic documentation generation.

code/frameworks/ember/template/cli · high confidence

The JavaScript CLI templates for Button, Header, and Page components have been updated to align with Storybook 7. Stories now use the \storybook/test\ package for utilities like \fn\, \expect\, and \userEvent\, and the \docsPage\ tag has been renamed to \autodocs\ to enable automatic documentation generation. Additionally, the Page component's interaction test has been migrated to the CSF3 \play\ function format, replacing the previous \interaction test\ approach with explicit \await\ calls for better test reliability.

code/renderers/html/template/cli/js · high confidence

The Next.js CLI templates have been updated to use TypeScript 4.9 and align with Storybook 7 documentation. The generated component stories (Button, Header, Page) now utilize the \satisfies\ operator for type-safe meta definitions and include the \autodocs\ tag for automatic documentation generation. Additionally, the Page template now includes an interaction test using \storybook/test\ to verify user flows, and the configuration documentation has been updated with correct links and UTM tracking parameters.

code/frameworks/nextjs/template/cli/ts · high confidence

The JavaScript CLI templates for Next.js have been updated to align with Storybook 7.0 standards. The generated stories now use the \storybook/test\ package (importing \fn\, \expect\, \userEvent\, and \within\) for interaction testing and action spying, replacing previous testing utilities. The \Button\ component template now utilizes Next.js's built-in \styled-jsx\ for scoped styling instead of external CSS modules or global styles. Additionally, the \Page\ story includes a concrete interaction test (\play\ function) that verifies the login/logout flow, and the \Configure.mdx\ documentation page has been refreshed with updated links and a new \ref=configure\ tracking parameter.

code/frameworks/nextjs/template/cli/js · high confidence

The React + Webpack 5 template now includes a \.eslintrc.json\ file that disables the \import/extensions\ rule, and provides parallel JavaScript and TypeScript versions of the example components (Button, Header, Page) and their stories. The TypeScript files use \@storybook/react-webpack5\ types and \satisfies\ for type safety, while the JavaScript files use PropTypes. The Page story now includes an interaction test using \storybook/test\ utilities to verify login/logout behavior.

code/frameworks/react-webpack5/template · high confidence

The React CLI templates have been updated to align with Storybook 7, replacing the legacy \docsPage\ tag with the new \autodocs\ tag to enable automatic documentation generation. The templates now use TypeScript (\.ts\/\.tsx\) instead of TypeScript with JSX (\.tsx\ previously used for stories), and the \React.VFC\ type has been replaced with \React.FC\ to address deprecation warnings. These changes affect the generated Button, Header, and Page components and their corresponding stories, providing a modern, type-safe starting point for new projects.

code/renderers/react/template/cli/ts · high confidence

The React CLI starter templates (Button, Header, Page) have been updated to align with Storybook 7.0 conventions. Component stories now use the \autodocs\ tag for automatic documentation generation, import interaction testing utilities from \storybook/test\ instead of the legacy \@storybook/test\, and utilize the \fn\ helper for mocking actions. Additionally, the Page component includes an interaction test demonstrating user login/logout flows using the modern \userEvent\ and \expect\ APIs.

code/renderers/react/template/cli/js · high confidence

The React renderer's template stories have been refreshed to include comprehensive examples for CSF1, CSF2, and the new CSF4 format (including MDX integration), alongside dedicated stories for decorators, hooks, error handling, and argument types in both JavaScript and TypeScript. The template now demonstrates advanced usage patterns such as using \useArgs\ and \useParameter\ within stories, mounting components in play functions, and running inline tests via the \test\ API, providing users with up-to-date reference implementations for modern Storybook features.

code/renderers/react/template/stories · high confidence

The Svelte CLI templates have been migrated to TypeScript and updated to use Svelte 5 syntax, including the use of \$props()\ for component props and \$state()\/\$derived()\ for reactive state. The generated Button component now defaults the label to an empty string, and the story files utilize the \@storybook/addon-svelte-csf\ \defineMeta\ API with inferred argTypes, replacing the previous render-function approach.

code/renderers/svelte/template/cli/ts · high confidence

The SvelteKit CLI template now uses Svelte 5 features, specifically the $props and $state runes, in its core components (Button, Header, Page). Additionally, the Storybook integration has been updated to use the @storybook/addon-svelte-csf format for defining stories, replacing the previous approach.

code/frameworks/sveltekit/template/cli/ts · high confidence

The TypeScript CLI templates for Button, Header, and Page components have been updated to align with Storybook 7 standards. The story definitions now use the Component Story Format 3 (CSF3) syntax and include the 'autodocs' tag to enable automatic documentation generation. Additionally, the Page template has been enhanced with an interaction test in the 'LoggedIn' story to verify login/logout behavior, and the Header template now supports user state management for displaying logged-in or logged-out UI states.

code/renderers/html/template/cli/ts · high confidence

The TypeScript templates for the web-components CLI have been migrated to Storybook 7, adopting the Component Story Format (CSF3) and enabling autodocs via the 'autodocs' tag on Button and Header stories. The underlying rendering library has been upgraded from lit-html@2 to lit@2, and the default backgroundColor argument has been removed from the Button component. These changes affect the generated Button, Header, and Page components and their corresponding story files.

code/renderers/web-components/template/cli/ts · high confidence

The JavaScript CLI templates for the Web Components renderer have been updated to use the \lit\ library instead of \lit-html\, and the generated Storybook stories now follow Storybook 7 conventions by importing \fn\ from \storybook/test\ and using the \autodocs\ tag. This change affects the default Button, Header, and Page components generated for new projects, ensuring they are compatible with the latest Storybook documentation and testing APIs.

code/renderers/web-components/template/cli/js · high confidence

The common renderer assets for new Storybook projects have been refreshed. The Configure.mdx template now includes UTM tracking parameters on all external documentation links to improve analytics, and the starter component styles (button, header, page) have been updated to improve color contrast and accessibility. Additionally, new SVG assets for social links (GitHub, Discord, YouTube) and feature icons (Accessibility, Tutorials) have been added to the common assets folder.

code/lib/create-storybook/rendererAssets/common · high confidence

The Vite builder's iframe template has been updated to include a JavaScript error handler that detects when the Storybook preview application fails to load. If the application fails to load and the server is running on a non-localhost hostname in development mode, the user will see a clear error message in the console and on the page itself, along with links to documentation explaining how to configure the \--host\ flag or Vite's \allowedHosts\ to resolve the issue. This improves the debugging experience for users accessing Storybook from remote hosts or specific network configurations.

code/builders/builder-vite/input · high confidence

The Vite builder has been completely rewritten to support Storybook 8, introducing a modern iframe script generation system that uses virtual modules for story imports and project annotations. This change brings improved Hot Module Replacement (HMR) handling, a new headless change-detection adapter for CLI usage, and stricter enforcement of build output directories to prevent conflicts with third-party plugins. The builder now requires Vite 5.0.0 or higher and drops support for Vite 4.

code/builders/builder-vite · high confidence

The Vitest addon template stories have been updated to reference components via the global \\_\_TEMPLATE\COMPONENTS\\\ object (e.g., \\\_TEMPLATE\COMPONENTS\\_.Form\) instead of direct imports, and now import testing utilities like \expect\, \fireEvent\, and \userEvent\ from \storybook/test\. The template also demonstrates explicit \step\ usage for test organization, includes examples for handling async waits and loaders, and configures Chromatic snapshots to be disabled in the unhandled-errors story.

code/addons/vitest/template · high confidence

The JavaScript CLI templates for Vue 3 have been updated to use the Composition API (via \setup\) instead of the Options API, and the generated Storybook stories now import utilities from \storybook/test\ (such as \fn\, \expect\, and \userEvent\) rather than the legacy \@storybook/addon-interactions\. This change aligns the starter project with modern Vue 3 patterns and Storybook 7's recommended testing approach, providing users with up-to-date examples for component development and interaction testing.

code/renderers/vue3/template/cli/js · high confidence

The Webpack5 preset for React has replaced the previous Babel-based documentation generation with a dedicated Webpack loader (\react-docgen-loader\). This change makes \react-docgen\ the default engine for extracting component metadata, improving compatibility with TypeScript path aliases and ES module resolution. Users who previously relied on \react-docgen-typescript\ for detailed TypeScript prop extraction can still opt in via the \typescript.reactDocgen\ configuration, while those using the new experimental docgen service will see no build-time injection, allowing the service to handle metadata merging.

code/presets/react-webpack · high confidence

The Webpack5 builder templates have been updated to remove the Handlebars dependency in favor of EJS, embedding Nunito Sans font-face definitions directly into the HTML preview template instead of relying on an external CSS file. Additionally, the JavaScript entry point now imports from 'storybook/preview-api' and 'storybook/internal/channels' directly, and includes logic to handle HMR events for story and annotation updates.

code/builders/builder-webpack5/templates · high confidence

The monorepo has been upgraded to Yarn v4.18.0, introducing the new release binary. Several dependency patches have been applied to fix specific behaviors: \@7rulnik/react-element-to-jsx-string\ now correctly renders boolean props set to false in source snippets; \@testing-library/user-event\ ensures the \window\ object is explicitly passed to event initializers; \@types/babel\_\_traverse\ types are aligned with \@babel/types\; \@vercel/agent-eval\ pins the playground Next.js version to prevent runtime crashes, supports Anthropic API keys for classification, and preserves binary file integrity during agent evaluations; and \@vitest/expect\ uses a distinct symbol for Jest matchers to prevent conflicts when used alongside Storybook.

.yarn · high confidence

The template now includes \next-env.d.ts\ to satisfy Next.js 13.2.0+ requirements for dynamic type references in \next/navigation\, and adds \typings.d.ts\ to declare types for SVG, AVIF, and PNG assets, ensuring the project compiles without type errors on newer Next.js versions.

code/frameworks/nextjs/template · high confidence

The Vite builder's mocker-injection plugin now uses a relative path (./vite-inject-mocker-entry.js) for the injected script tag during production builds, while retaining the absolute path (/vite-inject-mocker-entry.js) in development. This change ensures that Storybook artifacts load correctly when hosted at non-root paths, such as GitHub Pages subdirectories, by preventing broken script references caused by absolute URL resolution in production.

code/builders/builder-vite/src/plugins/vite-inject-mocker · high confidence

The Angular DocDirective template now correctly imports ElementRef as a value rather than a type-only import. This change prevents runtime errors caused by TypeScript stripping the type-only import, ensuring that dependency injection works as expected when the directive is used in stories.

code/frameworks/angular/template/stories/argTypes/doc-directive · high confidence

A new post-build script has been added to correct the generated TypeScript declaration files (index.d.ts) for the addon-links package. This script patches incorrect internal import paths (changing 'lib/preview-api' to 'storybook/preview-api') that were causing type resolution issues, ensuring that consumers of the addon receive valid type definitions.

code/addons/links/scripts · high confidence

The TypeScript Storybook template for React Native Web has been updated to address accessibility and linting issues. The Button component now includes an accessibility role, and the Page component uses semantic roles for headings and links. Additionally, the template files have been standardized to use the .tsx extension, and Storybook story definitions have been aligned with other templates to ensure consistency.

code/frameworks/react-native-web-vite/template/cli/ts · high confidence

Add Angular docgen harness tests for legacy and new extraction paths; Add Storybook stories for TanStack React Router context injection and layout rendering; Add Svelte docgen harness test fixtures for runes and legacy patterns; Add core template stories and mocks for testing Storybook internals; Add web-component test fixtures and documentation snapshots; Added Angular component test fixtures for the meta analyzer; Added mock implementation for Node.js fs/promises API; Added reference-type-props test fixtures for Vue 3 component meta generation; Added regression tests for Vue 3 unicode defaults in component meta; Added snapshot tests for Webpack config merging; Added test fixtures for Storybook main configuration migration scenarios; Added test helper utilities for CLI integration testing; Added test mocks for file assets, filesystem APIs, and Storybook decorators; Added tests for Angular story-docs payload generation; Added tests for CLI help and command suggestion output; Added tests for ESLint plugin bundling and compatibility; Added tests for Storybook codemod transforms; Added tests for Vue 3 story-docs payload generation; Angular docgen harness adds comprehensive story-shape fixtures and snapshots; Angular docgen harness adds test fixtures for complex component patterns; Angular story-docs snippet generation test fixtures added; Expanded Vue 3 docgen test fixtures for complex prop patterns; Introduce private docgen-harness for cross-framework baseline testing; New E2E test suite for Storybook addons and core features; New internal E2E test suite for Storybook UI; React renderer integration tests and portable stories support; Svelte docgen harness baseline tests for legacy and server-side paths; Vue 3 docgen harness adds live fixtures and new baseline test suites; Vue 3 story-docs harness: expanded test fixtures for snippet generation.

This change updates dependencies and version metadata across 124 manifests in the monorepo. The diffs primarily consist of lockfile regenerations, version bumps for internal packages (e.g., root, peer deps, version.ts/json), and updates to various external dependencies such as Angular, React, ESLint, and build tools. These updates ensure compatibility with newer framework versions and maintain the integrity of the dependency tree.

(dependencies) · high confidence

An empty directory structure has been created at code/frameworks/ember/template/stories to serve as a container for future storybook stories related to Ember templates. This change establishes the location for component documentation but does not introduce any new user-facing functionality or behavior at this time.

code/frameworks/ember/template/stories · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 42 → 57 (+15.4)
• Rubric changed (rubric-2026.08.15 → rubric-2026.09.15) — scores are not directly comparable.

• Code Health 78 → 76 (-2.5)
• Architecture 57 (new)
• Maturity 65 → 78 (+13.3)
• Readiness 27 → 57 (+30.1)
• Security 45 → 57 (+11.9)
• Accessibility 55 (new)

• (anonymous) (cognitive 20) (code/.storybook/bench/bundle-analyzer/index.js)
• Critical CVE: [GHSA redacted] (yarn.lock)
• Critical CVE: [GHSA redacted] (yarn.lock)
• Critical CVE: [GHSA redacted] (yarn.lock)
• Critical CVE: [GHSA redacted] (yarn.lock)
• Critical CVE: [GHSA redacted] (test-storybooks/mcp/yarn.lock)
• Critical CVE: [GHSA redacted] (yarn.lock)
• Critical CVE: [GHSA redacted] (yarn.lock)
• Critical CVE: [GHSA redacted] (test-storybooks/mcp/yarn.lock)
• Critical CVE: [GHSA redacted] (yarn.lock)
• Critical CVE: [GHSA redacted] (yarn.lock)
• Critical CVE: [GHSA redacted] (yarn.lock)
• Critical CVE: [GHSA redacted] (test-storybooks/mcp/yarn.lock)
• Critical CVE: [GHSA redacted] (yarn.lock)
• Critical CVE: [GHSA redacted] (yarn.lock)
• Critical CVE: [GHSA redacted] (yarn.lock)
• Dimension evaluation failed
• FileTooLong: bundle-analyzer/index.js (code/.storybook/bench/bundle-analyzer/index.js)
• High CVE: [GHSA redacted] (yarn.lock)
• High CVE: [GHSA redacted] (yarn.lock)
• …and 86 more

• A11YPanel.A11YPanel (cognitive 17) (code/addons/a11y/src/components/A11YPanel.tsx)
• A11YPanel.A11YPanel (cyclomatic 18) (code/addons/a11y/src/components/A11YPanel.tsx)
• A11yContext.A11yContextProvider (cognitive 45) (code/addons/a11y/src/components/A11yContext.tsx)
• A11yContext.A11yContextProvider (cyclomatic 41) (code/addons/a11y/src/components/A11yContext.tsx)
• AddonVitestService.installPlaywright (cognitive 16) (code/core/src/cli/AddonVitestService.ts)
• AliasNormalizer.normalize (cognitive 22) (code/core/src/shared/open-service/services/module-graph/engine/dependency-graph/resolver-factory.ts)
• AngularComponentMetaProject.extractViaModuleExports (cognitive 16) (code/lib/angular-cm/src/project.ts)
• ArgsTable.ArgsTable (cognitive 21) (code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx)
• ArgsTable.ArgsTable (cyclomatic 26) (code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx)
• Banned license: rollup-plugin-dts
• Button.Button (cognitive 19) (code/core/src/components/components/Button/Button.tsx)
• Button.Button (cyclomatic 21) (code/core/src/components/components/Button/Button.tsx)
• Button.StyledButton (cognitive 35) (code/core/src/components/components/Button/Button.tsx)
• Button.StyledButton (cyclomatic 43) (code/core/src/components/components/Button/Button.tsx)
• Change coupling: EVAL.ts ↔ test-utils.ts (agent-eval/evals/808-shared-infra-fallback/EVAL.ts)
• Change coupling: EVAL.ts ↔ test-utils.ts (agent-eval/evals/813-monorepo-leaf-create-component/EVAL.ts)
• Change coupling: FinalizationCommand.ts ↔ FeatureCompatibilityService.ts (code/lib/create-storybook/src/commands/FinalizationCommand.ts)
• Change coupling: buildDocgen.ts ↔ preset.ts (code/renderers/react/src/docgen/buildDocgen.ts)
• Change coupling: fixtures.ts ↔ index.test-d.ts (code/core/src/shared/open-service/fixtures.ts)
• Change coupling: intercepts.ts ↔ resolve.ts (code/core/src/cli/ai/mcp/intercepts.ts)
• …and 1595 more

• 300 commits — 226 feature/other, 74 fixes

• code/lib — 94 commits
• (repo) — 75 commits
• code/core — 62 commits
• code/renderers — 17 commits
• (root) — 16 commits
• code/frameworks — 13 commits
• code/addons — 6 commits
• test-storybooks/upgrade-fixtures — 3 commits
• .agents/skills — 2 commits
• code/.storybook — 2 commits
• code/e2e-sandbox — 2 commits
• docs/contribute — 2 commits
• agent-eval/templates — 1 commit
• docs/_snippets — 1 commit
• docs/configure — 1 commit
• docs/get-started — 1 commit
• scripts/dangerfile.ts — 1 commit
• scripts/ecosystem-ci — 1 commit

• fix: Fix CSF factory annotation constraints
• fix: Fix Preact docs React version expectation after rebase
• fix: Fix React minimum-version upgrade guidance
• fix: Fix React story declaration constraint
• fix: Fix TypeScript 7 CI regressions
• fix: Fix XSS vulnerability in preview-navigator by replacing innerHTML with DOM API
• fix: Fix Yarn 1 next tag lookups
• fix: Fix declaration consumer dependencies
• fix: Fix lockfile after merging next
• fix: Fix react-dom-shim upgrade removal
• fix: Fix storybook test facade compatibility
• fix: Fix storybook test facade consumers
• fix: Merge branch 'next' into fix/csf-factories-parse-error
• fix: Merge branch 'next' into fix/tanstack-router-interpolate-path-compat
• fix: Merge branch 'next' into fix/vite-plus-0.3-peer
• fix: Merge pull request #36333 from BaconMan1168/fix/tanstack-router-interpolate-path-compat
• fix: Merge pull request #36353 from lyzno1/fix/vite-plus-0.3-peer
• fix: Merge pull request #36360 from storybookjs/fix/windows-unit-test-stability
• fix: Merge pull request #36375 from storybookjs/fix/angular-vite-honor-browser-target
• fix: Merge pull request #36384 from ArjunCodess/fix/csf-factories-parse-error
• …and 280 more

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

storybookjs/storybook was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.