diff --git a/.github/workflows/claude-code-review.yml b/.github/workflows/claude-code-review.yml
new file mode 100644
index 000000000000..db6aa408223a
--- /dev/null
+++ b/.github/workflows/claude-code-review.yml
@@ -0,0 +1,35 @@
+name: Claude Code Review
+
+on:
+  pull_request:
+    types: [opened, synchronize, ready_for_review, reopened]
+
+jobs:
+  claude-review:
+    # Claude Code reviews are estimated to cost $15-25. use only when necessary and only internally.
+    if: |
+      (github.event.pull_request.author_association == 'MEMBER' || github.event.pull_request.author_association == 'OWNER') &&
+      contains(github.event.pull_request.labels.*.name, 'claude-review')
+
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: read
+      issues: read
+      id-token: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          fetch-depth: 1
+          persist-credentials: false
+
+      - name: Run Claude Code Review
+        id: claude-review
+        uses: anthropics/claude-code-action@a92e7c70a4da9793dc164451d829089dc057a464 # v1.0.159
+        with:
+          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
+          plugin_marketplaces: 'https://github.com/anthropics/claude-code.git'
+          plugins: 'code-review@claude-code-plugins'
+          prompt: '/code-review:code-review ${{ github.repository }}/pull/${{ github.event.pull_request.number }}'
diff --git a/.github/workflows/claude.yml b/.github/workflows/claude.yml
new file mode 100644
index 000000000000..7921c3a3c925
--- /dev/null
+++ b/.github/workflows/claude.yml
@@ -0,0 +1,68 @@
+name: Claude Code
+
+on:
+  issue_comment:
+    types: [created]
+  pull_request_review_comment:
+    types: [created]
+  issues:
+    types: [opened, assigned]
+  pull_request_review:
+    types: [submitted]
+
+jobs:
+  claude:
+    # Only org OWNERs and MEMBERs may trigger Claude. author_association is set by
+    # GitHub on the comment/review/issue payload; everything else (COLLABORATOR,
+    # CONTRIBUTOR, FIRST_TIME_CONTRIBUTOR, NONE) is rejected.
+    if: |
+      (github.event_name == 'issue_comment' &&
+        contains(github.event.comment.body, '@claude') &&
+        contains(fromJSON('["OWNER", "MEMBER"]'), github.event.comment.author_association)) ||
+      (github.event_name == 'pull_request_review_comment' &&
+        contains(github.event.comment.body, '@claude') &&
+        contains(fromJSON('["OWNER", "MEMBER"]'), github.event.comment.author_association)) ||
+      (github.event_name == 'pull_request_review' &&
+        contains(github.event.review.body, '@claude') &&
+        contains(fromJSON('["OWNER", "MEMBER"]'), github.event.review.author_association)) ||
+      (github.event_name == 'issues' && (
+        (github.event.action == 'opened' &&
+          contains(fromJSON('["OWNER", "MEMBER"]'), github.event.issue.author_association) &&
+          (contains(github.event.issue.body, '`@claude`') || contains(github.event.issue.title, '`@claude`'))) ||
+        (github.event.action == 'assigned' && github.event.assignee.login == 'claude')
+      ))
+
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: read
+      issues: read
+      id-token: write
+      actions: read # Required for Claude to read CI results on PRs
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          fetch-depth: 1
+          persist-credentials: false
+
+      - name: Run Claude Code
+        id: claude
+        uses: anthropics/claude-code-action@a92e7c70a4da9793dc164451d829089dc057a464 # v1.0.159
+        with:
+          anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }}
+          assignee_trigger: 'claude'
+          base_branch: 'next'
+          prompt: 'Respect the PR description template and repository guidelines in AGENTS.md.'
+          # Allows Claude to read CI results on PRs
+          additional_permissions: |
+            actions: read
+
+          # Tool permissions Claude needs to follow AGENTS.md (install, compile,
+          # typecheck, lint, format, test). Bash is NOT allowed by default, so
+          # without this Claude cannot run any of the repo's build/test commands.
+          # See https://github.com/anthropics/claude-code-action/blob/main/docs/usage.md
+          # or https://code.claude.com/docs/en/cli-reference for available options
+          claude_args: |
+            --allowed-tools "Bash(yarn:*),Bash(cd:*),Bash(node:*),Bash(git status:*),Bash(git diff:*),Bash(git log:*),Bash(git show:*)"
+            --disallowed-tools "Bash(yarn start),Bash(yarn task dev)"
diff --git a/.github/workflows/trigger-circle-ci-workflow.yml b/.github/workflows/trigger-circle-ci-workflow.yml
index db7dd9893e50..d2f16bf0ec28 100644
--- a/.github/workflows/trigger-circle-ci-workflow.yml
+++ b/.github/workflows/trigger-circle-ci-workflow.yml
@@ -44,8 +44,13 @@ on:
       - next
       - main
 
+# For PR events, group per-PR (github.ref is refs/pull/<n>/merge) so redundant
+# re-triggers on the same PR cancel each other. For pushes to a shared branch
+# (next/main), key on the commit SHA instead: otherwise two merges landing close
+# together share the refs/heads/<branch> group and the earlier merge's trigger is
+# cancelled before it can POST to CircleCI, silently skipping its `merged` workflow.
 concurrency:
-  group: ${{ github.workflow }}-${{ github.ref }}
+  group: ${{ github.workflow }}-${{ github.event_name == 'push' && github.sha || github.event.pull_request.number }}
   cancel-in-progress: true
 
 jobs:
diff --git a/.vscode/settings.json b/.vscode/settings.json
index b623588b5666..a4b94099da83 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -60,8 +60,6 @@
   "typescript.preferences.quoteStyle": "single",
   "typescript.preferGoToSourceDefinition": true,
   "typescript.tsdk": "./node_modules/typescript/lib",
-  "vitest.workspaceConfig": "./code/vitest.workspace.ts",
-  "vitest.rootConfig": "./code/vitest.workspace.ts",
   "oxc.fmt.configPath": ".oxfmtrc.json",
   "oxc.enable.oxlint": false
 }
diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
index 5a1d36ff946a..dfedf5dd9cf9 100644
--- a/CHANGELOG.prerelease.md
+++ b/CHANGELOG.prerelease.md
@@ -1,3 +1,19 @@
+## 10.5.0-alpha.10
+
+- A11y: Handle lang attribute throughout preview - [#35321](https://github.com/storybookjs/storybook/pull/35321), thanks @Sidnioulz!
+- A11y: Surface required args and keyboard-reachable Setup controls in ArgsTable - [#35306](https://github.com/storybookjs/storybook/pull/35306), thanks @Sidnioulz!
+- Addon-Vitest: Subscribe for run completion before triggering it - [#35291](https://github.com/storybookjs/storybook/pull/35291), thanks @tsushanth!
+- Core: Compose core annotations before preview beforeAll - [#35323](https://github.com/storybookjs/storybook/pull/35323), thanks @JReinhold!
+- Docgen: Run experimentalDocgenServer extraction in a worker thread - [#35324](https://github.com/storybookjs/storybook/pull/35324), thanks @JReinhold!
+- DocgenServer: Fix OOM by recycling the shared TS program - [#35305](https://github.com/storybookjs/storybook/pull/35305), thanks @ndelangen!
+- Next: Call link onClick before preventing default - [#35311](https://github.com/storybookjs/storybook/pull/35311), thanks @yatishgoel!
+- Review: Dynamic thumbnail scaling based on content dimensions - [#35282](https://github.com/storybookjs/storybook/pull/35282), thanks @ghengeveld!
+- Review: Improve review thumbnail scaling and loading UX - [#35335](https://github.com/storybookjs/storybook/pull/35335), thanks @ghengeveld!
+- Review: Notify on review arrival instead of auto-navigating - [#35276](https://github.com/storybookjs/storybook/pull/35276), thanks @ghengeveld!
+- Review: Simplify layout handling - [#35322](https://github.com/storybookjs/storybook/pull/35322), thanks @ghengeveld!
+- UI: Hide onboarding menu with feature flag - [#35299](https://github.com/storybookjs/storybook/pull/35299), thanks @Sidnioulz!
+- Vue: Fix Unicode Default Values In Docs - [#34909](https://github.com/storybookjs/storybook/pull/34909), thanks @Arunsiva003!
+
 ## 10.5.0-alpha.9
 
 - Addon Vitest: Avoid erroring out on benign Win process exits - [#35287](https://github.com/storybookjs/storybook/pull/35287), thanks @Sidnioulz!
diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx
index 7fc0aa5e8e3f..e6258be49aaf 100644
--- a/code/.storybook/preview.tsx
+++ b/code/.storybook/preview.tsx
@@ -356,7 +356,11 @@ const decorators = [
 ] satisfies Decorator[];
 
 const parameters = {
+  // Redundant but useful for testing lang parameter propagation in stories.
+  htmlLang: 'en-CA',
   docs: {
+    // Redundant but useful for testing lang parameter propagation in docs.
+    lang: 'en-US',
     theme: themes.light,
     codePanel: true,
     source: {
diff --git a/code/addons/docs/src/blocks/blocks/ArgTypes.tsx b/code/addons/docs/src/blocks/blocks/ArgTypes.tsx
index d917b117c356..93b5b409d739 100644
--- a/code/addons/docs/src/blocks/blocks/ArgTypes.tsx
+++ b/code/addons/docs/src/blocks/blocks/ArgTypes.tsx
@@ -107,6 +107,7 @@ function renderArgTypesTables({
   include,
   exclude,
   sort,
+  docsLang,
 }: {
   mainName?: string;
   mainRows: StrictArgTypes;
@@ -114,11 +115,12 @@ function renderArgTypesTables({
   include?: PropDescriptor;
   exclude?: PropDescriptor;
   sort?: SortType;
+  docsLang?: string;
 }) {
   const filteredMainRows = filterArgTypes(mainRows, include, exclude);
 
   if (Object.keys(subcomponentRows).length === 0) {
-    return <PureArgsTable rows={filteredMainRows as any} sort={sort} />;
+    return <PureArgsTable rows={filteredMainRows as any} sort={sort} docsLang={docsLang} />;
   }
 
   const tabs = {
@@ -134,7 +136,7 @@ function renderArgTypesTables({
     ),
   };
 
-  return <TabbedArgsTable tabs={tabs as any} sort={sort} />;
+  return <TabbedArgsTable tabs={tabs as any} sort={sort} docsLang={docsLang} />;
 }
 
 const LegacyArgTypes: FC<ArgTypesProps> = (props) => {
@@ -148,6 +150,7 @@ const LegacyArgTypes: FC<ArgTypesProps> = (props) => {
     mainName: getComponentName(component),
     mainRows: argTypes,
     subcomponentRows: extractSubcomponentArgTypes(subcomponents, parameters),
+    docsLang: parameters?.docs?.lang,
     ...filterProps,
   });
 };
@@ -175,6 +178,7 @@ const DocgenServiceArgTypes: FC<ArgTypesProps> = (props) => {
     mainName: getComponentName(component) ?? serviceRows.serviceComponentName,
     mainRows: serviceRows.mainRows,
     subcomponentRows: serviceRows.subcomponentRows,
+    docsLang: parameters?.docs?.lang,
     ...filterProps,
   });
 };
diff --git a/code/addons/docs/src/blocks/blocks/Controls.tsx b/code/addons/docs/src/blocks/blocks/Controls.tsx
index f0f3bbe8d8b7..ad046cf5bcfb 100644
--- a/code/addons/docs/src/blocks/blocks/Controls.tsx
+++ b/code/addons/docs/src/blocks/blocks/Controls.tsx
@@ -6,8 +6,8 @@ import { useId } from '@react-aria/utils';
 import type { Args, Globals, Renderer, StrictArgTypes } from 'storybook/internal/csf';
 import type { DocsContextProps, ModuleExports, PreparedStory } from 'storybook/internal/types';
 
-import { filterArgTypes } from 'storybook/preview-api';
 import type { PropDescriptor } from 'storybook/preview-api';
+import { filterArgTypes } from 'storybook/preview-api';
 
 import type { SortType } from '../components';
 import { ArgsTable as PureArgsTable, TabbedArgsTable } from '../components';
@@ -50,6 +50,7 @@ type ControlsTablesProps = ControlsInteractiveState & {
   exclude?: PropDescriptor;
   sort?: SortType;
   storyId: string;
+  docsLang?: string;
 };
 
 function getControlsFilterProps(story: PreparedStory, props: ControlsProps): ControlsParameters {
@@ -89,6 +90,7 @@ const ControlsTables: FC<ControlsTablesProps> = ({
   globals,
   updateArgs,
   resetArgs,
+  docsLang,
 }) => {
   const filteredMainRows = filterArgTypes(mainRows, include, exclude);
 
@@ -107,6 +109,7 @@ const ControlsTables: FC<ControlsTablesProps> = ({
         globals={globals}
         updateArgs={updateArgs}
         resetArgs={resetArgs}
+        docsLang={docsLang}
       />
     );
   }
@@ -134,6 +137,7 @@ const ControlsTables: FC<ControlsTablesProps> = ({
       resetArgs={resetArgs}
       storyId={storyId}
       controlsId={controlsId}
+      docsLang={docsLang}
     />
   );
 };
@@ -155,6 +159,7 @@ const LegacyControls: FC<ControlsStoryProps> = ({ story, context, ...props }) =>
       {...filterProps}
       storyId={story.id}
       {...interactiveState}
+      docsLang={parameters?.docs?.lang}
     />
   );
 };
@@ -187,6 +192,7 @@ const DocgenServiceControls: FC<ControlsStoryProps> = ({ story, context, ...prop
       {...filterProps}
       storyId={story.id}
       {...interactiveState}
+      docsLang={parameters?.docs?.lang}
     />
   );
 };
diff --git a/code/addons/docs/src/blocks/blocks/Description.tsx b/code/addons/docs/src/blocks/blocks/Description.tsx
index c717be1ef6c6..f9ef0d6bd1eb 100644
--- a/code/addons/docs/src/blocks/blocks/Description.tsx
+++ b/code/addons/docs/src/blocks/blocks/Description.tsx
@@ -5,10 +5,10 @@ import { InvalidBlockOfPropError } from 'storybook/internal/preview-errors';
 
 import { DocsContext } from './DocsContext';
 import { Markdown } from './Markdown';
-import type { Of } from './useOf';
-import { useOf } from './useOf';
 import { useServiceDocgen } from './use-service-docgen.ts';
 import { useServiceStoryDoc } from './use-service-story-docs.ts';
+import type { Of } from './useOf';
+import { useOf } from './useOf';
 import { withMdxComponentOverride } from './with-mdx-component-override';
 
 export enum DescriptionType {
@@ -78,22 +78,30 @@ type ResolvedOf = ReturnType<typeof useOf>;
 const DescriptionBody: FC<{
   resolvedOf: ResolvedOf;
   serviceComponentDescription?: string;
+  lang?: string;
   storyDocsDescription?: string | null;
-}> = ({ resolvedOf, serviceComponentDescription, storyDocsDescription }) => {
+}> = ({ resolvedOf, serviceComponentDescription, lang, storyDocsDescription }) => {
   const markdown = getDescriptionFromResolvedOf(
     resolvedOf,
     serviceComponentDescription,
     storyDocsDescription
   );
 
-  return markdown ? <Markdown>{markdown}</Markdown> : null;
+  return markdown ? <Markdown lang={lang}>{markdown}</Markdown> : null;
 };
 
-const DescriptionStoryWithServices: FC<{ resolvedOf: Extract<ResolvedOf, { type: 'story' }> }> = ({
-  resolvedOf,
-}) => {
+const DescriptionStoryWithServices: FC<{
+  resolvedOf: Extract<ResolvedOf, { type: 'story' }>;
+}> = ({ resolvedOf }) => {
   const storyDocsDescription = useServiceStoryDoc(resolvedOf.story.id).data?.description;
-  return <DescriptionBody resolvedOf={resolvedOf} storyDocsDescription={storyDocsDescription} />;
+  const lang = resolvedOf.story.parameters.docs?.lang || 'en';
+  return (
+    <DescriptionBody
+      resolvedOf={resolvedOf}
+      storyDocsDescription={storyDocsDescription}
+      lang={lang}
+    />
+  );
 };
 
 const DescriptionComponentWithServices: FC<{
@@ -101,22 +109,27 @@ const DescriptionComponentWithServices: FC<{
   componentId: string;
 }> = ({ resolvedOf, componentId }) => {
   const serviceComponentDescription = useServiceDocgen(componentId).data?.description || undefined;
+  const lang =
+    resolvedOf.type === 'meta'
+      ? resolvedOf.preparedMeta.parameters.docs?.lang || 'en'
+      : resolvedOf.projectAnnotations.parameters?.docs?.lang || 'en';
   return (
     <DescriptionBody
       resolvedOf={resolvedOf}
       serviceComponentDescription={serviceComponentDescription}
+      lang={lang}
     />
   );
 };
 
 const DescriptionImpl: FC<DescriptionProps> = (props) => {
   const { of } = props;
+  const context = useContext(DocsContext);
 
   if ('of' in props && of === undefined) {
     throw new InvalidBlockOfPropError();
   }
   const resolvedOf = useOf(of || 'meta');
-  const context = useContext(DocsContext);
 
   // The docgen service contributes a fallback description, but its two sources need different hooks
   // (story-docs by story id, docgen by component id), so each lives in its own child component to
@@ -137,7 +150,14 @@ const DescriptionImpl: FC<DescriptionProps> = (props) => {
     }
   }
 
-  return <DescriptionBody resolvedOf={resolvedOf} />;
+  const parameters =
+    resolvedOf.type === 'story'
+      ? resolvedOf.story.parameters
+      : resolvedOf.type === 'meta'
+        ? resolvedOf.preparedMeta.parameters
+        : resolvedOf.projectAnnotations.parameters;
+  const lang = parameters?.docs?.lang || 'en';
+  return <DescriptionBody resolvedOf={resolvedOf} lang={lang} />;
 };
 
 export const Description = withMdxComponentOverride('Description', DescriptionImpl);
diff --git a/code/addons/docs/src/blocks/blocks/DocsContainer.tsx b/code/addons/docs/src/blocks/blocks/DocsContainer.tsx
index 3cae103afe80..8567c7afb7a2 100644
--- a/code/addons/docs/src/blocks/blocks/DocsContainer.tsx
+++ b/code/addons/docs/src/blocks/blocks/DocsContainer.tsx
@@ -4,7 +4,7 @@ import React, { useEffect, useMemo } from 'react';
 import type { Renderer } from 'storybook/internal/types';
 
 import type { ThemeVars } from 'storybook/theming';
-import { ThemeProvider, ensure as ensureTheme } from 'storybook/theming';
+import { ensure as ensureTheme, ThemeProvider } from 'storybook/theming';
 
 import { DocsPageWrapper } from '../components';
 import { TableOfContents } from '../components/TableOfContents';
@@ -28,13 +28,18 @@ export const DocsContainer: FC<PropsWithChildren<DocsContainerProps>> = ({
 }) => {
   const slugger = useMemo(() => createDocsSlugger(), []);
   let toc;
+  // Language of docs prose (descriptions, ArgTypes description cells, free MDX prose).
+  let lang;
 
   try {
     const meta = context.resolveOf('meta', ['meta']);
-    toc = meta.preparedMeta.parameters?.docs?.toc;
+    const metaParameters = meta.preparedMeta.parameters;
+    toc = metaParameters?.docs?.toc;
+    lang = metaParameters?.docs?.lang || 'en';
   } catch (err) {
     // No meta, falling back to project annotations
     toc = context?.projectAnnotations?.parameters?.docs?.toc;
+    lang = context?.projectAnnotations?.parameters?.docs?.lang || 'en';
   }
 
   useEffect(() => {
@@ -61,6 +66,7 @@ export const DocsContainer: FC<PropsWithChildren<DocsContainerProps>> = ({
         <SourceContainer channel={context.channel}>
           <ThemeProvider theme={ensureTheme(theme as ThemeVars)}>
             <DocsPageWrapper
+              lang={lang}
               toc={
                 toc ? (
                   <TableOfContents
diff --git a/code/addons/docs/src/blocks/blocks/Story.stories.tsx b/code/addons/docs/src/blocks/blocks/Story.stories.tsx
index 4df1e7f9878b..afbdb2dbbbd3 100644
--- a/code/addons/docs/src/blocks/blocks/Story.stories.tsx
+++ b/code/addons/docs/src/blocks/blocks/Story.stories.tsx
@@ -66,6 +66,20 @@ export const Inline: Story = {
   },
 };
 
+export const InlineHtmlLang: Story = {
+  ...Inline,
+  args: {
+    of: StoryParametersStories.HtmlLang,
+    inline: true,
+  },
+  play: async ({ canvasElement }) => {
+    await waitFor(() => {
+      const inner = canvasElement.querySelector('[id$="-inner"]');
+      expect(inner).toHaveAttribute('lang', 'fr');
+    });
+  },
+};
+
 export const InlineWithHeightProps: Story = {
   ...Inline,
   args: {
diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx
index 700a90eeffdb..1cc3b2e697e1 100644
--- a/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx
+++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgControl.tsx
@@ -20,7 +20,7 @@ export interface ArgControlProps {
   row: ArgType;
   arg: any;
   updateArgs: (args: Args) => void;
-  isHovered: boolean;
+  isRequired: boolean;
   storyId?: string;
   controlsId?: string;
 }
@@ -49,7 +49,7 @@ export const ArgControl: FC<ArgControlProps> = ({
   row,
   arg,
   updateArgs,
-  isHovered,
+  isRequired,
   storyId,
   controlsId,
 }) => {
@@ -79,16 +79,26 @@ export const ArgControl: FC<ArgControlProps> = ({
 
   if (!control || control.disable) {
     const canBeSetup = control?.disable !== true && row?.type?.name !== 'function';
-    return isHovered && canBeSetup ? (
-      <Link
-        href="https://storybook.js.org/docs/essentials/controls?ref=ui"
-        target="_blank"
-        withArrow
-      >
-        Setup controls
-      </Link>
-    ) : (
-      <NoControl />
+    if (!canBeSetup) {
+      return <NoControl />;
+    }
+    // Both nodes are always rendered; the parent row toggles their visibility with CSS on
+    // :hover and :focus-within, so the link stays reachable for keyboard users.
+    return (
+      <>
+        <span className="sbdocs sbdocs-argcontrol-setup">
+          <Link
+            href="https://storybook.js.org/docs/essentials/controls?ref=ui"
+            target="_blank"
+            withArrow
+          >
+            Setup controls
+          </Link>
+        </span>
+        <span className="sbdocs sbdocs-argcontrol-placeholder">
+          <NoControl />
+        </span>
+      </>
     );
   }
   // row.name is a display name and not a suitable DOM input id or name - i might contain whitespace etc.
@@ -99,6 +109,7 @@ export const ArgControl: FC<ArgControlProps> = ({
     controlsId,
     argType: row,
     value: boxedValue.value,
+    required: isRequired,
     onChange,
     onBlur,
     onFocus,
diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgRow.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgRow.tsx
index adb6f33e8453..d21e05930587 100644
--- a/code/addons/docs/src/blocks/components/ArgsTable/ArgRow.tsx
+++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgRow.tsx
@@ -1,12 +1,12 @@
 import type { FC } from 'react';
-import React, { useState } from 'react';
+import React from 'react';
 
 import { codeCommon } from 'storybook/internal/components';
 
 import Markdown from 'markdown-to-jsx';
 import { transparentize } from 'polished';
 import type { CSSObject } from 'storybook/theming';
-import { styled } from 'storybook/theming';
+import { srOnlyStyles, srOnlyUnsetStyles, styled } from 'storybook/theming';
 
 import type { ArgControlProps } from './ArgControl';
 import { ArgControl } from './ArgControl';
@@ -23,6 +23,7 @@ interface ArgRowProps {
   initialExpandedArgs?: boolean;
   storyId?: string;
   controlsId?: string;
+  docsLang?: string;
 }
 
 const Name = styled.span({ fontWeight: 'bold' });
@@ -80,6 +81,22 @@ const StyledTd = styled.td<{ expandable: boolean }>(({ expandable }) => ({
   paddingLeft: expandable ? '40px !important' : '20px !important',
 }));
 
+// When a row has no usable control, the "Setup controls" link is hidden and a placeholder dash is
+// shown. Hovering or focusing within the row swaps them, so keyboard users reach the link too.
+const StyledTr = styled.tr({
+  [`span.sbdocs-argcontrol-setup`]: {
+    ...srOnlyStyles,
+  },
+  '&:hover, &:focus-within': {
+    [`span.sbdocs-argcontrol-setup`]: {
+      ...srOnlyUnsetStyles,
+    },
+    [`span.sbdocs-argcontrol-placeholder`]: {
+      ...srOnlyStyles,
+    },
+  },
+});
+
 const toSummary = (value: any) => {
   if (!value) {
     return value;
@@ -89,8 +106,7 @@ const toSummary = (value: any) => {
 };
 
 export const ArgRow: FC<ArgRowProps> = (props) => {
-  const [isHovered, setIsHovered] = useState(false);
-  const { row, updateArgs, compact, expandable, initialExpandedArgs } = props;
+  const { row, updateArgs, compact, expandable, initialExpandedArgs, docsLang } = props;
   const { name, description } = row;
   const table = (row.table || {}) as TableAnnotation;
   const type = table.type || toSummary(row.type);
@@ -99,15 +115,19 @@ export const ArgRow: FC<ArgRowProps> = (props) => {
   const hasDescription = description != null && description !== '';
 
   return (
-    <tr onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
+    <StyledTr>
       <StyledTd expandable={expandable ?? false}>
         <Name>{name}</Name>
-        {required ? <Required title="Required">*</Required> : null}
+        {required ? (
+          <Required aria-hidden title="Required">
+            *
+          </Required>
+        ) : null}
       </StyledTd>
       {compact ? null : (
         <td>
           {hasDescription && (
-            <Description>
+            <Description lang={docsLang}>
               <Markdown>{description}</Markdown>
             </Description>
           )}
@@ -132,9 +152,9 @@ export const ArgRow: FC<ArgRowProps> = (props) => {
       )}
       {updateArgs ? (
         <td>
-          <ArgControl {...(props as ArgControlProps)} isHovered={isHovered} />
+          <ArgControl {...(props as ArgControlProps)} isRequired={!!required} />
         </td>
       ) : null}
-    </tr>
+    </StyledTr>
   );
 };
diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.lang.test.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.lang.test.tsx
new file mode 100644
index 000000000000..71bacd19bbf1
--- /dev/null
+++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.lang.test.tsx
@@ -0,0 +1,42 @@
+// @vitest-environment happy-dom
+import { cleanup, render } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+
+import React from 'react';
+
+import { ThemeProvider, convert, themes } from 'storybook/theming';
+
+import * as ArgRow from './ArgRow.stories';
+import { ArgsTable } from './ArgsTable';
+
+const renderTable = (docsLang?: string) =>
+  render(
+    <ThemeProvider theme={convert(themes.light)}>
+      {/* Wrap in a non-en region to prove chrome re-asserts English */}
+      <div lang="de">
+        <ArgsTable rows={{ stringType: ArgRow.String.args.row }} docsLang={docsLang} />
+      </div>
+    </ThemeProvider>
+  );
+
+describe('ArgsTable chrome stays English', () => {
+  afterEach(() => cleanup());
+
+  it('declares English on the table so the chrome stays English under a non-en region', () => {
+    const { container } = renderTable();
+    expect(container.querySelector('.docblock-argstable')?.getAttribute('lang')).toBe('en');
+  });
+
+  it('keeps the arg-name cell announced in English', () => {
+    const { container } = renderTable();
+    const nameCell = container.querySelector('tbody tr td:first-of-type');
+    // The cell inherits English from the table wrapper rather than declaring its own lang.
+    expect(nameCell?.closest('[lang]')?.getAttribute('lang')).toBe('en');
+  });
+
+  it('languages argument descriptions with docs.lang', () => {
+    const { container } = renderTable('de');
+    const description = container.querySelector('tbody tr td:nth-of-type(2) > div');
+    expect(description?.getAttribute('lang')).toBe('de');
+  });
+});
diff --git a/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx b/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx
index 9663230196b6..6b142951e62d 100644
--- a/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx
+++ b/code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx
@@ -217,6 +217,7 @@ export interface ArgsTableOptionProps {
   sort?: SortType;
   storyId?: string;
   controlsId?: string;
+  docsLang?: string;
 }
 interface ArgsTableDataProps {
   rows: ArgTypes;
@@ -342,6 +343,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
     isLoading,
     storyId,
     controlsId,
+    docsLang,
   } = props;
 
   const { rows, args, globals } =
@@ -431,6 +433,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
               onClick={handleResetClick}
               disabled={isResetting}
               ariaLabel={isResetting ? 'Resetting controls...' : 'Reset controls'}
+              lang="en"
             >
               <UndoIcon />
             </StyledButton>
@@ -440,6 +443,7 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
         <TableWrapper
           {...{ compact, inAddonPanel, inTabPanel }}
           className="docblock-argstable sb-unstyled"
+          lang="en"
         >
           <thead className="docblock-argstable-head">
             <tr>
@@ -465,7 +469,13 @@ export const ArgsTable: FC<ArgsTableProps> = (props) => {
           </thead>
           <tbody className="docblock-argstable-body">
             {groups.ungrouped.map((row) => (
-              <ArgRow key={row.key} row={row} arg={args && args[row.key]} {...common} />
+              <ArgRow
+                key={row.key}
+                row={row}
+                arg={args && args[row.key]}
+                docsLang={docsLang}
+                {...common}
+              />
             ))}
 
             {Object.entries(groups.ungroupedSubsections).map(([subcategory, subsection]) => (
diff --git a/code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.tsx b/code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.tsx
index f23770faef6b..7d75120d7b83 100644
--- a/code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.tsx
+++ b/code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.tsx
@@ -30,7 +30,7 @@ export const TabbedArgsTable: FC<TabbedArgsTableProps> = ({ tabs, ...props }) =>
     // are subcomponents, never controllable, so we filter out the props indicating
     // controllability. Pass a stable element (not an inline function component) so React
     // reconciles the tab panel instead of remounting it on every args update.
-    const argsTableProps = index === 0 ? props : { sort: props.sort };
+    const argsTableProps = index === 0 ? props : { sort: props.sort, docsLang: props.docsLang };
 
     return {
       id: `prop_table_div_${label}`,
diff --git a/code/addons/docs/src/blocks/components/DocsPage.stories.tsx b/code/addons/docs/src/blocks/components/DocsPage.stories.tsx
index f46cb44b5bb0..cef070b0ff88 100644
--- a/code/addons/docs/src/blocks/components/DocsPage.stories.tsx
+++ b/code/addons/docs/src/blocks/components/DocsPage.stories.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react';
 
+import { expect, within } from 'storybook/test';
 import { Global, css } from 'storybook/theming';
 
 import { ArgsTable, Source } from '.';
@@ -90,6 +91,20 @@ export const Markdown = () => (
   </DocsPageWrapper>
 );
 
+export const ForwardsLang = {
+  name: 'Forwards lang',
+  render: () => (
+    <DocsPageWrapper lang="de">
+      <Title>Sprache</Title>
+      <MarkdownComponent {...markdown.Text.args} />
+    </DocsPageWrapper>
+  ),
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const content = within(canvasElement).getByText('Sprache').closest('.sbdocs-content');
+    await expect(content).toHaveAttribute('lang', 'de');
+  },
+};
+
 export const Html = {
   name: 'HTML',
   render: () => (
diff --git a/code/addons/docs/src/blocks/components/DocsPage.tsx b/code/addons/docs/src/blocks/components/DocsPage.tsx
index 2f74ac7ebc0e..24a00590cfbc 100644
--- a/code/addons/docs/src/blocks/components/DocsPage.tsx
+++ b/code/addons/docs/src/blocks/components/DocsPage.tsx
@@ -452,11 +452,14 @@ export const DocsWrapper = styled.div(({ theme }) => ({
 interface DocsPageWrapperProps {
   children?: React.ReactNode;
   toc?: React.ReactNode;
+  lang?: string;
 }
 
-export const DocsPageWrapper: FC<DocsPageWrapperProps> = ({ children, toc }) => (
+export const DocsPageWrapper: FC<DocsPageWrapperProps> = ({ children, toc, lang = 'en' }) => (
   <DocsWrapper className="sbdocs sbdocs-wrapper">
     {toc}
-    <DocsContent className="sbdocs sbdocs-content">{children}</DocsContent>
+    <DocsContent className="sbdocs sbdocs-content" lang={lang}>
+      {children}
+    </DocsContent>
   </DocsWrapper>
 );
diff --git a/code/addons/docs/src/blocks/components/Preview.tsx b/code/addons/docs/src/blocks/components/Preview.tsx
index db7d102e2d24..9743c34d9f19 100644
--- a/code/addons/docs/src/blocks/components/Preview.tsx
+++ b/code/addons/docs/src/blocks/components/Preview.tsx
@@ -2,8 +2,8 @@ import type { FC, PropsWithChildren, ReactElement, ReactNode } from 'react';
 import React, { Children, useCallback, useContext, useMemo, useState } from 'react';
 
 import { logger } from 'storybook/internal/client-logger';
-import { Bar, Button, ToggleButton, Zoom } from 'storybook/internal/components';
 import type { ActionItem } from 'storybook/internal/components';
+import { Bar, Button, ToggleButton, Zoom } from 'storybook/internal/components';
 
 import { CopyIcon, MarkupIcon } from '@storybook/icons';
 
@@ -232,6 +232,7 @@ export const Preview: FC<PreviewProps> = ({
         <ActionBar className="sbdocs sbdocs-preview-actions" innerStyle={{ paddingInline: 0 }}>
           {hasSourceError && (
             <Button
+              lang="en"
               ariaLabel={false}
               disabled
               variant="ghost"
@@ -243,6 +244,7 @@ export const Preview: FC<PreviewProps> = ({
           {hasValidSource && (
             <>
               <ToggleButton
+                lang="en"
                 ariaLabel={false}
                 pressed={expanded}
                 aria-expanded={expanded}
@@ -253,7 +255,7 @@ export const Preview: FC<PreviewProps> = ({
               >
                 <MarkupIcon /> {expanded ? 'Hide code' : 'Show code'}
               </ToggleButton>
-              <Button ariaLabel={false} variant="ghost" onClick={handleCopyCode}>
+              <Button lang="en" ariaLabel={false} variant="ghost" onClick={handleCopyCode}>
                 <CopyIcon /> {copied ?? 'Copy code'}
               </Button>
             </>
diff --git a/code/addons/docs/src/blocks/components/Story.tsx b/code/addons/docs/src/blocks/components/Story.tsx
index 144d14445fba..bdb153d4162b 100644
--- a/code/addons/docs/src/blocks/components/Story.tsx
+++ b/code/addons/docs/src/blocks/components/Story.tsx
@@ -82,7 +82,12 @@ const InlineStory: FunctionComponent<InlineStoryProps> = (props) => {
         )} { min-height: ${height}; transform: translateZ(0); overflow: auto }`}</style>
       ) : null}
       {showLoader && <StorySkeleton />}
-      <div ref={storyRef as any} id={`${storyBlockIdFromId(props)}-inner`} data-name={story.name} />
+      <div
+        ref={storyRef as any}
+        id={`${storyBlockIdFromId(props)}-inner`}
+        data-name={story.name}
+        lang={story.parameters?.htmlLang || 'en'}
+      />
     </>
   );
 };
diff --git a/code/addons/docs/src/blocks/components/TableOfContents.tsx b/code/addons/docs/src/blocks/components/TableOfContents.tsx
index 75ff1364f242..9c5cd0102ef7 100644
--- a/code/addons/docs/src/blocks/components/TableOfContents.tsx
+++ b/code/addons/docs/src/blocks/components/TableOfContents.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react';
 import type { FC, ReactElement } from 'react';
+import React, { useEffect } from 'react';
 
 import type { Channel } from 'storybook/internal/channels';
 import { NAVIGATE_URL } from 'storybook/internal/core-events';
@@ -145,7 +145,12 @@ const Title: FC<{
   // General case.
   if (typeof title === 'string' || !title) {
     return (
-      <Heading as="h2" id={headingId} className={title ? '' : 'sb-sr-only'}>
+      <Heading
+        as="h2"
+        id={headingId}
+        className={title ? '' : 'sb-sr-only'}
+        lang={title ? undefined : 'en'}
+      >
         {title || 'Table of contents'}
       </Heading>
     );
diff --git a/code/addons/docs/src/blocks/components/Toolbar.tsx b/code/addons/docs/src/blocks/components/Toolbar.tsx
index a9faf0be1280..68470d7f4f55 100644
--- a/code/addons/docs/src/blocks/components/Toolbar.tsx
+++ b/code/addons/docs/src/blocks/components/Toolbar.tsx
@@ -65,7 +65,11 @@ export const Toolbar: FC<ToolbarProps> = ({
   onReloadStory,
   ...rest
 }) => (
-  <AbsoluteBar innerStyle={{ gap: 4, paddingInline: 7, justifyContent: 'space-between' }} {...rest}>
+  <AbsoluteBar
+    innerStyle={{ gap: 4, paddingInline: 7, justifyContent: 'space-between' }}
+    lang="en"
+    {...rest}
+  >
     <Wrapper key="left">
       {isLoading ? (
         [1, 2, 3].map((key) => <IconPlaceholder key={key} />)
diff --git a/code/addons/docs/src/blocks/controls/Boolean.tsx b/code/addons/docs/src/blocks/controls/Boolean.tsx
index e302aa6f2b93..861d955d62bd 100644
--- a/code/addons/docs/src/blocks/controls/Boolean.tsx
+++ b/code/addons/docs/src/blocks/controls/Boolean.tsx
@@ -129,6 +129,7 @@ export const BooleanControl: FC<BooleanProps> = ({
   onBlur,
   onFocus,
   argType,
+  required,
 }) => {
   const onSetFalse = useCallback(() => onChange(false), [onChange]);
   const readonly = !!argType?.table?.readonly;
@@ -159,6 +160,7 @@ export const BooleanControl: FC<BooleanProps> = ({
         checked={parsedValue}
         role="switch"
         disabled={readonly}
+        aria-required={required || undefined}
         {...{ name, onBlur, onFocus }}
       />
       <span aria-hidden="true">False</span>
diff --git a/code/addons/docs/src/blocks/controls/Color.tsx b/code/addons/docs/src/blocks/controls/Color.tsx
index f837fdfa52ed..8702bb2072b1 100644
--- a/code/addons/docs/src/blocks/controls/Color.tsx
+++ b/code/addons/docs/src/blocks/controls/Color.tsx
@@ -376,6 +376,7 @@ export const ColorControl: FC<ColorControlProps> = ({
   maxPresetColors,
   startOpen = false,
   argType,
+  required,
 }) => {
   const debouncedOnChange = useCallback(debounce(onChange, 200), [onChange]);
   const { value, realValue, updateValue, color, colorSpace, cycleColorSpace } = useColorInput(
@@ -399,6 +400,7 @@ export const ColorControl: FC<ColorControlProps> = ({
         onChange={(e: ChangeEvent<HTMLInputElement>) => updateValue(e.target.value)}
         onFocus={(e: FocusEvent<HTMLInputElement>) => e.target.select()}
         readOnly={readOnly}
+        aria-required={required || undefined}
         placeholder="Choose color..."
       />
       <PopoverProvider
diff --git a/code/addons/docs/src/blocks/controls/Date.tsx b/code/addons/docs/src/blocks/controls/Date.tsx
index ad54e31be7cc..23ae26b5e916 100644
--- a/code/addons/docs/src/blocks/controls/Date.tsx
+++ b/code/addons/docs/src/blocks/controls/Date.tsx
@@ -75,6 +75,7 @@ export const DateControl: FC<DateProps> = ({
   onFocus,
   onBlur,
   argType,
+  required,
 }) => {
   const [valid, setValid] = useState(true);
   const dateRef = useRef<HTMLInputElement>();
@@ -138,6 +139,7 @@ export const DateControl: FC<DateProps> = ({
         id={`${controlId}-date`}
         name={`${controlId}-date`}
         readOnly={readonly}
+        aria-required={required || undefined}
         onChange={onDateChange}
         {...{ onFocus, onBlur }}
       />
@@ -151,6 +153,7 @@ export const DateControl: FC<DateProps> = ({
         ref={timeRef as RefObject<HTMLInputElement>}
         onChange={onTimeChange}
         readOnly={readonly}
+        aria-required={required || undefined}
         {...{ onFocus, onBlur }}
       />
       {!valid ? <div>invalid</div> : null}
diff --git a/code/addons/docs/src/blocks/controls/Files.tsx b/code/addons/docs/src/blocks/controls/Files.tsx
index e795b71e1238..d0a6970dd060 100644
--- a/code/addons/docs/src/blocks/controls/Files.tsx
+++ b/code/addons/docs/src/blocks/controls/Files.tsx
@@ -45,6 +45,7 @@ export const FilesControl: FC<FilesControlProps> = ({
   accept = 'image/*',
   value,
   argType,
+  required,
 }) => {
   const inputElement = useRef<HTMLInputElement>(null);
   const readonly = argType?.control?.readOnly;
@@ -81,6 +82,7 @@ export const FilesControl: FC<FilesControlProps> = ({
         disabled={readonly}
         onChange={handleFileChange}
         accept={accept}
+        aria-required={required || undefined}
         size="flex"
       />
     </>
diff --git a/code/addons/docs/src/blocks/controls/Number.tsx b/code/addons/docs/src/blocks/controls/Number.tsx
index df5941d53c05..2705dcccd61e 100644
--- a/code/addons/docs/src/blocks/controls/Number.tsx
+++ b/code/addons/docs/src/blocks/controls/Number.tsx
@@ -37,6 +37,7 @@ export const NumberControl: FC<NumberProps> = ({
   onBlur,
   onFocus,
   argType,
+  required,
 }) => {
   const [inputValue, setInputValue] = useState(typeof value === 'number' ? value : '');
   const [forceVisible, setForceVisible] = useState(false);
@@ -125,6 +126,7 @@ export const NumberControl: FC<NumberProps> = ({
         value={inputValue}
         valid={parseError ? 'error' : undefined}
         autoFocus={forceVisible}
+        aria-required={required || undefined}
         readOnly={readonly}
         {...{ name, min, max, step, onFocus, onBlur }}
       />
diff --git a/code/addons/docs/src/blocks/controls/Object.tsx b/code/addons/docs/src/blocks/controls/Object.tsx
index 3bc5e1c3580c..98dcedabf08c 100644
--- a/code/addons/docs/src/blocks/controls/Object.tsx
+++ b/code/addons/docs/src/blocks/controls/Object.tsx
@@ -170,6 +170,7 @@ export const ObjectControl: FC<ObjectProps> = ({
   value,
   onChange,
   argType,
+  required,
 }) => {
   const data = useMemo(() => value && cloneDeep(value), [value]);
   const hasData = data !== null && data !== undefined;
@@ -248,6 +249,7 @@ export const ObjectControl: FC<ObjectProps> = ({
         autoFocus={forceVisible}
         valid={parseError ? 'error' : undefined}
         readOnly={readonly}
+        aria-required={required || undefined}
       />
     </>
   );
diff --git a/code/addons/docs/src/blocks/controls/Range.tsx b/code/addons/docs/src/blocks/controls/Range.tsx
index d9bb83101444..983999ac08fb 100644
--- a/code/addons/docs/src/blocks/controls/Range.tsx
+++ b/code/addons/docs/src/blocks/controls/Range.tsx
@@ -187,6 +187,7 @@ export const RangeControl: FC<RangeProps> = ({
   onBlur,
   onFocus,
   argType,
+  required,
 }) => {
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     onChange(parse(event.target.value));
@@ -209,6 +210,7 @@ export const RangeControl: FC<RangeProps> = ({
         type="range"
         disabled={readonly}
         onChange={handleChange}
+        aria-required={required || undefined}
         {...{ name, min, max, step, onFocus, onBlur }}
         value={value ?? min}
       />
diff --git a/code/addons/docs/src/blocks/controls/Text.tsx b/code/addons/docs/src/blocks/controls/Text.tsx
index 642b35c9b353..6f6ec2280e5a 100644
--- a/code/addons/docs/src/blocks/controls/Text.tsx
+++ b/code/addons/docs/src/blocks/controls/Text.tsx
@@ -30,6 +30,7 @@ export const TextControl: FC<TextProps> = ({
   onBlur,
   maxLength,
   argType,
+  required,
 }) => {
   const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
     onChange(event.target.value);
@@ -71,6 +72,7 @@ export const TextControl: FC<TextProps> = ({
         size="flex"
         placeholder="Edit string..."
         autoFocus={forceVisible}
+        aria-required={required || undefined}
         valid={isValid ? undefined : 'error'}
         {...{ name, value: isValid ? value : '', onFocus, onBlur }}
       />
diff --git a/code/addons/docs/src/blocks/controls/options/Checkbox.tsx b/code/addons/docs/src/blocks/controls/options/Checkbox.tsx
index 775ea915be1c..d4857dc1b04f 100644
--- a/code/addons/docs/src/blocks/controls/options/Checkbox.tsx
+++ b/code/addons/docs/src/blocks/controls/options/Checkbox.tsx
@@ -63,6 +63,7 @@ export const CheckboxControl: FC<CheckboxProps> = ({
   onChange,
   isInline,
   argType,
+  required,
 }) => {
   if (!options) {
     logger.warn(`Checkbox with no options: ${name}`);
@@ -94,7 +95,10 @@ export const CheckboxControl: FC<CheckboxProps> = ({
 
   return (
     <Wrapper $isInline={isInline}>
-      <legend className="sb-sr-only">{name}</legend>
+      <legend className="sb-sr-only">
+        {name}
+        {required ? ' (required)' : ''}
+      </legend>
       {Object.keys(options).map((key, index) => {
         const id = `${controlId}-${index}`;
         return (
diff --git a/code/addons/docs/src/blocks/controls/options/Radio.tsx b/code/addons/docs/src/blocks/controls/options/Radio.tsx
index 838b9f19a9a0..41e3d9e8709a 100644
--- a/code/addons/docs/src/blocks/controls/options/Radio.tsx
+++ b/code/addons/docs/src/blocks/controls/options/Radio.tsx
@@ -63,6 +63,7 @@ export const RadioControl: FC<RadioProps> = ({
   onChange,
   isInline,
   argType,
+  required,
 }) => {
   if (!options) {
     logger.warn(`Radio with no options: ${name}`);
@@ -75,7 +76,10 @@ export const RadioControl: FC<RadioProps> = ({
 
   return (
     <Wrapper isInline={isInline}>
-      <legend className="sb-sr-only">{name}</legend>
+      <legend className="sb-sr-only">
+        {name}
+        {required ? ' (required)' : ''}
+      </legend>
       {Object.keys(options).map((key, index) => {
         const id = `${controlId}-${index}`;
         return (
diff --git a/code/addons/docs/src/blocks/controls/options/Select.tsx b/code/addons/docs/src/blocks/controls/options/Select.tsx
index 9d24d4b348e4..612678a0698c 100644
--- a/code/addons/docs/src/blocks/controls/options/Select.tsx
+++ b/code/addons/docs/src/blocks/controls/options/Select.tsx
@@ -112,6 +112,7 @@ const SingleSelect: FC<SelectProps> = ({
   options,
   onChange,
   argType,
+  required,
 }) => {
   const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
     onChange(options[e.currentTarget.value]);
@@ -127,7 +128,13 @@ const SingleSelect: FC<SelectProps> = ({
       <label htmlFor={controlId} className="sb-sr-only">
         {name}
       </label>
-      <OptionsSelect disabled={readonly} id={controlId} value={selection} onChange={handleChange}>
+      <OptionsSelect
+        disabled={readonly}
+        id={controlId}
+        value={selection}
+        onChange={handleChange}
+        aria-required={required || undefined}
+      >
         <option disabled={selection === NO_SELECTION} key="no-selection">
           {NO_SELECTION}
         </option>
@@ -149,6 +156,7 @@ const MultiSelect: FC<SelectProps> = ({
   options,
   onChange,
   argType,
+  required,
 }) => {
   const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
     const selection = Array.from(e.currentTarget.options)
@@ -172,6 +180,7 @@ const MultiSelect: FC<SelectProps> = ({
         multiple
         value={selection}
         onChange={handleChange}
+        aria-required={required || undefined}
       >
         {Object.keys(options).map((key) => (
           <option key={key} value={key}>
diff --git a/code/addons/docs/src/blocks/controls/types.ts b/code/addons/docs/src/blocks/controls/types.ts
index 7bb69b8e9e1a..348e0cebd722 100644
--- a/code/addons/docs/src/blocks/controls/types.ts
+++ b/code/addons/docs/src/blocks/controls/types.ts
@@ -7,6 +7,8 @@ export interface ControlProps<T> {
   value?: T;
   defaultValue?: T;
   argType?: ArgType;
+  /** Whether the underlying arg is required; surfaced as `aria-required` on the control's input. */
+  required?: boolean;
   onChange: (value?: T) => T | void;
   onFocus?: (evt: any) => void;
   onBlur?: (evt: any) => void;
diff --git a/code/addons/docs/src/blocks/examples/StoryParameters.stories.tsx b/code/addons/docs/src/blocks/examples/StoryParameters.stories.tsx
index 2280656b0b45..5682a2d83871 100644
--- a/code/addons/docs/src/blocks/examples/StoryParameters.stories.tsx
+++ b/code/addons/docs/src/blocks/examples/StoryParameters.stories.tsx
@@ -24,3 +24,5 @@ export const InlineFalseWithIframeHeight: Story = {
 export const InlineFalseWithHeight: Story = {
   parameters: { docs: { story: { inline: false, height: '300px' } } },
 };
+
+export const HtmlLang: Story = { parameters: { htmlLang: 'fr' } };
diff --git a/code/addons/docs/src/docgen.ts b/code/addons/docs/src/docgen.ts
deleted file mode 100644
index 4a21de036141..000000000000
--- a/code/addons/docs/src/docgen.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { DocgenProviderPreset } from 'storybook/internal/types';
-
-/**
- * Addon-docs docgen provider.
- *
- * A small enrichment layer: appends a `(docs enabled)` marker to the downstream description so
- * consumers can tell that addon-docs participated. Does NOT produce docgen on its own — when no
- * downstream provider supplied a payload it returns undefined so the chain falls through.
- */
-export const experimental_docgenProvider: DocgenProviderPreset = async (nextDocgen) => {
-  return async (input) => {
-    const downstream = await nextDocgen(input);
-    if (!downstream) {
-      return undefined;
-    }
-    return {
-      ...downstream,
-      description: downstream.description
-        ? `${downstream.description} (docs enabled)`
-        : 'docs enabled',
-    };
-  };
-};
diff --git a/code/addons/docs/src/preset.ts b/code/addons/docs/src/preset.ts
index 5789a41393d6..d8f6d6a5521a 100644
--- a/code/addons/docs/src/preset.ts
+++ b/code/addons/docs/src/preset.ts
@@ -243,4 +243,3 @@ const optimizeViteDeps = [
 
 export { webpackX as webpack, docsX as docs, optimizeViteDeps };
 export { manifests as experimental_manifests } from './manifest';
-export { experimental_docgenProvider } from './docgen';
diff --git a/code/addons/docs/src/types.ts b/code/addons/docs/src/types.ts
index f21a93510751..6d47018f6a18 100644
--- a/code/addons/docs/src/types.ts
+++ b/code/addons/docs/src/types.ts
@@ -253,6 +253,17 @@ export interface DocsParameters {
      */
     subtitle?: string;
 
+    /**
+     * The BCP-47 language tag applied to Storybook-rendered docs prose (descriptions, titles,
+     * ArgTypes description cells, free MDX prose).
+     *
+     * Storybook's own chrome stays English regardless. Inherited project → meta (page-level) or
+     * project → meta → story (per-story prose).
+     *
+     * @default 'en'
+     */
+    lang?: string;
+
     /**
      * Override the default theme
      *
diff --git a/code/addons/vitest/src/preset.ts b/code/addons/vitest/src/preset.ts
index 5c6308e9ebe5..0b17ab781ddc 100644
--- a/code/addons/vitest/src/preset.ts
+++ b/code/addons/vitest/src/preset.ts
@@ -233,17 +233,6 @@ export const experimental_serverChannel = async (channel: Channel, options: Opti
       return;
     }
 
-    store.send({
-      type: 'TRIGGER_RUN',
-      payload: {
-        storyIds,
-        triggeredBy: `external:${actor}`,
-        ...(configOverride && {
-          configOverride: { ...config, ...configOverride },
-        }),
-      },
-    });
-
     const unsubscribe = store.subscribe((event) => {
       switch (event.type) {
         case 'TEST_RUN_COMPLETED': {
@@ -263,6 +252,17 @@ export const experimental_serverChannel = async (channel: Channel, options: Opti
         }
       }
     });
+
+    store.send({
+      type: 'TRIGGER_RUN',
+      payload: {
+        storyIds,
+        triggeredBy: `external:${actor}`,
+        ...(configOverride && {
+          configOverride: { ...config, ...configOverride },
+        }),
+      },
+    });
   });
 
   const enableCrashReports = core?.enableCrashReports || options.enableCrashReports;
diff --git a/code/core/build-config.ts b/code/core/build-config.ts
index 4f31aad36c01..5bbf398ad9de 100644
--- a/code/core/build-config.ts
+++ b/code/core/build-config.ts
@@ -45,6 +45,14 @@ const config: BuildEntries = {
         entryPoint: './src/oxc-parser/worker.ts',
         dts: false,
       },
+      {
+        // Long-lived worker that runs docgen extraction off the main thread. Exposed as an internal
+        // export so docgen-worker-client.ts resolves it via the package map (import.meta.resolve)
+        // rather than a hard-coded dist path, keeping strict package managers (pnpm) happy.
+        exportEntries: ['./internal/docgen-worker'],
+        entryPoint: './src/shared/open-service/services/docgen/worker/docgen-worker.ts',
+        dts: false,
+      },
       {
         entryPoint: './src/core-server/presets/common-override-preset.ts',
         exportEntries: ['./internal/core-server/presets/common-override-preset'],
diff --git a/code/core/package.json b/code/core/package.json
index 313849066b29..e8a767434562 100644
--- a/code/core/package.json
+++ b/code/core/package.json
@@ -119,6 +119,7 @@
       "code": "./src/csf-tools/index.ts",
       "default": "./dist/csf-tools/index.js"
     },
+    "./internal/docgen-worker": "./dist/shared/open-service/services/docgen/worker/docgen-worker.js",
     "./internal/docs-tools": {
       "types": "./dist/docs-tools/index.d.ts",
       "code": "./src/docs-tools/index.ts",
diff --git a/code/core/src/actions/loaders.ts b/code/core/src/actions/loaders.ts
index 4b179ba891f6..a59b671733b4 100644
--- a/code/core/src/actions/loaders.ts
+++ b/code/core/src/actions/loaders.ts
@@ -37,6 +37,7 @@ const logActionsWhenMockCalled: LoaderFunction = (context) => {
           'next/router::useRouter()',
           'next/navigation::useRouter()',
           'next/navigation::redirect',
+          'next/link::Link',
           'next/cache::',
           'next/headers::cookies().set',
           'next/headers::cookies().delete',
diff --git a/code/core/src/builder-manager/utils/template.ts b/code/core/src/builder-manager/utils/template.ts
index 9fa806bd34a7..f4a23dcfdd60 100644
--- a/code/core/src/builder-manager/utils/template.ts
+++ b/code/core/src/builder-manager/utils/template.ts
@@ -65,6 +65,9 @@ export const renderHTML = async (
       LOGLEVEL: JSON.stringify(await logLevel, null, 2),
       DOCS_OPTIONS: JSON.stringify(await docsOptions, null, 2),
       CONFIG_TYPE: JSON.stringify(await configType, null, 2),
+      // Opt-in via STORYBOOK_DOCGEN_STORY_PREPARED: request server docgen for the Controls panel at
+      // STORY_PREPARED instead of the default STORY_RENDERED. See useStoryDocgenGateReady.
+      DOCGEN_STORY_PREPARED: JSON.stringify(process.env.STORYBOOK_DOCGEN_STORY_PREPARED === 'true'),
       // These two need to be double stringified because the UI expects a string
       VERSIONCHECK: JSON.stringify(JSON.stringify(versionCheck), null, 2),
       PREVIEW_URL: JSON.stringify(previewUrl, null, 2), // global preview URL
diff --git a/code/core/src/components/components/Button/Button.tsx b/code/core/src/components/components/Button/Button.tsx
index 7d1eaf5fff84..9b956b606974 100644
--- a/code/core/src/components/components/Button/Button.tsx
+++ b/code/core/src/components/components/Button/Button.tsx
@@ -5,7 +5,7 @@ import { deprecate } from 'storybook/internal/client-logger';
 
 import { Slot } from '@radix-ui/react-slot';
 import { darken, lighten, rgba, transparentize } from 'polished';
-import { type API_KeyCollection, shortcutToAriaKeyshortcuts } from 'storybook/manager-api';
+import { shortcutToAriaKeyshortcuts, type API_KeyCollection } from 'storybook/manager-api';
 import { isPropValid, styled } from 'storybook/theming';
 
 import { InteractiveTooltipWrapper } from './helpers/InteractiveTooltipWrapper.tsx';
diff --git a/code/core/src/components/components/Toolbar/Toolbar.tsx b/code/core/src/components/components/Toolbar/Toolbar.tsx
index 064af03d9fe6..564e4d85efdd 100644
--- a/code/core/src/components/components/Toolbar/Toolbar.tsx
+++ b/code/core/src/components/components/Toolbar/Toolbar.tsx
@@ -10,6 +10,7 @@ export interface AbstractToolbarProps {
   children?: React.ReactNode;
   'aria-label'?: string;
   'aria-labelledby'?: string;
+  lang?: string;
 }
 
 export const AbstractToolbar: FC<AbstractToolbarProps> = ({
diff --git a/code/core/src/controls/components/ControlsPanel.stories.tsx b/code/core/src/controls/components/ControlsPanel.stories.tsx
index 50f64c4b0c6b..79a9755a52d3 100644
--- a/code/core/src/controls/components/ControlsPanel.stories.tsx
+++ b/code/core/src/controls/components/ControlsPanel.stories.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
 
+import { STORY_FINISHED, STORY_PREPARED } from 'storybook/internal/core-events';
+
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { global } from '@storybook/global';
 
 import { ManagerContext } from 'storybook/manager-api';
-import { expect, fn, within } from 'storybook/test';
+import { expect, fn, waitFor, within } from 'storybook/test';
 
 import { buildQueryState } from '../../shared/open-service/query-state.ts';
 import type { QueryState } from '../../shared/open-service/types.ts';
@@ -68,6 +70,65 @@ const serviceManagerContext: any = {
   },
 };
 
+// Same story, but not yet prepared. Used by the build-mode story to prove docgen is fetched
+// immediately, without waiting for prepare or render.
+const serviceUnpreparedStoryData = {
+  ...serviceStoryData,
+  prepared: false,
+};
+
+const serviceUnpreparedManagerContext: any = {
+  ...serviceManagerContext,
+  api: {
+    ...serviceManagerContext.api,
+    getCurrentStoryData: fn(() => serviceUnpreparedStoryData).mockName('api::getCurrentStoryData'),
+  },
+};
+
+// A real (tiny) channel backing `api.on`/`off`/`emit`, so a story's `play` can emit story lifecycle
+// events (STORY_FINISHED / STORY_PREPARED) and drive the dev-only docgen gate in `ControlsPanel`.
+function createApiChannel() {
+  const listeners = new Map<string, Set<(...args: any[]) => void>>();
+  return {
+    on: fn((type: string, cb: (...args: any[]) => void) => {
+      const set = listeners.get(type) ?? new Set();
+      set.add(cb);
+      listeners.set(type, set);
+    }).mockName('api::on'),
+    off: fn((type: string, cb: (...args: any[]) => void) => {
+      listeners.get(type)?.delete(cb);
+    }).mockName('api::off'),
+    emit: fn((type: string, ...args: any[]) => {
+      listeners.get(type)?.forEach((cb) => cb(...args));
+    }).mockName('api::emit'),
+  };
+}
+
+const serviceRenderChannel = createApiChannel();
+const serviceRenderManagerContext: any = {
+  ...serviceManagerContext,
+  api: {
+    ...serviceManagerContext.api,
+    ...serviceRenderChannel,
+  },
+};
+
+// A prepared story whose annotation argTypes carry no controls — its controls come entirely from
+// docgen. Used to prove the gate shows the loading skeleton (not the "No controls" empty state) while
+// docgen is still pending.
+const serviceNoControlsStoryData = {
+  ...serviceStoryData,
+  argTypes: {},
+};
+
+const serviceNoControlsManagerContext: any = {
+  ...serviceManagerContext,
+  api: {
+    ...serviceManagerContext.api,
+    getCurrentStoryData: fn(() => serviceNoControlsStoryData).mockName('api::getCurrentStoryData'),
+  },
+};
+
 const serviceGetDocgen = Object.assign(
   fn((_input?: { id: string }) => ({
     id: 'example-button',
@@ -131,6 +192,14 @@ export const RefStoryControlsLoad: Story = {
 
 export const ServiceDocgenControlsLoad: Story = {
   args: { docgenService },
+  // Build mode (no dev render gate), so docgen loads and merges into the table immediately.
+  beforeEach: () => {
+    const original = global.CONFIG_TYPE;
+    global.CONFIG_TYPE = 'PRODUCTION';
+    return () => {
+      global.CONFIG_TYPE = original;
+    };
+  },
   decorators: [
     (storyFn) => (
       <ManagerContext.Provider value={serviceManagerContext}>{storyFn()}</ManagerContext.Provider>
@@ -142,6 +211,180 @@ export const ServiceDocgenControlsLoad: Story = {
   },
 };
 
+/**
+ * In dev, the panel must not query docgen until the story has finished (STORY_FINISHED) — even when
+ * the story is already prepared. Querying earlier would make the docgen worker's CPU-bound extraction
+ * compete with the dev server's bundling and the preview's render during the slowest part of first
+ * render. Until then the panel shows the story's own annotation argTypes (here, the `variant` radio),
+ * or a loading skeleton when the story has none — never the "No controls" empty state.
+ */
+export const ServiceDocgenWaitsForStoryFinishedInDev: Story = {
+  args: { docgenService },
+  beforeEach: () => {
+    serviceGetDocgen.mockClear();
+    serviceGetDocgen.get.mockClear();
+    serviceGetDocgen.subscribe.mockClear();
+    const original = global.CONFIG_TYPE;
+    global.CONFIG_TYPE = 'DEVELOPMENT';
+    return () => {
+      global.CONFIG_TYPE = original;
+    };
+  },
+  decorators: [
+    (storyFn) => (
+      <ManagerContext.Provider value={serviceManagerContext}>{storyFn()}</ManagerContext.Provider>
+    ),
+  ],
+  play: async ({ canvas }) => {
+    // No STORY_FINISHED is emitted, so the gate stays closed and the panel shows the story's own
+    // annotation controls. Wait for that row to render (a stable signal that the gate hook mounted),
+    // then assert synchronously that docgen was never queried — a `waitFor` on the negative passes
+    // before mount settles and would miss a next-tick subscription regression.
+    await expect(await canvas.findByText('variant')).toBeInTheDocument();
+    expect(serviceGetDocgen.subscribe).not.toHaveBeenCalled();
+  },
+};
+
+/**
+ * Regression test: while the dev gate is closed and the story has no annotation controls (its
+ * controls come entirely from docgen), the panel must show the loading skeleton — not the "No
+ * controls" empty state. Previously it flashed that empty state for the whole gate window before
+ * docgen resolved and filled the table.
+ */
+export const ServiceDocgenSkeletonWhileGatedWithoutControls: Story = {
+  args: { docgenService },
+  beforeEach: () => {
+    serviceGetDocgen.mockClear();
+    serviceGetDocgen.get.mockClear();
+    serviceGetDocgen.subscribe.mockClear();
+    const original = global.CONFIG_TYPE;
+    global.CONFIG_TYPE = 'DEVELOPMENT';
+    return () => {
+      global.CONFIG_TYPE = original;
+    };
+  },
+  decorators: [
+    (storyFn) => (
+      <ManagerContext.Provider value={serviceNoControlsManagerContext}>
+        {storyFn()}
+      </ManagerContext.Provider>
+    ),
+  ],
+  play: async ({ canvas }) => {
+    // The empty state debounces for 100ms before rendering, so wait past it, then assert it never
+    // appears while the gate is closed and docgen hasn't been queried.
+    await new Promise((resolve) => setTimeout(resolve, 250));
+    await expect(canvas.queryByText('This story has no controls')).not.toBeInTheDocument();
+    await expect(serviceGetDocgen.subscribe).not.toHaveBeenCalled();
+  },
+};
+
+/**
+ * Once the story finishes in dev (STORY_FINISHED), the gate opens and the panel subscribes to docgen,
+ * merging the extracted argTypes into the table.
+ */
+export const ServiceDocgenLoadsAfterStoryFinishedInDev: Story = {
+  args: { docgenService },
+  beforeEach: () => {
+    serviceGetDocgen.mockClear();
+    serviceGetDocgen.get.mockClear();
+    serviceGetDocgen.subscribe.mockClear();
+    const original = global.CONFIG_TYPE;
+    global.CONFIG_TYPE = 'DEVELOPMENT';
+    return () => {
+      global.CONFIG_TYPE = original;
+    };
+  },
+  decorators: [
+    (storyFn) => (
+      <ManagerContext.Provider value={serviceRenderManagerContext}>
+        {storyFn()}
+      </ManagerContext.Provider>
+    ),
+  ],
+  play: async ({ canvas }) => {
+    // Before the story finishes: the gate is closed, so only annotation controls render. Anchor on
+    // that row, then assert synchronously that docgen wasn't queried (deferred, no subscription).
+    await expect(await canvas.findByText('variant')).toBeInTheDocument();
+    expect(serviceGetDocgen.subscribe).not.toHaveBeenCalled();
+    // Simulate the preview reporting the story as finished.
+    serviceRenderChannel.emit(STORY_FINISHED, { storyId: serviceStoryData.id });
+    await expect(await canvas.findByRole('radio', { name: 'primary' })).toBeInTheDocument();
+    await expect(serviceGetDocgen).toHaveBeenCalledWith({ id: 'example-button' });
+  },
+};
+
+/**
+ * With STORYBOOK_DOCGEN_STORY_PREPARED="true" the dev gate opens earlier, at STORY_PREPARED instead of
+ * STORY_FINISHED, so the panel subscribes to docgen as soon as the story module is delivered.
+ */
+export const ServiceDocgenLoadsAfterStoryPreparedInDev: Story = {
+  args: { docgenService },
+  beforeEach: () => {
+    serviceGetDocgen.mockClear();
+    serviceGetDocgen.get.mockClear();
+    serviceGetDocgen.subscribe.mockClear();
+    const originalConfig = global.CONFIG_TYPE;
+    const originalFlag = global.DOCGEN_STORY_PREPARED;
+    global.CONFIG_TYPE = 'DEVELOPMENT';
+    global.DOCGEN_STORY_PREPARED = true;
+    return () => {
+      global.CONFIG_TYPE = originalConfig;
+      global.DOCGEN_STORY_PREPARED = originalFlag;
+    };
+  },
+  decorators: [
+    (storyFn) => (
+      <ManagerContext.Provider value={serviceRenderManagerContext}>
+        {storyFn()}
+      </ManagerContext.Provider>
+    ),
+  ],
+  play: async ({ canvas }) => {
+    // Before any lifecycle event: the gate is closed, only annotation controls render. Anchor on that
+    // row, then assert synchronously that docgen wasn't queried (deferred, no subscription).
+    await expect(await canvas.findByText('variant')).toBeInTheDocument();
+    expect(serviceGetDocgen.subscribe).not.toHaveBeenCalled();
+    // STORY_FINISHED must not open the gate while waiting for STORY_PREPARED. Give a potential
+    // erroneous subscription time to land, then assert it never happened.
+    serviceRenderChannel.emit(STORY_FINISHED, { storyId: serviceStoryData.id });
+    await new Promise((resolve) => setTimeout(resolve, 100));
+    expect(serviceGetDocgen.subscribe).not.toHaveBeenCalled();
+    // STORY_PREPARED opens it.
+    serviceRenderChannel.emit(STORY_PREPARED, { id: serviceStoryData.id });
+    await expect(await canvas.findByRole('radio', { name: 'primary' })).toBeInTheDocument();
+    await expect(serviceGetDocgen).toHaveBeenCalledWith({ id: 'example-button' });
+  },
+};
+
+/**
+ * In a static build docgen is precomputed JSON with no bundling to contend with, so the panel
+ * subscribes to docgen immediately without waiting for the story to prepare or render.
+ */
+export const ServiceDocgenLoadsImmediatelyInBuild: Story = {
+  args: { docgenService },
+  beforeEach: () => {
+    serviceGetDocgen.mockClear();
+    serviceGetDocgen.get.mockClear();
+    serviceGetDocgen.subscribe.mockClear();
+    const original = global.CONFIG_TYPE;
+    global.CONFIG_TYPE = 'PRODUCTION';
+    return () => {
+      global.CONFIG_TYPE = original;
+    };
+  },
+  decorators: [
+    (storyFn) => (
+      <ManagerContext.Provider value={serviceUnpreparedManagerContext}>
+        {storyFn()}
+      </ManagerContext.Provider>
+    ),
+  ],
+  play: async () => {
+    await waitFor(() => expect(serviceGetDocgen).toHaveBeenCalledWith({ id: 'example-button' }));
+  },
+};
+
 // A panel with more controls than fit, plus one edited arg so the "save from controls" bar
 // renders. The bar is absolutely positioned at the bottom of the panel, so the scrollable
 // content must reserve room for it — otherwise the last control sits under the bar (#34531).
diff --git a/code/core/src/controls/components/ControlsPanel.tsx b/code/core/src/controls/components/ControlsPanel.tsx
index 1779ad499800..b37124132fc4 100644
--- a/code/core/src/controls/components/ControlsPanel.tsx
+++ b/code/core/src/controls/components/ControlsPanel.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 
-import type { ArgTypes } from 'storybook/internal/types';
+import { STORY_FINISHED, STORY_PREPARED } from 'storybook/internal/core-events';
+import type { ArgTypes, StoryId } from 'storybook/internal/types';
 
 import { global } from '@storybook/global';
 
@@ -9,6 +10,7 @@ import { mergeServiceArgTypes } from '../../docs-tools/argTypes/docgenServiceArg
 import {
   useArgTypes,
   useArgs,
+  useChannel,
   useGlobals,
   useParameter,
   useServiceQuery,
@@ -33,6 +35,11 @@ const clean = (obj: { [key: string]: any }) =>
     {} as typeof obj
   );
 
+// True when at least one row carries an interactive control, i.e. the args table renders rows instead
+// of its "No controls" empty state. Used to decide between showing controls and the loading skeleton
+// while docgen for the story is still pending, so the empty state never flashes before docgen lands.
+const hasAnyControl = (rows: ArgTypes) => Object.values(rows).some((arg) => arg?.control);
+
 const AddonWrapper = styled.div<{ showSaveFromUI: boolean }>(({ showSaveFromUI, theme }) => ({
   // `minHeight` (not `height`) so the wrapper fills a short panel but grows with tall
   // content; otherwise a fixed height clips the bottom padding into the middle of the
@@ -92,7 +99,7 @@ function ControlsPanelTable({
   const api = useStorybookApi();
   const storyData = api.getCurrentStoryData();
 
-  const hasControls = Object.values(rows).some((arg) => arg?.control);
+  const hasControls = hasAnyControl(rows);
   const withPresetColors = applyPresetColors(rows, presetColors);
 
   const hasUpdatedArgs = useMemo(
@@ -150,22 +157,25 @@ function LegacyControlsPanel(props: ControlsPanelProps) {
   return <ControlsPanelTable {...props} rows={rows} isLoading={isLoading} />;
 }
 
-function ServiceControlsPanel({
+function LoadedServiceControlsPanel({
+  customArgTypes,
   docgenService,
+  id,
+  initialArgs,
+  isStoryPrepared,
+  storyData,
   ...props
-}: ControlsPanelProps & { docgenService: DocgenService }) {
-  const api = useStorybookApi();
-  const storyData = api.getCurrentStoryData();
-  const [, , , initialArgs] = useArgs();
-  // Custom argTypes (project + meta + story annotations) for the selected story arrive over the
-  // channel via STORY_PREPARED. With experimentalDocgenServer, prepareStory skips second-pass
-  // enhancers so these stay annotation-only; mergeServiceArgTypes layers them on server docgen.
-  const customArgTypes = useArgTypes();
-  const id = storyData.id.split('--')[0];
+}: ControlsPanelProps & {
+  customArgTypes: ArgTypes;
+  docgenService: DocgenService;
+  id: string;
+  initialArgs: ReturnType<typeof useArgs>[3];
+  isStoryPrepared: boolean;
+  storyData: ReturnType<ReturnType<typeof useStorybookApi>['getCurrentStoryData']>;
+}) {
   const { data: docgenPayload, isInitialLoading } = useServiceQuery(docgenService.queries.docgen, {
     id,
   });
-  const isStoryPrepared = storyData.type === 'story' ? storyData.prepared : true;
 
   // The manager Controls panel only ever shows the main component's rows; subcomponent tabs are a
   // docs-blocks-only feature, so this intentionally ignores `payload.subcomponents` to match the
@@ -184,8 +194,100 @@ function ServiceControlsPanel({
     [docgenPayload, initialArgs, storyData.id, storyData.parameters, customArgTypes]
   );
 
+  // Keep the skeleton up only while there is genuinely nothing to show: the story isn't prepared, or
+  // docgen is still doing its first load and there are no annotation controls to fall back on. Once
+  // docgen resolves (even to nothing) the table or its "No controls" empty state is the real answer —
+  // never a flash. While docgen loads over already-available annotation controls, show those controls
+  // rather than skeletoning over them.
+  return (
+    <ControlsPanelTable
+      {...props}
+      rows={rows}
+      isLoading={!isStoryPrepared || (isInitialLoading && !hasAnyControl(rows))}
+    />
+  );
+}
+
+// Tracks whether it is safe to query docgen for the selected story, gating the CPU-bound worker
+// extraction out of the first-render window so it never starves the dev server's bundling or the
+// preview's render/paint. The gate resets on every story change.
+//
+// In a static build there is no bundling to contend with and docgen is precomputed JSON, so the gate
+// is open from the start. In dev it opens once the story reaches a safe point in its lifecycle:
+// STORY_FINISHED by default, or — with the STORYBOOK_DOCGEN_STORY_PREPARED env var — the earlier
+// STORY_PREPARED (the story module has been delivered to the browser, before it mounts and paints),
+// trading a slice of the first-render budget for an earlier Controls population. The server reads the
+// env var and injects it into the manager as the DOCGEN_STORY_PREPARED global so it can be evaluated
+// per project.
+function useStoryDocgenGateReady(storyId: StoryId): boolean {
+  const isDevelopment = global.CONFIG_TYPE === 'DEVELOPMENT';
+  const requestAtStoryPrepared = global.DOCGEN_STORY_PREPARED === true;
+  // Key readiness by the story it was opened for (derived during render, not via an effect). On a
+  // story switch this is immediately false for the new id, so we never render one frame with a stale
+  // `ready=true` that would mount the query before the new story emits its gate event.
+  const [readyStoryId, setReadyStoryId] = useState<StoryId | null>(null);
+  const ready = !isDevelopment || readyStoryId === storyId;
+
+  // STORY_PREPARED carries `{ id }`; STORY_FINISHED carries `{ storyId }`.
+  const gateEvent = requestAtStoryPrepared ? STORY_PREPARED : STORY_FINISHED;
+  useChannel(
+    {
+      [gateEvent]: (payload: { id?: StoryId; storyId?: StoryId }) => {
+        const eventStoryId = requestAtStoryPrepared ? payload?.id : payload?.storyId;
+        if (eventStoryId === storyId) {
+          setReadyStoryId(storyId);
+        }
+      },
+    },
+    [storyId, requestAtStoryPrepared, gateEvent]
+  );
+
+  return ready;
+}
+
+function ServiceControlsPanel({
+  docgenService,
+  ...props
+}: ControlsPanelProps & { docgenService: DocgenService }) {
+  const api = useStorybookApi();
+  const storyData = api.getCurrentStoryData();
+  const [, , , initialArgs] = useArgs();
+  // Custom argTypes (project + meta + story annotations) for the selected story arrive over the
+  // channel via STORY_PREPARED. With experimentalDocgenServer, prepareStory skips second-pass
+  // enhancers so these stay annotation-only; mergeServiceArgTypes layers them on server docgen.
+  const customArgTypes = useArgTypes();
+  const id = storyData.id.split('--')[0];
+  const isStory = storyData.type === 'story';
+  // In a static build docgen is precomputed and there is no gate, so the loading decision must not
+  // hang on `prepared` — treat non-development as always prepared. In dev this is unchanged.
+  const isDevelopment = global.CONFIG_TYPE === 'DEVELOPMENT';
+  const isStoryPrepared = !isDevelopment || (isStory ? storyData.prepared : true);
+  // Docs entries don't emit the story lifecycle events the gate listens for, so it only applies to
+  // actual stories; everything else falls through and queries docgen right away.
+  const gateReady = useStoryDocgenGateReady(storyData.id);
+  if (isStory && !gateReady) {
+    // Docgen hasn't been queried yet (the query is gated until the story reaches a safe lifecycle
+    // point). Show the story's own annotation argTypes when it has controls; otherwise keep the
+    // loading skeleton rather than flashing the "No controls" empty state before docgen resolves.
+    return (
+      <ControlsPanelTable
+        {...props}
+        rows={customArgTypes}
+        isLoading={!isStoryPrepared || !hasAnyControl(customArgTypes)}
+      />
+    );
+  }
+
   return (
-    <ControlsPanelTable {...props} rows={rows} isLoading={!isStoryPrepared || isInitialLoading} />
+    <LoadedServiceControlsPanel
+      {...props}
+      customArgTypes={customArgTypes}
+      docgenService={docgenService}
+      id={id}
+      initialArgs={initialArgs}
+      isStoryPrepared={isStoryPrepared}
+      storyData={storyData}
+    />
   );
 }
 
diff --git a/code/core/src/controls/typings.d.ts b/code/core/src/controls/typings.d.ts
index 4a32763646ea..370581ae71e9 100644
--- a/code/core/src/controls/typings.d.ts
+++ b/code/core/src/controls/typings.d.ts
@@ -1,5 +1,6 @@
 declare var DOCS_OPTIONS: any;
 declare var CONFIG_TYPE: 'DEVELOPMENT' | 'PRODUCTION';
+declare var DOCGEN_STORY_PREPARED: boolean;
 declare var PREVIEW_URL: any;
 
 declare var __STORYBOOK_ADDONS_MANAGER: any;
diff --git a/code/core/src/core-server/presets/common-preset.ts b/code/core/src/core-server/presets/common-preset.ts
index 67ba0bf3b2aa..c5d7ac4d9ec6 100644
--- a/code/core/src/core-server/presets/common-preset.ts
+++ b/code/core/src/core-server/presets/common-preset.ts
@@ -21,7 +21,7 @@ import { logger } from 'storybook/internal/node-logger';
 import { telemetry } from 'storybook/internal/telemetry';
 import type {
   CoreConfig,
-  DocgenProvider,
+  DocgenProviderDescriptor,
   Indexer,
   Options,
   PresetProperty,
@@ -31,6 +31,7 @@ import type {
 } from 'storybook/internal/types';
 
 import { registerDocgenService } from '../../shared/open-service/services/docgen/server.ts';
+import { createDocgenWorkerClient } from '../../shared/open-service/services/docgen/worker/docgen-worker-client.ts';
 import { registerModuleGraphService } from '../../shared/open-service/services/module-graph/server.ts';
 import { registerStoryDocsService } from '../../shared/open-service/services/story-docs/server.ts';
 
@@ -234,6 +235,7 @@ export const features: PresetProperty<'features'> = async (existing) => ({
   legacyDecoratorFileOrder: false,
   measure: true,
   outline: true,
+  menuOnboardingChecklist: true,
   sidebarOnboardingChecklist: true,
   viewport: true,
 });
@@ -358,19 +360,30 @@ export const services = async (_value: void, options: Options): Promise<void> =>
   // produce docgen files that wouldn't be served anywhere). Mirrors the !options.ignorePreview
   // gate around index.json and writeManifests in build-static.ts.
   if (features?.experimentalDocgenServer && !options.ignorePreview) {
-    const [docgenProvider, storyDocsProvider] = await Promise.all([
-      options.presets.apply<DocgenProvider>('experimental_docgenProvider', async () => undefined),
+    const [docgenDescriptors, storyDocsProvider] = await Promise.all([
+      options.presets.apply<DocgenProviderDescriptor[]>('experimental_docgenProvider', []),
       options.presets.apply<StoryDocsProvider>(
         'experimental_storyDocsProvider',
         async () => undefined
       ),
     ]);
 
-    registerDocgenService({
-      getIndex: () => storyIndexGenerator.getIndex(),
-      docgenProvider,
-      workingDir: process.cwd(),
-    });
+    // Docgen extraction runs in a long-lived worker so its CPU-bound TypeScript work never starves
+    // the dev-server event loop. The worker composes the descriptor chain; here we forward one
+    // component to it. When the compiled worker script is unavailable (e.g. running from source
+    // without a build) the client is undefined and we skip docgen registration rather than
+    // extracting on the main thread.
+    const docgenWorker =
+      docgenDescriptors.length > 0 ? createDocgenWorkerClient(docgenDescriptors) : undefined;
+
+    if (docgenWorker) {
+      registerDocgenService({
+        getIndex: () => storyIndexGenerator.getIndex(),
+        docgenProvider: (input) => docgenWorker.extract(input.entry),
+        workingDir: process.cwd(),
+      });
+    }
+
     registerStoryDocsService({
       getIndex: () => storyIndexGenerator.getIndex(),
       storyDocsProvider,
diff --git a/code/core/src/core-server/server-channel/review-channel.test.ts b/code/core/src/core-server/server-channel/review-channel.test.ts
index 25cf1620e5d2..5d552e5ab587 100644
--- a/code/core/src/core-server/server-channel/review-channel.test.ts
+++ b/code/core/src/core-server/server-channel/review-channel.test.ts
@@ -59,7 +59,7 @@ const sampleReview: ReviewState = {
 };
 
 describe('initReviewChannel', () => {
-  const NOW = 1_700_000_000_000;
+  const NOW = new Date().getTime();
 
   beforeEach(() => {
     vi.spyOn(Date, 'now').mockReturnValue(NOW);
diff --git a/code/core/src/manager-api/modules/shortcuts.ts b/code/core/src/manager-api/modules/shortcuts.ts
index 75e8d6c6f8d5..c44c098c9041 100644
--- a/code/core/src/manager-api/modules/shortcuts.ts
+++ b/code/core/src/manager-api/modules/shortcuts.ts
@@ -9,6 +9,7 @@ import { global } from '@storybook/global';
 
 import copy from 'copy-to-clipboard';
 
+import { isReviewManagerRoute } from '../../shared/review/routes.ts';
 import type { KeyboardEventLike } from '../lib/shortcut.ts';
 import { eventToShortcut, shortcutMatchesShortcut } from '../lib/shortcut.ts';
 import type { ModuleFn } from '../lib/types.tsx';
@@ -257,16 +258,23 @@ export const init: ModuleFn = ({ store, fullAPI, provider }) => {
 
     // warning: event might not have a full prototype chain because it may originate from the channel
     handleShortcutFeature(feature, event) {
+      const state = store.getState();
       const {
         ui: { enableShortcuts },
         storyId,
         refId,
         viewMode,
-      } = store.getState();
+      } = state;
       if (!enableShortcuts) {
         return;
       }
 
+      const isSidebarShortcutBlocked = isReviewManagerRoute(state.path, state.customQueryParams);
+      const isSidebarShortcutFeature = ['focusNav', 'search', 'toggleNav'].includes(feature);
+      if (isSidebarShortcutBlocked && isSidebarShortcutFeature) {
+        return;
+      }
+
       // Event.prototype.preventDefault is missing when received from the MessageChannel.
       if (event?.preventDefault) {
         event.preventDefault();
diff --git a/code/core/src/manager-api/modules/stories.ts b/code/core/src/manager-api/modules/stories.ts
index 9269871f2a58..4298d9c27103 100644
--- a/code/core/src/manager-api/modules/stories.ts
+++ b/code/core/src/manager-api/modules/stories.ts
@@ -48,9 +48,12 @@ import type {
   Tag,
   TagsOptions,
 } from 'storybook/internal/types';
+import { isReviewManagerRoute } from '../../shared/review/routes.ts';
 
 import { global } from '@storybook/global';
 
+import { BUILT_IN_FILTERS } from '../../shared/constants/tags.ts';
+import { countStatusesByValue } from '../../shared/status-store/index.ts';
 import { getEventMetadata } from '../lib/events.ts';
 import {
   addPreparedStories,
@@ -63,8 +66,6 @@ import type { ModuleFn } from '../lib/types.tsx';
 import { buildNavigationUrl } from '../lib/url.ts';
 import type { ComposedRef } from '../root.tsx';
 import { fullStatusStore } from '../stores/status.ts';
-import { BUILT_IN_FILTERS } from '../../shared/constants/tags.ts';
-import { countStatusesByValue } from '../../shared/status-store/index.ts';
 import { computeStatusFilterFn, parseStatusesParam, serializeStatusesParam } from './statuses.ts';
 import {
   computeStaticFilterFn,
@@ -1053,7 +1054,8 @@ export const init: ModuleFn<SubAPI, SubState> = ({
       if (sourceType === 'local') {
         const state = store.getState();
         const isCanvasRoute =
-          state.path === '/' || state.viewMode === 'story' || state.viewMode === 'docs';
+          !isReviewManagerRoute(state.path, state.customQueryParams) &&
+          (state.path === '/' || state.viewMode === 'story' || state.viewMode === 'docs');
         const stateHasSelection = state.viewMode && state.storyId;
         const stateSelectionDifferent = state.viewMode !== viewMode || state.storyId !== storyId;
         const { type } = state.index?.[state.storyId] || {};
diff --git a/code/core/src/manager-api/modules/url.ts b/code/core/src/manager-api/modules/url.ts
index ade638f283ca..efae5dbd1444 100644
--- a/code/core/src/manager-api/modules/url.ts
+++ b/code/core/src/manager-api/modules/url.ts
@@ -165,6 +165,9 @@ export interface SubAPI {
    * @param {QueryParams} [options.queryParams] - Query params to add to the URL.
    * @param {string} [options.refId] - ID of the ref to get the URL for (for composed Storybooks)
    * @param {string} [options.viewMode] - The view mode to use, defaults to 'story'.
+   * @param {boolean} [options.embed] - Append `embed=true` so the preview broadcasts
+   *   content dimensions to an embedding parent via `iframe.resize` postMessage. Affects
+   *   `previewHref` only.
    * @param {boolean} [options.freeze] - Append the `freeze=finished` preview contract so the
    *   preview settles to a static end frame and blocks interaction. Affects `previewHref` only.
    * @returns {Object} Manager and preview hrefs for the story.
@@ -178,6 +181,7 @@ export interface SubAPI {
       queryParams?: QueryParams;
       refId?: string;
       viewMode?: API_ViewMode;
+      embed?: boolean;
       freeze?: boolean;
     }
   ): { managerHref: string; previewHref: string };
@@ -250,6 +254,7 @@ export const init: ModuleFn<SubAPI, SubState> = (moduleArgs) => {
         queryParams = {},
         refId,
         viewMode = 'story',
+        embed = false,
         freeze = false,
       } = options;
 
@@ -275,11 +280,14 @@ export const init: ModuleFn<SubAPI, SubState> = (moduleArgs) => {
       let globalsParam = inheritGlobals
         ? mergeSerializedParams(customQueryParams?.globals ?? '', globals)
         : globals;
-      let customManagerParams = stringify(otherParams, {
+      const managerQueryParams = omit(otherParams, ['embed', 'freeze']);
+      const previewQueryParams = omit(otherParams, ['id', 'viewMode', 'embed', 'freeze']);
+
+      let customManagerParams = stringify(managerQueryParams, {
         nesting: true,
         nestingSyntax: 'js',
       });
-      let customPreviewParams = stringify(omit(otherParams, ['id', 'viewMode']), {
+      let customPreviewParams = stringify(previewQueryParams, {
         nesting: true,
         nestingSyntax: 'js',
       });
@@ -289,11 +297,12 @@ export const init: ModuleFn<SubAPI, SubState> = (moduleArgs) => {
       customManagerParams = customManagerParams && `&${customManagerParams}`;
       customPreviewParams = customPreviewParams && `&${customPreviewParams}`;
 
+      const embedParam = embed ? '&embed=true' : '';
       const freezeParam = freeze ? '&freeze=finished' : '';
 
       return {
         managerHref: `${managerBase}?path=/${viewMode}/${refId ? `${refId}_` : ''}${storyId}${argsParam}${globalsParam}${customManagerParams}`,
-        previewHref: `${previewBase}?id=${storyId}&viewMode=${viewMode}${refParam}${argsParam}${refId ? '' : globalsParam}${customPreviewParams}${freezeParam}`,
+        previewHref: `${previewBase}?id=${storyId}&viewMode=${viewMode}${refParam}${argsParam}${refId ? '' : globalsParam}${customPreviewParams}${embedParam}${freezeParam}`,
       };
     },
     getQueryParam(key) {
diff --git a/code/core/src/manager-api/tests/url.test.js b/code/core/src/manager-api/tests/url.test.js
index e40b986932d7..a2079ea1f098 100644
--- a/code/core/src/manager-api/tests/url.test.js
+++ b/code/core/src/manager-api/tests/url.test.js
@@ -623,4 +623,37 @@ describe('getStoryHrefs', () => {
     // Freezing is a preview-only contract; the manager href must be unaffected.
     expect(managerHref).toEqual('/?path=/story/test--story');
   });
+
+  it('opts the preview into embed mode when embed is set', () => {
+    const { api, state } = initURL({
+      store,
+      provider: { channel: new EventEmitter() },
+      state: { location: { pathname: '/', search: '' } },
+      navigate: vi.fn(),
+      fullAPI: { getCurrentStoryData: () => ({ id: 'test--story' }) },
+    });
+    store.setState(state);
+
+    const { previewHref } = api.getStoryHrefs('test--story', { embed: true });
+    expect(previewHref).toEqual('/iframe.html?id=test--story&viewMode=story&embed=true');
+  });
+
+  it('includes both embed and freeze when both are set', () => {
+    const { api, state } = initURL({
+      store,
+      provider: { channel: new EventEmitter() },
+      state: { location: { pathname: '/', search: '' } },
+      navigate: vi.fn(),
+      fullAPI: { getCurrentStoryData: () => ({ id: 'test--story' }) },
+    });
+    store.setState(state);
+
+    const { previewHref } = api.getStoryHrefs('test--story', { embed: true, freeze: true });
+    const url = new URL(previewHref, 'http://localhost');
+    expect(url.pathname).toBe('/iframe.html');
+    expect(url.searchParams.get('id')).toBe('test--story');
+    expect(url.searchParams.get('viewMode')).toBe('story');
+    expect(url.searchParams.get('embed')).toBe('true');
+    expect(url.searchParams.get('freeze')).toBe('finished');
+  });
 });
diff --git a/code/core/src/manager/App.tsx b/code/core/src/manager/App.tsx
index b05eeb69bb9d..7cdcd02a83f9 100644
--- a/code/core/src/manager/App.tsx
+++ b/code/core/src/manager/App.tsx
@@ -10,7 +10,7 @@ import { Global, createGlobal } from 'storybook/theming';
 import { ManagerErrorBoundary } from './components/error-boundary/ManagerErrorBoundary.tsx';
 import { Layout } from './components/layout/Layout.tsx';
 import { useLayout } from './components/layout/LayoutProvider.tsx';
-import { ReviewPersistentLayer } from './components/review/ReviewPersistentLayer.tsx';
+import { ReviewPersistentLayer } from './components/review/components/ReviewPersistentLayer.tsx';
 import Panel from './container/Panel.tsx';
 import Preview from './container/Preview.tsx';
 import Sidebar from './container/Sidebar.tsx';
diff --git a/code/core/src/manager/components/layout/Layout.stories.tsx b/code/core/src/manager/components/layout/Layout.stories.tsx
index dc6d7c1baea9..a20a9a61738e 100644
--- a/code/core/src/manager/components/layout/Layout.stories.tsx
+++ b/code/core/src/manager/components/layout/Layout.stories.tsx
@@ -509,13 +509,34 @@ export const MobileDocs = {
   },
 };
 
-export const MobilePages: Story = {
+export const MobileReview: Story = {
   ...Mobile,
   args: {
     managerLayoutState: { ...defaultState, viewMode: 'review' },
   },
+  decorators: [
+    (Story) => (
+      <ManagerContext.Provider
+        value={{
+          ...mockManagerStore,
+          state: {
+            ...mockManagerStore.state,
+            path: '/review/',
+            viewMode: 'review',
+            customQueryParams: {},
+          },
+          api: {
+            ...mockManagerStore.api,
+            getIsNavShown: fn(() => true),
+          },
+        }}
+      >
+        <Story />
+      </ManagerContext.Provider>
+    ),
+  ],
   play: async ({ canvas }) => {
     expect(canvas.queryByLabelText('Open navigation menu')).not.toBeInTheDocument();
-    expect(canvas.getByTestId('page')).toBeInTheDocument();
+    expect(canvas.getByTestId('preview')).toBeInTheDocument();
   },
 };
diff --git a/code/core/src/manager/components/layout/Layout.tsx b/code/core/src/manager/components/layout/Layout.tsx
index d1982437a150..25f2db1fb6bd 100644
--- a/code/core/src/manager/components/layout/Layout.tsx
+++ b/code/core/src/manager/components/layout/Layout.tsx
@@ -3,9 +3,11 @@ import React, { useEffect, useLayoutEffect, useState } from 'react';
 
 import type { API_Layout, API_ViewMode } from 'storybook/internal/types';
 
-import { type API, useStorybookApi } from 'storybook/manager-api';
+import { useStorybookApi, useStorybookState, type API } from 'storybook/manager-api';
 import { styled } from 'storybook/theming';
 
+import { isReviewManagerRoute } from '../../../shared/review/routes.ts';
+
 import { MEDIA_DESKTOP_BREAKPOINT, MINIMUM_CONTENT_WIDTH_PX } from '../../constants.ts';
 import { Notifications } from '../../container/Notifications.tsx';
 import { MobileNavigation } from '../mobile/navigation/MobileNavigation.tsx';
@@ -107,7 +109,8 @@ const useLayoutSyncingState = ({
   const isPagesShown =
     managerLayoutState.viewMode !== undefined &&
     managerLayoutState.viewMode !== 'story' &&
-    managerLayoutState.viewMode !== 'docs';
+    managerLayoutState.viewMode !== 'docs' &&
+    managerLayoutState.viewMode !== 'review';
   const isPanelShown = managerLayoutState.viewMode === 'story' && !hasTab;
 
   const { navSize, rightPanelWidth, bottomPanelHeight } = internalDraggingSizeState.isDragging
@@ -148,6 +151,9 @@ const OrderedMobileNavigation = styled(MobileNavigation)({
 export const Layout = ({ managerLayoutState, setManagerLayoutState, hasTab, ...slots }: Props) => {
   const { isDesktop, isMobile } = useLayout();
   const api = useStorybookApi();
+  const { path, customQueryParams } = useStorybookState();
+  const showSidebar =
+    (api.getIsNavShown?.() ?? true) && !isReviewManagerRoute(path, customQueryParams);
 
   const {
     navSize,
@@ -169,6 +175,7 @@ export const Layout = ({ managerLayoutState, setManagerLayoutState, hasTab, ...s
     <LayoutContainer
       panelPosition={managerLayoutState.panelPosition}
       showPanel={showPanel}
+      showSidebar={showSidebar}
       style={
         {
           '--nav-width': `${navSize}px`,
@@ -178,7 +185,7 @@ export const Layout = ({ managerLayoutState, setManagerLayoutState, hasTab, ...s
       }
     >
       <>
-        {isDesktop && (
+        {isDesktop && showSidebar && (
           <SidebarContainer
             navSize={navSize}
             sidebarMaxWidth={sidebarMaxWidth}
@@ -191,6 +198,7 @@ export const Layout = ({ managerLayoutState, setManagerLayoutState, hasTab, ...s
           <OrderedMobileNavigation
             menu={slots.slotSidebar}
             panel={slots.slotPanel}
+            showMenu={showSidebar}
             showPanel={showPanel}
           />
         )}
@@ -221,7 +229,8 @@ export const Layout = ({ managerLayoutState, setManagerLayoutState, hasTab, ...s
 const LayoutContainer = styled.div<{
   panelPosition: LayoutState['panelPosition'];
   showPanel: boolean;
-}>(({ panelPosition, showPanel }) => ({
+  showSidebar: boolean;
+}>(({ panelPosition, showPanel, showSidebar }) => ({
   width: '100%',
   height: ['100vh', '100dvh'],
   overflow: 'hidden',
@@ -232,21 +241,33 @@ const LayoutContainer = styled.div<{
   [MEDIA_DESKTOP_BREAKPOINT]: {
     display: 'grid',
     gap: 0,
-    // This uses CSS variables to prevent Emotion from generating a new CSS className for every possible value
-    gridTemplateColumns: `minmax(0, var(--nav-width)) minmax(${MINIMUM_CONTENT_WIDTH_PX}px, 1fr) minmax(0, var(--right-panel-width))`,
+    gridTemplateColumns: showSidebar
+      ? `minmax(0, var(--nav-width)) minmax(${MINIMUM_CONTENT_WIDTH_PX}px, 1fr) minmax(0, var(--right-panel-width))`
+      : `minmax(${MINIMUM_CONTENT_WIDTH_PX}px, 1fr) minmax(0, var(--right-panel-width))`,
     gridTemplateRows: `1fr minmax(0, var(--bottom-panel-height))`,
     gridTemplateAreas: (() => {
+      if (!showSidebar && !showPanel) {
+        return `"content content"
+                "content content"`;
+      }
+      if (!showSidebar && showPanel) {
+        if (panelPosition === 'right') {
+          return `"content panel"
+                  "content panel"`;
+        }
+        return `"content content"
+                "panel   panel"`;
+      }
       if (!showPanel) {
-        // showPanel is false by default when viewMode is not 'story', but can be overridden by the user
         return `"sidebar content content"
-                  "sidebar content content"`;
+                "sidebar content content"`;
       }
       if (panelPosition === 'right') {
         return `"sidebar content panel"
-                  "sidebar content panel"`;
+                "sidebar content panel"`;
       }
       return `"sidebar content content"
-                "sidebar panel   panel"`;
+              "sidebar panel   panel"`;
     })(),
   },
 }));
diff --git a/code/core/src/manager/components/mobile/navigation/MobileNavigation.tsx b/code/core/src/manager/components/mobile/navigation/MobileNavigation.tsx
index 05c442b090a4..4bf2faf65eb0 100644
--- a/code/core/src/manager/components/mobile/navigation/MobileNavigation.tsx
+++ b/code/core/src/manager/components/mobile/navigation/MobileNavigation.tsx
@@ -1,5 +1,5 @@
-import React, { useRef } from 'react';
 import type { ComponentProps, FC } from 'react';
+import React, { useLayoutEffect, useRef } from 'react';
 
 import { Button } from 'storybook/internal/components';
 import type { API_IndexHash, API_Refs } from 'storybook/internal/types';
@@ -18,6 +18,7 @@ import { MobileMenuDrawer } from './MobileMenuDrawer.tsx';
 interface MobileNavigationProps {
   menu?: React.ReactNode;
   panel?: React.ReactNode;
+  showMenu?: boolean;
   showPanel: boolean;
 }
 
@@ -75,6 +76,7 @@ interface MobileBottomBarContentProps {
   setMobileMenuOpen: (isOpen: boolean) => void;
   isMobilePanelOpen: boolean;
   setMobilePanelOpen: (isOpen: boolean) => void;
+  showMenu: boolean;
   showPanel: boolean;
 }
 
@@ -91,6 +93,7 @@ const MobileBottomBarContent: FC<MobileBottomBarContentProps> = ({
   setMobileMenuOpen,
   isMobilePanelOpen,
   setMobilePanelOpen,
+  showMenu,
   showPanel,
 }) => {
   const headingId = useId();
@@ -105,17 +108,19 @@ const MobileBottomBarContent: FC<MobileBottomBarContentProps> = ({
       <h2 id={headingId} className="sb-sr-only">
         Navigation controls
       </h2>
-      <BottomBarButton
-        padding="small"
-        variant="ghost"
-        onClick={() => setMobileMenuOpen(!isMobileMenuOpen)}
-        ariaLabel="Open navigation menu"
-        aria-expanded={isMobileMenuOpen}
-        aria-controls="storybook-mobile-menu"
-      >
-        <MenuIcon />
-        <Text>{fullStoryName}</Text>
-      </BottomBarButton>
+      {showMenu && (
+        <BottomBarButton
+          padding="small"
+          variant="ghost"
+          onClick={() => setMobileMenuOpen(!isMobileMenuOpen)}
+          ariaLabel="Open navigation menu"
+          aria-expanded={isMobileMenuOpen}
+          aria-controls="storybook-mobile-menu"
+        >
+          <MenuIcon />
+          <Text>{fullStoryName}</Text>
+        </BottomBarButton>
+      )}
       <span className="sb-sr-only" aria-current="page">
         {fullStoryName}
       </span>
@@ -138,6 +143,7 @@ const MobileBottomBarContent: FC<MobileBottomBarContentProps> = ({
 export const MobileNavigation: FC<MobileNavigationProps & ComponentProps<typeof Container>> = ({
   menu,
   panel,
+  showMenu = true,
   showPanel,
   ...props
 }) => {
@@ -145,15 +151,23 @@ export const MobileNavigation: FC<MobileNavigationProps & ComponentProps<typeof
     useLayout();
   const fullStoryName = useFullStoryName();
 
+  useLayoutEffect(() => {
+    if (!showMenu) {
+      setMobileMenuOpen(false);
+    }
+  }, [showMenu, setMobileMenuOpen]);
+
   return (
     <Container {...props}>
-      <MobileMenuDrawer
-        id="storybook-mobile-menu"
-        isOpen={isMobileMenuOpen}
-        onOpenChange={setMobileMenuOpen}
-      >
-        {menu}
-      </MobileMenuDrawer>
+      {showMenu && (
+        <MobileMenuDrawer
+          id="storybook-mobile-menu"
+          isOpen={isMobileMenuOpen}
+          onOpenChange={setMobileMenuOpen}
+        >
+          {menu}
+        </MobileMenuDrawer>
+      )}
 
       <MobileAddonsDrawer
         id="storybook-mobile-addon-panel"
@@ -163,13 +177,14 @@ export const MobileNavigation: FC<MobileNavigationProps & ComponentProps<typeof
         {panel}
       </MobileAddonsDrawer>
 
-      {!isMobilePanelOpen && (
+      {!isMobilePanelOpen && (showMenu || showPanel) && (
         <MobileBottomBarContent
           fullStoryName={fullStoryName}
           isMobileMenuOpen={isMobileMenuOpen}
           setMobileMenuOpen={setMobileMenuOpen}
           isMobilePanelOpen={isMobilePanelOpen}
           setMobilePanelOpen={setMobilePanelOpen}
+          showMenu={showMenu}
           showPanel={showPanel}
         />
       )}
diff --git a/code/core/src/manager/components/preview/Preview.tsx b/code/core/src/manager/components/preview/Preview.tsx
index 6275c497ee29..6f88b53e34d9 100644
--- a/code/core/src/manager/components/preview/Preview.tsx
+++ b/code/core/src/manager/components/preview/Preview.tsx
@@ -10,10 +10,11 @@ import { global } from '@storybook/global';
 
 import type { TabListState } from '@react-stately/tabs';
 import { Helmet } from 'react-helmet-async';
-import { type Combo, Consumer, addons, merge, types } from 'storybook/manager-api';
+import { Consumer, addons, merge, types, type Combo } from 'storybook/manager-api';
 
 import { useLandmark } from '../../hooks/useLandmark.ts';
-import { ReviewToolbarHeader } from '../review/ReviewToolbarHeader.tsx';
+import { REVIEW_COLLECTION_QUERY_PARAM } from '../../../shared/review/routes.ts';
+import { ReviewToolbarHeader } from '../review/components/ReviewToolbarHeader.tsx';
 import { FramesRenderer } from './FramesRenderer.tsx';
 import { ToolbarComp } from './Toolbar.tsx';
 import { ApplyWrappers } from './Wrappers.tsx';
@@ -59,6 +60,7 @@ const Preview = React.memo<PreviewProps>(function Preview(props) {
     tabs,
     wrappers,
     tabId,
+    queryParams,
   } = props;
 
   // SB11: remove code
@@ -90,6 +92,8 @@ const Preview = React.memo<PreviewProps>(function Preview(props) {
   const shouldScale = viewMode === 'story';
   const { showToolbar } = options;
   const customisedShowToolbar = api.getShowToolbarWithCustomisations(showToolbar);
+  const isReviewCollectionStory =
+    viewMode === 'story' && queryParams?.[REVIEW_COLLECTION_QUERY_PARAM] !== undefined;
 
   const previousStoryId = useRef(storyId);
 
@@ -128,7 +132,7 @@ const Preview = React.memo<PreviewProps>(function Preview(props) {
       )}
       <ZoomProvider shouldScale={shouldScale}>
         <S.PreviewContainer>
-          {customisedShowToolbar && viewMode === 'story' ? <ReviewToolbarHeader /> : null}
+          {customisedShowToolbar && isReviewCollectionStory ? <ReviewToolbarHeader /> : null}
           <ToolbarComp
             key="tools"
             isShown={customisedShowToolbar}
diff --git a/code/core/src/manager/components/preview/Toolbar.tsx b/code/core/src/manager/components/preview/Toolbar.tsx
index 1b76107e7da9..8981ed94ead4 100644
--- a/code/core/src/manager/components/preview/Toolbar.tsx
+++ b/code/core/src/manager/components/preview/Toolbar.tsx
@@ -1,23 +1,24 @@
 import React, { useRef } from 'react';
 
 import { AbstractToolbar, Button, Separator, TabList } from 'storybook/internal/components';
-import { type Addon_BaseType, Addon_TypesEnum } from 'storybook/internal/types';
+import { Addon_TypesEnum, type Addon_BaseType } from 'storybook/internal/types';
 
 import { CloseIcon, ExpandIcon } from '@storybook/icons';
 
 import type { TabListState } from '@react-stately/tabs';
 import {
-  type API,
-  type Combo,
   Consumer,
-  type LeafEntry,
-  type State,
   addons,
   merge,
   types,
+  type API,
+  type Combo,
+  type LeafEntry,
+  type State,
 } from 'storybook/manager-api';
 import { styled } from 'storybook/theming';
 
+import { isReviewManagerRoute } from '../../../shared/review/routes.ts';
 import { useLandmark } from '../../hooks/useLandmark.ts';
 import { useLayout } from '../layout/LayoutProvider.tsx';
 import type { PreviewProps } from './utils/types.tsx';
@@ -32,6 +33,7 @@ const fullScreenMapper = ({ api, state }: Combo) => {
     shortcut: api.getShortcutKeys().fullScreen,
     hasPanel: Object.keys(api.getElements(Addon_TypesEnum.PANEL)).length > 0,
     singleStory: state.singleStory,
+    isReviewRoute: isReviewManagerRoute(state.path, state.customQueryParams),
   };
 };
 
@@ -50,7 +52,8 @@ export const fullScreenTool: Addon_BaseType = {
 
     return (
       <Consumer filter={fullScreenMapper}>
-        {({ toggle, isFullscreen, shortcut, hasPanel, singleStory }) =>
+        {({ toggle, isFullscreen, shortcut, hasPanel, singleStory, isReviewRoute }) =>
+          !isReviewRoute &&
           (!singleStory || (singleStory && hasPanel)) && (
             <Button
               key="full"
diff --git a/code/core/src/manager/components/preview/tools/menu.tsx b/code/core/src/manager/components/preview/tools/menu.tsx
index 00009a30517a..784321ba3047 100644
--- a/code/core/src/manager/components/preview/tools/menu.tsx
+++ b/code/core/src/manager/components/preview/tools/menu.tsx
@@ -9,11 +9,12 @@ import { Consumer, types } from 'storybook/manager-api';
 import type { Combo } from 'storybook/manager-api';
 
 import { focusableUIElements } from '../../../../manager-api/modules/layout.ts';
+import { isReviewManagerRoute } from '../../../../shared/review/routes.ts';
 
 const menuMapper = ({ api, state }: Combo) => ({
   isVisible: api.getIsNavShown(),
   singleStory: state.singleStory,
-  viewMode: state.viewMode,
+  isReviewCollectionStory: isReviewManagerRoute(state.path, state.customQueryParams),
   showSidebar: async (forceFocus: boolean) => {
     api.toggleNav(true);
     api.focusOnUIElement(focusableUIElements.sidebarRegion, {
@@ -32,9 +33,10 @@ export const menuTool: Addon_BaseType = {
   render: () => {
     return (
       <Consumer filter={menuMapper}>
-        {({ isVisible, showSidebar, singleStory }) =>
+        {({ isVisible, showSidebar, singleStory, isReviewCollectionStory }) =>
           !singleStory &&
-          !isVisible && (
+          !isVisible &&
+          !isReviewCollectionStory && (
             <>
               <Button
                 padding="small"
diff --git a/code/core/src/manager/components/review/ReviewPage.stories.tsx b/code/core/src/manager/components/review/ReviewPage.stories.tsx
index 656bc0337aa7..9d77ef0012a6 100644
--- a/code/core/src/manager/components/review/ReviewPage.stories.tsx
+++ b/code/core/src/manager/components/review/ReviewPage.stories.tsx
@@ -1,26 +1,36 @@
-import React, { type ReactNode } from 'react';
+import React, { useContext, useMemo, useState, type ReactNode } from 'react';
 
-import { expect, fn, userEvent, within } from 'storybook/test';
+import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
 
+import { Location, MemoryRouter, parsePath, queryFromLocation } from 'storybook/internal/router';
+import type { API_Notification } from 'storybook/internal/types';
 import {
   ManagerContext,
+  internal_fullStatusStore,
   type API,
   type State,
-  internal_fullStatusStore,
 } from 'storybook/manager-api';
-import { Location, MemoryRouter, parsePath, queryFromLocation } from 'storybook/internal/router';
 
 import preview from '../../../../../.storybook/preview.tsx';
-import { EVENTS } from './constants.ts';
-import { ReviewProvider } from './ReviewProvider.tsx';
-import { ReviewSummaryPortal } from './ReviewSummaryPortal.tsx';
-import { ReviewToolbarHeader } from './ReviewToolbarHeader.tsx';
+import { LayoutProvider } from '../layout/LayoutProvider.tsx';
+import { NotificationList } from '../notifications/NotificationList.tsx';
+import { ReviewNotification } from './components/ReviewNotification.tsx';
+import { ReviewProvider } from './components/ReviewProvider.tsx';
+import { ReviewToolbarHeader } from './components/ReviewToolbarHeader.tsx';
+import {
+  EVENTS,
+  NOTIFIED_REVIEW_CREATED_AT_KEY,
+  VISITED_REVIEW_CREATED_AT_KEY,
+  reviewAvailableNotificationId,
+} from './constants.ts';
 import {
   REVIEW_COLLECTION_QUERY_PARAM,
   buildReviewStoryHref,
   isReviewSummaryPath,
 } from './review-navigation.ts';
 import type { ReviewState } from './review-state.ts';
+import { reviewStore } from './review-store.ts';
+import { ReviewSummaryPortal } from './screens/ReviewSummaryPortal.tsx';
 
 type EventListener = (payload?: unknown) => void;
 
@@ -44,6 +54,11 @@ const emitMock = fn((eventName: string, payload?: unknown) => {
   });
 });
 const toggleNavMock = fn();
+const navigateMock = fn().mockName('api::navigate');
+const setQueryParamsMock = fn().mockName('api::setQueryParams');
+const addNotificationMock = fn().mockName('api::addNotification');
+const clearNotificationMock = fn().mockName('api::clearNotification');
+let mockUrlState = { path: '/review/', queryParams: {} as Record<string, string> };
 const managerState: State = {
   index: {
     'manager-settings-checklist--default': {
@@ -82,16 +97,21 @@ const managerApi: API = {
   resetStatusFilters: fn().mockName('api::resetStatusFilters'),
   addStatusFilters: fn().mockName('api::addStatusFilters'),
   removeStatusFilters: fn().mockName('api::removeStatusFilters'),
-  getStoryHrefs: (storyId: string, options?: { freeze?: boolean }) => ({
+  getStoryHrefs: (storyId: string, options?: { embed?: boolean; freeze?: boolean }) => ({
     managerHref: `?path=/story/${storyId}`,
-    previewHref: `iframe.html?id=${storyId}&viewMode=story${options?.freeze ? '&freeze=finished' : ''}`,
+    previewHref: `iframe.html?id=${storyId}&viewMode=story${options?.embed ? '&embed=true' : ''}${options?.freeze ? '&freeze=finished' : ''}`,
   }),
+  navigate: navigateMock,
+  setQueryParams: setQueryParamsMock,
+  addNotification: addNotificationMock,
+  clearNotification: clearNotificationMock,
+  getUrlState: () => mockUrlState,
 } as unknown as API;
 
 const reviewState: ReviewState = {
   title: 'Manager settings polish',
   description: 'Updated settings views and spacing.',
-  createdAt: Date.now(),
+  createdAt: new Date().getTime(),
   collections: [
     {
       title: 'Settings',
@@ -124,6 +144,64 @@ const ReviewHarness = () => (
   </ReviewProvider>
 );
 
+const ReviewOutsideHarness = () => (
+  <ReviewProvider>
+    <ReviewNotification />
+    <ReviewToolbarHeader />
+    <ReviewSummaryPortal />
+  </ReviewProvider>
+);
+
+/** Renders sidebar notifications so review notification stories are visually accurate. */
+const ReviewOutsideWithNotificationsHarness = () => {
+  const parent = useContext(ManagerContext);
+  const [notifications, setNotifications] = useState<API_Notification[]>([]);
+
+  const api = useMemo(
+    () => ({
+      ...parent.api,
+      addNotification: (notification: API_Notification) => {
+        addNotificationMock(notification);
+        setNotifications((current) => [
+          ...current.filter((item) => item.id !== notification.id),
+          notification,
+        ]);
+      },
+      clearNotification: (id: string) => {
+        clearNotificationMock(id);
+        setNotifications((current) => current.filter((item) => item.id !== id));
+      },
+    }),
+    [parent.api]
+  );
+
+  return (
+    <ManagerContext.Provider value={{ state: parent.state, api }}>
+      <LayoutProvider forceDesktop>
+        <ReviewProvider>
+          <ReviewNotification />
+          <ReviewToolbarHeader />
+          <ReviewSummaryPortal />
+        </ReviewProvider>
+        <div
+          style={{
+            position: 'fixed',
+            bottom: 20,
+            left: 20,
+            width: 240,
+            zIndex: 200,
+          }}
+        >
+          <NotificationList
+            notifications={notifications}
+            clearNotification={api.clearNotification}
+          />
+        </div>
+      </LayoutProvider>
+    </ManagerContext.Provider>
+  );
+};
+
 const deriveViewMode = (path: string): State['viewMode'] => {
   if (path.startsWith('/story/') || path.startsWith('/docs/')) {
     return parsePath(path).viewMode as State['viewMode'];
@@ -160,6 +238,8 @@ const ManagerStateSync = ({
         customQueryParams,
       } as State;
 
+      mockUrlState = { path, queryParams: customQueryParams };
+
       return (
         <ManagerContext.Provider value={{ state, api: managerApi }}>
           {children}
@@ -192,11 +272,16 @@ const meta = preview.meta({
     ),
   ],
   beforeEach: () => {
+    reviewStore.reset();
     eventListeners.clear();
     onMock.mockReset();
     offMock.mockReset();
     emitMock.mockReset();
     toggleNavMock.mockReset();
+    navigateMock.mockReset();
+    setQueryParamsMock.mockReset();
+    addNotificationMock.mockReset();
+    clearNotificationMock.mockReset();
     sessionStorage.clear();
     internal_fullStatusStore.unset();
     // Mark one reviewed story as newly added (via change detection) so the
@@ -267,6 +352,7 @@ export const PendingUpdateDeferred = meta.story({
 });
 
 export const PendingUpdateAccept = meta.story({
+  render: () => <ReviewOutsideHarness />,
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await expect(emitMock).toHaveBeenCalledWith(EVENTS.REQUEST_REVIEW);
@@ -275,12 +361,17 @@ export const PendingUpdateAccept = meta.story({
     await expect(await canvas.findByText('Manager settings polish')).toBeInTheDocument();
 
     emitMock(EVENTS.DISPLAY_REVIEW, updatedReviewState);
-
+    clearNotificationMock.mockClear();
+    addNotificationMock.mockClear();
     await expect(await canvas.findByRole('status')).toBeInTheDocument();
     await userEvent.click(await canvas.findByRole('button', { name: 'Update' }));
 
     await expect(await canvas.findByText('Updated manager settings polish')).toBeInTheDocument();
-    expect(canvas.queryByText('An updated review is available.')).not.toBeInTheDocument();
+    expect(canvas.queryByText('A new review is available.')).not.toBeInTheDocument();
+    await expect(clearNotificationMock).toHaveBeenCalledWith(
+      reviewAvailableNotificationId(updatedReviewState.createdAt!)
+    );
+    expect(addNotificationMock).not.toHaveBeenCalled();
   },
 });
 
@@ -328,3 +419,189 @@ export const PendingUpdateSupersedesStale = meta.story({
     expect(canvas.queryByText(/Code changes detected/)).not.toBeInTheDocument();
   },
 });
+
+export const ShowsNotificationForEachNewReview = meta.story({
+  render: () => <ReviewOutsideHarness />,
+  parameters: {
+    routerInitialEntries: ['/?path=/story/manager-settings-guidepage--default'],
+    managerState: {
+      path: '/story/manager-settings-guidepage--default',
+      viewMode: 'story',
+    },
+  },
+  play: async () => {
+    await expect(emitMock).toHaveBeenCalledWith(EVENTS.REQUEST_REVIEW);
+    emitMock(EVENTS.DISPLAY_REVIEW, reviewState);
+    await waitFor(() =>
+      expect(addNotificationMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          id: reviewAvailableNotificationId(reviewState.createdAt!),
+        })
+      )
+    );
+
+    addNotificationMock.mockClear();
+    clearNotificationMock.mockClear();
+    sessionStorage.setItem(VISITED_REVIEW_CREATED_AT_KEY, String(reviewState.createdAt));
+
+    emitMock(EVENTS.DISPLAY_REVIEW, updatedReviewState);
+    await waitFor(() =>
+      expect(clearNotificationMock).toHaveBeenCalledWith(
+        reviewAvailableNotificationId(reviewState.createdAt!)
+      )
+    );
+    await waitFor(() =>
+      expect(addNotificationMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          id: reviewAvailableNotificationId(updatedReviewState.createdAt!),
+          content: expect.objectContaining({ headline: 'New review available' }),
+        })
+      )
+    );
+  },
+});
+
+export const ShowsNotificationForUnseenReview = meta.story({
+  render: () => <ReviewOutsideWithNotificationsHarness />,
+  parameters: {
+    routerInitialEntries: ['/?path=/story/manager-settings-guidepage--default'],
+    managerState: {
+      path: '/story/manager-settings-guidepage--default',
+      viewMode: 'story',
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(emitMock).toHaveBeenCalledWith(EVENTS.REQUEST_REVIEW);
+    emitMock(EVENTS.DISPLAY_REVIEW, reviewState);
+    expect(navigateMock).not.toHaveBeenCalled();
+    await waitFor(() =>
+      expect(addNotificationMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          id: reviewAvailableNotificationId(reviewState.createdAt!),
+          content: expect.objectContaining({ headline: 'New review available' }),
+        })
+      )
+    );
+    await expect(await canvas.findByText('New review available')).toBeInTheDocument();
+    expect(canvas.queryByText('A new review is available.')).not.toBeInTheDocument();
+  },
+});
+
+export const DismissesNotificationOnReviewVisit = meta.story({
+  render: () => <ReviewOutsideWithNotificationsHarness />,
+  parameters: {
+    routerInitialEntries: ['/?path=/review/'],
+    managerState: {
+      path: '/review/',
+      viewMode: 'review',
+    },
+  },
+  beforeEach: () => {
+    sessionStorage.removeItem(NOTIFIED_REVIEW_CREATED_AT_KEY);
+    sessionStorage.removeItem(VISITED_REVIEW_CREATED_AT_KEY);
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    try {
+      sessionStorage.setItem(NOTIFIED_REVIEW_CREATED_AT_KEY, String(reviewState.createdAt));
+      emitMock(EVENTS.DISPLAY_REVIEW, reviewState);
+      await waitFor(() =>
+        expect(clearNotificationMock).toHaveBeenCalledWith(
+          reviewAvailableNotificationId(reviewState.createdAt!)
+        )
+      );
+      expect(addNotificationMock).not.toHaveBeenCalled();
+      expect(sessionStorage.getItem(VISITED_REVIEW_CREATED_AT_KEY)).toBe(
+        String(reviewState.createdAt)
+      );
+      expect(canvas.queryByText('New review available')).not.toBeInTheDocument();
+    } finally {
+      sessionStorage.removeItem(NOTIFIED_REVIEW_CREATED_AT_KEY);
+      sessionStorage.removeItem(VISITED_REVIEW_CREATED_AT_KEY);
+    }
+  },
+});
+
+export const HidesNotificationAfterReviewVisited = meta.story({
+  render: () => <ReviewOutsideHarness />,
+  parameters: {
+    routerInitialEntries: ['/?path=/story/manager-settings-guidepage--default'],
+    managerState: {
+      path: '/story/manager-settings-guidepage--default',
+      viewMode: 'story',
+    },
+  },
+  beforeEach: () => {
+    sessionStorage.setItem(VISITED_REVIEW_CREATED_AT_KEY, String(reviewState.createdAt));
+  },
+  play: async () => {
+    await expect(emitMock).toHaveBeenCalledWith(EVENTS.REQUEST_REVIEW);
+    emitMock(EVENTS.DISPLAY_REVIEW, reviewState);
+    expect(addNotificationMock).not.toHaveBeenCalled();
+    expect(navigateMock).not.toHaveBeenCalled();
+  },
+});
+
+export const NotificationClickFromStoryNavigatesAndDismisses = meta.story({
+  render: () => <ReviewOutsideHarness />,
+  parameters: {
+    routerInitialEntries: ['/?path=/story/manager-settings-guidepage--default'],
+    managerState: {
+      path: '/story/manager-settings-guidepage--default',
+      viewMode: 'story',
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const freshReviewState = {
+      ...reviewState,
+      createdAt: reviewState.createdAt! + 120_000,
+    };
+    await expect(emitMock).toHaveBeenCalledWith(EVENTS.REQUEST_REVIEW);
+    emitMock(EVENTS.DISPLAY_REVIEW, freshReviewState);
+    await waitFor(() =>
+      expect(addNotificationMock).toHaveBeenCalledWith(
+        expect.objectContaining({
+          id: reviewAvailableNotificationId(freshReviewState.createdAt!),
+        })
+      )
+    );
+
+    const notification = addNotificationMock.mock.calls[0][0];
+    clearNotificationMock.mockClear();
+    addNotificationMock.mockClear();
+
+    notification.onClick({ onDismiss: () => clearNotificationMock(notification.id) });
+
+    await expect(await canvas.findByText('Manager settings polish')).toBeInTheDocument();
+    await expect(clearNotificationMock).toHaveBeenCalledWith(
+      reviewAvailableNotificationId(freshReviewState.createdAt!)
+    );
+    expect(addNotificationMock).not.toHaveBeenCalled();
+    emitMock(EVENTS.DISPLAY_REVIEW, freshReviewState);
+    expect(addNotificationMock).not.toHaveBeenCalled();
+  },
+});
+
+export const SummaryStateSurvivesReviewReplay = meta.story({
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    applyReviewState();
+
+    const collapseButton = await canvas.findByRole('button', {
+      name: 'Collapse collection Settings',
+    });
+    await userEvent.click(collapseButton);
+    await expect(
+      await canvas.findByRole('button', { name: 'Expand collection Settings' })
+    ).toHaveAttribute('aria-expanded', 'false');
+
+    // Another tab's REQUEST_REVIEW replays the cached review to every open tab.
+    emitMock(EVENTS.DISPLAY_REVIEW, { ...reviewState });
+
+    await expect(
+      canvas.getByRole('button', { name: 'Expand collection Settings' })
+    ).toHaveAttribute('aria-expanded', 'false');
+  },
+});
diff --git a/code/core/src/manager/components/review/ReviewPersistentLayer.tsx b/code/core/src/manager/components/review/ReviewPersistentLayer.tsx
deleted file mode 100644
index 7288bd783252..000000000000
--- a/code/core/src/manager/components/review/ReviewPersistentLayer.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React, { type FC } from 'react';
-
-import { useChannel, useStorybookApi } from 'storybook/manager-api';
-
-import { ReviewProvider, isReviewPath } from './ReviewProvider.tsx';
-import { ReviewSummaryPortal } from './ReviewSummaryPortal.tsx';
-import { EVENTS, REVIEW_CHANGES_URL } from './constants.ts';
-import { useReviewNavigationInterceptor } from './useReviewNavigationInterceptor.ts';
-import { useReviewShortcuts } from './useReviewShortcuts.ts';
-
-const ReviewNavigationLayer: FC = () => {
-  const api = useStorybookApi();
-  useReviewNavigationInterceptor();
-  useReviewShortcuts();
-
-  // Surface the summary when a review is pushed while the user is elsewhere.
-  useChannel({
-    [EVENTS.DISPLAY_REVIEW]: () => {
-      const currentPath = new URLSearchParams(window.location.search).get('path') ?? '';
-      if (!isReviewPath(currentPath)) {
-        api.navigate(REVIEW_CHANGES_URL);
-      }
-    },
-  });
-
-  return <ReviewSummaryPortal />;
-};
-
-/**
- * Always-mounted review layer. Hosts the review state provider, navigation
- * interceptor/shortcuts, and the summary portal so review survives story
- * navigation. Self-gates: the provider stays dormant until a review is pushed.
- */
-export const ReviewPersistentLayer: FC = () => (
-  <ReviewProvider>
-    <ReviewNavigationLayer />
-  </ReviewProvider>
-);
diff --git a/code/core/src/manager/components/review/components/AttentionBanner.stories.tsx b/code/core/src/manager/components/review/components/AttentionBanner.stories.tsx
index e3932b4e7dfd..5e51372bff62 100644
--- a/code/core/src/manager/components/review/components/AttentionBanner.stories.tsx
+++ b/code/core/src/manager/components/review/components/AttentionBanner.stories.tsx
@@ -33,7 +33,7 @@ export const PendingUpdate = meta.story({
   args: { kind: 'pending-update', onAccept },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await expect(await canvas.findByText('An updated review is available.')).toBeInTheDocument();
+    await expect(await canvas.findByText('A new review is available.')).toBeInTheDocument();
 
     await userEvent.click(await canvas.findByRole('button', { name: 'Update' }));
     await expect(onAccept).toHaveBeenCalledOnce();
diff --git a/code/core/src/manager/components/review/components/AttentionBanner.tsx b/code/core/src/manager/components/review/components/AttentionBanner.tsx
index 58857687c0fc..747a9c541b6c 100644
--- a/code/core/src/manager/components/review/components/AttentionBanner.tsx
+++ b/code/core/src/manager/components/review/components/AttentionBanner.tsx
@@ -69,7 +69,7 @@ export const AttentionBanner: FC<AttentionBannerProps> = (props) => {
     const { onAccept } = props;
     return (
       <Bar role="status" aria-live="polite">
-        <span>An updated review is available.</span>
+        <span>A new review is available.</span>
         <Button variant="solid" padding="small" onClick={onAccept}>
           Update
         </Button>
diff --git a/code/core/src/manager/components/review/components/CollectionGrid.stories.tsx b/code/core/src/manager/components/review/components/CollectionGrid.stories.tsx
index ec143f61d7ac..e72c4fdfd0e2 100644
--- a/code/core/src/manager/components/review/components/CollectionGrid.stories.tsx
+++ b/code/core/src/manager/components/review/components/CollectionGrid.stories.tsx
@@ -1,10 +1,16 @@
-import React from 'react';
+import React, { type FC } from 'react';
 
-import { expect, within } from 'storybook/test';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 
-import { IconSymbols } from '../../sidebar/IconSymbols.tsx';
 import preview from '../../../../../../.storybook/preview.tsx';
-import { CollectionGrid, type StoryInfo } from './CollectionGrid.tsx';
+import {
+  IFRAME_RESIZE_CONTEXT,
+  type IframeResizeViewport,
+} from '../../../../shared/constants/iframe-resize.ts';
+import { RESPONSIVE_VIEWPORT_VALUE } from '../../../../viewport/constants.ts';
+import { IconSymbols } from '../../sidebar/IconSymbols.tsx';
+import type { StoryInfo } from '../review-types.ts';
+import { CollectionGrid, type CollectionGridProps } from './CollectionGrid.tsx';
 
 // 40 unique story IDs drawn from real internal stories.
 const fortyStoryIds = [
@@ -98,11 +104,158 @@ const meta = preview.meta({
     storyIds: demoStoryIds,
     storyInfo: demoStoryInfo,
     getStoryPreviewHref: (storyId: string) =>
-      `iframe.html?id=${encodeURIComponent(storyId)}&viewMode=story&freeze=finished`,
+      `iframe.html?id=${encodeURIComponent(storyId)}&viewMode=story&embed=true&freeze=finished`,
+  },
+});
+
+const previewHref = (storyId: string) =>
+  `iframe.html?id=${encodeURIComponent(storyId)}&viewMode=story&embed=true&freeze=finished`;
+
+const dispatchIframeResize = (
+  cell: HTMLElement,
+  width: number,
+  height: number,
+  viewport?: IframeResizeViewport
+) => {
+  const contentWindow = cell.querySelector('iframe')?.contentWindow;
+  if (!contentWindow) {
+    throw new Error('Preview iframe has no contentWindow');
+  }
+  window.dispatchEvent(
+    new MessageEvent('message', {
+      data: JSON.stringify({
+        context: IFRAME_RESIZE_CONTEXT,
+        width,
+        height,
+        ...(viewport ? { viewport } : {}),
+      }),
+      source: contentWindow,
+    })
+  );
+};
+
+/** Loader cleared after iframe src is assigned and resize is applied. */
+const waitForCellPreviewSettled = async (
+  cell: HTMLElement,
+  dimensions: {
+    width: number;
+    height: number;
+    viewport?: IframeResizeViewport;
+  } = { width: 320, height: 240 }
+) => {
+  await waitFor(() => {
+    expect(cell.querySelector('iframe')?.getAttribute('src')).toContain('embed=true');
+  });
+  dispatchIframeResize(cell, dimensions.width, dimensions.height, dimensions.viewport);
+  await waitFor(() => {
+    expect(within(cell).queryByTestId('review-preview-loading')).not.toBeInTheDocument();
+    expect(Number(cell.querySelector('iframe')?.getAttribute('data-content-width'))).toBe(
+      dimensions.width
+    );
+  });
+};
+
+export const Default = meta.story({
+  play: async ({ canvasElement }) => {
+    const cells = await within(canvasElement).findAllByTestId('review-collection-grid-cell');
+    await waitFor(() => {
+      for (const cell of cells) {
+        const cellWidth = cell.getBoundingClientRect().width;
+        const frame = cell.querySelector<HTMLElement>(
+          '[data-testid="review-collection-grid-frame"]'
+        );
+        expect(frame).toBeTruthy();
+        expect(frame!.getBoundingClientRect().width).toBeLessThanOrEqual(cellWidth + 1);
+      }
+    });
   },
 });
 
-export const Default = meta.story({});
+export const QueuedPreviewShowsLoader = meta.story({
+  args: {
+    storyIds: [
+      'manager-main--default',
+      'manager-settings-aboutscreen--default',
+      'manager-sidebar-sidebar--simple',
+      'button-component--base',
+      'button-component--variants',
+    ],
+    showAll: true,
+  },
+  globals: { viewport: { value: 'desktop' } },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const cells = await canvas.findAllByTestId('review-collection-grid-cell');
+    expect(cells.length).toBe(5);
+
+    await waitFor(() => {
+      const started = cells.filter((cell) => cell.querySelector('iframe[src]'));
+      expect(started.length).toBeGreaterThanOrEqual(3);
+    });
+
+    const queuedCells = cells.filter((cell) => !cell.querySelector('iframe[src]'));
+    expect(queuedCells.length).toBeGreaterThan(0);
+    for (const cell of queuedCells) {
+      expect(within(cell).getByTestId('review-preview-loading')).toBeInTheDocument();
+    }
+  },
+});
+
+export const PreviewLoadingSettle = meta.story({
+  args: {
+    storyIds: ['manager-main--default'],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const cell = await canvas.findByTestId('review-collection-grid-cell');
+    await waitForCellPreviewSettled(cell);
+
+    // Duplicate iframe.resize payloads should not leave the loader stuck.
+    dispatchIframeResize(cell, 320, 240);
+    expect(within(cell).queryByTestId('review-preview-loading')).not.toBeInTheDocument();
+  },
+});
+
+const StorySwapHarness: FC<Partial<CollectionGridProps>> = () => {
+  const [storyIds, setStoryIds] = React.useState(['manager-main--default']);
+  const storyInfo: Record<string, StoryInfo> = {
+    'manager-main--default': demoStoryInfo['manager-main--default'],
+    'manager-settings-aboutscreen--default': demoStoryInfo['manager-settings-aboutscreen--default'],
+  };
+
+  return (
+    <div>
+      <button
+        type="button"
+        data-testid="swap-preview-story"
+        onClick={() => setStoryIds(['manager-settings-aboutscreen--default'])}
+      >
+        Swap story
+      </button>
+      <CollectionGrid storyIds={storyIds} storyInfo={storyInfo} getStoryPreviewHref={previewHref} />
+    </div>
+  );
+};
+
+export const PreviewRemountOnStoryChange = meta.story({
+  render: () => <StorySwapHarness />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const cell = await canvas.findByTestId('review-collection-grid-cell');
+    await waitForCellPreviewSettled(cell);
+
+    expect(cell.querySelector('iframe')?.title).toBe('manager-main--default');
+
+    await userEvent.click(canvas.getByTestId('swap-preview-story'));
+
+    let nextCell: HTMLElement | undefined;
+    await waitFor(async () => {
+      nextCell = await canvas.findByTestId('review-collection-grid-cell');
+      expect(nextCell.querySelector('iframe')?.title).toBe('manager-settings-aboutscreen--default');
+    });
+    await waitForCellPreviewSettled(nextCell!, { width: 280, height: 180 });
+  },
+});
 
 // On a narrow (mobile) container the grid drops to a single column and caps at
 // two rows, so eight stories overflow into the "Review all" affordance.
@@ -111,6 +264,13 @@ export const ManyStoriesOverflow = meta.story({
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await expect(await canvas.findByRole('button', { name: /Review all/i })).toBeInTheDocument();
+    const reviewAllFrame = canvasElement.querySelector('[data-review-all] > :first-child');
+    await expect(reviewAllFrame).toBeTruthy();
+    await waitFor(() => {
+      expect((reviewAllFrame as HTMLElement).getBoundingClientRect().height).toBeGreaterThanOrEqual(
+        50
+      );
+    });
   },
 });
 
@@ -125,6 +285,25 @@ export const FewStories = meta.story({
     await expect(
       canvasElement.querySelector<HTMLButtonElement>('[data-review-all] button')
     ).not.toBeVisible();
+
+    const frames = Array.from(cells).map((cell) =>
+      cell.querySelector<HTMLElement>('[data-testid="review-collection-grid-frame"]')
+    );
+    await waitFor(() => {
+      expect(frames.every((frame) => (frame?.clientHeight ?? 0) > 0)).toBe(true);
+      for (const cell of cells) {
+        const cellWidth = (cell as HTMLElement).getBoundingClientRect().width;
+        const frame = cell.querySelector<HTMLElement>(
+          '[data-testid="review-collection-grid-frame"]'
+        );
+        expect(frame).toBeTruthy();
+        expect(frame!.getBoundingClientRect().width).toBeLessThanOrEqual(cellWidth + 1);
+      }
+    });
+    const [firstHeight, secondHeight] = frames.map(
+      (frame) => frame?.getBoundingClientRect().height ?? 0
+    );
+    expect(Math.abs(firstHeight - secondHeight)).toBeLessThanOrEqual(2);
   },
 });
 
@@ -146,6 +325,23 @@ export const FortyStoriesOverflow = meta.story({
       (el) => (el as HTMLElement).style.display !== 'none' && el.checkVisibility?.()
     );
     await expect(visibleCells.length).toBeLessThanOrEqual(8);
+
+    const reviewAllFrame = canvasElement.querySelector('[data-review-all] > :first-child');
+    await expect(reviewAllFrame).toBeTruthy();
+    await waitFor(() => {
+      expect((reviewAllFrame as HTMLElement).clientHeight).toBeGreaterThan(0);
+    });
+    const reviewAllHeight = (reviewAllFrame as HTMLElement).clientHeight;
+    const getRowNeighborHeights = () =>
+      visibleCells
+        .slice(-3)
+        .map((cell) => (cell.firstElementChild as HTMLElement | null)?.clientHeight ?? 0);
+    await waitFor(() => {
+      expect(getRowNeighborHeights().every((height) => height > 0)).toBe(true);
+    });
+    for (const height of getRowNeighborHeights()) {
+      expect(height).toBe(reviewAllHeight);
+    }
   },
 });
 
@@ -160,3 +356,74 @@ export const SingleCellClamped = meta.story({
     await expect((cell as HTMLElement).getBoundingClientRect().width).toBeLessThanOrEqual(401);
   },
 });
+
+export const FrameFitsCellAfterResize = meta.story({
+  args: {
+    storyIds: ['manager-main--default'],
+  },
+  globals: { viewport: { value: 'desktop' } },
+  play: async ({ canvasElement }) => {
+    const cell = await within(canvasElement).findByTestId('review-collection-grid-cell');
+    await waitForCellPreviewSettled(cell, {
+      width: 1280,
+      height: 800,
+      viewport: { name: 'Desktop', value: 'desktop', width: 1280, height: 1024 },
+    });
+    await waitFor(() => {
+      const cellWidth = cell.getBoundingClientRect().width;
+      const frame = cell.querySelector<HTMLElement>('[data-testid="review-collection-grid-frame"]');
+      expect(frame).toBeTruthy();
+      expect(frame!.getBoundingClientRect().width).toBeLessThanOrEqual(cellWidth + 1);
+    });
+  },
+});
+
+export const ViewportAspectRatio = meta.story({
+  args: {
+    storyIds: ['manager-main--default'],
+  },
+  play: async ({ canvasElement }) => {
+    const cell = await within(canvasElement).findByTestId('review-collection-grid-cell');
+    await waitForCellPreviewSettled(cell, {
+      width: 120,
+      height: 48,
+      viewport: { name: 'Small mobile', value: 'mobile1', width: 320, height: 568 },
+    });
+
+    const shell = cell.firstElementChild as HTMLElement;
+    const frame = cell.querySelector<HTMLElement>('[data-testid="review-collection-grid-frame"]');
+    expect(frame?.hasAttribute('data-viewport-fill')).toBe(true);
+
+    const shellRect = shell.getBoundingClientRect();
+    const frameRect = frame!.getBoundingClientRect();
+    expect(frameRect.width).toBeCloseTo(shellRect.width, 0);
+    expect(frameRect.height).toBeCloseTo(shellRect.height, 0);
+
+    const previewScale = frame?.querySelector('[data-preview-scale]') as HTMLElement | null;
+    expect(previewScale).toBeTruthy();
+    expect(previewScale!.getBoundingClientRect().height).toBeGreaterThan(frameRect.height);
+  },
+});
+
+export const ResponsiveViewportFillsCell = meta.story({
+  args: {
+    storyIds: ['manager-main--default'],
+  },
+  play: async ({ canvasElement }) => {
+    const cell = await within(canvasElement).findByTestId('review-collection-grid-cell');
+    await waitForCellPreviewSettled(cell, {
+      width: 320,
+      height: 240,
+      viewport: { name: 'Responsive', value: RESPONSIVE_VIEWPORT_VALUE, width: 800, height: 600 },
+    });
+
+    const shell = cell.firstElementChild as HTMLElement;
+    const frame = cell.querySelector<HTMLElement>('[data-testid="review-collection-grid-frame"]');
+    expect(frame?.hasAttribute('data-viewport-fill')).toBe(false);
+
+    const shellRect = shell.getBoundingClientRect();
+    const frameRect = frame!.getBoundingClientRect();
+    expect(frameRect.width).toBeCloseTo(shellRect.width, 0);
+    expect(frameRect.height).toBeCloseTo(shellRect.height, 0);
+  },
+});
diff --git a/code/core/src/manager/components/review/components/CollectionGrid.tsx b/code/core/src/manager/components/review/components/CollectionGrid.tsx
index f455bf4d264b..8156fba702b1 100644
--- a/code/core/src/manager/components/review/components/CollectionGrid.tsx
+++ b/code/core/src/manager/components/review/components/CollectionGrid.tsx
@@ -1,122 +1,15 @@
-import React, { useCallback, useEffect, useRef, useState, type FC } from 'react';
+import React, { type FC } from 'react';
 
-import { Badge, Button } from 'storybook/internal/components';
+import { Badge, Button, Loader } from 'storybook/internal/components';
 import { styled } from 'storybook/theming';
 
-const PREVIEW_SCALE = 0.5;
-
-/**
- * Each thumbnail is a full Storybook preview iframe, and booting one fires
- * dozens of module requests. Mounting every in-view thumbnail at once (wide
- * grids, or "Review all") floods the browser's connection pool and trips
- * `net::ERR_INSUFFICIENT_RESOURCES`, leaving some iframes permanently blank.
- *
- * The scheduler below caps how many previews boot concurrently across the
- * whole review page. A cell enqueues a task before it sets the iframe `src`;
- * the task starts when a slot is free and finishes once the iframe loads
- * (or errors / settles), so previews drain in waves instead of all at once.
- * Hovering a cell promotes its task to start immediately, bypassing the cap.
- */
-const MAX_CONCURRENT_PREVIEWS = 3;
-/**
- * A started preview frees its slot when its iframe fires `load`, or after this
- * delay — whichever comes first. The timeout guarantees the queue keeps
- * draining automatically even when `load` is slow or never fires (so previews
- * advance in steady waves rather than waiting on a single stuck frame), while
- * still rate-limiting how fast new iframes boot to avoid flooding the network.
- */
-const PREVIEW_SETTLE_TIMEOUT_MS = 1500;
-
-// IntersectionObserver `rootMargin`s for the preview lifecycle: mount a cell's
-// iframe within one root-height of the fold, evict it past two. The gap is
-// hysteresis so scrolling near a boundary doesn't thrash. These margins only
-// take effect when the observer's `root` is the real scroll container (see
-// `getScrollRoot`); `rootMargin` is not applied to intermediate scrollers, so
-// against the default viewport root they would be silently clipped to zero.
-const PREVIEW_MOUNT_ROOT_MARGIN = '100% 0px';
-const PREVIEW_EVICT_ROOT_MARGIN = '200% 0px';
-
-interface PreviewTask {
-  /** Assigns the iframe src, kicking off the actual load. */
-  start: () => void;
-  started: boolean;
-  finished: boolean;
-}
-
-let activePreviewLoads = 0;
-const previewQueue: PreviewTask[] = [];
-
-function startQueuedPreviews(): void {
-  while (activePreviewLoads < MAX_CONCURRENT_PREVIEWS) {
-    const task = previewQueue.shift();
-    if (!task) {
-      return;
-    }
-    if (task.started || task.finished) {
-      continue;
-    }
-    task.started = true;
-    activePreviewLoads += 1;
-    task.start();
-  }
-}
-
-function enqueuePreview(task: PreviewTask): void {
-  previewQueue.push(task);
-  startQueuedPreviews();
-}
-
-/** Mark a task done (load/error/settle/unmount) and let the next one start. */
-function finishPreview(task: PreviewTask): void {
-  if (task.finished) {
-    return;
-  }
-  task.finished = true;
-  if (task.started) {
-    activePreviewLoads = Math.max(0, activePreviewLoads - 1);
-  } else {
-    const index = previewQueue.indexOf(task);
-    if (index !== -1) {
-      previewQueue.splice(index, 1);
-    }
-  }
-  startQueuedPreviews();
-}
-
-/** Hover/focus: start a still-queued preview right away, bypassing the cap. */
-function forceStartPreview(task: PreviewTask): void {
-  if (task.started || task.finished) {
-    return;
-  }
-  const index = previewQueue.indexOf(task);
-  if (index !== -1) {
-    previewQueue.splice(index, 1);
-  }
-  task.started = true;
-  activePreviewLoads += 1;
-  task.start();
-}
-
-export type StoryChangeStatus = 'new' | 'modified';
-
-export interface StoryInfo {
-  title: string;
-  name: string;
-  isNewlyAdded?: boolean;
-  changeStatus?: StoryChangeStatus;
-}
-
-/** Best-effort labels when the Storybook index has not resolved a story yet. */
-export const fallbackStoryInfo = (storyId: string): StoryInfo => {
-  const separator = storyId.indexOf('--');
-  if (separator === -1) {
-    return { title: storyId, name: 'Story' };
-  }
-  return {
-    title: storyId.slice(0, separator),
-    name: storyId.slice(separator + 2) || 'Story',
-  };
-};
+import { fallbackStoryInfo, type StoryInfo } from '../review-types.ts';
+import {
+  DEFAULT_CONTENT_WIDTH,
+  getPreviewFrameStyle,
+  hasFixedViewportAspect,
+} from './iframeResizeMessage.ts';
+import { usePreviewThumbnail } from './usePreviewThumbnail.ts';
 
 // Per-breakpoint grid: `cols` columns (each cell clamped to 400px) capped at
 // two rows. Overflow beyond the cap is hidden and a "Review all" cell takes the
@@ -130,7 +23,7 @@ const band = (cols: number) => {
         display: 'none',
       },
     [`&:not([data-show-all]):has(> [data-cell]:nth-child(${cap + 1})) > [data-review-all]`]: {
-      display: 'grid',
+      display: 'flex',
     },
   };
 };
@@ -142,14 +35,10 @@ const GridContainer = styled.div({
 
 const Grid = styled.div({
   display: 'grid',
+  alignItems: 'stretch',
   gap: 12,
   padding: 12,
-  // Fallback for browsers without container-query support: a single column and
-  // no two-row cap (every story is shown).
   gridTemplateColumns: 'minmax(0, 1fr)',
-  // Bands are mutually exclusive (ranged) so a narrower band's overflow rules
-  // never bleed into a wider one. The .98 upper bounds sit just below the next
-  // band's integer `min-width` so the two never both match at the boundary.
   '@container review-grid (max-width: 629.98px)': band(1),
   '@container review-grid (min-width: 630px) and (max-width: 844.98px)': band(2),
   '@container review-grid (min-width: 845px) and (max-width: 1259.98px)': band(3),
@@ -160,16 +49,29 @@ const Cell = styled.div({
   display: 'flex',
   flexDirection: 'column',
   minWidth: 0,
+  overflow: 'hidden',
 });
 
-// The bordered, clickable preview frame. Rendered as an <a> when a detail href
-// is provided, otherwise a plain <div>. Hover and keyboard focus are indicated
-// here (not on the surrounding cell) since the frame is the interactive target.
-const Frame = styled.a(({ theme }) => ({
-  position: 'relative',
-  display: 'block',
+const FrameShell = styled.div({
   width: '100%',
+  minWidth: 0,
+  maxWidth: '100%',
   aspectRatio: '3 / 2',
+  position: 'relative',
+});
+
+const Frame = styled.a(({ theme }) => ({
+  position: 'absolute',
+  inset: 0,
+  display: 'block',
+  boxSizing: 'border-box',
+  containerType: 'inline-size',
+  containerName: 'preview-frame',
+  '--content-w': DEFAULT_CONTENT_WIDTH,
+  '--fit-w': 'calc(100cqw / (var(--content-w) * 1px))',
+  '--fit': 'min(1, var(--fit-w))',
+  '--scale': 'max(0.5, min(1, round(down, var(--fit), 0.25)))',
+  '--vp-scale': 'calc(100cqw / (var(--vp-w) * 1px))',
   borderRadius: 6,
   overflow: 'hidden',
   background: theme.background.app,
@@ -177,6 +79,22 @@ const Frame = styled.a(({ theme }) => ({
   transition: 'border-color 120ms ease',
   textDecoration: 'none',
   outline: 'none',
+  '& [data-preview-scale]': {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    transformOrigin: 'top left',
+  },
+  '&[data-viewport-fill] [data-preview-scale]': {
+    width: 'calc(var(--vp-w) * 1px)',
+    height: 'calc(var(--vp-h) * 1px)',
+    transform: 'scale(var(--vp-scale))',
+  },
+  '&:not([data-viewport-fill]) [data-preview-scale]': {
+    width: 'calc(100% / var(--scale))',
+    height: 'calc(100% / var(--scale))',
+    transform: 'scale(var(--scale))',
+  },
   '&[href]:hover': {
     borderColor: theme.color.secondary,
   },
@@ -187,26 +105,32 @@ const Frame = styled.a(({ theme }) => ({
 }));
 
 const Preview = styled.iframe(({ theme }) => ({
-  position: 'absolute',
-  inset: 0,
-  width: `${(1 / PREVIEW_SCALE) * 100}%`,
-  height: `${(1 / PREVIEW_SCALE) * 100}%`,
+  display: 'block',
+  width: '100%',
+  height: '100%',
   background: theme.background.preview,
   border: 0,
-  display: 'block',
-  transform: `scale(${PREVIEW_SCALE})`,
-  transformOrigin: 'top left',
   pointerEvents: 'none',
 }));
 
-// The info/action bar below the preview: the component/story label stretches
-// and ellipsizes on the left; the action slot on the right never wraps.
+// Outside PreviewScale so bootstrap scaling does not shrink the loading indicator.
+const PreviewLoading = styled.div(({ theme }) => ({
+  position: 'absolute',
+  inset: 0,
+  zIndex: 1,
+  display: 'grid',
+  placeItems: 'center',
+  background: theme.background.app,
+  pointerEvents: 'none',
+}));
+
 const ActionBar = styled.div({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
   gap: 8,
   minHeight: 36,
+  marginTop: 'auto',
 });
 
 const Label = styled.div({
@@ -244,69 +168,34 @@ const NewBadge = styled(Badge)({
   flexShrink: 0,
 });
 
-const ReviewAllCell = styled.div(({ theme }) => ({
+const ReviewAllCell = styled(Cell)({
   display: 'none',
-  placeItems: 'center',
+});
+
+const ReviewAllShell = styled.div({
   width: '100%',
+  minWidth: 0,
+  maxWidth: '100%',
   aspectRatio: '3 / 2',
+  minHeight: 50,
+});
+
+const ReviewAllFrame = styled.div(({ theme }) => ({
+  display: 'grid',
+  placeItems: 'center',
+  width: '100%',
+  height: '100%',
+  boxSizing: 'border-box',
   borderRadius: 6,
   background: theme.background.app,
   border: `1px dashed ${theme.appBorderColor}`,
 }));
 
-// The cell lives inside a scrollable container (the review page keeps a single
-// Radix ScrollArea as its scroller), not the document viewport. The lifecycle
-// observers must use that container as their `root`, otherwise `rootMargin` is
-// ignored and cells evict the moment they leave the scroller. Falls back to the
-// viewport (null) when there is no scroll container, e.g. fullscreen stories.
-const getScrollRoot = (element: HTMLElement): HTMLElement | null => {
-  const radixViewport = element.closest<HTMLElement>('[data-radix-scroll-area-viewport]');
-  if (radixViewport) {
-    return radixViewport;
-  }
-  let current = element.parentElement;
-  while (current) {
-    const { overflowY } = window.getComputedStyle(current);
-    if (overflowY === 'auto' || overflowY === 'scroll') {
-      return current;
-    }
-    current = current.parentElement;
-  }
-  return null;
-};
-
-const isWithinPreloadRange = (
-  element: HTMLElement,
-  root: HTMLElement | null,
-  margin: number
-): boolean => {
-  const rect = element.getBoundingClientRect();
-  // Hidden cells (e.g. overflow beyond the two-row cap) have a zero-size box;
-  // don't seed them in-view or they'd boot iframes that never show.
-  if (rect.width === 0 && rect.height === 0) {
-    return false;
-  }
-  if (root) {
-    const rootRect = root.getBoundingClientRect();
-    return rect.bottom >= rootRect.top - margin && rect.top <= rootRect.bottom + margin;
-  }
-  const viewportHeight =
-    typeof window === 'undefined' ? Number.POSITIVE_INFINITY : window.innerHeight || 0;
-  return rect.bottom >= -margin && rect.top <= viewportHeight + margin;
-};
-
 const deriveStoryInfo = (info: StoryInfo): { component: string; name: string } => ({
   component: info.title.split('/').pop() ?? info.title,
   name: info.name,
 });
 
-const getPreloadMargin = (scrollRoot: HTMLElement | null): number => {
-  if (!scrollRoot) {
-    return typeof window === 'undefined' ? 0 : window.innerHeight;
-  }
-  return scrollRoot.clientHeight || window.innerHeight;
-};
-
 const StoryPreviewCell: FC<{
   storyId: string;
   href?: string;
@@ -314,143 +203,60 @@ const StoryPreviewCell: FC<{
   getPreviewHref: (storyId: string) => string;
   previewsPaused?: boolean;
 }> = ({ storyId, href, info, getPreviewHref, previewsPaused = false }) => {
-  const hostRef = useRef<HTMLElement>(null);
-  const previewsPausedRef = useRef(previewsPaused);
-  previewsPausedRef.current = previewsPaused;
-  const [isInView, setIsInView] = useState(false);
-  // `src` stays unset until the scheduler starts this preview; the iframe only
-  // mounts (and starts requesting) once it does.
-  const [src, setSrc] = useState<string | undefined>(undefined);
-  const taskRef = useRef<PreviewTask | null>(null);
-
-  useEffect(() => {
-    const host = hostRef.current;
-    if (!host) {
-      return undefined;
-    }
-    if (typeof IntersectionObserver === 'undefined') {
-      setIsInView(true);
-      return undefined;
-    }
-    const scrollRoot = getScrollRoot(host);
-    const effectiveRoot = scrollRoot && scrollRoot.clientHeight > 0 ? scrollRoot : null;
-    const markInViewIfClose = () => {
-      if (isWithinPreloadRange(host, effectiveRoot, getPreloadMargin(scrollRoot))) {
-        setIsInView(true);
-      }
-    };
-    // Snappy first paint for above-the-fold cells: the observers' initial
-    // callbacks are deferred to the next frame, so seed the state synchronously.
-    markInViewIfClose();
-    const resizeObserver =
-      typeof ResizeObserver !== 'undefined'
-        ? new ResizeObserver(() => markInViewIfClose())
-        : undefined;
-    resizeObserver?.observe(host);
-    // Mount when the cell comes within the mount margin of the scroll root.
-    const mountObserver = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setIsInView(true);
-        }
-      },
-      { root: effectiveRoot, rootMargin: PREVIEW_MOUNT_ROOT_MARGIN }
-    );
-    // Evict once the cell moves beyond the (larger) evict margin, unmounting
-    // its iframe to free the preview runtime. The margin gap is hysteresis.
-    const evictObserver = new IntersectionObserver(
-      ([entry]) => {
-        if (!entry.isIntersecting && !previewsPausedRef.current) {
-          setIsInView(false);
-        }
-      },
-      { root: effectiveRoot, rootMargin: PREVIEW_EVICT_ROOT_MARGIN }
-    );
-    mountObserver.observe(host);
-    evictObserver.observe(host);
-    return () => {
-      resizeObserver?.disconnect();
-      mountObserver.disconnect();
-      evictObserver.disconnect();
-    };
-  }, []);
-
-  // Eviction: when the cell scrolls well out of range, drop the iframe so its
-  // preview runtime is reclaimed. It re-enqueues (below) if it scrolls back.
-  useEffect(() => {
-    if (!isInView && !previewsPaused) {
-      setSrc(undefined);
-    }
-  }, [isInView, previewsPaused]);
-
-  // Once in view, enqueue a scheduler task; it sets `src` when a slot frees.
-  useEffect(() => {
-    if (!isInView) {
-      return undefined;
-    }
-    const previewHref = getPreviewHref(storyId);
-    const task: PreviewTask = {
-      start: () => {
-        setSrc((current) => current ?? previewHref);
-      },
-      started: false,
-      finished: false,
-    };
-    taskRef.current = task;
-    enqueuePreview(task);
-    return () => {
-      // Unmounting / scrolling away before load frees the slot (or dequeues).
-      finishPreview(task);
-      taskRef.current = null;
-    };
-  }, [isInView, storyId, getPreviewHref]);
-
-  const finishCurrent = useCallback(() => {
-    if (taskRef.current) {
-      finishPreview(taskRef.current);
-    }
-  }, []);
-
-  // Hover or keyboard focus promotes this preview to start immediately.
-  const forceStartCurrent = useCallback(() => {
-    if (taskRef.current) {
-      forceStartPreview(taskRef.current);
-    }
-  }, []);
-
-  // Free this preview's slot a short time after it starts even if `load`
-  // hasn't fired, so the queue keeps draining automatically in steady waves.
-  useEffect(() => {
-    if (!src) {
-      return undefined;
-    }
-    const timer = setTimeout(finishCurrent, PREVIEW_SETTLE_TIMEOUT_MS);
-    return () => clearTimeout(timer);
-  }, [src, finishCurrent]);
+  const {
+    cellRef,
+    frameRef,
+    iframeRef,
+    src,
+    isPreviewLoading,
+    rememberedDimensions,
+    forceStartCurrent,
+    finishCurrent,
+  } = usePreviewThumbnail({ storyId, getPreviewHref, previewsPaused });
 
   const { component, name } = deriveStoryInfo(info);
+  const viewport = rememberedDimensions?.viewport;
+  const viewportFill = hasFixedViewportAspect(viewport);
+  const frameStyle = getPreviewFrameStyle(rememberedDimensions);
+
+  const preview = src ? (
+    <div data-preview-scale>
+      <Preview
+        ref={iframeRef}
+        title={storyId}
+        src={src}
+        data-content-width={rememberedDimensions?.width}
+        data-content-height={rememberedDimensions?.height}
+        tabIndex={-1}
+        scrolling="no"
+        onLoad={finishCurrent}
+        onError={finishCurrent}
+      />
+    </div>
+  ) : null;
 
   return (
-    <Cell data-cell data-testid="review-collection-grid-cell">
-      <Frame
-        as={href ? 'a' : 'div'}
-        href={href}
-        ref={hostRef as React.RefObject<HTMLAnchorElement>}
-        aria-label={href ? `Review story ${storyId}` : undefined}
-        onMouseEnter={forceStartCurrent}
-        onFocus={forceStartCurrent}
-      >
-        {src ? (
-          <Preview
-            title={storyId}
-            src={src}
-            tabIndex={-1}
-            scrolling="no"
-            onLoad={finishCurrent}
-            onError={finishCurrent}
-          />
-        ) : null}
-      </Frame>
+    <Cell ref={cellRef} data-cell data-testid="review-collection-grid-cell">
+      <FrameShell>
+        <Frame
+          as={href ? 'a' : 'div'}
+          {...(href ? { href } : {})}
+          ref={frameRef as React.Ref<HTMLAnchorElement>}
+          data-testid="review-collection-grid-frame"
+          data-viewport-fill={viewportFill || undefined}
+          style={frameStyle}
+          aria-label={href ? `Review story ${storyId}` : undefined}
+          onMouseEnter={forceStartCurrent}
+          onFocus={forceStartCurrent}
+        >
+          {isPreviewLoading ? (
+            <PreviewLoading data-testid="review-preview-loading">
+              <Loader />
+            </PreviewLoading>
+          ) : null}
+          {preview}
+        </Frame>
+      </FrameShell>
       <ActionBar>
         <Label>
           <LabelComponent>{component}</LabelComponent>
@@ -507,9 +313,14 @@ export const CollectionGrid: FC<CollectionGridProps> = ({
         );
       })}
       <ReviewAllCell data-review-all>
-        <Button size="medium" onClick={() => onShowAll?.()}>
-          Review all {storyIds.length}
-        </Button>
+        <ReviewAllShell>
+          <ReviewAllFrame>
+            <Button size="medium" onClick={() => onShowAll?.()}>
+              Review all {storyIds.length}
+            </Button>
+          </ReviewAllFrame>
+        </ReviewAllShell>
+        <ActionBar aria-hidden="true" />
       </ReviewAllCell>
     </Grid>
   </GridContainer>
diff --git a/code/core/src/manager/components/review/ReviewCollectionPicker.tsx b/code/core/src/manager/components/review/components/ReviewCollectionPicker.tsx
similarity index 97%
rename from code/core/src/manager/components/review/ReviewCollectionPicker.tsx
rename to code/core/src/manager/components/review/components/ReviewCollectionPicker.tsx
index 8c382f8a00df..86fbe6fb09b3 100644
--- a/code/core/src/manager/components/review/ReviewCollectionPicker.tsx
+++ b/code/core/src/manager/components/review/components/ReviewCollectionPicker.tsx
@@ -2,12 +2,12 @@ import React, { useEffect, useRef, type FC } from 'react';
 
 import { styled } from 'storybook/theming';
 
-import { type StoryInfo } from './components/CollectionGrid.tsx';
 import {
   buildReviewStoryHref,
   prettifyComponentId,
   type ReviewNavEntry,
-} from './review-navigation.ts';
+} from '../review-navigation.ts';
+import { type StoryInfo } from '../review-types.ts';
 
 const PopoverList = styled.div(({ theme }) => ({
   display: 'flex',
diff --git a/code/core/src/manager/components/review/components/ReviewNotification.tsx b/code/core/src/manager/components/review/components/ReviewNotification.tsx
new file mode 100644
index 000000000000..753c6f647da5
--- /dev/null
+++ b/code/core/src/manager/components/review/components/ReviewNotification.tsx
@@ -0,0 +1,86 @@
+import React, { useCallback, useLayoutEffect, type FC } from 'react';
+
+import { WandIcon } from '@storybook/icons';
+
+import { useNavigate } from 'storybook/internal/router';
+import { useStorybookApi, useStorybookState } from 'storybook/manager-api';
+import { reviewAvailableNotificationId } from '../constants.ts';
+import { navigateToReviewSummary } from '../review-actions.ts';
+import {
+  acceptReviewNotification,
+  claimNotificationSlot,
+  pickReviewToNotify,
+  readCollectionIndex,
+  shouldAutoAcceptOnRoute,
+  shouldSkipArrivalNotification,
+} from '../review-notification.ts';
+import { reviewStore, useReview } from '../review-store.ts';
+import { useReviewFiltersRef } from '../useReviewFiltersRef.ts';
+
+/** Sidebar notification for unseen review pushes. Does not auto-navigate. */
+export const ReviewNotification: FC = () => {
+  const api = useStorybookApi();
+  const navigate = useNavigate();
+  const { path, customQueryParams } = useStorybookState();
+  const { notificationKey, onAcceptPendingUpdate } = useReview();
+  const filtersRef = useReviewFiltersRef();
+  const collectionIndex = readCollectionIndex(customQueryParams);
+
+  const openReview = useCallback(() => {
+    navigateToReviewSummary(api, navigate, filtersRef.current);
+  }, [api, navigate, filtersRef]);
+
+  const handleNotificationClick = useCallback(
+    (createdAt: number) => {
+      const deferred = reviewStore.getPendingReview();
+      if (deferred?.createdAt === createdAt) {
+        onAcceptPendingUpdate();
+        return;
+      }
+      acceptReviewNotification(api, createdAt);
+      openReview();
+    },
+    [api, onAcceptPendingUpdate, openReview]
+  );
+
+  useLayoutEffect(() => {
+    const displayed = reviewStore.getState().state;
+    const deferred = reviewStore.getPendingReview();
+    const review = pickReviewToNotify(displayed, deferred);
+    if (!review) {
+      return;
+    }
+
+    if (shouldAutoAcceptOnRoute(path, collectionIndex, review, displayed, deferred)) {
+      acceptReviewNotification(api, review.createdAt);
+      return;
+    }
+
+    if (shouldSkipArrivalNotification(path, collectionIndex, review, displayed, deferred)) {
+      return;
+    }
+
+    const createdAt = review.createdAt;
+    if (
+      createdAt === undefined ||
+      !claimNotificationSlot(api, createdAt, displayed?.createdAt, deferred?.createdAt)
+    ) {
+      return;
+    }
+
+    api.addNotification({
+      id: reviewAvailableNotificationId(createdAt),
+      content: {
+        headline: 'New review available',
+        subHeadline: review.title ?? 'Open the curated review to spot-check your changes',
+      },
+      icon: <WandIcon />,
+      onClick: ({ onDismiss }) => {
+        handleNotificationClick(createdAt);
+        onDismiss();
+      },
+    });
+  }, [api, collectionIndex, handleNotificationClick, notificationKey, path]);
+
+  return null;
+};
diff --git a/code/core/src/manager/components/review/components/ReviewPersistentLayer.tsx b/code/core/src/manager/components/review/components/ReviewPersistentLayer.tsx
new file mode 100644
index 000000000000..cd2d26d96b4b
--- /dev/null
+++ b/code/core/src/manager/components/review/components/ReviewPersistentLayer.tsx
@@ -0,0 +1,30 @@
+import React, { type FC } from 'react';
+
+import { ReviewSummaryPortal } from '../screens/ReviewSummaryPortal.tsx';
+import { useReviewNavigationInterceptor } from '../useReviewNavigationInterceptor.ts';
+import { useReviewShortcuts } from '../useReviewShortcuts.ts';
+import { ReviewNotification } from './ReviewNotification.tsx';
+import { ReviewProvider } from './ReviewProvider.tsx';
+
+const ReviewNavigationLayer: FC = () => {
+  useReviewNavigationInterceptor();
+  useReviewShortcuts();
+
+  return (
+    <>
+      <ReviewNotification />
+      <ReviewSummaryPortal />
+    </>
+  );
+};
+
+/**
+ * Always-mounted review layer. Hosts the review state provider, navigation
+ * interceptor/shortcuts, and the summary portal so review survives story
+ * navigation. Self-gates: the provider stays dormant until a review is pushed.
+ */
+export const ReviewPersistentLayer: FC = () => (
+  <ReviewProvider>
+    <ReviewNavigationLayer />
+  </ReviewProvider>
+);
diff --git a/code/core/src/manager/components/review/ReviewProvider.tsx b/code/core/src/manager/components/review/components/ReviewProvider.tsx
similarity index 68%
rename from code/core/src/manager/components/review/ReviewProvider.tsx
rename to code/core/src/manager/components/review/components/ReviewProvider.tsx
index f7703ac00188..4cb00223d857 100644
--- a/code/core/src/manager/components/review/ReviewProvider.tsx
+++ b/code/core/src/manager/components/review/components/ReviewProvider.tsx
@@ -9,6 +9,9 @@ import {
   type ReactNode,
 } from 'react';
 
+import { useNavigate } from 'storybook/internal/router';
+import type { StatusesByStoryIdAndTypeId } from 'storybook/internal/types';
+import { REVIEW_STATUS_TYPE_ID } from 'storybook/internal/types';
 import {
   experimental_getStatusStore,
   experimental_useStatusStore,
@@ -16,23 +19,15 @@ import {
   useStorybookApi,
   useStorybookState,
 } from 'storybook/manager-api';
-import { useNavigate } from 'storybook/internal/router';
-import type { StatusesByStoryIdAndTypeId } from 'storybook/internal/types';
-import { CHANGE_DETECTION_STATUS_TYPE_ID, REVIEW_STATUS_TYPE_ID } from 'storybook/internal/types';
 
-import {
-  fallbackStoryInfo,
-  type StoryChangeStatus,
-  type StoryInfo,
-} from './components/CollectionGrid.tsx';
 import {
   AUTO_ENTERED_SESSION_KEY,
   EVENTS,
   PRE_REVIEW_RETURN_KEY,
-  REVIEW_CHANGES_URL,
-} from './constants.ts';
-import { enterReviewMode, isReviewModeActive } from './review-mode.ts';
-import { navigateOutOfReview } from './review-actions.ts';
+  REVIEW_EXITING_SESSION_KEY,
+} from '../constants.ts';
+import { navigateOutOfReview } from '../review-actions.ts';
+import { enterReviewMode, isReviewModeActive } from '../review-mode.ts';
 import {
   REVIEW_COLLECTION_QUERY_PARAM,
   buildFlattenedNavEntries,
@@ -43,12 +38,21 @@ import {
   parseStoryIdFromPath,
   resolveActiveNavEntry,
   resolveNavIndex,
-} from './review-navigation.ts';
-import type { ReviewState } from './review-state.ts';
-import { reviewStore, type ReviewStoreState } from './review-store.ts';
-import { clearReviewStatuses, collectReviewStoryIds, syncReviewStatuses } from './review-status.ts';
-import { sessionStore } from './session-store.ts';
-import { useReviewFiltersRef } from './useReviewFiltersRef.ts';
+} from '../review-navigation.ts';
+import {
+  acceptReviewNotification,
+  clearReviewNotificationsOnDismiss,
+} from '../review-notification.ts';
+import type { ReviewState } from '../review-state.ts';
+import {
+  clearReviewStatuses,
+  collectReviewStoryIds,
+  syncReviewStatuses,
+} from '../review-status.ts';
+import { reviewNotificationKey, reviewStore, type ReviewStoreState } from '../review-store.ts';
+import { buildNewlyAddedStoryIds, buildStoryInfo } from '../review-story-info.ts';
+import { sessionStore } from '../session-store.ts';
+import { useReviewFiltersRef } from '../useReviewFiltersRef.ts';
 
 const reviewStatusStore = experimental_getStatusStore(REVIEW_STATUS_TYPE_ID);
 
@@ -58,6 +62,9 @@ const isDeferredReviewUpdate = (current: ReviewState | null, next: ReviewState):
   next.createdAt !== undefined &&
   current.createdAt !== next.createdAt;
 
+const isSameReviewPayload = (current: ReviewState | null, next: ReviewState): boolean =>
+  current?.createdAt !== undefined && current.createdAt === next.createdAt;
+
 export const ReviewProvider: FC<{ children: ReactNode }> = ({ children }) => {
   const [state, setState] = useState<ReviewState | null>(null);
   const [pendingReview, setPendingReview] = useState<ReviewState | null>(null);
@@ -82,7 +89,7 @@ export const ReviewProvider: FC<{ children: ReactNode }> = ({ children }) => {
   }, [api, filtersRef]);
 
   const getStoryPreviewHref = useCallback(
-    (storyId: string) => api.getStoryHrefs(storyId, { freeze: true }).previewHref,
+    (storyId: string) => api.getStoryHrefs(storyId, { embed: true, freeze: true }).previewHref,
     [api]
   );
 
@@ -91,6 +98,13 @@ export const ReviewProvider: FC<{ children: ReactNode }> = ({ children }) => {
       const current = displayedReviewRef.current;
       if (isDeferredReviewUpdate(current, next)) {
         setPendingReview(next);
+        reviewStore.setState(reviewStore.getState(), next);
+        return;
+      }
+      // REQUEST_REVIEW replays the cached payload to every tab when another tab
+      // mounts; ignore identical reviews so summary UI state is not reset.
+      if (isSameReviewPayload(current, next)) {
+        setIsStale(!!next.stale);
         return;
       }
       setPendingReview(null);
@@ -106,11 +120,16 @@ export const ReviewProvider: FC<{ children: ReactNode }> = ({ children }) => {
       clearReviewStatuses(reviewStatusStore);
       previousReviewStoryIdsRef.current = new Set();
       sessionStore.remove(AUTO_ENTERED_SESSION_KEY);
+      clearReviewNotificationsOnDismiss(
+        api,
+        reviewStore.getState().state,
+        reviewStore.getPendingReview()
+      );
       setState(null);
       setPendingReview(null);
       setIsStale(false);
       setIsInReviewMode(false);
-      navigateOutOfReview(api, navigate, returnSearch);
+      void navigateOutOfReview(api, navigate, returnSearch, { recordVisit: false });
     },
   });
 
@@ -120,16 +139,19 @@ export const ReviewProvider: FC<{ children: ReactNode }> = ({ children }) => {
   }, [emit]);
 
   const acceptPendingReview = useCallback(() => {
-    if (!pendingReview) {
+    const accepted = reviewStore.getPendingReview();
+    if (!accepted) {
       return;
     }
-    setState(pendingReview);
-    setIsStale(!!pendingReview.stale);
+    acceptReviewNotification(api, accepted.createdAt);
+    reviewStore.setState(reviewStore.getState(), null);
+    setState(accepted);
+    setIsStale(!!accepted.stale);
     setPendingReview(null);
     sessionStore.remove(AUTO_ENTERED_SESSION_KEY);
     enterReview();
     navigate(buildReviewChangesSummaryHref(), { plain: true });
-  }, [enterReview, navigate, pendingReview]);
+  }, [api, enterReview, navigate]);
 
   useEffect(() => {
     emit(EVENTS.REQUEST_REVIEW);
@@ -152,70 +174,15 @@ export const ReviewProvider: FC<{ children: ReactNode }> = ({ children }) => {
   const flattenedEntries = useMemo(() => (state ? buildFlattenedNavEntries(state) : []), [state]);
 
   const allStatuses = experimental_useStatusStore() as StatusesByStoryIdAndTypeId;
-  const newlyAddedStoryIds = useMemo(() => {
-    const ids = new Set<string>();
-    if (!state) {
-      return ids;
-    }
-    const isChangeDetectedNew = (storyId: string) =>
-      Object.values(allStatuses[storyId] ?? {}).some(
-        (status) => status.value === 'status-value:new'
-      );
-    for (const collection of state.collections) {
-      for (const storyId of collection.storyIds) {
-        if (isChangeDetectedNew(storyId)) {
-          ids.add(storyId);
-        }
-      }
-    }
-    return ids;
-  }, [allStatuses, state]);
+  const newlyAddedStoryIds = useMemo(
+    () => (state ? buildNewlyAddedStoryIds(state, allStatuses) : new Set<string>()),
+    [allStatuses, state]
+  );
 
-  const storyInfo = useMemo(() => {
-    const info: Record<string, StoryInfo> = {};
-    if (!state) {
-      return info;
-    }
-    const getStoryChangeStatus = (storyId: string): StoryChangeStatus | undefined => {
-      const changeValue = Object.values(allStatuses[storyId] ?? {}).find(
-        (status) => status.typeId === CHANGE_DETECTION_STATUS_TYPE_ID
-      )?.value;
-      if (changeValue === 'status-value:new') {
-        return 'new';
-      }
-      if (changeValue === 'status-value:modified') {
-        return 'modified';
-      }
-      return undefined;
-    };
-    for (const collection of state.collections) {
-      for (const storyId of collection.storyIds) {
-        if (storyId in info) {
-          continue;
-        }
-        const direct = index?.[storyId];
-        const entry =
-          direct?.type === 'story' ? direct : index ? api.findLeafEntry(index, storyId) : undefined;
-        const shared = {
-          isNewlyAdded: newlyAddedStoryIds.has(storyId) || undefined,
-          changeStatus: getStoryChangeStatus(storyId),
-        };
-        if (entry?.type === 'story' && entry.title) {
-          info[storyId] = {
-            title: entry.title,
-            name: entry.name,
-            ...shared,
-          };
-        } else {
-          info[storyId] = {
-            ...fallbackStoryInfo(storyId),
-            ...shared,
-          };
-        }
-      }
-    }
-    return info;
-  }, [allStatuses, api, index, newlyAddedStoryIds, state]);
+  const storyInfo = useMemo(
+    () => (state ? buildStoryInfo(state, index, api, allStatuses, newlyAddedStoryIds) : {}),
+    [allStatuses, api, index, newlyAddedStoryIds, state]
+  );
 
   const collectionIndex = parseCollectionIndex(collectionParam);
   const storyIdFromPath = parseStoryIdFromPath(path);
@@ -240,6 +207,9 @@ export const ReviewProvider: FC<{ children: ReactNode }> = ({ children }) => {
     if (!state || !isSummaryVisible || isReviewModeActive()) {
       return;
     }
+    if (sessionStore.read(REVIEW_EXITING_SESSION_KEY) === '1') {
+      return;
+    }
     if (sessionStore.read(AUTO_ENTERED_SESSION_KEY) === '1') {
       return;
     }
@@ -265,6 +235,7 @@ export const ReviewProvider: FC<{ children: ReactNode }> = ({ children }) => {
   const value = useMemo<ReviewStoreState>(
     () => ({
       state,
+      notificationKey: reviewNotificationKey(state, pendingReview),
       isStale,
       hasPendingUpdate: pendingReview !== null,
       onAcceptPendingUpdate: acceptPendingReview,
@@ -280,8 +251,8 @@ export const ReviewProvider: FC<{ children: ReactNode }> = ({ children }) => {
     }),
     [
       state,
-      isStale,
       pendingReview,
+      isStale,
       acceptPendingReview,
       storyInfo,
       flattenedEntries,
@@ -297,8 +268,8 @@ export const ReviewProvider: FC<{ children: ReactNode }> = ({ children }) => {
 
   // Sync before paint so toolbar surfaces read current route on first frame.
   useLayoutEffect(() => {
-    reviewStore.setState(value);
-  }, [value]);
+    reviewStore.setState(value, pendingReview);
+  }, [value, pendingReview]);
 
   useLayoutEffect(() => {
     if (isSummaryVisible) {
@@ -308,6 +279,3 @@ export const ReviewProvider: FC<{ children: ReactNode }> = ({ children }) => {
 
   return children;
 };
-
-export const isReviewPath = (path: string): boolean =>
-  isReviewSummaryPath(path) || path.startsWith(REVIEW_CHANGES_URL);
diff --git a/code/core/src/manager/components/review/ReviewToolbarHeader.stories.tsx b/code/core/src/manager/components/review/components/ReviewToolbarHeader.stories.tsx
similarity index 94%
rename from code/core/src/manager/components/review/ReviewToolbarHeader.stories.tsx
rename to code/core/src/manager/components/review/components/ReviewToolbarHeader.stories.tsx
index 04143b875600..8e24adceb00b 100644
--- a/code/core/src/manager/components/review/ReviewToolbarHeader.stories.tsx
+++ b/code/core/src/manager/components/review/components/ReviewToolbarHeader.stories.tsx
@@ -2,21 +2,21 @@ import type { ReactNode } from 'react';
 
 import { expect, fn, within } from 'storybook/test';
 
+import { MemoryRouter } from 'storybook/internal/router';
 import {
   ManagerContext,
+  internal_fullStatusStore,
   type API,
   type State,
-  internal_fullStatusStore,
 } from 'storybook/manager-api';
-import { MemoryRouter } from 'storybook/internal/router';
 
-import preview from '../../../../../.storybook/preview.tsx';
-import { ADDON_ID, EVENTS } from './constants.ts';
+import preview from '../../../../../../.storybook/preview.tsx';
+import { ADDON_ID, EVENTS } from '../constants.ts';
+import { buildReviewChangesSummaryHref, buildReviewStoryHref } from '../review-navigation.ts';
+import type { ReviewState } from '../review-state.ts';
+import { useReviewShortcuts } from '../useReviewShortcuts.ts';
 import { ReviewProvider } from './ReviewProvider.tsx';
 import { ReviewToolbarHeader } from './ReviewToolbarHeader.tsx';
-import { buildReviewChangesSummaryHref, buildReviewStoryHref } from './review-navigation.ts';
-import type { ReviewState } from './review-state.ts';
-import { useReviewShortcuts } from './useReviewShortcuts.ts';
 
 type EventListener = (payload?: unknown) => void;
 
@@ -102,9 +102,9 @@ const managerApi: API = {
   resetStatusFilters: fn().mockName('api::resetStatusFilters'),
   addStatusFilters: fn().mockName('api::addStatusFilters'),
   removeStatusFilters: fn().mockName('api::removeStatusFilters'),
-  getStoryHrefs: (storyId: string, options?: { freeze?: boolean }) => ({
+  getStoryHrefs: (storyId: string, options?: { embed?: boolean; freeze?: boolean }) => ({
     managerHref: `?path=/story/${storyId}`,
-    previewHref: `iframe.html?id=${storyId}&viewMode=story${options?.freeze ? '&freeze=finished' : ''}`,
+    previewHref: `iframe.html?id=${storyId}&viewMode=story${options?.embed ? '&embed=true' : ''}${options?.freeze ? '&freeze=finished' : ''}`,
   }),
 } as unknown as API;
 
diff --git a/code/core/src/manager/components/review/ReviewToolbarHeader.tsx b/code/core/src/manager/components/review/components/ReviewToolbarHeader.tsx
similarity index 96%
rename from code/core/src/manager/components/review/ReviewToolbarHeader.tsx
rename to code/core/src/manager/components/review/components/ReviewToolbarHeader.tsx
index 4b8a6eb484e2..39fdb1089fe8 100644
--- a/code/core/src/manager/components/review/ReviewToolbarHeader.tsx
+++ b/code/core/src/manager/components/review/components/ReviewToolbarHeader.tsx
@@ -5,15 +5,15 @@ import { styled } from 'storybook/theming';
 
 import { ChevronSmallLeftIcon, ChevronSmallRightIcon, WandIcon } from '@storybook/icons';
 
-import { ReviewCollectionPicker } from './ReviewCollectionPicker.tsx';
-import { ReviewHeader } from './components/ReviewHeader.tsx';
-import { AttentionBanner } from './components/AttentionBanner.tsx';
 import {
   buildReviewChangesSummaryHref,
   buildReviewStoryHref,
   getAdjacentReviewEntries,
-} from './review-navigation.ts';
-import { useReview } from './review-store.ts';
+} from '../review-navigation.ts';
+import { useReview } from '../review-store.ts';
+import { AttentionBanner } from './AttentionBanner.tsx';
+import { ReviewCollectionPicker } from './ReviewCollectionPicker.tsx';
+import { ReviewHeader } from './ReviewHeader.tsx';
 
 const Root = styled.div(({ theme }) => ({
   display: 'flex',
diff --git a/code/core/src/manager/components/review/components/iframeResizeMessage.test.ts b/code/core/src/manager/components/review/components/iframeResizeMessage.test.ts
new file mode 100644
index 000000000000..353d8260f077
--- /dev/null
+++ b/code/core/src/manager/components/review/components/iframeResizeMessage.test.ts
@@ -0,0 +1,93 @@
+import { describe, expect, it } from 'vitest';
+
+import { IFRAME_RESIZE_CONTEXT } from '../../../../shared/constants/iframe-resize.ts';
+import {
+  getPreviewFrameStyle,
+  parseIframeResizeMessage,
+  THUMBNAIL_BOOTSTRAP_SCALE,
+} from './iframeResizeMessage.ts';
+
+describe('parseIframeResizeMessage', () => {
+  it('accepts valid resize payloads', () => {
+    expect(
+      parseIframeResizeMessage(
+        JSON.stringify({ context: IFRAME_RESIZE_CONTEXT, width: 320, height: 240 })
+      )
+    ).toEqual({ width: 320, height: 240 });
+    expect(
+      parseIframeResizeMessage({ context: IFRAME_RESIZE_CONTEXT, width: 320, height: 240 })
+    ).toEqual({ width: 320, height: 240 });
+    expect(
+      parseIframeResizeMessage({
+        context: IFRAME_RESIZE_CONTEXT,
+        width: 320,
+        height: 240,
+        viewport: { name: 'Small mobile', value: 'mobile1', width: 320, height: 568 },
+      })
+    ).toEqual({
+      width: 320,
+      height: 240,
+      viewport: { name: 'Small mobile', value: 'mobile1', width: 320, height: 568 },
+    });
+  });
+
+  it('rejects malformed payloads', () => {
+    expect(parseIframeResizeMessage('{')).toBeNull();
+    expect(parseIframeResizeMessage({ context: 'other', width: 320, height: 240 })).toBeNull();
+    expect(
+      parseIframeResizeMessage({ context: IFRAME_RESIZE_CONTEXT, width: -1, height: 240 })
+    ).toBeNull();
+    expect(
+      parseIframeResizeMessage({ context: IFRAME_RESIZE_CONTEXT, width: 0, height: 240 })
+    ).toBeNull();
+    expect(
+      parseIframeResizeMessage({ context: IFRAME_RESIZE_CONTEXT, width: NaN, height: 240 })
+    ).toBeNull();
+    expect(
+      parseIframeResizeMessage({
+        context: IFRAME_RESIZE_CONTEXT,
+        width: 320,
+        height: 240,
+        viewport: { name: 'Small mobile', value: 'mobile1' },
+      })
+    ).toEqual({
+      width: 320,
+      height: 240,
+      viewport: { name: 'Small mobile', value: 'mobile1' },
+    });
+    expect(
+      parseIframeResizeMessage({
+        context: IFRAME_RESIZE_CONTEXT,
+        width: 320,
+        height: 240,
+        viewport: { value: 'mobile1', width: 320, height: 568 },
+      })
+    ).toBeNull();
+  });
+});
+
+describe('getPreviewFrameStyle', () => {
+  it('bootstraps before resize', () => {
+    expect(getPreviewFrameStyle(null)).toEqual({ '--scale': THUMBNAIL_BOOTSTRAP_SCALE });
+  });
+
+  it('uses viewport dimensions for fixed viewports', () => {
+    expect(
+      getPreviewFrameStyle({
+        width: 120,
+        height: 48,
+        viewport: { name: 'Small mobile', value: 'mobile1', width: 320, height: 568 },
+      })
+    ).toEqual({ '--vp-w': 320, '--vp-h': 568 });
+  });
+
+  it('uses content width for responsive viewports', () => {
+    expect(getPreviewFrameStyle({ width: 320, height: 240 })).toEqual({ '--content-w': 320 });
+  });
+});
+
+describe('THUMBNAIL_BOOTSTRAP_SCALE', () => {
+  it('widens the embed viewport to 2× the frame width before measurement', () => {
+    expect(THUMBNAIL_BOOTSTRAP_SCALE).toBe(0.5);
+  });
+});
diff --git a/code/core/src/manager/components/review/components/iframeResizeMessage.ts b/code/core/src/manager/components/review/components/iframeResizeMessage.ts
new file mode 100644
index 000000000000..64488e30c58f
--- /dev/null
+++ b/code/core/src/manager/components/review/components/iframeResizeMessage.ts
@@ -0,0 +1,100 @@
+import type { CSSProperties } from 'react';
+
+import {
+  IFRAME_RESIZE_CONTEXT,
+  hasFixedViewportDimensions,
+  iframeResizeDimensionsEqual,
+  iframeResizeViewportsEqual,
+  type IframeResizeDimensions,
+  type IframeResizeViewport,
+} from '../../../../shared/constants/iframe-resize.ts';
+
+/** Default `--content-w` before the embed iframe reports its size. */
+export const DEFAULT_CONTENT_WIDTH = 300;
+
+export type ContentDimensions = IframeResizeDimensions;
+
+export {
+  iframeResizeDimensionsEqual as contentDimensionsEqual,
+  hasFixedViewportDimensions as hasFixedViewportAspect,
+  iframeResizeViewportsEqual,
+  type IframeResizeViewport,
+};
+
+const isPositiveFinite = (value: unknown): value is number =>
+  typeof value === 'number' && Number.isFinite(value) && value > 0;
+
+const parseViewport = (value: unknown): IframeResizeViewport | undefined => {
+  if (!value || typeof value !== 'object') {
+    return undefined;
+  }
+
+  const viewport = value as Partial<IframeResizeViewport>;
+  if (typeof viewport.name !== 'string' || typeof viewport.value !== 'string') {
+    return undefined;
+  }
+
+  const parsed: IframeResizeViewport = {
+    name: viewport.name,
+    value: viewport.value,
+  };
+
+  if (viewport.width !== undefined) {
+    if (!isPositiveFinite(viewport.width)) {
+      return undefined;
+    }
+    parsed.width = viewport.width;
+  }
+
+  if (viewport.height !== undefined) {
+    if (!isPositiveFinite(viewport.height)) {
+      return undefined;
+    }
+    parsed.height = viewport.height;
+  }
+
+  return parsed;
+};
+
+export const parseIframeResizeMessage = (data: unknown): ContentDimensions | null => {
+  try {
+    const parsed = typeof data === 'string' ? JSON.parse(data) : data;
+    if (parsed?.context !== IFRAME_RESIZE_CONTEXT) {
+      return null;
+    }
+    if (!isPositiveFinite(parsed.width) || !isPositiveFinite(parsed.height)) {
+      return null;
+    }
+
+    const viewport = parseViewport(parsed.viewport);
+    if (parsed.viewport !== undefined && viewport === undefined) {
+      return null;
+    }
+
+    return {
+      width: parsed.width,
+      height: parsed.height,
+      ...(viewport ? { viewport } : {}),
+    };
+  } catch {
+    return null;
+  }
+};
+
+/** Pre-measurement scale so the embed iframe viewport is 2× the frame width (100% / 0.5). */
+export const THUMBNAIL_BOOTSTRAP_SCALE = 0.5;
+
+export const getPreviewFrameStyle = (dimensions: ContentDimensions | null): CSSProperties => {
+  if (!dimensions) {
+    return { '--scale': THUMBNAIL_BOOTSTRAP_SCALE } as CSSProperties;
+  }
+
+  if (hasFixedViewportDimensions(dimensions.viewport)) {
+    return {
+      '--vp-w': dimensions.viewport.width,
+      '--vp-h': dimensions.viewport.height,
+    } as CSSProperties;
+  }
+
+  return { '--content-w': dimensions.width } as CSSProperties;
+};
diff --git a/code/core/src/manager/components/review/components/previewScheduler.ts b/code/core/src/manager/components/review/components/previewScheduler.ts
new file mode 100644
index 000000000000..ad1824cc98e4
--- /dev/null
+++ b/code/core/src/manager/components/review/components/previewScheduler.ts
@@ -0,0 +1,68 @@
+/**
+ * Caps concurrent preview iframe boots across the review grid. See CollectionGrid
+ * header comment for why this exists (`net::ERR_INSUFFICIENT_RESOURCES`).
+ */
+export const PREVIEW_SETTLE_TIMEOUT_MS = 1500;
+
+const MAX_CONCURRENT_PREVIEWS = 3;
+
+export interface PreviewTask {
+  /** Assigns the iframe src, kicking off the actual load. */
+  start: () => void;
+  started: boolean;
+  finished: boolean;
+}
+
+let activePreviewLoads = 0;
+const previewQueue: PreviewTask[] = [];
+
+function startQueuedPreviews(): void {
+  while (activePreviewLoads < MAX_CONCURRENT_PREVIEWS) {
+    const task = previewQueue.shift();
+    if (!task) {
+      return;
+    }
+    if (task.started || task.finished) {
+      continue;
+    }
+    task.started = true;
+    activePreviewLoads += 1;
+    task.start();
+  }
+}
+
+export function enqueuePreview(task: PreviewTask): void {
+  previewQueue.push(task);
+  startQueuedPreviews();
+}
+
+/** Mark a task done (load/error/settle/unmount) and let the next one start. */
+export function finishPreview(task: PreviewTask): void {
+  if (task.finished) {
+    return;
+  }
+  task.finished = true;
+  if (task.started) {
+    activePreviewLoads = Math.max(0, activePreviewLoads - 1);
+  } else {
+    const index = previewQueue.indexOf(task);
+    if (index !== -1) {
+      previewQueue.splice(index, 1);
+    }
+  }
+  startQueuedPreviews();
+}
+
+/** Hover/focus: start a still-queued preview right away, bypassing the cap. */
+export function forceStartPreview(task: PreviewTask): void {
+  if (task.started || task.finished) {
+    return;
+  }
+  const index = previewQueue.indexOf(task);
+  if (index !== -1) {
+    previewQueue.splice(index, 1);
+  }
+  task.started = true;
+  activePreviewLoads += 1;
+  task.start();
+}
diff --git a/code/core/src/manager/components/review/components/usePreviewThumbnail.ts b/code/core/src/manager/components/review/components/usePreviewThumbnail.ts
new file mode 100644
index 000000000000..b2789048c792
--- /dev/null
+++ b/code/core/src/manager/components/review/components/usePreviewThumbnail.ts
@@ -0,0 +1,368 @@
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type Ref,
+  type RefObject,
+} from 'react';
+
+import { IFRAME_RESIZE_REQUEST_CONTEXT } from '../../../../shared/constants/iframe-resize.ts';
+import {
+  contentDimensionsEqual,
+  parseIframeResizeMessage,
+  type ContentDimensions,
+} from './iframeResizeMessage.ts';
+import {
+  PREVIEW_SETTLE_TIMEOUT_MS,
+  enqueuePreview,
+  finishPreview,
+  forceStartPreview,
+  type PreviewTask,
+} from './previewScheduler.ts';
+
+/** If iframe.resize never arrives, don't block the thumbnail forever. */
+const PREVIEW_SCALE_SETTLE_FALLBACK_MS = PREVIEW_SETTLE_TIMEOUT_MS * 3;
+
+// IntersectionObserver `rootMargin`s for the preview lifecycle: mount a cell's
+// The gap is hysteresis so scrolling near a boundary doesn't thrash.
+const PREVIEW_MOUNT_ROOT_MARGIN = '50% 0px';
+const PREVIEW_EVICT_ROOT_MARGIN = '150% 0px';
+
+const resizeHandlers = new Map<Window, (dimensions: ContentDimensions) => void>();
+let resizeMessageListening = false;
+
+const ensureResizeMessageListener = (): void => {
+  if (resizeMessageListening) {
+    return;
+  }
+  resizeMessageListening = true;
+  window.addEventListener('message', (event: MessageEvent) => {
+    // Cross-origin iframe sources are WindowProxy objects; avoid `instanceof Window`.
+    const source = event.source;
+    if (source == null) {
+      return;
+    }
+    const handler = resizeHandlers.get(source as Window);
+    if (!handler) {
+      return;
+    }
+    const dimensions = parseIframeResizeMessage(event.data);
+    if (dimensions) {
+      handler(dimensions);
+    }
+  });
+};
+
+const registerResizeHandler = (
+  contentWindow: Window,
+  handler: (dimensions: ContentDimensions) => void
+): (() => void) => {
+  ensureResizeMessageListener();
+  resizeHandlers.set(contentWindow, handler);
+  return () => {
+    resizeHandlers.delete(contentWindow);
+  };
+};
+
+const requestEmbedRemeasure = (contentWindow: Window): void => {
+  try {
+    contentWindow.postMessage(JSON.stringify({ context: IFRAME_RESIZE_REQUEST_CONTEXT }), '*');
+  } catch {
+    // Cross-origin or detached iframe; ignore.
+  }
+};
+
+const getScrollRoot = (element: HTMLElement): HTMLElement | null => {
+  const radixViewport = element.closest<HTMLElement>('[data-radix-scroll-area-viewport]');
+  if (radixViewport) {
+    return radixViewport;
+  }
+  let current = element.parentElement;
+  while (current) {
+    const { overflowY } = window.getComputedStyle(current);
+    if (overflowY === 'auto' || overflowY === 'scroll') {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+};
+
+const isWithinPreloadRange = (
+  element: HTMLElement,
+  root: HTMLElement | null,
+  margin: number
+): boolean => {
+  const rect = element.getBoundingClientRect();
+  if (rect.width === 0 && rect.height === 0) {
+    return false;
+  }
+  if (root) {
+    const rootRect = root.getBoundingClientRect();
+    return rect.bottom >= rootRect.top - margin && rect.top <= rootRect.bottom + margin;
+  }
+  const viewportHeight =
+    typeof window === 'undefined' ? Number.POSITIVE_INFINITY : window.innerHeight || 0;
+  return rect.bottom >= -margin && rect.top <= viewportHeight + margin;
+};
+
+const getPreloadMargin = (scrollRoot: HTMLElement | null): number => {
+  if (!scrollRoot) {
+    return typeof window === 'undefined' ? 0 : window.innerHeight;
+  }
+  return scrollRoot.clientHeight || window.innerHeight;
+};
+
+export type UsePreviewThumbnailOptions = {
+  storyId: string;
+  getPreviewHref: (storyId: string) => string;
+  previewsPaused?: boolean;
+};
+
+export type UsePreviewThumbnailResult = {
+  cellRef: RefObject<HTMLDivElement>;
+  frameRef: Ref<HTMLDivElement>;
+  iframeRef: RefObject<HTMLIFrameElement>;
+  src: string | undefined;
+  /** True until iframe.resize arrives and the measured scale has painted. */
+  isPreviewLoading: boolean;
+  rememberedDimensions: ContentDimensions | null;
+  forceStartCurrent: () => void;
+  finishCurrent: () => void;
+};
+
+export const usePreviewThumbnail = ({
+  storyId,
+  getPreviewHref,
+  previewsPaused = false,
+}: UsePreviewThumbnailOptions): UsePreviewThumbnailResult => {
+  const cellRef = useRef<HTMLDivElement>(null);
+  const frameElementRef = useRef<HTMLDivElement | null>(null);
+  const frameRef = useCallback((node: HTMLDivElement | null) => {
+    frameElementRef.current = node;
+  }, []);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const previewsPausedRef = useRef(previewsPaused);
+  previewsPausedRef.current = previewsPaused;
+  const [isInView, setIsInView] = useState(false);
+  const [rememberedDimensions, setRememberedDimensions] = useState<ContentDimensions | null>(null);
+  const [isPreviewLoading, setIsPreviewLoading] = useState(false);
+  const [src, setSrc] = useState<string | undefined>(undefined);
+  const taskRef = useRef<PreviewTask | null>(null);
+  const loadGenerationRef = useRef(0);
+  const fallbackTimerRef = useRef<ReturnType<typeof setTimeout>>();
+  const settleRafRef = useRef({ raf1: 0, raf2: 0 });
+
+  const clearSettleTimers = useCallback(() => {
+    if (fallbackTimerRef.current !== undefined) {
+      clearTimeout(fallbackTimerRef.current);
+      fallbackTimerRef.current = undefined;
+    }
+    cancelAnimationFrame(settleRafRef.current.raf1);
+    cancelAnimationFrame(settleRafRef.current.raf2);
+    settleRafRef.current.raf1 = 0;
+    settleRafRef.current.raf2 = 0;
+  }, []);
+
+  const finishLoadingForGeneration = useCallback((generation: number) => {
+    if (loadGenerationRef.current !== generation) {
+      return;
+    }
+    setIsPreviewLoading(false);
+  }, []);
+
+  const scheduleLoadingClearAfterPaint = useCallback(
+    (generation: number) => {
+      cancelAnimationFrame(settleRafRef.current.raf1);
+      cancelAnimationFrame(settleRafRef.current.raf2);
+      settleRafRef.current.raf1 = requestAnimationFrame(() => {
+        settleRafRef.current.raf2 = requestAnimationFrame(() => {
+          finishLoadingForGeneration(generation);
+        });
+      });
+    },
+    [finishLoadingForGeneration]
+  );
+
+  const resetLoad = useCallback(() => {
+    clearSettleTimers();
+    setRememberedDimensions(null);
+    setIsPreviewLoading(false);
+  }, [clearSettleTimers]);
+
+  const beginLoad = useCallback(() => {
+    clearSettleTimers();
+    loadGenerationRef.current += 1;
+    const generation = loadGenerationRef.current;
+    setRememberedDimensions(null);
+    setIsPreviewLoading(true);
+    fallbackTimerRef.current = setTimeout(
+      () => finishLoadingForGeneration(generation),
+      PREVIEW_SCALE_SETTLE_FALLBACK_MS
+    );
+  }, [clearSettleTimers, finishLoadingForGeneration]);
+
+  const handleResize = useCallback(
+    (dimensions: ContentDimensions) => {
+      const generation = loadGenerationRef.current;
+      setRememberedDimensions((current) =>
+        contentDimensionsEqual(current, dimensions) ? current : dimensions
+      );
+      scheduleLoadingClearAfterPaint(generation);
+    },
+    [scheduleLoadingClearAfterPaint]
+  );
+
+  useEffect(() => {
+    const host = cellRef.current;
+    if (!host) {
+      return undefined;
+    }
+    if (typeof IntersectionObserver === 'undefined') {
+      setIsInView(true);
+      return undefined;
+    }
+    const scrollRoot = getScrollRoot(host);
+    const effectiveRoot = scrollRoot && scrollRoot.clientHeight > 0 ? scrollRoot : null;
+    const markInViewIfClose = () => {
+      if (isWithinPreloadRange(host, effectiveRoot, getPreloadMargin(scrollRoot))) {
+        setIsInView(true);
+      }
+    };
+    markInViewIfClose();
+    const resizeObserver =
+      typeof ResizeObserver !== 'undefined'
+        ? new ResizeObserver(() => markInViewIfClose())
+        : undefined;
+    resizeObserver?.observe(host);
+    const mountObserver = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsInView(true);
+        }
+      },
+      { root: effectiveRoot, rootMargin: PREVIEW_MOUNT_ROOT_MARGIN }
+    );
+    const evictObserver = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting && !previewsPausedRef.current) {
+          setIsInView(false);
+        }
+      },
+      { root: effectiveRoot, rootMargin: PREVIEW_EVICT_ROOT_MARGIN }
+    );
+    mountObserver.observe(host);
+    evictObserver.observe(host);
+    return () => {
+      resizeObserver?.disconnect();
+      mountObserver.disconnect();
+      evictObserver.disconnect();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!isInView && !previewsPaused) {
+      setSrc(undefined);
+    }
+  }, [isInView, previewsPaused]);
+
+  useEffect(() => {
+    resetLoad();
+  }, [storyId, resetLoad]);
+
+  useEffect(() => {
+    if (!isInView) {
+      return undefined;
+    }
+    const previewHref = getPreviewHref(storyId);
+    const task: PreviewTask = {
+      start: () => {
+        setSrc(previewHref);
+      },
+      started: false,
+      finished: false,
+    };
+    taskRef.current = task;
+    // Spinner while queued for a concurrency slot, not only after src is assigned.
+    setIsPreviewLoading(true);
+    enqueuePreview(task);
+    return () => {
+      finishPreview(task);
+      taskRef.current = null;
+      resetLoad();
+    };
+  }, [isInView, storyId, getPreviewHref, resetLoad]);
+
+  const finishCurrent = useCallback(() => {
+    if (taskRef.current) {
+      finishPreview(taskRef.current);
+    }
+  }, []);
+
+  const forceStartCurrent = useCallback(() => {
+    if (taskRef.current) {
+      forceStartPreview(taskRef.current);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!src) {
+      resetLoad();
+      return undefined;
+    }
+    beginLoad();
+    return clearSettleTimers;
+  }, [src, beginLoad, resetLoad, clearSettleTimers]);
+
+  useEffect(() => {
+    if (!src) {
+      return undefined;
+    }
+    const timer = setTimeout(finishCurrent, PREVIEW_SETTLE_TIMEOUT_MS);
+    return () => clearTimeout(timer);
+  }, [src, finishCurrent]);
+
+  useLayoutEffect(() => {
+    if (!src) {
+      return undefined;
+    }
+    const iframe = iframeRef.current;
+    if (!iframe) {
+      return undefined;
+    }
+
+    const attach = () => {
+      const contentWindow = iframe.contentWindow;
+      if (!contentWindow) {
+        return undefined;
+      }
+      const detachHandler = registerResizeHandler(contentWindow, handleResize);
+      requestEmbedRemeasure(contentWindow);
+      return detachHandler;
+    };
+
+    let detach = attach();
+    const onLoad = () => {
+      detach?.();
+      detach = attach();
+    };
+    iframe.addEventListener('load', onLoad);
+    return () => {
+      iframe.removeEventListener('load', onLoad);
+      detach?.();
+    };
+  }, [src, handleResize]);
+
+  return {
+    cellRef,
+    frameRef,
+    iframeRef,
+    src,
+    isPreviewLoading,
+    rememberedDimensions,
+    forceStartCurrent,
+    finishCurrent,
+  };
+};
diff --git a/code/core/src/manager/components/review/constants.ts b/code/core/src/manager/components/review/constants.ts
index 59662dac6bef..569ce2316755 100644
--- a/code/core/src/manager/components/review/constants.ts
+++ b/code/core/src/manager/components/review/constants.ts
@@ -4,7 +4,7 @@
 // manager and the external `@storybook/addon-mcp` producer agree on the names.
 import { REVIEW_EVENTS, REVIEW_NAMESPACE } from '../../../shared/review/index.ts';
 
-export { REVIEW_EVENTS as EVENTS, REVIEW_NAMESPACE as ADDON_ID };
+export { REVIEW_NAMESPACE as ADDON_ID, REVIEW_EVENTS as EVENTS };
 
 export const PAGE_ID = `${REVIEW_NAMESPACE}/page`;
 export const REVIEW_CHANGES_URL = '/review/';
@@ -17,3 +17,21 @@ export const PRE_REVIEW_RETURN_KEY = `${REVIEW_NAMESPACE}/pre-review-return`;
 // sessionStorage marker deduplicating the one-time auto-enter on first landing
 // on the review summary. Reset on dismiss and when a new review payload arrives.
 export const AUTO_ENTERED_SESSION_KEY = `${REVIEW_NAMESPACE}/auto-entered`;
+
+// sessionStorage guard while navigateOutOfReview is in flight. Prevents the
+// summary auto-enter effect from re-arming review mode before navigation away.
+export const REVIEW_EXITING_SESSION_KEY = `${REVIEW_NAMESPACE}/exiting`;
+
+// sessionStorage marker for the server `createdAt` of the review the user has
+// opened. Non-review routes only surface a new-review notification while this
+// differs from the active review's `createdAt`.
+export const VISITED_REVIEW_CREATED_AT_KEY = `${REVIEW_NAMESPACE}/visited-created-at`;
+
+// sessionStorage marker for the `createdAt` of the review currently shown in
+// the sidebar notification. Cleared on accept or dismiss.
+export const NOTIFIED_REVIEW_CREATED_AT_KEY = `${REVIEW_NAMESPACE}/notified-created-at`;
+
+export const REVIEW_AVAILABLE_NOTIFICATION_ID = `${REVIEW_NAMESPACE}/review-available`;
+
+export const reviewAvailableNotificationId = (createdAt: number): string =>
+  `${REVIEW_AVAILABLE_NOTIFICATION_ID}/${createdAt}`;
diff --git a/code/core/src/manager/components/review/review-actions.test.ts b/code/core/src/manager/components/review/review-actions.test.ts
new file mode 100644
index 000000000000..7fed619e444d
--- /dev/null
+++ b/code/core/src/manager/components/review/review-actions.test.ts
@@ -0,0 +1,171 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import type { NavigateFunction } from 'storybook/internal/router';
+import type { API } from 'storybook/manager-api';
+
+import {
+  NOTIFIED_REVIEW_CREATED_AT_KEY,
+  VISITED_REVIEW_CREATED_AT_KEY,
+  reviewAvailableNotificationId,
+} from './constants.ts';
+import { navigateOutOfReview } from './review-actions.ts';
+import { enterReviewMode } from './review-mode.ts';
+import { REVIEW_COLLECTION_QUERY_PARAM } from './review-navigation.ts';
+import type { ReviewState } from './review-state.ts';
+import { reviewStore } from './review-store.ts';
+
+const review: ReviewState = {
+  title: 'Example review',
+  description: '',
+  createdAt: 1_700_000_000_000,
+  collections: [{ title: 'A', rationale: '', storyIds: ['story--default'] }],
+};
+
+const emptyFilters = {
+  includedStatusFilters: [],
+  excludedStatusFilters: [],
+  includedTagFilters: [],
+  excludedTagFilters: [],
+};
+
+const makeApi = () => {
+  const setAllStatusFilters = vi.fn(async () => {});
+  const setAllTagFilters = vi.fn(async () => {});
+  return {
+    api: {
+      setAllStatusFilters,
+      setAllTagFilters,
+      removeStatusFilters: vi.fn(async () => {}),
+      setQueryParams: vi.fn(),
+      selectFirstStory: vi.fn(),
+      clearNotification: vi.fn(),
+    } as unknown as API,
+    setAllStatusFilters,
+    setAllTagFilters,
+  };
+};
+
+beforeEach(() => {
+  sessionStorage.clear();
+  reviewStore.reset();
+});
+
+describe('navigateOutOfReview', () => {
+  it('restores filters before navigating back to the canvas', async () => {
+    const { api, setAllStatusFilters, setAllTagFilters } = makeApi();
+    const navigate = vi.fn();
+    const order: string[] = [];
+
+    setAllTagFilters.mockImplementation(async () => {
+      order.push('restore-tag-filters');
+    });
+    setAllStatusFilters.mockImplementation(async () => {
+      order.push('restore-status-filters');
+    });
+    navigate.mockImplementation(() => {
+      order.push('navigate');
+    });
+
+    await enterReviewMode(api, emptyFilters);
+    order.length = 0;
+    vi.clearAllMocks();
+    setAllTagFilters.mockImplementation(async () => {
+      order.push('restore-tag-filters');
+    });
+    setAllStatusFilters.mockImplementation(async () => {
+      order.push('restore-status-filters');
+    });
+    navigate.mockImplementation(() => {
+      order.push('navigate');
+    });
+
+    await navigateOutOfReview(
+      api,
+      navigate as unknown as NavigateFunction,
+      '?path=/story/example--default'
+    );
+
+    expect(order).toEqual(['restore-tag-filters', 'restore-status-filters', 'navigate']);
+    expect(api.setQueryParams).toHaveBeenCalledWith({ [REVIEW_COLLECTION_QUERY_PARAM]: null });
+    expect(api.selectFirstStory).not.toHaveBeenCalled();
+  });
+
+  it('marks the displayed review as visited so the arrival toast does not re-fire', async () => {
+    const { api } = makeApi();
+    const navigate = vi.fn() as unknown as NavigateFunction;
+
+    reviewStore.setState(
+      {
+        ...reviewStore.getState(),
+        state: review,
+      },
+      null
+    );
+
+    await navigateOutOfReview(api, navigate, '?path=/story/example--default');
+
+    expect(sessionStorage.getItem(VISITED_REVIEW_CREATED_AT_KEY)).toBe(String(review.createdAt));
+    expect(api.clearNotification).toHaveBeenCalledWith(
+      reviewAvailableNotificationId(review.createdAt!)
+    );
+  });
+
+  it('does not record a visit when dismissing the review', async () => {
+    const { api } = makeApi();
+    const navigate = vi.fn() as unknown as NavigateFunction;
+
+    reviewStore.setState(
+      {
+        ...reviewStore.getState(),
+        state: review,
+      },
+      null
+    );
+
+    await navigateOutOfReview(api, navigate, '?path=/story/example--default', {
+      recordVisit: false,
+    });
+
+    expect(sessionStorage.getItem(VISITED_REVIEW_CREATED_AT_KEY)).toBeNull();
+    expect(sessionStorage.getItem(NOTIFIED_REVIEW_CREATED_AT_KEY)).toBeNull();
+  });
+
+  it('does not mark the review as visited when filter restoration fails', async () => {
+    const { api, setAllTagFilters } = makeApi();
+    const navigate = vi.fn() as unknown as NavigateFunction;
+
+    await enterReviewMode(api, emptyFilters);
+    vi.clearAllMocks();
+    setAllTagFilters.mockRejectedValueOnce(new Error('restore failed'));
+
+    reviewStore.setState(
+      {
+        ...reviewStore.getState(),
+        state: review,
+      },
+      null
+    );
+
+    await expect(
+      navigateOutOfReview(api, navigate, '?path=/story/example--default')
+    ).rejects.toThrow('restore failed');
+
+    expect(sessionStorage.getItem(VISITED_REVIEW_CREATED_AT_KEY)).toBeNull();
+    expect(api.clearNotification).not.toHaveBeenCalled();
+  });
+
+  it('falls back to the first story when the return search points at a review route', async () => {
+    const { api } = makeApi();
+    const navigate = vi.fn() as unknown as NavigateFunction;
+
+    await navigateOutOfReview(
+      api,
+      navigate,
+      `?path=/story/story--default&${REVIEW_COLLECTION_QUERY_PARAM}=0`
+    );
+
+    expect(navigate).not.toHaveBeenCalled();
+    expect(api.selectFirstStory).toHaveBeenCalled();
+  });
+});
diff --git a/code/core/src/manager/components/review/review-actions.ts b/code/core/src/manager/components/review/review-actions.ts
index a10b7f668908..03cdc39f8817 100644
--- a/code/core/src/manager/components/review/review-actions.ts
+++ b/code/core/src/manager/components/review/review-actions.ts
@@ -1,15 +1,22 @@
 import type { NavigateFunction } from 'storybook/internal/router';
 import { type API } from 'storybook/manager-api';
 
-import { REVIEW_CHANGES_URL } from './constants.ts';
-import { type ReviewModeFilters, enterReviewMode, exitReviewMode } from './review-mode.ts';
+import { REVIEW_CHANGES_URL, REVIEW_EXITING_SESSION_KEY } from './constants.ts';
+import { enterReviewMode, exitReviewMode, type ReviewModeFilters } from './review-mode.ts';
 import {
   REVIEW_COLLECTION_QUERY_PARAM,
-  type ReviewNavEntry,
   buildReviewStoryTarget,
   isReviewReturnSearch,
+  type ReviewNavEntry,
 } from './review-navigation.ts';
+import { acceptReviewNotification } from './review-notification.ts';
 import { reviewStore } from './review-store.ts';
+import { sessionStore } from './session-store.ts';
+
+export interface NavigateOutOfReviewOptions {
+  /** Mark the displayed review as visited so the arrival toast does not re-fire. */
+  recordVisit?: boolean;
+}
 
 /**
  * Navigate to a curated story, entering review mode. Entering is idempotent, so
@@ -41,22 +48,35 @@ export const navigateToReviewSummary = (
 
 /**
  * Leave review mode and return to the pre-review canvas. Shared by the summary
- * back-to-Storybook link and review dismissal; restores chrome/filters via
+ * back-to-Storybook link and review dismissal; restores filters via
  * {@link exitReviewMode} and navigates to the captured return search.
  */
-export const navigateOutOfReview = (
+export const navigateOutOfReview = async (
   api: API,
   navigate: NavigateFunction,
-  returnSearch: string | null | undefined
-): void => {
+  returnSearch: string | null | undefined,
+  { recordVisit = true }: NavigateOutOfReviewOptions = {}
+): Promise<void> => {
+  const visitCreatedAt = recordVisit ? reviewStore.getState().state?.createdAt : undefined;
+
   api.setQueryParams({ [REVIEW_COLLECTION_QUERY_PARAM]: null });
   reviewStore.releaseSummaryOverlaySuppression();
-  void exitReviewMode(api);
 
-  if (returnSearch && !isReviewReturnSearch(returnSearch)) {
-    navigate(returnSearch.startsWith('?') ? returnSearch : `?${returnSearch}`, { plain: true });
-    return;
-  }
+  sessionStore.write(REVIEW_EXITING_SESSION_KEY, '1');
+  try {
+    await exitReviewMode(api);
+
+    if (visitCreatedAt !== undefined) {
+      acceptReviewNotification(api, visitCreatedAt);
+    }
 
-  api.selectFirstStory();
+    if (returnSearch && !isReviewReturnSearch(returnSearch)) {
+      navigate(returnSearch.startsWith('?') ? returnSearch : `?${returnSearch}`, { plain: true });
+      return;
+    }
+
+    api.selectFirstStory();
+  } finally {
+    sessionStore.remove(REVIEW_EXITING_SESSION_KEY);
+  }
 };
diff --git a/code/core/src/manager/components/review/review-mode.test.ts b/code/core/src/manager/components/review/review-mode.test.ts
index 79dcc451af14..1f6001404864 100644
--- a/code/core/src/manager/components/review/review-mode.test.ts
+++ b/code/core/src/manager/components/review/review-mode.test.ts
@@ -4,11 +4,12 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import type { StatusValue } from 'storybook/internal/types';
 
 import {
-  type ReviewModeFilters,
   enterReviewMode,
   exitReviewMode,
   isReviewModeActive,
+  type ReviewModeFilters,
 } from './review-mode.ts';
+import { REVIEWING_STATUS_VALUE } from './review-status.ts';
 
 const emptyFilters: ReviewModeFilters = {
   includedStatusFilters: [],
@@ -17,16 +18,10 @@ const emptyFilters: ReviewModeFilters = {
   excludedTagFilters: [],
 };
 
-const makeApi = (
-  overrides: Partial<{ getIsNavShown: () => boolean; getIsPanelShown: () => boolean }> = {}
-) => ({
-  toggleNav: vi.fn(),
-  togglePanel: vi.fn(),
-  getIsNavShown: () => true,
-  getIsPanelShown: () => true,
+const makeApi = () => ({
   setAllStatusFilters: vi.fn(async () => {}),
   setAllTagFilters: vi.fn(async () => {}),
-  ...overrides,
+  removeStatusFilters: vi.fn(async () => {}),
 });
 
 beforeEach(() => {
@@ -34,12 +29,10 @@ beforeEach(() => {
 });
 
 describe('enterReviewMode', () => {
-  it('collapses chrome, narrows filters to reviewing, and sets the flag', async () => {
+  it('narrows filters to reviewing and sets the flag without changing chrome', async () => {
     const api = makeApi();
     await enterReviewMode(api, emptyFilters);
 
-    expect(api.toggleNav).toHaveBeenCalledWith(false);
-    expect(api.togglePanel).toHaveBeenCalledWith(false);
     expect(api.setAllTagFilters).toHaveBeenCalledWith([], []);
     expect(api.setAllStatusFilters).toHaveBeenCalledWith(['status-value:reviewing'], []);
     expect(isReviewModeActive()).toBe(true);
@@ -61,26 +54,67 @@ describe('enterReviewMode', () => {
     expect(api.setAllTagFilters).toHaveBeenCalledWith(['play-fn'], []);
     expect(api.setAllStatusFilters).toHaveBeenCalledWith(['status-value:error'], []);
   });
+
+  it('does not re-apply filters when already in review mode', async () => {
+    const api = makeApi();
+    await enterReviewMode(api, emptyFilters);
+    vi.clearAllMocks();
+    await enterReviewMode(api, emptyFilters);
+    expect(api.setAllTagFilters).not.toHaveBeenCalled();
+    expect(api.setAllStatusFilters).not.toHaveBeenCalled();
+  });
+
+  it('omits reviewing from the snapshot even when the current filters include it', async () => {
+    const api = makeApi();
+    await enterReviewMode(api, {
+      ...emptyFilters,
+      includedStatusFilters: ['status-value:error' as StatusValue, REVIEWING_STATUS_VALUE],
+    });
+
+    const exitApi = makeApi();
+    await exitReviewMode(exitApi);
+    expect(exitApi.setAllStatusFilters).toHaveBeenCalledWith(['status-value:error'], []);
+  });
 });
 
 describe('exitReviewMode', () => {
-  it('restores only the chrome that was shown before entry and clears the flag', async () => {
-    await enterReviewMode(
-      makeApi({ getIsNavShown: () => true, getIsPanelShown: () => false }),
-      emptyFilters
-    );
+  it('restores snapshotted filters and clears the flag', async () => {
+    const preReviewFilters: ReviewModeFilters = {
+      includedStatusFilters: ['status-value:error' as StatusValue],
+      excludedStatusFilters: [],
+      includedTagFilters: ['play-fn'],
+      excludedTagFilters: [],
+    };
+    await enterReviewMode(makeApi(), preReviewFilters);
 
     const api = makeApi();
     await exitReviewMode(api);
-    expect(api.toggleNav).toHaveBeenCalledWith(true);
-    expect(api.togglePanel).not.toHaveBeenCalledWith(true);
+    expect(api.setAllTagFilters).toHaveBeenCalledWith(['play-fn'], []);
+    expect(api.setAllStatusFilters).toHaveBeenCalledWith(['status-value:error'], []);
     expect(isReviewModeActive()).toBe(false);
   });
 
   it('is inert when there is no snapshot to restore', async () => {
     const api = makeApi();
     await exitReviewMode(api);
-    expect(api.toggleNav).not.toHaveBeenCalled();
+    expect(api.setAllTagFilters).not.toHaveBeenCalled();
+    expect(api.setAllStatusFilters).not.toHaveBeenCalled();
+    expect(api.removeStatusFilters).toHaveBeenCalledWith([REVIEWING_STATUS_VALUE]);
     expect(isReviewModeActive()).toBe(false);
   });
+
+  it('never restores the reviewing status filter', async () => {
+    await enterReviewMode(makeApi(), {
+      ...emptyFilters,
+      includedStatusFilters: ['status-value:error' as StatusValue],
+    });
+
+    const api = makeApi();
+    await exitReviewMode(api);
+    expect(api.setAllStatusFilters).toHaveBeenCalledWith(['status-value:error'], []);
+    expect(api.setAllStatusFilters).not.toHaveBeenCalledWith(
+      expect.arrayContaining([REVIEWING_STATUS_VALUE]),
+      expect.anything()
+    );
+  });
 });
diff --git a/code/core/src/manager/components/review/review-mode.ts b/code/core/src/manager/components/review/review-mode.ts
index b85c99411790..c1f33a905d73 100644
--- a/code/core/src/manager/components/review/review-mode.ts
+++ b/code/core/src/manager/components/review/review-mode.ts
@@ -10,10 +10,6 @@ import { sessionStore } from './session-store.ts';
 // this key.
 const REVIEW_MODE_SESSION_KEY = `${REVIEW_NAMESPACE}/review-mode`;
 
-// Snapshot of the manager chrome (sidebar/addon panel visibility) taken when
-// review mode is entered, so the exact pre-review layout can be restored on exit.
-const CHROME_SNAPSHOT_SESSION_KEY = `${REVIEW_NAMESPACE}/chrome-snapshot`;
-
 // Snapshot of the sidebar filters taken when review mode is entered, so the
 // pre-review filters can be restored on exit.
 const FILTERS_SNAPSHOT_SESSION_KEY = `${REVIEW_NAMESPACE}/filters-snapshot`;
@@ -26,15 +22,18 @@ export interface ReviewModeFilters {
   excludedTagFilters: string[];
 }
 
-type ReviewModeApi = Pick<
-  API,
-  | 'toggleNav'
-  | 'togglePanel'
-  | 'getIsNavShown'
-  | 'getIsPanelShown'
-  | 'setAllStatusFilters'
-  | 'setAllTagFilters'
->;
+type ReviewModeApi = Pick<API, 'setAllStatusFilters' | 'setAllTagFilters' | 'removeStatusFilters'>;
+
+/** Reviewing is owned by review mode and must never be restored after exit. */
+const stripReviewingStatusFilter = (filters: ReviewModeFilters): ReviewModeFilters => ({
+  ...filters,
+  includedStatusFilters: filters.includedStatusFilters.filter(
+    (value) => value !== REVIEWING_STATUS_VALUE
+  ),
+  excludedStatusFilters: filters.excludedStatusFilters.filter(
+    (value) => value !== REVIEWING_STATUS_VALUE
+  ),
+});
 
 /** Whether the manager is currently in review mode (persisted across reloads). */
 export const isReviewModeActive = (): boolean => sessionStore.read(REVIEW_MODE_SESSION_KEY) === '1';
@@ -52,53 +51,46 @@ const readJson = <T>(key: string): T | null => {
 };
 
 /**
- * Enter review mode: the single place chrome collapse and filter narrowing
- * happen. On the first entry it snapshots the current chrome and filters so
- * {@link exitReviewMode} can restore them. Idempotent: re-entering while already
- * in review mode re-applies the focused layout without overwriting the snapshot.
+ * Enter review mode: snapshot sidebar filters and narrow to reviewing stories.
+ * Idempotent — re-entering while already in review mode is a no-op.
  */
 export const enterReviewMode = async (
   api: ReviewModeApi,
   filters: ReviewModeFilters
 ): Promise<void> => {
-  if (!isReviewModeActive()) {
-    sessionStore.write(
-      CHROME_SNAPSHOT_SESSION_KEY,
-      JSON.stringify({
-        nav: api.getIsNavShown(),
-        panel: api.getIsPanelShown(),
-      })
-    );
-    sessionStore.write(FILTERS_SNAPSHOT_SESSION_KEY, JSON.stringify(filters));
-    sessionStore.write(REVIEW_MODE_SESSION_KEY, '1');
+  if (isReviewModeActive()) {
+    return;
   }
 
-  api.toggleNav(false);
-  api.togglePanel(false);
-  await api.setAllTagFilters([], []);
-  await api.setAllStatusFilters([REVIEWING_STATUS_VALUE], []);
+  sessionStore.write(
+    FILTERS_SNAPSHOT_SESSION_KEY,
+    JSON.stringify(stripReviewingStatusFilter(filters))
+  );
+
+  try {
+    await api.setAllTagFilters([], []);
+    await api.setAllStatusFilters([REVIEWING_STATUS_VALUE], []);
+    sessionStore.write(REVIEW_MODE_SESSION_KEY, '1');
+  } catch (error) {
+    sessionStore.remove(FILTERS_SNAPSHOT_SESSION_KEY);
+    throw error;
+  }
 };
 
 /**
- * Exit review mode: restore the chrome and filters captured on entry and clear
- * the persisted review-mode flag. Always restores the pre-review snapshot.
+ * Exit review mode: restore the filters captured on entry and clear the
+ * persisted review-mode flag.
  */
 export const exitReviewMode = async (api: ReviewModeApi): Promise<void> => {
-  const chrome = readJson<{ nav: boolean; panel: boolean }>(CHROME_SNAPSHOT_SESSION_KEY);
-  if (chrome?.nav) {
-    api.toggleNav(true);
-  }
-  if (chrome?.panel) {
-    api.togglePanel(true);
-  }
-
   const filters = readJson<ReviewModeFilters>(FILTERS_SNAPSHOT_SESSION_KEY);
   if (filters) {
-    await api.setAllTagFilters(filters.includedTagFilters, filters.excludedTagFilters);
-    await api.setAllStatusFilters(filters.includedStatusFilters, filters.excludedStatusFilters);
+    const restored = stripReviewingStatusFilter(filters);
+    await api.setAllTagFilters(restored.includedTagFilters, restored.excludedTagFilters);
+    await api.setAllStatusFilters(restored.includedStatusFilters, restored.excludedStatusFilters);
+  } else {
+    await api.removeStatusFilters([REVIEWING_STATUS_VALUE]);
   }
 
-  sessionStore.remove(CHROME_SNAPSHOT_SESSION_KEY);
   sessionStore.remove(FILTERS_SNAPSHOT_SESSION_KEY);
   sessionStore.remove(REVIEW_MODE_SESSION_KEY);
 };
diff --git a/code/core/src/manager/components/review/review-navigation.test.ts b/code/core/src/manager/components/review/review-navigation.test.ts
index 95e0406aecd2..8a76d3d73590 100644
--- a/code/core/src/manager/components/review/review-navigation.test.ts
+++ b/code/core/src/manager/components/review/review-navigation.test.ts
@@ -1,6 +1,5 @@
 import { describe, expect, it } from 'vitest';
 
-import type { ReviewState } from './review-state.ts';
 import {
   REVIEW_COLLECTION_QUERY_PARAM,
   buildFlattenedNavEntries,
@@ -10,6 +9,7 @@ import {
   buildSummaryBackHref,
   getAdjacentCollectionFirstStory,
   getAdjacentReviewEntries,
+  isReviewReturnSearch,
   isReviewSummaryPath,
   parseCollectionIndex,
   parseReviewStoryHref,
@@ -17,6 +17,7 @@ import {
   resolveActiveNavEntry,
   resolveNavIndex,
 } from './review-navigation.ts';
+import type { ReviewState } from './review-state.ts';
 
 const reviewState: ReviewState = {
   title: 'Test review',
@@ -206,6 +207,23 @@ describe('getAdjacentCollectionFirstStory', () => {
   });
 });
 
+describe('isReviewReturnSearch', () => {
+  it('treats the review summary as a review route', () => {
+    expect(isReviewReturnSearch('?path=/review/')).toBe(true);
+    expect(isReviewReturnSearch(buildReviewChangesSummaryHref())).toBe(true);
+  });
+
+  it('treats curated review stories as review routes', () => {
+    expect(
+      isReviewReturnSearch(buildReviewStoryHref({ storyId: 'story-a', collectionIndex: 0 }))
+    ).toBe(true);
+  });
+
+  it('allows normal canvas stories as exit targets', () => {
+    expect(isReviewReturnSearch('?path=/story/foo')).toBe(false);
+  });
+});
+
 describe('buildSummaryBackHref', () => {
   it('returns the last viewed search when recorded', () => {
     expect(buildSummaryBackHref('?path=/story/foo')).toBe('?path=/story/foo');
diff --git a/code/core/src/manager/components/review/review-navigation.ts b/code/core/src/manager/components/review/review-navigation.ts
index d76723052329..8e4dea77f962 100644
--- a/code/core/src/manager/components/review/review-navigation.ts
+++ b/code/core/src/manager/components/review/review-navigation.ts
@@ -1,6 +1,12 @@
+import {
+  REVIEW_COLLECTION_QUERY_PARAM,
+  isReviewSummaryPath,
+} from '../../../shared/review/routes.ts';
 import { REVIEW_CHANGES_URL } from './constants.ts';
 import type { ReviewState } from './review-state.ts';
 
+export { REVIEW_COLLECTION_QUERY_PARAM, isReviewSummaryPath };
+
 /** Fallback display name when the Storybook index has not resolved a title. */
 export const prettifyComponentId = (componentId: string) =>
   componentId
@@ -15,8 +21,6 @@ export interface ReviewNavEntry {
   collectionIndex: number;
 }
 
-export const REVIEW_COLLECTION_QUERY_PARAM = 'collection';
-
 export const buildReviewChangesSummaryHref = () => `?path=${REVIEW_CHANGES_URL}`;
 
 /** Default back target when no story has been visited yet. */
@@ -67,14 +71,15 @@ export const buildFlattenedNavEntries = (state: ReviewState): ReviewNavEntry[] =
   return entries;
 };
 
-export const isReviewSummaryPath = (path: string): boolean =>
-  path === REVIEW_CHANGES_URL || path === '/review';
-
 /** True when a manager search string points back at a review route (not a canvas). */
 export const isReviewReturnSearch = (search: string): boolean => {
-  const path =
-    new URLSearchParams(search.startsWith('?') ? search.slice(1) : search).get('path') ?? '';
-  return isReviewSummaryPath(path) || path.startsWith(REVIEW_CHANGES_URL);
+  const normalized = search.startsWith('?') ? search.slice(1) : search;
+  const params = new URLSearchParams(normalized);
+  const path = params.get('path') ?? '';
+  if (isReviewSummaryPath(path) || path.startsWith(REVIEW_CHANGES_URL)) {
+    return true;
+  }
+  return path.startsWith('/story/') && params.has(REVIEW_COLLECTION_QUERY_PARAM);
 };
 
 export const parseStoryIdFromPath = (path: string): string | null => {
diff --git a/code/core/src/manager/components/review/review-notification.test.ts b/code/core/src/manager/components/review/review-notification.test.ts
new file mode 100644
index 000000000000..5d8df97625b8
--- /dev/null
+++ b/code/core/src/manager/components/review/review-notification.test.ts
@@ -0,0 +1,144 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import {
+  NOTIFIED_REVIEW_CREATED_AT_KEY,
+  VISITED_REVIEW_CREATED_AT_KEY,
+  reviewAvailableNotificationId,
+} from './constants.ts';
+import {
+  acceptReviewNotification,
+  claimNotificationSlot,
+  clearReviewNotificationsOnDismiss,
+  pickReviewToNotify,
+  shouldAutoAcceptOnRoute,
+  shouldSkipArrivalNotification,
+} from './review-notification.ts';
+import type { ReviewState } from './review-state.ts';
+import { sessionStore } from './session-store.ts';
+
+const review = (createdAt: number, title: string): ReviewState => ({
+  title,
+  description: '',
+  createdAt,
+  collections: [{ title: 'A', rationale: '', storyIds: ['s1'] }],
+});
+
+describe('pickReviewToNotify', () => {
+  beforeEach(() => {
+    sessionStore.remove(VISITED_REVIEW_CREATED_AT_KEY);
+    sessionStore.remove(NOTIFIED_REVIEW_CREATED_AT_KEY);
+  });
+
+  it('prefers an unseen pending review', () => {
+    expect(pickReviewToNotify(review(100, 'First'), review(200, 'Second'))).toEqual(
+      review(200, 'Second')
+    );
+  });
+
+  it('returns null when already accepted', () => {
+    sessionStore.write(VISITED_REVIEW_CREATED_AT_KEY, '100');
+    expect(pickReviewToNotify(review(100, 'First'), null)).toBeNull();
+  });
+
+  it('skips a stale displayed review after a newer one was accepted', () => {
+    sessionStore.write(VISITED_REVIEW_CREATED_AT_KEY, '200');
+    expect(pickReviewToNotify(review(100, 'First'), null)).toBeNull();
+  });
+});
+
+describe('acceptReviewNotification', () => {
+  beforeEach(() => {
+    sessionStore.remove(VISITED_REVIEW_CREATED_AT_KEY);
+    sessionStore.remove(NOTIFIED_REVIEW_CREATED_AT_KEY);
+  });
+
+  it('clears the notification and records acceptance', () => {
+    const clearNotification = vi.fn();
+    acceptReviewNotification({ clearNotification }, 100);
+    expect(clearNotification).toHaveBeenCalledWith(reviewAvailableNotificationId(100));
+    expect(sessionStore.read(VISITED_REVIEW_CREATED_AT_KEY)).toBe('100');
+    expect(sessionStore.read(NOTIFIED_REVIEW_CREATED_AT_KEY)).toBe('100');
+  });
+});
+
+describe('claimNotificationSlot', () => {
+  beforeEach(() => {
+    sessionStore.remove(VISITED_REVIEW_CREATED_AT_KEY);
+    sessionStore.remove(NOTIFIED_REVIEW_CREATED_AT_KEY);
+  });
+
+  it('clears older notifications before claiming a new slot', () => {
+    const clearNotification = vi.fn();
+    expect(claimNotificationSlot({ clearNotification }, 200, 100)).toBe(true);
+    expect(clearNotification).toHaveBeenCalledWith(reviewAvailableNotificationId(100));
+    expect(claimNotificationSlot({ clearNotification }, 200)).toBe(false);
+  });
+});
+
+describe('clearReviewNotificationsOnDismiss', () => {
+  beforeEach(() => {
+    sessionStore.remove(NOTIFIED_REVIEW_CREATED_AT_KEY);
+    sessionStore.remove(VISITED_REVIEW_CREATED_AT_KEY);
+    sessionStore.write(VISITED_REVIEW_CREATED_AT_KEY, '100');
+  });
+
+  it('clears notifications and the acceptance marker', () => {
+    const clearNotification = vi.fn();
+    clearReviewNotificationsOnDismiss({ clearNotification }, review(100, 'First'), null);
+    expect(clearNotification).toHaveBeenCalledWith(reviewAvailableNotificationId(100));
+    expect(sessionStore.read(VISITED_REVIEW_CREATED_AT_KEY)).toBeNull();
+  });
+});
+
+describe('shouldSkipArrivalNotification', () => {
+  it('skips deferred updates while already in review', () => {
+    const displayed = review(100, 'First');
+    const pending = review(200, 'Second');
+    expect(shouldSkipArrivalNotification('/review/', undefined, pending, displayed, pending)).toBe(
+      true
+    );
+    expect(
+      shouldSkipArrivalNotification('/story/example--default', 0, pending, displayed, pending)
+    ).toBe(true);
+  });
+
+  it('still notifies for unseen arrivals off review routes', () => {
+    const displayed = review(100, 'First');
+    const pending = review(200, 'Second');
+    expect(
+      shouldSkipArrivalNotification(
+        '/story/example--default',
+        undefined,
+        pending,
+        displayed,
+        pending
+      )
+    ).toBe(false);
+  });
+});
+
+describe('shouldAutoAcceptOnRoute', () => {
+  beforeEach(() => {
+    sessionStore.remove(VISITED_REVIEW_CREATED_AT_KEY);
+    sessionStore.remove(NOTIFIED_REVIEW_CREATED_AT_KEY);
+  });
+
+  it('accepts on the review summary', () => {
+    const displayed = review(200, 'Second');
+    expect(shouldAutoAcceptOnRoute('/review/', undefined, displayed, displayed, null)).toBe(true);
+  });
+
+  it('accepts on a review story route with a collection param', () => {
+    const displayed = review(200, 'Second');
+    expect(shouldAutoAcceptOnRoute('/story/example--default', 0, displayed, displayed, null)).toBe(
+      true
+    );
+  });
+
+  it('skips while a deferred update is showing', () => {
+    const displayed = review(100, 'First');
+    const pending = review(200, 'Second');
+    expect(shouldAutoAcceptOnRoute('/review/', undefined, pending, displayed, pending)).toBe(false);
+  });
+});
diff --git a/code/core/src/manager/components/review/review-notification.ts b/code/core/src/manager/components/review/review-notification.ts
new file mode 100644
index 000000000000..dfa20e2956b3
--- /dev/null
+++ b/code/core/src/manager/components/review/review-notification.ts
@@ -0,0 +1,153 @@
+import type { API } from 'storybook/manager-api';
+
+import {
+  NOTIFIED_REVIEW_CREATED_AT_KEY,
+  REVIEW_AVAILABLE_NOTIFICATION_ID,
+  VISITED_REVIEW_CREATED_AT_KEY,
+  reviewAvailableNotificationId,
+} from './constants.ts';
+import {
+  REVIEW_COLLECTION_QUERY_PARAM,
+  isReviewSummaryPath,
+  parseCollectionIndex,
+} from './review-navigation.ts';
+import type { ReviewState } from './review-state.ts';
+import { sessionStore } from './session-store.ts';
+
+const isUnseen = (createdAt: number | undefined): boolean =>
+  createdAt !== undefined && sessionStore.read(VISITED_REVIEW_CREATED_AT_KEY) !== String(createdAt);
+
+const readVisitedCreatedAt = (): number | undefined => {
+  const raw = sessionStore.read(VISITED_REVIEW_CREATED_AT_KEY);
+  if (raw === null) {
+    return undefined;
+  }
+  const visited = Number(raw);
+  return Number.isFinite(visited) ? visited : undefined;
+};
+
+/** True when the user already opened a newer review push. */
+const isSupersededByVisit = (createdAt: number | undefined): boolean => {
+  const visited = readVisitedCreatedAt();
+  return createdAt !== undefined && visited !== undefined && visited > createdAt;
+};
+
+const readNotifiedCreatedAt = (): number | undefined => {
+  const raw = sessionStore.read(NOTIFIED_REVIEW_CREATED_AT_KEY);
+  if (raw === null) {
+    return undefined;
+  }
+  const notified = Number(raw);
+  return Number.isFinite(notified) ? notified : undefined;
+};
+
+export const isOnReviewRoute = (path: string, collectionIndex: number | undefined): boolean =>
+  isReviewSummaryPath(path) || (path.startsWith('/story/') && collectionIndex !== undefined);
+
+/** In-review pushes use the toolbar Update banner instead of the sidebar toast. */
+export const shouldSkipArrivalNotification = (
+  path: string,
+  collectionIndex: number | undefined,
+  review: ReviewState,
+  displayed: ReviewState | null,
+  deferred: ReviewState | null
+): boolean => {
+  if (!isOnReviewRoute(path, collectionIndex)) {
+    return false;
+  }
+  if (deferred?.createdAt !== undefined && deferred.createdAt === review.createdAt) {
+    return true;
+  }
+  return displayed?.createdAt !== undefined && displayed.createdAt === review.createdAt;
+};
+
+export const pickReviewToNotify = (
+  displayed: ReviewState | null,
+  deferred: ReviewState | null
+): ReviewState | null => {
+  if (deferred?.createdAt !== undefined && isUnseen(deferred.createdAt)) {
+    return deferred;
+  }
+  if (
+    displayed?.createdAt !== undefined &&
+    isUnseen(displayed.createdAt) &&
+    !isSupersededByVisit(displayed.createdAt)
+  ) {
+    return displayed;
+  }
+  return null;
+};
+
+/** User opened the displayed review (summary or review story with collection param). */
+export const shouldAutoAcceptOnRoute = (
+  path: string,
+  collectionIndex: number | undefined,
+  candidate: ReviewState,
+  displayed: ReviewState | null,
+  deferred: ReviewState | null
+): boolean => {
+  const createdAt = candidate.createdAt;
+  if (createdAt === undefined || !isUnseen(createdAt) || displayed?.createdAt !== createdAt) {
+    return false;
+  }
+  if (!isOnReviewRoute(path, collectionIndex)) {
+    return false;
+  }
+  if (deferred?.createdAt !== undefined && deferred.createdAt !== displayed.createdAt) {
+    return false;
+  }
+  return true;
+};
+
+export const clearReviewNotifications = (
+  api: Pick<API, 'clearNotification'>,
+  ...createdAts: Array<number | null | undefined>
+): void => {
+  for (const createdAt of new Set(
+    createdAts.filter((value): value is number => value !== undefined && value !== null)
+  )) {
+    api.clearNotification(reviewAvailableNotificationId(createdAt));
+  }
+  api.clearNotification(REVIEW_AVAILABLE_NOTIFICATION_ID);
+};
+
+export const acceptReviewNotification = (
+  api: Pick<API, 'clearNotification'>,
+  createdAt: number | undefined
+): void => {
+  if (createdAt === undefined) {
+    return;
+  }
+  clearReviewNotifications(api, createdAt);
+  sessionStore.write(VISITED_REVIEW_CREATED_AT_KEY, String(createdAt));
+  // Mark notified too so a layout-effect re-run cannot re-post the arrival toast.
+  sessionStore.write(NOTIFIED_REVIEW_CREATED_AT_KEY, String(createdAt));
+};
+
+export const clearReviewNotificationsOnDismiss = (
+  api: Pick<API, 'clearNotification'>,
+  displayed: ReviewState | null | undefined,
+  deferred: ReviewState | null | undefined
+): void => {
+  clearReviewNotifications(api, displayed?.createdAt, deferred?.createdAt, readNotifiedCreatedAt());
+  sessionStore.remove(VISITED_REVIEW_CREATED_AT_KEY);
+  sessionStore.remove(NOTIFIED_REVIEW_CREATED_AT_KEY);
+};
+
+export const claimNotificationSlot = (
+  api: Pick<API, 'clearNotification'>,
+  createdAt: number,
+  ...extraCreatedAts: Array<number | null | undefined>
+): boolean => {
+  if (!isUnseen(createdAt) || readNotifiedCreatedAt() === createdAt) {
+    return false;
+  }
+  clearReviewNotifications(api, readNotifiedCreatedAt(), ...extraCreatedAts);
+  sessionStore.write(NOTIFIED_REVIEW_CREATED_AT_KEY, String(createdAt));
+  return true;
+};
+
+export const readCollectionIndex = (
+  queryParams: Record<string, unknown> | undefined
+): number | undefined =>
+  parseCollectionIndex(queryParams?.[REVIEW_COLLECTION_QUERY_PARAM] as string | undefined);
diff --git a/code/core/src/manager/components/review/review-store.ts b/code/core/src/manager/components/review/review-store.ts
index d327da418089..1ec450305343 100644
--- a/code/core/src/manager/components/review/review-store.ts
+++ b/code/core/src/manager/components/review/review-store.ts
@@ -1,11 +1,13 @@
 import { useSyncExternalStore } from 'react';
 
-import type { StoryInfo } from './components/CollectionGrid.tsx';
 import type { ReviewNavEntry } from './review-navigation.ts';
 import type { ReviewState } from './review-state.ts';
+import type { StoryInfo } from './review-types.ts';
 
 export interface ReviewStoreState {
   state: ReviewState | null;
+  /** Bumps when displayed or deferred review payloads change; drives notification sync. */
+  notificationKey: string;
   isStale: boolean;
   hasPendingUpdate: boolean;
   onAcceptPendingUpdate: () => void;
@@ -22,6 +24,7 @@ export interface ReviewStoreState {
 
 const emptyStore: ReviewStoreState = {
   state: null,
+  notificationKey: '',
   isStale: false,
   hasPendingUpdate: false,
   onAcceptPendingUpdate: () => {},
@@ -37,6 +40,7 @@ const emptyStore: ReviewStoreState = {
 };
 
 let currentStore: ReviewStoreState = emptyStore;
+let internalPendingReview: ReviewState | null = null;
 const listeners = new Set<() => void>();
 
 /** Synchronously hide the summary overlay before SPA navigation to a story. */
@@ -46,10 +50,17 @@ const notify = () => {
   listeners.forEach((listener) => listener());
 };
 
+export const reviewNotificationKey = (
+  displayed: ReviewState | null,
+  deferred: ReviewState | null
+): string => `${displayed?.createdAt ?? 'none'}:${deferred?.createdAt ?? 'none'}`;
+
 export const reviewStore = {
   getState: () => currentStore,
-  setState: (next: ReviewStoreState) => {
+  getPendingReview: () => internalPendingReview,
+  setState: (next: ReviewStoreState, pendingReview: ReviewState | null) => {
     currentStore = next;
+    internalPendingReview = pendingReview;
     notify();
   },
   subscribe: (listener: () => void) => {
@@ -69,6 +80,12 @@ export const reviewStore = {
     }
   },
   isSummaryOverlayShown: () => currentStore.isSummaryVisible && !summaryOverlaySuppressed,
+  reset: () => {
+    currentStore = emptyStore;
+    internalPendingReview = null;
+    summaryOverlaySuppressed = false;
+    notify();
+  },
 };
 
 export const useReview = (): ReviewStoreState =>
diff --git a/code/core/src/manager/components/review/review-story-info.ts b/code/core/src/manager/components/review/review-story-info.ts
new file mode 100644
index 000000000000..4cb312061da1
--- /dev/null
+++ b/code/core/src/manager/components/review/review-story-info.ts
@@ -0,0 +1,76 @@
+import type { API_IndexHash, StatusesByStoryIdAndTypeId } from 'storybook/internal/types';
+import { CHANGE_DETECTION_STATUS_TYPE_ID } from 'storybook/internal/types';
+import type { API } from 'storybook/manager-api';
+
+import { fallbackStoryInfo, type StoryChangeStatus, type StoryInfo } from './review-types.ts';
+import type { ReviewState } from './review-state.ts';
+
+const getStoryChangeStatus = (
+  allStatuses: StatusesByStoryIdAndTypeId,
+  storyId: string
+): StoryChangeStatus | undefined => {
+  const changeValue = Object.values(allStatuses[storyId] ?? {}).find(
+    (status) => status.typeId === CHANGE_DETECTION_STATUS_TYPE_ID
+  )?.value;
+  if (changeValue === 'status-value:new') {
+    return 'new';
+  }
+  if (changeValue === 'status-value:modified') {
+    return 'modified';
+  }
+  return undefined;
+};
+
+export const buildNewlyAddedStoryIds = (
+  state: ReviewState,
+  allStatuses: StatusesByStoryIdAndTypeId
+): Set<string> => {
+  const ids = new Set<string>();
+  const isChangeDetectedNew = (storyId: string) =>
+    Object.values(allStatuses[storyId] ?? {}).some((status) => status.value === 'status-value:new');
+  for (const collection of state.collections) {
+    for (const storyId of collection.storyIds) {
+      if (isChangeDetectedNew(storyId)) {
+        ids.add(storyId);
+      }
+    }
+  }
+  return ids;
+};
+
+export const buildStoryInfo = (
+  state: ReviewState,
+  index: API_IndexHash | undefined,
+  api: API,
+  allStatuses: StatusesByStoryIdAndTypeId,
+  newlyAddedStoryIds: Set<string>
+): Record<string, StoryInfo> => {
+  const info: Record<string, StoryInfo> = {};
+  for (const collection of state.collections) {
+    for (const storyId of collection.storyIds) {
+      if (storyId in info) {
+        continue;
+      }
+      const direct = index?.[storyId];
+      const entry =
+        direct?.type === 'story' ? direct : index ? api.findLeafEntry(index, storyId) : undefined;
+      const shared = {
+        isNewlyAdded: newlyAddedStoryIds.has(storyId) || undefined,
+        changeStatus: getStoryChangeStatus(allStatuses, storyId),
+      };
+      if (entry?.type === 'story' && entry.title) {
+        info[storyId] = {
+          title: entry.title,
+          name: entry.name,
+          ...shared,
+        };
+      } else {
+        info[storyId] = {
+          ...fallbackStoryInfo(storyId),
+          ...shared,
+        };
+      }
+    }
+  }
+  return info;
+};
diff --git a/code/core/src/manager/components/review/review-types.ts b/code/core/src/manager/components/review/review-types.ts
new file mode 100644
index 000000000000..fc7ab8a544f8
--- /dev/null
+++ b/code/core/src/manager/components/review/review-types.ts
@@ -0,0 +1,20 @@
+export type StoryChangeStatus = 'new' | 'modified';
+
+export interface StoryInfo {
+  title: string;
+  name: string;
+  isNewlyAdded?: boolean;
+  changeStatus?: StoryChangeStatus;
+}
+
+/** Best-effort labels when the Storybook index has not resolved a story yet. */
+export const fallbackStoryInfo = (storyId: string): StoryInfo => {
+  const separator = storyId.indexOf('--');
+  if (separator === -1) {
+    return { title: storyId, name: 'Story' };
+  }
+  return {
+    title: storyId.slice(0, separator),
+    name: storyId.slice(separator + 2) || 'Story',
+  };
+};
diff --git a/code/core/src/manager/components/review/ReviewSummaryPortal.tsx b/code/core/src/manager/components/review/screens/ReviewSummaryPortal.tsx
similarity index 90%
rename from code/core/src/manager/components/review/ReviewSummaryPortal.tsx
rename to code/core/src/manager/components/review/screens/ReviewSummaryPortal.tsx
index 9bf585e7feed..6e5e668df518 100644
--- a/code/core/src/manager/components/review/ReviewSummaryPortal.tsx
+++ b/code/core/src/manager/components/review/screens/ReviewSummaryPortal.tsx
@@ -4,10 +4,12 @@ import { createPortal } from 'react-dom';
 import { useStorybookApi, useStorybookState } from 'storybook/manager-api';
 import { styled } from 'storybook/theming';
 
-import { PRE_REVIEW_RETURN_KEY } from './constants.ts';
-import { reviewStore, useReview } from './review-store.ts';
-import { SummaryScreen } from './screens/SummaryScreen.tsx';
-import { sessionStore } from './session-store.ts';
+import { isReviewManagerRoute } from '../../../../shared/review/routes.ts';
+
+import { PRE_REVIEW_RETURN_KEY } from '../constants.ts';
+import { reviewStore, useReview } from '../review-store.ts';
+import { sessionStore } from '../session-store.ts';
+import { SummaryScreen } from './SummaryScreen.tsx';
 
 const LEGACY_PORTAL_HOST_ID = 'storybook-review-summary-portal';
 const DESKTOP_BREAKPOINT_PX = 600;
@@ -16,7 +18,7 @@ type ChromeInsets = { left: number; right: number; bottom: number };
 
 const useDesktopChromeInsets = (): ChromeInsets => {
   const api = useStorybookApi();
-  const { layout } = useStorybookState();
+  const { layout, path, customQueryParams } = useStorybookState();
   const [isDesktop, setIsDesktop] = useState(
     () =>
       typeof window !== 'undefined' &&
@@ -37,9 +39,10 @@ const useDesktopChromeInsets = (): ChromeInsets => {
   const navSize = api.getNavSizeWithCustomisations?.(layout.navSize) ?? layout.navSize;
   const { panelPosition, rightPanelWidth, bottomPanelHeight } = layout;
   const isPanelShown = api.getIsPanelShown?.() ?? false;
+  const showSidebar = !isReviewManagerRoute(path, customQueryParams);
 
   return {
-    left: api.getIsNavShown?.() ? navSize : 0,
+    left: showSidebar && api.getIsNavShown?.() ? navSize : 0,
     right: isPanelShown && panelPosition === 'right' ? rightPanelWidth : 0,
     bottom: isPanelShown && panelPosition === 'bottom' ? bottomPanelHeight : 0,
   };
diff --git a/code/core/src/manager/components/review/screens/SummaryScreen.stories.tsx b/code/core/src/manager/components/review/screens/SummaryScreen.stories.tsx
index b478ded4df5c..f3fa788bdf42 100644
--- a/code/core/src/manager/components/review/screens/SummaryScreen.stories.tsx
+++ b/code/core/src/manager/components/review/screens/SummaryScreen.stories.tsx
@@ -2,14 +2,14 @@ import React from 'react';
 
 import { expect, within } from 'storybook/test';
 
-import { IconSymbols } from '../../sidebar/IconSymbols.tsx';
 import preview from '../../../../../../.storybook/preview.tsx';
-import type { StoryInfo } from '../components/CollectionGrid.tsx';
+import { IconSymbols } from '../../sidebar/IconSymbols.tsx';
 import type { ReviewState } from '../review-state.ts';
+import type { StoryInfo } from '../review-types.ts';
 import { SummaryScreen } from './SummaryScreen.tsx';
 
 const getStoryPreviewHref = (storyId: string) =>
-  `iframe.html?id=${encodeURIComponent(storyId)}&viewMode=story&freeze=finished`;
+  `iframe.html?id=${encodeURIComponent(storyId)}&viewMode=story&embed=true&freeze=finished`;
 
 const minimal: ReviewState = {
   title: 'Button prop rename',
@@ -58,8 +58,6 @@ const largeCascade: ReviewState = {
         'Manager views consume shared typography, spacing, and theming tokens that can shift subtly.',
       storyIds: [
         'manager-main--default',
-        'manager-main--about-page',
-        'manager-main--guide-page',
         'manager-sidebar-sidebar--simple',
         'manager-sidebar-sidebar--with-refs',
         'manager-sidebar-sidebar--statuses-open',
@@ -123,7 +121,7 @@ const pagesAndBench: ReviewState = {
       storyIds: [
         'manager-settings-aboutscreen--default',
         'manager-settings-guidepage--default',
-        'manager-main--about-page',
+        'manager-main--default',
         'bench--es-build-analyzer',
       ],
     },
diff --git a/code/core/src/manager/components/review/screens/SummaryScreen.tsx b/code/core/src/manager/components/review/screens/SummaryScreen.tsx
index 53ad8f393b8a..26dd70e593aa 100644
--- a/code/core/src/manager/components/review/screens/SummaryScreen.tsx
+++ b/code/core/src/manager/components/review/screens/SummaryScreen.tsx
@@ -20,10 +20,10 @@ import {
   WandIcon,
 } from '@storybook/icons';
 
-import { CollectionGrid, type StoryInfo } from '../components/CollectionGrid.tsx';
-import { Markdown } from '../components/Markdown.tsx';
-import { CopyButton } from '../components/CopyButton.tsx';
 import { AttentionBanner } from '../components/AttentionBanner.tsx';
+import { CollectionGrid } from '../components/CollectionGrid.tsx';
+import { CopyButton } from '../components/CopyButton.tsx';
+import { Markdown } from '../components/Markdown.tsx';
 import { ReviewHeader } from '../components/ReviewHeader.tsx';
 import {
   REVIEW_SUMMARY_BACK_ATTR,
@@ -31,6 +31,7 @@ import {
   buildSummaryBackHref,
 } from '../review-navigation.ts';
 import type { ReviewState } from '../review-state.ts';
+import type { StoryInfo } from '../review-types.ts';
 
 const MarkdownWrapper = styled(DocumentWrapper)(({ theme }) => ({
   color: theme.color.defaultText,
@@ -239,7 +240,7 @@ export const SummaryScreen: FC<SummaryScreenProps> = ({
     }
     setExpandedCollections(new Set(state.collections.map((_, index) => index)));
     setShowAllCollections(new Set());
-  }, [state]);
+  }, [state?.createdAt]);
 
   // Must be computed before the early return — hooks cannot be called conditionally.
   const newStoryCount = useMemo(
diff --git a/code/core/src/manager/components/review/useReviewNavigationInterceptor.ts b/code/core/src/manager/components/review/useReviewNavigationInterceptor.ts
index c6b92c9782f5..f4e98998913c 100644
--- a/code/core/src/manager/components/review/useReviewNavigationInterceptor.ts
+++ b/code/core/src/manager/components/review/useReviewNavigationInterceptor.ts
@@ -53,7 +53,7 @@ export const useReviewNavigationInterceptor = () => {
 
       if (anchor?.hasAttribute(REVIEW_SUMMARY_BACK_ATTR)) {
         event.preventDefault();
-        navigateOutOfReview(api, navigate, sessionStore.read(PRE_REVIEW_RETURN_KEY));
+        void navigateOutOfReview(api, navigate, sessionStore.read(PRE_REVIEW_RETURN_KEY));
         return;
       }
 
diff --git a/code/core/src/manager/components/sidebar/ReviewWidget.stories.tsx b/code/core/src/manager/components/sidebar/ReviewWidget.stories.tsx
index efd3d0710188..a25597c31750 100644
--- a/code/core/src/manager/components/sidebar/ReviewWidget.stories.tsx
+++ b/code/core/src/manager/components/sidebar/ReviewWidget.stories.tsx
@@ -4,9 +4,13 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { REVIEW_STATUS_TYPE_ID } from 'storybook/internal/types';
 
+import { Location, MemoryRouter } from 'storybook/internal/router';
 import { ManagerContext, internal_fullStatusStore } from 'storybook/manager-api';
 import { expect, fn, userEvent } from 'storybook/test';
 
+import { ReviewProvider } from '../review/components/ReviewProvider.tsx';
+import { REVIEW_COLLECTION_QUERY_PARAM } from '../review/review-navigation.ts';
+import { reviewStore } from '../review/review-store.ts';
 import { ReviewWidget } from './ReviewWidget.tsx';
 
 const REVIEW_ADDON_ID = 'storybook/review';
@@ -47,9 +51,10 @@ const buildIndexEntries = (storyIds: string[]) =>
     return acc;
   }, {});
 
-const buildReviewPayload = (reviewTitle: string, storyIds: string[]) => ({
+const buildReviewPayload = (reviewTitle: string, storyIds: string[], createdAt = Date.now()) => ({
   title: reviewTitle,
   description: '',
+  createdAt,
   collections: storyIds.map((storyId) => ({
     title: 'Collection',
     rationale: '',
@@ -61,11 +66,13 @@ const makeManagerContext = (
   options: {
     storyIds?: string[];
     reviewTitle?: string;
+    reviewCreatedAt?: number;
     navigate?: ReturnType<typeof fn>;
     toggleNav?: ReturnType<typeof fn>;
     togglePanel?: ReturnType<typeof fn>;
     setAllTagFilters?: ReturnType<typeof fn>;
     setAllStatusFilters?: ReturnType<typeof fn>;
+    setQueryParams?: ReturnType<typeof fn>;
     emit?: ReturnType<typeof fn>;
     on?: ReturnType<typeof fn>;
     off?: ReturnType<typeof fn>;
@@ -85,7 +92,11 @@ const makeManagerContext = (
     options.emit ??
     fn((eventName: string, payload?: unknown) => {
       if (eventName === REQUEST_REVIEW && options.reviewTitle) {
-        const review = buildReviewPayload(options.reviewTitle, options.storyIds ?? []);
+        const review = buildReviewPayload(
+          options.reviewTitle,
+          options.storyIds ?? [],
+          options.reviewCreatedAt
+        );
         eventListeners.get(DISPLAY_REVIEW)?.forEach((listener) => {
           listener(review);
         });
@@ -97,6 +108,9 @@ const makeManagerContext = (
 
   return {
     state: {
+      path: '/',
+      viewMode: 'story',
+      customQueryParams: {},
       internal_index: {
         v: 5,
         entries: buildIndexEntries(options.storyIds ?? []),
@@ -118,6 +132,14 @@ const makeManagerContext = (
       togglePanel: options.togglePanel ?? fn().mockName('api::togglePanel'),
       setAllTagFilters: options.setAllTagFilters ?? fn().mockName('api::setAllTagFilters'),
       setAllStatusFilters: options.setAllStatusFilters ?? fn().mockName('api::setAllStatusFilters'),
+      setQueryParams: options.setQueryParams ?? fn().mockName('api::setQueryParams'),
+      getStoryHrefs: (storyId: string) => ({
+        managerHref: `?path=/story/${storyId}`,
+        previewHref: `iframe.html?id=${storyId}&viewMode=story`,
+      }),
+      addNotification: fn().mockName('api::addNotification'),
+      clearNotification: fn().mockName('api::clearNotification'),
+      getUrlState: () => ({ path: '/', queryParams: {} }),
       navigate: options.navigate ?? fn().mockName('api::navigate'),
     },
   };
@@ -128,11 +150,22 @@ const meta = {
   title: 'Sidebar/ReviewWidget',
   decorators: [
     (Story, { parameters }) => (
-      <ManagerContext.Provider value={makeManagerContext(parameters?.contextOptions ?? {})}>
-        <div style={{ padding: '8px', width: '280px' }}>
-          <Story />
-        </div>
-      </ManagerContext.Provider>
+      <MemoryRouter initialEntries={['/']}>
+        <ManagerContext.Provider value={makeManagerContext(parameters?.contextOptions ?? {})}>
+          <ReviewProvider>
+            <Location>
+              {({ path }) => (
+                <span data-testid="router-path" hidden>
+                  {path}
+                </span>
+              )}
+            </Location>
+            <div style={{ padding: '8px', width: '280px' }}>
+              <Story />
+            </div>
+          </ReviewProvider>
+        </ManagerContext.Provider>
+      </MemoryRouter>
     ),
   ],
 } satisfies Meta<typeof ReviewWidget>;
@@ -151,6 +184,7 @@ export const Default: Story = {
     },
   },
   beforeEach: () => {
+    reviewStore.reset();
     eventListeners.clear();
     return setReviewingStatuses(storyIds);
   },
@@ -169,6 +203,7 @@ export const SingleStory: Story = {
     },
   },
   beforeEach: () => {
+    reviewStore.reset();
     eventListeners.clear();
     return setReviewingStatuses(['s1']);
   },
@@ -180,6 +215,7 @@ export const SingleStory: Story = {
 
 export const HiddenWhenZeroCounts: Story = {
   beforeEach: () => {
+    reviewStore.reset();
     eventListeners.clear();
     internal_fullStatusStore.unset();
   },
@@ -189,6 +225,7 @@ export const HiddenWhenZeroCounts: Story = {
 };
 
 const navigateMock = fn().mockName('api::navigate');
+const setQueryParamsMock = fn().mockName('api::setQueryParams');
 const toggleNavMock = fn().mockName('api::toggleNav');
 const togglePanelMock = fn().mockName('api::togglePanel');
 const setAllTagFiltersMock = fn().mockName('api::setAllTagFilters');
@@ -200,6 +237,7 @@ export const OpenReview: Story = {
       storyIds: ['s1', 's2'],
       reviewTitle: 'Theme token cascade review',
       navigate: navigateMock,
+      setQueryParams: setQueryParamsMock,
       toggleNav: toggleNavMock,
       togglePanel: togglePanelMock,
       setAllTagFilters: setAllTagFiltersMock,
@@ -207,9 +245,11 @@ export const OpenReview: Story = {
     },
   },
   beforeEach: () => {
+    reviewStore.reset();
     eventListeners.clear();
     sessionStorage.clear();
     navigateMock.mockClear();
+    setQueryParamsMock.mockClear();
     toggleNavMock.mockClear();
     togglePanelMock.mockClear();
     setAllTagFiltersMock.mockClear();
@@ -218,15 +258,16 @@ export const OpenReview: Story = {
   },
   play: async ({ canvas }) => {
     await userEvent.click(canvas.getByRole('button', { name: /Review 2 stories/i }));
-    await expect(toggleNavMock).toHaveBeenCalledWith(false);
-    await expect(togglePanelMock).toHaveBeenCalledWith(false);
     await expect(setAllTagFiltersMock).toHaveBeenCalledWith([], []);
     await expect(setAllStatusFiltersMock).toHaveBeenCalledWith(['status-value:reviewing'], []);
-    await expect(navigateMock).toHaveBeenCalledWith('/review/');
+    await expect(setQueryParamsMock).toHaveBeenCalledWith({
+      [REVIEW_COLLECTION_QUERY_PARAM]: null,
+    });
+    await expect(canvas.getByTestId('router-path')).toHaveTextContent('/review/');
   },
 };
 
-const emitMock = fn((eventName: string, payload?: unknown) => {
+const dismissEmitMock = fn((eventName: string, payload?: unknown) => {
   if (eventName === REQUEST_REVIEW) {
     eventListeners.get(DISPLAY_REVIEW)?.forEach((listener) => {
       listener(buildReviewPayload('Button prop rename', ['s1']));
@@ -242,16 +283,47 @@ export const DismissReview: Story = {
     contextOptions: {
       storyIds: ['s1'],
       reviewTitle: 'Button prop rename',
-      emit: emitMock,
+      emit: dismissEmitMock,
     },
   },
   beforeEach: () => {
+    reviewStore.reset();
     eventListeners.clear();
-    emitMock.mockClear();
+    dismissEmitMock.mockClear();
     return setReviewingStatuses(['s1']);
   },
   play: async ({ canvas }) => {
     await userEvent.click(canvas.getByRole('button', { name: 'Dismiss review' }));
-    await expect(emitMock).toHaveBeenCalledWith(DISMISS_REVIEW);
+    await expect(dismissEmitMock).toHaveBeenCalledWith(DISMISS_REVIEW);
+  },
+};
+
+const INITIAL_CREATED_AT = new Date().getTime() - 100_000;
+
+export const KeepsDisplayedTitleDuringPendingUpdate: Story = {
+  parameters: {
+    contextOptions: {
+      storyIds: ['s1', 's2'],
+      reviewTitle: 'First review title',
+      reviewCreatedAt: INITIAL_CREATED_AT,
+    },
+  },
+  beforeEach: () => {
+    reviewStore.reset();
+    eventListeners.clear();
+    sessionStorage.clear();
+    return setReviewingStatuses(['s1', 's2']);
+  },
+  play: async ({ canvas }) => {
+    await expect(await canvas.findByText('First review title')).toBeVisible();
+
+    eventListeners.get(DISPLAY_REVIEW)?.forEach((listener) => {
+      listener(
+        buildReviewPayload('Updated review title', ['s1', 's2'], INITIAL_CREATED_AT + 60_000)
+      );
+    });
+
+    await expect(canvas.getByText('First review title')).toBeVisible();
+    expect(canvas.queryByText('Updated review title')).toBeNull();
   },
 };
diff --git a/code/core/src/manager/components/sidebar/ReviewWidget.tsx b/code/core/src/manager/components/sidebar/ReviewWidget.tsx
index 5e577f5df4a2..5ae2809375f3 100644
--- a/code/core/src/manager/components/sidebar/ReviewWidget.tsx
+++ b/code/core/src/manager/components/sidebar/ReviewWidget.tsx
@@ -1,10 +1,11 @@
-import React, { type SyntheticEvent, useEffect, useMemo, useState } from 'react';
+import React, { useMemo, type SyntheticEvent } from 'react';
 
 import { ActionList, Card } from 'storybook/internal/components';
 import type { StatusesByStoryIdAndTypeId, StoryIndex } from 'storybook/internal/types';
 
 import { CloseAltIcon, WandIcon } from '@storybook/icons';
 
+import { useNavigate } from 'storybook/internal/router';
 import {
   experimental_useStatusStore,
   useChannel,
@@ -13,14 +14,10 @@ import {
 } from 'storybook/manager-api';
 import { styled } from 'storybook/theming';
 
-import { REVIEW_EVENTS } from '../../../shared/review/index.ts';
-import { REVIEW_CHANGES_URL } from '../review/constants.ts';
-import { enterReviewMode } from '../review/review-mode.ts';
+import { EVENTS } from '../review/constants.ts';
+import { navigateToReviewSummary } from '../review/review-actions.ts';
 import { REVIEWING_STATUS_VALUE as REVIEWING } from '../review/review-status.ts';
-
-type ReviewPayload = {
-  title: string;
-};
+import { useReview } from '../review/review-store.ts';
 
 const HeaderContent = styled(ActionList.Text)({
   display: 'flex',
@@ -68,26 +65,13 @@ export const useReviewingStoryCount = () => {
 };
 
 const useActiveReviewTitle = () => {
-  const [title, setTitle] = useState<string | null>(null);
-
-  const emit = useChannel({
-    [REVIEW_EVENTS.DISPLAY_REVIEW]: (review: ReviewPayload) => {
-      setTitle(review.title);
-    },
-    [REVIEW_EVENTS.REVIEW_DISMISSED]: () => {
-      setTitle(null);
-    },
-  });
-
-  useEffect(() => {
-    emit(REVIEW_EVENTS.REQUEST_REVIEW);
-  }, [emit]);
-
-  return title;
+  const { state } = useReview();
+  return state?.title ?? null;
 };
 
 export const ReviewWidget = () => {
   const api = useStorybookApi();
+  const navigate = useNavigate();
   const storyCount = useReviewingStoryCount();
   const reviewTitle = useActiveReviewTitle();
   const {
@@ -108,24 +92,17 @@ export const ReviewWidget = () => {
   }
 
   const onOpen = () => {
-    void (async () => {
-      try {
-        await enterReviewMode(api, {
-          includedStatusFilters,
-          excludedStatusFilters,
-          includedTagFilters,
-          excludedTagFilters,
-        });
-      } catch {
-        // Best-effort: still continue into the review route.
-      }
-      api.navigate(REVIEW_CHANGES_URL);
-    })();
+    navigateToReviewSummary(api, navigate, {
+      includedStatusFilters,
+      excludedStatusFilters,
+      includedTagFilters,
+      excludedTagFilters,
+    });
   };
 
   const onDismiss = (event: SyntheticEvent) => {
     event.stopPropagation();
-    emit(REVIEW_EVENTS.DISMISS_REVIEW);
+    emit(EVENTS.DISMISS_REVIEW);
   };
 
   const storyLabel = storyCount === 1 ? 'story' : 'stories';
diff --git a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
index 710c104c0c49..55758ee4bb57 100644
--- a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
@@ -15,13 +15,13 @@ import type { IndexHash } from 'storybook/manager-api';
 import { ManagerContext } from 'storybook/manager-api';
 import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
 
+import { internal_fullStatusStore as internal_ctaStatusStore } from 'storybook/manager-api';
 import { initialState } from '../../../shared/checklist-store/checklistData.state.ts';
 import { defaultShortcuts } from '../../settings/defaultShortcuts.tsx';
 import {
   internal_fullStatusStore,
   internal_universalChecklistStore,
 } from '../../manager-stores.mock.ts';
-import { internal_fullStatusStore as internal_ctaStatusStore } from 'storybook/manager-api';
 import { LayoutProvider } from '../layout/LayoutProvider.tsx';
 import { standardData as standardHeaderData } from './Heading.stories.tsx';
 import { DEFAULT_REF_ID, Sidebar } from './Sidebar.tsx';
@@ -227,7 +227,10 @@ export const SimpleNoChecklist: Story = {
   },
   beforeEach: () => {
     const features = global.FEATURES;
-    global.FEATURES = { ...features, sidebarOnboardingChecklist: false };
+    global.FEATURES = {
+      ...features,
+      sidebarOnboardingChecklist: false,
+    };
     return () => {
       global.FEATURES = features;
     };
diff --git a/code/core/src/manager/container/Menu.tsx b/code/core/src/manager/container/Menu.tsx
index ee2e0a20343a..ed647eb8920a 100644
--- a/code/core/src/manager/container/Menu.tsx
+++ b/code/core/src/manager/container/Menu.tsx
@@ -218,7 +218,10 @@ export const useMenu = ({
       [
         [
           about,
-          ...(global.CONFIG_TYPE === 'DEVELOPMENT' ? [guide] : []),
+          ...(global.CONFIG_TYPE === 'DEVELOPMENT' &&
+          global.FEATURES?.menuOnboardingChecklist !== false
+            ? [guide]
+            : []),
           ...(enableShortcuts ? [shortcuts] : []),
         ],
         [sidebarToggle, toolbarToogle, addonsToggle, up, down, prev, next, collapse],
diff --git a/code/core/src/manager/globals/exports.ts b/code/core/src/manager/globals/exports.ts
index 6c461b375232..463acbc86c90 100644
--- a/code/core/src/manager/globals/exports.ts
+++ b/code/core/src/manager/globals/exports.ts
@@ -389,6 +389,7 @@ export default {
     'keyframes',
     'lighten',
     'srOnlyStyles',
+    'srOnlyUnsetStyles',
     'styled',
     'themes',
     'tokens',
diff --git a/code/core/src/manager/settings/index.tsx b/code/core/src/manager/settings/index.tsx
index 73da491326ee..a468ebe9ccd0 100644
--- a/code/core/src/manager/settings/index.tsx
+++ b/code/core/src/manager/settings/index.tsx
@@ -3,8 +3,8 @@ import React, { useMemo } from 'react';
 
 import { Button, ScrollArea, TabsView } from 'storybook/internal/components';
 import { Location, Route } from 'storybook/internal/router';
-import { Addon_TypesEnum } from 'storybook/internal/types';
 import type { Addon_PageType } from 'storybook/internal/types';
+import { Addon_TypesEnum } from 'storybook/internal/types';
 
 import { global } from '@storybook/global';
 import { CloseIcon } from '@storybook/icons';
@@ -81,7 +81,10 @@ const Pages: FC<{
       },
     ];
 
-    if (global.CONFIG_TYPE === 'DEVELOPMENT') {
+    if (
+      global.CONFIG_TYPE === 'DEVELOPMENT' &&
+      global.FEATURES?.menuOnboardingChecklist !== false
+    ) {
       tabsToInclude.push({
         id: 'guide',
         title: 'Guide',
diff --git a/code/core/src/preview-api/modules/preview-web/Preview.tsx b/code/core/src/preview-api/modules/preview-web/Preview.tsx
index 65567f1d6b2e..9c4805c95b05 100644
--- a/code/core/src/preview-api/modules/preview-web/Preview.tsx
+++ b/code/core/src/preview-api/modules/preview-web/Preview.tsx
@@ -45,7 +45,7 @@ import type {
 
 import { global } from '@storybook/global';
 
-import { StoryStore } from '../../store.ts';
+import { StoryStore, composeProjectAnnotationsWithCore } from '../../store.ts';
 import { addons } from '../addons/index.ts';
 import type { CsfDocsRender } from './render/CsfDocsRender.ts';
 import type { MdxDocsRender } from './render/MdxDocsRender.ts';
@@ -154,7 +154,14 @@ export class Preview<TRenderer extends Renderer> {
 
   async getProjectAnnotationsOrRenderError(): Promise<ProjectAnnotations<TRenderer>> {
     try {
-      const projectAnnotations = await this.getProjectAnnotations();
+      // Compose the core annotations in here (the same way the store and portable stories do) so the
+      // `beforeAll` hooks they contribute — e.g. registering the `core/docgen` and `core/story-docs`
+      // services in the preview — run at init. Plain (CSF1-3) previews don't fold core annotations
+      // into `getProjectAnnotations()`, and core annotations would otherwise only be prepended later,
+      // inside the store, which is too late for the `beforeAll` we run below.
+      const projectAnnotations = composeProjectAnnotationsWithCore<TRenderer>([
+        await this.getProjectAnnotations(),
+      ]);
 
       this.renderToCanvas = projectAnnotations.renderToCanvas;
 
diff --git a/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts b/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts
index d97e63f41fc2..70e2aff9a555 100644
--- a/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts
+++ b/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts
@@ -3627,9 +3627,11 @@ describe('PreviewWeb', () => {
       await waitForRender();
 
       // @ts-expect-error Ignore protected property
-      expect((preview.storyStoreValue as StoryStore<Renderer>)!.userGlobals.get()).toEqual({
-        a: 'edited',
-      });
+      expect((preview.storyStoreValue as StoryStore<Renderer>)!.userGlobals.get()).toEqual(
+        expect.objectContaining({
+          a: 'edited',
+        })
+      );
     });
 
     it('emits SET_GLOBALS with new values', async () => {
@@ -3642,7 +3644,7 @@ describe('PreviewWeb', () => {
 
       await waitForEvents([SET_GLOBALS]);
       expect(mockChannel.emit).toHaveBeenCalledWith(SET_GLOBALS, {
-        globals: { a: 'edited' },
+        globals: expect.objectContaining({ a: 'edited' }),
         globalTypes: {},
       });
     });
@@ -3707,7 +3709,7 @@ describe('PreviewWeb', () => {
         expect.objectContaining({
           storyContext: expect.objectContaining({
             args: { foo: 'a', one: 'mapped-1', global: 'added' },
-            globals: { a: 'edited' },
+            globals: expect.objectContaining({ a: 'edited' }),
           }),
         }),
         'story-element'
diff --git a/code/core/src/preview-api/modules/preview-web/PreviewWithSelection.tsx b/code/core/src/preview-api/modules/preview-web/PreviewWithSelection.tsx
index 600e73a3fa2d..f06144df17f1 100644
--- a/code/core/src/preview-api/modules/preview-web/PreviewWithSelection.tsx
+++ b/code/core/src/preview-api/modules/preview-web/PreviewWithSelection.tsx
@@ -42,10 +42,13 @@ import type { MaybePromise } from './Preview.tsx';
 import { Preview } from './Preview.tsx';
 import type { Selection, SelectionStore } from './SelectionStore.ts';
 import type { View } from './View.ts';
+import { shouldAutoplay } from './embedMode.ts';
+import { getEmbedResizeViewport } from './getEmbedResizeViewport.ts';
 import { CsfDocsRender } from './render/CsfDocsRender.ts';
 import { MdxDocsRender } from './render/MdxDocsRender.ts';
 import { PREPARE_ABORTED } from './render/Render.ts';
 import { StoryRender } from './render/StoryRender.ts';
+import { setupContentResizeBroadcast } from './setupContentResizeBroadcast.ts';
 import { setupStoryFreezer } from './setupStoryFreezer.ts';
 
 const globalWindow = globalThis;
@@ -102,7 +105,20 @@ export class PreviewWithSelection<TRenderer extends Renderer> extends Preview<TR
     super.setupListeners();
 
     globalWindow.onkeydown = this.onKeydown.bind(this);
-    setupStoryFreezer(this.channel);
+    const { onContentFrozen } = setupContentResizeBroadcast({
+      getViewport: () => {
+        const render = this.currentRender;
+        if (!render || !isStoryRender(render)) {
+          return undefined;
+        }
+
+        return getEmbedResizeViewport(this.storyStoreValue, render, {
+          width: globalWindow.innerWidth,
+          height: globalWindow.innerHeight,
+        });
+      },
+    });
+    setupStoryFreezer(this.channel, { onFrozen: onContentFrozen });
 
     this.channel.on(SET_CURRENT_STORY, this.onSetCurrentStory.bind(this));
     this.channel.on(UPDATE_QUERY_PARAMS, this.onUpdateQueryParams.bind(this));
@@ -327,7 +343,8 @@ export class PreviewWithSelection<TRenderer extends Renderer> extends Preview<TR
         renderToCanvas,
         this.mainStoryCallbacks(storyId),
         storyId,
-        'story'
+        'story',
+        { autoplay: shouldAutoplay({ search: globalWindow.location?.search ?? '' }) }
       );
     } else if (isMdxEntry(entry)) {
       render = new MdxDocsRender<TRenderer>(
diff --git a/code/core/src/preview-api/modules/preview-web/WebView.test.ts b/code/core/src/preview-api/modules/preview-web/WebView.test.ts
new file mode 100644
index 000000000000..28393168f11f
--- /dev/null
+++ b/code/core/src/preview-api/modules/preview-web/WebView.test.ts
@@ -0,0 +1,39 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { WebView } from './WebView.ts';
+
+const makeStory = (parameters: Record<string, any> = {}) => ({ parameters }) as any;
+
+describe('WebView htmlLang', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="storybook-root"></div><div id="storybook-docs"></div>';
+    document.documentElement.lang = 'en';
+  });
+
+  it('sets lang on the story root from the story htmlLang parameter when preparing a story', () => {
+    const view = new WebView();
+    view.prepareForStory(makeStory({ htmlLang: 'ja' }));
+    expect(document.getElementById('storybook-root')).toHaveAttribute('lang', 'ja');
+  });
+
+  it('leaves the shared document root untouched so sibling stories are not polluted', () => {
+    const view = new WebView();
+    view.prepareForStory(makeStory({ htmlLang: 'ja' }));
+    expect(document.documentElement.lang).toBe('en');
+  });
+
+  it('removes lang from the story root when a story has no htmlLang parameter', () => {
+    const view = new WebView();
+    const storyRoot = document.getElementById('storybook-root')!;
+    storyRoot.setAttribute('lang', 'ja');
+    view.prepareForStory(makeStory({}));
+    expect(storyRoot).not.toHaveAttribute('lang');
+  });
+
+  it('does not modify the document language when preparing docs', () => {
+    const view = new WebView();
+    view.prepareForDocs();
+    expect(document.documentElement.lang).toBe('en');
+  });
+});
diff --git a/code/core/src/preview-api/modules/preview-web/WebView.ts b/code/core/src/preview-api/modules/preview-web/WebView.ts
index 51e15fdb1102..1fee5cf1a98c 100644
--- a/code/core/src/preview-api/modules/preview-web/WebView.ts
+++ b/code/core/src/preview-api/modules/preview-web/WebView.ts
@@ -74,7 +74,10 @@ export class WebView implements View<HTMLElement> {
     document.documentElement.scrollTop = 0;
     document.documentElement.scrollLeft = 0;
 
-    return this.storyRoot();
+    const storyRoot = this.storyRoot();
+    this.applyHtmlLang(storyRoot, story.parameters.htmlLang);
+
+    return storyRoot;
   }
 
   storyRoot(): HTMLElement {
@@ -118,6 +121,17 @@ export class WebView implements View<HTMLElement> {
     this.currentLayoutClass = layoutClass;
   }
 
+  /**
+   * Injects a BCP-47 lang attribute to the story root, or removes it if `lang` is null.
+   */
+  applyHtmlLang(element: HTMLElement, lang?: string) {
+    if (lang) {
+      element.setAttribute('lang', lang);
+    } else {
+      element.removeAttribute('lang');
+    }
+  }
+
   checkIfLayoutExists(layout: keyof typeof layoutClassMap) {
     if (!layoutClassMap[layout]) {
       logger.warn(
diff --git a/code/core/src/preview-api/modules/preview-web/embedMode.test.ts b/code/core/src/preview-api/modules/preview-web/embedMode.test.ts
new file mode 100644
index 000000000000..426bad4710b5
--- /dev/null
+++ b/code/core/src/preview-api/modules/preview-web/embedMode.test.ts
@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest';
+
+import { shouldAutoplay, shouldEmbed } from './embedMode.ts';
+
+describe('shouldEmbed', () => {
+  it('requires embed=true', () => {
+    expect(shouldEmbed({ search: '?id=example--story&viewMode=story' })).toBe(false);
+    expect(shouldEmbed({ search: '?id=example--story&viewMode=story&embed=true' })).toBe(true);
+    expect(shouldEmbed({ search: '?id=example--story&viewMode=story&embed=false' })).toBe(false);
+  });
+});
+
+describe('shouldAutoplay', () => {
+  it('disables play functions in embedded review thumbnails', () => {
+    expect(shouldAutoplay({ search: '?id=example--story&viewMode=story' })).toBe(true);
+    expect(
+      shouldAutoplay({
+        search: '?id=example--story&viewMode=story&embed=true&freeze=finished',
+      })
+    ).toBe(false);
+  });
+});
diff --git a/code/core/src/preview-api/modules/preview-web/embedMode.ts b/code/core/src/preview-api/modules/preview-web/embedMode.ts
new file mode 100644
index 000000000000..0b074beea58e
--- /dev/null
+++ b/code/core/src/preview-api/modules/preview-web/embedMode.ts
@@ -0,0 +1,6 @@
+export const shouldEmbed = ({ search }: { search: string }) => {
+  return new URLSearchParams(search).get('embed') === 'true';
+};
+
+/** Embedded review thumbnails are too narrow for manager interaction plays. */
+export const shouldAutoplay = ({ search }: { search: string }) => !shouldEmbed({ search });
diff --git a/code/core/src/preview-api/modules/preview-web/getEmbedResizeViewport.ts b/code/core/src/preview-api/modules/preview-web/getEmbedResizeViewport.ts
new file mode 100644
index 000000000000..49834284a6ff
--- /dev/null
+++ b/code/core/src/preview-api/modules/preview-web/getEmbedResizeViewport.ts
@@ -0,0 +1,39 @@
+import type { Renderer } from 'storybook/internal/types';
+
+import { PARAM_KEY } from '../../../viewport/constants.ts';
+import { MINIMAL_VIEWPORTS } from '../../../viewport/defaults.ts';
+import {
+  resolveViewport,
+  toResolvedViewportDimensions,
+  type ResolvedViewportDimensions,
+} from '../../../viewport/resolveViewport.ts';
+import type { ViewportParameters } from '../../../viewport/types.ts';
+import type { StoryStore } from '../store/StoryStore.ts';
+import type { StoryRender } from './render/StoryRender.ts';
+
+export const getEmbedResizeViewport = <TRenderer extends Renderer>(
+  storyStore: StoryStore<TRenderer> | undefined,
+  render: StoryRender<TRenderer> | undefined,
+  reference: { width: number; height: number }
+): ResolvedViewportDimensions | undefined => {
+  if (!storyStore || !render?.story) {
+    return undefined;
+  }
+
+  const { globals, storyGlobals, userGlobals, parameters } = storyStore.getStoryContext(
+    render.story
+  );
+  const viewportParameters = parameters[PARAM_KEY] as ViewportParameters['viewport'];
+
+  return toResolvedViewportDimensions(
+    resolveViewport({
+      globals,
+      storyGlobals,
+      userGlobals,
+      options: viewportParameters?.options ?? MINIMAL_VIEWPORTS,
+      disable: viewportParameters?.disable ?? false,
+      viewMode: 'story',
+    }),
+    reference
+  );
+};
diff --git a/code/core/src/preview-api/modules/preview-web/setupContentResizeBroadcast.test.ts b/code/core/src/preview-api/modules/preview-web/setupContentResizeBroadcast.test.ts
new file mode 100644
index 000000000000..0669abfd30db
--- /dev/null
+++ b/code/core/src/preview-api/modules/preview-web/setupContentResizeBroadcast.test.ts
@@ -0,0 +1,589 @@
+// @vitest-environment happy-dom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import {
+  IFRAME_RESIZE_CONTEXT,
+  IFRAME_RESIZE_REQUEST_CONTEXT,
+} from '../../../shared/constants/iframe-resize.ts';
+
+import {
+  isPassThroughContainer,
+  isViewportOverlayUnderlay,
+  setupContentResizeBroadcast,
+} from './setupContentResizeBroadcast.ts';
+
+describe('isPassThroughContainer', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="parent"><div id="child"></div></div>';
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  const mockRects = (entries: Record<string, { width: number; height: number }>) => {
+    for (const [id, { width, height }] of Object.entries(entries)) {
+      const element = document.getElementById(id) as HTMLElement;
+      Object.defineProperty(element, 'getBoundingClientRect', {
+        configurable: true,
+        value: () => ({
+          top: 0,
+          left: 0,
+          bottom: height,
+          right: width,
+          width,
+          height,
+          x: 0,
+          y: 0,
+          toJSON: () => ({}),
+        }),
+      });
+    }
+  };
+
+  it('treats stretched undecorated wrappers as pass-through', () => {
+    mockRects({ parent: { width: 800, height: 40 }, child: { width: 800, height: 40 } });
+    expect(isPassThroughContainer(document.getElementById('child')!)).toBe(true);
+  });
+
+  it('keeps replaced elements such as buttons', () => {
+    document.getElementById('child')!.outerHTML = '<button id="child">Click</button>';
+    mockRects({ parent: { width: 800, height: 40 }, child: { width: 80, height: 40 } });
+    expect(isPassThroughContainer(document.getElementById('child')!)).toBe(false);
+  });
+
+  it('keeps elements with explicit width', () => {
+    const child = document.getElementById('child') as HTMLDivElement;
+    child.style.width = '100%';
+    mockRects({ parent: { width: 800, height: 40 }, child: { width: 800, height: 40 } });
+    expect(isPassThroughContainer(child)).toBe(false);
+  });
+
+  it('keeps elements with visible decoration', () => {
+    const child = document.getElementById('child') as HTMLDivElement;
+    child.style.backgroundColor = 'red';
+    mockRects({ parent: { width: 800, height: 40 }, child: { width: 800, height: 40 } });
+    expect(isPassThroughContainer(child)).toBe(false);
+  });
+
+  it('keeps elements with direct text content', () => {
+    const child = document.getElementById('child') as HTMLDivElement;
+    child.textContent = 'Hello';
+    mockRects({ parent: { width: 800, height: 40 }, child: { width: 120, height: 40 } });
+    expect(isPassThroughContainer(child)).toBe(false);
+  });
+});
+
+describe('isViewportOverlayUnderlay', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="underlay"></div>';
+    vi.stubGlobal('innerWidth', 800);
+    vi.stubGlobal('innerHeight', 600);
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+    vi.unstubAllGlobals();
+  });
+
+  const mockViewportRect = (element: HTMLElement) => {
+    Object.defineProperty(element, 'getBoundingClientRect', {
+      configurable: true,
+      value: () => ({
+        top: 0,
+        left: 0,
+        bottom: 600,
+        right: 800,
+        width: 800,
+        height: 600,
+        x: 0,
+        y: 0,
+        toJSON: () => ({}),
+      }),
+    });
+  };
+
+  it('treats full-viewport fixed transparent layers as underlays', () => {
+    const underlay = document.getElementById('underlay') as HTMLDivElement;
+    underlay.style.position = 'fixed';
+    underlay.style.inset = '0';
+    mockViewportRect(underlay);
+    expect(isViewportOverlayUnderlay(underlay)).toBe(true);
+  });
+
+  it('treats full-viewport absolute transparent layers as underlays', () => {
+    const underlay = document.getElementById('underlay') as HTMLDivElement;
+    underlay.style.position = 'absolute';
+    underlay.style.inset = '0';
+    mockViewportRect(underlay);
+    expect(isViewportOverlayUnderlay(underlay)).toBe(true);
+  });
+
+  it('keeps visible modal backdrops', () => {
+    const underlay = document.getElementById('underlay') as HTMLDivElement;
+    underlay.style.position = 'fixed';
+    underlay.style.inset = '0';
+    underlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
+    mockViewportRect(underlay);
+    expect(isViewportOverlayUnderlay(underlay)).toBe(false);
+  });
+
+  it('keeps non-viewport fixed elements', () => {
+    const underlay = document.getElementById('underlay') as HTMLDivElement;
+    underlay.style.position = 'fixed';
+    underlay.style.inset = '0';
+    Object.defineProperty(underlay, 'getBoundingClientRect', {
+      configurable: true,
+      value: () => ({
+        top: 0,
+        left: 0,
+        bottom: 200,
+        right: 180,
+        width: 180,
+        height: 200,
+        x: 0,
+        y: 0,
+        toJSON: () => ({}),
+      }),
+    });
+    expect(isViewportOverlayUnderlay(underlay)).toBe(false);
+  });
+});
+
+describe('setupContentResizeBroadcast', () => {
+  let previousHref: string;
+  let postMessageSpy: ReturnType<typeof vi.spyOn>;
+  let activeCleanup: (() => void) | undefined;
+
+  const installBroadcast = () => {
+    activeCleanup?.();
+    const result = setupContentResizeBroadcast();
+    activeCleanup = result.cleanup;
+    return result;
+  };
+
+  const measureAfterFreeze = async (setupBody?: () => void) => {
+    window.history.replaceState(
+      {},
+      '',
+      '/iframe.html?id=example--story&viewMode=story&embed=true&freeze=finished'
+    );
+    setupBody?.();
+    const { onContentFrozen } = installBroadcast();
+    onContentFrozen?.();
+    await vi.waitFor(() => {
+      expect(postMessageSpy).toHaveBeenCalled();
+    });
+    const [message] = postMessageSpy.mock.calls.at(-1) ?? [];
+    return JSON.parse(message as string) as {
+      context: string;
+      width: number;
+      height: number;
+      src: string;
+    };
+  };
+
+  const mockRect = (
+    element: HTMLElement,
+    rect: {
+      top: number;
+      left: number;
+      bottom: number;
+      right: number;
+      width: number;
+      height: number;
+    }
+  ) => {
+    Object.defineProperty(element, 'getBoundingClientRect', {
+      configurable: true,
+      value: () => rect,
+    });
+  };
+
+  beforeEach(() => {
+    previousHref = window.location.href;
+    window.history.replaceState({}, '', '/iframe.html?id=example--story&viewMode=story&embed=true');
+    document.body.innerHTML = '<div id="storybook-root"><div id="content">Hello</div></div>';
+    postMessageSpy = vi.fn();
+    vi.stubGlobal('parent', { postMessage: postMessageSpy });
+  });
+
+  afterEach(() => {
+    activeCleanup?.();
+    activeCleanup = undefined;
+    window.history.replaceState({}, '', previousHref);
+    document.body.innerHTML = '';
+    document.head.querySelector('#storybook-embed-sizing')?.remove();
+    document.head.querySelector('#storybook-embed-ui')?.remove();
+    vi.unstubAllGlobals();
+  });
+
+  describe('when freeze=finished', () => {
+    beforeEach(() => {
+      window.history.replaceState(
+        {},
+        '',
+        '/iframe.html?id=example--story&viewMode=story&embed=true&freeze=finished'
+      );
+    });
+
+    it('provides onContentFrozen', () => {
+      const { onContentFrozen } = installBroadcast();
+      expect(onContentFrozen).toEqual(expect.any(Function));
+    });
+
+    it('defers measurement until onContentFrozen', async () => {
+      document.body.innerHTML =
+        '<div id="storybook-root"><button id="button">Animal</button></div><div id="underlay"></div>';
+
+      vi.stubGlobal('innerWidth', 800);
+      vi.stubGlobal('innerHeight', 600);
+
+      const button = document.getElementById('button') as HTMLButtonElement;
+      const underlay = document.getElementById('underlay') as HTMLDivElement;
+      underlay.style.position = 'fixed';
+      underlay.style.inset = '0';
+
+      mockRect(button, {
+        top: 0,
+        left: 0,
+        bottom: 40,
+        right: 160,
+        width: 160,
+        height: 40,
+      });
+      mockRect(underlay, {
+        top: 0,
+        left: 0,
+        bottom: 600,
+        right: 800,
+        width: 800,
+        height: 600,
+      });
+
+      const { onContentFrozen } = installBroadcast();
+      expect(postMessageSpy).not.toHaveBeenCalled();
+
+      onContentFrozen?.();
+
+      await vi.waitFor(() => {
+        expect(postMessageSpy).toHaveBeenCalled();
+      });
+
+      const [message] = postMessageSpy.mock.calls.at(-1) ?? [];
+      const payload = JSON.parse(message as string);
+      expect(payload.width).toBe(160);
+      expect(payload.height).toBe(40);
+    });
+
+    it('ignores parent remeasure requests until onContentFrozen', async () => {
+      document.body.innerHTML = '<div id="storybook-root"><div id="content">Hello</div></div>';
+      const content = document.getElementById('content') as HTMLDivElement;
+      mockRect(content, {
+        top: 0,
+        left: 0,
+        bottom: 48,
+        right: 120,
+        width: 120,
+        height: 48,
+      });
+
+      const { onContentFrozen } = installBroadcast();
+      const parent = window.parent as Window;
+
+      window.dispatchEvent(
+        new MessageEvent('message', {
+          data: JSON.stringify({ context: IFRAME_RESIZE_REQUEST_CONTEXT }),
+          source: parent,
+        })
+      );
+      expect(postMessageSpy).not.toHaveBeenCalled();
+
+      onContentFrozen?.();
+
+      await vi.waitFor(() => {
+        expect(postMessageSpy).toHaveBeenCalled();
+      });
+
+      postMessageSpy.mockClear();
+      window.dispatchEvent(
+        new MessageEvent('message', {
+          data: JSON.stringify({ context: IFRAME_RESIZE_REQUEST_CONTEXT }),
+          source: parent,
+        })
+      );
+
+      await vi.waitFor(() => {
+        expect(postMessageSpy).toHaveBeenCalled();
+      });
+    });
+  });
+
+  it('hides the in-iframe preparing loader for frozen embed thumbnails', () => {
+    window.history.replaceState(
+      {},
+      '',
+      '/iframe.html?id=example--story&viewMode=story&embed=true&freeze=finished'
+    );
+    installBroadcast();
+    const style = document.getElementById('storybook-embed-ui');
+    expect(style?.textContent).toContain('.sb-preparing-story');
+    expect(style?.textContent).toContain('display: none');
+  });
+
+  it('does not hide the in-iframe preparing loader for embed without freeze', () => {
+    installBroadcast();
+    expect(document.getElementById('storybook-embed-ui')).toBeNull();
+  });
+
+  it('auto-measures embed previews without freeze', async () => {
+    const content = document.getElementById('content') as HTMLDivElement;
+    mockRect(content, {
+      top: 0,
+      left: 0,
+      bottom: 48,
+      right: 120,
+      width: 120,
+      height: 48,
+    });
+
+    installBroadcast();
+
+    await vi.waitFor(() => {
+      expect(postMessageSpy).toHaveBeenCalled();
+    });
+    const [message] = postMessageSpy.mock.calls.at(-1) ?? [];
+    expect(JSON.parse(message as string).context).toBe(IFRAME_RESIZE_CONTEXT);
+  });
+
+  it('re-measures when the parent requests dimensions', async () => {
+    const content = document.getElementById('content') as HTMLDivElement;
+    mockRect(content, {
+      top: 0,
+      left: 0,
+      bottom: 48,
+      right: 120,
+      width: 120,
+      height: 48,
+    });
+
+    installBroadcast();
+    await vi.waitFor(() => {
+      expect(postMessageSpy).toHaveBeenCalled();
+    });
+    postMessageSpy.mockClear();
+
+    const parent = window.parent as Window;
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        data: JSON.stringify({ context: IFRAME_RESIZE_REQUEST_CONTEXT }),
+        source: parent,
+      })
+    );
+
+    await vi.waitFor(() => {
+      expect(postMessageSpy).toHaveBeenCalled();
+    });
+    const [message] = postMessageSpy.mock.calls.at(-1) ?? [];
+    expect(JSON.parse(message as string).context).toBe(IFRAME_RESIZE_CONTEXT);
+  });
+
+  it('does not install when embed=true is absent', () => {
+    window.history.replaceState({}, '', '/iframe.html?id=example--story&viewMode=story');
+    expect(setupContentResizeBroadcast()).toEqual({});
+    expect(postMessageSpy).not.toHaveBeenCalled();
+  });
+
+  it('removes embed sizing styles after measuring content', async () => {
+    const content = document.getElementById('content') as HTMLDivElement;
+    mockRect(content, {
+      top: 0,
+      left: 0,
+      bottom: 48,
+      right: 120,
+      width: 120,
+      height: 48,
+    });
+
+    await measureAfterFreeze();
+    expect(document.getElementById('storybook-embed-sizing')).toBeNull();
+  });
+
+  it('posts iframe.resize with content dimensions', async () => {
+    const content = document.getElementById('content') as HTMLDivElement;
+    mockRect(content, {
+      top: 0,
+      left: 0,
+      bottom: 48,
+      right: 120,
+      width: 120,
+      height: 48,
+    });
+
+    const payload = await measureAfterFreeze();
+    expect(payload.context).toBe(IFRAME_RESIZE_CONTEXT);
+    expect(payload.width).toBeGreaterThan(0);
+    expect(payload.height).toBeGreaterThan(0);
+    expect(payload.src).toContain('embed=true');
+  });
+
+  it('includes viewport metadata when getViewport is provided', async () => {
+    window.history.replaceState(
+      {},
+      '',
+      '/iframe.html?id=example--story&viewMode=story&embed=true&freeze=finished'
+    );
+    const content = document.getElementById('content') as HTMLDivElement;
+    mockRect(content, {
+      top: 0,
+      left: 0,
+      bottom: 48,
+      right: 120,
+      width: 120,
+      height: 48,
+    });
+
+    const { onContentFrozen } = setupContentResizeBroadcast({
+      getViewport: () => ({
+        name: 'Small mobile',
+        value: 'mobile1',
+        width: 320,
+        height: 568,
+      }),
+    });
+    onContentFrozen?.();
+
+    await vi.waitFor(() => {
+      expect(postMessageSpy).toHaveBeenCalled();
+    });
+    const [message] = postMessageSpy.mock.calls.at(-1) ?? [];
+    expect(JSON.parse(message as string)).toMatchObject({
+      context: IFRAME_RESIZE_CONTEXT,
+      viewport: { name: 'Small mobile', value: 'mobile1', width: 320, height: 568 },
+    });
+  });
+
+  it('ignores pass-through wrappers when measuring nested content', async () => {
+    const payload = await measureAfterFreeze(() => {
+      document.body.innerHTML =
+        '<div id="storybook-root"><div id="wrapper"><button id="button">Click</button></div></div>';
+
+      const root = document.getElementById('storybook-root') as HTMLDivElement;
+      const wrapper = document.getElementById('wrapper') as HTMLDivElement;
+      const button = document.getElementById('button') as HTMLButtonElement;
+      mockRect(root, {
+        top: 0,
+        left: 0,
+        bottom: 40,
+        right: 800,
+        width: 800,
+        height: 40,
+      });
+      mockRect(wrapper, {
+        top: 0,
+        left: 0,
+        bottom: 40,
+        right: 800,
+        width: 800,
+        height: 40,
+      });
+      mockRect(button, {
+        top: 0,
+        left: 0,
+        bottom: 40,
+        right: 80,
+        width: 80,
+        height: 40,
+      });
+    });
+    expect(payload.width).toBe(80);
+    expect(payload.height).toBe(40);
+  });
+
+  it('does not apply fit-content sizing to inline icon sprites while measuring', async () => {
+    const payload = await measureAfterFreeze(() => {
+      document.body.innerHTML =
+        '<div id="storybook-root"><svg data-chromatic="ignore" style="position:absolute;width:0;height:0"><symbol id="icon"><path d="M0 0h300v20H0z"></path></symbol></svg><button id="button">Filter</button></div>';
+
+      const button = document.getElementById('button') as HTMLButtonElement;
+      mockRect(button, {
+        top: 0,
+        left: 0,
+        bottom: 40,
+        right: 80,
+        width: 80,
+        height: 40,
+      });
+    });
+    expect(payload.width).toBe(80);
+    expect(payload.height).toBe(40);
+  });
+
+  it('ignores full-viewport fixed underlays portaled to the body', async () => {
+    const payload = await measureAfterFreeze(() => {
+      document.body.innerHTML =
+        '<div id="storybook-root"><button id="button">Animal</button></div><div id="underlay"></div>';
+
+      vi.stubGlobal('innerWidth', 800);
+      vi.stubGlobal('innerHeight', 600);
+
+      const button = document.getElementById('button') as HTMLButtonElement;
+      const underlay = document.getElementById('underlay') as HTMLDivElement;
+      underlay.style.position = 'fixed';
+      underlay.style.inset = '0';
+
+      mockRect(button, {
+        top: 0,
+        left: 0,
+        bottom: 40,
+        right: 160,
+        width: 160,
+        height: 40,
+      });
+      mockRect(underlay, {
+        top: 0,
+        left: 0,
+        bottom: 600,
+        right: 800,
+        width: 800,
+        height: 600,
+      });
+    });
+    expect(payload.width).toBe(160);
+    expect(payload.height).toBe(40);
+  });
+
+  it('adds measured body padding symmetrically around content bounds', async () => {
+    const payload = await measureAfterFreeze(() => {
+      document.body.style.padding = '16px';
+      const content = document.getElementById('content') as HTMLDivElement;
+      mockRect(content, {
+        top: 16,
+        left: 16,
+        bottom: 316,
+        right: 316,
+        width: 300,
+        height: 300,
+      });
+    });
+    expect(payload.width).toBe(332);
+    expect(payload.height).toBe(332);
+  });
+
+  it('does not add padding when the iframe body has none', async () => {
+    const payload = await measureAfterFreeze(() => {
+      document.body.style.padding = '0';
+      const content = document.getElementById('content') as HTMLDivElement;
+      mockRect(content, {
+        top: 0,
+        left: 0,
+        bottom: 300,
+        right: 300,
+        width: 300,
+        height: 300,
+      });
+    });
+    expect(payload.width).toBe(300);
+    expect(payload.height).toBe(300);
+  });
+});
diff --git a/code/core/src/preview-api/modules/preview-web/setupContentResizeBroadcast.ts b/code/core/src/preview-api/modules/preview-web/setupContentResizeBroadcast.ts
new file mode 100644
index 000000000000..7bae83fbf4a1
--- /dev/null
+++ b/code/core/src/preview-api/modules/preview-web/setupContentResizeBroadcast.ts
@@ -0,0 +1,526 @@
+import { global } from '@storybook/global';
+
+import {
+  IFRAME_RESIZE_CONTEXT,
+  IFRAME_RESIZE_REQUEST_CONTEXT,
+  iframeResizeViewportsEqual,
+} from '../../../shared/constants/iframe-resize.ts';
+import type { ResolvedViewportDimensions } from '../../../viewport/resolveViewport.ts';
+
+import { shouldEmbed } from './embedMode.ts';
+import { shouldFreeze } from './setupStoryFreezer.ts';
+
+const EMBED_STYLE_ID = 'storybook-embed-sizing';
+const EMBED_UI_STYLE_ID = 'storybook-embed-ui';
+
+const IGNORE_TAGS = new Set([
+  'area',
+  'base',
+  'body',
+  'head',
+  'link',
+  'map',
+  'meta',
+  'nobr',
+  'optgroup',
+  'option',
+  'script',
+  'style',
+  'template',
+  'title',
+  'track',
+  'wbr',
+]);
+
+const REPLACED_OR_CONTROL_TAGS = new Set([
+  'button',
+  'canvas',
+  'embed',
+  'iframe',
+  'img',
+  'input',
+  'object',
+  'select',
+  'svg',
+  'textarea',
+  'video',
+]);
+
+const BLOCK_LEVEL_TAGS = [
+  'address',
+  'article',
+  'aside',
+  'blockquote',
+  'details',
+  'dialog',
+  'div',
+  'dl',
+  'fieldset',
+  'figcaption',
+  'figure',
+  'footer',
+  'form',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'header',
+  'hr',
+  'li',
+  'main',
+  'nav',
+  'ol',
+  'p',
+  'pre',
+  'section',
+  'table',
+  'ul',
+] as const;
+
+const descendantSelector = `* ${Array.from(IGNORE_TAGS)
+  .map((tag) => `:not(${tag})`)
+  .join('')}`;
+
+const isTransparentColor = (color: string): boolean => {
+  if (!color || color === 'transparent') {
+    return true;
+  }
+
+  const match = color.match(/rgba?\(\s*[\d.]+\s*,\s*[\d.]+\s*,\s*[\d.]+\s*(?:,\s*([\d.]+)\s*)?\)/);
+  if (match) {
+    const alpha = match[1] !== undefined ? parseFloat(match[1]) : 1;
+    return alpha === 0;
+  }
+
+  return false;
+};
+
+const hasVisibleDecoration = (style: CSSStyleDeclaration): boolean => {
+  if (style.backgroundImage && style.backgroundImage !== 'none') {
+    return true;
+  }
+  if (!isTransparentColor(style.backgroundColor)) {
+    return true;
+  }
+
+  for (const property of [
+    'borderTopWidth',
+    'borderRightWidth',
+    'borderBottomWidth',
+    'borderLeftWidth',
+  ] as const) {
+    if (parseFloat(style[property]) > 0) {
+      return true;
+    }
+  }
+
+  for (const property of ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'] as const) {
+    if (parseFloat(style[property]) > 0) {
+      return true;
+    }
+  }
+
+  if (style.boxShadow && style.boxShadow !== 'none') {
+    return true;
+  }
+
+  return parseFloat(style.outlineWidth) > 0;
+};
+
+const isReplacedOrControl = (element: Element): boolean => {
+  return REPLACED_OR_CONTROL_TAGS.has(element.tagName.toLowerCase());
+};
+
+const hasDirectText = (element: Element): boolean => {
+  for (const node of element.childNodes) {
+    if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
+      return true;
+    }
+  }
+
+  return false;
+};
+
+const isStretchedToParent = (element: Element): boolean => {
+  const parent = element.parentElement;
+  if (!parent) {
+    return false;
+  }
+
+  const elementRect = element.getBoundingClientRect();
+  const parentRect = parent.getBoundingClientRect();
+
+  return elementRect.width > 0 && Math.abs(elementRect.width - parentRect.width) < 1;
+};
+
+const hasExplicitWidth = (style: CSSStyleDeclaration): boolean => {
+  const { width } = style;
+  if (!width || width === 'auto') {
+    return false;
+  }
+
+  return width !== 'fit-content' && width !== 'max-content' && width !== 'min-content';
+};
+
+const coversViewport = (element: Element): boolean => {
+  const rect = element.getBoundingClientRect();
+
+  return (
+    rect.width >= window.innerWidth - 1 &&
+    rect.height >= window.innerHeight - 1 &&
+    rect.top <= 1 &&
+    rect.left <= 1
+  );
+};
+
+/**
+ * Full-viewport fixed underlays (e.g. Select/Popover dismiss layers) are tracked on
+ * `document.body` but should not inflate embed thumbnail dimensions.
+ */
+export const isViewportOverlayUnderlay = (element: Element): boolean => {
+  const style = window.getComputedStyle(element);
+
+  if (style.position !== 'fixed' && style.position !== 'absolute') {
+    return false;
+  }
+
+  if (hasVisibleDecoration(style) || isReplacedOrControl(element) || hasDirectText(element)) {
+    return false;
+  }
+
+  return coversViewport(element);
+};
+
+/**
+ * Layout-only wrappers that stretch to their parent without painting anything visible.
+ * Their descendants carry the intrinsic size we want for embed thumbnails.
+ */
+export const isPassThroughContainer = (element: Element): boolean => {
+  const style = window.getComputedStyle(element);
+
+  if (style.display === 'contents') {
+    return true;
+  }
+
+  if (hasVisibleDecoration(style) || isReplacedOrControl(element) || hasDirectText(element)) {
+    return false;
+  }
+
+  if (hasExplicitWidth(style)) {
+    return false;
+  }
+
+  return isStretchedToParent(element);
+};
+
+const shouldExcludeFromMeasurement = (element: Element): boolean => {
+  return isPassThroughContainer(element) || isViewportOverlayUnderlay(element);
+};
+
+const getMeasurableElements = (elements: Iterable<Element>): Element[] => {
+  const all = [...elements];
+  const measurable = all.filter((element) => !shouldExcludeFromMeasurement(element));
+
+  return measurable.length > 0 ? measurable : all;
+};
+
+const getBodyPadding = (
+  documentRef: Document
+): {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+} => {
+  const style = window.getComputedStyle(documentRef.body);
+  return {
+    top: parseFloat(style.paddingTop) || 0,
+    right: parseFloat(style.paddingRight) || 0,
+    bottom: parseFloat(style.paddingBottom) || 0,
+    left: parseFloat(style.paddingLeft) || 0,
+  };
+};
+
+const getDimensions = (
+  elements: Iterable<Element>,
+  documentRef: Document
+): { width: number; height: number } => {
+  let minTop = Infinity;
+  let minLeft = Infinity;
+  let maxBottom = 0;
+  let maxRight = 0;
+
+  for (const element of getMeasurableElements(elements)) {
+    const rect = element.getBoundingClientRect();
+    const computedStyle = window.getComputedStyle(element);
+    const marginTop = parseFloat(computedStyle.marginTop) || 0;
+    const marginLeft = parseFloat(computedStyle.marginLeft) || 0;
+    const marginBottom = parseFloat(computedStyle.marginBottom) || 0;
+    const marginRight = parseFloat(computedStyle.marginRight) || 0;
+
+    minTop = Math.min(minTop, rect.top - marginTop);
+    minLeft = Math.min(minLeft, rect.left - marginLeft);
+    maxBottom = Math.max(maxBottom, rect.bottom + marginBottom);
+    maxRight = Math.max(maxRight, rect.right + marginRight);
+  }
+
+  const padding = getBodyPadding(documentRef);
+  const contentWidth = maxRight - minLeft;
+  const contentHeight = maxBottom - minTop;
+
+  return {
+    width: Math.ceil(contentWidth + padding.left + padding.right),
+    height: Math.ceil(contentHeight + padding.top + padding.bottom),
+  };
+};
+
+const getTrackedElements = (): Set<Element> => {
+  const elements = new Set<Element>();
+
+  const nodes = [
+    ...Array.from(document.getElementById('storybook-root')?.children || []),
+    ...Array.from(document.body.children).filter((child) => !child.id.startsWith('storybook-')),
+  ];
+  for (const node of nodes) {
+    if (node instanceof Element && !IGNORE_TAGS.has(node.tagName.toLowerCase())) {
+      elements.add(node);
+      for (const descendant of Array.from(node.querySelectorAll(descendantSelector))) {
+        elements.add(descendant);
+      }
+    }
+  }
+
+  return elements;
+};
+
+const injectEmbedSizingStyles = (documentRef: Document): void => {
+  if (documentRef.getElementById(EMBED_STYLE_ID)) {
+    return;
+  }
+
+  const style = documentRef.createElement('style');
+  style.id = EMBED_STYLE_ID;
+  // `:where` is used so the selector has a specificity of 0, allowing overrides
+  style.textContent = `${`:where(#storybook-root > :is(${BLOCK_LEVEL_TAGS.join(', ')}))`} {
+    width: fit-content;
+    max-width: 100%;
+  }`;
+  documentRef.head.appendChild(style);
+};
+
+const removeEmbedSizingStyles = (documentRef: Document): void => {
+  documentRef.getElementById(EMBED_STYLE_ID)?.remove();
+};
+
+/** Review thumbnails draw their own loader outside the scale wrapper. */
+const injectEmbedUiStyles = (documentRef: Document): void => {
+  if (documentRef.getElementById(EMBED_UI_STYLE_ID)) {
+    return;
+  }
+
+  const style = documentRef.createElement('style');
+  style.id = EMBED_UI_STYLE_ID;
+  style.textContent = `
+    .sb-preparing-story,
+    .sb-preparing-docs {
+      display: none !important;
+    }
+  `;
+  documentRef.head.appendChild(style);
+};
+
+let lastDimensions: {
+  width: number;
+  height: number;
+  viewport?: ResolvedViewportDimensions;
+} | null = null;
+
+const sendResizeMessage = (
+  elements: Set<Element>,
+  windowRef: Window,
+  documentRef: Document,
+  getViewport?: () => ResolvedViewportDimensions | undefined
+): void => {
+  if (!elements.size) {
+    return;
+  }
+
+  injectEmbedSizingStyles(documentRef);
+  const dimensions = getDimensions(elements, documentRef);
+  removeEmbedSizingStyles(documentRef);
+  const viewport = getViewport?.();
+
+  if (
+    dimensions.width === lastDimensions?.width &&
+    dimensions.height === lastDimensions?.height &&
+    iframeResizeViewportsEqual(viewport, lastDimensions?.viewport)
+  ) {
+    return;
+  }
+
+  const message = JSON.stringify({
+    src: windowRef.location.toString(),
+    context: IFRAME_RESIZE_CONTEXT,
+    width: dimensions.width,
+    height: dimensions.height,
+    ...(viewport ? { viewport } : {}),
+  });
+  lastDimensions = { ...dimensions, viewport };
+
+  try {
+    if (windowRef.parent !== windowRef) {
+      windowRef.parent.postMessage(message, '*');
+    }
+  } catch {
+    // Silently ignore CORS errors — the parent frame is out of our control.
+  }
+};
+
+const debounce = (callback: () => void): (() => void) & { cancel: () => void } => {
+  let rafId: number | null = null;
+
+  const debounced = () => {
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+    }
+    rafId = requestAnimationFrame(() => {
+      callback();
+      rafId = null;
+    });
+  };
+
+  debounced.cancel = () => {
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+  };
+
+  return debounced;
+};
+
+export type ContentResizeBroadcastOptions = {
+  /** Resolve the active viewport for the current story when posting iframe.resize. */
+  getViewport?: () => ResolvedViewportDimensions | undefined;
+};
+
+export type ContentResizeBroadcast = {
+  /** Final measure after freeze; only set when freeze is also active. */
+  onContentFrozen?: () => void;
+  /** Tear down listeners/observers; for tests and hot reload. */
+  cleanup?: () => void;
+};
+
+/**
+ * When `embed=true`, measure story content and notify the parent frame via
+ * postMessage so embedded thumbnails can size themselves to the content.
+ */
+export const setupContentResizeBroadcast = (
+  options: ContentResizeBroadcastOptions = {}
+): ContentResizeBroadcast => {
+  const { getViewport } = options;
+  const windowRef = global.window;
+  const documentRef = global.document;
+  if (!windowRef || !documentRef) {
+    return {};
+  }
+
+  if (!shouldEmbed({ search: documentRef.location.search })) {
+    return {};
+  }
+
+  lastDimensions = null;
+
+  const freezing = shouldFreeze({ search: documentRef.location.search });
+
+  if (freezing) {
+    // Review thumbnails draw their own loader in the manager grid.
+    injectEmbedUiStyles(documentRef);
+  }
+  let contentFrozen = false;
+
+  const measureAndSend = () => {
+    const elements = getTrackedElements();
+    sendResizeMessage(elements, windowRef, documentRef, getViewport);
+  };
+
+  const onParentMessage = (event: MessageEvent) => {
+    if (event.source !== windowRef.parent) {
+      return;
+    }
+    try {
+      const parsed = typeof event.data === 'string' ? JSON.parse(event.data) : event.data;
+      if (parsed?.context === IFRAME_RESIZE_REQUEST_CONTEXT) {
+        if (freezing && !contentFrozen) {
+          return;
+        }
+        lastDimensions = null;
+        measureAndSend();
+      }
+    } catch {
+      // Ignore malformed parent messages.
+    }
+  };
+  windowRef.addEventListener('message', onParentMessage);
+  const cleanups: Array<() => void> = [
+    () => windowRef.removeEventListener('message', onParentMessage),
+  ];
+
+  if (freezing) {
+    // Thumbnail embeds use freeze=finished so the preview can settle before measuring.
+    // Measuring earlier (e.g. while a portaled dismiss underlay is mounted) would
+    // report the iframe viewport instead of the story chrome.
+    return {
+      onContentFrozen: () => {
+        contentFrozen = true;
+        measureAndSend();
+      },
+      cleanup: () => cleanups.forEach((fn) => fn()),
+    };
+  }
+
+  const trackedElements = getTrackedElements();
+  const update = () => sendResizeMessage(trackedElements, windowRef, documentRef, getViewport);
+  const debouncedUpdate = debounce(update);
+
+  const resizeObserver = new ResizeObserver(debouncedUpdate);
+  for (const element of trackedElements) {
+    resizeObserver.observe(element);
+  }
+
+  const mutationObserver = new MutationObserver(() => {
+    debouncedUpdate();
+
+    const updatedElements = getTrackedElements();
+    for (const element of updatedElements) {
+      if (!trackedElements.has(element)) {
+        resizeObserver.observe(element);
+        trackedElements.add(element);
+      }
+    }
+    for (const element of trackedElements) {
+      if (!updatedElements.has(element)) {
+        resizeObserver.unobserve(element);
+        trackedElements.delete(element);
+      }
+    }
+  });
+  mutationObserver.observe(documentRef.body, {
+    childList: true,
+    subtree: true,
+  });
+
+  windowRef.addEventListener('resize', debouncedUpdate);
+  cleanups.push(
+    () => debouncedUpdate.cancel(),
+    () => resizeObserver.disconnect(),
+    () => mutationObserver.disconnect(),
+    () => windowRef.removeEventListener('resize', debouncedUpdate)
+  );
+
+  measureAndSend();
+
+  return { cleanup: () => cleanups.forEach((fn) => fn()) };
+};
diff --git a/code/core/src/preview-api/modules/preview-web/setupStoryFreezer.test.ts b/code/core/src/preview-api/modules/preview-web/setupStoryFreezer.test.ts
index 0c0d02f97356..39ecf4552c1a 100644
--- a/code/core/src/preview-api/modules/preview-web/setupStoryFreezer.test.ts
+++ b/code/core/src/preview-api/modules/preview-web/setupStoryFreezer.test.ts
@@ -251,4 +251,21 @@ describe('setupStoryFreezer', () => {
       expect(pause).toHaveBeenCalledTimes(1);
     });
   });
+
+  it('calls onFrozen after freeze completes', async () => {
+    window.history.replaceState(
+      {},
+      '',
+      '/iframe.html?id=example--story&viewMode=story&freeze=finished'
+    );
+
+    const channel = createChannel();
+    const onFrozen = vi.fn();
+    expect(setupStoryFreezer(channel, { onFrozen })).toBe(true);
+
+    channel.emit(STORY_RENDER_PHASE_CHANGED, { newPhase: 'finished', storyId: 'example--story' });
+    await vi.waitFor(() => {
+      expect(onFrozen).toHaveBeenCalledTimes(1);
+    });
+  });
 });
diff --git a/code/core/src/preview-api/modules/preview-web/setupStoryFreezer.ts b/code/core/src/preview-api/modules/preview-web/setupStoryFreezer.ts
index 569b0986665b..179976ca78b5 100644
--- a/code/core/src/preview-api/modules/preview-web/setupStoryFreezer.ts
+++ b/code/core/src/preview-api/modules/preview-web/setupStoryFreezer.ts
@@ -276,7 +276,15 @@ const createStoryFreezer = (windowRef: Window, documentRef: Document) => {
   return { freeze };
 };
 
-export const setupStoryFreezer = (channel: Pick<Channel, 'on'>) => {
+export type StoryFreezerOptions = {
+  /** Called once after the document has been frozen. */
+  onFrozen?: () => void;
+};
+
+export const setupStoryFreezer = (
+  channel: Pick<Channel, 'on'>,
+  options: StoryFreezerOptions = {}
+) => {
   const windowRef = global.window;
   const documentRef = global.document;
   if (!windowRef || !documentRef) {
@@ -289,12 +297,21 @@ export const setupStoryFreezer = (channel: Pick<Channel, 'on'>) => {
 
   addPreFreezeStyles(documentRef);
   const freezer = createStoryFreezer(windowRef, documentRef);
+  let notifiedFrozen = false;
   channel.on(STORY_RENDER_PHASE_CHANGED, ({ newPhase }) => {
     if (newPhase === 'finished') {
+      const runFreeze = () => {
+        if (notifiedFrozen) {
+          return;
+        }
+        freezer.freeze();
+        notifiedFrozen = true;
+        options.onFrozen?.();
+      };
       if (typeof windowRef.queueMicrotask === 'function') {
-        windowRef.queueMicrotask(freezer.freeze);
+        windowRef.queueMicrotask(runFreeze);
       } else {
-        windowRef.setTimeout(freezer.freeze, 0);
+        windowRef.setTimeout(runFreeze, 0);
       }
     }
   });
diff --git a/code/core/src/preview-api/modules/store/StoryStore.ts b/code/core/src/preview-api/modules/store/StoryStore.ts
index af9941493b2f..3f5aeeb08475 100644
--- a/code/core/src/preview-api/modules/store/StoryStore.ts
+++ b/code/core/src/preview-api/modules/store/StoryStore.ts
@@ -1,5 +1,4 @@
 import type { CleanupCallback } from 'storybook/internal/csf';
-import { getCoreAnnotations, hasCoreAnnotations } from 'storybook/internal/csf';
 import {
   CalledExtractOnStoreError,
   MissingStoryFromCsfFileError,
@@ -28,7 +27,7 @@ import { ArgsStore } from './ArgsStore.ts';
 import { GlobalsStore } from './GlobalsStore.ts';
 import { StoryIndexStore } from './StoryIndexStore.ts';
 import {
-  composeConfigs,
+  composeProjectAnnotationsWithCore,
   normalizeProjectAnnotations,
   prepareContext,
   prepareMeta,
@@ -45,20 +44,13 @@ export function picky<T extends Record<string, any>, K extends keyof T>(
 }
 
 /**
- * Compose and normalize the project annotations for the store, prepending the core annotations.
- *
- * CSF4 previews (created with `definePreview`) already compose the core annotations into their
- * `composed` result and flag it via {@link hasCoreAnnotations}. In that case we must NOT prepend
- * core annotations again, otherwise every core decorator/loader/beforeEach/beforeAll would run
- * twice for non-factory (CSF1/2/3) stories that fall back to `store.projectAnnotations`.
+ * Compose and normalize the project annotations for the store, prepending the core annotations via
+ * {@link composeProjectAnnotationsWithCore} (CSF4 previews are detected and not double-composed).
  */
 function composeProjectAnnotations<TRenderer extends Renderer>(
   projectAnnotations: ProjectAnnotations<TRenderer>
 ): NormalizedProjectAnnotations<TRenderer> {
-  if (hasCoreAnnotations(projectAnnotations)) {
-    return normalizeProjectAnnotations(projectAnnotations);
-  }
-  return normalizeProjectAnnotations(composeConfigs([...getCoreAnnotations(), projectAnnotations]));
+  return normalizeProjectAnnotations(composeProjectAnnotationsWithCore([projectAnnotations]));
 }
 
 // TODO -- what are reasonable values for these?
diff --git a/code/core/src/preview-api/modules/store/csf/composeProjectAnnotationsWithCore.ts b/code/core/src/preview-api/modules/store/csf/composeProjectAnnotationsWithCore.ts
new file mode 100644
index 000000000000..d5fbb55acb50
--- /dev/null
+++ b/code/core/src/preview-api/modules/store/csf/composeProjectAnnotationsWithCore.ts
@@ -0,0 +1,46 @@
+import {
+  getCoreAnnotations,
+  hasCoreAnnotations,
+  markAsComposedWithCoreAnnotations,
+} from 'storybook/internal/csf';
+import type {
+  ModuleExports,
+  NormalizedProjectAnnotations,
+  Renderer,
+} from 'storybook/internal/types';
+
+import { composeConfigs } from './composeConfigs.ts';
+
+/**
+ * Composes project annotations together, prepending Storybook's core annotations unless they are
+ * already present, and flags the result via {@link markAsComposedWithCoreAnnotations} so later
+ * composition does not add them a second time.
+ *
+ * Core annotations carry behavior that must be applied exactly once per realm: decorators, loaders,
+ * `beforeEach`, and the `beforeAll` hooks that register the built-in open services (`core/docgen`,
+ * `core/story-docs`). CSF4 previews (`definePreview`) already fold the core annotations into their
+ * `composed` result and mark it; plain CSF1-3 previews do not. Every entrypoint that runs `beforeAll`
+ * or builds the story store off the raw project annotations (the browser preview, the store, and
+ * portable stories) funnels them through here so the behavior is identical across all of them.
+ *
+ * Pass the *raw* annotation modules (not pre-composed) so the CSF4 marker survives the
+ * `hasCoreAnnotations` check. The result is composed but NOT normalized — callers that need a
+ * {@link NormalizedProjectAnnotations} should run `normalizeProjectAnnotations` on top.
+ */
+export function composeProjectAnnotationsWithCore<TRenderer extends Renderer = Renderer>(
+  annotations: ModuleExports[]
+): NormalizedProjectAnnotations<TRenderer> {
+  // Drop falsy entries (e.g. `setProjectAnnotations(undefined)` or a sparse array): `composeConfigs`
+  // reads `.default` off each entry and would throw on `null`/`undefined`.
+  const definedAnnotations = annotations.filter(Boolean);
+  const alreadyComposedWithCore = definedAnnotations.some((annotation) =>
+    hasCoreAnnotations(annotation)
+  );
+  return markAsComposedWithCoreAnnotations(
+    composeConfigs<TRenderer>(
+      alreadyComposedWithCore
+        ? definedAnnotations
+        : [...getCoreAnnotations(), ...definedAnnotations]
+    )
+  );
+}
diff --git a/code/core/src/preview-api/modules/store/csf/index.ts b/code/core/src/preview-api/modules/store/csf/index.ts
index fa288130f481..4e4bc26ca889 100644
--- a/code/core/src/preview-api/modules/store/csf/index.ts
+++ b/code/core/src/preview-api/modules/store/csf/index.ts
@@ -7,6 +7,7 @@ export * from './normalizeProjectAnnotations.ts';
 export * from './normalizeArrays.ts';
 export * from './getValuesFromGlobalTypes.ts';
 export * from './composeConfigs.ts';
+export * from './composeProjectAnnotationsWithCore.ts';
 export * from './stepRunners.ts';
 export * from './portable-stories.ts';
 export * from './csf-factory-utils.ts';
diff --git a/code/core/src/preview-api/modules/store/csf/portable-stories.ts b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
index 0e76e4df92ed..620752b664f7 100644
--- a/code/core/src/preview-api/modules/store/csf/portable-stories.ts
+++ b/code/core/src/preview-api/modules/store/csf/portable-stories.ts
@@ -1,5 +1,4 @@
 import { type CleanupCallback, isExportStory } from 'storybook/internal/csf';
-import { getCoreAnnotations, hasCoreAnnotations } from 'storybook/internal/csf';
 import { MountMustBeDestructuredError } from 'storybook/internal/preview-errors';
 import type {
   Args,
@@ -31,6 +30,7 @@ import {
 } from '../../preview-web/render/animation-utils.ts';
 import { ReporterAPI } from '../reporter-api.ts';
 import { composeConfigs } from './composeConfigs.ts';
+import { composeProjectAnnotationsWithCore } from './composeProjectAnnotationsWithCore.ts';
 import { getCsfFactoryAnnotations } from './csf-factory-utils.ts';
 import { getValuesFromGlobalTypes } from './getValuesFromGlobalTypes.ts';
 import { normalizeComponentAnnotations } from './normalizeComponentAnnotations.ts';
@@ -56,34 +56,19 @@ export function setDefaultProjectAnnotations<TRenderer extends Renderer = Render
 const DEFAULT_STORY_TITLE = 'ComposedStory';
 const DEFAULT_STORY_NAME = 'Unnamed Story';
 
-function extractAnnotation<TRenderer extends Renderer = Renderer>(
-  annotation: NamedOrDefaultProjectAnnotations<TRenderer>
-) {
-  if (!annotation) {
-    return {};
-  }
-  // support imports such as
-  // import * as annotations from '.storybook/preview'
-  // import annotations from '.storybook/preview'
-  // in both cases: 1 - the file has a default export; 2 - named exports only
-  // also support when the file has both annotations coming from default and named exports
-  return composeConfigs([annotation]);
-}
-
 export function setProjectAnnotations<TRenderer extends Renderer = Renderer>(
   projectAnnotations:
     | NamedOrDefaultProjectAnnotations<TRenderer>
     | NamedOrDefaultProjectAnnotations<TRenderer>[]
 ): NormalizedProjectAnnotations<TRenderer> {
   const annotations = Array.isArray(projectAnnotations) ? projectAnnotations : [projectAnnotations];
-  // CSF4 previews (definePreview) already compose the core annotations into their `composed`
-  // result, which is what e.g. addon-vitest passes here via `getProjectAnnotations()`. Detect that
-  // marker and skip prepending core annotations so they are not applied twice.
-  const alreadyComposedWithCore = annotations.some((annotation) => hasCoreAnnotations(annotation));
-  globalThis.globalProjectAnnotations = composeConfigs([
-    ...(alreadyComposedWithCore ? [] : getCoreAnnotations()),
+  // Pass the raw annotation modules (which may use `default` and/or named exports, e.g. from
+  // `import * as annotations from '.storybook/preview'`) straight through: `composeConfigs` unwraps
+  // those, and `composeProjectAnnotationsWithCore` detects the CSF4 marker (set by `definePreview`,
+  // which is what e.g. addon-vitest passes here) so core annotations are never applied twice.
+  globalThis.globalProjectAnnotations = composeProjectAnnotationsWithCore<TRenderer>([
     globalThis.defaultProjectAnnotations ?? {},
-    composeConfigs(annotations.map(extractAnnotation)),
+    ...annotations,
   ]);
 
   return globalThis.globalProjectAnnotations ?? {};
diff --git a/code/core/src/shared/constants/iframe-resize.test.ts b/code/core/src/shared/constants/iframe-resize.test.ts
new file mode 100644
index 000000000000..c27c06c4ceba
--- /dev/null
+++ b/code/core/src/shared/constants/iframe-resize.test.ts
@@ -0,0 +1,57 @@
+import { describe, expect, it } from 'vitest';
+
+import { RESPONSIVE_VIEWPORT_VALUE } from '../../viewport/constants.ts';
+import { hasFixedViewportDimensions, iframeResizeDimensionsEqual } from './iframe-resize.ts';
+
+describe('hasFixedViewportDimensions', () => {
+  it('accepts named viewports with pixel dimensions', () => {
+    expect(
+      hasFixedViewportDimensions({
+        name: 'Small mobile',
+        value: 'mobile1',
+        width: 320,
+        height: 568,
+      })
+    ).toBe(true);
+  });
+
+  it('rejects the responsive viewport value', () => {
+    expect(
+      hasFixedViewportDimensions({
+        name: 'Responsive',
+        value: RESPONSIVE_VIEWPORT_VALUE,
+        width: 800,
+        height: 600,
+      })
+    ).toBe(false);
+  });
+});
+
+describe('iframeResizeDimensionsEqual', () => {
+  it('compares viewport metadata', () => {
+    expect(
+      iframeResizeDimensionsEqual(
+        {
+          width: 120,
+          height: 48,
+          viewport: { name: 'Small mobile', value: 'mobile1', width: 320, height: 568 },
+        },
+        {
+          width: 120,
+          height: 48,
+          viewport: { name: 'Small mobile', value: 'mobile1', width: 320, height: 568 },
+        }
+      )
+    ).toBe(true);
+    expect(
+      iframeResizeDimensionsEqual(
+        { width: 120, height: 48 },
+        {
+          width: 120,
+          height: 48,
+          viewport: { name: 'Small mobile', value: 'mobile1', width: 320, height: 568 },
+        }
+      )
+    ).toBe(false);
+  });
+});
diff --git a/code/core/src/shared/constants/iframe-resize.ts b/code/core/src/shared/constants/iframe-resize.ts
new file mode 100644
index 000000000000..2ab449b0f545
--- /dev/null
+++ b/code/core/src/shared/constants/iframe-resize.ts
@@ -0,0 +1,68 @@
+import { RESPONSIVE_VIEWPORT_VALUE } from '../../viewport/constants.ts';
+
+/** postMessage `context` for embed iframe content dimension updates (preview → parent). */
+export const IFRAME_RESIZE_CONTEXT = 'iframe.resize';
+
+/** Parent → preview: re-send the last embed content dimensions. */
+export const IFRAME_RESIZE_REQUEST_CONTEXT = 'iframe.resize.request';
+
+export type IframeResizeViewport = {
+  name: string;
+  value: string;
+  width?: number;
+  height?: number;
+};
+
+export type IframeResizePayload = {
+  src: string;
+  context: typeof IFRAME_RESIZE_CONTEXT;
+  width: number;
+  height: number;
+  viewport?: IframeResizeViewport;
+};
+
+export type IframeResizeDimensions = Pick<IframeResizePayload, 'width' | 'height' | 'viewport'>;
+
+export const hasFixedViewportDimensions = (
+  viewport: IframeResizeViewport | undefined
+): viewport is IframeResizeViewport & {
+  width: number;
+  height: number;
+} =>
+  !!viewport &&
+  viewport.value !== RESPONSIVE_VIEWPORT_VALUE &&
+  typeof viewport.width === 'number' &&
+  viewport.width > 0 &&
+  typeof viewport.height === 'number' &&
+  viewport.height > 0;
+
+export const iframeResizeViewportsEqual = (
+  left: IframeResizeViewport | undefined,
+  right: IframeResizeViewport | undefined
+): boolean => {
+  if (left === right) {
+    return true;
+  }
+  if (!left || !right) {
+    return !left && !right;
+  }
+  return (
+    left.name === right.name &&
+    left.value === right.value &&
+    left.width === right.width &&
+    left.height === right.height
+  );
+};
+
+export const iframeResizeDimensionsEqual = (
+  left: IframeResizeDimensions | null | undefined,
+  right: IframeResizeDimensions
+): boolean => {
+  if (!left) {
+    return false;
+  }
+  if (left.width !== right.width || left.height !== right.height) {
+    return false;
+  }
+  return iframeResizeViewportsEqual(left.viewport, right.viewport);
+};
diff --git a/code/core/src/shared/open-service/services/docgen/types.ts b/code/core/src/shared/open-service/services/docgen/types.ts
index 26159d89825d..36067272055a 100644
--- a/code/core/src/shared/open-service/services/docgen/types.ts
+++ b/code/core/src/shared/open-service/services/docgen/types.ts
@@ -1,5 +1,4 @@
 import type { StrictArgTypes } from '../../../../types/modules/csf.ts';
-import type { Options } from '../../../../types/modules/core-common.ts';
 import type { IndexEntry } from '../../../../types/modules/indexer.ts';
 
 /**
@@ -59,11 +58,11 @@ export interface DocgenSubcomponent {
 }
 
 /**
- * Middleware-style provider function registered through the `experimental_docgenProvider` preset.
+ * A docgen provider: given a component's index entry, returns a complete {@link DocgenPayload} or
+ * `undefined` when no docgen is available for the file.
  *
- * Each registrant returns a wrapper around the previous accumulated provider; it may call that
- * inner provider to merge with downstream output, and either returns a complete
- * {@link DocgenPayload} or `undefined` when no docgen is available for the given file.
+ * Providers are composed middleware-style inside the docgen worker — each wraps the previous one in
+ * the chain and may delegate to it to merge with downstream output.
  *
  * **Merge convention.** When combining your output with downstream's, use spread
  * (`{ ...downstream, ...yourOverrides }`) and `downstream?.field ?? yours` rather than rebuilding
@@ -75,16 +74,33 @@ export interface DocgenSubcomponent {
 export type DocgenProvider = (input: DocgenProviderInput) => Promise<DocgenPayload | undefined>;
 
 /**
- * Preset signature for `experimental_docgenProvider`.
+ * Middleware that wraps the next provider in the docgen chain.
  *
- * Like `PresetPropertyFn<'experimental_docgenProvider'>` but with `nextDocgen` typed as
- * non-nullable. Core's `services` preset always seeds the middleware chain with an identity
- * provider, so the optional typing inherited from `StorybookConfigRaw` is impossible-state
- * defense at the provider-author level — use this type to drop the `?.` noise. If the seed is
- * ever missing at runtime, that's a preset-wiring bug and the provider will throw on the first
- * `nextDocgen(...)` call rather than silently degrading.
+ * The worker seeds the chain with an identity provider (returns `undefined`) and folds each
+ * descriptor's middleware over it in registration order, so a later registrant wraps (and can
+ * delegate to) the earlier ones.
  */
-export type DocgenProviderPreset = (
-  nextDocgen: DocgenProvider,
-  options: Options
-) => DocgenProvider | Promise<DocgenProvider>;
+export type DocgenMiddleware = (nextDocgen: DocgenProvider) => DocgenProvider;
+
+/**
+ * Serializable descriptor a renderer or addon contributes via the `experimental_docgenProvider`
+ * preset.
+ *
+ * Docgen extraction runs off the main thread in a long-lived worker owned by core. Because a
+ * closure cannot cross a worker boundary, integrations describe their provider as data: a
+ * `moduleSpecifier` pointing at a module that satisfies {@link DocgenWorkerModule}. Core collects
+ * these descriptors (preserving preset order) and the worker imports and composes them.
+ */
+export interface DocgenProviderDescriptor {
+  /** Absolute path to a module that exports {@link DocgenWorkerModule.createDocgenProvider}. */
+  moduleSpecifier: string;
+}
+
+/**
+ * Contract a worker-target docgen module must satisfy. The worker imports the descriptor's
+ * `moduleSpecifier` and calls `createDocgenProvider()` once to build the middleware it folds into
+ * the provider chain. Integrations implement only this factory — they never touch threading.
+ */
+export interface DocgenWorkerModule {
+  createDocgenProvider: () => DocgenMiddleware | Promise<DocgenMiddleware>;
+}
diff --git a/code/core/src/shared/open-service/services/docgen/worker/docgen-worker-client.test.ts b/code/core/src/shared/open-service/services/docgen/worker/docgen-worker-client.test.ts
new file mode 100644
index 000000000000..b3ce685e9999
--- /dev/null
+++ b/code/core/src/shared/open-service/services/docgen/worker/docgen-worker-client.test.ts
@@ -0,0 +1,197 @@
+// Unit tests for the docgen worker client's dispatch / readiness / failure plumbing. A real worker is
+// replaced with an EventEmitter stand-in so the tests stay hermetic.
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import type { DocgenProviderDescriptor } from '../types.ts';
+import type { DocgenWorkerRequest, DocgenWorkerResponse } from './protocol.ts';
+
+/** Only the surface the tests touch; the runtime instance is a real Node EventEmitter subclass. */
+interface FakeWorker {
+  posted: DocgenWorkerRequest[];
+  postMessage: ReturnType<typeof vi.fn>;
+  terminate: ReturnType<typeof vi.fn>;
+  unref: ReturnType<typeof vi.fn>;
+  emit: (event: string, ...args: unknown[]) => boolean;
+}
+
+const fakeWorkers: FakeWorker[] = [];
+
+vi.mock('node:worker_threads', async () => {
+  const { EventEmitter: NodeEventEmitter } = await import('node:events');
+
+  class FakeWorkerImpl extends NodeEventEmitter {
+    posted: DocgenWorkerRequest[] = [];
+    constructor() {
+      super();
+      fakeWorkers.push(this as unknown as FakeWorker);
+    }
+    postMessage = vi.fn((msg: DocgenWorkerRequest) => {
+      this.posted.push(msg);
+    });
+    terminate = vi.fn(async () => 0);
+    unref = vi.fn();
+  }
+
+  return { Worker: FakeWorkerImpl };
+});
+
+vi.mock('node:fs', () => ({ existsSync: vi.fn(() => true) }));
+
+vi.mock('../../../../utils/module.ts', () => ({
+  // Include a drive letter so `fileURLToPath()` accepts it on Windows too (a driveless file URL
+  // throws ERR_INVALID_FILE_URL_PATH there, which would make the client resolve to undefined).
+  importMetaResolve: vi.fn(() => 'file:///C:/fake/storybook/docgen-worker.js'),
+}));
+
+vi.mock('storybook/internal/node-logger', { spy: true });
+
+const loadModule = async () => import('./docgen-worker-client.ts');
+
+const DESCRIPTORS: DocgenProviderDescriptor[] = [
+  { moduleSpecifier: '/fake/react/docgen-worker.js' },
+];
+
+/** Resolve the worker's `init` ack so awaiting `extract` calls can proceed. */
+function ackInit(worker: FakeWorker, error?: { name: string; message: string }) {
+  worker.emit(
+    'message',
+    (error ? { type: 'init', error } : { type: 'init' }) satisfies DocgenWorkerResponse
+  );
+}
+
+beforeEach(() => {
+  fakeWorkers.length = 0;
+});
+
+afterEach(() => {
+  vi.clearAllMocks();
+  fakeWorkers.length = 0;
+});
+
+describe('createDocgenWorkerClient', () => {
+  it('returns undefined when the compiled worker script is missing', async () => {
+    const fs = await import('node:fs');
+    vi.mocked(fs.existsSync).mockReturnValueOnce(false);
+
+    const { createDocgenWorkerClient } = await loadModule();
+    expect(createDocgenWorkerClient(DESCRIPTORS)).toBeUndefined();
+    expect(fakeWorkers).toHaveLength(0);
+  });
+
+  it('does not spawn a worker until the first extract', async () => {
+    const { createDocgenWorkerClient } = await loadModule();
+    const client = createDocgenWorkerClient(DESCRIPTORS);
+
+    expect(client).toBeDefined();
+    expect(fakeWorkers).toHaveLength(0);
+  });
+
+  it('spawns the worker lazily on the first extract and posts init with descriptors', async () => {
+    const { createDocgenWorkerClient } = await loadModule();
+    const client = createDocgenWorkerClient(DESCRIPTORS)!;
+
+    const promise = client.extract({ id: 'button--primary' } as any);
+    const worker = fakeWorkers[0];
+
+    expect(fakeWorkers).toHaveLength(1);
+    expect(worker.posted[0]).toEqual({ type: 'init', descriptors: DESCRIPTORS });
+    expect(worker.unref).toHaveBeenCalled();
+
+    // Drive the extract to completion so dispose isn't racing a not-yet-queued request.
+    ackInit(worker);
+    await Promise.resolve();
+    const extractMsg = worker.posted.find((m) => m.type === 'extract') as { id: number };
+    worker.emit('message', {
+      type: 'extract',
+      id: extractMsg.id,
+      payload: { id: 'button', name: 'Button', path: './button.stories.tsx', jsDocTags: {} },
+    } satisfies DocgenWorkerResponse);
+    await expect(promise).resolves.toMatchObject({ id: 'button' });
+  });
+});
+
+describe('DocgenWorkerClient.extract', () => {
+  it('waits for init, dispatches the entry, and resolves the payload', async () => {
+    const { createDocgenWorkerClient } = await loadModule();
+    const client = createDocgenWorkerClient(DESCRIPTORS)!;
+
+    const entry = { id: 'button--primary', importPath: './button.stories.tsx' } as any;
+    const promise = client.extract(entry);
+    const worker = fakeWorkers[0];
+
+    // Nothing is dispatched until init is acked.
+    expect(worker.posted.filter((m) => m.type === 'extract')).toHaveLength(0);
+    ackInit(worker);
+    await Promise.resolve();
+
+    const extractMsg = worker.posted.find((m) => m.type === 'extract');
+    expect(extractMsg).toMatchObject({ type: 'extract', entry });
+
+    worker.emit('message', {
+      type: 'extract',
+      id: (extractMsg as { id: number }).id,
+      payload: { id: 'button', name: 'Button', path: './button.stories.tsx', jsDocTags: {} },
+    } satisfies DocgenWorkerResponse);
+
+    await expect(promise).resolves.toMatchObject({ id: 'button', name: 'Button' });
+  });
+
+  it('rejects extract calls when init fails', async () => {
+    const { createDocgenWorkerClient } = await loadModule();
+    const client = createDocgenWorkerClient(DESCRIPTORS)!;
+
+    const promise = client.extract({ id: 'x' } as any);
+    const worker = fakeWorkers[0];
+    ackInit(worker, { name: 'Error', message: 'boom' });
+
+    await expect(promise).rejects.toThrow('boom');
+  });
+
+  it('rejects an extract awaiting init when the worker exits before init', async () => {
+    const { createDocgenWorkerClient } = await loadModule();
+    const client = createDocgenWorkerClient(DESCRIPTORS)!;
+
+    const promise = client.extract({ id: 'x' } as any);
+    const worker = fakeWorkers[0];
+    // Worker dies during boot, before its `init` ack — `ready` must reject so the awaiting extract
+    // fails fast instead of hanging forever.
+    worker.emit('exit', 1);
+
+    await expect(promise).rejects.toThrow(/exited unexpectedly/);
+  });
+
+  it('rejects with the error name/message from a failed extraction', async () => {
+    const { createDocgenWorkerClient } = await loadModule();
+    const client = createDocgenWorkerClient(DESCRIPTORS)!;
+
+    const promise = client.extract({ id: 'x' } as any);
+    const worker = fakeWorkers[0];
+    ackInit(worker);
+    await Promise.resolve();
+
+    const extractMsg = worker.posted.find((m) => m.type === 'extract') as { id: number };
+    worker.emit('message', {
+      type: 'extract',
+      id: extractMsg.id,
+      error: { name: 'DocgenError', message: 'extraction exploded' },
+    } satisfies DocgenWorkerResponse);
+
+    await expect(promise).rejects.toThrowError(
+      expect.objectContaining({ name: 'DocgenError', message: 'extraction exploded' })
+    );
+  });
+
+  it('rejects in-flight extractions when the worker exits unexpectedly', async () => {
+    const { createDocgenWorkerClient } = await loadModule();
+    const client = createDocgenWorkerClient(DESCRIPTORS)!;
+
+    const promise = client.extract({ id: 'x' } as any);
+    const worker = fakeWorkers[0];
+    ackInit(worker);
+    await Promise.resolve();
+
+    worker.emit('exit', 1);
+
+    await expect(promise).rejects.toThrow(/exited unexpectedly/);
+  });
+});
diff --git a/code/core/src/shared/open-service/services/docgen/worker/docgen-worker-client.ts b/code/core/src/shared/open-service/services/docgen/worker/docgen-worker-client.ts
new file mode 100644
index 000000000000..9b95e4cd9f66
--- /dev/null
+++ b/code/core/src/shared/open-service/services/docgen/worker/docgen-worker-client.ts
@@ -0,0 +1,206 @@
+/**
+ * Main-thread client for the long-lived docgen worker.
+ *
+ * Owns a single worker (docgen extraction serializes on one warm TypeScript program, so a pool
+ * would only duplicate multi-second program builds and memory). Spawned once per process when the
+ * compiled worker script is present; when it is missing — e.g. running from source without a build —
+ * {@link createDocgenWorkerClient} returns `undefined` and the caller skips docgen registration
+ * rather than silently extracting on the main thread.
+ */
+import { existsSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { Worker } from 'node:worker_threads';
+
+import { logger } from 'storybook/internal/node-logger';
+
+import type { IndexEntry } from '../../../../../types/modules/indexer.ts';
+import { importMetaResolve } from '../../../../utils/module.ts';
+import type { ErrorLike } from '../../module-graph/types.ts';
+import type { DocgenPayload, DocgenProviderDescriptor } from '../types.ts';
+import type { DocgenWorkerRequest, DocgenWorkerResponse } from './protocol.ts';
+
+/**
+ * Package-relative specifier for the compiled worker. Resolved via the package export map (not a
+ * hard-coded dist path) so strict package managers like pnpm resolve it correctly.
+ */
+const WORKER_SPECIFIER = 'storybook/internal/docgen-worker';
+
+const DEFAULT_TASK_TIMEOUT_MS = 120_000;
+
+interface Pending {
+  resolve: (payload: DocgenPayload | undefined) => void;
+  reject: (error: unknown) => void;
+  timer?: NodeJS.Timeout;
+}
+
+export interface DocgenWorkerClient {
+  /** Extracts docgen for one component entry off the main thread. */
+  extract(entry: IndexEntry): Promise<DocgenPayload | undefined>;
+}
+
+/** Rebuild an Error from a worker {@link ErrorLike} so the original name/message/stack survive. */
+function errorLikeToError(errorLike: ErrorLike): Error {
+  const error = new Error(errorLike.message);
+  if (errorLike.name) {
+    error.name = errorLike.name;
+  }
+  if (errorLike.stack) {
+    error.stack = errorLike.stack;
+  }
+  return error;
+}
+
+class DocgenWorker implements DocgenWorkerClient {
+  private readonly worker: Worker;
+  private readonly pending = new Map<number, Pending>();
+  private readonly ready: Promise<void>;
+  // Captured from the `ready` promise executor (which runs synchronously) so `fail()` can settle
+  // `ready` if the worker dies before sending `init`. No-op default keeps TS definite-assignment happy.
+  private rejectReady: (error: unknown) => void = () => undefined;
+  private nextId = 0;
+  private dead = false;
+
+  constructor(
+    scriptPath: string,
+    descriptors: DocgenProviderDescriptor[],
+    private readonly taskTimeoutMs = DEFAULT_TASK_TIMEOUT_MS
+  ) {
+    this.worker = new Worker(scriptPath);
+    // Never let an idle worker keep the process alive.
+    this.worker.unref();
+    this.worker.on('message', (msg: DocgenWorkerResponse) => this.handleMessage(msg));
+    this.worker.on('error', (error) => this.fail(error));
+    this.worker.on('exit', (code) => {
+      if (!this.dead) {
+        this.fail(new Error(`docgen worker exited unexpectedly with code ${code}`));
+      }
+    });
+
+    this.ready = new Promise<void>((resolve, reject) => {
+      this.rejectReady = reject;
+      const onMessage = (msg: DocgenWorkerResponse) => {
+        if (msg.type !== 'init') {
+          return;
+        }
+        this.worker.off('message', onMessage);
+        if (msg.error) {
+          reject(errorLikeToError(msg.error));
+        } else {
+          resolve();
+        }
+      };
+      this.worker.on('message', onMessage);
+    });
+    // Surface late init rejections instead of leaving an unhandled rejection.
+    this.ready.catch(() => undefined);
+
+    this.post({ type: 'init', descriptors });
+  }
+
+  async extract(entry: IndexEntry): Promise<DocgenPayload | undefined> {
+    if (this.dead) {
+      throw new Error('docgen worker is no longer running');
+    }
+    await this.ready;
+    return new Promise<DocgenPayload | undefined>((resolve, reject) => {
+      const id = this.nextId++;
+      const pending: Pending = { resolve, reject };
+      if (this.taskTimeoutMs > 0) {
+        pending.timer = setTimeout(() => {
+          this.pending.delete(id);
+          reject(new Error(`docgen worker extract ${id} timed out after ${this.taskTimeoutMs}ms`));
+        }, this.taskTimeoutMs);
+        pending.timer.unref?.();
+      }
+      this.pending.set(id, pending);
+      this.post({ type: 'extract', id, entry });
+    });
+  }
+
+  private post(msg: DocgenWorkerRequest): void {
+    this.worker.postMessage(msg);
+  }
+
+  private handleMessage(msg: DocgenWorkerResponse): void {
+    if (msg.type !== 'extract') {
+      return;
+    }
+    const pending = this.pending.get(msg.id);
+    if (!pending) {
+      return;
+    }
+    if (pending.timer) {
+      clearTimeout(pending.timer);
+    }
+    this.pending.delete(msg.id);
+    if (msg.error) {
+      pending.reject(errorLikeToError(msg.error));
+    } else {
+      pending.resolve(msg.payload);
+    }
+  }
+
+  /** Reject everything in flight and tear the worker down; used on fatal worker failure. */
+  private fail(error: Error): void {
+    if (this.dead) {
+      return;
+    }
+    logger.debug(`docgen worker failure: ${error.message}`);
+    this.dead = true;
+    // If the worker dies before `init`, `ready` would otherwise never settle and an in-flight
+    // `extract` awaiting it would hang. Rejecting is a no-op once `ready` has already settled.
+    this.rejectReady(error);
+    this.rejectAllPending(error);
+    this.worker.terminate().catch(() => 0);
+  }
+
+  private rejectAllPending(error: Error): void {
+    for (const [, pending] of this.pending) {
+      if (pending.timer) {
+        clearTimeout(pending.timer);
+      }
+      pending.reject(error);
+    }
+    this.pending.clear();
+  }
+}
+
+function resolveWorkerScriptPath(): string | undefined {
+  try {
+    const scriptPath = fileURLToPath(importMetaResolve(WORKER_SPECIFIER));
+    return existsSync(scriptPath) ? scriptPath : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * Creates the docgen worker client for `descriptors`. Returns `undefined` when the compiled worker
+ * script is unavailable (no fallback — the caller skips docgen registration). The worker lives for the
+ * process lifetime and is torn down with it, so there is nothing to dispose explicitly.
+ *
+ * The worker thread is spawned lazily on the first {@link DocgenWorkerClient.extract}, not here:
+ * spawning the thread and importing the provider module graph is CPU work, and extraction is gated
+ * until a story renders, so there is nothing to keep warm at dev-server boot — spawning eagerly would
+ * only contend with Vite's cold start.
+ */
+export function createDocgenWorkerClient(
+  descriptors: DocgenProviderDescriptor[]
+): DocgenWorkerClient | undefined {
+  const scriptPath = resolveWorkerScriptPath();
+  if (!scriptPath) {
+    logger.debug(
+      'docgen worker disabled: compiled worker script not found (running from source without a build?)'
+    );
+    return undefined;
+  }
+
+  let worker: DocgenWorker | undefined;
+
+  return {
+    async extract(entry) {
+      worker ??= new DocgenWorker(scriptPath, descriptors);
+      return worker.extract(entry);
+    },
+  };
+}
diff --git a/code/core/src/shared/open-service/services/docgen/worker/docgen-worker.ts b/code/core/src/shared/open-service/services/docgen/worker/docgen-worker.ts
new file mode 100644
index 000000000000..72b60776ba0b
--- /dev/null
+++ b/code/core/src/shared/open-service/services/docgen/worker/docgen-worker.ts
@@ -0,0 +1,98 @@
+/**
+ * Worker-thread entry point for docgen extraction.
+ *
+ * Spawned once by {@link ./docgen-worker-client.ts} and kept alive for the dev server's lifetime so
+ * the TypeScript program(s) each provider builds stay warm across requests. On `init` it imports
+ * every {@link DocgenProviderDescriptor}'s module and folds them into a single provider chain; on
+ * `extract` it runs that chain for one component and posts the resulting payload back. Running here
+ * keeps the synchronous, CPU-bound TypeScript work off the main event loop so it never starves the
+ * Vite dev server during first render.
+ */
+import { parentPort } from 'node:worker_threads';
+import { pathToFileURL } from 'node:url';
+
+import type { IndexEntry } from '../../../../../types/modules/indexer.ts';
+import { errorToErrorLike } from '../../module-graph/types.ts';
+import type {
+  DocgenMiddleware,
+  DocgenProvider,
+  DocgenProviderDescriptor,
+  DocgenWorkerModule,
+} from '../types.ts';
+import type { DocgenWorkerRequest, DocgenWorkerResponse } from './protocol.ts';
+
+if (!parentPort) {
+  throw new Error('docgen worker must be run as a worker thread');
+}
+
+// Capture into a const so TypeScript keeps the non-null narrowing inside the async handlers and the
+// message listener below (it won't narrow the mutable `parentPort` binding across those closures).
+const port = parentPort;
+
+/** Identity provider that seeds the chain; the bottom of the stack has no docgen to contribute. */
+const seedProvider: DocgenProvider = async () => undefined;
+
+/** Resolved once per worker on `init`; every `extract` awaits it. */
+let providerPromise: Promise<DocgenProvider> | undefined;
+
+async function composeProvider(descriptors: DocgenProviderDescriptor[]): Promise<DocgenProvider> {
+  let provider = seedProvider;
+  for (const descriptor of descriptors) {
+    const moduleUrl = pathToFileURL(descriptor.moduleSpecifier).href;
+    const mod = (await import(moduleUrl)) as Partial<DocgenWorkerModule>;
+    if (typeof mod.createDocgenProvider !== 'function') {
+      throw new Error(
+        `docgen worker module "${descriptor.moduleSpecifier}" does not export createDocgenProvider`
+      );
+    }
+    const middleware: DocgenMiddleware = await mod.createDocgenProvider();
+    provider = middleware(provider);
+  }
+  return provider;
+}
+
+async function handleInit(descriptors: DocgenProviderDescriptor[]): Promise<void> {
+  try {
+    providerPromise = composeProvider(descriptors);
+    await providerPromise;
+    port.postMessage({ type: 'init' } satisfies DocgenWorkerResponse);
+  } catch (error) {
+    providerPromise = undefined;
+    port.postMessage({
+      type: 'init',
+      error: errorToErrorLike(error),
+    } satisfies DocgenWorkerResponse);
+  }
+}
+
+async function handleExtract(id: number, entry: IndexEntry): Promise<void> {
+  try {
+    if (!providerPromise) {
+      throw new Error('docgen worker received an extract request before init');
+    }
+    const provider = await providerPromise;
+    const payload = await provider({ entry });
+    port.postMessage({ type: 'extract', id, payload } satisfies DocgenWorkerResponse);
+  } catch (error) {
+    port.postMessage({
+      type: 'extract',
+      id,
+      error: errorToErrorLike(error),
+    } satisfies DocgenWorkerResponse);
+  }
+}
+
+port.on('message', (msg: DocgenWorkerRequest) => {
+  switch (msg.type) {
+    case 'init':
+      void handleInit(msg.descriptors);
+      return;
+    case 'extract':
+      void handleExtract(msg.id, msg.entry);
+      return;
+    default: {
+      const _exhaustive: never = msg;
+      throw new Error(`docgen worker received unknown message: ${JSON.stringify(_exhaustive)}`);
+    }
+  }
+});
diff --git a/code/core/src/shared/open-service/services/docgen/worker/protocol.ts b/code/core/src/shared/open-service/services/docgen/worker/protocol.ts
new file mode 100644
index 000000000000..91d7a077c56f
--- /dev/null
+++ b/code/core/src/shared/open-service/services/docgen/worker/protocol.ts
@@ -0,0 +1,60 @@
+/**
+ * Message protocol between the docgen worker client (main thread) and the worker
+ * ({@link ./docgen-worker.ts}). All payloads are structured-clone-safe so they can cross the
+ * `postMessage` boundary.
+ *
+ * Responses are success/failure unions discriminated by the presence of an {@link ErrorLike}
+ * `error` (mirroring `ModuleGraphStatus`), rather than an `ok` flag with nullable fields — a
+ * response either carries its result or an error, never an ambiguous mix.
+ */
+import type { IndexEntry } from '../../../../../types/modules/indexer.ts';
+import type { ErrorLike } from '../../module-graph/types.ts';
+import type { DocgenPayload, DocgenProviderDescriptor } from '../types.ts';
+
+/** Sent once, right after spawn, to compose the provider chain inside the worker. */
+export interface DocgenWorkerInitRequest {
+  type: 'init';
+  descriptors: DocgenProviderDescriptor[];
+}
+
+/** Sent per component to extract its docgen payload. `id` correlates the response. */
+export interface DocgenWorkerExtractRequest {
+  type: 'extract';
+  id: number;
+  entry: IndexEntry;
+}
+
+export type DocgenWorkerRequest = DocgenWorkerInitRequest | DocgenWorkerExtractRequest;
+
+/** Chain composition succeeded; the worker is ready for extract requests. */
+export interface DocgenWorkerInitSuccess {
+  type: 'init';
+  error?: undefined;
+}
+
+/** Chain composition failed; the worker is unusable. */
+export interface DocgenWorkerInitFailure {
+  type: 'init';
+  error: ErrorLike;
+}
+
+export type DocgenWorkerInitResponse = DocgenWorkerInitSuccess | DocgenWorkerInitFailure;
+
+/** Extraction succeeded; `payload` is the result (absent when no provider produced docgen). */
+export interface DocgenWorkerExtractSuccess {
+  type: 'extract';
+  id: number;
+  payload?: DocgenPayload;
+  error?: undefined;
+}
+
+/** Extraction threw; `error` describes the failure. */
+export interface DocgenWorkerExtractFailure {
+  type: 'extract';
+  id: number;
+  error: ErrorLike;
+}
+
+export type DocgenWorkerExtractResponse = DocgenWorkerExtractSuccess | DocgenWorkerExtractFailure;
+
+export type DocgenWorkerResponse = DocgenWorkerInitResponse | DocgenWorkerExtractResponse;
diff --git a/code/core/src/shared/review/index.ts b/code/core/src/shared/review/index.ts
index 85b3bd03f8ec..5f27ebf90fc4 100644
--- a/code/core/src/shared/review/index.ts
+++ b/code/core/src/shared/review/index.ts
@@ -1,2 +1,7 @@
 export { REVIEW_EVENTS, REVIEW_NAMESPACE } from './events.ts';
 export type { ReviewCollection, ReviewState } from './review-state.ts';
+export {
+  REVIEW_COLLECTION_QUERY_PARAM,
+  isReviewManagerRoute,
+  isReviewSummaryPath,
+} from './routes.ts';
diff --git a/code/core/src/shared/review/routes.test.ts b/code/core/src/shared/review/routes.test.ts
new file mode 100644
index 000000000000..0e7687182319
--- /dev/null
+++ b/code/core/src/shared/review/routes.test.ts
@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest';
+
+import { isReviewManagerRoute, isReviewSummaryPath } from './routes.ts';
+
+describe('isReviewSummaryPath', () => {
+  it('matches the review summary routes', () => {
+    expect(isReviewSummaryPath('/review/')).toBe(true);
+    expect(isReviewSummaryPath('/review')).toBe(true);
+    expect(isReviewSummaryPath('/story/foo--bar')).toBe(false);
+  });
+});
+
+describe('isReviewManagerRoute', () => {
+  it('matches the summary and curated review story routes', () => {
+    expect(isReviewManagerRoute('/review/')).toBe(true);
+    expect(isReviewManagerRoute('/story/foo--bar', { collection: '0' })).toBe(true);
+  });
+
+  it('does not match normal canvas routes', () => {
+    expect(isReviewManagerRoute(undefined)).toBe(false);
+    expect(isReviewManagerRoute('/story/foo--bar')).toBe(false);
+    expect(isReviewManagerRoute('/docs/foo--bar')).toBe(false);
+    expect(isReviewManagerRoute('/settings/about')).toBe(false);
+  });
+});
diff --git a/code/core/src/shared/review/routes.ts b/code/core/src/shared/review/routes.ts
new file mode 100644
index 000000000000..f8d6c129776c
--- /dev/null
+++ b/code/core/src/shared/review/routes.ts
@@ -0,0 +1,15 @@
+export const REVIEW_COLLECTION_QUERY_PARAM = 'collection';
+
+export const isReviewSummaryPath = (path: string): boolean =>
+  path === '/review/' || path === '/review';
+
+/** True when the manager URL targets the review summary or a curated review story. */
+export const isReviewManagerRoute = (
+  path: string | undefined,
+  customQueryParams?: Readonly<Record<string, string | undefined>> | null
+): boolean =>
+  !!path &&
+  (isReviewSummaryPath(path) ||
+    path.startsWith('/review/') ||
+    (path.startsWith('/story/') &&
+      customQueryParams?.[REVIEW_COLLECTION_QUERY_PARAM] !== undefined));
diff --git a/code/core/src/theming/global.ts b/code/core/src/theming/global.ts
index ec8c59dbfb7d..ef7a9f28a3cd 100644
--- a/code/core/src/theming/global.ts
+++ b/code/core/src/theming/global.ts
@@ -22,6 +22,19 @@ export const srOnlyStyles = {
   border: 0,
 };
 
+export const srOnlyUnsetStyles = {
+  position: 'unset' as const,
+  width: 'unset' as const,
+  height: 'unset' as const,
+  padding: 'unset' as const,
+  margin: 'unset' as const,
+  overflow: 'unset' as const,
+  whiteSpace: 'unset' as const,
+  clip: 'unset' as const,
+  clipPath: 'unset' as const,
+  border: 'unset' as const,
+};
+
 export const createReset = memoize(1)(
   ({ typography }: { typography: Typography }): Return => ({
     body: {
diff --git a/code/core/src/theming/index.ts b/code/core/src/theming/index.ts
index de1da32b8f1a..8d58b0afa20f 100644
--- a/code/core/src/theming/index.ts
+++ b/code/core/src/theming/index.ts
@@ -33,7 +33,7 @@ export * from './types.ts';
 export { default as createCache } from '@emotion/cache';
 export { default as isPropValid } from '@emotion/is-prop-valid';
 
-export { createGlobal, createReset, srOnlyStyles } from './global.ts';
+export { createGlobal, createReset, srOnlyStyles, srOnlyUnsetStyles } from './global.ts';
 export * from './create.ts';
 export * from './convert.ts';
 export * from './ensure.ts';
diff --git a/code/core/src/types/modules/core-common.ts b/code/core/src/types/modules/core-common.ts
index 6c933261b3ce..6b1f7b5a2193 100644
--- a/code/core/src/types/modules/core-common.ts
+++ b/code/core/src/types/modules/core-common.ts
@@ -10,7 +10,7 @@ import type { Server as NetServer } from 'net';
 import type { Options as TelejsonOptions } from 'telejson';
 import type { PackageJson as PackageJsonFromTypeFest } from 'type-fest';
 
-import type { DocgenProvider } from '../../shared/open-service/services/docgen/types.ts';
+import type { DocgenProviderDescriptor } from '../../shared/open-service/services/docgen/types.ts';
 import type { StoryDocsProvider } from '../../shared/open-service/services/story-docs/types.ts';
 import type { SupportedBuilder } from './builders.ts';
 import type { SupportedFramework } from './frameworks.ts';
@@ -20,11 +20,13 @@ import type { SupportedRenderer } from './renderers.ts';
 export type {
   DocgenError,
   DocgenJsDocTags,
+  DocgenMiddleware,
   DocgenPayload,
   DocgenProvider,
+  DocgenProviderDescriptor,
   DocgenProviderInput,
-  DocgenProviderPreset,
   DocgenSubcomponent,
+  DocgenWorkerModule,
 } from '../../shared/open-service/services/docgen/types.ts';
 export type {
   StoryDoc,
@@ -137,9 +139,9 @@ export interface Presets {
   apply(extension: 'services', config?: StorybookConfigRaw['services'], args?: any): Promise<void>;
   apply(
     extension: 'experimental_docgenProvider',
-    config: DocgenProvider,
+    config: DocgenProviderDescriptor[],
     args?: any
-  ): Promise<DocgenProvider>;
+  ): Promise<DocgenProviderDescriptor[]>;
   apply(
     extension: 'experimental_storyDocsProvider',
     config: StoryDocsProvider,
@@ -469,7 +471,7 @@ export interface StorybookConfigRaw {
   core?: CoreConfig;
   experimental_manifests?: Manifests;
   experimental_enrichCsf?: CsfEnricher;
-  experimental_docgenProvider?: DocgenProvider;
+  experimental_docgenProvider?: DocgenProviderDescriptor[];
   experimental_storyDocsProvider?: StoryDocsProvider;
   staticDirs?: (DirectoryMapping | string)[];
   logLevel?: string;
@@ -537,6 +539,13 @@ export interface StorybookConfigRaw {
      */
     sidebarOnboardingChecklist?: boolean;
 
+    /**
+     * Enable the onboarding guide page in the menu
+     *
+     * @default true
+     */
+    menuOnboardingChecklist?: boolean;
+
     /**
      * @temporary This feature flag is a migration assistant, and is scheduled to be removed.
      *
@@ -796,9 +805,9 @@ export interface StorybookConfig {
   services?: PresetValue<StorybookConfigRaw['services']>;
 
   /**
-   * Middleware-style provider for the experimental docgen service. Each registrant receives the
-   * previously accumulated provider as its config argument and returns a wrapping provider that
-   * may delegate to it via the input forwarding pattern.
+   * Provider descriptors for the experimental docgen service. Each registrant appends a
+   * structured-clone-safe {@link DocgenProviderDescriptor} (a module specifier) to the accumulated
+   * array; core's docgen worker imports and composes them middleware-style off the main thread.
    */
   experimental_docgenProvider?: PresetValue<StorybookConfigRaw['experimental_docgenProvider']>;
 
diff --git a/code/core/src/types/modules/csf.ts b/code/core/src/types/modules/csf.ts
index 99790a7e721d..1237ca9bf95b 100644
--- a/code/core/src/types/modules/csf.ts
+++ b/code/core/src/types/modules/csf.ts
@@ -12,6 +12,7 @@ export type {
   ArgTypes,
   ArgTypesEnhancer,
   BaseAnnotations,
+  ProjectAnnotations as BaseProjectAnnotations,
   BeforeAll,
   BeforeEach,
   Canvas,
@@ -32,10 +33,8 @@ export type {
   LoaderFunction,
   Parameters,
   PartialStoryFn,
-  TestFunction,
   PlayFunction,
   PlayFunctionContext,
-  ProjectAnnotations as BaseProjectAnnotations,
   Renderer,
   SBArrayType,
   SBEnumType,
@@ -64,6 +63,7 @@ export type {
   StrictArgTypes,
   StrictInputType,
   Tag,
+  TestFunction,
 } from 'storybook/internal/csf';
 
 type OrString<T extends string> = T | (string & {});
@@ -80,6 +80,13 @@ export interface StorybookParameters {
    * If you pass `none`, no styles are applied.
    */
   layout?: Layout;
+  /**
+   * The BCP-47 language tag applied to the rendered story.
+   *
+   * In story view, this sets lang` on the story root element; in docs view it sets `lang` on the
+   * embedded story canvas. When unset, no `lang` attribute is applied. Inherited project → meta → story.
+   */
+  htmlLang?: string;
 }
 
 export interface StorybookTypes {
diff --git a/code/core/src/viewport/constants.ts b/code/core/src/viewport/constants.ts
index 9281ac189af4..31408880598a 100644
--- a/code/core/src/viewport/constants.ts
+++ b/code/core/src/viewport/constants.ts
@@ -2,3 +2,6 @@ export const ADDON_ID = 'storybook/viewport';
 export const PARAM_KEY = 'viewport';
 export const PANEL_ID = `${ADDON_ID}/panel`;
 export const TOOL_ID = `${ADDON_ID}/tool`;
+
+/** Global value for the default responsive viewport (fills the preview area). */
+export const RESPONSIVE_VIEWPORT_VALUE = '100pct-100pct';
diff --git a/code/core/src/viewport/resolveViewport.test.ts b/code/core/src/viewport/resolveViewport.test.ts
new file mode 100644
index 000000000000..24b0a32b85bd
--- /dev/null
+++ b/code/core/src/viewport/resolveViewport.test.ts
@@ -0,0 +1,73 @@
+import { describe, expect, it } from 'vitest';
+
+import { MINIMAL_VIEWPORTS } from './defaults.ts';
+import {
+  resolveViewport,
+  toResolvedViewportDimensions,
+  toViewportPixels,
+} from './resolveViewport.ts';
+
+describe('resolveViewport', () => {
+  it('resolves a named viewport from story globals', () => {
+    expect(
+      resolveViewport({
+        globals: { viewport: { value: 'mobile1' } },
+        storyGlobals: { viewport: { value: 'mobile1' } },
+        userGlobals: {},
+        options: MINIMAL_VIEWPORTS,
+        viewMode: 'story',
+      })
+    ).toMatchObject({
+      name: 'Small mobile',
+      value: 'mobile1',
+      width: '320px',
+      height: '568px',
+    });
+  });
+
+  it('returns responsive defaults when no viewport is set', () => {
+    expect(
+      resolveViewport({
+        globals: {},
+        storyGlobals: {},
+        userGlobals: {},
+        options: MINIMAL_VIEWPORTS,
+        viewMode: 'story',
+      })
+    ).toMatchObject({
+      name: 'Responsive',
+      isDefault: true,
+      width: '100%',
+      height: '100%',
+    });
+  });
+});
+
+describe('toViewportPixels', () => {
+  it('parses pixel values', () => {
+    expect(toViewportPixels('320px', 800)).toBe(320);
+  });
+
+  it('resolves percentage values against a reference', () => {
+    expect(toViewportPixels('50%', 800)).toBe(400);
+  });
+});
+
+describe('toResolvedViewportDimensions', () => {
+  it('includes numeric dimensions when parseable', () => {
+    const viewport = resolveViewport({
+      globals: { viewport: { value: 'desktop' } },
+      storyGlobals: { viewport: { value: 'desktop' } },
+      userGlobals: {},
+      options: MINIMAL_VIEWPORTS,
+      viewMode: 'story',
+    });
+
+    expect(toResolvedViewportDimensions(viewport, { width: 800, height: 600 })).toEqual({
+      name: 'Desktop',
+      value: 'desktop',
+      width: 1280,
+      height: 1024,
+    });
+  });
+});
diff --git a/code/core/src/viewport/resolveViewport.ts b/code/core/src/viewport/resolveViewport.ts
new file mode 100644
index 000000000000..768af538dcad
--- /dev/null
+++ b/code/core/src/viewport/resolveViewport.ts
@@ -0,0 +1,165 @@
+import type { Globals } from 'storybook/internal/csf';
+
+import { PARAM_KEY, RESPONSIVE_VIEWPORT_VALUE } from './constants.ts';
+import type { GlobalState, GlobalStateUpdate, ViewportMap, ViewportType } from './types.ts';
+
+export const VIEWPORT_MIN_WIDTH = 40;
+export const VIEWPORT_MIN_HEIGHT = 40;
+
+// Custom viewport format, e.g. '100pct-200px' (width-height)
+const URL_VALUE_PATTERN = /^([0-9]{1,4})([a-z]{0,4})-([0-9]{1,4})([a-z]{0,4})$/;
+
+export type ResolvedViewport = {
+  name: string;
+  type: ViewportType;
+  width: string;
+  height: string;
+  value: string;
+  option: string | undefined;
+  isCustom: boolean;
+  isDefault: boolean;
+  isLocked: boolean;
+  isRotated: boolean;
+};
+
+const normalizeGlobal = (
+  value: string | GlobalState | GlobalStateUpdate,
+  defaultIsRotated?: boolean
+): GlobalState =>
+  typeof value === 'string'
+    ? { value, isRotated: defaultIsRotated }
+    : { value: value?.value, isRotated: value?.isRotated ?? defaultIsRotated };
+
+export type ResolveViewportInput = {
+  globals: Globals;
+  storyGlobals: Globals;
+  userGlobals: Globals;
+  options: ViewportMap;
+  lastSelectedOption?: string;
+  disable?: boolean;
+  viewMode?: string;
+};
+
+export const resolveViewport = ({
+  globals,
+  storyGlobals,
+  userGlobals,
+  options,
+  lastSelectedOption,
+  disable = false,
+  viewMode,
+}: ResolveViewportInput): ResolvedViewport => {
+  if (viewMode !== 'story') {
+    return {
+      name: 'Responsive',
+      type: 'desktop',
+      width: '100%',
+      height: '100%',
+      value: RESPONSIVE_VIEWPORT_VALUE,
+      option: undefined,
+      isCustom: false,
+      isDefault: true,
+      isLocked: true,
+      isRotated: false,
+    };
+  }
+
+  const global = normalizeGlobal(globals?.[PARAM_KEY]);
+  const userGlobal = normalizeGlobal(userGlobals?.[PARAM_KEY]);
+  const storyGlobal = normalizeGlobal(storyGlobals?.[PARAM_KEY]);
+  const storyHasViewport = PARAM_KEY in storyGlobals;
+
+  // Story-level viewport globals override user globals for the current story.
+  const primaryGlobal = storyHasViewport ? storyGlobal : userGlobal;
+  const secondaryGlobal = storyHasViewport ? userGlobal : storyGlobal;
+  const value = primaryGlobal?.value ?? secondaryGlobal?.value ?? global?.value;
+  const isRotated =
+    primaryGlobal?.isRotated ?? secondaryGlobal?.isRotated ?? global?.isRotated ?? false;
+
+  const keys = Object.keys(options);
+  const isLocked = disable || PARAM_KEY in storyGlobals || !keys.length;
+  const [match, vx, ux, vy, uy] = value?.match(URL_VALUE_PATTERN) || [];
+
+  if (match) {
+    const x = ux && ux !== 'px' ? vx : Math.max(Number(vx), VIEWPORT_MIN_WIDTH);
+    const y = uy && uy !== 'px' ? vy : Math.max(Number(vy), VIEWPORT_MIN_HEIGHT);
+
+    const width = `${x}${ux === 'pct' ? '%' : ux || 'px'}`;
+    const height = `${y}${uy === 'pct' ? '%' : uy || 'px'}`;
+
+    const selection = lastSelectedOption ? options[lastSelectedOption] : undefined;
+    return {
+      name: selection?.name ?? 'Custom',
+      type: selection?.type ?? 'other',
+      width: isRotated ? height : width,
+      height: isRotated ? width : height,
+      value: match,
+      option: undefined,
+      isCustom: true,
+      isDefault: false,
+      isLocked,
+      isRotated,
+    };
+  }
+
+  if (value && keys.length) {
+    const { name, styles, type = 'other' } = options[value] ?? options[keys[0]];
+    return {
+      name,
+      type,
+      width: isRotated ? styles.height : styles.width,
+      height: isRotated ? styles.width : styles.height,
+      value,
+      option: value,
+      isCustom: false,
+      isDefault: false,
+      isLocked,
+      isRotated,
+    };
+  }
+
+  return {
+    name: 'Responsive',
+    type: 'desktop',
+    width: '100%',
+    height: '100%',
+    value: RESPONSIVE_VIEWPORT_VALUE,
+    option: undefined,
+    isCustom: false,
+    isDefault: true,
+    isLocked,
+    isRotated: false,
+  };
+};
+
+/** Resolve a viewport CSS dimension to pixels when the unit allows it. */
+export const toViewportPixels = (dimension: string, reference: number): number | undefined => {
+  const pxMatch = dimension.match(/^(\d+(?:\.\d+)?)px$/);
+  if (pxMatch) {
+    return Math.round(Number(pxMatch[1]));
+  }
+
+  const percentMatch = dimension.match(/^(\d+(?:\.\d+)?)%$/);
+  if (percentMatch) {
+    return Math.round((reference * Number(percentMatch[1])) / 100);
+  }
+
+  return undefined;
+};
+
+export type ResolvedViewportDimensions = {
+  name: string;
+  value: string;
+  width?: number;
+  height?: number;
+};
+
+export const toResolvedViewportDimensions = (
+  viewport: ResolvedViewport,
+  reference: { width: number; height: number }
+): ResolvedViewportDimensions => ({
+  name: viewport.name,
+  value: viewport.value,
+  width: toViewportPixels(viewport.width, reference.width),
+  height: toViewportPixels(viewport.height, reference.height),
+});
diff --git a/code/core/src/viewport/useViewport.ts b/code/core/src/viewport/useViewport.ts
index 90f27792780a..4f622211a5ae 100644
--- a/code/core/src/viewport/useViewport.ts
+++ b/code/core/src/viewport/useViewport.ts
@@ -1,25 +1,15 @@
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 
 import { deprecate } from 'storybook/internal/client-logger';
-import type { Globals } from 'storybook/internal/csf';
 
 import { useGlobals, useParameter, useStorybookApi } from 'storybook/manager-api';
 
 import { ADDON_ID, PARAM_KEY } from './constants.ts';
 import { MINIMAL_VIEWPORTS } from './defaults.ts';
-import type {
-  GlobalState,
-  GlobalStateUpdate,
-  ViewportMap,
-  ViewportParameters,
-  ViewportType,
-} from './types.ts';
+import { VIEWPORT_MIN_HEIGHT, VIEWPORT_MIN_WIDTH, resolveViewport } from './resolveViewport.ts';
+import type { GlobalState, GlobalStateUpdate, ViewportMap, ViewportParameters } from './types.ts';
 
-// Custom viewport format, e.g. '100pct-200px' (width-height)
-const URL_VALUE_PATTERN = /^([0-9]{1,4})([a-z]{0,4})-([0-9]{1,4})([a-z]{0,4})$/;
-
-export const VIEWPORT_MIN_WIDTH = 40;
-export const VIEWPORT_MIN_HEIGHT = 40;
+export { VIEWPORT_MIN_HEIGHT, VIEWPORT_MIN_WIDTH };
 
 const cycle = (
   viewports: ViewportMap,
@@ -44,111 +34,6 @@ const normalizeGlobal = (
     ? { value, isRotated: defaultIsRotated }
     : { value: value?.value, isRotated: value?.isRotated ?? defaultIsRotated };
 
-const parseGlobals = (
-  globals: Globals,
-  storyGlobals: Globals,
-  userGlobals: Globals,
-  options: ViewportMap,
-  lastSelectedOption: string | undefined,
-  disable: boolean,
-  viewMode: string | undefined
-): {
-  name: string;
-  type: ViewportType;
-  width: string;
-  height: string;
-  value: string;
-  option: string | undefined;
-  isCustom: boolean;
-  isDefault: boolean;
-  isLocked: boolean;
-  isRotated: boolean;
-} => {
-  if (viewMode !== 'story') {
-    return {
-      name: 'Responsive',
-      type: 'desktop',
-      width: '100%',
-      height: '100%',
-      value: '100pct-100pct',
-      option: undefined,
-      isCustom: false,
-      isDefault: true,
-      isLocked: true,
-      isRotated: false,
-    };
-  }
-
-  const global = normalizeGlobal(globals?.[PARAM_KEY]);
-  const userGlobal = normalizeGlobal(userGlobals?.[PARAM_KEY]);
-  const storyGlobal = normalizeGlobal(storyGlobals?.[PARAM_KEY]);
-  const storyHasViewport = PARAM_KEY in storyGlobals;
-
-  // Story-level viewport globals override user globals for the current story.
-  const primaryGlobal = storyHasViewport ? storyGlobal : userGlobal;
-  const secondaryGlobal = storyHasViewport ? userGlobal : storyGlobal;
-  const value = primaryGlobal?.value ?? secondaryGlobal?.value ?? global?.value;
-  const isRotated =
-    primaryGlobal?.isRotated ?? secondaryGlobal?.isRotated ?? global?.isRotated ?? false;
-
-  const keys = Object.keys(options);
-  const isLocked = disable || PARAM_KEY in storyGlobals || !keys.length;
-  const [match, vx, ux, vy, uy] = value?.match(URL_VALUE_PATTERN) || [];
-
-  if (match) {
-    // Clamp pixel values to at least MIN_WIDTH / MIN_HEIGHT
-    const x = ux && ux !== 'px' ? vx : Math.max(Number(vx), VIEWPORT_MIN_WIDTH);
-    const y = uy && uy !== 'px' ? vy : Math.max(Number(vy), VIEWPORT_MIN_HEIGHT);
-
-    // Ensure we have a valid CSS value, including unit
-    const width = `${x}${ux === 'pct' ? '%' : ux || 'px'}`;
-    const height = `${y}${uy === 'pct' ? '%' : uy || 'px'}`;
-
-    const selection = lastSelectedOption ? options[lastSelectedOption] : undefined;
-    return {
-      name: selection?.name ?? 'Custom',
-      type: selection?.type ?? 'other',
-      width: isRotated ? height : width,
-      height: isRotated ? width : height,
-      value: match,
-      option: undefined,
-      isCustom: true,
-      isDefault: false,
-      isLocked,
-      isRotated,
-    };
-  }
-
-  if (value && keys.length) {
-    const { name, styles, type = 'other' } = options[value] ?? options[keys[0]];
-    return {
-      name,
-      type,
-      width: isRotated ? styles.height : styles.width,
-      height: isRotated ? styles.width : styles.height,
-      value,
-      option: value,
-      isCustom: false,
-      isDefault: false,
-      isLocked,
-      isRotated,
-    };
-  }
-
-  return {
-    name: 'Responsive',
-    type: 'desktop',
-    width: '100%',
-    height: '100%',
-    value: '100pct-100pct',
-    option: undefined,
-    isCustom: false,
-    isDefault: true,
-    isLocked,
-    isRotated: false,
-  };
-};
-
 export const useViewport = () => {
   const api = useStorybookApi();
   const { viewMode } = api.getUrlState();
@@ -171,15 +56,15 @@ export const useViewport = () => {
 
   const { options = MINIMAL_VIEWPORTS, disable = false } = parameter || {};
   const { name, type, width, height, value, option, isCustom, isDefault, isLocked, isRotated } =
-    parseGlobals(
+    resolveViewport({
       globals,
       storyGlobals,
       userGlobals,
       options,
-      lastSelectedOption.current,
+      lastSelectedOption: lastSelectedOption.current,
       disable,
-      viewMode
-    );
+      viewMode,
+    });
 
   const update = useCallback(
     (input: GlobalStateUpdate) => updateGlobals({ [PARAM_KEY]: normalizeGlobal(input, false) }),
diff --git a/code/e2e-sandbox/framework-nextjs.spec.ts b/code/e2e-sandbox/framework-nextjs.spec.ts
index 561a82613e41..11bfe5454285 100644
--- a/code/e2e-sandbox/framework-nextjs.spec.ts
+++ b/code/e2e-sandbox/framework-nextjs.spec.ts
@@ -78,6 +78,28 @@ test.describe('Next.js', () => {
     testRoutingBehaviour('Replace', 'replace');
   });
 
+  test.describe('next/link', () => {
+    let root: Locator;
+    let sbPage: SbPage;
+
+    test.beforeEach(async ({ page }) => {
+      sbPage = new SbPage(page, expect);
+
+      await sbPage.navigateToStory('stories/frameworks/nextjs/Link', 'triggers-link-action');
+      root = sbPage.previewRoot();
+    });
+
+    test('should log a link action when clicked', async ({ page }) => {
+      await root.locator('a', { hasText: 'Trigger link action' }).click();
+
+      await sbPage.viewAddonPanel('Actions');
+      const logItem = page.locator('#storybook-panel-root [role="tabpanel"]', {
+        hasText: 'next/link::Link',
+      });
+      await expect(logItem).toBeVisible();
+    });
+  });
+
   test.describe('next/router', () => {
     let root: Locator;
     let sbPage: SbPage;
diff --git a/code/e2e-sandbox/framework-vue3.spec.ts b/code/e2e-sandbox/framework-vue3.spec.ts
index abc38c7a632d..91051bc5be85 100644
--- a/code/e2e-sandbox/framework-vue3.spec.ts
+++ b/code/e2e-sandbox/framework-vue3.spec.ts
@@ -46,4 +46,42 @@ test.describe('Vue 3', () => {
     await sbPage.selectToolbar('[aria-label^="Internationalization locale"]', 'text=/Español/');
     await expect(sbPage.previewRoot()).toContainText('Hola');
   });
+
+  // TODO: Re-enable this test once vue-component-meta is the default docgen and supports Vue 3.5 syntax.
+  test.skip('docs preserve unicode prop defaults from vue-component-meta', async ({ page }) => {
+    const sbPage = new SbPage(page, expect);
+    const docsPages = [
+      {
+        title: 'stories/renderers/vue3_vue3-vite-default-ts/component-meta/unicode-with-defaults',
+        expectedDefaults: [
+          ['Greeting', 'こんにちは'],
+          ['size', '大きい'],
+          ['icon', '🚀'],
+        ],
+      },
+      {
+        title: 'stories/renderers/vue3_vue3-vite-default-ts/component-meta/unicode-define-props',
+        expectedDefaults: [
+          ['Greeting', '你好'],
+          ['size', '大きい'],
+          ['icon', '✨'],
+        ],
+      },
+    ];
+
+    for (const { title, expectedDefaults } of docsPages) {
+      await sbPage.deepLinkToStory(storybookUrl, title, 'docs');
+
+      const argsTable = sbPage.previewRoot().locator('.docblock-argstable');
+      await expect(argsTable).toBeVisible();
+
+      for (const [propName, defaultValue] of expectedDefaults) {
+        await expect(argsTable.getByRole('row', { name: new RegExp(propName) })).toContainText(
+          defaultValue
+        );
+      }
+
+      await expect(argsTable).not.toContainText('\\u');
+    }
+  });
 });
diff --git a/code/frameworks/nextjs-vite/src/export-mocks/link/index.test.tsx b/code/frameworks/nextjs-vite/src/export-mocks/link/index.test.tsx
index a2bf2e09e003..730cc3f6666d 100644
--- a/code/frameworks/nextjs-vite/src/export-mocks/link/index.test.tsx
+++ b/code/frameworks/nextjs-vite/src/export-mocks/link/index.test.tsx
@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
@@ -10,6 +10,21 @@ const renderHref = (props: Record<string, unknown>) => {
   return /href="([^"]*)"/.exec(html)?.[1];
 };
 
+const makeClickEvent = () => {
+  const e = {
+    defaultPrevented: false,
+    preventDefault() {
+      e.defaultPrevented = true;
+    },
+  };
+  return e as unknown as React.MouseEvent<HTMLAnchorElement>;
+};
+
+const getAnchorOnClick = (props: Record<string, unknown>) =>
+  (MockLink as any).render(props, null).props.onClick as (
+    e: React.MouseEvent<HTMLAnchorElement>
+  ) => void;
+
 describe('next/link mock', () => {
   it('renders the resolved `as` URL instead of the `href` template when `as` is provided', () => {
     expect(renderHref({ href: '/users/[id]', as: '/users/123' })).toBe('/users/123');
@@ -27,4 +42,30 @@ describe('next/link mock', () => {
       '/about?ref=nav'
     );
   });
+
+  it('calls onClick before preventing default', () => {
+    let defaultPreventedWhenHandlerRan: boolean | undefined;
+    const onClick = vi.fn((e: React.MouseEvent<HTMLAnchorElement>) => {
+      defaultPreventedWhenHandlerRan = e.defaultPrevented;
+    });
+
+    getAnchorOnClick({ href: '/about', onClick })(makeClickEvent());
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(defaultPreventedWhenHandlerRan).toBe(false);
+  });
+
+  it('still runs a handler that bails when the event was already default-prevented', () => {
+    const userOnClick = vi.fn();
+    const mergedOnClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+      if (e.defaultPrevented) {
+        return;
+      }
+      userOnClick();
+    };
+
+    getAnchorOnClick({ href: '/about', onClick: mergedOnClick })(makeClickEvent());
+
+    expect(userOnClick).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/code/frameworks/nextjs-vite/src/export-mocks/link/index.tsx b/code/frameworks/nextjs-vite/src/export-mocks/link/index.tsx
index 6825cfb37ff5..b47be429e7e7 100644
--- a/code/frameworks/nextjs-vite/src/export-mocks/link/index.tsx
+++ b/code/frameworks/nextjs-vite/src/export-mocks/link/index.tsx
@@ -27,22 +27,28 @@ const MockLink = React.forwardRef<HTMLAnchorElement, any>(function MockLink(
       ? `${resolvedHref.pathname || ''}${resolvedHref.query ? '?' + new URLSearchParams(resolvedHref.query).toString() : ''}${resolvedHref.hash || ''}`
       : resolvedHref;
 
-  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+  const navigate = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    if (e.defaultPrevented) {
+      return;
+    }
     e.preventDefault();
-    onClick?.(e);
     linkAction(hrefString, { replace, scroll, shallow, prefetch, locale });
   };
 
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    onClick?.(e);
+    navigate(e);
+  };
+
   if (legacyBehavior) {
     const child = React.Children.only(children) as React.ReactElement<any>;
     const childProps: Record<string, any> = {
       ref,
       onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {
-        e.preventDefault();
         if (child.props && typeof child.props.onClick === 'function') {
           child.props.onClick(e);
         }
-        linkAction(hrefString, { replace, scroll, shallow, prefetch, locale });
+        navigate(e);
       },
       ...rest,
     };
diff --git a/code/frameworks/nextjs-vite/template/stories/Link.stories.tsx b/code/frameworks/nextjs-vite/template/stories/Link.stories.tsx
index 93c08ada6dba..7938b5a3ab50 100644
--- a/code/frameworks/nextjs-vite/template/stories/Link.stories.tsx
+++ b/code/frameworks/nextjs-vite/template/stories/Link.stories.tsx
@@ -72,6 +72,10 @@ type Story = StoryObj<typeof Component>;
 
 export const Default: Story = {};
 
+export const TriggersLinkAction: Story = {
+  render: () => <Link href="/dashboard">Trigger link action</Link>,
+};
+
 export const InAppDir: Story = {
   parameters: {
     nextjs: {
diff --git a/code/frameworks/nextjs/src/export-mocks/link/index.test.tsx b/code/frameworks/nextjs/src/export-mocks/link/index.test.tsx
index a2bf2e09e003..730cc3f6666d 100644
--- a/code/frameworks/nextjs/src/export-mocks/link/index.test.tsx
+++ b/code/frameworks/nextjs/src/export-mocks/link/index.test.tsx
@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
@@ -10,6 +10,21 @@ const renderHref = (props: Record<string, unknown>) => {
   return /href="([^"]*)"/.exec(html)?.[1];
 };
 
+const makeClickEvent = () => {
+  const e = {
+    defaultPrevented: false,
+    preventDefault() {
+      e.defaultPrevented = true;
+    },
+  };
+  return e as unknown as React.MouseEvent<HTMLAnchorElement>;
+};
+
+const getAnchorOnClick = (props: Record<string, unknown>) =>
+  (MockLink as any).render(props, null).props.onClick as (
+    e: React.MouseEvent<HTMLAnchorElement>
+  ) => void;
+
 describe('next/link mock', () => {
   it('renders the resolved `as` URL instead of the `href` template when `as` is provided', () => {
     expect(renderHref({ href: '/users/[id]', as: '/users/123' })).toBe('/users/123');
@@ -27,4 +42,30 @@ describe('next/link mock', () => {
       '/about?ref=nav'
     );
   });
+
+  it('calls onClick before preventing default', () => {
+    let defaultPreventedWhenHandlerRan: boolean | undefined;
+    const onClick = vi.fn((e: React.MouseEvent<HTMLAnchorElement>) => {
+      defaultPreventedWhenHandlerRan = e.defaultPrevented;
+    });
+
+    getAnchorOnClick({ href: '/about', onClick })(makeClickEvent());
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+    expect(defaultPreventedWhenHandlerRan).toBe(false);
+  });
+
+  it('still runs a handler that bails when the event was already default-prevented', () => {
+    const userOnClick = vi.fn();
+    const mergedOnClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+      if (e.defaultPrevented) {
+        return;
+      }
+      userOnClick();
+    };
+
+    getAnchorOnClick({ href: '/about', onClick: mergedOnClick })(makeClickEvent());
+
+    expect(userOnClick).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/code/frameworks/nextjs/src/export-mocks/link/index.tsx b/code/frameworks/nextjs/src/export-mocks/link/index.tsx
index 6825cfb37ff5..b47be429e7e7 100644
--- a/code/frameworks/nextjs/src/export-mocks/link/index.tsx
+++ b/code/frameworks/nextjs/src/export-mocks/link/index.tsx
@@ -27,22 +27,28 @@ const MockLink = React.forwardRef<HTMLAnchorElement, any>(function MockLink(
       ? `${resolvedHref.pathname || ''}${resolvedHref.query ? '?' + new URLSearchParams(resolvedHref.query).toString() : ''}${resolvedHref.hash || ''}`
       : resolvedHref;
 
-  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+  const navigate = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    if (e.defaultPrevented) {
+      return;
+    }
     e.preventDefault();
-    onClick?.(e);
     linkAction(hrefString, { replace, scroll, shallow, prefetch, locale });
   };
 
+  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    onClick?.(e);
+    navigate(e);
+  };
+
   if (legacyBehavior) {
     const child = React.Children.only(children) as React.ReactElement<any>;
     const childProps: Record<string, any> = {
       ref,
       onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {
-        e.preventDefault();
         if (child.props && typeof child.props.onClick === 'function') {
           child.props.onClick(e);
         }
-        linkAction(hrefString, { replace, scroll, shallow, prefetch, locale });
+        navigate(e);
       },
       ...rest,
     };
diff --git a/code/frameworks/nextjs/template/stories/Link.stories.tsx b/code/frameworks/nextjs/template/stories/Link.stories.tsx
index 17c8203980e6..d8488b965d5f 100644
--- a/code/frameworks/nextjs/template/stories/Link.stories.tsx
+++ b/code/frameworks/nextjs/template/stories/Link.stories.tsx
@@ -72,6 +72,10 @@ type Story = StoryObj<typeof Component>;
 
 export const Default: Story = {};
 
+export const TriggersLinkAction: Story = {
+  render: () => <Link href="/dashboard">Trigger link action</Link>,
+};
+
 export const InAppDir: Story = {
   parameters: {
     nextjs: {
diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json
index 258e6b1796e8..01a29fa7e8ab 100644
--- a/code/frameworks/vue3-vite/package.json
+++ b/code/frameworks/vue3-vite/package.json
@@ -53,7 +53,7 @@
     "@storybook/vue3": "workspace:*",
     "magic-string": "^0.30.0",
     "typescript": "^5.9.3",
-    "vue-component-meta": "^2.0.0",
+    "vue-component-meta": "^3.2.7",
     "vue-docgen-api": "^4.75.1"
   },
   "devDependencies": {
diff --git a/code/package.json b/code/package.json
index 61515f2af18a..e11346cf63a7 100644
--- a/code/package.json
+++ b/code/package.json
@@ -197,5 +197,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "10.5.0-alpha.10"
 }
diff --git a/code/renderers/react/build-config.ts b/code/renderers/react/build-config.ts
index b14582ea919a..47b92afe5d61 100644
--- a/code/renderers/react/build-config.ts
+++ b/code/renderers/react/build-config.ts
@@ -42,6 +42,14 @@ const config: BuildEntries = {
         entryPoint: './src/preset.ts',
         dts: false,
       },
+      {
+        // Worker-target docgen module imported by core's docgen worker. Exposed as an internal
+        // export so the preset resolves it via import.meta.resolve (package map) instead of a
+        // hard-coded dist path.
+        exportEntries: ['./internal/docgen-worker'],
+        entryPoint: './src/docgen/docgen-worker.ts',
+        dts: false,
+      },
     ],
   },
 };
diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json
index 407b25436843..42d2d06a679e 100644
--- a/code/renderers/react/package.json
+++ b/code/renderers/react/package.json
@@ -35,6 +35,7 @@
       "code": "./src/playwright.ts",
       "default": "./dist/playwright.js"
     },
+    "./internal/docgen-worker": "./dist/docgen/docgen-worker.js",
     "./package.json": "./package.json",
     "./preset": "./dist/preset.js",
     "./preview": {
diff --git a/code/renderers/react/src/componentManifest/componentMeta/ComponentMetaManager.test.ts b/code/renderers/react/src/componentManifest/componentMeta/ComponentMetaManager.test.ts
index 876c095040e8..5ca9e4ed0fed 100644
--- a/code/renderers/react/src/componentManifest/componentMeta/ComponentMetaManager.test.ts
+++ b/code/renderers/react/src/componentManifest/componentMeta/ComponentMetaManager.test.ts
@@ -1,7 +1,9 @@
 import * as fs from 'node:fs';
 import * as path from 'node:path';
 
-import { afterEach, describe, expect, it } from 'vitest';
+import { once } from 'storybook/internal/node-logger';
+
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import { dedent } from 'ts-dedent';
 import ts from 'typescript';
@@ -340,6 +342,140 @@ describe('multi-project management', () => {
     expect(project).toBeDefined();
   });
 
+  it(
+    'recycles the shared program when heap usage crosses the threshold',
+    { timeout: 30_000 },
+    () => {
+      tempDir = createTempDir();
+
+      const files = writeFiles(tempDir, {
+        'tsconfig.json': tsconfigJSON(),
+        'Button.tsx': dedent`
+        import React from 'react';
+        export const Button = (_props: { label: string }) => <button />;
+      `,
+        'Button.stories.tsx': dedent`
+        import { Button } from './Button';
+        export default { component: Button };
+      `,
+      });
+
+      // ratio 0 → threshold 0 → heapUsed is always ≥ 0 → recycle fires after every batchExtract.
+      manager = new ComponentMetaManager(ts, 0);
+      const componentPath = path.join(tempDir, 'Button.tsx');
+      const before = manager.getProjectForFile(componentPath);
+
+      const entries: StoryRef[] = [
+        {
+          storyPath: files['Button.stories.tsx'],
+          component: {
+            componentName: 'Button',
+            importName: 'Button',
+            path: componentPath,
+            isPackage: false,
+          },
+        },
+      ];
+      manager.batchExtract(entries);
+
+      // The disposed program was cleared, so the next lookup rebuilds a fresh instance.
+      const after = manager.getProjectForFile(componentPath);
+      expect(after).not.toBe(before);
+    }
+  );
+
+  it(
+    'warns once, with guidance to raise the memory limit, when it recycles under pressure',
+    { timeout: 30_000 },
+    () => {
+      tempDir = createTempDir();
+
+      const files = writeFiles(tempDir, {
+        'tsconfig.json': tsconfigJSON(),
+        'Button.tsx': dedent`
+        import React from 'react';
+        export const Button = (_props: { label: string }) => <button />;
+      `,
+        'Button.stories.tsx': dedent`
+        import { Button } from './Button';
+        export default { component: Button };
+      `,
+      });
+
+      // Spy on the one-time `once.warn` channel: routing the warning through it is what makes it
+      // surface once per process (the dedupe itself is node-logger's responsibility, tested there).
+      const onceWarnSpy = vi.spyOn(once, 'warn').mockImplementation(() => undefined);
+      try {
+        // ratio 0 → threshold 0 → recycle fires on every batchExtract.
+        manager = new ComponentMetaManager(ts, 0);
+        const componentPath = path.join(tempDir, 'Button.tsx');
+        manager.getProjectForFile(componentPath);
+
+        const entries: StoryRef[] = [
+          {
+            storyPath: files['Button.stories.tsx'],
+            component: {
+              componentName: 'Button',
+              importName: 'Button',
+              path: componentPath,
+              isPackage: false,
+            },
+          },
+        ];
+
+        manager.batchExtract(entries);
+
+        expect(onceWarnSpy).toHaveBeenCalled();
+        expect(onceWarnSpy.mock.calls[0][0]).toContain('--max-old-space-size');
+      } finally {
+        onceWarnSpy.mockRestore();
+        once.clear();
+      }
+    }
+  );
+
+  it(
+    'keeps the shared program while heap usage stays below the threshold',
+    { timeout: 30_000 },
+    () => {
+      tempDir = createTempDir();
+
+      const files = writeFiles(tempDir, {
+        'tsconfig.json': tsconfigJSON(),
+        'Button.tsx': dedent`
+        import React from 'react';
+        export const Button = (_props: { label: string }) => <button />;
+      `,
+        'Button.stories.tsx': dedent`
+        import { Button } from './Button';
+        export default { component: Button };
+      `,
+      });
+
+      // ratio Infinity → threshold Infinity → heapUsed is always below it → recycle never fires.
+      manager = new ComponentMetaManager(ts, Number.POSITIVE_INFINITY);
+      const componentPath = path.join(tempDir, 'Button.tsx');
+      const before = manager.getProjectForFile(componentPath);
+
+      const entries: StoryRef[] = [
+        {
+          storyPath: files['Button.stories.tsx'],
+          component: {
+            componentName: 'Button',
+            importName: 'Button',
+            path: componentPath,
+            isPackage: false,
+          },
+        },
+      ];
+      manager.batchExtract(entries);
+
+      // No recycle → the same program instance is reused across extractions.
+      const after = manager.getProjectForFile(componentPath);
+      expect(after).toBe(before);
+    }
+  );
+
   it('extracts via Path 1 (importId + JSX in story file)', { timeout: 30_000 }, () => {
     tempDir = createTempDir();
 
diff --git a/code/renderers/react/src/componentManifest/componentMeta/ComponentMetaManager.ts b/code/renderers/react/src/componentManifest/componentMeta/ComponentMetaManager.ts
index a6654df6d840..1780ee69474b 100644
--- a/code/renderers/react/src/componentManifest/componentMeta/ComponentMetaManager.ts
+++ b/code/renderers/react/src/componentManifest/componentMeta/ComponentMetaManager.ts
@@ -15,11 +15,13 @@
  * Plus our own file watching layer (fs.watch + debounce) since we're a standalone Node.js process,
  * not running inside an IDE.
  */
-import { logger } from 'storybook/internal/node-logger';
+import { logger, once } from 'storybook/internal/node-logger';
 
 import { type FSWatcher, existsSync, watch } from 'fs';
 import * as path from 'path';
+import { dedent } from 'ts-dedent';
 import type ts from 'typescript';
+import * as v8 from 'v8';
 
 import type { StoryRef } from '../getComponentImports.ts';
 import { groupByToMap } from '../utils.ts';
@@ -36,6 +38,12 @@ const DEFAULT_INFERRED_OPTIONS: ts.CompilerOptions = {
   skipLibCheck: true,
 };
 
+/**
+ * Recycle (dispose + lazily rebuild) the shared TS program(s) once heap usage crosses this fraction
+ * of the V8 heap limit.
+ */
+const RECYCLE_HEAP_PRESSURE_RATIO = 0.7;
+
 export class ComponentMetaManager {
   // Adapted from:
   // https://github.com/volarjs/volar.js/blob/882cd56d46a13d272f34e451f495d3d62251969a/packages/language-server/lib/project/typescriptProject.ts#L34-L37
@@ -56,7 +64,23 @@ export class ComponentMetaManager {
     [number | undefined, ts.IScriptSnapshot | undefined]
   >();
 
-  constructor(private typescript: typeof ts) {}
+  // Heap-pressure recycle: bytes of `heapUsed` past which the TS program(s) are disposed and rebuilt.
+  private readonly heapRecycleThresholdBytes: number;
+
+  /**
+   * @param recycleHeapPressureRatio Fraction of the V8 heap limit at which the shared program(s) are
+   *   recycled (see {@link RECYCLE_HEAP_PRESSURE_RATIO}). Exposed for tuning and for the memory
+   *   regression gate, which passes `Infinity` to disable recycling and assert the OOM still happens
+   *   without the fix. Defaults to {@link RECYCLE_HEAP_PRESSURE_RATIO}.
+   */
+  constructor(
+    private typescript: typeof ts,
+    recycleHeapPressureRatio: number = RECYCLE_HEAP_PRESSURE_RATIO
+  ) {
+    this.heapRecycleThresholdBytes = Math.floor(
+      v8.getHeapStatistics().heap_size_limit * recycleHeapPressureRatio
+    );
+  }
 
   // ---------------------------------------------------------------------------
   // Adapted from:
@@ -95,6 +119,39 @@ export class ComponentMetaManager {
         logger.debug(`[reactComponentMeta] Batch extraction failed: ${err}`);
       }
     }
+
+    this.recycleProjectsIfHeapPressured();
+  }
+
+  /**
+   * Reclaim the shared program(s)' resident type-resolution cache when heap usage approaches the V8
+   * limit, preventing the next extraction's spike from OOMing the dev server.
+   */
+  private recycleProjectsIfHeapPressured(): void {
+    if (this.configProjects.size === 0 && !this.inferredProject) {
+      return;
+    }
+    if (process.memoryUsage().heapUsed < this.heapRecycleThresholdBytes) {
+      return;
+    }
+
+    // We crossed the heap-pressure threshold. Recycling reclaims the type cache and usually prevents
+    // the crash, but a single extraction can still exceed the cap — warn once so the user can raise
+    // their memory limit rather than silently paying repeated rebuilds (or eventually crashing).
+    const heapLimitMb = Math.round(v8.getHeapStatistics().heap_size_limit / (1024 * 1024));
+    once.warn(dedent`
+      Storybook's experimental docgen server is nearing the Node.js memory limit (~${heapLimitMb} MB) while extracting component types, and recycled its TypeScript program to avoid an out-of-memory crash. This can briefly slow down the docs and Controls panels.
+
+      If this happens often, raise Node's memory limit before starting Storybook, for example:
+        NODE_OPTIONS="--max-old-space-size=${heapLimitMb * 2}"
+    `);
+
+    for (const project of this.configProjects.values()) {
+      project.dispose();
+    }
+    this.inferredProject?.dispose();
+    this.configProjects.clear();
+    this.inferredProject = undefined;
   }
 
   // ---------------------------------------------------------------------------
diff --git a/code/renderers/react/src/componentManifest/componentMetaManagerSingleton.ts b/code/renderers/react/src/componentManifest/componentMetaManagerSingleton.ts
index b8c570cdcdce..fcd5c5b826ab 100644
--- a/code/renderers/react/src/componentManifest/componentMetaManagerSingleton.ts
+++ b/code/renderers/react/src/componentManifest/componentMetaManagerSingleton.ts
@@ -5,13 +5,16 @@ import { ComponentMetaManager } from './componentMeta/ComponentMetaManager.ts';
 let componentMetaManagerPromise: Promise<ComponentMetaManager | undefined> | undefined;
 
 /**
- * Process-wide {@link ComponentMetaManager} shared by the experimental manifest generator and the
- * docgen provider so static builds do not construct duplicate TypeScript language services.
+ * Process-wide {@link ComponentMetaManager} for the experimental manifest generator: building a full
+ * TypeScript program over every tsconfig project in the workspace is expensive, so the manifest
+ * generator keeps a single set of programs (and one file-snapshot cache) hot for the lifetime of the
+ * process rather than rebuilding per request.
  *
- * Both features build full TypeScript programs over every tsconfig project in the workspace. When
- * each owned its own manager, enabling both at once kept two complete sets of programs resident
- * simultaneously and exhausted the heap. Sharing one manager keeps a single set of programs (and
- * one file-snapshot cache) hot for the lifetime of the process.
+ * `experimentalDocgenServer` deliberately does NOT share this manager: its extraction runs in a
+ * worker thread ({@link ../docgen/docgen-worker.ts}) with its own manager so the synchronous program
+ * build stays off the main event loop. Worker threads have separate V8 heaps but share process RSS,
+ * so enabling both the manifest generator and the docgen server keeps two full program sets resident
+ * at once — acceptable today, but the reason this singleton is scoped to the manifest path only.
  */
 export function getSharedComponentMetaManager(): Promise<ComponentMetaManager | undefined> {
   if (!componentMetaManagerPromise) {
diff --git a/code/renderers/react/src/docgen/docgen-worker.ts b/code/renderers/react/src/docgen/docgen-worker.ts
new file mode 100644
index 000000000000..2e793f2af380
--- /dev/null
+++ b/code/renderers/react/src/docgen/docgen-worker.ts
@@ -0,0 +1,65 @@
+/**
+ * Worker-target docgen module for the React renderer.
+ *
+ * Core's docgen worker imports this module and calls {@link createDocgenProvider} once to build the
+ * middleware it folds into the provider chain. Everything here runs inside that worker thread: the
+ * heavy `react-component-meta` extraction (a full TypeScript program build via
+ * {@link ComponentMetaManager}) happens off the main event loop. The React renderer implements no
+ * threading itself — it only describes this module to core through the `experimental_docgenProvider`
+ * preset.
+ *
+ * This provider needs no configuration: `react-component-meta` extraction reads nothing from the
+ * user's `typescript` options. `ComponentMetaManager` builds its own program, and the only
+ * docgen-relevant TS option (`reactDocgenTypescriptOptions`, including `propFilter`) applies solely
+ * to the `react-docgen-typescript` engine used by the legacy manifest path — not here.
+ */
+import { STORY_FILE_TEST_REGEXP, getStoryImportPathFromEntry } from 'storybook/internal/common';
+import type { DocgenMiddleware, DocgenProvider } from 'storybook/internal/types';
+
+import { ComponentMetaManager } from '../componentManifest/componentMeta/ComponentMetaManager.ts';
+import { buildDocgenPayload } from './buildDocgen.ts';
+
+/**
+ * Builds the React docgen middleware. Owns one {@link ComponentMetaManager} for the worker's
+ * lifetime so the TypeScript language service / program stays warm across components. The manager is
+ * created lazily on the first eligible request and memoized; when TypeScript is unavailable the
+ * middleware passes through to the rest of the chain.
+ */
+export const createDocgenProvider = (): DocgenMiddleware => {
+  let managerPromise: Promise<ComponentMetaManager | undefined> | undefined;
+
+  const getManager = (): Promise<ComponentMetaManager | undefined> => {
+    if (!managerPromise) {
+      managerPromise = (async () => {
+        try {
+          const ts = await import('typescript');
+          return new ComponentMetaManager(ts);
+        } catch {
+          return undefined;
+        }
+      })();
+    }
+    return managerPromise;
+  };
+
+  return (nextDocgen: DocgenProvider): DocgenProvider =>
+    async (input) => {
+      const storyImportPath = getStoryImportPathFromEntry(input.entry);
+      if (!storyImportPath || !STORY_FILE_TEST_REGEXP.test(storyImportPath)) {
+        return nextDocgen(input);
+      }
+
+      const componentMetaManager = await getManager();
+      if (!componentMetaManager) {
+        return nextDocgen(input);
+      }
+
+      const ours = await buildDocgenPayload(input, { componentMetaManager });
+      if (!ours) {
+        return nextDocgen(input);
+      }
+
+      const downstream = await nextDocgen(input);
+      return { ...downstream, ...ours };
+    };
+};
diff --git a/code/renderers/react/src/docgen/preset.ts b/code/renderers/react/src/docgen/preset.ts
index 9819efd89f36..fa9e3348a8fc 100644
--- a/code/renderers/react/src/docgen/preset.ts
+++ b/code/renderers/react/src/docgen/preset.ts
@@ -1,58 +1,24 @@
-import { STORY_FILE_TEST_REGEXP, getStoryImportPathFromEntry } from 'storybook/internal/common';
-import type { DocgenProviderPreset } from 'storybook/internal/types';
+import { fileURLToPath } from 'node:url';
 
-import { getSharedComponentMetaManager } from '../componentManifest/componentMetaManagerSingleton.ts';
-import type { TypescriptOptions } from '../componentManifest/getComponentImports.ts';
-import { buildDocgenPayload } from './buildDocgen.ts';
+import type { DocgenProviderDescriptor } from 'storybook/internal/types';
 
 /**
- * React renderer docgen provider — phase 3: real RCM-backed extraction.
+ * React renderer docgen provider.
  *
- * Receives the authoritative index `entry` from the docgen service. Bails to `nextDocgen` when
- * the entry does not resolve to a CSF story file and when TypeScript isn't available. Otherwise
- * delegates to {@link buildDocgenPayload} which runs RCM against the file and returns a complete
- * {@link DocgenPayload}, or falls through to `nextDocgen` when nothing extractable is found.
+ * Contributes a {@link DocgenProviderDescriptor} pointing at {@link ./docgen-worker.ts}, which
+ * core's docgen worker imports and runs off the main thread. The renderer owns no threading code —
+ * it only resolves the worker module path; nothing else needs to cross the worker boundary, since
+ * `react-component-meta` extraction reads nothing from the user's `typescript` options (see
+ * {@link ./docgen-worker.ts}).
  *
- * When extraction succeeds, the payload is merged with downstream via the documented
- * `{ ...downstream, ...ours }` spread idiom so any fields a future provider sets and we don't
- * know about survive intact.
+ * The descriptor is appended to the accumulated array so addon providers can stack on top, mirroring
+ * the previous middleware chain — just composed inside the worker instead of in this process.
  */
-export const experimental_docgenProvider: DocgenProviderPreset = async (nextDocgen, options) => {
-  // Resolve the typescript options preset once at chain-build time so the provider closure does
-  // not re-read it on every call.
-  const typescriptOptionsPromise = (options.presets?.apply<Partial<TypescriptOptions>>(
-    'typescript',
-    {}
-  ) ?? Promise.resolve({})) as Promise<Partial<TypescriptOptions>>;
-
-  // Pre-boot the component meta manager in the background, off the critical path.
-  // `import('typescript')` loads a multi-MB module; deferring it to the first docgen request adds
-  // several seconds of latency to that request. Kicking it off here (fire-and-forget) lets it warm
-  // up in parallel with the rest of server startup, so `await getSharedComponentMetaManager()`
-  // below usually resolves instantly. The singleton memoizes and swallows its own errors, so this
-  // is safe to leave unawaited.
-  void getSharedComponentMetaManager();
-
-  return async (input) => {
-    const storyImportPath = getStoryImportPathFromEntry(input.entry);
-    if (!storyImportPath || !STORY_FILE_TEST_REGEXP.test(storyImportPath)) {
-      return nextDocgen(input);
-    }
-
-    const componentMetaManager = await getSharedComponentMetaManager();
-    if (!componentMetaManager) {
-      return nextDocgen(input);
-    }
-
-    const ours = await buildDocgenPayload(input, {
-      componentMetaManager,
-      typescriptOptions: await typescriptOptionsPromise,
-    });
-    if (!ours) {
-      return nextDocgen(input);
-    }
-
-    const downstream = await nextDocgen(input);
-    return { ...downstream, ...ours };
-  };
-};
+export const experimental_docgenProvider = async (
+  existing: DocgenProviderDescriptor[] = []
+): Promise<DocgenProviderDescriptor[]> => [
+  ...existing,
+  {
+    moduleSpecifier: fileURLToPath(import.meta.resolve('@storybook/react/internal/docgen-worker')),
+  },
+];
diff --git a/code/renderers/vue3/src/docs/tests-meta-components/meta-components.ts b/code/renderers/vue3/src/docs/tests-meta-components/meta-components.ts
index 10b687fb67b0..a5c42d74e1aa 100644
--- a/code/renderers/vue3/src/docs/tests-meta-components/meta-components.ts
+++ b/code/renderers/vue3/src/docs/tests-meta-components/meta-components.ts
@@ -1,10 +1,146 @@
 import { TypeSystem } from 'storybook/internal/docs-tools';
 
 import type { VueDocgenInfo } from '../../../../../frameworks/vue3-vite/src';
+import type { Declaration } from 'vue-component-meta';
+import type ts from 'typescript';
 
 type TestComponent = { __docgenInfo: VueDocgenInfo<'vue-component-meta'> };
+type LooseTestComponent = {
+  __docgenInfo: {
+    type: number;
+    props: unknown[];
+    events: unknown[];
+    slots: unknown[];
+    exposed: unknown[];
+  };
+};
+
+const ensureArray = (value: unknown): unknown[] => (Array.isArray(value) ? value : []);
+
+const ensureMetaMethods = (entry: Record<string, unknown>, allowUndefinedType = false) => {
+  if (!Array.isArray(entry.declarations)) {
+    entry.declarations = [];
+  }
+
+  if (typeof entry.getDeclarations !== 'function') {
+    entry.getDeclarations = () => entry.declarations as Declaration[];
+  }
+
+  if (typeof entry.getTypeObject !== 'function') {
+    entry.getTypeObject = () => {
+      if (allowUndefinedType) {
+        return undefined;
+      }
+
+      return entry.rawType as ts.Type;
+    };
+  }
+};
+
+const normalizePropertySchema = (schema: unknown) => {
+  if (!schema || typeof schema !== 'object') {
+    return;
+  }
+
+  const schemaEntry = schema as Record<string, unknown>;
+  if (
+    schemaEntry.kind === 'object' &&
+    schemaEntry.schema &&
+    typeof schemaEntry.schema === 'object'
+  ) {
+    Object.values(schemaEntry.schema as Record<string, unknown>).forEach((property) => {
+      normalizeProperty(property);
+    });
+    return;
+  }
+
+  const nestedSchema = ensureArray(schemaEntry.schema);
+  nestedSchema.forEach((nested) => {
+    if (!nested || typeof nested !== 'object') {
+      return;
+    }
+
+    normalizePropertySchema(nested);
+  });
+};
+
+const normalizeProperty = (property: unknown) => {
+  if (!property || typeof property !== 'object') {
+    return;
+  }
+
+  const propertyEntry = property as Record<string, unknown>;
+  ensureMetaMethods(propertyEntry);
+  normalizePropertySchema(propertyEntry.schema);
+};
+
+const normalizeEvent = (event: unknown) => {
+  if (!event || typeof event !== 'object') {
+    return;
+  }
+
+  const eventEntry = event as Record<string, unknown>;
+  if (!Array.isArray(eventEntry.tags)) {
+    eventEntry.tags = [];
+  }
+  ensureMetaMethods(eventEntry, true);
+
+  ensureArray(eventEntry.schema).forEach((schema) => {
+    normalizePropertySchema(schema);
+  });
+};
+
+const normalizeSlotOrExpose = (entry: unknown) => {
+  if (!entry || typeof entry !== 'object') {
+    return;
+  }
+
+  const slotOrExposeEntry = entry as Record<string, unknown>;
+  if (!Array.isArray(slotOrExposeEntry.tags)) {
+    slotOrExposeEntry.tags = [];
+  }
+  ensureMetaMethods(slotOrExposeEntry);
+  normalizePropertySchema(slotOrExposeEntry.schema);
+};
+
+const hasMetaMethods = (entry: unknown) => {
+  if (!entry || typeof entry !== 'object') {
+    return false;
+  }
 
-export const referenceTypeProps: TestComponent = {
+  const value = entry as Record<string, unknown>;
+  return typeof value.getDeclarations === 'function' && typeof value.getTypeObject === 'function';
+};
+
+const isTestComponent = (component: LooseTestComponent): component is TestComponent => {
+  const { __docgenInfo } = component;
+
+  const propsOk = __docgenInfo.props.every(hasMetaMethods);
+  const eventsOk = __docgenInfo.events.every(hasMetaMethods);
+  const slotsOk = __docgenInfo.slots.every(
+    (slot) => hasMetaMethods(slot) && Array.isArray((slot as Record<string, unknown>).tags)
+  );
+  const exposedOk = __docgenInfo.exposed.every(hasMetaMethods);
+
+  return propsOk && eventsOk && slotsOk && exposedOk;
+};
+
+const normalizeComponentMetaFixture = (component: LooseTestComponent): TestComponent => {
+  const { __docgenInfo } = component;
+
+  __docgenInfo.props.forEach(normalizeProperty);
+  __docgenInfo.events.forEach(normalizeEvent);
+  __docgenInfo.slots.forEach(normalizeSlotOrExpose);
+  __docgenInfo.exposed.forEach(normalizeSlotOrExpose);
+
+  if (!isTestComponent(component)) {
+    throw new TypeError('Failed to normalize vue-component-meta fixture.');
+  }
+
+  return component;
+};
+
+export const referenceTypeProps: TestComponent = normalizeComponentMetaFixture({
   __docgenInfo: {
     type: 1,
     props: [
@@ -473,7 +609,7 @@ export const referenceTypeProps: TestComponent = {
     slots: [],
     exposed: [],
   },
-};
+});
 
 export const mockExtractComponentPropsReturn = [
   {
@@ -1211,7 +1347,7 @@ export const mockExtractComponentPropsReturn = [
   },
 ];
 
-export const referenceTypeEvents: TestComponent = {
+export const referenceTypeEvents: TestComponent = normalizeComponentMetaFixture({
   __docgenInfo: {
     type: 1,
     props: [],
@@ -1298,7 +1434,7 @@ export const referenceTypeEvents: TestComponent = {
     slots: [],
     exposed: [],
   },
-};
+});
 
 export const mockExtractComponentEventsReturn = [
   {
@@ -1408,7 +1544,7 @@ export const mockExtractComponentEventsReturn = [
   },
 ];
 
-export const templateSlots: TestComponent = {
+export const templateSlots: TestComponent = normalizeComponentMetaFixture({
   __docgenInfo: {
     type: 1,
     props: [],
@@ -1504,7 +1640,7 @@ export const templateSlots: TestComponent = {
     ],
     exposed: [],
   },
-};
+});
 
 export const mockExtractComponentSlotsReturn = [
   {
diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/UnicodeDefineProps.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/UnicodeDefineProps.stories.ts
new file mode 100644
index 000000000000..e0587c8973cf
--- /dev/null
+++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/UnicodeDefineProps.stories.ts
@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Component from './unicode-defaults/destructured-define-props.vue';
+
+const meta = {
+  component: Component,
+  tags: ['autodocs'],
+  title: 'stories/renderers/vue3_vue3-vite-default-ts/component-meta/unicode-define-props',
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+export default meta;
+
+export const Default: Story = {};
diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/UnicodeWithDefaults.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/UnicodeWithDefaults.stories.ts
new file mode 100644
index 000000000000..4ff71419fe61
--- /dev/null
+++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/UnicodeWithDefaults.stories.ts
@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Component from './unicode-defaults/with-defaults.vue';
+
+const meta = {
+  component: Component,
+  tags: ['autodocs'],
+  title: 'stories/renderers/vue3_vue3-vite-default-ts/component-meta/unicode-with-defaults',
+} satisfies Meta<typeof Component>;
+
+type Story = StoryObj<typeof meta>;
+export default meta;
+
+export const Default: Story = {};
diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/unicode-defaults/destructured-define-props.vue b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/unicode-defaults/destructured-define-props.vue
new file mode 100644
index 000000000000..49e06735848c
--- /dev/null
+++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/unicode-defaults/destructured-define-props.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const {
+  label = '你好',
+  size = '大きい',
+  icon = '✨',
+} = defineProps<{
+  /**
+   * Greeting label.
+   */
+  label?: string;
+  /**
+   * Size label.
+   */
+  size?: string;
+  /**
+   * Decorative icon.
+   */
+  icon?: string;
+}>();
+</script>
+
+<template>
+  <p>{{ label }} - {{ size }} - {{ icon }}</p>
+</template>
diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/unicode-defaults/with-defaults.vue b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/unicode-defaults/with-defaults.vue
new file mode 100644
index 000000000000..8b01563149fa
--- /dev/null
+++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/unicode-defaults/with-defaults.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    /**
+     * Greeting label.
+     */
+    label?: string;
+    /**
+     * Size label.
+     */
+    size?: string;
+    /**
+     * Decorative icon.
+     */
+    icon?: string;
+  }>(),
+  {
+    label: 'こんにちは',
+    size: '大きい',
+    icon: '🚀',
+  }
+);
+</script>
+
+<template>
+  <p>{{ label }} - {{ size }} - {{ icon }}</p>
+</template>
diff --git a/docs/_snippets/api-doc-block-source-sort-props.md b/docs/_snippets/api-doc-block-source-sort-props.md
new file mode 100644
index 000000000000..b7475e61840a
--- /dev/null
+++ b/docs/_snippets/api-doc-block-source-sort-props.md
@@ -0,0 +1,54 @@
+```ts filename=".storybook/preview.tsx" renderer="react" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import type { Preview } from '@storybook/your-framework';
+
+const preview = {
+  parameters: {
+    jsx: {
+      // 👇 Preserve the order in which props are defined, instead of sorting them alphabetically
+      sortProps: false,
+    },
+  },
+} satisfies Preview;
+
+export default preview;
+```
+
+```js filename=".storybook/preview.jsx" renderer="react" language="js" tabTitle="CSF 3"
+export default {
+  parameters: {
+    jsx: {
+      // 👇 Preserve the order in which props are defined, instead of sorting them alphabetically
+      sortProps: false,
+    },
+  },
+};
+```
+
+```ts filename=".storybook/preview.tsx" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    jsx: {
+      // 👇 Preserve the order in which props are defined, instead of sorting them alphabetically
+      sortProps: false,
+    },
+  },
+});
+```
+
+```js filename=".storybook/preview.jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+export default definePreview({
+  parameters: {
+    jsx: {
+      // 👇 Preserve the order in which props are defined, instead of sorting them alphabetically
+      sortProps: false,
+    },
+  },
+});
+```
diff --git a/docs/_snippets/main-config-features-experimental-docgen-server.md b/docs/_snippets/main-config-features-experimental-docgen-server.md
new file mode 100644
index 000000000000..a9354d9fc6e1
--- /dev/null
+++ b/docs/_snippets/main-config-features-experimental-docgen-server.md
@@ -0,0 +1,53 @@
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF 3"
+export default {
+  // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    experimentalDocgenServer: true,
+  },
+};
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
+import type { StorybookConfig } from '@storybook/your-framework';
+
+const config: StorybookConfig = {
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    experimentalDocgenServer: true,
+  },
+};
+
+export default config;
+```
+
+```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    experimentalDocgenServer: true,
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { defineMain } from '@storybook/your-framework/node';
+
+export default defineMain({
+  framework: '@storybook/your-framework',
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  features: {
+    experimentalDocgenServer: true,
+  },
+});
+```
diff --git a/docs/ai/manifests.mdx b/docs/ai/manifests.mdx
index 48a59b460aed..905d2bfc2f7f 100644
--- a/docs/ai/manifests.mdx
+++ b/docs/ai/manifests.mdx
@@ -24,6 +24,8 @@ The components manifest is generated from static analysis of the CSF files in yo
 
 For prop type extraction, the manifest generation will use whatever is specified in the [`reactDocgen`](../api/main-config/main-config-typescript.mdx#reactdocgen) option, or `react-docgen` by default. We recommend using `react-docgen-typescript` for most projects, because it provides more accurate and comprehensive information about your components' props. If manifest generation seems too slow, you can switch to `react-docgen`, which is faster but less detailed.
 
+When [`experimentalDocgenServer`](../api/main-config/main-config-features.mdx#experimentaldocgenserver) is enabled, prop type extraction runs server-side via React Component Meta instead, and manifests use a ref-based format with per-component JSON snapshots when combined with [`componentsManifest`](../api/main-config/main-config-features.mdx#componentsmanifest).
+
 While the types themselves provide a basic level of information, JSDoc comments in your component source code can provide additional metadata for the manifest, which can be helpful for AI agents. We highly recommend adding JSDoc comments to your components and their props to provide as much context as possible for the agents. For example:
 
 ```ts title="Button.tsx"
diff --git a/docs/ai/mcp/overview.mdx b/docs/ai/mcp/overview.mdx
index 19d1b62d7d71..21c2e399a237 100644
--- a/docs/ai/mcp/overview.mdx
+++ b/docs/ai/mcp/overview.mdx
@@ -164,7 +164,7 @@ If you need to develop UI using components from multiple Storybooks, you can tak
 
 ### Which agents are supported?
 
-We built Storybook's capabilities as an MCP server, which is a standard protocol for AI agent tool providers. Any agent that supports MCP can be connected to Storybook's MCP server, and will be able to use Storybook's manifests and tools. This includes popular agents like [Claude](https://claude.ai/), [Google Gemini](https://gemini.google.dev/), [Microsoft Copilot](https://copilot.microsoft.com/), and many more.
+We built Storybook's capabilities as an MCP server, which is a standard protocol for AI agent tool providers. Any agent that supports MCP can be connected to Storybook's MCP server and use Storybook's manifests and tools. This includes popular agents like [Claude Code](https://code.claude.com/docs/en/mcp), [OpenAI Codex](https://developers.openai.com/codex/mcp/), [Cursor](https://docs.cursor.com/context/model-context-protocol), [Google Gemini CLI](https://geminicli.com/docs/tools/mcp-server/), [VS Code Copilot](https://code.visualstudio.com/docs/copilot/customization/mcp-servers), and many more.
 
 ### Why is the docs toolset React-only?
 
diff --git a/docs/api/cli-options.mdx b/docs/api/cli-options.mdx
index ee90fe6e5d0d..a45c0aad319d 100644
--- a/docs/api/cli-options.mdx
+++ b/docs/api/cli-options.mdx
@@ -37,34 +37,34 @@ storybook dev [options]
 
 Options include:
 
-| Option                          | Description                                                                                                                                                                                                                                                            |
-| ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--help`                        | Output usage information.<br />`storybook dev --help`                                                                                                                                                                                                                  |
-| `-V`, `--version`               | Output the version number.<br />`storybook dev -V`                                                                                                                                                                                                                     |
-| `-p`, `--port [number]`         | Port to run Storybook. If omitted, Storybook also reads the `PORT` environment variable when provided by launchers and platforms. During Claude preview launches, launcher-provided `PORT` takes precedence over a hardcoded script port.<br />`storybook dev -p 9009` |
-| `--exact-port`                  | Attempts to run Storybook on the exact port number specified.<br />If the port is already in use, Storybook will exit with an error message.<br />`storybook dev -p 9009 --exact-port`                                                                                 |
-| `-h`, `--host [string]`         | Host to run Storybook.<br />`storybook dev -h my-host.com`                                                                                                                                                                                                             |
-| `-c`, `--config-dir [dir-name]` | Storybook configuration directory.<br />`storybook dev -c .storybook`                                                                                                                                                                                                  |
-| `--loglevel [level]`            | Controls level of logging during build.<br />Available options: `trace`, `debug`, `info` (default), `warn`, `error`, `silent`<br />`storybook dev --loglevel warn`                                                                                                     |
-| `--https`                       | Serve Storybook over HTTPS. Note: You must provide your own certificate information.<br />`storybook dev --https`                                                                                                                                                      |
-| `--ssl-ca`                      | Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)<br />`storybook dev --ssl-ca my-certificate`                                                                                                                |
-| `--ssl-cert`                    | Provide an SSL certificate. (Required with --https)<br />`storybook dev --ssl-cert my-ssl-certificate`                                                                                                                                                                 |
-| `--ssl-key`                     | Provide an SSL key. (Required with --https)<br />`storybook dev --ssl-key my-ssl-key`                                                                                                                                                                                  |
-| `--smoke-test`                  | Exit after successful start.<br />`storybook dev --smoke-test`                                                                                                                                                                                                         |
-| `--ci`                          | CI mode (skip interactive prompts, don't open browser).<br />`storybook dev --ci`                                                                                                                                                                                      |
-| `--no-open`                     | Do not open Storybook automatically in the browser.<br />`storybook dev --no-open`                                                                                                                                                                                     |
-| `--quiet`                       | Suppress verbose build output.<br />`storybook dev --quiet`                                                                                                                                                                                                            |
-| `--debug`                       | Outputs more logs in the CLI to assist debugging.<br />`storybook dev --debug`                                                                                                                                                                                         |
-| `--debug-webpack`               | Display final webpack configurations for debugging purposes.<br />`storybook dev --debug-webpack`                                                                                                                                                                      |
-| `--stats-json [dir-name]`       | Write stats JSON to disk.<br />Requires Webpack<br />`storybook dev --stats-json /tmp/stats`                                                                                                                                                                           |
-| `--no-version-updates`          | Skips Storybook's update check.<br />`storybook dev --no-version-updates`                                                                                                                                                                                              |
-| `--docs`                        | Starts Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.mdx#preview-storybooks-documentation).<br />`storybook dev --docs`                                                                                           |
-| `--initial-path [path]`         | Configures the URL Storybook should open when it opens the browser for the first time.<br />`storybook dev --initial-path=/docs/getting-started--docs`                                                                                                                 |
-| `--preview-url [path]`          | Overrides the default Storybook preview with a custom built preview URL.<br />`storybook dev --preview-url=http://localhost:1337/external-iframe.html`                                                                                                                 |
-| `--force-build-preview`         | Forcefully builds Storybook's preview iframe.<br />Useful if you're experiencing issues, or combined with `--preview-url` to ensure the preview is up-to-date.<br />`storybook dev --force-build-preview`                                                              |
-| `--disable-telemetry`           | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#how-to-opt-out).<br />`storybook dev --disable-telemetry`                                                                                                                        |
-| `--enable-crash-reports`        | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#crash-reports-disabled-by-default).<br />`storybook dev --enable-crash-reports`                                                                          |
-| `--preview-only`                | Skips Storybook's manager from building and opens the app in "preview only" mode, which is designed to be used in [unsupported browsers](../sharing/publish-storybook.mdx#build-storybook-for-older-browsers). <br />`storybook dev --preview-only`                    |
+| Option                          | Description                                                                                                                                                                                                                                                                  |
+| ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--help`                        | Output usage information.<br />`storybook dev --help`                                                                                                                                                                                                                        |
+| `-V`, `--version`               | Output the version number.<br />`storybook dev -V`                                                                                                                                                                                                                           |
+| `-p`, `--port [number]`         | Port to run Storybook.<br />`storybook dev -p 9009`                                                                                                                                                                                                                          |
+| `--exact-port`                  | Attempts to run Storybook on the exact port number specified.<br />If the port is already in use, Storybook will exit with an error message.<br />`storybook dev -p 9009 --exact-port`                                                                                       |
+| `-h`, `--host [string]`         | Host to run Storybook. Setting this to `0.0.0.0` binds to all network interfaces. <br/>Extend it with [`core.allowedHosts`](./main-config/main-config-core.mdx#allowedhosts) to restrict which hosts can access your Storybook instance.<br />`storybook dev -h my-host.com` |
+| `-c`, `--config-dir [dir-name]` | Storybook configuration directory.<br />`storybook dev -c .storybook`                                                                                                                                                                                                        |
+| `--loglevel [level]`            | Controls level of logging during build.<br />Available options: `trace`, `debug`, `info` (default), `warn`, `error`, `silent`<br />`storybook dev --loglevel warn`                                                                                                           |
+| `--https`                       | Serve Storybook over HTTPS. Note: You must provide your own certificate information.<br />`storybook dev --https`                                                                                                                                                            |
+| `--ssl-ca`                      | Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)<br />`storybook dev --ssl-ca my-certificate`                                                                                                                      |
+| `--ssl-cert`                    | Provide an SSL certificate. (Required with --https)<br />`storybook dev --ssl-cert my-ssl-certificate`                                                                                                                                                                       |
+| `--ssl-key`                     | Provide an SSL key. (Required with --https)<br />`storybook dev --ssl-key my-ssl-key`                                                                                                                                                                                        |
+| `--smoke-test`                  | Exit after successful start.<br />`storybook dev --smoke-test`                                                                                                                                                                                                               |
+| `--ci`                          | CI mode (skip interactive prompts, don't open browser).<br />`storybook dev --ci`                                                                                                                                                                                            |
+| `--no-open`                     | Do not open Storybook automatically in the browser.<br />`storybook dev --no-open`                                                                                                                                                                                           |
+| `--quiet`                       | Suppress verbose build output.<br />`storybook dev --quiet`                                                                                                                                                                                                                  |
+| `--debug`                       | Outputs more logs in the CLI to assist debugging.<br />`storybook dev --debug`                                                                                                                                                                                               |
+| `--debug-webpack`               | Display final webpack configurations for debugging purposes.<br />`storybook dev --debug-webpack`                                                                                                                                                                            |
+| `--stats-json [dir-name]`       | Write stats JSON to disk.<br />Requires Webpack<br />`storybook dev --stats-json /tmp/stats`                                                                                                                                                                                 |
+| `--no-version-updates`          | Skips Storybook's update check.<br />`storybook dev --no-version-updates`                                                                                                                                                                                                    |
+| `--docs`                        | Starts Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.mdx#preview-storybooks-documentation).<br />`storybook dev --docs`                                                                                                 |
+| `--initial-path [path]`         | Configures the URL Storybook should open when it opens the browser for the first time.<br />`storybook dev --initial-path=/docs/getting-started--docs`                                                                                                                       |
+| `--preview-url [path]`          | Overrides the default Storybook preview with a custom built preview URL.<br />`storybook dev --preview-url=http://localhost:1337/external-iframe.html`                                                                                                                       |
+| `--force-build-preview`         | Forcefully builds Storybook's preview iframe.<br />Useful if you're experiencing issues, or combined with `--preview-url` to ensure the preview is up-to-date.<br />`storybook dev --force-build-preview`                                                                    |
+| `--disable-telemetry`           | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#how-to-opt-out).<br />`storybook dev --disable-telemetry`                                                                                                                              |
+| `--enable-crash-reports`        | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#crash-reports-disabled-by-default).<br />`storybook dev --enable-crash-reports`                                                                                |
+| `--preview-only`                | Skips Storybook's manager from building and opens the app in "preview only" mode, which is designed to be used in [unsupported browsers](../sharing/publish-storybook.mdx#build-storybook-for-older-browsers). <br />`storybook dev --preview-only`                          |
 
 <Callout variant="warning" id="static-dir-deprecation">
 
@@ -174,7 +174,7 @@ Options include:
 | Option                   | Description                                                                                                                                                                                      |
 | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `-h`, `--help`           | Output usage information.<br />`storybook remove --help`                                                                                                                                         |
-| `--package-manager`      | Sets the package manager to use when removing the addon.<br />Available package managers include `npm`, `yarn`, and `pnpm`.<br />`storybook remove [addon]--package-manager pnpm`                |
+| `--package-manager`      | Sets the package manager to use when removing the addon.<br />Available package managers include `npm`, `yarn`, and `pnpm`.<br />`storybook remove [addon] --package-manager pnpm`               |
 | `--debug`                | Outputs more logs in the CLI to assist debugging.<br />`storybook remove --debug`                                                                                                                |
 | `--disable-telemetry`    | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#how-to-opt-out).<br />`storybook remove --disable-telemetry`                                               |
 | `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.mdx#crash-reports-disabled-by-default).<br />`storybook remove --enable-crash-reports` |
diff --git a/docs/api/doc-blocks/doc-block-source.mdx b/docs/api/doc-blocks/doc-block-source.mdx
index 4ee44a526d87..017341989a3e 100644
--- a/docs/api/doc-blocks/doc-block-source.mdx
+++ b/docs/api/doc-blocks/doc-block-source.mdx
@@ -138,3 +138,15 @@ Specifies how the source code is rendered.
 Note that dynamic snippets will only work if the story uses [`args`](../../writing-stories/args.mdx) and the [`Story` block](./doc-block-story.mdx) for that story is rendered along with the `Source` block.
 
 </Callout>
+
+<If renderer="react">
+
+#### Overriding the default prop sorting behavior
+
+For React-based frameworks, dynamic snippets are automatically sorted alphabetically by default. To override this behavior, set the `sortProps` option to `false` to preserve the original order of the props in which they were defined in the story.
+
+<CodeSnippets path="api-doc-block-source-sort-props.md" />
+
+Similar to other parameters, you can define it at the project level in the `.storybook/preview.*` file, component level in the meta definition (or default export), or in the story itself.
+
+</If>
diff --git a/docs/api/main-config/main-config-features.mdx b/docs/api/main-config/main-config-features.mdx
index b898e7a3e8cb..35201207b764 100644
--- a/docs/api/main-config/main-config-features.mdx
+++ b/docs/api/main-config/main-config-features.mdx
@@ -21,6 +21,7 @@ Type:
   controls?: boolean;
   developmentModeForBuild?: boolean;
   experimentalCodeExamples?: boolean;
+  experimentalDocgenServer?: boolean;
   experimentalTestSyntax?: boolean;
   highlight?: boolean;
   interactions?: boolean;
@@ -28,6 +29,7 @@ Type:
   measure?: boolean;
   outline?: boolean;
   sidebarOnboardingChecklist?: boolean;
+  menuOnboardingChecklist?: boolean;
   toolbars?: boolean;
   viewport?: boolean;
 }
@@ -53,6 +55,7 @@ Type:
   measure?: boolean;
   outline?: boolean;
   sidebarOnboardingChecklist?: boolean;
+  menuOnboardingChecklist?: boolean;
   toolbars?: boolean;
   viewport?: boolean;
 }
@@ -77,6 +80,7 @@ Type:
   measure?: boolean;
   outline?: boolean;
   sidebarOnboardingChecklist?: boolean;
+  menuOnboardingChecklist?: boolean;
   toolbars?: boolean;
   viewport?: boolean;
 }
@@ -142,6 +146,8 @@ Default: `false`
 
 Generate [manifests](../../ai/manifests.mdx), used by the [MCP server](../../ai/mcp/overview.mdx).
 
+When combined with [`experimentalDocgenServer`](#experimentaldocgenserver), manifests use a ref-based format with per-component JSON snapshots for faster MCP loading.
+
 <CodeSnippets path="main-config-features-components-manifest.md" />
 
 </If>
@@ -184,12 +190,32 @@ Set `NODE_ENV` to `'development'` in built Storybooks for better testing and deb
 
 Type: `boolean`
 
+Prefer [`experimentalDocgenServer`](#experimentaldocgenserver) — it supersedes this flag and provides the same static snippet behavior along with faster, more accurate docgen.
+
 Enable the new code example generation method for React components (as seen in the story previews in an [autodocs](../../writing-docs/autodocs.mdx) page).
 
 Unlike the current implementation, this method reads the actual stories source file, which is faster to generate, more readable, and more accurate. However, they are not dynamic: they won't update if you change values in the Controls table.
 
 <CodeSnippets path="main-config-features-experimental-code-examples.md" />
 
+## `experimentalDocgenServer`
+
+(⚠️ **Experimental**)
+
+Type: `boolean`
+
+Default: `false`
+
+Enable server-side docgen for React projects. Storybook extracts component metadata on the dev server using the TypeScript Language Service (via React Component Meta) instead of injecting docgen into the preview bundle. This provides faster startup, more accurate [Controls](../../essentials/controls.mdx) and ArgTypes tables in [autodocs](../../writing-docs/autodocs.mdx), and improved static code snippets in docs and the Code panel. [Manifests](../../ai/manifests.mdx) and the [MCP server](../../ai/mcp/overview.mdx) use an optimized, ref-based format that loads faster for AI agents.
+
+When enabled, you do not need [`experimentalCodeExamples`](#experimentalcodeexamples) because snippet generation is handled by the server-side story-docs service.
+
+Snippets are static: they won't update if you change values in the Controls table.
+
+This feature is currently only supported for React projects. We [welcome feedback](https://github.com/storybookjs/storybook/discussions/35333) on the RFC.
+
+<CodeSnippets path="main-config-features-experimental-docgen-server.md" />
+
 ## `experimentalTestSyntax`
 
 (⚠️ **Experimental**)
@@ -234,6 +260,14 @@ Default: `true`
 
 Enable the [Measure](../../essentials/measure-and-outline.mdx#measure) feature.
 
+## `menuOnboardingChecklist`
+
+Type: `boolean`
+
+Default: `true`
+
+Enable a link to the onboarding guide in the menu.
+
 ## `outline`
 
 Type: `boolean`
diff --git a/docs/api/main-config/main-config-indexers.mdx b/docs/api/main-config/main-config-indexers.mdx
index 042fe1759dbc..9411d7200f96 100644
--- a/docs/api/main-config/main-config-indexers.mdx
+++ b/docs/api/main-config/main-config-indexers.mdx
@@ -1,7 +1,7 @@
 ---
 title: indexers
 sidebar:
-  order: 12
+  order: 13
 ---
 
 (⚠️ **Experimental**)
diff --git a/docs/api/main-config/main-config-log-level.mdx b/docs/api/main-config/main-config-log-level.mdx
index aa8bc52c69a5..6df81517ec83 100644
--- a/docs/api/main-config/main-config-log-level.mdx
+++ b/docs/api/main-config/main-config-log-level.mdx
@@ -1,7 +1,7 @@
 ---
 title: logLevel
 sidebar:
-  order: 13
+  order: 14
 ---
 
 Parent: [main.js|ts configuration](./main-config.mdx)
diff --git a/docs/api/main-config/main-config-manager-head.mdx b/docs/api/main-config/main-config-manager-head.mdx
index 29a1a47302e5..351ee6e43f7c 100644
--- a/docs/api/main-config/main-config-manager-head.mdx
+++ b/docs/api/main-config/main-config-manager-head.mdx
@@ -1,7 +1,7 @@
 ---
 title: managerHead
 sidebar:
-  order: 14
+  order: 15
 ---
 
 Parent: [main.js|ts configuration](./main-config.mdx)
diff --git a/docs/api/main-config/main-config-preview-annotations.mdx b/docs/api/main-config/main-config-preview-annotations.mdx
index d2d66b889d9e..bca7ae85a844 100644
--- a/docs/api/main-config/main-config-preview-annotations.mdx
+++ b/docs/api/main-config/main-config-preview-annotations.mdx
@@ -1,7 +1,7 @@
 ---
 title: previewAnnotations
 sidebar:
-  order: 15
+  order: 16
 ---
 
 Parent: [main.js|ts configuration](./main-config.mdx)
diff --git a/docs/api/main-config/main-config-preview-body.mdx b/docs/api/main-config/main-config-preview-body.mdx
index e904ffe2523f..a97a5a2a0985 100644
--- a/docs/api/main-config/main-config-preview-body.mdx
+++ b/docs/api/main-config/main-config-preview-body.mdx
@@ -1,7 +1,7 @@
 ---
 title: previewBody
 sidebar:
-  order: 16
+  order: 17
 ---
 
 Parent: [main.js|ts configuration](./main-config.mdx)
diff --git a/docs/api/main-config/main-config-preview-head.mdx b/docs/api/main-config/main-config-preview-head.mdx
index 5bf40ecb9321..58be18cef474 100644
--- a/docs/api/main-config/main-config-preview-head.mdx
+++ b/docs/api/main-config/main-config-preview-head.mdx
@@ -1,7 +1,7 @@
 ---
 title: previewHead
 sidebar:
-  order: 17
+  order: 18
 ---
 
 Parent: [main.js|ts configuration](./main-config.mdx)
diff --git a/docs/api/main-config/main-config-refs.mdx b/docs/api/main-config/main-config-refs.mdx
index 581f23503f80..f46541fe7d04 100644
--- a/docs/api/main-config/main-config-refs.mdx
+++ b/docs/api/main-config/main-config-refs.mdx
@@ -1,7 +1,7 @@
 ---
 title: refs
 sidebar:
-  order: 18
+  order: 19
 ---
 
 Parent: [main.js|ts configuration](./main-config.mdx)
diff --git a/docs/api/main-config/main-config-static-dirs.mdx b/docs/api/main-config/main-config-static-dirs.mdx
index f33305cd3d09..7a6b18e92e7c 100644
--- a/docs/api/main-config/main-config-static-dirs.mdx
+++ b/docs/api/main-config/main-config-static-dirs.mdx
@@ -1,7 +1,7 @@
 ---
 title: staticDirs
 sidebar:
-  order: 19
+  order: 20
 ---
 
 Parent: [main.js|ts configuration](./main-config.mdx)
diff --git a/docs/api/main-config/main-config-swc.mdx b/docs/api/main-config/main-config-swc.mdx
index 16d245866077..fa572a931a7a 100644
--- a/docs/api/main-config/main-config-swc.mdx
+++ b/docs/api/main-config/main-config-swc.mdx
@@ -1,7 +1,7 @@
 ---
 title: swc
 sidebar:
-  order: 20
+  order: 21
 ---
 
 Parent: [main.js|ts configuration](./main-config.mdx)
diff --git a/docs/api/main-config/main-config-tags.mdx b/docs/api/main-config/main-config-tags.mdx
index 96bd848ddff5..eac6b763d0fe 100644
--- a/docs/api/main-config/main-config-tags.mdx
+++ b/docs/api/main-config/main-config-tags.mdx
@@ -1,7 +1,7 @@
 ---
 title: tags
 sidebar:
-  order: 21
+  order: 22
 ---
 
 Parent: [main.js|ts configuration](./main-config.mdx)
diff --git a/docs/api/main-config/main-config-typescript.mdx b/docs/api/main-config/main-config-typescript.mdx
index af07b03a457d..62b57b66c443 100644
--- a/docs/api/main-config/main-config-typescript.mdx
+++ b/docs/api/main-config/main-config-typescript.mdx
@@ -1,7 +1,7 @@
 ---
 title: typescript
 sidebar:
-  order: 22
+  order: 23
 ---
 
 Parent: [main.js|ts configuration](./main-config.mdx)
diff --git a/docs/api/main-config/main-config-vite-final.mdx b/docs/api/main-config/main-config-vite-final.mdx
index 1169f59e895d..1577e7c7205f 100644
--- a/docs/api/main-config/main-config-vite-final.mdx
+++ b/docs/api/main-config/main-config-vite-final.mdx
@@ -1,7 +1,7 @@
 ---
 title: viteFinal
 sidebar:
-  order: 23
+  order: 24
 ---
 
 Parent: [main.js|ts configuration](./main-config.mdx)
diff --git a/docs/api/main-config/main-config-webpack-final.mdx b/docs/api/main-config/main-config-webpack-final.mdx
index 360f90afd0b1..fcbd49186320 100644
--- a/docs/api/main-config/main-config-webpack-final.mdx
+++ b/docs/api/main-config/main-config-webpack-final.mdx
@@ -1,7 +1,7 @@
 ---
 title: webpackFinal
 sidebar:
-  order: 24
+  order: 25
 ---
 
 Parent: [main.js|ts configuration](./main-config.mdx)
diff --git a/docs/api/parameters.mdx b/docs/api/parameters.mdx
index 57f0619c8c42..2ff1fb5de1fa 100644
--- a/docs/api/parameters.mdx
+++ b/docs/api/parameters.mdx
@@ -52,6 +52,28 @@ Specifies how the canvas should [lay out the story](../configure/story-layout.md
 - **padded**: (default) Add padding to the story
 - **fullscreen**: Show the story as-is, without padding
 
+### `htmlLang`
+
+Type: `string`
+
+Default: `'en'`
+
+A [BCP-47 language tag](https://en.wikipedia.org/wiki/IETF_language_tag) (e.g. `'ja'`, `'de'`, `'fr-CH'`) describing the language of the **rendered story UI**. In story view it sets the `lang` attribute on the preview's `<html>` element; in docs view it sets `lang` on each embedded story canvas. Inherited project → meta → story.
+
+Use this to language the components you render — for example, a German story added for copy-length validation inside an otherwise English design system.
+
+Storybook's own interface (the manager UI and docs chrome such as toolbars and ArgTypes headers) always reports as English and is unaffected by this parameter.
+
+### `docs.lang`
+
+Type: `string`
+
+Default: `'en'`
+
+A BCP-47 language tag describing the language of the **docs prose** that Storybook renders — component and story descriptions, ArgTypes description cells, and free-form MDX prose. Resolved project → meta for page-level content and project → meta → story for per-story content.
+
+This is independent of [`htmlLang`](#htmllang): the language you _document_ in can differ from the language your stories _render_ in. Storybook chrome (toolbars, ArgTypes column headers, anchor links) stays English regardless.
+
 ### `options`
 
 Type:
diff --git a/docs/configure/environment-variables.mdx b/docs/configure/environment-variables.mdx
index 3aac310cf1ce..c504ef85b6a5 100644
--- a/docs/configure/environment-variables.mdx
+++ b/docs/configure/environment-variables.mdx
@@ -103,6 +103,14 @@ You can pass additional arguments to the browser by setting the `BROWSER_ARGS` e
 
 ## Troubleshooting
 
+<If renderer={['angular', 'ember' ]}>
+
+### The `process` variable not being detected
+
+If you're using a Webpack-based framework (e.g., Angular with Webpack) and you run into a runtime error such as `Can't find variable: process` when referencing Storybook's prefixed environment variables (e.g., `STORYBOOK_`), this is likely because one or more environment variables are missing or not properly configured. To fix this, ensure they are configured via `.env` files, injected via command-line arguments, and include default values as outlined in the [section above](#using-storybook-configuration).
+
+</If>
+
 ### Environment variables are not working
 
 If you're trying to use framework-specific environment variables (e.g.,`VUE_APP_`), you may run into issues primarily due to the fact that Storybook and your framework may have specific configurations and may not be able to recognize and use those environment variables. If you run into a similar situation, you may need to adjust your framework configuration to make sure that it can recognize and use those environment variables. For example, if you're working with a Vite-based framework, you can extend the configuration file and enable the [`envPrefix`](https://vitejs.dev/config/shared-options.html#envprefix) option. Other frameworks may require a similar approach.
diff --git a/docs/get-started/frameworks/tanstack-react.mdx b/docs/get-started/frameworks/tanstack-react.mdx
index d2008eb5c3fa..8b7df264fc64 100644
--- a/docs/get-started/frameworks/tanstack-react.mdx
+++ b/docs/get-started/frameworks/tanstack-react.mdx
@@ -183,6 +183,10 @@ TanStack Query is not automatically set up. The recommended approach is to creat
 
 <CodeSnippets path="tanstack-react-query-setup.md" />
 
+This setup keeps the router context and React provider pointed at the same `QueryClient` no matter how Storybook renders the story: in the sidebar, in the Docs page, through portable stories, or in a test run. Clearing the cache before each story gives every story fresh query state while preserving one predictable integration point for loaders, route context, decorators, and story-level setup.
+
+You can create a separate `QueryClient` for each story when you need stronger isolation, such as rendering several stories with the same query keys on one Docs page and keeping their cached responses independent. The tradeoff is that you must make the per-story client available to both the router context and the `QueryClientProvider` for that story. If those two places receive different clients, route loaders and components can read different caches, and story setup that calls `setQueryData` may not affect the component being rendered. Per-story clients also require explicit cleanup of timers, subscriptions, and cached data owned by each client.
+
 #### Seeding query data per story
 
 In individual stories, use [`beforeEach`](../../writing-tests/interaction-testing.mdx#beforeeach) to call [`setQueryData`](https://tanstack.com/query/latest/docs/reference/QueryClient#queryclientsetquerydata) on the shared `QueryClient` before the component renders. Access it from `parameters.tanstack.router.context`:
diff --git a/scripts/bench/docgen-memory/gate.ts b/scripts/bench/docgen-memory/gate.ts
new file mode 100644
index 000000000000..e70c0f71ff96
--- /dev/null
+++ b/scripts/bench/docgen-memory/gate.ts
@@ -0,0 +1,262 @@
+/**
+ * CI regression gate for the docgen-server memory behavior
+ * (https://github.com/storybookjs/storybook/issues/35260).
+ *
+ * Runs {@link file://./memory-harness.ts} in fresh child processes (so each measurement starts from a
+ * clean heap) and asserts two independent things:
+ *
+ *   1. Steady-state churn/leak-freeness (`changed-scope` metric config): post-GC `heapUsed` must not
+ *      climb across saves, and the per-save transient working set must stay under budget. A regression
+ *      that re-extracts the whole index would blow past these.
+ *   2. The OOM fix itself, as a **crash → survive negative control** (`live` configs): the live path
+ *      (many per-component `batchExtract` calls on the shared program) is run under a tight heap cap
+ *      both WITH and WITHOUT program recycling.
+ *        - recycle OFF (`--recycle off`, ratio Infinity) MUST OOM.
+ *        - recycle ON (default) MUST survive.
+ *      Asserting the flip (not just survival) is what guards the fix rather than the cap.
+ *
+ * Run:
+ *   yarn bench:docgen-memory          # from scripts/
+ *   node --import jiti/register scripts/bench/docgen-memory/gate.ts
+ */
+import { spawnSync } from 'node:child_process';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+
+import { SANDBOX_DIRECTORY } from '../../utils/constants.ts';
+
+interface HarnessResult {
+  baseline: { rssMb: number; heapUsedMb: number; retainedHeapMb?: number };
+  peakRss: number;
+  retainedSlope?: number;
+  retainedGrowth?: number;
+  avgTransient?: number;
+}
+
+interface MetricBudgets {
+  /** Max allowed post-GC retained growth (MB) across the run. */
+  maxRetainedGrowthMb: number;
+  /** Max allowed average transient working set added per save (MB). */
+  maxTransientMb: number;
+  /** Max allowed post-GC retained-heap slope (MB/save). */
+  maxRetainedSlopeMb: number;
+}
+
+interface GateConfig {
+  name: string;
+  args: string[];
+  /** Subdirectory under the gate output dir for this config's generated project + result.json. */
+  outSubdir: string;
+  /** `--max-old-space-size` cap (MB) for the child. Omit to run uncapped. */
+  capMb?: number;
+  /**
+   * Crash → survive negative control. `true` ⇒ the child MUST OOM (recycle disabled); `false` ⇒ it
+   * MUST survive (recycle on). Omit for metric-only configs.
+   */
+  expectOom?: boolean;
+  /** Post-GC metric budgets, asserted from `result.json` (metric configs only). */
+  budgets?: MetricBudgets;
+}
+
+const HARNESS = path.join(import.meta.dirname, 'memory-harness.ts');
+
+/** V8 heap-limit OOM signature, used to confirm the negative control crashed for the right reason. */
+const OOM_SIGNATURE = /heap out of memory|Reached heap limit|Allocation failed/i;
+
+const CONFIGS: GateConfig[] = [
+  {
+    // The fixed steady state we protect: each save re-extracts only the changed component. Budgets sit
+    // well above observed values so the gate is not flaky, while still failing hard if a regression
+    // reintroduces whole-index re-extraction.
+    name: 'changed-scope steady state (N=600, props=10, 20 saves)',
+    args: [
+      '--components', '600',
+      '--variants', '4',
+      '--props', '10',
+      '--saves', '20',
+      '--mode', 'refresh',
+      '--scope', 'changed',
+    ],
+    outSubdir: 'changed-scope',
+    budgets: { maxRetainedGrowthMb: 60, maxTransientMb: 90, maxRetainedSlopeMb: 3 },
+  },
+  {
+    // Positive control: the live per-edit workload survives under a tight cap BECAUSE the shared
+    // program is recycled under heap pressure. Pair with the negative control below.
+    name: 'live path survives WITH recycling (N=800, --heavy, cap 1536MB)',
+    args: [
+      '--components', '800',
+      '--variants', '4',
+      '--props', '10',
+      '--saves', '1',
+      '--mode', 'live',
+      '--recycle', 'on',
+      '--heavy',
+      '--no-force-gc',
+    ],
+    outSubdir: 'live',
+    capMb: 1536,
+    expectOom: false,
+  },
+  {
+    // Negative control: the SAME workload + cap, with recycling disabled, MUST OOM. If this ever
+    // survives, the cap is too loose (or the workload shrank), so fail and re-tune the pair.
+    name: 'live path OOMs WITHOUT recycling — negative control (N=800, --heavy, cap 1536MB)',
+    args: [
+      '--components', '800',
+      '--variants', '4',
+      '--props', '10',
+      '--saves', '1',
+      '--mode', 'live',
+      '--recycle', 'off',
+      '--heavy',
+      '--no-force-gc',
+    ],
+    outSubdir: 'live',
+    capMb: 1536,
+    expectOom: true,
+  },
+];
+
+/**
+ * Generate into the same place sandboxes go (`../storybook-sandboxes` by default, overridable via
+ * `STORYBOOK_SANDBOX_ROOT`) and leave it on disk, so a human can open the generated project and see
+ * exactly what the gate exercised.
+ */
+const GATE_PROJECT_DIR = path.join(SANDBOX_DIRECTORY, 'docgen-memory-gate');
+
+interface RunOutcome {
+  status: number | null;
+  output: string;
+  result?: HarnessResult;
+}
+
+function runHarness(config: GateConfig): RunOutcome {
+  const outDir = path.join(GATE_PROJECT_DIR, config.outSubdir);
+  fs.mkdirSync(outDir, { recursive: true });
+  const jsonPath = path.join(outDir, 'result.json');
+  // Remove any stale result so a crashed run cannot be mistaken for a prior success.
+  fs.rmSync(jsonPath, { force: true });
+
+  const nodeArgs = [
+    '--expose-gc',
+    ...(config.capMb ? [`--max-old-space-size=${config.capMb}`] : []),
+    '--import',
+    'jiti/register',
+    HARNESS,
+    ...config.args,
+    '--out',
+    outDir,
+    '--json',
+    jsonPath,
+  ];
+
+  const proc = spawnSync(process.execPath, nodeArgs, { encoding: 'utf8' });
+  const output = `${proc.stdout ?? ''}${proc.stderr ?? ''}`;
+  // Echo a compact tail so CI logs show what happened without the full V8 crash dump.
+  console.log(
+    output
+      .trim()
+      .split('\n')
+      .slice(-8)
+      .map((line) => `    ${line}`)
+      .join('\n')
+  );
+
+  const result = fs.existsSync(jsonPath)
+    ? (JSON.parse(fs.readFileSync(jsonPath, 'utf8')) as HarnessResult)
+    : undefined;
+  return { status: proc.status, output, result };
+}
+
+function checkMetricConfig(config: GateConfig, outcome: RunOutcome, failures: string[]): void {
+  if (outcome.status !== 0) {
+    failures.push(`${config.name}: harness exited with status ${outcome.status}`);
+    console.log(`  ✗ harness crashed unexpectedly (status ${outcome.status})`);
+    return;
+  }
+  if (!outcome.result || !config.budgets) {
+    failures.push(`${config.name}: missing result.json (run with --json)`);
+    console.log('  ✗ result.json missing');
+    return;
+  }
+
+  const { budgets, name } = config;
+  const checks: Array<{ label: string; value: number | undefined; budget: number }> = [
+    { label: 'retained growth (MB)', value: outcome.result.retainedGrowth, budget: budgets.maxRetainedGrowthMb },
+    { label: 'avg transient/save (MB)', value: outcome.result.avgTransient, budget: budgets.maxTransientMb },
+    { label: 'retained slope (MB/save)', value: outcome.result.retainedSlope, budget: budgets.maxRetainedSlopeMb },
+  ];
+
+  for (const { label, value, budget } of checks) {
+    if (value === undefined) {
+      failures.push(`${name}: missing metric "${label}" (run with --expose-gc)`);
+      console.log(`  ✗ ${label}: <missing>`);
+      continue;
+    }
+    const ok = value <= budget;
+    console.log(`  ${ok ? '✓' : '✗'} ${label}: ${value.toFixed(1)} (budget ${budget})`);
+    if (!ok) {
+      failures.push(`${name}: ${label} ${value.toFixed(1)} exceeds budget ${budget}`);
+    }
+  }
+}
+
+function checkNegativeControl(config: GateConfig, outcome: RunOutcome, failures: string[]): void {
+  const crashed = outcome.status !== 0;
+  const hasOomSignature = OOM_SIGNATURE.test(outcome.output);
+
+  if (config.expectOom) {
+    // Must crash AND for the right reason (a heap-limit OOM, not some other failure).
+    if (crashed && hasOomSignature) {
+      console.log('  ✓ OOMed as expected without recycling (negative control holds)');
+      return;
+    }
+    if (!crashed) {
+      failures.push(
+        `${config.name}: expected an OOM without recycling, but the run survived — the cap is too ` +
+          `loose or the workload shrank; re-tune the live config pair.`
+      );
+      console.log('  ✗ expected OOM, but survived');
+    } else {
+      failures.push(`${config.name}: crashed (status ${outcome.status}) but without a heap-OOM signature`);
+      console.log(`  ✗ crashed (status ${outcome.status}) but not a heap OOM`);
+    }
+    return;
+  }
+
+  // expectOom === false: must survive.
+  if (outcome.status === 0) {
+    console.log('  ✓ survived with recycling enabled');
+    return;
+  }
+  const why = hasOomSignature ? 'OOM' : `status ${outcome.status}`;
+  failures.push(`${config.name}: expected survival with recycling, but the run failed (${why})`);
+  console.log(`  ✗ expected survival, but failed (${why})`);
+}
+
+function main() {
+  const failures: string[] = [];
+
+  for (const config of CONFIGS) {
+    console.log(`\n=== ${config.name} ===`);
+    const outcome = runHarness(config);
+    if (config.expectOom !== undefined) {
+      checkNegativeControl(config, outcome, failures);
+    } else {
+      checkMetricConfig(config, outcome, failures);
+    }
+  }
+
+  console.log('');
+  if (failures.length > 0) {
+    console.error('docgen memory gate FAILED:');
+    for (const failure of failures) {
+      console.error(`  - ${failure}`);
+    }
+    process.exit(1);
+  }
+  console.log('docgen memory gate passed.');
+}
+
+main();
diff --git a/scripts/bench/docgen-memory/generate-project.ts b/scripts/bench/docgen-memory/generate-project.ts
new file mode 100644
index 000000000000..ab29f440ef79
--- /dev/null
+++ b/scripts/bench/docgen-memory/generate-project.ts
@@ -0,0 +1,303 @@
+/**
+ * Generator for an isolated, stress-test Storybook-shaped React project.
+ *
+ * Produces N component files (each with a non-trivial props interface that extends React DOM types,
+ * so TypeScript type resolution has realistic cost) plus a co-located `.stories.tsx` with M variants.
+ * Used by both the in-process memory harness (`memory-harness.ts`) and — at larger scale — as a real
+ * buildable/deployable Storybook for the "+5K components" benchmark from
+ * https://github.com/storybookjs/storybook/issues/34824.
+ *
+ * The `--heavy` lever (optionally scaled with `--heavy-factor N`) grows the TypeScript checker
+ * working set by emitting inline literal-union props that `serializeType` expands into retained enum
+ * arrays — the density that lets the in-process harness actually OOM.
+ *
+ * Run directly:
+ *   node --import jiti/register scripts/bench/docgen-memory/generate-project.ts --out ../storybook-sandboxes/docgen-stress --components 5000 --variants 5
+ */
+import { createRequire } from 'node:module';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import { pathToFileURL } from 'node:url';
+
+const require = createRequire(import.meta.url);
+
+export interface GenerateOptions {
+  /** Absolute (or cwd-relative) output directory for the generated project. */
+  outDir: string;
+  /** Number of component+story file pairs to generate. */
+  components: number;
+  /** Number of story variants per component. */
+  variants: number;
+  /** Number of extra props per component (on top of the fixed baseline props). */
+  props: number;
+  /**
+   * Inflate the *type-resolution* cost per component with large constructed types (big unions,
+   * mapped types, deep nesting, generics) — the lever that actually grows the TypeScript checker
+   * working set, mirroring complex real-world component libraries.
+   */
+  heavyTypes: boolean;
+  /**
+   * Multiplier (≥1) applied to {@link heavyTypes}. Scales both the size of each constructed type
+   * (token unions, mapped-type keys) and the number of heavy props per component. The dominant
+   * lever is the count of *inline literal-union* props: `serializeType` expands those into retained
+   * enum arrays on the emitted doc, so a higher factor grows the permanently-retained working set
+   * (the real-world failure mode where the warm set sits just under the heap cap), not just the
+   * transient per-save spike. Ignored unless `heavyTypes` is set.
+   */
+  heavyFactor: number;
+  /**
+   * Inject a base64 data string of this many KB into each component as a runtime constant. This is
+   * a control: it bloats source text (parse + retained program memory) but NOT the type-resolution
+   * working set.
+   */
+  base64Kb: number;
+  /** Copy a minimal node_modules (react, @types/react, csstype, prop-types) into the project. */
+  withNodeModules: boolean;
+}
+
+/** Base number of union members / mapped-type keys used by `--heavy` (scaled by `--heavy-factor`). */
+const HEAVY_TOKEN_COUNT = 300;
+
+/** Base number of inline literal-union props per component (scaled by `--heavy-factor`). */
+const HEAVY_ENUM_PROPS = 6;
+
+export interface GeneratedProject {
+  outDir: string;
+  configPath: string;
+  /** Absolute paths of every generated component implementation file, in component order. */
+  componentPaths: string[];
+  /** Absolute paths of every generated story file, in component order. */
+  storyPaths: string[];
+}
+
+const NODE_MODULES_DIR = path.resolve(require.resolve('react/package.json'), '../..');
+
+/** Copy the minimal node_modules packages TypeScript needs for React type resolution. */
+function copyNodeModules(projectDir: string): void {
+  const dest = path.join(projectDir, 'node_modules');
+  const typesSrc = path.join(NODE_MODULES_DIR, '@types');
+  fs.mkdirSync(path.join(dest, '@types'), { recursive: true });
+
+  for (const pkg of ['react', 'csstype']) {
+    fs.cpSync(path.join(NODE_MODULES_DIR, pkg), path.join(dest, pkg), {
+      recursive: true,
+      dereference: true,
+    });
+  }
+  for (const pkg of ['react', 'prop-types']) {
+    fs.cpSync(path.join(typesSrc, pkg), path.join(dest, '@types', pkg), {
+      recursive: true,
+      dereference: true,
+    });
+  }
+}
+
+const TSCONFIG = {
+  compilerOptions: {
+    target: 'ES2020',
+    module: 'ESNext',
+    jsx: 'react-jsx',
+    strict: true,
+    esModuleInterop: true,
+    moduleResolution: 'bundler',
+    skipLibCheck: true,
+  },
+  include: ['./src/**/*.ts', './src/**/*.tsx'],
+};
+
+/** A spread of prop kinds so each component carries realistic type-resolution weight. */
+function propLines(componentIndex: number, extraProps: number): string {
+  const lines = [
+    `  /** Primary label shown to the user. */`,
+    `  label: string;`,
+    `  /** Numeric size token. */`,
+    `  size?: number;`,
+    `  /** Visual variant. */`,
+    `  variant?: 'primary' | 'secondary' | 'tertiary' | 'ghost';`,
+    `  /** Disable interaction. */`,
+    `  disabled?: boolean;`,
+    `  /** Click handler. */`,
+    `  onAction?: (event: { id: string; value: number }) => void;`,
+    `  /** Rich item list. */`,
+    `  items?: Array<{ id: string; label: string; meta?: Record<string, unknown> }>;`,
+    `  /** Render slot. */`,
+    `  renderSlot?: (ctx: { index: number }) => React.ReactNode;`,
+  ];
+  for (let p = 0; p < extraProps; p++) {
+    lines.push(`  /** Extra prop ${p} for component ${componentIndex}. */`);
+    lines.push(
+      p % 3 === 0
+        ? `  extra${p}?: 'a' | 'b' | 'c';`
+        : p % 3 === 1
+          ? `  extra${p}?: number | string;`
+          : `  extra${p}?: { nested: { deep: boolean } };`
+    );
+  }
+  return lines.join('\n');
+}
+
+/**
+ * Large constructed types that force the checker to materialize big per-component type state.
+ *
+ * Two distinct cost levers, both scaled by `factor`:
+ *
+ *   - Transient resolution: a big token union + a mapped type over it + a deeply nested generic.
+ *     These inflate the per-save type-checking spike but are emitted as type *aliases*, so
+ *     `serializeType` only prints their name — they are not deeply retained on the doc.
+ *   - Retained working set: `inline literal-union` props whose members are unique per component and
+ *     per prop. `serializeType` expands these into `enum` value arrays stored on the emitted doc, so
+ *     they stay resident for the life of the program — mirroring real libraries whose warm working
+ *     set sits permanently near the heap cap.
+ */
+function heavyTypeBlock(i: number, factor: number): { typeDefs: string; propLines: string } {
+  const tokenCount = HEAVY_TOKEN_COUNT * factor;
+  const enumProps = HEAVY_ENUM_PROPS * factor;
+  const tokens = Array.from({ length: tokenCount }, (_, t) => `'t${t}'`).join(' | ');
+
+  // Inline literal-union props: unique members per (component, prop) so the checker and the emitted
+  // doc cannot dedupe them across components. These are the dominant retained-memory lever.
+  const enumLines = Array.from({ length: enumProps }, (_, k) => {
+    const members = Array.from(
+      { length: tokenCount },
+      (_, t) => `'c${i}_p${k}_v${t}'`
+    ).join(' | ');
+    return `  /** Inline literal union ${k}. */
+  enum${k}?: ${members};`;
+  }).join('\n');
+
+  return {
+    typeDefs: `type Token${i} = ${tokens};
+type ThemeMap${i} = { [K in Token${i}]: { fg: string; bg: string; border: number; shadow: string } };
+interface Deep${i} { a: { b: { c: { d: { e: Token${i}; f: ThemeMap${i} } } } } }
+`,
+    propLines: `  /** Heavy token union. */
+  token?: Token${i};
+  /** Mapped type over every token. */
+  theme?: ThemeMap${i};
+  /** Deeply nested generic structure. */
+  deep?: Deep${i};
+  /** Array of per-token records. */
+  matrix?: Array<Record<Token${i}, number>>;
+${enumLines}`,
+  };
+}
+
+/** A base64 data string roughly `kb` kilobytes long (control payload that grows source text only). */
+function base64Block(i: number, kb: number): string {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+  const length = kb * 1024;
+  let body = '';
+  for (let c = 0; c < length; c++) {
+    body += chars[c % chars.length];
+  }
+  return `const ASSET${i} = "data:image/png;base64,${body}";\nvoid ASSET${i};\n`;
+}
+
+export function componentSource(
+  i: number,
+  extraProps: number,
+  opts: { heavyTypes?: boolean; heavyFactor?: number; base64Kb?: number } = {}
+): string {
+  const heavy = opts.heavyTypes
+    ? heavyTypeBlock(i, Math.max(1, opts.heavyFactor ?? 1))
+    : undefined;
+  const base64 = opts.base64Kb ? base64Block(i, opts.base64Kb) : '';
+  return `import * as React from 'react';
+
+${heavy?.typeDefs ?? ''}${base64}export interface Comp${i}Props extends React.HTMLAttributes<HTMLDivElement> {
+${propLines(i, extraProps)}${heavy ? `\n${heavy.propLines}` : ''}
+}
+
+/**
+ * Comp${i} — generated stress-test component.
+ */
+export const Comp${i} = ({ label, ...rest }: Comp${i}Props) => {
+  return <div {...rest}>{label}</div>;
+};
+`;
+}
+
+function storySource(i: number, variants: number): string {
+  const variantExports = Array.from({ length: variants }, (_, v) => {
+    const variant = ['primary', 'secondary', 'tertiary', 'ghost'][v % 4];
+    return `export const Variant${v} = {
+  render: () => <Comp${i} label="hello-${v}" size={${v}} variant="${variant}" />,
+};`;
+  }).join('\n\n');
+
+  return `import * as React from 'react';
+
+import { Comp${i} } from './Comp${i}';
+
+const meta = {
+  title: 'Generated/Comp${i}',
+  component: Comp${i},
+};
+export default meta;
+
+${variantExports}
+`;
+}
+
+export function generateProject(options: GenerateOptions): GeneratedProject {
+  const outDir = path.resolve(options.outDir);
+  fs.rmSync(outDir, { recursive: true, force: true });
+  fs.mkdirSync(path.join(outDir, 'src'), { recursive: true });
+
+  const configPath = path.join(outDir, 'tsconfig.json');
+  fs.writeFileSync(configPath, JSON.stringify(TSCONFIG, null, 2));
+
+  if (options.withNodeModules) {
+    copyNodeModules(outDir);
+  }
+
+  const componentPaths: string[] = [];
+  const storyPaths: string[] = [];
+
+  for (let i = 0; i < options.components; i++) {
+    const dir = path.join(outDir, 'src', `Comp${i}`);
+    fs.mkdirSync(dir, { recursive: true });
+    const componentPath = path.join(dir, `Comp${i}.tsx`);
+    const storyPath = path.join(dir, `Comp${i}.stories.tsx`);
+    fs.writeFileSync(
+      componentPath,
+      componentSource(i, options.props, {
+        heavyTypes: options.heavyTypes,
+        heavyFactor: options.heavyFactor,
+        base64Kb: options.base64Kb,
+      })
+    );
+    fs.writeFileSync(storyPath, storySource(i, options.variants));
+    componentPaths.push(componentPath);
+    storyPaths.push(storyPath);
+  }
+
+  return { outDir, configPath, componentPaths, storyPaths };
+}
+
+function parseArgs(argv: string[]): GenerateOptions {
+  const get = (flag: string, fallback: string) => {
+    const idx = argv.indexOf(flag);
+    return idx >= 0 && argv[idx + 1] ? argv[idx + 1] : fallback;
+  };
+  return {
+    outDir: get('--out', '../storybook-sandboxes/docgen-memory-stress'),
+    components: Number(get('--components', '500')),
+    variants: Number(get('--variants', '4')),
+    props: Number(get('--props', '8')),
+    heavyTypes: argv.includes('--heavy'),
+    heavyFactor: Number(get('--heavy-factor', '1')),
+    base64Kb: Number(get('--base64-kb', '0')),
+    withNodeModules: !argv.includes('--no-node-modules'),
+  };
+}
+
+if (process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href) {
+  const options = parseArgs(process.argv.slice(2));
+  const start = Date.now();
+  const result = generateProject(options);
+  console.log(
+    `Generated ${options.components} components (×${options.variants} variants, ${options.props} extra props) ` +
+      `into ${result.outDir} in ${Date.now() - start}ms`
+  );
+}
diff --git a/scripts/bench/docgen-memory/memory-harness.ts b/scripts/bench/docgen-memory/memory-harness.ts
new file mode 100644
index 000000000000..7797d12abaf4
--- /dev/null
+++ b/scripts/bench/docgen-memory/memory-harness.ts
@@ -0,0 +1,426 @@
+/**
+ * Deterministic in-process memory harness for the docgen-server OOM
+ * (https://github.com/storybookjs/storybook/issues/35260).
+ *
+ * It reproduces the "re-extract on every save" behavior without a browser or dev server, so it runs
+ * fast and is fully deterministic. It drives the real {@link ComponentMetaManager} against a
+ * generated project of N components, then simulates K file saves and samples memory after each one.
+ *
+ * Two failure signals are measured independently:
+ *   - RETAINED growth: post-GC `heapUsed` trend across saves. A rising trend ⇒ a true leak (memory
+ *     held between saves). A flat trend ⇒ the cost is transient allocation, not retained state.
+ *   - PEAK pressure: pre-GC `rss` per save. With `--no-force-gc` and a `--max-old-space-size` cap at
+ *     launch, this is what crashes the process when saves outpace GC (the reported OOM).
+ *
+ * Modes:
+ *   --mode refresh  call manager.batchExtract(allEntries) synchronously each save. Mirrors the docgen
+ *                   open-service "refresh all extracted components" path (server.ts).
+ *   --mode live     many per-component batchExtract calls on the shared program, mirroring the
+ *                   docs-addon per-edit wave that drives the #35260 OOM. The program-recycle fix bounds
+ *                   this path. Use --recycle off to assert the OOM still happens without the fix.
+ *
+ * Run (diagnose retained vs transient):
+ *   node --expose-gc --import jiti/register scripts/bench/docgen-memory/memory-harness.ts \
+ *     --components 800 --saves 25 --mode refresh
+ *
+ * Run (reproduce the crash / verify the fix):
+ *   NODE_OPTIONS=--max_old_space_size=1536 node --expose-gc --import jiti/register \
+ *     scripts/bench/docgen-memory/memory-harness.ts \
+ *     --components 800 --props 10 --saves 1 --mode live --heavy --no-force-gc --recycle off   # → OOM
+ *   NODE_OPTIONS=--max_old_space_size=1536 node --expose-gc --import jiti/register \
+ *     scripts/bench/docgen-memory/memory-harness.ts \
+ *     --components 800 --props 10 --saves 1 --mode live --heavy --no-force-gc --recycle on    # → survives
+ */
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+
+import ts from 'typescript';
+
+import { SANDBOX_DIRECTORY } from '../../utils/constants.ts';
+import { componentSource, generateProject } from './generate-project.ts';
+
+/**
+ * Minimal structural view of the entry shape consumed by `ComponentMetaManager.batchExtract`. Kept
+ * local so the `scripts` typecheck does not descend into `code/renderers` internals; the real types
+ * live in `code/renderers/react/src/componentManifest`.
+ */
+interface StoryRef {
+  storyPath: string;
+  component: {
+    componentName: string;
+    importName: string;
+    localImportName: string;
+    importId: string;
+    isPackage: boolean;
+    path: string;
+  };
+}
+
+interface ComponentMetaManagerLike {
+  batchExtract(entries: StoryRef[]): void;
+  onFilesChanged(changes: Array<{ filePath: string; type: 'changed' | 'created' | 'deleted' }>): void;
+  dispose(): void;
+}
+
+type ComponentMetaManagerCtor = new (
+  typescript: typeof ts,
+  recycleHeapPressureRatio?: number
+) => ComponentMetaManagerLike;
+
+/**
+ * Load the real `ComponentMetaManager` at runtime. The specifier is built with `new URL` so the
+ * static `scripts` typecheck does not pull `code/renderers` source into its program.
+ */
+async function loadComponentMetaManager(): Promise<ComponentMetaManagerCtor> {
+  const url = new URL(
+    '../../../code/renderers/react/src/componentManifest/componentMeta/ComponentMetaManager.ts',
+    import.meta.url
+  ).href;
+  const mod = (await import(url)) as { ComponentMetaManager: ComponentMetaManagerCtor };
+  return mod.ComponentMetaManager;
+}
+
+interface HarnessOptions {
+  components: number;
+  variants: number;
+  props: number;
+  saves: number;
+  mode: 'refresh' | 'live';
+  heavyTypes: boolean;
+  heavyFactor: number;
+  base64Kb: number;
+  /**
+   * Which entries to re-extract per save.
+   *   all     – re-extract every component each save (the docgen service refreshing all extracted
+   *             components on an empty change hint).
+   *   changed – re-extract only the component whose file changed.
+   */
+  scope: 'all' | 'changed';
+  forceGc: boolean;
+  outDir: string;
+  reuse: boolean;
+  jsonOut?: string;
+  /** Fail the process when post-GC retained growth exceeds this many MB across the run. */
+  maxRetainedGrowthMb: number;
+  /**
+   * Heap-pressure ratio forwarded to `ComponentMetaManager`. `Infinity` disables program recycling
+   * (the negative control: assert the OOM happens without the fix). `undefined` uses the product
+   * default.
+   */
+  recycleHeapPressureRatio?: number;
+}
+
+interface Sample {
+  save: number;
+  rssMb: number;
+  heapUsedMb: number;
+  retainedHeapMb?: number;
+}
+
+const MB = 1024 * 1024;
+
+function parseArgs(argv: string[]): HarnessOptions {
+  const get = (flag: string, fallback: string) => {
+    const idx = argv.indexOf(flag);
+    return idx >= 0 && argv[idx + 1] ? argv[idx + 1] : fallback;
+  };
+  const mode = get('--mode', 'refresh');
+  if (mode !== 'refresh' && mode !== 'live') {
+    throw new Error(`--mode must be "refresh" or "live", got "${mode}"`);
+  }
+  const scope = get('--scope', 'all');
+  if (scope !== 'all' && scope !== 'changed') {
+    throw new Error(`--scope must be "all" or "changed", got "${scope}"`);
+  }
+  const recycle = get('--recycle', 'on');
+  if (recycle !== 'on' && recycle !== 'off') {
+    throw new Error(`--recycle must be "on" or "off", got "${recycle}"`);
+  }
+  return {
+    components: Number(get('--components', '600')),
+    variants: Number(get('--variants', '4')),
+    props: Number(get('--props', '8')),
+    saves: Number(get('--saves', '25')),
+    mode,
+    scope: scope as 'all' | 'changed',
+    recycleHeapPressureRatio: recycle === 'off' ? Number.POSITIVE_INFINITY : undefined,
+    heavyTypes: argv.includes('--heavy'),
+    heavyFactor: Number(get('--heavy-factor', '1')),
+    base64Kb: Number(get('--base64-kb', '0')),
+    forceGc: !argv.includes('--no-force-gc'),
+    outDir: get('--out', path.join(SANDBOX_DIRECTORY, 'docgen-memory-stress')),
+    reuse: argv.includes('--reuse'),
+    jsonOut: argv.indexOf('--json') >= 0 ? get('--json', '') : undefined,
+    maxRetainedGrowthMb: Number(get('--max-retained-growth', '400')),
+  };
+}
+
+function gc(): void {
+  if (typeof global.gc === 'function') {
+    global.gc();
+    global.gc();
+  }
+}
+
+function sampleMemory(forceGc: boolean): { rssMb: number; heapUsedMb: number; retainedHeapMb?: number } {
+  const pre = process.memoryUsage();
+  let retainedHeapMb: number | undefined;
+  if (forceGc) {
+    gc();
+    retainedHeapMb = process.memoryUsage().heapUsed / MB;
+  }
+  return { rssMb: pre.rss / MB, heapUsedMb: pre.heapUsed / MB, retainedHeapMb };
+}
+
+/** Least-squares slope of `values` vs index, in units-per-save. */
+function slopePerSave(values: number[]): number {
+  const n = values.length;
+  if (n < 2) {
+    return 0;
+  }
+  const meanX = (n - 1) / 2;
+  const meanY = values.reduce((a, b) => a + b, 0) / n;
+  let num = 0;
+  let den = 0;
+  for (let i = 0; i < n; i++) {
+    num += (i - meanX) * (values[i] - meanY);
+    den += (i - meanX) ** 2;
+  }
+  return den === 0 ? 0 : num / den;
+}
+
+function buildEntries(componentPaths: string[], storyPaths: string[]): StoryRef[] {
+  return componentPaths.map((componentPath, i) => ({
+    storyPath: storyPaths[i],
+    component: {
+      componentName: `Comp${i}`,
+      importName: `Comp${i}`,
+      localImportName: `Comp${i}`,
+      importId: `./Comp${i}`,
+      isPackage: false,
+      path: componentPath,
+    },
+  }));
+}
+
+/**
+ * Live-path mode: mirrors the docs-addon per-edit "waves" that drive the #35260 OOM — many
+ * individual per-component `batchExtract` calls on the ONE shared program, whose type-resolution
+ * cache accumulates across calls. This is the exact shape the program-recycle fix bounds (the
+ * recycle check runs between calls), unlike the `--scope all` single-call cold pass which OOMs
+ * within one call regardless of recycling.
+ *
+ * Run under a `--max-old-space-size` cap:
+ *   - recycle on (default): the heap sawtooths as the shared program is recycled, and survives.
+ *   - `--recycle off` (ratio Infinity): the type cache climbs to the cap and the process OOMs —
+ *     the negative control the gate asserts.
+ */
+function runLiveMode(
+  manager: ComponentMetaManagerLike,
+  entries: StoryRef[],
+  options: HarnessOptions
+): void {
+  const recycleEnabled = options.recycleHeapPressureRatio === undefined;
+  console.log(
+    `  live mode: ${options.saves} wave(s) × ${entries.length} per-component extractions, ` +
+      `recycle=${recycleEnabled ? 'on' : 'OFF (negative control)'}`
+  );
+
+  let peakRss = 0;
+  let extractions = 0;
+
+  for (let wave = 1; wave <= options.saves; wave++) {
+    for (let i = 0; i < entries.length; i++) {
+      manager.batchExtract([entries[i]]);
+      extractions++;
+      peakRss = Math.max(peakRss, process.memoryUsage().rss / MB);
+    }
+    const rssMb = process.memoryUsage().rss / MB;
+    console.log(
+      `  wave ${String(wave).padStart(2)}: rss=${rssMb.toFixed(0).padStart(5)}MB  ` +
+        `peak=${peakRss.toFixed(0).padStart(5)}MB  (${extractions} extractions)`
+    );
+  }
+
+  manager.dispose();
+
+  console.log('\nsummary');
+  console.log(`  result:   survived (no OOM) over ${extractions} extractions`);
+  console.log(`  peak rss: ${peakRss.toFixed(0)}MB`);
+
+  if (options.jsonOut) {
+    fs.writeFileSync(
+      options.jsonOut,
+      JSON.stringify({ options, mode: 'live', survived: true, peakRss, extractions }, null, 2)
+    );
+    console.log(`  wrote ${options.jsonOut}`);
+  }
+}
+
+async function main() {
+  const options = parseArgs(process.argv.slice(2));
+  const gcAvailable = typeof global.gc === 'function';
+
+  console.log('docgen-memory harness');
+  console.log(
+    `  components=${options.components} variants=${options.variants} props=${options.props} ` +
+      `saves=${options.saves} mode=${options.mode} scope=${options.scope} forceGc=${options.forceGc && gcAvailable}`
+  );
+  if (options.forceGc && !gcAvailable) {
+    console.log('  (run with `node --expose-gc` to measure retained heap; continuing without it)');
+  }
+
+  const genStart = Date.now();
+  let project: ReturnType<typeof generateProject>;
+  if (options.reuse && fs.existsSync(path.join(path.resolve(options.outDir), 'tsconfig.json'))) {
+    const outDir = path.resolve(options.outDir);
+    const componentPaths: string[] = [];
+    const storyPaths: string[] = [];
+    for (let i = 0; i < options.components; i++) {
+      componentPaths.push(path.join(outDir, 'src', `Comp${i}`, `Comp${i}.tsx`));
+      storyPaths.push(path.join(outDir, 'src', `Comp${i}`, `Comp${i}.stories.tsx`));
+    }
+    project = { outDir, configPath: path.join(outDir, 'tsconfig.json'), componentPaths, storyPaths };
+    console.log(`  reusing generated project at ${outDir}`);
+  } else {
+    project = generateProject({
+      outDir: options.outDir,
+      components: options.components,
+      variants: options.variants,
+      props: options.props,
+      heavyTypes: options.heavyTypes,
+      heavyFactor: options.heavyFactor,
+      base64Kb: options.base64Kb,
+      withNodeModules: true,
+    });
+    console.log(`  generated project in ${Date.now() - genStart}ms at ${project.outDir}`);
+  }
+
+  const ComponentMetaManager = await loadComponentMetaManager();
+  const manager = new ComponentMetaManager(ts, options.recycleHeapPressureRatio);
+  const entries = buildEntries(project.componentPaths, project.storyPaths);
+
+  if (options.mode === 'live') {
+    runLiveMode(manager, entries, options);
+    return;
+  }
+
+  // Initial extraction — builds the full TS program once (the cold path). This is the *identical*
+  // operation a `scope=all` refresh save performs (extractPropsFromStories over every entry), so an
+  // OOM here is the same OOM every refresh-all save would hit; it simply lands on the first pass when
+  // the full-extraction working set already exceeds the heap cap.
+  const initialStart = Date.now();
+  console.log(`  full extraction over ${entries.length} components (cold pass == refresh-all save)…`);
+  manager.batchExtract(entries);
+  console.log(`  initial batchExtract: ${Date.now() - initialStart}ms`);
+
+  const baseline = sampleMemory(options.forceGc && gcAvailable);
+  console.log(
+    `  baseline: rss=${baseline.rssMb.toFixed(0)}MB heapUsed=${baseline.heapUsedMb.toFixed(0)}MB` +
+      (baseline.retainedHeapMb !== undefined
+        ? ` retained=${baseline.retainedHeapMb.toFixed(0)}MB`
+        : '')
+  );
+
+  const samples: Sample[] = [];
+  // Track how many extra props each component currently has, so each save grows the type.
+  const extraByComponent = new Array(options.components).fill(options.props);
+
+  for (let save = 1; save <= options.saves; save++) {
+    const i = (save - 1) % options.components;
+    const componentPath = project.componentPaths[i];
+
+    // Mutate the component's props interface on disk so the type genuinely changes.
+    extraByComponent[i] += 1;
+    fs.writeFileSync(
+      componentPath,
+      componentSource(i, extraByComponent[i], {
+        heavyTypes: options.heavyTypes,
+        heavyFactor: options.heavyFactor,
+        base64Kb: options.base64Kb,
+      })
+    );
+    // Bump project versions so the next extraction re-reads the mutated file (matches the dev
+    // server's file-watcher → onFilesChanged flow); without this the program serves stale snapshots.
+    manager.onFilesChanged([{ filePath: componentPath, type: 'changed' }]);
+
+    const saveStart = Date.now();
+    const toExtract = options.scope === 'changed' ? [entries[i]] : entries;
+    manager.batchExtract(toExtract);
+    const durMs = Date.now() - saveStart;
+
+    const mem = sampleMemory(options.forceGc && gcAvailable);
+    samples.push({ save, ...mem });
+    console.log(
+      `  save ${String(save).padStart(3)}: ${String(durMs).padStart(5)}ms  ` +
+        `rss=${mem.rssMb.toFixed(0).padStart(5)}MB  heapUsed=${mem.heapUsedMb.toFixed(0).padStart(5)}MB` +
+        (mem.retainedHeapMb !== undefined
+          ? `  retained=${mem.retainedHeapMb.toFixed(0).padStart(5)}MB`
+          : '')
+    );
+  }
+
+  manager.dispose();
+
+  const rssValues = samples.map((s) => s.rssMb);
+  const peakRss = Math.max(baseline.rssMb, ...rssValues);
+  const finalRss = rssValues.at(-1) ?? baseline.rssMb;
+  const rssSlope = slopePerSave(rssValues);
+
+  const retainedValues = samples
+    .map((s) => s.retainedHeapMb)
+    .filter((v): v is number => v !== undefined);
+  const retainedSlope = retainedValues.length ? slopePerSave(retainedValues) : undefined;
+  const retainedGrowth =
+    retainedValues.length && baseline.retainedHeapMb !== undefined
+      ? (retainedValues.at(-1) as number) - baseline.retainedHeapMb
+      : undefined;
+
+  const transients = samples
+    .map((s) => (s.retainedHeapMb !== undefined ? s.heapUsedMb - s.retainedHeapMb : undefined))
+    .filter((v): v is number => v !== undefined);
+  const avgTransient = transients.length
+    ? transients.reduce((a, b) => a + b, 0) / transients.length
+    : undefined;
+
+  console.log('\nsummary');
+  console.log(`  peak rss:            ${peakRss.toFixed(0)}MB`);
+  if (avgTransient !== undefined) {
+    console.log(`  avg transient/save:  ${avgTransient.toFixed(0)}MB (pre-GC heapUsed − post-GC heapUsed)`);
+  }
+  console.log(`  final rss:           ${finalRss.toFixed(0)}MB`);
+  console.log(`  rss slope:           ${rssSlope.toFixed(1)}MB/save`);
+  if (retainedSlope !== undefined) {
+    console.log(`  retained slope:      ${retainedSlope.toFixed(2)}MB/save (post-GC heapUsed)`);
+    console.log(`  retained growth:     ${retainedGrowth!.toFixed(0)}MB over ${options.saves} saves`);
+    console.log(
+      retainedGrowth! > 5
+        ? '  → classification:    RETAINED leak (memory held between saves)'
+        : '  → classification:    TRANSIENT pressure (post-GC heap flat; OOM is GC-can\'t-keep-up)'
+    );
+  }
+
+  if (options.jsonOut) {
+    fs.writeFileSync(
+      options.jsonOut,
+      JSON.stringify(
+        { options, baseline, samples, peakRss, finalRss, rssSlope, retainedSlope, retainedGrowth, avgTransient },
+        null,
+        2
+      )
+    );
+    console.log(`  wrote ${options.jsonOut}`);
+  }
+
+  if (retainedGrowth !== undefined && retainedGrowth > options.maxRetainedGrowthMb) {
+    console.error(
+      `\nFAIL: retained growth ${retainedGrowth.toFixed(0)}MB exceeds threshold ${options.maxRetainedGrowthMb}MB`
+    );
+    process.exitCode = 1;
+  }
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exitCode = 1;
+});
diff --git a/scripts/ci/common-jobs.ts b/scripts/ci/common-jobs.ts
index 3736648dbd13..d02b187ce2b9 100644
--- a/scripts/ci/common-jobs.ts
+++ b/scripts/ci/common-jobs.ts
@@ -426,6 +426,27 @@ export const defineCircleciCompletion = (requires: JobOrNoOpJob[]) =>
     requires
   );
 
+export const docgenMemoryGate = defineJob(
+  'Docgen memory gate',
+  () => ({
+    executor: {
+      name: 'sb_node_22_classic',
+      class: 'medium+',
+    },
+    steps: [
+      ...workflow.restoreLinux(),
+      {
+        run: {
+          name: 'Docgen-server re-extraction memory gate',
+          working_directory: 'scripts',
+          command: 'yarn bench:docgen-memory',
+        },
+      },
+    ],
+  }),
+  [commonJobsNoOpJob]
+);
+
 export const benchmarkPackages = defineJob(
   'Benchmark packages',
   () => ({
diff --git a/scripts/ci/main.ts b/scripts/ci/main.ts
index d8fcfb5094c0..c048e28a0fcb 100644
--- a/scripts/ci/main.ts
+++ b/scripts/ci/main.ts
@@ -11,6 +11,7 @@ import {
   check,
   commonJobsNoOpJob,
   defineCircleciCompletion,
+  docgenMemoryGate,
   knip,
   lint,
   fmt,
@@ -54,7 +55,7 @@ function generateConfig(workflow: Workflow) {
     const initEmpty = getInitEmpty(workflow);
 
     if (isWorkflowOrAbove(workflow, 'daily')) {
-      jobs.push(build_windows, testUnit_windows);
+      jobs.push(build_windows, testUnit_windows, docgenMemoryGate);
     }
 
     jobs.push(
diff --git a/scripts/display-review.ts b/scripts/display-review.ts
index 5ef51ec43087..52a7d20682bb 100644
--- a/scripts/display-review.ts
+++ b/scripts/display-review.ts
@@ -90,7 +90,9 @@ const BADGE_A11Y_REPORT: Array<{ importPaths: string[]; storyNames: string[] }>
 /** Review surfaces that render Badge for story status. */
 const BADGE_REVIEW_SURFACES: Array<{ importPaths: string[]; storyNames: string[] }> = [
   {
-    importPaths: ['./core/src/manager/components/review/ReviewToolbarHeader.stories.tsx'],
+    importPaths: [
+      './core/src/manager/components/review/components/ReviewToolbarHeader.stories.tsx',
+    ],
     storyNames: ['New Story'],
   },
 ];
diff --git a/scripts/package.json b/scripts/package.json
index 8c94e5bf5ed4..8996908269e7 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "bench-packages": "jiti ./bench/bench-packages.ts",
+    "bench:docgen-memory": "node --import jiti/register ./bench/docgen-memory/gate.ts",
     "build-package": "jiti ./build-package.ts",
     "check": "jiti ./check/check-package.ts",
     "check-package": "jiti ./check-package.ts",
diff --git a/yarn.lock b/yarn.lock
index e5612b35255d..07a2f5e34a48 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10358,7 +10358,7 @@ __metadata:
     magic-string: "npm:^0.30.0"
     typescript: "npm:^5.9.3"
     vite: "npm:^7.0.4"
-    vue-component-meta: "npm:^2.0.0"
+    vue-component-meta: "npm:^3.2.7"
     vue-docgen-api: "npm:^4.75.1"
   peerDependencies:
     storybook: "workspace:^"
@@ -12859,15 +12859,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@volar/language-core@npm:2.4.15":
-  version: 2.4.15
-  resolution: "@volar/language-core@npm:2.4.15"
-  dependencies:
-    "@volar/source-map": "npm:2.4.15"
-  checksum: 10c0/34ebd2a0f19ff5ee676d990dd3cc63a72867ab39a39071b0699486cf6e1304cad136cace78a55eaba41340720aa60863a4a9646f338bcca4bb9e0e22bd5d431e
-  languageName: node
-  linkType: hard
-
 "@volar/language-core@npm:2.4.27":
   version: 2.4.27
   resolution: "@volar/language-core@npm:2.4.27"
@@ -12886,13 +12877,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@volar/source-map@npm:2.4.15":
-  version: 2.4.15
-  resolution: "@volar/source-map@npm:2.4.15"
-  checksum: 10c0/f1c353774c1e758d99ebadc2fffd416eeba5fa5f461597cef5d201ca4ea5a81ad9d7eb1c418d61b3cadaed1db2fef3fa0a29e85a02f08bba6fab04578736959a
-  languageName: node
-  linkType: hard
-
 "@volar/source-map@npm:2.4.27":
   version: 2.4.27
   resolution: "@volar/source-map@npm:2.4.27"
@@ -12907,17 +12891,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@volar/typescript@npm:2.4.15":
-  version: 2.4.15
-  resolution: "@volar/typescript@npm:2.4.15"
-  dependencies:
-    "@volar/language-core": "npm:2.4.15"
-    path-browserify: "npm:^1.0.1"
-    vscode-uri: "npm:^3.0.8"
-  checksum: 10c0/f8d9e2f34e3d47edd3db51c23a4b14c48098e145c31566e463ec468a472bb3679426652c73a605a501977690749f7330c463a110283ce5d2c221f411b5fd889b
-  languageName: node
-  linkType: hard
-
 "@volar/typescript@npm:2.4.27":
   version: 2.4.27
   resolution: "@volar/typescript@npm:2.4.27"
@@ -12929,7 +12902,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@volar/typescript@npm:~2.4.28":
+"@volar/typescript@npm:2.4.28, @volar/typescript@npm:~2.4.28":
   version: 2.4.28
   resolution: "@volar/typescript@npm:2.4.28"
   dependencies:
@@ -12990,49 +12963,33 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vue/compiler-vue2@npm:^2.7.16":
-  version: 2.7.16
-  resolution: "@vue/compiler-vue2@npm:2.7.16"
-  dependencies:
-    de-indent: "npm:^1.0.2"
-    he: "npm:^1.2.0"
-  checksum: 10c0/c76c3fad770b9a7da40b314116cc9da173da20e5fd68785c8ed8dd8a87d02f239545fa296e16552e040ec86b47bfb18283b39447b250c2e76e479bd6ae475bb3
-  languageName: node
-  linkType: hard
-
-"@vue/language-core@npm:2.2.12":
-  version: 2.2.12
-  resolution: "@vue/language-core@npm:2.2.12"
+"@vue/language-core@npm:3.2.1":
+  version: 3.2.1
+  resolution: "@vue/language-core@npm:3.2.1"
   dependencies:
-    "@volar/language-core": "npm:2.4.15"
+    "@volar/language-core": "npm:2.4.27"
     "@vue/compiler-dom": "npm:^3.5.0"
-    "@vue/compiler-vue2": "npm:^2.7.16"
     "@vue/shared": "npm:^3.5.0"
-    alien-signals: "npm:^1.0.3"
-    minimatch: "npm:^9.0.3"
+    alien-signals: "npm:^3.0.0"
     muggle-string: "npm:^0.4.1"
     path-browserify: "npm:^1.0.1"
-  peerDependencies:
-    typescript: "*"
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 10c0/b69864af058d757f9774390f4ced8e79d569703088c708736aba987c3a2f4072f2aa92dee81051891bd060998c5383dd857b9107e2c9f6c3ba0f288f826f521e
+    picomatch: "npm:^4.0.2"
+  checksum: 10c0/d83021599d6efbd8a54e8f8ac0c8eed3af44ada111a5f403c0c44537adc66a6bf03668de5786828d41dc38226d8372e821be23df4cc0ea506155985440e74406
   languageName: node
   linkType: hard
 
-"@vue/language-core@npm:3.2.1":
-  version: 3.2.1
-  resolution: "@vue/language-core@npm:3.2.1"
+"@vue/language-core@npm:3.3.2":
+  version: 3.3.2
+  resolution: "@vue/language-core@npm:3.3.2"
   dependencies:
-    "@volar/language-core": "npm:2.4.27"
+    "@volar/language-core": "npm:2.4.28"
     "@vue/compiler-dom": "npm:^3.5.0"
     "@vue/shared": "npm:^3.5.0"
-    alien-signals: "npm:^3.0.0"
+    alien-signals: "npm:^3.2.0"
     muggle-string: "npm:^0.4.1"
     path-browserify: "npm:^1.0.1"
-    picomatch: "npm:^4.0.2"
-  checksum: 10c0/d83021599d6efbd8a54e8f8ac0c8eed3af44ada111a5f403c0c44537adc66a6bf03668de5786828d41dc38226d8372e821be23df4cc0ea506155985440e74406
+    picomatch: "npm:^4.0.4"
+  checksum: 10c0/f80870a9383c8721b50281e54c5b9f3513d082e71fb6654c7da11de07b2dafa666c0bdadabee559f5284fcd44825ba2064c148fd22f230f3e6646debb5a69fbe
   languageName: node
   linkType: hard
 
@@ -13542,14 +13499,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"alien-signals@npm:^1.0.3":
-  version: 1.0.13
-  resolution: "alien-signals@npm:1.0.13"
-  checksum: 10c0/7b0ec8305eaacf810ab3fa7e2045c343e695dca510befc148ccef26cb59b8f159d9d56772fbd8767f85cbccc6fadcc09b9f90a4e1e1206d5f726b8995f24dbe4
-  languageName: node
-  linkType: hard
-
-"alien-signals@npm:^3.0.0":
+"alien-signals@npm:^3.0.0, alien-signals@npm:^3.2.0":
   version: 3.2.1
   resolution: "alien-signals@npm:3.2.1"
   checksum: 10c0/4c4064faa208126177224d1ed6a2310687d452dec0771994e276d9af4c72e853fcb969ae4a7fcd034b1d1b9accb9500f4941178326eeea1cb8f64ec612853ef8
@@ -16749,13 +16699,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"de-indent@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "de-indent@npm:1.0.2"
-  checksum: 10c0/7058ce58abd6dfc123dd204e36be3797abd419b59482a634605420f47ae97639d0c183ec5d1b904f308a01033f473673897afc2bd59bc620ebf1658763ef4291
-  languageName: node
-  linkType: hard
-
 "debug@npm:2.6.9, debug@npm:^2.1.3, debug@npm:^2.2.0, debug@npm:^2.6.8":
   version: 2.6.9
   resolution: "debug@npm:2.6.9"
@@ -34199,24 +34142,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue-component-meta@npm:^2.0.0":
-  version: 2.2.12
-  resolution: "vue-component-meta@npm:2.2.12"
+"vue-component-meta@npm:^3.2.7":
+  version: 3.3.2
+  resolution: "vue-component-meta@npm:3.3.2"
   dependencies:
-    "@volar/typescript": "npm:2.4.15"
-    "@vue/language-core": "npm:2.2.12"
+    "@volar/typescript": "npm:2.4.28"
+    "@vue/language-core": "npm:3.3.2"
     path-browserify: "npm:^1.0.1"
-    vue-component-type-helpers: "npm:2.2.12"
   peerDependencies:
     typescript: "*"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/2171fa5618b7799ac440ffcbce0a103181a1562d529ed6090304e290808d0c544cce08d7d8c82b68d32b5e9de5dce28e1e47bd931c0eb849261f23dfc5754150
+  checksum: 10c0/d78dd5c19474605e96812b6a81987c4163de29a704c3dc3ae7aaf627e9533af4e0af0db6323e0295e46d98c2146abb21912428e6f27c11051ef5876573f21d3d
   languageName: node
   linkType: hard
 
-"vue-component-type-helpers@npm:2.2.12, vue-component-type-helpers@npm:^2.0.0":
+"vue-component-type-helpers@npm:^2.0.0":
   version: 2.2.12
   resolution: "vue-component-type-helpers@npm:2.2.12"
   checksum: 10c0/ce15a2cdec4a57262a292ac1565aa18da9be73f3dfbcf28758a8a541199944bfff1aefb75802d6de5d955a5529c9667f1b651c659d14815c075e8965ac05175d