diff --git a/MIGRATION.md b/MIGRATION.md
index 06dac6694ebb..f55ad50607c8 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -44,6 +44,7 @@
     - [`Story` type deprecated](#story-type-deprecated)
     - [`ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are deprecated](#componentstory-componentstoryobj-componentstoryfn-and-componentmeta-types-are-deprecated)
     - [Renamed `renderToDOM` to `renderToCanvas`](#renamed-rendertodom-to-rendertoroot)
+    - [Renamed `XFramework` to `XRenderer`](#renamed-xframework-to-xrenderer)
 - [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
   - [Vue 3 upgrade](#vue-3-upgrade)
   - [React18 new root API](#react18-new-root-api)
@@ -841,6 +842,28 @@ CSF2Story.args = { label: 'Label' };
 
 The "rendering" function that renderers (ex-frameworks) must export (`renderToDOM`) has been renamed to `renderToCanvas` to acknowledge that some consumers of frameworks/the preview do not work with DOM elements.
 
+#### Renamed `XFramework` to `XRenderer`
+
+In 6.x you could import XFramework types:
+
+```ts
+import type { ReactFramework } from '@storybook/react';
+import type { VueFramework } from '@storybook/vue';
+import type { SvelteFramework } from '@storybook/svelte';
+
+// etc.
+```
+
+Those are deprecated in 7.0 as they are renamed to:
+
+```ts
+import type { ReactRenderer } from '@storybook/react';
+import type { VueRenderer } from '@storybook/vue';
+import type { SvelteRenderer } from '@storybook/svelte';
+
+// etc.
+```
+
 ## From version 6.4.x to 6.5.0
 
 ### Vue 3 upgrade
diff --git a/code/addons/actions/src/addArgsHelpers.ts b/code/addons/actions/src/addArgsHelpers.ts
index 6a91c6e1ddef..530cb76c0621 100644
--- a/code/addons/actions/src/addArgsHelpers.ts
+++ b/code/addons/actions/src/addArgsHelpers.ts
@@ -1,4 +1,4 @@
-import type { Args, Framework, ArgsEnhancer } from '@storybook/types';
+import type { Args, Renderer, ArgsEnhancer } from '@storybook/types';
 import { action } from './runtime/action';
 
 // interface ActionsParameter {
@@ -14,7 +14,7 @@ const isInInitialArgs = (name: string, initialArgs: Args) =>
  * matches a regex, such as `^on.*` for react-style `onClick` etc.
  */
 
-export const inferActionsFromArgTypesRegex: ArgsEnhancer<Framework> = (context) => {
+export const inferActionsFromArgTypesRegex: ArgsEnhancer<Renderer> = (context) => {
   const {
     initialArgs,
     argTypes,
@@ -40,7 +40,7 @@ export const inferActionsFromArgTypesRegex: ArgsEnhancer<Framework> = (context)
 /**
  * Add action args for list of strings.
  */
-export const addActionsFromArgTypes: ArgsEnhancer<Framework> = (context) => {
+export const addActionsFromArgTypes: ArgsEnhancer<Renderer> = (context) => {
   const {
     initialArgs,
     argTypes,
diff --git a/code/addons/backgrounds/src/decorators/withBackground.ts b/code/addons/backgrounds/src/decorators/withBackground.ts
index 49500b8a7c12..309c6a8f7599 100644
--- a/code/addons/backgrounds/src/decorators/withBackground.ts
+++ b/code/addons/backgrounds/src/decorators/withBackground.ts
@@ -1,5 +1,5 @@
 import { useMemo, useEffect } from '@storybook/addons';
-import type { Framework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
+import type { Renderer, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
 
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 import {
@@ -10,8 +10,8 @@ import {
 } from '../helpers';
 
 export const withBackground = (
-  StoryFn: StoryFunction<Framework>,
-  context: StoryContext<Framework>
+  StoryFn: StoryFunction<Renderer>,
+  context: StoryContext<Renderer>
 ) => {
   const { globals, parameters } = context;
   const globalsBackgroundColor = globals[BACKGROUNDS_PARAM_KEY]?.value;
diff --git a/code/addons/backgrounds/src/decorators/withGrid.ts b/code/addons/backgrounds/src/decorators/withGrid.ts
index 8e129dcf5af9..3647dd2f4cad 100644
--- a/code/addons/backgrounds/src/decorators/withGrid.ts
+++ b/code/addons/backgrounds/src/decorators/withGrid.ts
@@ -1,10 +1,10 @@
 import { useMemo, useEffect } from '@storybook/addons';
-import type { Framework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
+import type { Renderer, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
 
 import { clearStyles, addGridStyle } from '../helpers';
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 
-export const withGrid = (StoryFn: StoryFunction<Framework>, context: StoryContext<Framework>) => {
+export const withGrid = (StoryFn: StoryFunction<Renderer>, context: StoryContext<Renderer>) => {
   const { globals, parameters } = context;
   const gridParameters = parameters[BACKGROUNDS_PARAM_KEY].grid;
   const isActive = globals[BACKGROUNDS_PARAM_KEY]?.grid === true && gridParameters.disable !== true;
diff --git a/code/addons/docs/src/DocsRenderer.tsx b/code/addons/docs/src/DocsRenderer.tsx
index 7da390037fc1..b1c6a6391a16 100644
--- a/code/addons/docs/src/DocsRenderer.tsx
+++ b/code/addons/docs/src/DocsRenderer.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import type { Framework, Parameters } from '@storybook/types';
+import type { Renderer, Parameters } from '@storybook/types';
 import type { DocsContextProps, DocsRenderFunction } from '@storybook/preview-web';
 import { components as htmlComponents } from '@storybook/components';
 import { Docs, CodeOrSourceMdx, AnchorMdx, HeadersMdx } from '@storybook/blocks';
@@ -14,14 +14,14 @@ export const defaultComponents: Record<string, any> = {
   ...HeadersMdx,
 };
 
-export class DocsRenderer<TFramework extends Framework> {
-  public render: DocsRenderFunction<TFramework>;
+export class DocsRenderer<TRenderer extends Renderer> {
+  public render: DocsRenderFunction<TRenderer>;
 
   public unmount: (element: HTMLElement) => void;
 
   constructor() {
     this.render = (
-      context: DocsContextProps<TFramework>,
+      context: DocsContextProps<TRenderer>,
       docsParameter: Parameters,
       element: HTMLElement,
       callback: () => void
diff --git a/code/addons/interactions/src/preview.ts b/code/addons/interactions/src/preview.ts
index d36c4bbf4f55..b4f094b7b986 100644
--- a/code/addons/interactions/src/preview.ts
+++ b/code/addons/interactions/src/preview.ts
@@ -3,7 +3,7 @@
 import { addons } from '@storybook/addons';
 import { FORCE_REMOUNT, STORY_RENDER_PHASE_CHANGED } from '@storybook/core-events';
 import type {
-  Framework,
+  Renderer,
   ArgsEnhancer,
   PlayFunction,
   PlayFunctionContext,
@@ -52,7 +52,7 @@ const addSpies = (id: string, val: any, key?: string): any => {
   return val;
 };
 
-const addActionsFromArgTypes: ArgsEnhancer<Framework> = ({ id, initialArgs }) =>
+const addActionsFromArgTypes: ArgsEnhancer<Renderer> = ({ id, initialArgs }) =>
   addSpies(id, initialArgs);
 
 export const argsEnhancers = [addActionsFromArgTypes];
diff --git a/code/addons/links/package.json b/code/addons/links/package.json
index 90887ef5dc1c..d9addd073bac 100644
--- a/code/addons/links/package.json
+++ b/code/addons/links/package.json
@@ -79,7 +79,7 @@
     "@storybook/addons": "7.0.0-alpha.49",
     "@storybook/client-logger": "7.0.0-alpha.49",
     "@storybook/core-events": "7.0.0-alpha.49",
-    "@storybook/csf": "next",
+    "@storybook/csf": "0.0.2-next.5",
     "@storybook/router": "7.0.0-alpha.49",
     "@storybook/types": "7.0.0-alpha.49",
     "global": "^4.4.0",
diff --git a/code/addons/measure/src/withMeasure.ts b/code/addons/measure/src/withMeasure.ts
index e0a0fa1a101b..4dea5601dc7a 100644
--- a/code/addons/measure/src/withMeasure.ts
+++ b/code/addons/measure/src/withMeasure.ts
@@ -1,6 +1,6 @@
 /* eslint-env browser */
 import { useEffect } from '@storybook/addons';
-import type { Framework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
+import type { Renderer, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
 import { drawSelectedElement } from './box-model/visualizer';
 import { init, rescale, destroy } from './box-model/canvas';
 import { deepElementFromPoint } from './util';
@@ -13,10 +13,7 @@ function findAndDrawElement(x: number, y: number) {
   drawSelectedElement(nodeAtPointerRef);
 }
 
-export const withMeasure = (
-  StoryFn: StoryFunction<Framework>,
-  context: StoryContext<Framework>
-) => {
+export const withMeasure = (StoryFn: StoryFunction<Renderer>, context: StoryContext<Renderer>) => {
   const { measureEnabled } = context.globals;
 
   useEffect(() => {
diff --git a/code/addons/outline/src/withOutline.ts b/code/addons/outline/src/withOutline.ts
index 1fc20affb60d..455d84ae945a 100644
--- a/code/addons/outline/src/withOutline.ts
+++ b/code/addons/outline/src/withOutline.ts
@@ -1,14 +1,11 @@
 import { useMemo, useEffect } from '@storybook/addons';
-import type { Framework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
+import type { Renderer, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';
 
 import { clearStyles, addOutlineStyles } from './helpers';
 import { PARAM_KEY } from './constants';
 import outlineCSS from './outlineCSS';
 
-export const withOutline = (
-  StoryFn: StoryFunction<Framework>,
-  context: StoryContext<Framework>
-) => {
+export const withOutline = (StoryFn: StoryFunction<Renderer>, context: StoryContext<Renderer>) => {
   const { globals } = context;
   const isActive = globals[PARAM_KEY] === true;
   const isInDocs = context.viewMode === 'docs';
diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/Loader.ts b/code/addons/storyshots/storyshots-core/src/frameworks/Loader.ts
index c844fe11973d..80b863c51102 100644
--- a/code/addons/storyshots/storyshots-core/src/frameworks/Loader.ts
+++ b/code/addons/storyshots/storyshots-core/src/frameworks/Loader.ts
@@ -1,11 +1,11 @@
-import type { Framework, Addon_Loadable } from '@storybook/types';
+import type { Renderer, Addon_Loadable } from '@storybook/types';
 import type { ClientApi as ClientApiClass } from '@storybook/client-api';
 import type { StoryshotsOptions } from '../api/StoryshotsOptions';
 import type { SupportedFramework } from './SupportedFramework';
 
 export type RenderTree = (story: any, context?: any, options?: any) => any;
 
-export interface ClientApi<TFramework extends Framework> extends ClientApiClass<Framework> {
+export interface ClientApi<TRenderer extends Renderer> extends ClientApiClass<Renderer> {
   configure(
     loader: Addon_Loadable,
     module: NodeModule | false,
@@ -19,7 +19,7 @@ export interface Loader {
     framework: SupportedFramework;
     renderTree: RenderTree;
     renderShallowTree: any;
-    storybook: ClientApi<Framework>;
+    storybook: ClientApi<Renderer>;
   };
   test: (options: StoryshotsOptions) => boolean;
 }
diff --git a/code/addons/storyshots/storyshots-core/src/frameworks/configure.ts b/code/addons/storyshots/storyshots-core/src/frameworks/configure.ts
index 25c03f8622e8..aafc21c96f6c 100644
--- a/code/addons/storyshots/storyshots-core/src/frameworks/configure.ts
+++ b/code/addons/storyshots/storyshots-core/src/frameworks/configure.ts
@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import type {
-  Framework,
+  Renderer,
   ArgsEnhancer,
   ArgTypesEnhancer,
   CoreCommon_NormalizedStoriesSpecifier,
@@ -87,9 +87,9 @@ function getConfigPathParts(input: string): Output {
   return { preview: configDir };
 }
 
-function configure<TFramework extends Framework>(
+function configure<TRenderer extends Renderer>(
   options: {
-    storybook: ClientApi<TFramework>;
+    storybook: ClientApi<TRenderer>;
   } & StoryshotsOptions
 ): void {
   const { configPath = '.storybook', config, storybook } = options;
@@ -125,7 +125,7 @@ function configure<TFramework extends Framework>(
     } = jest.requireActual(preview);
 
     if (decorators) {
-      decorators.forEach((decorator: DecoratorFunction<TFramework>) =>
+      decorators.forEach((decorator: DecoratorFunction<TRenderer>) =>
         storybook.addDecorator(decorator)
       );
     }
@@ -136,12 +136,12 @@ function configure<TFramework extends Framework>(
       storybook.addStepRunner(runStep);
     }
     if (argsEnhancers) {
-      argsEnhancers.forEach((enhancer: ArgsEnhancer<TFramework>) =>
+      argsEnhancers.forEach((enhancer: ArgsEnhancer<TRenderer>) =>
         storybook.addArgsEnhancer(enhancer as any)
       );
     }
     if (argTypesEnhancers) {
-      argTypesEnhancers.forEach((enhancer: ArgTypesEnhancer<TFramework>) =>
+      argTypesEnhancers.forEach((enhancer: ArgTypesEnhancer<TRenderer>) =>
         storybook.addArgTypesEnhancer(enhancer as any)
       );
     }
diff --git a/code/addons/storyshots/storyshots-puppeteer/package.json b/code/addons/storyshots/storyshots-puppeteer/package.json
index 36818bc00c61..424c69a28e85 100644
--- a/code/addons/storyshots/storyshots-puppeteer/package.json
+++ b/code/addons/storyshots/storyshots-puppeteer/package.json
@@ -34,7 +34,7 @@
   },
   "dependencies": {
     "@axe-core/puppeteer": "^4.2.0",
-    "@storybook/csf": "next",
+    "@storybook/csf": "0.0.2-next.5",
     "@storybook/node-logger": "7.0.0-alpha.49",
     "@storybook/types": "7.0.0-alpha.49",
     "@types/jest-image-snapshot": "^4.1.3",
diff --git a/code/frameworks/angular/src/client/angular/helpers.ts b/code/frameworks/angular/src/client/angular/helpers.ts
index ce0c1fcd9f1c..10ce71718090 100644
--- a/code/frameworks/angular/src/client/angular/helpers.ts
+++ b/code/frameworks/angular/src/client/angular/helpers.ts
@@ -7,7 +7,7 @@ import { Subscriber, Observable, ReplaySubject } from 'rxjs';
 import { PartialStoryFn } from '@storybook/types';
 import { AppComponent } from './app.component';
 import { STORY } from './app.token';
-import { NgModuleMetadata, StoryFnAngularReturnType, AngularFramework } from '../types';
+import { NgModuleMetadata, StoryFnAngularReturnType, AngularRenderer } from '../types';
 
 const { document } = global;
 
@@ -131,7 +131,7 @@ const getExistenceOfComponentInModules = (
   });
 };
 
-const initModule = (storyFn: PartialStoryFn<AngularFramework>) => {
+const initModule = (storyFn: PartialStoryFn<AngularRenderer>) => {
   const storyObj = storyFn();
   const { component, template, props, styles, moduleMetadata = {} } = storyObj;
 
@@ -198,7 +198,7 @@ const draw = (newModule: DynamicComponentType): void => {
   }
 };
 
-export const renderNgApp = (storyFn: PartialStoryFn<AngularFramework>, forced: boolean) => {
+export const renderNgApp = (storyFn: PartialStoryFn<AngularRenderer>, forced: boolean) => {
   if (!forced) {
     draw(initModule(storyFn));
   } else {
diff --git a/code/frameworks/angular/src/client/decorateStory.test.ts b/code/frameworks/angular/src/client/decorateStory.test.ts
index 646f56398c80..bf5d7b6dd5bb 100644
--- a/code/frameworks/angular/src/client/decorateStory.test.ts
+++ b/code/frameworks/angular/src/client/decorateStory.test.ts
@@ -3,12 +3,12 @@ import { DecoratorFunction, StoryContext } from '@storybook/types';
 import { componentWrapperDecorator } from './decorators';
 
 import decorateStory from './decorateStory';
-import { AngularFramework } from './types';
+import { AngularRenderer } from './types';
 
 describe('decorateStory', () => {
   describe('angular behavior', () => {
     it('should use componentWrapperDecorator with args', () => {
-      const decorators: DecoratorFunction<AngularFramework>[] = [
+      const decorators: DecoratorFunction<AngularRenderer>[] = [
         componentWrapperDecorator(ParentComponent, ({ args }) => args),
         componentWrapperDecorator(
           (story) => `<grandparent [grandparentInput]="grandparentInput">${story}</grandparent>`,
@@ -42,7 +42,7 @@ describe('decorateStory', () => {
     });
 
     it('should use componentWrapperDecorator with input / output', () => {
-      const decorators: DecoratorFunction<AngularFramework>[] = [
+      const decorators: DecoratorFunction<AngularRenderer>[] = [
         componentWrapperDecorator(ParentComponent, {
           parentInput: 'Parent input',
           parentOutput: () => {},
@@ -81,7 +81,7 @@ describe('decorateStory', () => {
     });
 
     it('should use componentWrapperDecorator', () => {
-      const decorators: DecoratorFunction<AngularFramework>[] = [
+      const decorators: DecoratorFunction<AngularRenderer>[] = [
         componentWrapperDecorator(ParentComponent),
         componentWrapperDecorator((story) => `<grandparent>${story}</grandparent>`),
         componentWrapperDecorator((story) => `<great-grandparent>${story}</great-grandparent>`),
@@ -96,7 +96,7 @@ describe('decorateStory', () => {
     });
 
     it('should use template in preference to component parameters', () => {
-      const decorators: DecoratorFunction<AngularFramework>[] = [
+      const decorators: DecoratorFunction<AngularRenderer>[] = [
         (s) => {
           const story = s();
           return {
@@ -129,7 +129,7 @@ describe('decorateStory', () => {
     });
 
     it('should include story templates in decorators', () => {
-      const decorators: DecoratorFunction<AngularFramework>[] = [
+      const decorators: DecoratorFunction<AngularRenderer>[] = [
         (s) => {
           const story = s();
           return {
@@ -162,7 +162,7 @@ describe('decorateStory', () => {
     });
 
     it('should include story components in decorators', () => {
-      const decorators: DecoratorFunction<AngularFramework>[] = [
+      const decorators: DecoratorFunction<AngularRenderer>[] = [
         (s) => {
           const story = s();
           return {
@@ -195,7 +195,7 @@ describe('decorateStory', () => {
     });
 
     it('should include legacy story components in decorators', () => {
-      const decorators: DecoratorFunction<AngularFramework>[] = [
+      const decorators: DecoratorFunction<AngularRenderer>[] = [
         (s) => {
           const story = s();
           return {
@@ -229,7 +229,7 @@ describe('decorateStory', () => {
     });
 
     it('should keep template with an empty value', () => {
-      const decorators: DecoratorFunction<AngularFramework>[] = [
+      const decorators: DecoratorFunction<AngularRenderer>[] = [
         componentWrapperDecorator(ParentComponent),
       ];
       const decorated = decorateStory(() => ({ template: '' }), decorators);
@@ -272,7 +272,7 @@ describe('decorateStory', () => {
 
   describe('default behavior', () => {
     it('calls decorators in out to in order', () => {
-      const decorators: DecoratorFunction<AngularFramework>[] = [
+      const decorators: DecoratorFunction<AngularRenderer>[] = [
         (s) => {
           const story = s();
           return { ...story, props: { a: [...story.props.a, 1] } };
@@ -292,7 +292,7 @@ describe('decorateStory', () => {
     });
 
     it('passes context through to sub decorators', () => {
-      const decorators: DecoratorFunction<AngularFramework>[] = [
+      const decorators: DecoratorFunction<AngularRenderer>[] = [
         (s, c) => {
           const story = s({ ...c, k: 1 });
           return { ...story, props: { a: [...story.props.a, c.k] } };
@@ -312,7 +312,7 @@ describe('decorateStory', () => {
     });
 
     it('DOES NOT merge parameter or pass through parameters key in context', () => {
-      const decorators: DecoratorFunction<AngularFramework>[] = [
+      const decorators: DecoratorFunction<AngularRenderer>[] = [
         (s, c) => {
           const story = s({ ...c, k: 1, parameters: { p: 1 } });
           return {
@@ -347,7 +347,7 @@ describe('decorateStory', () => {
   });
 });
 
-function makeContext(input: Record<string, unknown>): StoryContext<AngularFramework> {
+function makeContext(input: Record<string, unknown>): StoryContext<AngularRenderer> {
   return {
     id: 'id',
     kind: 'kind',
@@ -355,7 +355,7 @@ function makeContext(input: Record<string, unknown>): StoryContext<AngularFramew
     viewMode: 'story',
     parameters: {},
     ...input,
-  } as StoryContext<AngularFramework>;
+  } as StoryContext<AngularRenderer>;
 }
 
 @Component({
diff --git a/code/frameworks/angular/src/client/decorateStory.ts b/code/frameworks/angular/src/client/decorateStory.ts
index a7816084f232..2b3daf651371 100644
--- a/code/frameworks/angular/src/client/decorateStory.ts
+++ b/code/frameworks/angular/src/client/decorateStory.ts
@@ -2,15 +2,15 @@ import { DecoratorFunction, LegacyStoryFn, StoryContext } from '@storybook/types
 import { sanitizeStoryContextUpdate } from '@storybook/store';
 import { computesTemplateFromComponent } from './angular-beta/ComputesTemplateFromComponent';
 
-import { AngularFramework } from './types';
+import { AngularRenderer } from './types';
 
 export default function decorateStory(
-  mainStoryFn: LegacyStoryFn<AngularFramework>,
-  decorators: DecoratorFunction<AngularFramework>[]
-): LegacyStoryFn<AngularFramework> {
+  mainStoryFn: LegacyStoryFn<AngularRenderer>,
+  decorators: DecoratorFunction<AngularRenderer>[]
+): LegacyStoryFn<AngularRenderer> {
   const returnDecorators = [cleanArgsDecorator, ...decorators].reduce(
-    (previousStoryFn: LegacyStoryFn<AngularFramework>, decorator) =>
-      (context: StoryContext<AngularFramework>) => {
+    (previousStoryFn: LegacyStoryFn<AngularRenderer>, decorator) =>
+      (context: StoryContext<AngularRenderer>) => {
         const decoratedStory = decorator((update) => {
           return previousStoryFn({
             ...context,
@@ -29,9 +29,9 @@ export default function decorateStory(
 export { decorateStory };
 
 const prepareMain = (
-  story: AngularFramework['storyResult'],
-  context: StoryContext<AngularFramework>
-): AngularFramework['storyResult'] => {
+  story: AngularRenderer['storyResult'],
+  context: StoryContext<AngularRenderer>
+): AngularRenderer['storyResult'] => {
   let { template } = story;
 
   const component = story.component ?? context.component;
@@ -50,7 +50,7 @@ function hasNoTemplate(template: string | null | undefined): template is undefin
   return template === null || template === undefined;
 }
 
-const cleanArgsDecorator: DecoratorFunction<AngularFramework> = (storyFn, context) => {
+const cleanArgsDecorator: DecoratorFunction<AngularRenderer> = (storyFn, context) => {
   if (!context.argTypes || !context.args) {
     return storyFn();
   }
diff --git a/code/frameworks/angular/src/client/decorators.test.ts b/code/frameworks/angular/src/client/decorators.test.ts
index 3f7651051f2a..8ed4e347c55a 100644
--- a/code/frameworks/angular/src/client/decorators.test.ts
+++ b/code/frameworks/angular/src/client/decorators.test.ts
@@ -2,9 +2,9 @@ import { Addon_StoryContext } from '@storybook/types';
 
 import { Component } from '@angular/core';
 import { moduleMetadata } from './decorators';
-import { AngularFramework } from './types';
+import { AngularRenderer } from './types';
 
-const defaultContext: Addon_StoryContext<AngularFramework> = {
+const defaultContext: Addon_StoryContext<AngularRenderer> = {
   componentId: 'unspecified',
   kind: 'unspecified',
   title: 'unspecified',
diff --git a/code/frameworks/angular/src/client/decorators.ts b/code/frameworks/angular/src/client/decorators.ts
index 9e5a59ca04e6..b34b416e71a2 100644
--- a/code/frameworks/angular/src/client/decorators.ts
+++ b/code/frameworks/angular/src/client/decorators.ts
@@ -3,12 +3,12 @@ import { Type } from '@angular/core';
 import { DecoratorFunction, StoryContext } from '@storybook/types';
 import { computesTemplateFromComponent } from './angular-beta/ComputesTemplateFromComponent';
 import { isComponent } from './angular-beta/utils/NgComponentAnalyzer';
-import { ICollection, NgModuleMetadata, AngularFramework } from './types';
+import { ICollection, NgModuleMetadata, AngularRenderer } from './types';
 
 // We use `any` here as the default type rather than `Args` because we need something that is
 // castable to any component-specific args type when the user is being careful.
 export const moduleMetadata =
-  <TArgs = any>(metadata: Partial<NgModuleMetadata>): DecoratorFunction<AngularFramework, TArgs> =>
+  <TArgs = any>(metadata: Partial<NgModuleMetadata>): DecoratorFunction<AngularRenderer, TArgs> =>
   (storyFn) => {
     const story = storyFn();
     const storyMetadata = story.moduleMetadata || {};
@@ -32,8 +32,8 @@ export const moduleMetadata =
 export const componentWrapperDecorator =
   <TArgs = any>(
     element: Type<unknown> | ((story: string) => string),
-    props?: ICollection | ((storyContext: StoryContext<AngularFramework, TArgs>) => ICollection)
-  ): DecoratorFunction<AngularFramework, TArgs> =>
+    props?: ICollection | ((storyContext: StoryContext<AngularRenderer, TArgs>) => ICollection)
+  ): DecoratorFunction<AngularRenderer, TArgs> =>
   (storyFn, storyContext) => {
     const story = storyFn();
     const currentProps = typeof props === 'function' ? (props(storyContext) as ICollection) : props;
diff --git a/code/frameworks/angular/src/client/docs/sourceDecorator.ts b/code/frameworks/angular/src/client/docs/sourceDecorator.ts
index 605112b11b24..7769aa6968aa 100644
--- a/code/frameworks/angular/src/client/docs/sourceDecorator.ts
+++ b/code/frameworks/angular/src/client/docs/sourceDecorator.ts
@@ -1,7 +1,7 @@
 import { addons, useEffect } from '@storybook/addons';
 import { PartialStoryFn } from '@storybook/types';
 import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
-import { StoryContext, AngularFramework } from '../types';
+import { StoryContext, AngularRenderer } from '../types';
 import { computesTemplateSourceFromComponent } from '../../renderer';
 
 export const skipSourceRender = (context: StoryContext) => {
@@ -22,7 +22,7 @@ export const skipSourceRender = (context: StoryContext) => {
  * @param context  StoryContext
  */
 export const sourceDecorator = (
-  storyFn: PartialStoryFn<AngularFramework>,
+  storyFn: PartialStoryFn<AngularRenderer>,
   context: StoryContext
 ) => {
   const story = storyFn();
diff --git a/code/frameworks/angular/src/client/public-api.ts b/code/frameworks/angular/src/client/public-api.ts
index 31c4c273420f..031b5cafccd8 100644
--- a/code/frameworks/angular/src/client/public-api.ts
+++ b/code/frameworks/angular/src/client/public-api.ts
@@ -3,13 +3,13 @@ import { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
 import { start } from '@storybook/core-client';
 import { renderToCanvas, render } from './render';
 import decorateStory from './decorateStory';
-import { AngularFramework } from './types';
+import { AngularRenderer } from './types';
 
 export * from './public-types';
 
 const FRAMEWORK = 'angular';
 
-interface ClientApi extends Addon_ClientStoryApi<AngularFramework['storyResult']> {
+interface ClientApi extends Addon_ClientStoryApi<AngularRenderer['storyResult']> {
   configure(loader: Addon_Loadable, module: NodeModule): void;
   forceReRender(): void;
   raw: () => any; // todo add type
diff --git a/code/frameworks/angular/src/client/public-types.ts b/code/frameworks/angular/src/client/public-types.ts
index da446898d293..6f14ba796071 100644
--- a/code/frameworks/angular/src/client/public-types.ts
+++ b/code/frameworks/angular/src/client/public-types.ts
@@ -1,5 +1,5 @@
 import { AnnotatedStoryFn, Args, ComponentAnnotations, StoryAnnotations } from '@storybook/types';
-import { AngularFramework } from './types';
+import { AngularRenderer } from './types';
 
 export type { Args, ArgTypes } from '@storybook/types';
 
@@ -8,21 +8,21 @@ export type { Args, ArgTypes } from '@storybook/types';
  *
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
-export type Meta<TArgs = Args> = ComponentAnnotations<AngularFramework, TArgs>;
+export type Meta<TArgs = Args> = ComponentAnnotations<AngularRenderer, TArgs>;
 
 /**
  * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryFn<TArgs = Args> = AnnotatedStoryFn<AngularFramework, TArgs>;
+export type StoryFn<TArgs = Args> = AnnotatedStoryFn<AngularRenderer, TArgs>;
 
 /**
  * Story function that represents a CSFv3 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryObj<TArgs = Args> = StoryAnnotations<AngularFramework, TArgs>;
+export type StoryObj<TArgs = Args> = StoryAnnotations<AngularRenderer, TArgs>;
 
 /**
  * @deprecated Use `StoryFn` instead.
diff --git a/code/frameworks/angular/src/client/render.ts b/code/frameworks/angular/src/client/render.ts
index 622fe0ed6e8f..f8d220d93c6f 100644
--- a/code/frameworks/angular/src/client/render.ts
+++ b/code/frameworks/angular/src/client/render.ts
@@ -1,13 +1,13 @@
 import { Store_RenderContext, ArgsStoryFn } from '@storybook/types';
 
 import { renderNgApp } from './angular/helpers';
-import { AngularFramework } from './types';
+import { AngularRenderer } from './types';
 
 import { RendererFactory } from './angular-beta/RendererFactory';
 
 export const rendererFactory = new RendererFactory();
 
-export const render: ArgsStoryFn<AngularFramework> = (props) => ({ props });
+export const render: ArgsStoryFn<AngularRenderer> = (props) => ({ props });
 
 export async function renderToCanvas(
   {
@@ -16,7 +16,7 @@ export async function renderToCanvas(
     forceRemount,
     storyContext: { parameters, component },
     id,
-  }: Store_RenderContext<AngularFramework>,
+  }: Store_RenderContext<AngularRenderer>,
   element: HTMLElement
 ) {
   showMain();
diff --git a/code/frameworks/angular/src/client/types.ts b/code/frameworks/angular/src/client/types.ts
index 36ebabc89edd..14f41557d5d5 100644
--- a/code/frameworks/angular/src/client/types.ts
+++ b/code/frameworks/angular/src/client/types.ts
@@ -1,7 +1,7 @@
 import {
   Parameters as DefaultParameters,
   StoryContext as DefaultStoryContext,
-  WebFramework,
+  WebRenderer,
 } from '@storybook/types';
 
 export interface NgModuleMetadata {
@@ -27,7 +27,11 @@ export interface StoryFnAngularReturnType {
   userDefinedTemplate?: boolean;
 }
 
-export interface AngularFramework extends WebFramework {
+/**
+ * @deprecated Use `AngularRenderer` instead.
+ */
+export type AngularFramework = AngularRenderer;
+export interface AngularRenderer extends WebRenderer {
   component: any;
   storyResult: StoryFnAngularReturnType;
 }
@@ -38,4 +42,4 @@ export type Parameters = DefaultParameters & {
   bootstrapModuleOptions?: unknown;
 };
 
-export type StoryContext = DefaultStoryContext<AngularFramework> & { parameters: Parameters };
+export type StoryContext = DefaultStoryContext<AngularRenderer> & { parameters: Parameters };
diff --git a/code/frameworks/ember/src/client/preview/render.ts b/code/frameworks/ember/src/client/preview/render.ts
index 426eabcc2074..0f951bc1962a 100644
--- a/code/frameworks/ember/src/client/preview/render.ts
+++ b/code/frameworks/ember/src/client/preview/render.ts
@@ -3,7 +3,7 @@ import { dedent } from 'ts-dedent';
 import type { Store_RenderContext } from '@storybook/types';
 // @ts-expect-error (Converted from ts-ignore)
 import Component from '@ember/component'; // eslint-disable-line import/no-unresolved
-import type { OptionsArgs, EmberFramework } from './types';
+import type { OptionsArgs, EmberRenderer } from './types';
 
 const { window: globalWindow, document } = global;
 
@@ -20,7 +20,7 @@ let lastPromise = app.boot();
 let hasRendered = false;
 let isRendering = false;
 
-function render(options: OptionsArgs, el: EmberFramework['canvasElement']) {
+function render(options: OptionsArgs, el: EmberRenderer['canvasElement']) {
   if (isRendering) return;
   isRendering = true;
 
@@ -61,8 +61,8 @@ function render(options: OptionsArgs, el: EmberFramework['canvasElement']) {
 }
 
 export function renderToCanvas(
-  { storyFn, kind, name, showMain, showError }: Store_RenderContext<EmberFramework>,
-  canvasElement: EmberFramework['canvasElement']
+  { storyFn, kind, name, showMain, showError }: Store_RenderContext<EmberRenderer>,
+  canvasElement: EmberRenderer['canvasElement']
 ) {
   const element = storyFn();
 
diff --git a/code/frameworks/ember/src/client/preview/types.ts b/code/frameworks/ember/src/client/preview/types.ts
index e360063627ea..5df0b2632aa5 100644
--- a/code/frameworks/ember/src/client/preview/types.ts
+++ b/code/frameworks/ember/src/client/preview/types.ts
@@ -1,4 +1,4 @@
-import type { WebFramework } from '@storybook/types';
+import type { WebRenderer } from '@storybook/types';
 
 export type { RenderContext } from '@storybook/types';
 
@@ -13,7 +13,11 @@ export interface OptionsArgs {
   element: any;
 }
 
-export interface EmberFramework extends WebFramework {
+/**
+ * @deprecated Use `EmberRenderer` instead.
+ */
+export type EmberFramework = EmberRenderer;
+export interface EmberRenderer extends WebRenderer {
   component: any;
   storyResult: OptionsArgs;
 }
diff --git a/code/lib/addons/src/hooks.ts b/code/lib/addons/src/hooks.ts
index c456c219451b..55ec838f995f 100644
--- a/code/lib/addons/src/hooks.ts
+++ b/code/lib/addons/src/hooks.ts
@@ -1,7 +1,7 @@
 import global from 'global';
 import { logger } from '@storybook/client-logger';
 import type {
-  Framework,
+  Renderer,
   Args,
   DecoratorApplicator,
   DecoratorFunction,
@@ -32,7 +32,7 @@ interface Effect {
 
 type AbstractFunction = (...args: any[]) => any;
 
-export class HooksContext<TFramework extends Framework> {
+export class HooksContext<TRenderer extends Renderer> {
   hookListsMap: WeakMap<AbstractFunction, Hook[]>;
 
   mountedDecorators: Set<AbstractFunction>;
@@ -53,7 +53,7 @@ export class HooksContext<TFramework extends Framework> {
 
   hasUpdates: boolean;
 
-  currentContext: StoryContext<TFramework> | null;
+  currentContext: StoryContext<TRenderer> | null;
 
   renderListener = (storyId: StoryId) => {
     if (storyId !== this.currentContext.id) return;
@@ -126,15 +126,15 @@ export class HooksContext<TFramework extends Framework> {
   }
 }
 
-function hookify<TFramework extends Framework>(
-  storyFn: LegacyStoryFn<TFramework>
-): LegacyStoryFn<TFramework>;
-function hookify<TFramework extends Framework>(
-  decorator: DecoratorFunction<TFramework>
-): DecoratorFunction<TFramework>;
-function hookify<TFramework extends Framework>(fn: AbstractFunction) {
+function hookify<TRenderer extends Renderer>(
+  storyFn: LegacyStoryFn<TRenderer>
+): LegacyStoryFn<TRenderer>;
+function hookify<TRenderer extends Renderer>(
+  decorator: DecoratorFunction<TRenderer>
+): DecoratorFunction<TRenderer>;
+function hookify<TRenderer extends Renderer>(fn: AbstractFunction) {
   return (...args: any[]) => {
-    const { hooks }: { hooks: HooksContext<TFramework> } =
+    const { hooks }: { hooks: HooksContext<TRenderer> } =
       typeof args[0] === 'function' ? args[1] : args[0];
 
     const prevPhase = hooks.currentPhase;
@@ -177,16 +177,16 @@ function hookify<TFramework extends Framework>(fn: AbstractFunction) {
 let numberOfRenders = 0;
 const RENDER_LIMIT = 25;
 export const applyHooks =
-  <TFramework extends Framework>(
-    applyDecorators: DecoratorApplicator<TFramework>
-  ): DecoratorApplicator<TFramework> =>
-  (storyFn: LegacyStoryFn<TFramework>, decorators: DecoratorFunction<TFramework>[]) => {
+  <TRenderer extends Renderer>(
+    applyDecorators: DecoratorApplicator<TRenderer>
+  ): DecoratorApplicator<TRenderer> =>
+  (storyFn: LegacyStoryFn<TRenderer>, decorators: DecoratorFunction<TRenderer>[]) => {
     const decorated = applyDecorators(
       hookify(storyFn),
       decorators.map((decorator) => hookify(decorator))
     );
     return (context) => {
-      const { hooks } = context as { hooks: HooksContext<TFramework> };
+      const { hooks } = context as { hooks: HooksContext<TRenderer> };
       hooks.prevMountedDecorators = hooks.mountedDecorators;
       hooks.mountedDecorators = new Set([storyFn, ...decorators]);
       hooks.currentContext = context;
@@ -215,12 +215,12 @@ const areDepsEqual = (deps: any[], nextDeps: any[]) =>
 const invalidHooksError = () =>
   new Error('Storybook preview hooks can only be called inside decorators and story functions.');
 
-function getHooksContextOrNull<TFramework extends Framework>(): HooksContext<TFramework> | null {
+function getHooksContextOrNull<TRenderer extends Renderer>(): HooksContext<TRenderer> | null {
   return global.STORYBOOK_HOOKS_CONTEXT || null;
 }
 
-function getHooksContextOrThrow<TFramework extends Framework>(): HooksContext<TFramework> {
-  const hooks = getHooksContextOrNull<TFramework>();
+function getHooksContextOrThrow<TRenderer extends Renderer>(): HooksContext<TRenderer> {
+  const hooks = getHooksContextOrNull<TRenderer>();
   if (hooks == null) {
     throw invalidHooksError();
   }
@@ -404,7 +404,7 @@ export function useChannel(eventMap: EventMap, deps: any[] = []) {
 }
 
 /* Returns current story context */
-export function useStoryContext<TFramework extends Framework>(): StoryContext<TFramework> {
+export function useStoryContext<TRenderer extends Renderer>(): StoryContext<TRenderer> {
   const { currentContext } = getHooksContextOrThrow();
   if (currentContext == null) {
     throw invalidHooksError();
diff --git a/code/lib/api/package.json b/code/lib/api/package.json
index 17bbee9b2444..4fb733125ff1 100644
--- a/code/lib/api/package.json
+++ b/code/lib/api/package.json
@@ -48,7 +48,7 @@
     "@storybook/channels": "7.0.0-alpha.49",
     "@storybook/client-logger": "7.0.0-alpha.49",
     "@storybook/core-events": "7.0.0-alpha.49",
-    "@storybook/csf": "next",
+    "@storybook/csf": "0.0.2-next.5",
     "@storybook/router": "7.0.0-alpha.49",
     "@storybook/theming": "7.0.0-alpha.49",
     "@storybook/types": "7.0.0-alpha.49",
diff --git a/code/lib/cli/src/window.d.ts b/code/lib/cli/src/window.d.ts
index 0adbb33da3b6..7a5da303ea67 100644
--- a/code/lib/cli/src/window.d.ts
+++ b/code/lib/cli/src/window.d.ts
@@ -1,8 +1,8 @@
-import type { Framework } from '@storybook/types';
+import type { Renderer } from '@storybook/types';
 import type { StoryStore } from '@storybook/client-api';
 
 declare global {
   interface Window {
-    __STORYBOOK_STORY_STORE__: StoryStore<Framework>;
+    __STORYBOOK_STORY_STORE__: StoryStore<Renderer>;
   }
 }
diff --git a/code/lib/client-api/package.json b/code/lib/client-api/package.json
index b08d8634e771..8d85202539f5 100644
--- a/code/lib/client-api/package.json
+++ b/code/lib/client-api/package.json
@@ -44,7 +44,7 @@
   "dependencies": {
     "@storybook/addons": "7.0.0-alpha.49",
     "@storybook/client-logger": "7.0.0-alpha.49",
-    "@storybook/csf": "next",
+    "@storybook/csf": "0.0.2-next.5",
     "@storybook/store": "7.0.0-alpha.49",
     "@storybook/types": "7.0.0-alpha.49",
     "@types/qs": "^6.9.5",
diff --git a/code/lib/client-api/src/ClientApi.ts b/code/lib/client-api/src/ClientApi.ts
index b09c69a5ec6f..d0d61f76e177 100644
--- a/code/lib/client-api/src/ClientApi.ts
+++ b/code/lib/client-api/src/ClientApi.ts
@@ -8,7 +8,7 @@ import type {
   Args,
   StepRunner,
   ArgTypes,
-  Framework,
+  Renderer,
   DecoratorFunction,
   Parameters,
   ArgTypesEnhancer,
@@ -31,7 +31,7 @@ import { StoryStoreFacade } from './StoryStoreFacade';
 
 // ClientApi (and StoreStore) are really singletons. However they are not created until the
 // relevant framework instanciates them via `start.js`. The good news is this happens right away.
-let singleton: ClientApi<Framework>;
+let singleton: ClientApi<Renderer>;
 
 const warningAlternatives = {
   addDecorator: `Instead, use \`export const decorators = [];\` in your \`preview.js\`.`,
@@ -60,7 +60,7 @@ const checkMethod = (method: keyof typeof warningAlternatives) => {
   }
 };
 
-export const addDecorator = (decorator: DecoratorFunction<Framework>) => {
+export const addDecorator = (decorator: DecoratorFunction<Renderer>) => {
   checkMethod('addDecorator');
   singleton.addDecorator(decorator);
 };
@@ -70,7 +70,7 @@ export const addParameters = (parameters: Parameters) => {
   singleton.addParameters(parameters);
 };
 
-export const addLoader = (loader: LoaderFunction<Framework>) => {
+export const addLoader = (loader: LoaderFunction<Renderer>) => {
   checkMethod('addLoader');
   singleton.addLoader(loader);
 };
@@ -85,12 +85,12 @@ export const addArgTypes = (argTypes: ArgTypes) => {
   singleton.addArgTypes(argTypes);
 };
 
-export const addArgsEnhancer = (enhancer: ArgsEnhancer<Framework>) => {
+export const addArgsEnhancer = (enhancer: ArgsEnhancer<Renderer>) => {
   checkMethod('addArgsEnhancer');
   singleton.addArgsEnhancer(enhancer);
 };
 
-export const addArgTypesEnhancer = (enhancer: ArgTypesEnhancer<Framework>) => {
+export const addArgTypesEnhancer = (enhancer: ArgTypesEnhancer<Renderer>) => {
   checkMethod('addArgTypesEnhancer');
   singleton.addArgTypesEnhancer(enhancer);
 };
@@ -105,18 +105,18 @@ export const getGlobalRender = () => {
   return singleton.facade.projectAnnotations.render;
 };
 
-export const setGlobalRender = (render: StoryFn<Framework>) => {
+export const setGlobalRender = (render: StoryFn<Renderer>) => {
   checkMethod('setGlobalRender');
   singleton.facade.projectAnnotations.render = render;
 };
 
 const invalidStoryTypes = new Set(['string', 'number', 'boolean', 'symbol']);
-export class ClientApi<TFramework extends Framework> {
-  facade: StoryStoreFacade<TFramework>;
+export class ClientApi<TRenderer extends Renderer> {
+  facade: StoryStoreFacade<TRenderer>;
 
-  storyStore?: StoryStore<TFramework>;
+  storyStore?: StoryStore<TRenderer>;
 
-  private addons: Addon_ClientApiAddons<TFramework['storyResult']>;
+  private addons: Addon_ClientApiAddons<TRenderer['storyResult']>;
 
   onImportFnChanged?: ({ importFn }: { importFn: Store_ModuleImportFn }) => void;
 
@@ -124,7 +124,7 @@ export class ClientApi<TFramework extends Framework> {
   // just use numeric indexes
   private lastFileName = 0;
 
-  constructor({ storyStore }: { storyStore?: StoryStore<TFramework> } = {}) {
+  constructor({ storyStore }: { storyStore?: StoryStore<TRenderer> } = {}) {
     this.facade = new StoryStoreFacade();
 
     this.addons = {};
@@ -146,7 +146,7 @@ export class ClientApi<TFramework extends Framework> {
     return this.facade.getStoryIndex(this.storyStore);
   }
 
-  addDecorator = (decorator: DecoratorFunction<TFramework>) => {
+  addDecorator = (decorator: DecoratorFunction<TRenderer>) => {
     this.facade.projectAnnotations.decorators.push(decorator);
   };
 
@@ -179,7 +179,7 @@ export class ClientApi<TFramework extends Framework> {
     );
   };
 
-  addLoader = (loader: LoaderFunction<TFramework>) => {
+  addLoader = (loader: LoaderFunction<TRenderer>) => {
     this.facade.projectAnnotations.loaders.push(loader);
   };
 
@@ -197,11 +197,11 @@ export class ClientApi<TFramework extends Framework> {
     };
   };
 
-  addArgsEnhancer = (enhancer: ArgsEnhancer<TFramework>) => {
+  addArgsEnhancer = (enhancer: ArgsEnhancer<TRenderer>) => {
     this.facade.projectAnnotations.argsEnhancers.push(enhancer);
   };
 
-  addArgTypesEnhancer = (enhancer: ArgTypesEnhancer<TFramework>) => {
+  addArgTypesEnhancer = (enhancer: ArgTypesEnhancer<TRenderer>) => {
     this.facade.projectAnnotations.argTypesEnhancers.push(enhancer);
   };
 
@@ -219,7 +219,7 @@ export class ClientApi<TFramework extends Framework> {
   }
 
   // what are the occasions that "m" is a boolean vs an obj
-  storiesOf = (kind: string, m?: NodeModule): Addon_StoryApi<TFramework['storyResult']> => {
+  storiesOf = (kind: string, m?: NodeModule): Addon_StoryApi<TRenderer['storyResult']> => {
     if (!kind && typeof kind !== 'string') {
       throw new Error('Invalid or missing kind provided for stories, should be a string');
     }
@@ -275,7 +275,7 @@ export class ClientApi<TFramework extends Framework> {
     }
 
     let hasAdded = false;
-    const api: Addon_StoryApi<TFramework['storyResult']> = {
+    const api: Addon_StoryApi<TRenderer['storyResult']> = {
       kind: kind.toString(),
       add: () => api,
       addDecorator: () => api,
@@ -292,7 +292,7 @@ export class ClientApi<TFramework extends Framework> {
       };
     });
 
-    const meta: Store_NormalizedComponentAnnotations<TFramework> = {
+    const meta: Store_NormalizedComponentAnnotations<TRenderer> = {
       id: sanitize(kind),
       title: kind,
       decorators: [],
@@ -304,7 +304,7 @@ export class ClientApi<TFramework extends Framework> {
     this._addedExports[fileName] = { default: meta };
 
     let counter = 0;
-    api.add = (storyName: string, storyFn: StoryFn<TFramework>, parameters: Parameters = {}) => {
+    api.add = (storyName: string, storyFn: StoryFn<TRenderer>, parameters: Parameters = {}) => {
       hasAdded = true;
 
       if (typeof storyName !== 'string') {
@@ -340,7 +340,7 @@ export class ClientApi<TFramework extends Framework> {
       return api;
     };
 
-    api.addDecorator = (decorator: DecoratorFunction<TFramework>) => {
+    api.addDecorator = (decorator: DecoratorFunction<TRenderer>) => {
       if (hasAdded)
         throw new Error(`You cannot add a decorator after the first story for a kind.
 Read more here: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md#can-no-longer-add-decoratorsparameters-after-stories`);
@@ -349,7 +349,7 @@ Read more here: https://github.com/storybookjs/storybook/blob/master/MIGRATION.m
       return api;
     };
 
-    api.addLoader = (loader: LoaderFunction<TFramework>) => {
+    api.addLoader = (loader: LoaderFunction<TRenderer>) => {
       if (hasAdded) throw new Error(`You cannot add a loader after the first story for a kind.`);
 
       meta.loaders.push(loader);
diff --git a/code/lib/client-api/src/StoryStoreFacade.ts b/code/lib/client-api/src/StoryStoreFacade.ts
index a7a1d6c8f1c2..c62c8e2e6c6c 100644
--- a/code/lib/client-api/src/StoryStoreFacade.ts
+++ b/code/lib/client-api/src/StoryStoreFacade.ts
@@ -5,7 +5,7 @@ import { SynchronousPromise } from 'synchronous-promise';
 import { toId, isExportStory, storyNameFromExport } from '@storybook/csf';
 import type {
   Addon_IndexEntry,
-  Framework,
+  Renderer,
   ComponentId,
   DocsOptions,
   Parameters,
@@ -21,8 +21,8 @@ import type { StoryStore } from '@storybook/store';
 import { userOrAutoTitle, sortStoriesV6 } from '@storybook/store';
 import { logger } from '@storybook/client-logger';
 
-export class StoryStoreFacade<TFramework extends Framework> {
-  projectAnnotations: Store_NormalizedProjectAnnotations<TFramework>;
+export class StoryStoreFacade<TRenderer extends Renderer> {
+  projectAnnotations: Store_NormalizedProjectAnnotations<TRenderer>;
 
   entries: Record<StoryId, Addon_IndexEntry & { componentId?: ComponentId }>;
 
@@ -54,22 +54,22 @@ export class StoryStoreFacade<TFramework extends Framework> {
     });
   }
 
-  getStoryIndex(store: StoryStore<TFramework>) {
+  getStoryIndex(store: StoryStore<TRenderer>) {
     const fileNameOrder = Object.keys(this.csfExports);
     const storySortParameter = this.projectAnnotations.parameters?.options?.storySort;
 
     const storyEntries = Object.entries(this.entries);
     // Add the kind parameters and global parameters to each entry
-    const sortableV6: [StoryId, Store_Story<TFramework>, Parameters, Parameters][] =
+    const sortableV6: [StoryId, Store_Story<TRenderer>, Parameters, Parameters][] =
       storyEntries.map(([storyId, { type, importPath, ...entry }]) => {
         const exports = this.csfExports[importPath];
-        const csfFile = store.processCSFFileWithCache<TFramework>(
+        const csfFile = store.processCSFFileWithCache<TRenderer>(
           exports,
           importPath,
           exports.default.title
         );
 
-        let storyLike: Store_Story<TFramework>;
+        let storyLike: Store_Story<TRenderer>;
         if (type === 'story') {
           storyLike = store.storyFromCSFFile({ storyId, csfFile });
         } else {
diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json
index 35d83720c17a..277954cf4fb2 100644
--- a/code/lib/codemod/package.json
+++ b/code/lib/codemod/package.json
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@babel/types": "^7.12.11",
-    "@storybook/csf": "next",
+    "@storybook/csf": "0.0.2-next.5",
     "@storybook/csf-tools": "7.0.0-alpha.49",
     "@storybook/node-logger": "7.0.0-alpha.49",
     "@storybook/types": "7.0.0-alpha.49",
diff --git a/code/lib/core-client/package.json b/code/lib/core-client/package.json
index 62523b50f44b..98df76cace1a 100644
--- a/code/lib/core-client/package.json
+++ b/code/lib/core-client/package.json
@@ -42,7 +42,7 @@
     "@storybook/client-api": "7.0.0-alpha.49",
     "@storybook/client-logger": "7.0.0-alpha.49",
     "@storybook/core-events": "7.0.0-alpha.49",
-    "@storybook/csf": "next",
+    "@storybook/csf": "0.0.2-next.5",
     "@storybook/preview-web": "7.0.0-alpha.49",
     "@storybook/store": "7.0.0-alpha.49",
     "@storybook/types": "7.0.0-alpha.49",
diff --git a/code/lib/core-client/src/start.ts b/code/lib/core-client/src/start.ts
index 99e63c7203a3..9c7d69bb5cb1 100644
--- a/code/lib/core-client/src/start.ts
+++ b/code/lib/core-client/src/start.ts
@@ -2,7 +2,7 @@
 import global from 'global';
 import { ClientApi } from '@storybook/client-api';
 import { PreviewWeb } from '@storybook/preview-web';
-import type { Framework, ArgsStoryFn, Loadable, Path, ProjectAnnotations } from '@storybook/types';
+import type { Renderer, ArgsStoryFn, Loadable, Path, ProjectAnnotations } from '@storybook/types';
 import { createChannel } from '@storybook/channel-postmessage';
 import { addons } from '@storybook/addons';
 import { FORCE_RE_RENDER } from '@storybook/core-events';
@@ -15,9 +15,9 @@ const removedApi = (name: string) => () => {
   throw new Error(`@storybook/client-api:${name} was removed in storyStoreV7.`);
 };
 
-interface CoreClient_RendererImplementation<TFramework extends Framework> {
-  decorateStory?: ProjectAnnotations<TFramework>['applyDecorators'];
-  render?: ArgsStoryFn<TFramework>;
+interface CoreClient_RendererImplementation<TRenderer extends Renderer> {
+  decorateStory?: ProjectAnnotations<TRenderer>['applyDecorators'];
+  render?: ArgsStoryFn<TRenderer>;
 }
 
 interface CoreClient_ClientAPIFacade {
@@ -27,19 +27,19 @@ interface CoreClient_ClientAPIFacade {
   raw: (...args: any[]) => never;
 }
 
-interface CoreClient_StartReturnValue<TFramework extends Framework> {
+interface CoreClient_StartReturnValue<TRenderer extends Renderer> {
   /* deprecated */
   forceReRender: () => void;
   /* deprecated */
   configure: any;
   /* deprecated */
-  clientApi: ClientApi<TFramework> | CoreClient_ClientAPIFacade;
+  clientApi: ClientApi<TRenderer> | CoreClient_ClientAPIFacade;
 }
 
-export function start<TFramework extends Framework>(
-  renderToCanvas: ProjectAnnotations<TFramework>['renderToCanvas'],
-  { decorateStory, render }: CoreClient_RendererImplementation<TFramework> = {}
-): CoreClient_StartReturnValue<TFramework> {
+export function start<TRenderer extends Renderer>(
+  renderToCanvas: ProjectAnnotations<TRenderer>['renderToCanvas'],
+  { decorateStory, render }: CoreClient_RendererImplementation<TRenderer> = {}
+): CoreClient_StartReturnValue<TRenderer> {
   if (globalWindow) {
     // To enable user code to detect if it is running in Storybook
     globalWindow.IS_STORYBOOK = true;
@@ -59,8 +59,8 @@ export function start<TFramework extends Framework>(
   const channel = createChannel({ page: 'preview' });
   addons.setChannel(channel);
 
-  const clientApi = new ClientApi<TFramework>();
-  const preview = new PreviewWeb<TFramework>();
+  const clientApi = new ClientApi<TRenderer>();
+  const preview = new PreviewWeb<TRenderer>();
   let initialized = false;
 
   const importFn = (path: Path) => clientApi.importFn(path);
diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json
index a5b98d2b0d31..8584853295bb 100644
--- a/code/lib/core-server/package.json
+++ b/code/lib/core-server/package.json
@@ -39,7 +39,7 @@
     "@storybook/core-client": "7.0.0-alpha.49",
     "@storybook/core-common": "7.0.0-alpha.49",
     "@storybook/core-events": "7.0.0-alpha.49",
-    "@storybook/csf": "next",
+    "@storybook/csf": "0.0.2-next.5",
     "@storybook/csf-tools": "7.0.0-alpha.49",
     "@storybook/docs-mdx": "0.0.1-canary.12433cf.0",
     "@storybook/node-logger": "7.0.0-alpha.49",
diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json
index 07d78191e179..862ab1eb903c 100644
--- a/code/lib/csf-tools/package.json
+++ b/code/lib/csf-tools/package.json
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@babel/types": "^7.12.11",
-    "@storybook/csf": "next",
+    "@storybook/csf": "0.0.2-next.5",
     "@storybook/types": "7.0.0-alpha.49",
     "fs-extra": "^9.0.1",
     "ts-dedent": "^2.0.0"
diff --git a/code/lib/docs-tools/src/argTypes/enhanceArgTypes.ts b/code/lib/docs-tools/src/argTypes/enhanceArgTypes.ts
index f339c4d68b67..aa2d8c13e5c5 100644
--- a/code/lib/docs-tools/src/argTypes/enhanceArgTypes.ts
+++ b/code/lib/docs-tools/src/argTypes/enhanceArgTypes.ts
@@ -1,8 +1,8 @@
-import type { Framework, StoryContextForEnhancers } from '@storybook/types';
+import type { Renderer, StoryContextForEnhancers } from '@storybook/types';
 import { combineParameters } from '@storybook/store';
 
-export const enhanceArgTypes = <TFramework extends Framework>(
-  context: StoryContextForEnhancers<TFramework>
+export const enhanceArgTypes = <TRenderer extends Renderer>(
+  context: StoryContextForEnhancers<TRenderer>
 ) => {
   const {
     component,
diff --git a/code/lib/preview-web/src/Preview.tsx b/code/lib/preview-web/src/Preview.tsx
index d01e8169e4a5..75e0b564a647 100644
--- a/code/lib/preview-web/src/Preview.tsx
+++ b/code/lib/preview-web/src/Preview.tsx
@@ -17,7 +17,7 @@ import { logger, deprecate } from '@storybook/client-logger';
 import type { Channel } from '@storybook/channels';
 import { addons } from '@storybook/addons';
 import type {
-  Framework,
+  Renderer,
   Args,
   Globals,
   Store_ModuleImportFn,
@@ -41,7 +41,7 @@ const STORY_INDEX_PATH = './index.json';
 
 export type MaybePromise<T> = Promise<T> | T;
 
-export class Preview<TFramework extends Framework> {
+export class Preview<TFramework extends Renderer> {
   serverChannel?: Channel;
 
   storyStore: StoryStore<TFramework>;
diff --git a/code/lib/preview-web/src/PreviewWeb.test.ts b/code/lib/preview-web/src/PreviewWeb.test.ts
index b32229c319de..5b3cbc670646 100644
--- a/code/lib/preview-web/src/PreviewWeb.test.ts
+++ b/code/lib/preview-web/src/PreviewWeb.test.ts
@@ -29,7 +29,7 @@ import {
 } from '@storybook/core-events';
 import { logger } from '@storybook/client-logger';
 import { addons, mockChannel as createMockChannel } from '@storybook/addons';
-import type { Framework } from '@storybook/types';
+import type { Renderer } from '@storybook/types';
 import type { ModuleImportFn, WebProjectAnnotations } from '@storybook/store';
 import { mocked } from 'ts-jest/utils';
 
@@ -110,7 +110,7 @@ async function createAndRenderPreview({
   getProjectAnnotations: inputGetProjectAnnotations = getProjectAnnotations,
 }: {
   importFn?: ModuleImportFn;
-  getProjectAnnotations?: () => WebProjectAnnotations<Framework>;
+  getProjectAnnotations?: () => WebProjectAnnotations<Renderer>;
 } = {}) {
   const preview = new PreviewWeb();
   await preview.initialize({
diff --git a/code/lib/preview-web/src/PreviewWeb.tsx b/code/lib/preview-web/src/PreviewWeb.tsx
index 4e21f0b5f354..a1ed45f445c9 100644
--- a/code/lib/preview-web/src/PreviewWeb.tsx
+++ b/code/lib/preview-web/src/PreviewWeb.tsx
@@ -1,10 +1,10 @@
-import type { Framework } from '@storybook/types';
+import type { Renderer } from '@storybook/types';
 
 import { PreviewWithSelection } from './PreviewWithSelection';
 import { UrlStore } from './UrlStore';
 import { WebView } from './WebView';
 
-export class PreviewWeb<TFramework extends Framework> extends PreviewWithSelection<TFramework> {
+export class PreviewWeb<TFramework extends Renderer> extends PreviewWithSelection<TFramework> {
   constructor() {
     super(new UrlStore(), new WebView());
   }
diff --git a/code/lib/preview-web/src/PreviewWithSelection.tsx b/code/lib/preview-web/src/PreviewWithSelection.tsx
index e4d1802b9bfb..4ba91ec99a70 100644
--- a/code/lib/preview-web/src/PreviewWithSelection.tsx
+++ b/code/lib/preview-web/src/PreviewWithSelection.tsx
@@ -19,7 +19,7 @@ import {
 } from '@storybook/core-events';
 import { logger } from '@storybook/client-logger';
 import type {
-  Framework,
+  Renderer,
   Args,
   Globals,
   Store_ModuleImportFn,
@@ -48,18 +48,18 @@ function focusInInput(event: Event) {
   return /input|textarea/i.test(target.tagName) || target.getAttribute('contenteditable') !== null;
 }
 
-type PossibleRender<TFramework extends Framework> =
+type PossibleRender<TFramework extends Renderer> =
   | StoryRender<TFramework>
   | TemplateDocsRender<TFramework>
   | StandaloneDocsRender<TFramework>;
 
-function isStoryRender<TFramework extends Framework>(
+function isStoryRender<TFramework extends Renderer>(
   r: PossibleRender<TFramework>
 ): r is StoryRender<TFramework> {
   return r.type === 'story';
 }
 
-export class PreviewWithSelection<TFramework extends Framework> extends Preview<TFramework> {
+export class PreviewWithSelection<TFramework extends Renderer> extends Preview<TFramework> {
   currentSelection?: Store_Selection;
 
   currentRender?: PossibleRender<TFramework>;
diff --git a/code/lib/preview-web/src/docs-context/DocsContext.ts b/code/lib/preview-web/src/docs-context/DocsContext.ts
index 687cac7295a1..953041cf6680 100644
--- a/code/lib/preview-web/src/docs-context/DocsContext.ts
+++ b/code/lib/preview-web/src/docs-context/DocsContext.ts
@@ -1,5 +1,5 @@
 import type {
-  Framework,
+  Renderer,
   Store_CSFFile,
   Store_ModuleExport,
   Store_ModuleExports,
@@ -13,23 +13,23 @@ import type { Channel } from '@storybook/channels';
 
 import type { DocsContextProps } from './DocsContextProps';
 
-export class DocsContext<TFramework extends Framework> implements DocsContextProps<TFramework> {
-  private componentStoriesValue: Store_Story<TFramework>[];
+export class DocsContext<TRenderer extends Renderer> implements DocsContextProps<TRenderer> {
+  private componentStoriesValue: Store_Story<TRenderer>[];
 
-  private storyIdToCSFFile: Map<StoryId, Store_CSFFile<TFramework>>;
+  private storyIdToCSFFile: Map<StoryId, Store_CSFFile<TRenderer>>;
 
   private exportToStoryId: Map<Store_ModuleExport, StoryId>;
 
   private nameToStoryId: Map<StoryName, StoryId>;
 
-  private primaryStory?: Store_Story<TFramework>;
+  private primaryStory?: Store_Story<TRenderer>;
 
   constructor(
     public channel: Channel,
-    protected store: StoryStore<TFramework>,
+    protected store: StoryStore<TRenderer>,
     public renderStoryToElement: DocsContextProps['renderStoryToElement'],
     /** The CSF files known (via the index) to be refererenced by this docs file */
-    csfFiles: Store_CSFFile<TFramework>[],
+    csfFiles: Store_CSFFile<TRenderer>[],
     componentStoriesFromAllCsfFiles = true
   ) {
     this.storyIdToCSFFile = new Map();
@@ -45,7 +45,7 @@ export class DocsContext<TFramework extends Framework> implements DocsContextPro
   // This docs entry references this CSF file and can syncronously load the stories, as well
   // as reference them by module export. If the CSF is part of the "component" stories, they
   // can also be referenced by name and are in the componentStories list.
-  referenceCSFFile(csfFile: Store_CSFFile<TFramework>, addToComponentStories: boolean) {
+  referenceCSFFile(csfFile: Store_CSFFile<TRenderer>, addToComponentStories: boolean) {
     Object.values(csfFile.stories).forEach((annotation) => {
       this.storyIdToCSFFile.set(annotation.id, csfFile);
       this.exportToStoryId.set(annotation.moduleExport, annotation.id);
@@ -96,11 +96,11 @@ export class DocsContext<TFramework extends Framework> implements DocsContextPro
     return this.store.storyFromCSFFile({ storyId, csfFile });
   };
 
-  getStoryContext = (story: Store_Story<TFramework>) => {
+  getStoryContext = (story: Store_Story<TRenderer>) => {
     return {
       ...this.store.getStoryContext(story),
       viewMode: 'docs',
-    } as StoryContextForLoaders<TFramework>;
+    } as StoryContextForLoaders<TRenderer>;
   };
 
   loadStory = (id: StoryId) => {
diff --git a/code/lib/preview-web/src/docs-context/DocsContextProps.ts b/code/lib/preview-web/src/docs-context/DocsContextProps.ts
index ddb1c66d4e72..268992e5e66e 100644
--- a/code/lib/preview-web/src/docs-context/DocsContextProps.ts
+++ b/code/lib/preview-web/src/docs-context/DocsContextProps.ts
@@ -1,5 +1,5 @@
 import type {
-  Framework,
+  Renderer,
   Store_ModuleExport,
   Store_ModuleExports,
   Store_Story,
@@ -10,7 +10,7 @@ import type {
 import type { Channel } from '@storybook/channels';
 import type { StoryRenderOptions } from '../render/StoryRender';
 
-export interface DocsContextProps<TFramework extends Framework = Framework> {
+export interface DocsContextProps<TRenderer extends Renderer = Renderer> {
   /**
    * Register the CSF file that this docs entry represents.
    * Used by the `<Meta of={} />` block.
@@ -35,26 +35,26 @@ export interface DocsContextProps<TFramework extends Framework = Framework> {
    * Syncronously find a story by id (if the id is not provided, this will look up the primary
    * story in the CSF file, if such a file exists).
    */
-  storyById: (id?: StoryId) => Store_Story<TFramework>;
+  storyById: (id?: StoryId) => Store_Story<TRenderer>;
   /**
    * Syncronously find all stories of the component referenced by the CSF file.
    */
-  componentStories: () => Store_Story<TFramework>[];
+  componentStories: () => Store_Story<TRenderer>[];
 
   /**
    * Get the story context of the referenced story.
    */
-  getStoryContext: (story: Store_Story<TFramework>) => StoryContextForLoaders<TFramework>;
+  getStoryContext: (story: Store_Story<TRenderer>) => StoryContextForLoaders<TRenderer>;
   /**
    * Asyncronously load an arbitrary story by id.
    */
-  loadStory: (id: StoryId) => Promise<Store_Story<TFramework>>;
+  loadStory: (id: StoryId) => Promise<Store_Story<TRenderer>>;
 
   /**
    * Render a story to a given HTML element and keep it up to date across context changes
    */
   renderStoryToElement: (
-    story: Store_Story<TFramework>,
+    story: Store_Story<TRenderer>,
     element: HTMLElement,
     options: StoryRenderOptions
   ) => () => Promise<void>;
diff --git a/code/lib/preview-web/src/docs-context/DocsRenderFunction.ts b/code/lib/preview-web/src/docs-context/DocsRenderFunction.ts
index 441b8d33d3e1..bef733c3e96f 100644
--- a/code/lib/preview-web/src/docs-context/DocsRenderFunction.ts
+++ b/code/lib/preview-web/src/docs-context/DocsRenderFunction.ts
@@ -1,8 +1,8 @@
-import type { Framework, Parameters } from '@storybook/types';
+import type { Renderer, Parameters } from '@storybook/types';
 import type { DocsContextProps } from './DocsContextProps';
 
-export type DocsRenderFunction<TFramework extends Framework> = (
-  docsContext: DocsContextProps<TFramework>,
+export type DocsRenderFunction<TRenderer extends Renderer> = (
+  docsContext: DocsContextProps<TRenderer>,
   docsParameters: Parameters,
   element: HTMLElement,
   callback: () => void
diff --git a/code/lib/preview-web/src/render/Render.ts b/code/lib/preview-web/src/render/Render.ts
index 4e74f5d8439d..737a058497c3 100644
--- a/code/lib/preview-web/src/render/Render.ts
+++ b/code/lib/preview-web/src/render/Render.ts
@@ -1,4 +1,4 @@
-import type { StoryId, Framework } from '@storybook/types';
+import type { StoryId, Renderer } from '@storybook/types';
 import type { StoryRenderOptions } from './StoryRender';
 
 export type RenderType = 'story' | 'docs';
@@ -10,16 +10,16 @@ export type RenderType = 'story' | 'docs';
  *  - Tracking the state of the rendering as it moves between preparing, rendering and tearing down.
  *  - Tracking what is rendered to know if a change requires re-rendering or teardown + recreation.
  */
-export interface Render<TFramework extends Framework> {
+export interface Render<TRenderer extends Renderer> {
   type: RenderType;
   id: StoryId;
   isPreparing: () => boolean;
-  isEqual: (other: Render<TFramework>) => boolean;
+  isEqual: (other: Render<TRenderer>) => boolean;
   disableKeyListeners: boolean;
   teardown?: (options: { viewModeChanged: boolean }) => Promise<void>;
   torndown: boolean;
   renderToElement: (
-    canvasElement: TFramework['canvasElement'],
+    canvasElement: TRenderer['canvasElement'],
     renderStoryToElement?: any,
     options?: StoryRenderOptions
   ) => Promise<void>;
diff --git a/code/lib/preview-web/src/render/StandaloneDocsRender.test.ts b/code/lib/preview-web/src/render/StandaloneDocsRender.test.ts
index df6733b7206b..85ca36938f7b 100644
--- a/code/lib/preview-web/src/render/StandaloneDocsRender.test.ts
+++ b/code/lib/preview-web/src/render/StandaloneDocsRender.test.ts
@@ -1,6 +1,6 @@
 import { jest, describe, it, expect } from '@jest/globals';
 import { Channel } from '@storybook/channels';
-import type { Framework, Addon_StandaloneDocsIndexEntry } from '@storybook/types';
+import type { Renderer, Addon_StandaloneDocsIndexEntry } from '@storybook/types';
 import type { StoryStore } from '@storybook/store';
 import { PREPARE_ABORTED } from './Render';
 
@@ -36,7 +36,7 @@ describe('StandaloneDocsRender', () => {
 
     const render = new StandaloneDocsRender(
       new Channel(),
-      mockStore as unknown as StoryStore<Framework>,
+      mockStore as unknown as StoryStore<Renderer>,
       entry
     );
 
diff --git a/code/lib/preview-web/src/render/StandaloneDocsRender.ts b/code/lib/preview-web/src/render/StandaloneDocsRender.ts
index cb22ca9a739f..c88b36f79974 100644
--- a/code/lib/preview-web/src/render/StandaloneDocsRender.ts
+++ b/code/lib/preview-web/src/render/StandaloneDocsRender.ts
@@ -1,6 +1,6 @@
 import type {
   Addon_IndexEntry,
-  Framework,
+  Renderer,
   Store_CSFFile,
   Store_ModuleExports,
   StoryId,
@@ -24,7 +24,7 @@ import { DocsContext } from '../docs-context/DocsContext';
  *  - *.mdx file that may or may not reference a specific CSF file with `<Meta of={} />`
  */
 
-export class StandaloneDocsRender<TFramework extends Framework> implements Render<TFramework> {
+export class StandaloneDocsRender<TRenderer extends Renderer> implements Render<TRenderer> {
   public readonly type: RenderType = 'docs';
 
   public readonly id: StoryId;
@@ -41,11 +41,11 @@ export class StandaloneDocsRender<TFramework extends Framework> implements Rende
 
   public preparing = false;
 
-  private csfFiles?: Store_CSFFile<TFramework>[];
+  private csfFiles?: Store_CSFFile<TRenderer>[];
 
   constructor(
     protected channel: Channel,
-    protected store: StoryStore<TFramework>,
+    protected store: StoryStore<TRenderer>,
     public entry: Addon_IndexEntry
   ) {
     this.id = entry.id;
@@ -66,22 +66,22 @@ export class StandaloneDocsRender<TFramework extends Framework> implements Rende
     this.preparing = false;
   }
 
-  isEqual(other: Render<TFramework>): boolean {
+  isEqual(other: Render<TRenderer>): boolean {
     return !!(
       this.id === other.id &&
       this.exports &&
-      this.exports === (other as StandaloneDocsRender<TFramework>).exports
+      this.exports === (other as StandaloneDocsRender<TRenderer>).exports
     );
   }
 
   async renderToElement(
-    canvasElement: TFramework['canvasElement'],
+    canvasElement: TRenderer['canvasElement'],
     renderStoryToElement: DocsContextProps['renderStoryToElement']
   ) {
     if (!this.exports || !this.csfFiles || !this.store.projectAnnotations)
       throw new Error('Cannot render docs before preparing');
 
-    const docsContext = new DocsContext<TFramework>(
+    const docsContext = new DocsContext<TRenderer>(
       this.channel,
       this.store,
       renderStoryToElement,
@@ -98,7 +98,7 @@ export class StandaloneDocsRender<TFramework extends Framework> implements Rende
 
     const docsParameter = { ...docs, page: this.exports.default };
     const renderer = await docs.renderer();
-    const { render } = renderer as { render: DocsRenderFunction<TFramework> };
+    const { render } = renderer as { render: DocsRenderFunction<TRenderer> };
     const renderDocs = async () => {
       await new Promise<void>((r) =>
         // NOTE: it isn't currently possible to use a docs renderer outside of "web" mode.
diff --git a/code/lib/preview-web/src/render/StoryRender.test.ts b/code/lib/preview-web/src/render/StoryRender.test.ts
index 3813597ae5eb..13011b3db517 100644
--- a/code/lib/preview-web/src/render/StoryRender.test.ts
+++ b/code/lib/preview-web/src/render/StoryRender.test.ts
@@ -1,6 +1,6 @@
 import { jest, describe, it, expect } from '@jest/globals';
 import { Channel } from '@storybook/channels';
-import type { Framework, Addon_StoryIndexEntry } from '@storybook/types';
+import type { Renderer, Addon_StoryIndexEntry } from '@storybook/types';
 import type { StoryStore } from '@storybook/store';
 import { PREPARE_ABORTED } from './Render';
 
@@ -35,7 +35,7 @@ describe('StoryRender', () => {
 
     const render = new StoryRender(
       new Channel(),
-      mockStore as unknown as StoryStore<Framework>,
+      mockStore as unknown as StoryStore<Renderer>,
       jest.fn(),
       {} as any,
       entry.id,
diff --git a/code/lib/preview-web/src/render/StoryRender.ts b/code/lib/preview-web/src/render/StoryRender.ts
index c9206457b7f4..d9a02fd3e3fd 100644
--- a/code/lib/preview-web/src/render/StoryRender.ts
+++ b/code/lib/preview-web/src/render/StoryRender.ts
@@ -1,6 +1,6 @@
 import global from 'global';
 import type {
-  Framework,
+  Renderer,
   Store_RenderContext,
   RenderToCanvas,
   Store_Story,
@@ -42,8 +42,8 @@ function serializeError(error: any) {
   }
 }
 
-export type RenderContextCallbacks<TFramework extends Framework> = Pick<
-  Store_RenderContext<TFramework>,
+export type RenderContextCallbacks<TRenderer extends Renderer> = Pick<
+  Store_RenderContext<TRenderer>,
   'showMain' | 'showError' | 'showException'
 >;
 
@@ -51,16 +51,16 @@ export type StoryRenderOptions = {
   autoplay?: boolean;
 };
 
-export class StoryRender<TFramework extends Framework> implements Render<TFramework> {
+export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer> {
   public type: RenderType = 'story';
 
-  public story?: Store_Story<TFramework>;
+  public story?: Store_Story<TRenderer>;
 
   public phase?: RenderPhase;
 
   private abortController?: AbortController;
 
-  private canvasElement?: TFramework['canvasElement'];
+  private canvasElement?: TRenderer['canvasElement'];
 
   private notYetRendered = true;
 
@@ -72,13 +72,13 @@ export class StoryRender<TFramework extends Framework> implements Render<TFramew
 
   constructor(
     public channel: Channel,
-    public store: StoryStore<TFramework>,
-    private renderToScreen: RenderToCanvas<TFramework>,
-    private callbacks: RenderContextCallbacks<TFramework>,
+    public store: StoryStore<TRenderer>,
+    private renderToScreen: RenderToCanvas<TRenderer>,
+    private callbacks: RenderContextCallbacks<TRenderer>,
     public id: StoryId,
     public viewMode: ViewMode,
     public renderOptions: StoryRenderOptions = { autoplay: true },
-    story?: Store_Story<TFramework>
+    story?: Store_Story<TRenderer>
   ) {
     this.abortController = new AbortController();
 
@@ -109,17 +109,17 @@ export class StoryRender<TFramework extends Framework> implements Render<TFramew
     });
 
     if ((this.abortController as AbortController).signal.aborted) {
-      this.store.cleanupStory(this.story as Store_Story<TFramework>);
+      this.store.cleanupStory(this.story as Store_Story<TRenderer>);
       throw PREPARE_ABORTED;
     }
   }
 
   // The two story "renders" are equal and have both loaded the same story
-  isEqual(other: Render<TFramework>): boolean {
+  isEqual(other: Render<TRenderer>): boolean {
     return !!(
       this.id === other.id &&
       this.story &&
-      this.story === (other as StoryRender<TFramework>).story
+      this.story === (other as StoryRender<TRenderer>).story
     );
   }
 
@@ -131,7 +131,7 @@ export class StoryRender<TFramework extends Framework> implements Render<TFramew
     return ['rendering', 'playing'].includes(this.phase as RenderPhase);
   }
 
-  async renderToElement(canvasElement: TFramework['canvasElement']) {
+  async renderToElement(canvasElement: TRenderer['canvasElement']) {
     this.canvasElement = canvasElement;
 
     // FIXME: this comment
@@ -179,22 +179,22 @@ export class StoryRender<TFramework extends Framework> implements Render<TFramew
         loadedContext = await applyLoaders({
           ...this.storyContext(),
           viewMode: this.viewMode,
-        } as StoryContextForLoaders<TFramework>);
+        } as StoryContextForLoaders<TRenderer>);
       });
       if (abortSignal.aborted) {
         return;
       }
 
-      const renderStoryContext: StoryContext<TFramework> = {
+      const renderStoryContext: StoryContext<TRenderer> = {
         ...loadedContext!,
         // By this stage, it is possible that new args/globals have been received for this story
         // and we need to ensure we render it with the new values
         ...this.storyContext(),
         abortSignal,
-        // We should consider parameterizing the story types with TFramework['canvasElement'] in the future
+        // We should consider parameterizing the story types with TRenderer['canvasElement'] in the future
         canvasElement: canvasElement as any,
       };
-      const renderContext: Store_RenderContext<TFramework> = {
+      const renderContext: Store_RenderContext<TRenderer> = {
         componentId,
         title,
         kind: title,
diff --git a/code/lib/preview-web/src/render/TemplateDocsRender.test.ts b/code/lib/preview-web/src/render/TemplateDocsRender.test.ts
index bf765bb3d155..22e6199e43b7 100644
--- a/code/lib/preview-web/src/render/TemplateDocsRender.test.ts
+++ b/code/lib/preview-web/src/render/TemplateDocsRender.test.ts
@@ -1,6 +1,6 @@
 import { jest, describe, it, expect } from '@jest/globals';
 import { Channel } from '@storybook/channels';
-import type { Framework, Addon_TemplateDocsIndexEntry } from '@storybook/types';
+import type { Renderer, Addon_TemplateDocsIndexEntry } from '@storybook/types';
 import type { StoryStore } from '@storybook/store';
 import { PREPARE_ABORTED } from './Render';
 
@@ -36,7 +36,7 @@ describe('TemplateDocsRender', () => {
 
     const render = new TemplateDocsRender(
       new Channel(),
-      mockStore as unknown as StoryStore<Framework>,
+      mockStore as unknown as StoryStore<Renderer>,
       entry
     );
 
diff --git a/code/lib/preview-web/src/render/TemplateDocsRender.ts b/code/lib/preview-web/src/render/TemplateDocsRender.ts
index 45a2b38196ae..58c996df887d 100644
--- a/code/lib/preview-web/src/render/TemplateDocsRender.ts
+++ b/code/lib/preview-web/src/render/TemplateDocsRender.ts
@@ -1,6 +1,6 @@
 import type {
   Addon_IndexEntry,
-  Framework,
+  Renderer,
   Store_CSFFile,
   Store_Story,
   StoryId,
@@ -27,12 +27,12 @@ import { DocsContext } from '../docs-context/DocsContext';
  *  - *.stories.mdx files, where the MDX compiler produces a CSF file with a `.parameter.docs.page`
  *      parameter containing the compiled content of the MDX file.
  */
-export class TemplateDocsRender<TFramework extends Framework> implements Render<TFramework> {
+export class TemplateDocsRender<TRenderer extends Renderer> implements Render<TRenderer> {
   public readonly type: RenderType = 'docs';
 
   public readonly id: StoryId;
 
-  public story?: Store_Story<TFramework>;
+  public story?: Store_Story<TRenderer>;
 
   public rerender?: () => Promise<void>;
 
@@ -44,11 +44,11 @@ export class TemplateDocsRender<TFramework extends Framework> implements Render<
 
   public preparing = false;
 
-  private csfFiles?: Store_CSFFile<TFramework>[];
+  private csfFiles?: Store_CSFFile<TRenderer>[];
 
   constructor(
     protected channel: Channel,
-    protected store: StoryStore<TFramework>,
+    protected store: StoryStore<TRenderer>,
     public entry: Addon_IndexEntry
   ) {
     this.id = entry.id;
@@ -64,7 +64,7 @@ export class TemplateDocsRender<TFramework extends Framework> implements Render<
     if (this.torndown) throw PREPARE_ABORTED;
 
     const { importPath, title } = this.entry;
-    const primaryCsfFile = this.store.processCSFFileWithCache<TFramework>(
+    const primaryCsfFile = this.store.processCSFFileWithCache<TRenderer>(
       entryExports,
       importPath,
       title
@@ -83,21 +83,21 @@ export class TemplateDocsRender<TFramework extends Framework> implements Render<
     this.preparing = false;
   }
 
-  isEqual(other: Render<TFramework>): boolean {
+  isEqual(other: Render<TRenderer>): boolean {
     return !!(
       this.id === other.id &&
       this.story &&
-      this.story === (other as TemplateDocsRender<TFramework>).story
+      this.story === (other as TemplateDocsRender<TRenderer>).story
     );
   }
 
   async renderToElement(
-    canvasElement: TFramework['canvasElement'],
+    canvasElement: TRenderer['canvasElement'],
     renderStoryToElement: DocsContextProps['renderStoryToElement']
   ) {
     if (!this.story || !this.csfFiles) throw new Error('Cannot render docs before preparing');
 
-    const docsContext = new DocsContext<TFramework>(
+    const docsContext = new DocsContext<TRenderer>(
       this.channel,
       this.store,
       renderStoryToElement,
@@ -113,7 +113,7 @@ export class TemplateDocsRender<TFramework extends Framework> implements Render<
       );
 
     const renderer = await docsParameter.renderer();
-    const { render } = renderer as { render: DocsRenderFunction<TFramework> };
+    const { render } = renderer as { render: DocsRenderFunction<TRenderer> };
     const renderDocs = async () => {
       await new Promise<void>((r) =>
         // NOTE: it isn't currently possible to use a docs renderer outside of "web" mode.
diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json
index 7580323b7f2b..4e980fc6acf9 100644
--- a/code/lib/source-loader/package.json
+++ b/code/lib/source-loader/package.json
@@ -43,7 +43,7 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "next",
+    "@storybook/csf": "0.0.2-next.5",
     "@storybook/types": "7.0.0-alpha.49",
     "estraverse": "^5.2.0",
     "lodash": "^4.17.21",
diff --git a/code/lib/store/package.json b/code/lib/store/package.json
index ffc9b2add791..56840e6c62a5 100644
--- a/code/lib/store/package.json
+++ b/code/lib/store/package.json
@@ -45,7 +45,7 @@
     "@storybook/addons": "7.0.0-alpha.49",
     "@storybook/client-logger": "7.0.0-alpha.49",
     "@storybook/core-events": "7.0.0-alpha.49",
-    "@storybook/csf": "next",
+    "@storybook/csf": "0.0.2-next.5",
     "@storybook/types": "7.0.0-alpha.49",
     "dequal": "^2.0.2",
     "global": "^4.4.0",
diff --git a/code/lib/store/src/StoryStore.test.ts b/code/lib/store/src/StoryStore.test.ts
index 02da944424b7..e5bcd67272ce 100644
--- a/code/lib/store/src/StoryStore.test.ts
+++ b/code/lib/store/src/StoryStore.test.ts
@@ -1,4 +1,4 @@
-import type { Framework, ProjectAnnotations } from '@storybook/types';
+import type { Renderer, ProjectAnnotations } from '@storybook/types';
 import global from 'global';
 import { expect } from '@jest/globals';
 
@@ -444,7 +444,7 @@ describe('StoryStore', () => {
 
       const story = await store.loadStory({ storyId: 'component-one--a' });
 
-      const { hooks } = store.getStoryContext(story) as { hooks: HooksContext<Framework> };
+      const { hooks } = store.getStoryContext(story) as { hooks: HooksContext<Renderer> };
       hooks.clean = jest.fn();
       store.cleanupStory(story);
       expect(hooks.clean).toHaveBeenCalled();
diff --git a/code/lib/store/src/StoryStore.ts b/code/lib/store/src/StoryStore.ts
index b353428e37e8..1cca0afd842b 100644
--- a/code/lib/store/src/StoryStore.ts
+++ b/code/lib/store/src/StoryStore.ts
@@ -1,7 +1,7 @@
 import memoize from 'memoizerific';
 import type {
   Addon_IndexEntry,
-  Framework,
+  Renderer,
   API_PreparedStoryIndex,
   ComponentTitle,
   Parameters,
@@ -37,20 +37,20 @@ import { processCSFFile, prepareStory, normalizeProjectAnnotations } from './csf
 const CSF_CACHE_SIZE = 1000;
 const STORY_CACHE_SIZE = 10000;
 
-export class StoryStore<TFramework extends Framework> {
+export class StoryStore<TRenderer extends Renderer> {
   storyIndex?: StoryIndexStore;
 
   importFn?: Store_ModuleImportFn;
 
-  projectAnnotations?: Store_NormalizedProjectAnnotations<TFramework>;
+  projectAnnotations?: Store_NormalizedProjectAnnotations<TRenderer>;
 
   globals?: GlobalsStore;
 
   args: ArgsStore;
 
-  hooks: Record<StoryId, HooksContext<TFramework>>;
+  hooks: Record<StoryId, HooksContext<TRenderer>>;
 
-  cachedCSFFiles?: Record<Path, Store_CSFFile<TFramework>>;
+  cachedCSFFiles?: Record<Path, Store_CSFFile<TRenderer>>;
 
   processCSFFileWithCache: typeof processCSFFile;
 
@@ -77,7 +77,7 @@ export class StoryStore<TFramework extends Framework> {
     });
   }
 
-  setProjectAnnotations(projectAnnotations: ProjectAnnotations<TFramework>) {
+  setProjectAnnotations(projectAnnotations: ProjectAnnotations<TRenderer>) {
     // By changing `this.projectAnnotations, we implicitly invalidate the `prepareStoryWithCache`
     this.projectAnnotations = normalizeProjectAnnotations(projectAnnotations);
     const { globals, globalTypes } = projectAnnotations;
@@ -134,7 +134,7 @@ export class StoryStore<TFramework extends Framework> {
   }
 
   // To load a single CSF file to service a story we need to look up the importPath in the index
-  loadCSFFileByStoryId(storyId: StoryId): Store_PromiseLike<Store_CSFFile<TFramework>> {
+  loadCSFFileByStoryId(storyId: StoryId): Store_PromiseLike<Store_CSFFile<TRenderer>> {
     if (!this.storyIndex || !this.importFn)
       throw new Error(`loadCSFFileByStoryId called before initialization`);
 
@@ -145,7 +145,7 @@ export class StoryStore<TFramework extends Framework> {
     );
   }
 
-  loadAllCSFFiles(): Store_PromiseLike<StoryStore<TFramework>['cachedCSFFiles']> {
+  loadAllCSFFiles(): Store_PromiseLike<StoryStore<TRenderer>['cachedCSFFiles']> {
     if (!this.storyIndex) throw new Error(`loadAllCSFFiles called before initialization`);
 
     const importPaths: Record<Path, StoryId> = {};
@@ -164,7 +164,7 @@ export class StoryStore<TFramework extends Framework> {
       list.reduce((acc, { importPath, csfFile }) => {
         acc[importPath] = csfFile;
         return acc;
-      }, {} as Record<Path, Store_CSFFile<TFramework>>)
+      }, {} as Record<Path, Store_CSFFile<TRenderer>>)
     );
   }
 
@@ -177,7 +177,7 @@ export class StoryStore<TFramework extends Framework> {
   }
 
   // Load the CSF file for a story and prepare the story from it and the project annotations.
-  async loadStory({ storyId }: { storyId: StoryId }): Promise<Store_Story<TFramework>> {
+  async loadStory({ storyId }: { storyId: StoryId }): Promise<Store_Story<TRenderer>> {
     await this.initializationPromise;
     const csfFile = await this.loadCSFFileByStoryId(storyId);
     return this.storyFromCSFFile({ storyId, csfFile });
@@ -190,8 +190,8 @@ export class StoryStore<TFramework extends Framework> {
     csfFile,
   }: {
     storyId: StoryId;
-    csfFile: Store_CSFFile<TFramework>;
-  }): Store_Story<TFramework> {
+    csfFile: Store_CSFFile<TRenderer>;
+  }): Store_Story<TRenderer> {
     if (!this.projectAnnotations) throw new Error(`storyFromCSFFile called before initialization`);
 
     const storyAnnotations = csfFile.stories[storyId];
@@ -214,8 +214,8 @@ export class StoryStore<TFramework extends Framework> {
   componentStoriesFromCSFFile({
     csfFile,
   }: {
-    csfFile: Store_CSFFile<TFramework>;
-  }): Store_Story<TFramework>[] {
+    csfFile: Store_CSFFile<TRenderer>;
+  }): Store_Story<TRenderer>[] {
     if (!this.storyIndex)
       throw new Error(`componentStoriesFromCSFFile called before initialization`);
 
@@ -238,7 +238,7 @@ export class StoryStore<TFramework extends Framework> {
         const firstStoryEntry = storyIndex.importPathToEntry(storyImportPath);
         return this.loadCSFFileByStoryId(firstStoryEntry.id);
       }),
-    ])) as [Store_ModuleExports, ...Store_CSFFile<TFramework>[]];
+    ])) as [Store_ModuleExports, ...Store_CSFFile<TRenderer>[]];
 
     return { entryExports, csfFiles };
   }
@@ -246,8 +246,8 @@ export class StoryStore<TFramework extends Framework> {
   // A prepared story does not include args, globals or hooks. These are stored in the story store
   // and updated separtely to the (immutable) story.
   getStoryContext(
-    story: Store_Story<TFramework>
-  ): Omit<StoryContextForLoaders<TFramework>, 'viewMode'> {
+    story: Store_Story<TRenderer>
+  ): Omit<StoryContextForLoaders<TRenderer>, 'viewMode'> {
     if (!this.globals) throw new Error(`getStoryContext called before initialization`);
 
     return {
@@ -258,13 +258,13 @@ export class StoryStore<TFramework extends Framework> {
     };
   }
 
-  cleanupStory(story: Store_Story<TFramework>): void {
+  cleanupStory(story: Store_Story<TRenderer>): void {
     this.hooks[story.id].clean();
   }
 
   extract(
     options: Store_ExtractOptions = { includeDocsOnly: false }
-  ): Record<StoryId, StoryContextForEnhancers<TFramework>> {
+  ): Record<StoryId, StoryContextForEnhancers<TRenderer>> {
     if (!this.storyIndex) throw new Error(`extract called before initialization`);
 
     const { cachedCSFFiles } = this;
@@ -380,13 +380,13 @@ export class StoryStore<TFramework extends Framework> {
     };
   }
 
-  raw(): Store_BoundStory<TFramework>[] {
+  raw(): Store_BoundStory<TRenderer>[] {
     return Object.values(this.extract())
       .map(({ id }: { id: StoryId }) => this.fromId(id))
-      .filter(Boolean) as Store_BoundStory<TFramework>[];
+      .filter(Boolean) as Store_BoundStory<TRenderer>[];
   }
 
-  fromId(storyId: StoryId): Store_BoundStory<TFramework> | null {
+  fromId(storyId: StoryId): Store_BoundStory<TRenderer> | null {
     if (!this.storyIndex) throw new Error(`fromId called before initialization`);
 
     if (!this.cachedCSFFiles)
@@ -406,7 +406,7 @@ export class StoryStore<TFramework extends Framework> {
         const context = {
           ...this.getStoryContext(story),
           viewMode: 'story',
-        } as StoryContext<TFramework>;
+        } as StoryContext<TRenderer>;
 
         return story.unboundStoryFn({ ...context, ...update });
       },
diff --git a/code/lib/store/src/args.ts b/code/lib/store/src/args.ts
index 407776d0a3cb..d8f101b1a075 100644
--- a/code/lib/store/src/args.ts
+++ b/code/lib/store/src/args.ts
@@ -1,5 +1,5 @@
 import { dequal as deepEqual } from 'dequal';
-import type { Framework, Args, ArgTypes, InputType, SBType, StoryContext } from '@storybook/types';
+import type { Renderer, Args, ArgTypes, InputType, SBType, StoryContext } from '@storybook/types';
 import { once } from '@storybook/client-logger';
 import isPlainObject from 'lodash/isPlainObject';
 import { dedent } from 'ts-dedent';
@@ -145,10 +145,7 @@ export const deepDiff = (value: any, update: any): any => {
 };
 
 export const NO_TARGET_NAME = '';
-export function groupArgsByTarget<TArgs = Args>({
-  args,
-  argTypes,
-}: StoryContext<Framework, TArgs>) {
+export function groupArgsByTarget<TArgs = Args>({ args, argTypes }: StoryContext<Renderer, TArgs>) {
   const groupedArgs: Record<string, Partial<TArgs>> = {};
   (Object.entries(args) as [keyof TArgs, any][]).forEach(([name, value]) => {
     const { target = NO_TARGET_NAME } = (argTypes[name] || {}) as { target?: string };
@@ -159,6 +156,6 @@ export function groupArgsByTarget<TArgs = Args>({
   return groupedArgs;
 }
 
-export function noTargetArgs<TArgs = Args>(context: StoryContext<Framework, TArgs>) {
+export function noTargetArgs<TArgs = Args>(context: StoryContext<Renderer, TArgs>) {
   return groupArgsByTarget(context)[NO_TARGET_NAME];
 }
diff --git a/code/lib/store/src/csf/composeConfigs.ts b/code/lib/store/src/csf/composeConfigs.ts
index 6069a26df3ef..f7d479363ed0 100644
--- a/code/lib/store/src/csf/composeConfigs.ts
+++ b/code/lib/store/src/csf/composeConfigs.ts
@@ -1,4 +1,4 @@
-import type { Framework, Store_ModuleExports, ProjectAnnotations } from '@storybook/types';
+import type { Renderer, Store_ModuleExports, ProjectAnnotations } from '@storybook/types';
 
 import { combineParameters } from '../parameters';
 import { composeStepRunners } from './stepRunners';
@@ -31,9 +31,9 @@ export function getSingletonField<TFieldType = any>(
   return getField(moduleExportList, field).pop();
 }
 
-export function composeConfigs<TFramework extends Framework>(
+export function composeConfigs<TRenderer extends Renderer>(
   moduleExportList: Store_ModuleExports[]
-): ProjectAnnotations<TFramework> {
+): ProjectAnnotations<TRenderer> {
   const allArgTypeEnhancers = getArrayField(moduleExportList, 'argTypesEnhancers');
   const stepRunners = getField(moduleExportList, 'runStep');
 
@@ -54,6 +54,6 @@ export function composeConfigs<TFramework extends Framework>(
     renderToCanvas: getSingletonField(moduleExportList, 'renderToCanvas'),
     renderToDOM: getSingletonField(moduleExportList, 'renderToDOM'), // deprecated
     applyDecorators: getSingletonField(moduleExportList, 'applyDecorators'),
-    runStep: composeStepRunners<TFramework>(stepRunners),
+    runStep: composeStepRunners<TRenderer>(stepRunners),
   };
 }
diff --git a/code/lib/store/src/csf/normalizeComponentAnnotations.ts b/code/lib/store/src/csf/normalizeComponentAnnotations.ts
index 27addf2c6674..4ecb4d4a2450 100644
--- a/code/lib/store/src/csf/normalizeComponentAnnotations.ts
+++ b/code/lib/store/src/csf/normalizeComponentAnnotations.ts
@@ -1,17 +1,17 @@
 import { sanitize } from '@storybook/csf';
 import type {
-  Framework,
+  Renderer,
   Store_ModuleExports,
   Store_NormalizedComponentAnnotations,
 } from '@storybook/types';
 
 import { normalizeInputTypes } from './normalizeInputTypes';
 
-export function normalizeComponentAnnotations<TFramework extends Framework>(
+export function normalizeComponentAnnotations<TRenderer extends Renderer>(
   defaultExport: Store_ModuleExports['default'],
   title: string = defaultExport.title,
   importPath?: string
-): Store_NormalizedComponentAnnotations<TFramework> {
+): Store_NormalizedComponentAnnotations<TRenderer> {
   const { id, argTypes } = defaultExport;
   return {
     id: sanitize(id || title),
diff --git a/code/lib/store/src/csf/normalizeProjectAnnotations.ts b/code/lib/store/src/csf/normalizeProjectAnnotations.ts
index e4700f6d3fa7..679bc43edb41 100644
--- a/code/lib/store/src/csf/normalizeProjectAnnotations.ts
+++ b/code/lib/store/src/csf/normalizeProjectAnnotations.ts
@@ -1,5 +1,5 @@
 import type {
-  Framework,
+  Renderer,
   ArgTypes,
   ProjectAnnotations,
   Store_NormalizedProjectAnnotations,
@@ -9,12 +9,12 @@ import { inferArgTypes } from '../inferArgTypes';
 import { inferControls } from '../inferControls';
 import { normalizeInputTypes } from './normalizeInputTypes';
 
-export function normalizeProjectAnnotations<TFramework extends Framework>({
+export function normalizeProjectAnnotations<TRenderer extends Renderer>({
   argTypes,
   globalTypes,
   argTypesEnhancers,
   ...annotations
-}: ProjectAnnotations<TFramework>): Store_NormalizedProjectAnnotations<TFramework> {
+}: ProjectAnnotations<TRenderer>): Store_NormalizedProjectAnnotations<TRenderer> {
   return {
     ...(argTypes && { argTypes: normalizeInputTypes(argTypes as ArgTypes) }),
     ...(globalTypes && { globalTypes: normalizeInputTypes(globalTypes) }),
diff --git a/code/lib/store/src/csf/normalizeStory.test.ts b/code/lib/store/src/csf/normalizeStory.test.ts
index c1374f1957b6..5a97b4b56359 100644
--- a/code/lib/store/src/csf/normalizeStory.test.ts
+++ b/code/lib/store/src/csf/normalizeStory.test.ts
@@ -1,5 +1,5 @@
 import { expect, describe, it } from '@jest/globals';
-import type { Framework, StoryAnnotationsOrFn } from '@storybook/types';
+import type { Renderer, StoryAnnotationsOrFn } from '@storybook/types';
 
 import { normalizeStory } from './normalizeStory';
 
@@ -133,7 +133,7 @@ describe('normalizeStory', () => {
       });
 
       it('full annotations', () => {
-        const storyObj: StoryAnnotationsOrFn<Framework> = {
+        const storyObj: StoryAnnotationsOrFn<Renderer> = {
           name: 'story name',
           parameters: { storyParam: 'val' },
           decorators: [() => {}],
@@ -174,7 +174,7 @@ describe('normalizeStory', () => {
       });
 
       it('prefers new annotations to legacy, but combines', () => {
-        const storyObj: StoryAnnotationsOrFn<Framework> = {
+        const storyObj: StoryAnnotationsOrFn<Renderer> = {
           name: 'story name',
           parameters: { storyParam: 'val' },
           decorators: [() => {}],
diff --git a/code/lib/store/src/csf/normalizeStory.ts b/code/lib/store/src/csf/normalizeStory.ts
index 96a77f5fdc54..a771b5e83ef4 100644
--- a/code/lib/store/src/csf/normalizeStory.ts
+++ b/code/lib/store/src/csf/normalizeStory.ts
@@ -1,5 +1,5 @@
 import type {
-  Framework,
+  Renderer,
   ArgTypes,
   LegacyStoryAnnotationsOrFn,
   Store_NormalizedComponentAnnotations,
@@ -23,13 +23,13 @@ See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf-
 
 const deprecatedStoryAnnotationWarning = deprecate(() => {}, deprecatedStoryAnnotation);
 
-export function normalizeStory<TFramework extends Framework>(
+export function normalizeStory<TRenderer extends Renderer>(
   key: StoryId,
-  storyAnnotations: LegacyStoryAnnotationsOrFn<TFramework>,
-  meta: Store_NormalizedComponentAnnotations<TFramework>
-): Store_NormalizedStoryAnnotations<TFramework> {
-  const storyObject: StoryAnnotations<TFramework> = storyAnnotations;
-  const userStoryFn: StoryFn<TFramework> | null =
+  storyAnnotations: LegacyStoryAnnotationsOrFn<TRenderer>,
+  meta: Store_NormalizedComponentAnnotations<TRenderer>
+): Store_NormalizedStoryAnnotations<TRenderer> {
+  const storyObject: StoryAnnotations<TRenderer> = storyAnnotations;
+  const userStoryFn: StoryFn<TRenderer> | null =
     typeof storyAnnotations === 'function' ? storyAnnotations : null;
 
   const { story } = storyObject;
diff --git a/code/lib/store/src/csf/prepareStory.test.ts b/code/lib/store/src/csf/prepareStory.test.ts
index b67e0d8265c0..a724ea7879cc 100644
--- a/code/lib/store/src/csf/prepareStory.test.ts
+++ b/code/lib/store/src/csf/prepareStory.test.ts
@@ -4,7 +4,7 @@ import global from 'global';
 import { expect } from '@jest/globals';
 import { addons, HooksContext } from '@storybook/addons';
 import type {
-  Framework,
+  Renderer,
   ArgsEnhancer,
   PlayFunctionContext,
   SBObjectType,
@@ -234,11 +234,11 @@ describe('prepareStory', () => {
     describe('argsEnhancers', () => {
       it('are applied in the right order', () => {
         const run: number[] = [];
-        const enhancerOne: ArgsEnhancer<Framework> = () => {
+        const enhancerOne: ArgsEnhancer<Renderer> = () => {
           run.push(1);
           return {};
         };
-        const enhancerTwo: ArgsEnhancer<Framework> = () => {
+        const enhancerTwo: ArgsEnhancer<Renderer> = () => {
           run.push(2);
           return {};
         };
diff --git a/code/lib/store/src/csf/prepareStory.ts b/code/lib/store/src/csf/prepareStory.ts
index c8db666bddf2..ba7ccc6320de 100644
--- a/code/lib/store/src/csf/prepareStory.ts
+++ b/code/lib/store/src/csf/prepareStory.ts
@@ -3,7 +3,7 @@ import deprecate from 'util-deprecate';
 import global from 'global';
 
 import type {
-  Framework,
+  Renderer,
   Args,
   ArgsStoryFn,
   LegacyStoryFn,
@@ -41,11 +41,11 @@ const argTypeDefaultValueWarning = deprecate(
 //
 // Note that this story function is *stateless* in the sense that it does not track args or globals
 // Instead, it is expected these are tracked separately (if necessary) and are passed into each invocation.
-export function prepareStory<TFramework extends Framework>(
-  storyAnnotations: Store_NormalizedStoryAnnotations<TFramework>,
-  componentAnnotations: Store_NormalizedComponentAnnotations<TFramework>,
-  projectAnnotations: Store_NormalizedProjectAnnotations<TFramework>
-): Store_Story<TFramework> {
+export function prepareStory<TRenderer extends Renderer>(
+  storyAnnotations: Store_NormalizedStoryAnnotations<TRenderer>,
+  componentAnnotations: Store_NormalizedComponentAnnotations<TRenderer>,
+  projectAnnotations: Store_NormalizedProjectAnnotations<TRenderer>
+): Store_Story<TRenderer> {
   // NOTE: in the current implementation we are doing everything once, up front, rather than doing
   // anything at render time. The assumption is that as we don't load all the stories at once, this
   // will have a limited cost. If this proves misguided, we can refactor it.
@@ -107,7 +107,7 @@ export function prepareStory<TFramework extends Framework>(
     ...storyAnnotations.args,
   } as Args;
 
-  const contextForEnhancers: StoryContextForEnhancers<TFramework> = {
+  const contextForEnhancers: StoryContextForEnhancers<TRenderer> = {
     componentId: componentAnnotations.id,
     title,
     kind: title, // Back compat
@@ -161,13 +161,13 @@ export function prepareStory<TFramework extends Framework>(
     };
   }
 
-  const applyLoaders = async (context: StoryContextForLoaders<TFramework>) => {
+  const applyLoaders = async (context: StoryContextForLoaders<TRenderer>) => {
     const loadResults = await Promise.all(loaders.map((loader) => loader(context)));
     const loaded = Object.assign({}, ...loadResults);
     return { ...context, loaded };
   };
 
-  const undecoratedStoryFn: LegacyStoryFn<TFramework> = (context: StoryContext<TFramework>) => {
+  const undecoratedStoryFn: LegacyStoryFn<TRenderer> = (context: StoryContext<TRenderer>) => {
     const mappedArgs = Object.entries(context.args).reduce((acc, [key, val]) => {
       const mapping = context.argTypes[key]?.mapping;
       acc[key] = mapping && val in mapping ? mapping[val] : val;
@@ -183,12 +183,12 @@ export function prepareStory<TFramework extends Framework>(
     const includedContext = { ...context, args: includedArgs };
     const { passArgsFirst: renderTimePassArgsFirst = true } = context.parameters;
     return renderTimePassArgsFirst
-      ? (render as ArgsStoryFn<TFramework>)(includedContext.args, includedContext)
-      : (render as LegacyStoryFn<TFramework>)(includedContext);
+      ? (render as ArgsStoryFn<TRenderer>)(includedContext.args, includedContext)
+      : (render as LegacyStoryFn<TRenderer>)(includedContext);
   };
-  const decoratedStoryFn = applyHooks<TFramework>(applyDecorators)(undecoratedStoryFn, decorators);
-  const unboundStoryFn = (context: StoryContext<TFramework>) => {
-    let finalContext: StoryContext<TFramework> = context;
+  const decoratedStoryFn = applyHooks<TRenderer>(applyDecorators)(undecoratedStoryFn, decorators);
+  const unboundStoryFn = (context: StoryContext<TRenderer>) => {
+    let finalContext: StoryContext<TRenderer> = context;
     if (global.FEATURES?.argTypeTargetsV7) {
       const argsByTarget = groupArgsByTarget(context);
       finalContext = {
@@ -204,11 +204,11 @@ export function prepareStory<TFramework extends Framework>(
   const { play } = storyAnnotations;
   const playFunction =
     play &&
-    (async (storyContext: StoryContext<TFramework>) => {
-      const playFunctionContext: PlayFunctionContext<TFramework> = {
+    (async (storyContext: StoryContext<TRenderer>) => {
+      const playFunctionContext: PlayFunctionContext<TRenderer> = {
         ...storyContext,
         // eslint-disable-next-line @typescript-eslint/no-shadow
-        step: (label: StepLabel, play: PlayFunction<TFramework>) =>
+        step: (label: StepLabel, play: PlayFunction<TRenderer>) =>
           // TODO: We know runStep is defined, we need a proper normalized annotations type
           runStep!(label, play, playFunctionContext),
       };
diff --git a/code/lib/store/src/csf/processCSFFile.ts b/code/lib/store/src/csf/processCSFFile.ts
index 176432dffe2d..7698701153f0 100644
--- a/code/lib/store/src/csf/processCSFFile.ts
+++ b/code/lib/store/src/csf/processCSFFile.ts
@@ -1,5 +1,5 @@
 import type {
-  Framework,
+  Renderer,
   ComponentTitle,
   Parameters,
   Path,
@@ -39,19 +39,19 @@ const checkDisallowedParameters = (parameters?: Parameters) => {
 };
 
 // Given the raw exports of a CSF file, check and normalize it.
-export function processCSFFile<TFramework extends Framework>(
+export function processCSFFile<TRenderer extends Renderer>(
   moduleExports: Store_ModuleExports,
   importPath: Path,
   title: ComponentTitle
-): Store_CSFFile<TFramework> {
+): Store_CSFFile<TRenderer> {
   // eslint-disable-next-line @typescript-eslint/naming-convention
   const { default: defaultExport, __namedExportsOrder, ...namedExports } = moduleExports;
 
-  const meta: Store_NormalizedComponentAnnotations<TFramework> =
-    normalizeComponentAnnotations<TFramework>(defaultExport, title, importPath);
+  const meta: Store_NormalizedComponentAnnotations<TRenderer> =
+    normalizeComponentAnnotations<TRenderer>(defaultExport, title, importPath);
   checkDisallowedParameters(meta.parameters);
 
-  const csfFile: Store_CSFFile<TFramework> = { meta, stories: {} };
+  const csfFile: Store_CSFFile<TRenderer> = { meta, stories: {} };
 
   Object.keys(namedExports).forEach((key) => {
     if (isExportStory(key, meta)) {
diff --git a/code/lib/store/src/csf/stepRunners.ts b/code/lib/store/src/csf/stepRunners.ts
index a19d7180a210..2a5b5be88e17 100644
--- a/code/lib/store/src/csf/stepRunners.ts
+++ b/code/lib/store/src/csf/stepRunners.ts
@@ -1,4 +1,4 @@
-import type { Framework, StepRunner } from '@storybook/types';
+import type { Renderer, StepRunner } from '@storybook/types';
 
 /**
  * Compose step runners to create a single step runner that applies each step runner in order.
@@ -18,9 +18,9 @@ import type { Framework, StepRunner } from '@storybook/types';
  * @param stepRunners an array of StepRunner
  * @returns a StepRunner that is the composition of the arguments
  */
-export function composeStepRunners<TFramework extends Framework>(
-  stepRunners: StepRunner<TFramework>[]
-): StepRunner<TFramework> {
+export function composeStepRunners<TRenderer extends Renderer>(
+  stepRunners: StepRunner<TRenderer>[]
+): StepRunner<TRenderer> {
   return async (label, play, playContext) => {
     const composedPlay = stepRunners.reduceRight<() => Promise<void>>(
       (innerPlay, stepRunner) => async () => stepRunner(label, innerPlay, playContext),
diff --git a/code/lib/store/src/csf/testing-utils/index.ts b/code/lib/store/src/csf/testing-utils/index.ts
index b0e663dc5a04..4db39dba0c6e 100644
--- a/code/lib/store/src/csf/testing-utils/index.ts
+++ b/code/lib/store/src/csf/testing-utils/index.ts
@@ -1,6 +1,7 @@
+import type { AnnotatedStoryFn } from '@storybook/csf';
 import { isExportStory } from '@storybook/csf';
 import type {
-  Framework,
+  Renderer,
   Args,
   ComponentAnnotations,
   LegacyStoryAnnotationsOrFn,
@@ -9,6 +10,7 @@ import type {
   Store_ComposeStory,
   Store_CSFExports,
   StoryContext,
+  Parameters,
 } from '@storybook/types';
 
 import { HooksContext } from '@storybook/addons';
@@ -21,18 +23,18 @@ import { normalizeProjectAnnotations } from '../normalizeProjectAnnotations';
 
 let GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS = {};
 
-export function setProjectAnnotations<TFramework extends Framework = Framework>(
-  projectAnnotations: ProjectAnnotations<TFramework> | ProjectAnnotations<TFramework>[]
+export function setProjectAnnotations<TRenderer extends Renderer = Renderer>(
+  projectAnnotations: ProjectAnnotations<TRenderer> | ProjectAnnotations<TRenderer>[]
 ) {
   const annotations = Array.isArray(projectAnnotations) ? projectAnnotations : [projectAnnotations];
   GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS = composeConfigs(annotations);
 }
 
-export function composeStory<TFramework extends Framework = Framework, TArgs extends Args = Args>(
-  storyAnnotations: LegacyStoryAnnotationsOrFn<TFramework>,
-  componentAnnotations: ComponentAnnotations<TFramework, TArgs>,
-  projectAnnotations: ProjectAnnotations<TFramework> = GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS,
-  defaultConfig: ProjectAnnotations<TFramework> = {},
+export function composeStory<TRenderer extends Renderer = Renderer, TArgs extends Args = Args>(
+  storyAnnotations: LegacyStoryAnnotationsOrFn<TRenderer>,
+  componentAnnotations: ComponentAnnotations<TRenderer, TArgs>,
+  projectAnnotations: ProjectAnnotations<TRenderer> = GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS,
+  defaultConfig: ProjectAnnotations<TRenderer> = {},
   exportsName?: string
 ) {
   if (storyAnnotations === undefined) {
@@ -43,7 +45,7 @@ export function composeStory<TFramework extends Framework = Framework, TArgs ext
   // eslint-disable-next-line no-param-reassign
   componentAnnotations.title = componentAnnotations.title ?? 'ComposedStory';
   const normalizedComponentAnnotations =
-    normalizeComponentAnnotations<TFramework>(componentAnnotations);
+    normalizeComponentAnnotations<TRenderer>(componentAnnotations);
 
   const storyName =
     exportsName ||
@@ -52,7 +54,7 @@ export function composeStory<TFramework extends Framework = Framework, TArgs ext
     storyAnnotations.name ||
     'unknown';
 
-  const normalizedStory = normalizeStory<TFramework>(
+  const normalizedStory = normalizeStory<TRenderer>(
     storyName,
     storyAnnotations,
     normalizedComponentAnnotations
@@ -63,7 +65,7 @@ export function composeStory<TFramework extends Framework = Framework, TArgs ext
     ...defaultConfig,
   });
 
-  const story = prepareStory<TFramework>(
+  const story = prepareStory<TRenderer>(
     normalizedStory,
     normalizedComponentAnnotations,
     normalizedProjectAnnotations
@@ -85,14 +87,14 @@ export function composeStory<TFramework extends Framework = Framework, TArgs ext
   composedStory.storyName = storyName;
   composedStory.args = story.initialArgs;
   composedStory.play = story.playFunction as Store_ComposedStoryPlayFn;
-  composedStory.parameters = story.parameters;
+  composedStory.parameters = story.parameters as Parameters;
 
   return composedStory;
 }
 
 export function composeStories<TModule extends Store_CSFExports>(
   storiesImport: TModule,
-  globalConfig: ProjectAnnotations<Framework>,
+  globalConfig: ProjectAnnotations<Renderer>,
   composeStoryFn: Store_ComposeStory
 ) {
   // eslint-disable-next-line @typescript-eslint/naming-convention
diff --git a/code/lib/store/src/decorators.test.ts b/code/lib/store/src/decorators.test.ts
index df4bab1e4e50..b6ced0754f5e 100644
--- a/code/lib/store/src/decorators.test.ts
+++ b/code/lib/store/src/decorators.test.ts
@@ -1,9 +1,9 @@
 import { expect } from '@jest/globals';
-import type { Framework, StoryContext } from '@storybook/types';
+import type { Renderer, StoryContext } from '@storybook/types';
 
 import { defaultDecorateStory } from './decorators';
 
-function makeContext(input: Record<string, any> = {}): StoryContext<Framework> {
+function makeContext(input: Record<string, any> = {}): StoryContext<Renderer> {
   return {
     id: 'id',
     kind: 'kind',
@@ -11,7 +11,7 @@ function makeContext(input: Record<string, any> = {}): StoryContext<Framework> {
     viewMode: 'story',
     parameters: {},
     ...input,
-  } as StoryContext<Framework>;
+  } as StoryContext<Renderer>;
 }
 
 describe('client-api.decorators', () => {
diff --git a/code/lib/store/src/decorators.ts b/code/lib/store/src/decorators.ts
index 8868cd803af4..f76597423b29 100644
--- a/code/lib/store/src/decorators.ts
+++ b/code/lib/store/src/decorators.ts
@@ -1,5 +1,5 @@
 import type {
-  Framework,
+  Renderer,
   DecoratorFunction,
   LegacyStoryFn,
   PartialStoryFn,
@@ -7,11 +7,11 @@ import type {
   StoryContextUpdate,
 } from '@storybook/types';
 
-export function decorateStory<TFramework extends Framework>(
-  storyFn: LegacyStoryFn<TFramework>,
-  decorator: DecoratorFunction<TFramework>,
-  bindWithContext: (storyFn: LegacyStoryFn<TFramework>) => PartialStoryFn<TFramework>
-): LegacyStoryFn<TFramework> {
+export function decorateStory<TRenderer extends Renderer>(
+  storyFn: LegacyStoryFn<TRenderer>,
+  decorator: DecoratorFunction<TRenderer>,
+  bindWithContext: (storyFn: LegacyStoryFn<TRenderer>) => PartialStoryFn<TRenderer>
+): LegacyStoryFn<TRenderer> {
   // Bind the partially decorated storyFn so that when it is called it always knows about the story context,
   // no matter what it is passed directly. This is because we cannot guarantee a decorator will
   // pass the context down to the next decorated story in the chain.
@@ -42,17 +42,17 @@ export function sanitizeStoryContextUpdate({
   return update;
 }
 
-export function defaultDecorateStory<TFramework extends Framework>(
-  storyFn: LegacyStoryFn<TFramework>,
-  decorators: DecoratorFunction<TFramework>[]
-): LegacyStoryFn<TFramework> {
+export function defaultDecorateStory<TRenderer extends Renderer>(
+  storyFn: LegacyStoryFn<TRenderer>,
+  decorators: DecoratorFunction<TRenderer>[]
+): LegacyStoryFn<TRenderer> {
   // We use a trick to avoid recreating the bound story function inside `decorateStory`.
   // Instead we pass it a context "getter", which is defined once (at "decoration time")
   // The getter reads a variable which is scoped to this call of `decorateStory`
   // (ie to this story), so there is no possibility of overlap.
   // This will break if you call the same story twice interleaved
   // (React might do it if you rendered the same story twice in the one ReactDom.render call, for instance)
-  const contextStore: Store_ContextStore<TFramework> = {};
+  const contextStore: Store_ContextStore<TRenderer> = {};
 
   /**
    * When you call the story function inside a decorator, e.g.:
@@ -65,7 +65,7 @@ export function defaultDecorateStory<TFramework extends Framework>(
    * merged in with the default context
    */
   const bindWithContext =
-    (decoratedStoryFn: LegacyStoryFn<TFramework>): PartialStoryFn<TFramework> =>
+    (decoratedStoryFn: LegacyStoryFn<TRenderer>): PartialStoryFn<TRenderer> =>
     (update) => {
       // This code path isn't possible because we always set `contextStore.value` before calling
       // `decoratedWithContextStore`, but TS doesn't know that.
diff --git a/code/lib/store/src/inferArgTypes.ts b/code/lib/store/src/inferArgTypes.ts
index 76f009d31385..fab33db45862 100644
--- a/code/lib/store/src/inferArgTypes.ts
+++ b/code/lib/store/src/inferArgTypes.ts
@@ -1,7 +1,7 @@
 import mapValues from 'lodash/mapValues';
 import { dedent } from 'ts-dedent';
 import { logger } from '@storybook/client-logger';
-import type { Framework, SBType, ArgTypesEnhancer } from '@storybook/types';
+import type { Renderer, SBType, ArgTypesEnhancer } from '@storybook/types';
 import { combineParameters } from './parameters';
 
 const inferType = (value: any, name: string, visited: Set<any>): SBType => {
@@ -41,7 +41,7 @@ const inferType = (value: any, name: string, visited: Set<any>): SBType => {
   return { name: 'object', value: {} };
 };
 
-export const inferArgTypes: ArgTypesEnhancer<Framework> = (context) => {
+export const inferArgTypes: ArgTypesEnhancer<Renderer> = (context) => {
   const { id, argTypes: userArgTypes = {}, initialArgs = {} } = context;
   const argTypes = mapValues(initialArgs, (arg, key) => ({
     name: key,
diff --git a/code/lib/store/src/inferControls.ts b/code/lib/store/src/inferControls.ts
index a603fa9b4fec..a77a5a71608a 100644
--- a/code/lib/store/src/inferControls.ts
+++ b/code/lib/store/src/inferControls.ts
@@ -1,7 +1,7 @@
 import mapValues from 'lodash/mapValues';
 import { logger } from '@storybook/client-logger';
 import type {
-  Framework,
+  Renderer,
   ArgTypesEnhancer,
   SBEnumType,
   Store_ControlsMatchers,
@@ -61,7 +61,7 @@ const inferControl = (
   }
 };
 
-export const inferControls: ArgTypesEnhancer<Framework> = (context) => {
+export const inferControls: ArgTypesEnhancer<Renderer> = (context) => {
   const {
     argTypes,
     // eslint-disable-next-line @typescript-eslint/naming-convention
diff --git a/code/lib/types/package.json b/code/lib/types/package.json
index f69dc18f1a0a..02719893f890 100644
--- a/code/lib/types/package.json
+++ b/code/lib/types/package.json
@@ -47,7 +47,7 @@
     "file-system-cache": "^2.0.0"
   },
   "devDependencies": {
-    "@storybook/csf": "0.0.2--canary.53.4879818.0",
+    "@storybook/csf": "0.0.2-next.5",
     "@types/node": "^16.0.0",
     "synchronous-promise": "^2.0.15",
     "typescript": "~4.6.3"
diff --git a/code/lib/types/src/modules/addons.ts b/code/lib/types/src/modules/addons.ts
index 2cfe44360031..d45ab93d4f60 100644
--- a/code/lib/types/src/modules/addons.ts
+++ b/code/lib/types/src/modules/addons.ts
@@ -8,7 +8,7 @@ import type {
   ComponentTitle,
   DecoratorFunction as DecoratorFunctionForFramework,
   InputType,
-  Framework,
+  Renderer,
   LegacyStoryFn as LegacyStoryFnForFramework,
   LoaderFunction as LoaderFunctionForFramework,
   Parameters,
@@ -89,8 +89,8 @@ export interface Addon_OptionsParameter extends Object {
   [key: string]: any;
 }
 
-export type Addon_StoryContext<TFramework extends Framework = Framework> =
-  StoryContextForFramework<TFramework>;
+export type Addon_StoryContext<TRenderer extends Renderer = Renderer> =
+  StoryContextForFramework<TRenderer>;
 export type Addon_StoryContextUpdate = Partial<Addon_StoryContext>;
 
 type Addon_ReturnTypeFramework<ReturnType> = {
diff --git a/code/lib/types/src/modules/client-api.ts b/code/lib/types/src/modules/client-api.ts
index d9739a80227b..ee1fddf7e0bb 100644
--- a/code/lib/types/src/modules/client-api.ts
+++ b/code/lib/types/src/modules/client-api.ts
@@ -5,7 +5,7 @@ import type {
   Args,
   ArgTypes,
   DecoratorFunction,
-  Framework,
+  Renderer,
   LoaderFunction,
   Parameters,
   LegacyStoryFn,
@@ -68,13 +68,13 @@ export interface ClientAPI_ClientApiAddons<StoryFnReturnType> {
 
 export type ClientAPI_RenderContextWithoutStoryContext = Omit<Store_RenderContext, 'storyContext'>;
 
-export interface ClientAPI_GetStorybookStory<TFramework extends Framework> {
+export interface ClientAPI_GetStorybookStory<TRenderer extends Renderer> {
   name: string;
-  render: LegacyStoryFn<TFramework>;
+  render: LegacyStoryFn<TRenderer>;
 }
 
-export interface ClientAPI_GetStorybookKind<TFramework extends Framework> {
+export interface ClientAPI_GetStorybookKind<TRenderer extends Renderer> {
   kind: string;
   fileName: string;
-  stories: ClientAPI_GetStorybookStory<TFramework>[];
+  stories: ClientAPI_GetStorybookStory<TRenderer>[];
 }
diff --git a/code/lib/types/src/modules/csf.ts b/code/lib/types/src/modules/csf.ts
index 96c8d1363fc2..28b1753ef69e 100644
--- a/code/lib/types/src/modules/csf.ts
+++ b/code/lib/types/src/modules/csf.ts
@@ -15,7 +15,6 @@ import type {
   Conditional,
   DecoratorApplicator,
   DecoratorFunction,
-  Framework,
   Globals,
   GlobalTypes,
   IncludeExcludeOptions,
@@ -28,6 +27,7 @@ import type {
   PartialStoryFn,
   PlayFunction,
   PlayFunctionContext,
+  Renderer,
   SBArrayType,
   SBEnumType,
   SBIntersectionType,
@@ -74,7 +74,7 @@ export type {
   Conditional,
   DecoratorApplicator,
   DecoratorFunction,
-  Framework,
+  Renderer,
   Globals,
   GlobalTypes,
   IncludeExcludeOptions,
diff --git a/code/lib/types/src/modules/store.ts b/code/lib/types/src/modules/store.ts
index 94a6a1f0c903..534945113d49 100644
--- a/code/lib/types/src/modules/store.ts
+++ b/code/lib/types/src/modules/store.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import type { SynchronousPromise } from 'synchronous-promise';
-import type { Framework, ProjectAnnotations as CsfProjectAnnotations } from '@storybook/csf';
+import type { Renderer, ProjectAnnotations as CsfProjectAnnotations } from '@storybook/csf';
 
 import type { Addon_IndexEntry, Addon_StoryIndexEntry } from './addons';
 import type {
@@ -27,7 +27,7 @@ import type {
   ViewMode,
 } from './csf';
 
-export interface WebFramework extends Framework {
+export interface WebRenderer extends Renderer {
   canvasElement: HTMLElement;
 }
 
@@ -39,34 +39,34 @@ export type Store_ModuleImportFn = (path: Path) => Store_PromiseLike<Store_Modul
 type Store_MaybePromise<T> = Promise<T> | T;
 
 export type TeardownRenderToCanvas = () => Store_MaybePromise<void>;
-export type RenderToCanvas<TFramework extends Framework> = (
-  context: Store_RenderContext<TFramework>,
-  element: TFramework['canvasElement']
+export type RenderToCanvas<TRenderer extends Renderer> = (
+  context: Store_RenderContext<TRenderer>,
+  element: TRenderer['canvasElement']
 ) => Store_MaybePromise<void | TeardownRenderToCanvas>;
 
-export type ProjectAnnotations<TFramework extends Framework> = CsfProjectAnnotations<TFramework> & {
-  renderToCanvas?: RenderToCanvas<TFramework>;
+export type ProjectAnnotations<TRenderer extends Renderer> = CsfProjectAnnotations<TRenderer> & {
+  renderToCanvas?: RenderToCanvas<TRenderer>;
 
   /* @deprecated use renderToCanvas */
-  renderToDOM?: RenderToCanvas<TFramework>;
+  renderToDOM?: RenderToCanvas<TRenderer>;
 };
 
-export type Store_NormalizedProjectAnnotations<TFramework extends Framework = Framework> =
-  ProjectAnnotations<TFramework> & {
+export type Store_NormalizedProjectAnnotations<TRenderer extends Renderer = Renderer> =
+  ProjectAnnotations<TRenderer> & {
     argTypes?: StrictArgTypes;
     globalTypes?: StrictGlobalTypes;
   };
 
-export type Store_NormalizedComponentAnnotations<TFramework extends Framework = Framework> =
-  ComponentAnnotations<TFramework> & {
+export type Store_NormalizedComponentAnnotations<TRenderer extends Renderer = Renderer> =
+  ComponentAnnotations<TRenderer> & {
     // Useful to guarantee that id & title exists
     id: ComponentId;
     title: ComponentTitle;
     argTypes?: StrictArgTypes;
   };
 
-export type Store_NormalizedStoryAnnotations<TFramework extends Framework = Framework> = Omit<
-  StoryAnnotations<TFramework>,
+export type Store_NormalizedStoryAnnotations<TRenderer extends Renderer = Renderer> = Omit<
+  StoryAnnotations<TRenderer>,
   'storyName' | 'story'
 > & {
   moduleExport: Store_ModuleExport;
@@ -74,42 +74,39 @@ export type Store_NormalizedStoryAnnotations<TFramework extends Framework = Fram
   id: StoryId;
   argTypes?: StrictArgTypes;
   name: StoryName;
-  userStoryFn?: StoryFn<TFramework>;
+  userStoryFn?: StoryFn<TRenderer>;
 };
 
-export type Store_CSFFile<TFramework extends Framework = Framework> = {
-  meta: Store_NormalizedComponentAnnotations<TFramework>;
-  stories: Record<StoryId, Store_NormalizedStoryAnnotations<TFramework>>;
+export type Store_CSFFile<TRenderer extends Renderer = Renderer> = {
+  meta: Store_NormalizedComponentAnnotations<TRenderer>;
+  stories: Record<StoryId, Store_NormalizedStoryAnnotations<TRenderer>>;
 };
 
-export type Store_Story<TFramework extends Framework = Framework> =
-  StoryContextForEnhancers<TFramework> & {
+export type Store_Story<TRenderer extends Renderer = Renderer> =
+  StoryContextForEnhancers<TRenderer> & {
     moduleExport: Store_ModuleExport;
-    originalStoryFn: StoryFn<TFramework>;
-    undecoratedStoryFn: LegacyStoryFn<TFramework>;
-    unboundStoryFn: LegacyStoryFn<TFramework>;
+    originalStoryFn: StoryFn<TRenderer>;
+    undecoratedStoryFn: LegacyStoryFn<TRenderer>;
+    unboundStoryFn: LegacyStoryFn<TRenderer>;
     applyLoaders: (
-      context: StoryContextForLoaders<TFramework>
-    ) => Promise<
-      StoryContextForLoaders<TFramework> & { loaded: StoryContext<TFramework>['loaded'] }
-    >;
-    playFunction?: (context: StoryContext<TFramework>) => Promise<void> | void;
+      context: StoryContextForLoaders<TRenderer>
+    ) => Promise<StoryContextForLoaders<TRenderer> & { loaded: StoryContext<TRenderer>['loaded'] }>;
+    playFunction?: (context: StoryContext<TRenderer>) => Promise<void> | void;
   };
 
-export type Store_BoundStory<TFramework extends Framework = Framework> = Store_Story<TFramework> & {
-  storyFn: PartialStoryFn<TFramework>;
+export type Store_BoundStory<TRenderer extends Renderer = Renderer> = Store_Story<TRenderer> & {
+  storyFn: PartialStoryFn<TRenderer>;
 };
 
-export declare type Store_RenderContext<TFramework extends Framework = Framework> =
-  StoryIdentifier & {
-    showMain: () => void;
-    showError: (error: { title: string; description: string }) => void;
-    showException: (err: Error) => void;
-    forceRemount: boolean;
-    storyContext: StoryContext<TFramework>;
-    storyFn: PartialStoryFn<TFramework>;
-    unboundStoryFn: LegacyStoryFn<TFramework>;
-  };
+export declare type Store_RenderContext<TRenderer extends Renderer = Renderer> = StoryIdentifier & {
+  showMain: () => void;
+  showError: (error: { title: string; description: string }) => void;
+  showException: (err: Error) => void;
+  forceRemount: boolean;
+  storyContext: StoryContext<TRenderer>;
+  storyFn: PartialStoryFn<TRenderer>;
+  unboundStoryFn: LegacyStoryFn<TRenderer>;
+};
 
 export interface Store_V2CompatIndexEntry extends Omit<Addon_StoryIndexEntry, 'type'> {
   kind: Addon_StoryIndexEntry['title'];
@@ -141,10 +138,10 @@ export interface Store_Selection {
   viewMode: ViewMode;
 }
 
-export type Store_DecoratorApplicator<TFramework extends Framework = Framework> = (
-  storyFn: LegacyStoryFn<TFramework>,
-  decorators: DecoratorFunction<TFramework>[]
-) => LegacyStoryFn<TFramework>;
+export type Store_DecoratorApplicator<TRenderer extends Renderer = Renderer> = (
+  storyFn: LegacyStoryFn<TRenderer>,
+  decorators: DecoratorFunction<TRenderer>[]
+) => LegacyStoryFn<TRenderer>;
 
 export interface Store_StoriesSpecifier {
   directory: string;
@@ -166,14 +163,14 @@ export interface Store_NormalizedStoriesSpecifierEntry {
   importPathMatcher: RegExp;
 }
 
-export type Store_ContextStore<TFramework extends Framework> = {
-  value?: StoryContext<TFramework>;
+export type Store_ContextStore<TRenderer extends Renderer> = {
+  value?: StoryContext<TRenderer>;
 };
 
 export type Store_PropDescriptor = string[] | RegExp;
 
-export type Store_CSFExports<TFramework extends Framework = Framework> = {
-  default: ComponentAnnotations<TFramework, Args>;
+export type Store_CSFExports<TRenderer extends Renderer = Renderer> = {
+  default: ComponentAnnotations<TRenderer, Args>;
   __esModule?: boolean;
   __namedExportsOrder?: string[];
 };
@@ -185,14 +182,14 @@ export type Store_ComposedStoryPlayFn = (
   context: Store_ComposedStoryPlayContext
 ) => Promise<void> | void;
 
-export type Store_StoryFn<
-  TFramework extends Framework = Framework,
-  TArgs = Args
-> = AnnotatedStoryFn<TFramework, TArgs> & { play: Store_ComposedStoryPlayFn };
+export type Store_StoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = AnnotatedStoryFn<
+  TRenderer,
+  TArgs
+> & { play: Store_ComposedStoryPlayFn };
 
-export type Store_ComposedStory<TFramework extends Framework = Framework, TArgs = Args> =
-  | StoryFn<TFramework, TArgs>
-  | StoryAnnotations<TFramework, TArgs>;
+export type Store_ComposedStory<TRenderer extends Renderer = Renderer, TArgs = Args> =
+  | StoryFn<TRenderer, TArgs>
+  | StoryAnnotations<TRenderer, TArgs>;
 
 /**
  * T represents the whole ES module of a stories file. K of T means named exports (basically the Story type)
@@ -200,11 +197,11 @@ export type Store_ComposedStory<TFramework extends Framework = Framework, TArgs
  * 2. infer the actual prop type for each Story
  * 3. reconstruct Story with Partial. Story<Props> -> Story<Partial<Props>>
  */
-export type Store_StoriesWithPartialProps<TFramework extends Framework, TModule> = {
+export type Store_StoriesWithPartialProps<TRenderer extends Renderer, TModule> = {
   // @TODO once we can use Typescript 4.0 do this to exclude nonStory exports:
   // replace [K in keyof TModule] with [K in keyof TModule as TModule[K] extends ComposedStory<any> ? K : never]
   [K in keyof TModule]: TModule[K] extends Store_ComposedStory<infer _, infer TProps>
-    ? AnnotatedStoryFn<TFramework, Partial<TProps>>
+    ? AnnotatedStoryFn<TRenderer, Partial<TProps>>
     : unknown;
 };
 
@@ -214,16 +211,16 @@ export type Store_ControlsMatchers = {
 };
 
 export interface Store_ComposeStory<
-  TFramework extends Framework = Framework,
+  TRenderer extends Renderer = Renderer,
   TArgs extends Args = Args
 > {
   (
-    storyAnnotations: AnnotatedStoryFn<TFramework, TArgs> | StoryAnnotations<TFramework, TArgs>,
-    componentAnnotations: ComponentAnnotations<TFramework, TArgs>,
-    projectAnnotations: ProjectAnnotations<TFramework>,
+    storyAnnotations: AnnotatedStoryFn<TRenderer, TArgs> | StoryAnnotations<TRenderer, TArgs>,
+    componentAnnotations: ComponentAnnotations<TRenderer, TArgs>,
+    projectAnnotations: ProjectAnnotations<TRenderer>,
     exportsName?: string
   ): {
-    (extraArgs: Partial<TArgs>): TFramework['storyResult'];
+    (extraArgs: Partial<TArgs>): TRenderer['storyResult'];
     storyName: string;
     args: Args;
     play: Store_ComposedStoryPlayFn;
diff --git a/code/package.json b/code/package.json
index 9fe1262a12cf..e69db64de779 100644
--- a/code/package.json
+++ b/code/package.json
@@ -184,7 +184,7 @@
     "@storybook/core-events": "workspace:*",
     "@storybook/core-server": "workspace:*",
     "@storybook/core-webpack": "workspace:*",
-    "@storybook/csf": "next",
+    "@storybook/csf": "0.0.2-next.5",
     "@storybook/csf-plugin": "workspace:*",
     "@storybook/csf-tools": "workspace:*",
     "@storybook/docs-tools": "workspace:*",
@@ -350,6 +350,7 @@
     "zx": "^7.0.3"
   },
   "devDependencies": {
+    "eslint-import-resolver-typescript": "^3.5.2",
     "expect-type": "^0.14.2"
   },
   "dependenciesMeta": {
diff --git a/code/renderers/html/src/docs/sourceDecorator.ts b/code/renderers/html/src/docs/sourceDecorator.ts
index 419013e7372a..1920c6d9d767 100644
--- a/code/renderers/html/src/docs/sourceDecorator.ts
+++ b/code/renderers/html/src/docs/sourceDecorator.ts
@@ -5,7 +5,7 @@ import { addons, useEffect } from '@storybook/addons';
 import type { PartialStoryFn } from '@storybook/types';
 import { dedent } from 'ts-dedent';
 
-import type { HtmlFramework, StoryContext } from '../types';
+import type { HtmlRenderer, StoryContext } from '../types';
 
 import type { StoryFn } from '../public-types';
 
@@ -36,7 +36,7 @@ function applyTransformSource(source: string, context: StoryContext): string {
   return transformSource(source, context);
 }
 
-export function sourceDecorator(storyFn: PartialStoryFn<HtmlFramework>, context: StoryContext) {
+export function sourceDecorator(storyFn: PartialStoryFn<HtmlRenderer>, context: StoryContext) {
   const story = context?.parameters.docs?.source?.excludeDecorators
     ? (context.originalStoryFn as StoryFn)(context.args, context)
     : storyFn();
diff --git a/code/renderers/html/src/public-api.ts b/code/renderers/html/src/public-api.ts
index 71028b568418..04669852f092 100644
--- a/code/renderers/html/src/public-api.ts
+++ b/code/renderers/html/src/public-api.ts
@@ -1,13 +1,13 @@
 /* eslint-disable prefer-destructuring */
 import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
 import { start } from '@storybook/core-client';
-import type { HtmlFramework } from './types';
+import type { HtmlRenderer } from './types';
 
 import { renderToCanvas, render } from './render';
 
 const FRAMEWORK = 'html';
 
-interface ClientApi extends Addon_ClientStoryApi<HtmlFramework['storyResult']> {
+interface ClientApi extends Addon_ClientStoryApi<HtmlRenderer['storyResult']> {
   configure(loader: Addon_Loadable, module: NodeModule): void;
   forceReRender(): void;
   raw: () => any; // todo add type
diff --git a/code/renderers/html/src/public-types.ts b/code/renderers/html/src/public-types.ts
index 0591c18212b2..9cf7cddfd54f 100644
--- a/code/renderers/html/src/public-types.ts
+++ b/code/renderers/html/src/public-types.ts
@@ -5,7 +5,7 @@ import type {
   StoryAnnotations,
 } from '@storybook/types';
 
-import type { HtmlFramework } from './types';
+import type { HtmlRenderer } from './types';
 
 export type { Args, ArgTypes, Parameters } from '@storybook/types';
 
@@ -14,21 +14,21 @@ export type { Args, ArgTypes, Parameters } from '@storybook/types';
  *
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
-export type Meta<TArgs = Args> = ComponentAnnotations<HtmlFramework, TArgs>;
+export type Meta<TArgs = Args> = ComponentAnnotations<HtmlRenderer, TArgs>;
 
 /**
  * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryFn<TArgs = Args> = AnnotatedStoryFn<HtmlFramework, TArgs>;
+export type StoryFn<TArgs = Args> = AnnotatedStoryFn<HtmlRenderer, TArgs>;
 
 /**
  * Story function that represents a CSFv3 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryObj<TArgs = Args> = StoryAnnotations<HtmlFramework, TArgs>;
+export type StoryObj<TArgs = Args> = StoryAnnotations<HtmlRenderer, TArgs>;
 
 /**
  * @deprecated Use `StoryFn` instead.
diff --git a/code/renderers/html/src/render.ts b/code/renderers/html/src/render.ts
index 05a2d9e9721b..3b40e1e50636 100644
--- a/code/renderers/html/src/render.ts
+++ b/code/renderers/html/src/render.ts
@@ -5,11 +5,11 @@ import global from 'global';
 import { dedent } from 'ts-dedent';
 import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-web';
 import type { Store_RenderContext, ArgsStoryFn } from '@storybook/types';
-import type { HtmlFramework } from './types';
+import type { HtmlRenderer } from './types';
 
 const { Node } = global;
 
-export const render: ArgsStoryFn<HtmlFramework> = (args, context) => {
+export const render: ArgsStoryFn<HtmlRenderer> = (args, context) => {
   const { id, component: Component } = context;
 
   if (typeof Component === 'string') {
@@ -42,8 +42,8 @@ export const render: ArgsStoryFn<HtmlFramework> = (args, context) => {
 };
 
 export function renderToCanvas(
-  { storyFn, kind, name, showMain, showError, forceRemount }: Store_RenderContext<HtmlFramework>,
-  canvasElement: HtmlFramework['canvasElement']
+  { storyFn, kind, name, showMain, showError, forceRemount }: Store_RenderContext<HtmlRenderer>,
+  canvasElement: HtmlRenderer['canvasElement']
 ) {
   const element = storyFn();
   showMain();
diff --git a/code/renderers/html/src/types.ts b/code/renderers/html/src/types.ts
index 0aac594ea9a6..992efc87db72 100644
--- a/code/renderers/html/src/types.ts
+++ b/code/renderers/html/src/types.ts
@@ -1,7 +1,7 @@
 import type {
   ArgsStoryFn,
   StoryContext as DefaultStoryContext,
-  WebFramework,
+  WebRenderer,
 } from '@storybook/types';
 
 import type { parameters } from './config';
@@ -15,11 +15,15 @@ export interface ShowErrorArgs {
   description: string;
 }
 
-export interface HtmlFramework extends WebFramework {
-  component: string | HTMLElement | ArgsStoryFn<HtmlFramework>;
+/**
+ * @deprecated Use `HtmlRenderer` instead.
+ */
+export type HtmlFramework = HtmlRenderer;
+export interface HtmlRenderer extends WebRenderer {
+  component: string | HTMLElement | ArgsStoryFn<HtmlRenderer>;
   storyResult: StoryFnHtmlReturnType;
 }
 
-export type StoryContext = DefaultStoryContext<HtmlFramework> & {
-  parameters: DefaultStoryContext<HtmlFramework>['parameters'] & typeof parameters;
+export type StoryContext = DefaultStoryContext<HtmlRenderer> & {
+  parameters: DefaultStoryContext<HtmlRenderer>['parameters'] & typeof parameters;
 };
diff --git a/code/renderers/preact/src/public-api.ts b/code/renderers/preact/src/public-api.ts
index 9bb5613a82c2..198e254f7547 100644
--- a/code/renderers/preact/src/public-api.ts
+++ b/code/renderers/preact/src/public-api.ts
@@ -3,9 +3,9 @@ import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
 import { start } from '@storybook/core-client';
 
 import { renderToCanvas } from './render';
-import type { PreactFramework } from './types';
+import type { PreactRenderer } from './types';
 
-export interface ClientApi extends Addon_ClientStoryApi<PreactFramework['storyResult']> {
+export interface ClientApi extends Addon_ClientStoryApi<PreactRenderer['storyResult']> {
   configure(loader: Addon_Loadable, module: NodeModule): void;
   forceReRender(): void;
   raw: () => any; // todo add type
diff --git a/code/renderers/preact/src/public-types.ts b/code/renderers/preact/src/public-types.ts
index ecee7291c1ec..11a55e5dabd0 100644
--- a/code/renderers/preact/src/public-types.ts
+++ b/code/renderers/preact/src/public-types.ts
@@ -4,7 +4,7 @@ import type {
   ComponentAnnotations,
   StoryAnnotations,
 } from '@storybook/types';
-import type { PreactFramework } from './types';
+import type { PreactRenderer } from './types';
 
 export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/types';
 
@@ -13,21 +13,21 @@ export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/types'
  *
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
-export type Meta<TArgs = Args> = ComponentAnnotations<PreactFramework, TArgs>;
+export type Meta<TArgs = Args> = ComponentAnnotations<PreactRenderer, TArgs>;
 
 /**
  * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryFn<TArgs = Args> = AnnotatedStoryFn<PreactFramework, TArgs>;
+export type StoryFn<TArgs = Args> = AnnotatedStoryFn<PreactRenderer, TArgs>;
 
 /**
  * Story function that represents a CSFv3 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryObj<TArgs = Args> = StoryAnnotations<PreactFramework, TArgs>;
+export type StoryObj<TArgs = Args> = StoryAnnotations<PreactRenderer, TArgs>;
 
 /**
  * @deprecated Use `StoryFn` instead.
diff --git a/code/renderers/preact/src/render.tsx b/code/renderers/preact/src/render.tsx
index c90b5bfc8da5..37403636a945 100644
--- a/code/renderers/preact/src/render.tsx
+++ b/code/renderers/preact/src/render.tsx
@@ -3,11 +3,11 @@ import * as preact from 'preact';
 import { dedent } from 'ts-dedent';
 import type { Store_RenderContext, ArgsStoryFn } from '@storybook/types';
 
-import type { StoryFnPreactReturnType, PreactFramework } from './types';
+import type { StoryFnPreactReturnType, PreactRenderer } from './types';
 
 const { h } = preact;
 
-export const render: ArgsStoryFn<PreactFramework> = (args, context) => {
+export const render: ArgsStoryFn<PreactRenderer> = (args, context) => {
   const { id, component: Component } = context;
   if (!Component) {
     throw new Error(
@@ -35,9 +35,9 @@ function preactRender(story: StoryFnPreactReturnType | null, canvasElement: Elem
 const StoryHarness: preact.FunctionalComponent<{
   name: string;
   title: string;
-  showError: Store_RenderContext<PreactFramework>['showError'];
+  showError: Store_RenderContext<PreactRenderer>['showError'];
   storyFn: () => any;
-  canvasElement: PreactFramework['canvasElement'];
+  canvasElement: PreactRenderer['canvasElement'];
 }> = ({ showError, name, title, storyFn, canvasElement }) => {
   const content = preact.h(storyFn as any, null);
   if (!content) {
@@ -54,8 +54,8 @@ const StoryHarness: preact.FunctionalComponent<{
 };
 
 export function renderToCanvas(
-  { storyFn, title, name, showMain, showError, forceRemount }: Store_RenderContext<PreactFramework>,
-  canvasElement: PreactFramework['canvasElement']
+  { storyFn, title, name, showMain, showError, forceRemount }: Store_RenderContext<PreactRenderer>,
+  canvasElement: PreactRenderer['canvasElement']
 ) {
   if (forceRemount) {
     preactRender(null, canvasElement);
diff --git a/code/renderers/preact/src/types.ts b/code/renderers/preact/src/types.ts
index 8864d47da626..233528349a1e 100644
--- a/code/renderers/preact/src/types.ts
+++ b/code/renderers/preact/src/types.ts
@@ -1,4 +1,4 @@
-import type { WebFramework } from '@storybook/types';
+import type { WebRenderer } from '@storybook/types';
 import type { AnyComponent } from 'preact';
 
 export type { RenderContext } from '@storybook/types';
@@ -10,7 +10,14 @@ export interface ShowErrorArgs {
   description: string;
 }
 
-export interface PreactFramework extends WebFramework {
+/**
+ * @dep
+ */
+/**
+ * @deprecated Use `PreactRenderer` instead.
+ */
+export type PreactFramework = PreactRenderer;
+export interface PreactRenderer extends WebRenderer {
   component: AnyComponent<any, any>;
   storyResult: StoryFnPreactReturnType;
 }
diff --git a/code/renderers/react/src/docs/extractArgTypes.test.ts b/code/renderers/react/src/docs/extractArgTypes.test.ts
index 7be5004b1650..1c1c1ab06a98 100644
--- a/code/renderers/react/src/docs/extractArgTypes.test.ts
+++ b/code/renderers/react/src/docs/extractArgTypes.test.ts
@@ -5,7 +5,7 @@ import requireFromString from 'require-from-string';
 import { transformFileSync, transformSync } from '@babel/core';
 
 import { inferControls } from '@storybook/store';
-import type { Framework } from '@storybook/types';
+import type { Renderer } from '@storybook/types';
 import { normalizeNewlines } from '@storybook/docs-tools';
 
 import type { StoryContext } from '../types';
@@ -88,7 +88,7 @@ describe('react component properties', () => {
             const rows = inferControls({
               argTypes,
               parameters,
-            } as unknown as StoryContext<Framework>);
+            } as unknown as StoryContext<Renderer>);
             expect(rows).toMatchSpecificSnapshot(path.join(testDir, 'argTypes.snapshot'));
           });
         }
diff --git a/code/renderers/react/src/docs/jsxDecorator.tsx b/code/renderers/react/src/docs/jsxDecorator.tsx
index 75e9d4616972..cbef75139433 100644
--- a/code/renderers/react/src/docs/jsxDecorator.tsx
+++ b/code/renderers/react/src/docs/jsxDecorator.tsx
@@ -9,7 +9,7 @@ import type { StoryContext, ArgsStoryFn, PartialStoryFn } from '@storybook/types
 import { SourceType, SNIPPET_RENDERED, getDocgenSection } from '@storybook/docs-tools';
 import { logger } from '@storybook/client-logger';
 
-import type { ReactFramework } from '../types';
+import type { ReactRenderer } from '../types';
 
 import { isMemo, isForwardRef } from './lib';
 
@@ -23,14 +23,14 @@ type JSXOptions = Options & {
   /** Override the display name used for a component */
   displayName?: string | Options['displayName'];
   /** A function ran after a story is rendered */
-  transformSource?(dom: string, context?: StoryContext<ReactFramework>): string;
+  transformSource?(dom: string, context?: StoryContext<ReactRenderer>): string;
 };
 
 /** Run the user supplied transformSource function if it exists */
 const applyTransformSource = (
   domString: string,
   options: JSXOptions,
-  context?: StoryContext<ReactFramework>
+  context?: StoryContext<ReactRenderer>
 ) => {
   if (typeof options.transformSource !== 'function') {
     return domString;
@@ -132,7 +132,7 @@ const defaultOpts = {
   showDefaultProps: false,
 };
 
-export const skipJsxRender = (context: StoryContext<ReactFramework>) => {
+export const skipJsxRender = (context: StoryContext<ReactRenderer>) => {
   const sourceParams = context?.parameters.docs?.source;
   const isArgsStory = context?.parameters.__isArgsStory;
 
@@ -160,8 +160,8 @@ const mdxToJsx = (node: any) => {
 };
 
 export const jsxDecorator = (
-  storyFn: PartialStoryFn<ReactFramework>,
-  context: StoryContext<ReactFramework>
+  storyFn: PartialStoryFn<ReactRenderer>,
+  context: StoryContext<ReactRenderer>
 ) => {
   const channel = addons.getChannel();
   const skip = skipJsxRender(context);
@@ -188,7 +188,7 @@ export const jsxDecorator = (
 
   // Exclude decorators from source code snippet by default
   const storyJsx = context?.parameters.docs?.source?.excludeDecorators
-    ? (context.originalStoryFn as ArgsStoryFn<ReactFramework>)(context.args, context)
+    ? (context.originalStoryFn as ArgsStoryFn<ReactRenderer>)(context.args, context)
     : story;
 
   const sourceJsx = mdxToJsx(storyJsx);
diff --git a/code/renderers/react/src/public-api.tsx b/code/renderers/react/src/public-api.tsx
index b6fde0ed54ab..3c066ba0bfb5 100644
--- a/code/renderers/react/src/public-api.tsx
+++ b/code/renderers/react/src/public-api.tsx
@@ -8,9 +8,9 @@ import type {
 import { start } from '@storybook/core-client';
 
 import { renderToCanvas, render } from './render';
-import type { ReactFramework } from './types';
+import type { ReactRenderer } from './types';
 
-interface ClientApi extends Addon_ClientStoryApi<ReactFramework['storyResult']> {
+interface ClientApi extends Addon_ClientStoryApi<ReactRenderer['storyResult']> {
   configure(loader: Addon_Loadable, module: NodeModule): void;
   forceReRender(): void;
   raw: () => any; // todo add type
@@ -29,4 +29,4 @@ export const configure: ClientApi['configure'] = (...args) => api.configure(FRAM
 export const forceReRender: ClientApi['forceReRender'] = api.forceReRender;
 export const raw: ClientApi['raw'] = api.clientApi.raw;
 
-export type DecoratorFn<TArgs = Args> = DecoratorFunction<ReactFramework, TArgs>;
+export type DecoratorFn<TArgs = Args> = DecoratorFunction<ReactRenderer, TArgs>;
diff --git a/code/renderers/react/src/public-types.test.tsx b/code/renderers/react/src/public-types.test.tsx
index 42aaf6217feb..538e4cb9db3f 100644
--- a/code/renderers/react/src/public-types.test.tsx
+++ b/code/renderers/react/src/public-types.test.tsx
@@ -10,9 +10,9 @@ import type { SetOptional } from 'type-fest';
 
 import type { DecoratorFn } from './public-api';
 import type { Meta, StoryObj } from './public-types';
-import type { ReactFramework } from './types';
+import type { ReactRenderer } from './types';
 
-type ReactStory<Args, RequiredArgs> = StoryAnnotations<ReactFramework, Args, RequiredArgs>;
+type ReactStory<Args, RequiredArgs> = StoryAnnotations<ReactRenderer, Args, RequiredArgs>;
 
 type ButtonProps = { label: string; disabled: boolean };
 const Button: (props: ButtonProps) => JSX.Element = () => <></>;
diff --git a/code/renderers/react/src/public-types.ts b/code/renderers/react/src/public-types.ts
index 531ece5874ed..6f89b2f76472 100644
--- a/code/renderers/react/src/public-types.ts
+++ b/code/renderers/react/src/public-types.ts
@@ -10,9 +10,9 @@ import type {
 import type { ComponentProps, ComponentType, JSXElementConstructor } from 'react';
 import type { SetOptional, Simplify } from 'type-fest';
 
-import type { ReactFramework } from './types';
+import type { ReactRenderer } from './types';
 
-export { ReactFramework };
+export { ReactRenderer };
 
 type JSXElement = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
 
@@ -22,8 +22,8 @@ type JSXElement = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
 export type Meta<TCmpOrArgs = Args> = TCmpOrArgs extends ComponentType<any>
-  ? ComponentAnnotations<ReactFramework, ComponentProps<TCmpOrArgs>>
-  : ComponentAnnotations<ReactFramework, TCmpOrArgs>;
+  ? ComponentAnnotations<ReactRenderer, ComponentProps<TCmpOrArgs>>
+  : ComponentAnnotations<ReactRenderer, TCmpOrArgs>;
 
 /**
  * Story function that represents a CSFv2 component example.
@@ -31,8 +31,8 @@ export type Meta<TCmpOrArgs = Args> = TCmpOrArgs extends ComponentType<any>
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
 export type StoryFn<TCmpOrArgs = Args> = TCmpOrArgs extends ComponentType<any>
-  ? AnnotatedStoryFn<ReactFramework, ComponentProps<TCmpOrArgs>>
-  : AnnotatedStoryFn<ReactFramework, TCmpOrArgs>;
+  ? AnnotatedStoryFn<ReactRenderer, ComponentProps<TCmpOrArgs>>
+  : AnnotatedStoryFn<ReactRenderer, TCmpOrArgs>;
 
 /**
  * Story function that represents a CSFv3 component example.
@@ -40,23 +40,23 @@ export type StoryFn<TCmpOrArgs = Args> = TCmpOrArgs extends ComponentType<any>
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
 export type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
-  render?: ArgsStoryFn<ReactFramework, any>;
+  render?: ArgsStoryFn<ReactRenderer, any>;
   component?: infer Component;
   args?: infer DefaultArgs;
 }
   ? Simplify<
       (Component extends ComponentType<any> ? ComponentProps<Component> : unknown) &
-        ArgsFromMeta<ReactFramework, TMetaOrCmpOrArgs>
+        ArgsFromMeta<ReactRenderer, TMetaOrCmpOrArgs>
     > extends infer TArgs
     ? StoryAnnotations<
-        ReactFramework,
+        ReactRenderer,
         TArgs,
         SetOptional<TArgs, Extract<keyof TArgs, keyof (DefaultArgs & ActionArgs<TArgs>)>>
       >
     : never
   : TMetaOrCmpOrArgs extends ComponentType<any>
-  ? StoryAnnotations<ReactFramework, ComponentProps<TMetaOrCmpOrArgs>>
-  : StoryAnnotations<ReactFramework, TMetaOrCmpOrArgs>;
+  ? StoryAnnotations<ReactRenderer, ComponentProps<TMetaOrCmpOrArgs>>
+  : StoryAnnotations<ReactRenderer, TMetaOrCmpOrArgs>;
 
 type ActionArgs<RArgs> = {
   [P in keyof RArgs as ((...args: any[]) => void) extends RArgs[P] ? P : never]: RArgs[P];
diff --git a/code/renderers/react/src/render.tsx b/code/renderers/react/src/render.tsx
index 8b77447dd5ae..d0a2c112e722 100644
--- a/code/renderers/react/src/render.tsx
+++ b/code/renderers/react/src/render.tsx
@@ -14,14 +14,14 @@ import type { Root as ReactRoot } from 'react-dom/client';
 
 import type { Store_RenderContext, ArgsStoryFn } from '@storybook/types';
 
-import type { ReactFramework, StoryContext } from './types';
+import type { ReactRenderer, StoryContext } from './types';
 
 const { FRAMEWORK_OPTIONS } = global;
 
 // A map of all rendered React 18 nodes
 const nodes = new Map<Element, ReactRoot>();
 
-export const render: ArgsStoryFn<ReactFramework> = (args, context) => {
+export const render: ArgsStoryFn<ReactRenderer> = (args, context) => {
   const { id, component: Component } = context;
   if (!Component) {
     throw new Error(
@@ -135,10 +135,10 @@ export async function renderToCanvas(
     showMain,
     showException,
     forceRemount,
-  }: Store_RenderContext<ReactFramework>,
-  canvasElement: ReactFramework['canvasElement']
+  }: Store_RenderContext<ReactRenderer>,
+  canvasElement: ReactRenderer['canvasElement']
 ) {
-  const Story = unboundStoryFn as FC<StoryContext<ReactFramework>>;
+  const Story = unboundStoryFn as FC<StoryContext<ReactRenderer>>;
 
   const content = (
     <ErrorBoundary showMain={showMain} showException={showException}>
diff --git a/code/renderers/react/src/testing-api.ts b/code/renderers/react/src/testing-api.ts
index c1213f837eb7..0904edc0fa02 100644
--- a/code/renderers/react/src/testing-api.ts
+++ b/code/renderers/react/src/testing-api.ts
@@ -14,7 +14,7 @@ import { deprecate } from '@storybook/client-logger';
 
 import { render } from './render';
 import type { Meta } from './public-types';
-import type { ReactFramework } from './types';
+import type { ReactRenderer } from './types';
 
 /** Function that sets the globalConfig of your storybook. The global config is the preview module of your .storybook folder.
  *
@@ -32,7 +32,7 @@ import type { ReactFramework } from './types';
  * @param projectAnnotations - e.g. (import * as projectAnnotations from '../.storybook/preview')
  */
 export function setProjectAnnotations(
-  projectAnnotations: ProjectAnnotations<ReactFramework> | ProjectAnnotations<ReactFramework>[]
+  projectAnnotations: ProjectAnnotations<ReactRenderer> | ProjectAnnotations<ReactRenderer>[]
 ) {
   originalSetProjectAnnotations(projectAnnotations);
 }
@@ -42,14 +42,14 @@ export function setProjectAnnotations(
  * @deprecated Use setProjectAnnotations instead
  */
 export function setGlobalConfig(
-  projectAnnotations: ProjectAnnotations<ReactFramework> | ProjectAnnotations<ReactFramework>[]
+  projectAnnotations: ProjectAnnotations<ReactRenderer> | ProjectAnnotations<ReactRenderer>[]
 ) {
   deprecate(`setGlobalConfig is deprecated. Use setProjectAnnotations instead.`);
   setProjectAnnotations(projectAnnotations);
 }
 
 // This will not be necessary once we have auto preset loading
-const defaultProjectAnnotations: ProjectAnnotations<ReactFramework> = {
+const defaultProjectAnnotations: ProjectAnnotations<ReactRenderer> = {
   render,
 };
 
@@ -81,13 +81,13 @@ const defaultProjectAnnotations: ProjectAnnotations<ReactFramework> = {
  * @param [exportsName] - in case your story does not contain a name and you want it to have a name.
  */
 export function composeStory<TArgs = Args>(
-  story: Store_ComposedStory<ReactFramework, TArgs>,
+  story: Store_ComposedStory<ReactRenderer, TArgs>,
   componentAnnotations: Meta<TArgs | any>,
-  projectAnnotations?: ProjectAnnotations<ReactFramework>,
+  projectAnnotations?: ProjectAnnotations<ReactRenderer>,
   exportsName?: string
 ) {
-  return originalComposeStory<ReactFramework, TArgs>(
-    story as Store_ComposedStory<ReactFramework, Args>,
+  return originalComposeStory<ReactRenderer, TArgs>(
+    story as Store_ComposedStory<ReactRenderer, Args>,
     componentAnnotations,
     projectAnnotations,
     defaultProjectAnnotations,
@@ -120,15 +120,15 @@ export function composeStory<TArgs = Args>(
  * @param csfExports - e.g. (import * as stories from './Button.stories')
  * @param [projectAnnotations] - e.g. (import * as projectAnnotations from '../.storybook/preview') this can be applied automatically if you use `setProjectAnnotations` in your setup files.
  */
-export function composeStories<TModule extends Store_CSFExports<ReactFramework>>(
+export function composeStories<TModule extends Store_CSFExports<ReactRenderer>>(
   csfExports: TModule,
-  projectAnnotations?: ProjectAnnotations<ReactFramework>
+  projectAnnotations?: ProjectAnnotations<ReactRenderer>
 ) {
   // @ts-expect-error (Converted from ts-ignore)
   const composedStories = originalComposeStories(csfExports, projectAnnotations, composeStory);
 
   return composedStories as unknown as Omit<
-    Store_StoriesWithPartialProps<ReactFramework, TModule>,
+    Store_StoriesWithPartialProps<ReactRenderer, TModule>,
     keyof Store_CSFExports
   >;
 }
diff --git a/code/renderers/react/src/types.ts b/code/renderers/react/src/types.ts
index 7f2751988f91..ce3100384fdd 100644
--- a/code/renderers/react/src/types.ts
+++ b/code/renderers/react/src/types.ts
@@ -1,10 +1,14 @@
 import type { ComponentType, ReactElement } from 'react';
-import type { WebFramework } from '@storybook/types';
+import type { WebRenderer } from '@storybook/types';
 
 export type { Store_RenderContext as RenderContext } from '@storybook/types';
 export type { StoryContext } from '@storybook/types';
 
-export interface ReactFramework extends WebFramework {
+/**
+ * @deprecated Use `ReactRenderer` instead.
+ */
+export type ReactFramework = ReactRenderer;
+export interface ReactRenderer extends WebRenderer {
   component: ComponentType<this['T']>;
   storyResult: StoryFnReactReturnType;
 }
diff --git a/code/renderers/server/src/public-api.ts b/code/renderers/server/src/public-api.ts
index 29789db3ad3d..773131ab6520 100644
--- a/code/renderers/server/src/public-api.ts
+++ b/code/renderers/server/src/public-api.ts
@@ -2,11 +2,11 @@ import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
 import { start } from '@storybook/core-client';
 
 import { renderToCanvas, render } from './render';
-import type { ServerFramework } from './types';
+import type { ServerRenderer } from './types';
 
 const FRAMEWORK = 'server';
 
-interface ClientApi extends Addon_ClientStoryApi<ServerFramework['storyResult']> {
+interface ClientApi extends Addon_ClientStoryApi<ServerRenderer['storyResult']> {
   configure(loader: Addon_Loadable, module: NodeModule): void;
   forceReRender(): void;
   raw: () => any; // todo add type
diff --git a/code/renderers/server/src/public-types.ts b/code/renderers/server/src/public-types.ts
index e356f7fef362..4d61201fd9de 100644
--- a/code/renderers/server/src/public-types.ts
+++ b/code/renderers/server/src/public-types.ts
@@ -4,7 +4,7 @@ import type {
   ComponentAnnotations,
   StoryAnnotations,
 } from '@storybook/types';
-import type { ServerFramework } from './types';
+import type { ServerRenderer } from './types';
 
 export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/types';
 
@@ -13,21 +13,21 @@ export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/types'
  *
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
-export type Meta<TArgs = Args> = ComponentAnnotations<ServerFramework, TArgs>;
+export type Meta<TArgs = Args> = ComponentAnnotations<ServerRenderer, TArgs>;
 
 /**
  * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryFn<TArgs = Args> = AnnotatedStoryFn<ServerFramework, TArgs>;
+export type StoryFn<TArgs = Args> = AnnotatedStoryFn<ServerRenderer, TArgs>;
 
 /**
  * Story function that represents a CSFv3 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryObj<TArgs = Args> = StoryAnnotations<ServerFramework, TArgs>;
+export type StoryObj<TArgs = Args> = StoryAnnotations<ServerRenderer, TArgs>;
 
 /**
  * @deprecated Use `StoryFn` instead.
diff --git a/code/renderers/server/src/render.ts b/code/renderers/server/src/render.ts
index cb1049dc3b82..a6f31ee2817d 100644
--- a/code/renderers/server/src/render.ts
+++ b/code/renderers/server/src/render.ts
@@ -6,7 +6,7 @@ import { dedent } from 'ts-dedent';
 import type { Store_RenderContext } from '@storybook/types';
 import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-web';
 import type { StoryFn, Args, ArgTypes } from './public-types';
-import type { FetchStoryHtmlType, ServerFramework } from './types';
+import type { FetchStoryHtmlType, ServerRenderer } from './types';
 
 const { fetch, Node } = global;
 
@@ -42,7 +42,7 @@ const buildStoryArgs = (args: Args, argTypes: ArgTypes) => {
   return storyArgs;
 };
 
-export const render: StoryFn<ServerFramework> = (args: Args) => {};
+export const render: StoryFn<ServerRenderer> = (args: Args) => {};
 
 export async function renderToCanvas(
   {
@@ -55,8 +55,8 @@ export async function renderToCanvas(
     storyFn,
     storyContext,
     storyContext: { parameters, args, argTypes },
-  }: Store_RenderContext<ServerFramework>,
-  canvasElement: ServerFramework['canvasElement']
+  }: Store_RenderContext<ServerRenderer>,
+  canvasElement: ServerRenderer['canvasElement']
 ) {
   // Some addons wrap the storyFn so we need to call it even though Server doesn't need the answer
   storyFn();
diff --git a/code/renderers/server/src/types.ts b/code/renderers/server/src/types.ts
index dcabd8a41e55..4b562f771fb7 100644
--- a/code/renderers/server/src/types.ts
+++ b/code/renderers/server/src/types.ts
@@ -1,11 +1,15 @@
-import type { StoryContext as StoryContextBase, WebFramework } from '@storybook/types';
+import type { StoryContext as StoryContextBase, WebRenderer } from '@storybook/types';
 
 export type { RenderContext } from '@storybook/types';
 
 export type StoryFnServerReturnType = any;
-export type StoryContext = StoryContextBase<ServerFramework>;
+export type StoryContext = StoryContextBase<ServerRenderer>;
 
-export interface ServerFramework extends WebFramework {
+/**
+ * @deprecated Use `ServerRenderer` instead.
+ */
+export type ServerFramework = ServerRenderer;
+export interface ServerRenderer extends WebRenderer {
   component: string;
   storyResult: StoryFnServerReturnType;
 }
diff --git a/code/renderers/svelte/src/decorators.ts b/code/renderers/svelte/src/decorators.ts
index 8bbb2d90e174..b4f516a944c5 100644
--- a/code/renderers/svelte/src/decorators.ts
+++ b/code/renderers/svelte/src/decorators.ts
@@ -1,7 +1,7 @@
 import type { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/types';
 import { sanitizeStoryContextUpdate } from '@storybook/store';
 import SlotDecorator from '../templates/SlotDecorator.svelte';
-import type { SvelteFramework } from './types';
+import type { SvelteRenderer } from './types';
 
 /**
  * Check if an object is a svelte component.
@@ -31,7 +31,7 @@ function unWrap(obj: any) {
  * @param story  the current story
  * @param originalStory the story decorated by the current story
  */
-function prepareStory(context: StoryContext<SvelteFramework>, story: any, originalStory?: any) {
+function prepareStory(context: StoryContext<SvelteRenderer>, story: any, originalStory?: any) {
   let result = unWrap(story);
   if (isSvelteComponent(result)) {
     // wrap the component
@@ -66,10 +66,10 @@ function prepareStory(context: StoryContext<SvelteFramework>, story: any, origin
 export function decorateStory(storyFn: any, decorators: any[]) {
   return decorators.reduce(
     (
-        previousStoryFn: LegacyStoryFn<SvelteFramework>,
-        decorator: DecoratorFunction<SvelteFramework>
+        previousStoryFn: LegacyStoryFn<SvelteRenderer>,
+        decorator: DecoratorFunction<SvelteRenderer>
       ) =>
-      (context: StoryContext<SvelteFramework>) => {
+      (context: StoryContext<SvelteRenderer>) => {
         let story;
         const decoratedStory = decorator((update) => {
           story = previousStoryFn({
@@ -89,6 +89,6 @@ export function decorateStory(storyFn: any, decorators: any[]) {
 
         return prepareStory(context, decoratedStory, story);
       },
-    (context: StoryContext<SvelteFramework>) => prepareStory(context, storyFn(context))
+    (context: StoryContext<SvelteRenderer>) => prepareStory(context, storyFn(context))
   );
 }
diff --git a/code/renderers/svelte/src/docs/sourceDecorator.ts b/code/renderers/svelte/src/docs/sourceDecorator.ts
index 061dc821d460..e00243aaa564 100644
--- a/code/renderers/svelte/src/docs/sourceDecorator.ts
+++ b/code/renderers/svelte/src/docs/sourceDecorator.ts
@@ -1,7 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 import { addons, useEffect } from '@storybook/addons';
 import { deprecate } from '@storybook/client-logger';
-import type { ArgTypes, Args, StoryContext, Framework } from '@storybook/types';
+import type { ArgTypes, Args, StoryContext, Renderer } from '@storybook/types';
 
 import { SourceType, SNIPPET_RENDERED } from '@storybook/docs-tools';
 
@@ -10,7 +10,7 @@ import { SourceType, SNIPPET_RENDERED } from '@storybook/docs-tools';
  *
  * @param context StoryContext
  */
-const skipSourceRender = (context: StoryContext<Framework>) => {
+const skipSourceRender = (context: StoryContext<Renderer>) => {
   const sourceParams = context?.parameters.docs?.source;
   const isArgsStory = context?.parameters.__isArgsStory;
 
@@ -148,7 +148,7 @@ function getWrapperProperties(component: any) {
  * @param storyFn Fn
  * @param context  StoryContext
  */
-export const sourceDecorator = (storyFn: any, context: StoryContext<Framework>) => {
+export const sourceDecorator = (storyFn: any, context: StoryContext<Renderer>) => {
   const channel = addons.getChannel();
   const skip = skipSourceRender(context);
   const story = storyFn();
diff --git a/code/renderers/svelte/src/public-types.test.ts b/code/renderers/svelte/src/public-types.test.ts
index a0edd3d36151..e7af27cb7f09 100644
--- a/code/renderers/svelte/src/public-types.test.ts
+++ b/code/renderers/svelte/src/public-types.test.ts
@@ -8,10 +8,10 @@ import Decorator from './__test__/Decorator.svelte';
 import Decorator2 from './__test__/Decorator2.svelte';
 
 import type { DecoratorFn, Meta, StoryObj } from './public-types';
-import type { SvelteFramework } from './types';
+import type { SvelteRenderer } from './types';
 
 type SvelteStory<Component extends SvelteComponentTyped, Args, RequiredArgs> = StoryAnnotations<
-  SvelteFramework<Component>,
+  SvelteRenderer<Component>,
   Args,
   RequiredArgs
 >;
@@ -27,7 +27,7 @@ describe('Meta', () => {
     };
 
     expectTypeOf(meta).toEqualTypeOf<
-      ComponentAnnotations<SvelteFramework<Button>, { disabled: boolean; label: string }>
+      ComponentAnnotations<SvelteRenderer<Button>, { disabled: boolean; label: string }>
     >();
   });
 
@@ -38,7 +38,7 @@ describe('Meta', () => {
     };
 
     expectTypeOf(meta).toEqualTypeOf<
-      ComponentAnnotations<SvelteFramework, { disabled: boolean; label: string }>
+      ComponentAnnotations<SvelteRenderer, { disabled: boolean; label: string }>
     >();
   });
 
diff --git a/code/renderers/svelte/src/public-types.ts b/code/renderers/svelte/src/public-types.ts
index 11355def873b..315f875d013e 100644
--- a/code/renderers/svelte/src/public-types.ts
+++ b/code/renderers/svelte/src/public-types.ts
@@ -10,7 +10,7 @@ import type {
 
 import type { ComponentProps, ComponentType, SvelteComponentTyped } from 'svelte';
 import type { SetOptional, Simplify } from 'type-fest';
-import type { SvelteFramework } from './types';
+import type { SvelteRenderer } from './types';
 
 /**
  * Metadata to configure the stories for a component.
@@ -18,16 +18,16 @@ import type { SvelteFramework } from './types';
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
 export type Meta<CmpOrArgs = Args> = CmpOrArgs extends SvelteComponentTyped<infer Props>
-  ? ComponentAnnotations<SvelteFramework<CmpOrArgs>, Props>
-  : ComponentAnnotations<SvelteFramework, CmpOrArgs>;
+  ? ComponentAnnotations<SvelteRenderer<CmpOrArgs>, Props>
+  : ComponentAnnotations<SvelteRenderer, CmpOrArgs>;
 /**
  * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
 export type StoryFn<TCmpOrArgs = Args> = TCmpOrArgs extends SvelteComponentTyped<infer Props>
-  ? AnnotatedStoryFn<SvelteFramework, Props>
-  : AnnotatedStoryFn<SvelteFramework, TCmpOrArgs>;
+  ? AnnotatedStoryFn<SvelteRenderer, Props>
+  : AnnotatedStoryFn<SvelteRenderer, TCmpOrArgs>;
 
 /**
  * Story function that represents a CSFv3 component example.
@@ -35,21 +35,21 @@ export type StoryFn<TCmpOrArgs = Args> = TCmpOrArgs extends SvelteComponentTyped
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
 export type StoryObj<MetaOrCmpOrArgs = Args> = MetaOrCmpOrArgs extends {
-  render?: ArgsStoryFn<SvelteFramework, any>;
+  render?: ArgsStoryFn<SvelteRenderer, any>;
   component?: ComponentType<infer Component>;
   args?: infer DefaultArgs;
 }
   ? Simplify<
-      ComponentProps<Component> & ArgsFromMeta<SvelteFramework, MetaOrCmpOrArgs>
+      ComponentProps<Component> & ArgsFromMeta<SvelteRenderer, MetaOrCmpOrArgs>
     > extends infer TArgs
     ? StoryAnnotations<
-        SvelteFramework<Component>,
+        SvelteRenderer<Component>,
         TArgs,
         SetOptional<TArgs, Extract<keyof TArgs, keyof DefaultArgs>>
       >
     : never
   : MetaOrCmpOrArgs extends SvelteComponentTyped
-  ? StoryAnnotations<SvelteFramework<MetaOrCmpOrArgs>, ComponentProps<MetaOrCmpOrArgs>>
-  : StoryAnnotations<SvelteFramework, MetaOrCmpOrArgs>;
+  ? StoryAnnotations<SvelteRenderer<MetaOrCmpOrArgs>, ComponentProps<MetaOrCmpOrArgs>>
+  : StoryAnnotations<SvelteRenderer, MetaOrCmpOrArgs>;
 
-export type DecoratorFn<TArgs = Args> = DecoratorFunction<SvelteFramework, TArgs>;
+export type DecoratorFn<TArgs = Args> = DecoratorFunction<SvelteRenderer, TArgs>;
diff --git a/code/renderers/svelte/src/render.ts b/code/renderers/svelte/src/render.ts
index bcd3f421283c..ad2b2a981bfe 100644
--- a/code/renderers/svelte/src/render.ts
+++ b/code/renderers/svelte/src/render.ts
@@ -1,14 +1,15 @@
 /* eslint-disable no-param-reassign */
 import type { Store_RenderContext, ArgsStoryFn } from '@storybook/types';
 import type { SvelteComponentTyped } from 'svelte';
+
 // eslint-disable-next-line import/no-extraneous-dependencies
 import PreviewRender from '@storybook/svelte/templates/PreviewRender.svelte';
 
-import type { SvelteFramework } from './types';
+import type { SvelteRenderer } from './types';
 
-const componentsByDomElement = new Map<SvelteFramework['canvasElement'], SvelteComponentTyped>();
+const componentsByDomElement = new Map<SvelteRenderer['canvasElement'], SvelteComponentTyped>();
 
-function teardown(canvasElement: SvelteFramework['canvasElement']) {
+function teardown(canvasElement: SvelteRenderer['canvasElement']) {
   if (!componentsByDomElement.has(canvasElement)) {
     return;
   }
@@ -28,8 +29,8 @@ export function renderToCanvas(
     showError,
     storyContext,
     forceRemount,
-  }: Store_RenderContext<SvelteFramework>,
-  canvasElement: SvelteFramework['canvasElement']
+  }: Store_RenderContext<SvelteRenderer>,
+  canvasElement: SvelteRenderer['canvasElement']
 ) {
   const existingComponent = componentsByDomElement.get(canvasElement);
 
@@ -67,7 +68,7 @@ export function renderToCanvas(
   };
 }
 
-export const render: ArgsStoryFn<SvelteFramework> = (args, context) => {
+export const render: ArgsStoryFn<SvelteRenderer> = (args, context) => {
   const { id, component: Component } = context;
   if (!Component) {
     throw new Error(
diff --git a/code/renderers/svelte/src/types.ts b/code/renderers/svelte/src/types.ts
index 4a420e636e54..23e76243f702 100644
--- a/code/renderers/svelte/src/types.ts
+++ b/code/renderers/svelte/src/types.ts
@@ -1,7 +1,7 @@
-import type { StoryContext as StoryContextBase, WebFramework } from '@storybook/types';
+import type { StoryContext as StoryContextBase, WebRenderer } from '@storybook/types';
 import type { ComponentConstructorOptions, ComponentEvents, SvelteComponentTyped } from 'svelte';
 
-export type StoryContext = StoryContextBase<SvelteFramework>;
+export type StoryContext = StoryContextBase<SvelteRenderer>;
 
 export interface ShowErrorArgs {
   title: string;
@@ -31,8 +31,8 @@ type ComponentType<
     : P]: SvelteComponentTyped<Props, Events>[P];
 };
 
-export interface SvelteFramework<C extends SvelteComponentTyped = SvelteComponentTyped>
-  extends WebFramework {
+export interface SvelteRenderer<C extends SvelteComponentTyped = SvelteComponentTyped>
+  extends WebRenderer {
   component: ComponentType<this['T'] extends Record<string, any> ? this['T'] : any>;
   storyResult: this['T'] extends Record<string, any>
     ? SvelteStoryResult<this['T'], ComponentEvents<C>>
diff --git a/code/renderers/vue/src/decorateStory.ts b/code/renderers/vue/src/decorateStory.ts
index 6cde549fb8c2..fcbae92f50b0 100644
--- a/code/renderers/vue/src/decorateStory.ts
+++ b/code/renderers/vue/src/decorateStory.ts
@@ -3,7 +3,7 @@ import Vue from 'vue';
 import type { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/types';
 import { sanitizeStoryContextUpdate } from '@storybook/store';
 
-import type { StoryFnVueReturnType, VueFramework } from './types';
+import type { StoryFnVueReturnType, VueRenderer } from './types';
 import { extractProps } from './util';
 import { VALUES } from './render';
 
@@ -12,7 +12,7 @@ export const WRAPS = 'STORYBOOK_WRAPS';
 function prepare(
   rawStory: StoryFnVueReturnType,
   innerStory?: StoryFnVueReturnType,
-  context?: StoryContext<VueFramework>
+  context?: StoryContext<VueRenderer>
 ): VueConstructor | null {
   let story: ComponentOptions<Vue> | VueConstructor;
 
@@ -62,12 +62,12 @@ function prepare(
 }
 
 export function decorateStory(
-  storyFn: LegacyStoryFn<VueFramework>,
-  decorators: DecoratorFunction<VueFramework>[]
+  storyFn: LegacyStoryFn<VueRenderer>,
+  decorators: DecoratorFunction<VueRenderer>[]
 ) {
   return decorators.reduce(
-    (decorated: LegacyStoryFn<VueFramework>, decorator) => (context: StoryContext<VueFramework>) => {
-      let story: VueFramework['storyResult'] | undefined;
+    (decorated: LegacyStoryFn<VueRenderer>, decorator) => (context: StoryContext<VueRenderer>) => {
+      let story: VueRenderer['storyResult'] | undefined;
 
       const decoratedStory = decorator((update) => {
         story = decorated({ ...context, ...sanitizeStoryContextUpdate(update) });
@@ -82,10 +82,10 @@ export function decorateStory(
         return story;
       }
 
-      return prepare(decoratedStory, story) as VueFramework['storyResult'];
+      return prepare(decoratedStory, story) as VueRenderer['storyResult'];
     },
     (context) => {
-      return prepare(storyFn(context), undefined, context) as VueFramework['storyResult'];
+      return prepare(storyFn(context), undefined, context) as VueRenderer['storyResult'];
     }
   );
 }
diff --git a/code/renderers/vue/src/public-api.ts b/code/renderers/vue/src/public-api.ts
index 51826bc601f2..7245b11f9ed5 100644
--- a/code/renderers/vue/src/public-api.ts
+++ b/code/renderers/vue/src/public-api.ts
@@ -2,13 +2,13 @@
 import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
 import { start } from '@storybook/core-client';
 
-import type { VueFramework } from './types';
+import type { VueRenderer } from './types';
 import { renderToCanvas, render } from './render';
 import { decorateStory } from './decorateStory';
 
 const FRAMEWORK = 'vue';
 
-interface ClientApi extends Addon_ClientStoryApi<VueFramework['storyResult']> {
+interface ClientApi extends Addon_ClientStoryApi<VueRenderer['storyResult']> {
   configure(loader: Addon_Loadable, module: NodeModule): void;
   forceReRender(): void;
   raw: () => any; // todo add type
diff --git a/code/renderers/vue/src/public-types.test.ts b/code/renderers/vue/src/public-types.test.ts
index cd0d3b079b88..5ceaa0d1581a 100644
--- a/code/renderers/vue/src/public-types.test.ts
+++ b/code/renderers/vue/src/public-types.test.ts
@@ -7,7 +7,7 @@ import type { ExtendedVue } from 'vue/types/vue';
 import { Vue } from 'vue/types/vue';
 import type { DecoratorFn, Meta, StoryObj } from './public-types';
 import Button from './__tests__/Button.vue';
-import type { VueFramework } from './types';
+import type { VueRenderer } from './types';
 
 describe('Meta', () => {
   test('Generic parameter of Meta can be a component', () => {
@@ -18,7 +18,7 @@ describe('Meta', () => {
 
     expectTypeOf(meta).toEqualTypeOf<
       ComponentAnnotations<
-        VueFramework,
+        VueRenderer,
         {
           disabled: boolean;
           label: string;
@@ -34,7 +34,7 @@ describe('Meta', () => {
     };
 
     expectTypeOf(meta).toEqualTypeOf<
-      ComponentAnnotations<VueFramework, { disabled: boolean; label: string }>
+      ComponentAnnotations<VueRenderer, { disabled: boolean; label: string }>
     >();
   });
 });
@@ -52,7 +52,7 @@ describe('StoryObj', () => {
     });
 
     type Actual = StoryObj<typeof meta>;
-    type Expected = StoryAnnotations<VueFramework, ButtonProps, SetOptional<ButtonProps, 'label'>>;
+    type Expected = StoryAnnotations<VueRenderer, ButtonProps, SetOptional<ButtonProps, 'label'>>;
     expectTypeOf<Actual>().toEqualTypeOf<Expected>();
   });
 
@@ -60,7 +60,7 @@ describe('StoryObj', () => {
     {
       const meta = satisfies<Meta<typeof Button>>()({ component: Button });
 
-      type Expected = StoryAnnotations<VueFramework, ButtonProps, ButtonProps>;
+      type Expected = StoryAnnotations<VueRenderer, ButtonProps, ButtonProps>;
       expectTypeOf<StoryObj<typeof meta>>().toEqualTypeOf<Expected>();
     }
     {
@@ -71,11 +71,7 @@ describe('StoryObj', () => {
       // @ts-expect-error disabled not provided ❌
       const Basic: StoryObj<typeof meta> = {};
 
-      type Expected = StoryAnnotations<
-        VueFramework,
-        ButtonProps,
-        SetOptional<ButtonProps, 'label'>
-      >;
+      type Expected = StoryAnnotations<VueRenderer, ButtonProps, SetOptional<ButtonProps, 'label'>>;
       expectTypeOf(Basic).toEqualTypeOf<Expected>();
     }
     {
@@ -85,14 +81,14 @@ describe('StoryObj', () => {
         args: { label: 'good' },
       };
 
-      type Expected = StoryAnnotations<VueFramework, ButtonProps, ButtonProps>;
+      type Expected = StoryAnnotations<VueRenderer, ButtonProps, ButtonProps>;
       expectTypeOf(Basic).toEqualTypeOf<Expected>();
     }
   });
 
   test('Component can be used as generic parameter for StoryObj', () => {
     expectTypeOf<StoryObj<typeof Button>>().toEqualTypeOf<
-      StoryAnnotations<VueFramework, ButtonProps>
+      StoryAnnotations<VueRenderer, ButtonProps>
     >();
   });
 });
@@ -122,7 +118,7 @@ describe('Story args can be inferred', () => {
 
     const Basic: StoryObj<typeof meta> = { args: { theme: 'light', label: 'good' } };
 
-    type Expected = StoryAnnotations<VueFramework, Props, SetOptional<Props, 'disabled'>>;
+    type Expected = StoryAnnotations<VueRenderer, Props, SetOptional<Props, 'disabled'>>;
     expectTypeOf(Basic).toEqualTypeOf<Expected>();
   });
 
@@ -146,7 +142,7 @@ describe('Story args can be inferred', () => {
 
     const Basic: StoryObj<typeof meta> = { args: { decoratorArg: 'title', label: 'good' } };
 
-    type Expected = StoryAnnotations<VueFramework, Props, SetOptional<Props, 'disabled'>>;
+    type Expected = StoryAnnotations<VueRenderer, Props, SetOptional<Props, 'disabled'>>;
     expectTypeOf(Basic).toEqualTypeOf<Expected>();
   });
 
@@ -173,7 +169,7 @@ describe('Story args can be inferred', () => {
       args: { decoratorArg: '', decoratorArg2: '', label: 'good' },
     };
 
-    type Expected = StoryAnnotations<VueFramework, Props, SetOptional<Props, 'disabled'>>;
+    type Expected = StoryAnnotations<VueRenderer, Props, SetOptional<Props, 'disabled'>>;
     expectTypeOf(Basic).toEqualTypeOf<Expected>();
   });
 });
diff --git a/code/renderers/vue/src/public-types.ts b/code/renderers/vue/src/public-types.ts
index 6c125e0795d1..18c645479621 100644
--- a/code/renderers/vue/src/public-types.ts
+++ b/code/renderers/vue/src/public-types.ts
@@ -10,7 +10,7 @@ import type {
 import type { SetOptional, Simplify } from 'type-fest';
 import type { Component } from 'vue';
 import type { ExtendedVue } from 'vue/types/vue';
-import type { VueFramework } from './types';
+import type { VueRenderer } from './types';
 
 export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/types';
 
@@ -20,7 +20,7 @@ export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/types'
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
 export type Meta<TCmpOrArgs = Args> = ComponentAnnotations<
-  VueFramework,
+  VueRenderer,
   ComponentPropsOrProps<TCmpOrArgs>
 >;
 
@@ -30,7 +30,7 @@ export type Meta<TCmpOrArgs = Args> = ComponentAnnotations<
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
 export type StoryFn<TCmpOrArgs = Args> = AnnotatedStoryFn<
-  VueFramework,
+  VueRenderer,
   ComponentPropsOrProps<TCmpOrArgs>
 >;
 
@@ -40,20 +40,20 @@ export type StoryFn<TCmpOrArgs = Args> = AnnotatedStoryFn<
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
 export type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
-  render?: ArgsStoryFn<VueFramework, any>;
+  render?: ArgsStoryFn<VueRenderer, any>;
   component?: infer C;
   args?: infer DefaultArgs;
 }
   ? TMetaOrCmpOrArgs extends Component<any> // needed because StoryObj<typeof Button> falls into this branch, see test
-    ? StoryAnnotations<VueFramework, ComponentPropsOrProps<TMetaOrCmpOrArgs>>
-    : Simplify<ComponentProps<C> & ArgsFromMeta<VueFramework, TMetaOrCmpOrArgs>> extends infer TArgs
+    ? StoryAnnotations<VueRenderer, ComponentPropsOrProps<TMetaOrCmpOrArgs>>
+    : Simplify<ComponentProps<C> & ArgsFromMeta<VueRenderer, TMetaOrCmpOrArgs>> extends infer TArgs
     ? StoryAnnotations<
-        VueFramework,
+        VueRenderer,
         TArgs,
         SetOptional<TArgs, Extract<keyof TArgs, keyof DefaultArgs>>
       >
     : never
-  : StoryAnnotations<VueFramework, ComponentPropsOrProps<TMetaOrCmpOrArgs>>;
+  : StoryAnnotations<VueRenderer, ComponentPropsOrProps<TMetaOrCmpOrArgs>>;
 
 type ComponentProps<C> = C extends ExtendedVue<any, any, any, any, infer P>
   ? P
@@ -78,4 +78,4 @@ type ComponentPropsOrProps<TCmpOrArgs> = TCmpOrArgs extends Component<any>
  */
 export type Story<TArgs = Args> = StoryFn<TArgs>;
 
-export type DecoratorFn<TArgs = Args> = DecoratorFunction<VueFramework, TArgs>;
+export type DecoratorFn<TArgs = Args> = DecoratorFunction<VueRenderer, TArgs>;
diff --git a/code/renderers/vue/src/render.ts b/code/renderers/vue/src/render.ts
index 25d5708409fe..22a896d6d939 100644
--- a/code/renderers/vue/src/render.ts
+++ b/code/renderers/vue/src/render.ts
@@ -3,12 +3,12 @@ import { dedent } from 'ts-dedent';
 import Vue from 'vue';
 import type { Store_RenderContext, ArgsStoryFn } from '@storybook/types';
 import type { CombinedVueInstance } from 'vue/types/vue';
-import type { VueFramework } from './types';
+import type { VueRenderer } from './types';
 
 export const COMPONENT = 'STORYBOOK_COMPONENT';
 export const VALUES = 'STORYBOOK_VALUES';
 
-const map = new Map<VueFramework['canvasElement'], Instance>();
+const map = new Map<VueRenderer['canvasElement'], Instance>();
 type Instance = CombinedVueInstance<
   Vue,
   {
@@ -20,7 +20,7 @@ type Instance = CombinedVueInstance<
   Record<never, any>
 >;
 
-const getRoot = (canvasElement: VueFramework['canvasElement']): Instance => {
+const getRoot = (canvasElement: VueRenderer['canvasElement']): Instance => {
   const cachedInstance = map.get(canvasElement);
   if (cachedInstance != null) return cachedInstance;
 
@@ -49,9 +49,9 @@ const getRoot = (canvasElement: VueFramework['canvasElement']): Instance => {
   return instance;
 };
 
-export const render: ArgsStoryFn<VueFramework> = (args, context) => {
+export const render: ArgsStoryFn<VueRenderer> = (args, context) => {
   const { id, component: Component, argTypes } = context;
-  const component = Component as VueFramework['component'] & {
+  const component = Component as VueRenderer['component'] & {
     __docgenInfo?: { displayName: string };
     props: Record<string, any>;
   };
@@ -91,14 +91,14 @@ export function renderToCanvas(
     showError,
     showException,
     forceRemount,
-  }: Store_RenderContext<VueFramework>,
-  canvasElement: VueFramework['canvasElement']
+  }: Store_RenderContext<VueRenderer>,
+  canvasElement: VueRenderer['canvasElement']
 ) {
   const root = getRoot(canvasElement);
   Vue.config.errorHandler = showException;
   const element = storyFn();
 
-  let mountTarget: Element | VueFramework['canvasElement'] | null;
+  let mountTarget: Element | VueRenderer['canvasElement'] | null;
 
   // Vue2 mount always replaces the mount target with Vue-generated DOM.
   // https://v2.vuejs.org/v2/api/#el:~:text=replaced%20with%20Vue%2Dgenerated%20DOM
diff --git a/code/renderers/vue/src/types.ts b/code/renderers/vue/src/types.ts
index a261d6acdea0..4ae4c9c4ab3c 100644
--- a/code/renderers/vue/src/types.ts
+++ b/code/renderers/vue/src/types.ts
@@ -1,4 +1,4 @@
-import type { StoryContext as StoryContextBase, WebFramework } from '@storybook/types';
+import type { StoryContext as StoryContextBase, WebRenderer } from '@storybook/types';
 import type { Component, AsyncComponent } from 'vue';
 
 export type { RenderContext } from '@storybook/types';
@@ -12,9 +12,13 @@ export type StoryFnVueReturnType =
   | Component<any, any, any, any>
   | AsyncComponent<any, any, any, any>;
 
-export type StoryContext = StoryContextBase<VueFramework>;
+export type StoryContext = StoryContextBase<VueRenderer>;
 
-export interface VueFramework extends WebFramework {
+/**
+ * @deprecated Use `VueRenderer` instead.
+ */
+export type VueFramework = VueRenderer;
+export interface VueRenderer extends WebRenderer {
   component: Component<any, any, any, any> | AsyncComponent<any, any, any, any>;
   storyResult: StoryFnVueReturnType;
 }
diff --git a/code/renderers/vue3/src/decorateStory.ts b/code/renderers/vue3/src/decorateStory.ts
index c066e21a1476..44275f89a636 100644
--- a/code/renderers/vue3/src/decorateStory.ts
+++ b/code/renderers/vue3/src/decorateStory.ts
@@ -3,7 +3,7 @@ import { h } from 'vue';
 import type { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/types';
 import { sanitizeStoryContextUpdate } from '@storybook/store';
 
-import type { VueFramework } from './types';
+import type { VueRenderer } from './types';
 
 /*
   This normalizes a functional component into a render method in ComponentOptions.
@@ -16,7 +16,7 @@ function normalizeFunctionalComponent(options: ConcreteComponent): ComponentOpti
 }
 
 function prepare(
-  rawStory: VueFramework['storyResult'],
+  rawStory: VueRenderer['storyResult'],
   innerStory?: ConcreteComponent
 ): Component | null {
   const story = rawStory as ComponentOptions;
@@ -41,14 +41,14 @@ function prepare(
 }
 
 export function decorateStory(
-  storyFn: LegacyStoryFn<VueFramework>,
-  decorators: DecoratorFunction<VueFramework>[]
-): LegacyStoryFn<VueFramework> {
+  storyFn: LegacyStoryFn<VueRenderer>,
+  decorators: DecoratorFunction<VueRenderer>[]
+): LegacyStoryFn<VueRenderer> {
   return decorators.reduce(
-    (decorated: LegacyStoryFn<VueFramework>, decorator) => (context: StoryContext<VueFramework>) => {
-      let story: VueFramework['storyResult'] | undefined;
+    (decorated: LegacyStoryFn<VueRenderer>, decorator) => (context: StoryContext<VueRenderer>) => {
+      let story: VueRenderer['storyResult'] | undefined;
 
-      const decoratedStory: VueFramework['storyResult'] = decorator((update) => {
+      const decoratedStory: VueRenderer['storyResult'] = decorator((update) => {
         story = decorated({ ...context, ...sanitizeStoryContextUpdate(update) });
         return story;
       }, context);
@@ -61,8 +61,8 @@ export function decorateStory(
         return story;
       }
 
-      return prepare(decoratedStory, story) as VueFramework['storyResult'];
+      return prepare(decoratedStory, story) as VueRenderer['storyResult'];
     },
-    (context) => prepare(storyFn(context)) as LegacyStoryFn<VueFramework>
+    (context) => prepare(storyFn(context)) as LegacyStoryFn<VueRenderer>
   );
 }
diff --git a/code/renderers/vue3/src/public-api.ts b/code/renderers/vue3/src/public-api.ts
index ac89d4c26509..42ea114e4086 100644
--- a/code/renderers/vue3/src/public-api.ts
+++ b/code/renderers/vue3/src/public-api.ts
@@ -2,14 +2,14 @@ import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
 import type { App } from 'vue';
 import { start } from '@storybook/core-client';
 
-import type { VueFramework } from './types';
+import type { VueRenderer } from './types';
 import { decorateStory } from './decorateStory';
 
 import { render, renderToCanvas } from './render';
 
 const FRAMEWORK = 'vue3';
 
-interface ClientApi extends Addon_ClientStoryApi<VueFramework['storyResult']> {
+interface ClientApi extends Addon_ClientStoryApi<VueRenderer['storyResult']> {
   configure(loader: Addon_Loadable, module: NodeModule): void;
   forceReRender(): void;
   raw: () => any; // todo add type
diff --git a/code/renderers/vue3/src/public-types.test.ts b/code/renderers/vue3/src/public-types.test.ts
index 5cf1257f12af..cbf4fff8f480 100644
--- a/code/renderers/vue3/src/public-types.test.ts
+++ b/code/renderers/vue3/src/public-types.test.ts
@@ -5,7 +5,7 @@ import type { SetOptional } from 'type-fest';
 import type { ComponentOptions, FunctionalComponent } from 'vue';
 import { h } from 'vue';
 import type { DecoratorFn, Meta, StoryObj } from './public-types';
-import type { VueFramework } from './types';
+import type { VueRenderer } from './types';
 import Button from './__tests__/Button.vue';
 import DecoratorTsVue from './__tests__/Decorator.vue';
 import Decorator2TsVue from './__tests__/Decorator2.vue';
@@ -19,7 +19,7 @@ describe('Meta', () => {
 
     expectTypeOf(meta).toEqualTypeOf<
       ComponentAnnotations<
-        VueFramework,
+        VueRenderer,
         {
           readonly disabled: boolean;
           readonly label: string;
@@ -37,7 +37,7 @@ describe('Meta', () => {
     };
 
     expectTypeOf(meta).toEqualTypeOf<
-      ComponentAnnotations<VueFramework, { disabled: boolean; label: string }>
+      ComponentAnnotations<VueRenderer, { disabled: boolean; label: string }>
     >();
   });
 
@@ -78,7 +78,7 @@ describe('StoryObj', () => {
     });
 
     type Actual = StoryObj<typeof meta>;
-    type Expected = StoryAnnotations<VueFramework, ButtonProps, SetOptional<ButtonProps, 'label'>>;
+    type Expected = StoryAnnotations<VueRenderer, ButtonProps, SetOptional<ButtonProps, 'label'>>;
     expectTypeOf<Actual>().toEqualTypeOf<Expected>();
   });
 
@@ -86,7 +86,7 @@ describe('StoryObj', () => {
     {
       const meta = satisfies<Meta<typeof Button>>()({ component: Button });
 
-      type Expected = StoryAnnotations<VueFramework, ButtonProps, ButtonProps>;
+      type Expected = StoryAnnotations<VueRenderer, ButtonProps, ButtonProps>;
       expectTypeOf<StoryObj<typeof meta>>().toEqualTypeOf<Expected>();
     }
     {
@@ -97,11 +97,7 @@ describe('StoryObj', () => {
       // @ts-expect-error disabled not provided ❌
       const Basic: StoryObj<typeof meta> = {};
 
-      type Expected = StoryAnnotations<
-        VueFramework,
-        ButtonProps,
-        SetOptional<ButtonProps, 'label'>
-      >;
+      type Expected = StoryAnnotations<VueRenderer, ButtonProps, SetOptional<ButtonProps, 'label'>>;
       expectTypeOf(Basic).toEqualTypeOf<Expected>();
     }
     {
@@ -111,14 +107,14 @@ describe('StoryObj', () => {
         args: { label: 'good' },
       };
 
-      type Expected = StoryAnnotations<VueFramework, ButtonProps, ButtonProps>;
+      type Expected = StoryAnnotations<VueRenderer, ButtonProps, ButtonProps>;
       expectTypeOf(Basic).toEqualTypeOf<Expected>();
     }
   });
 
   test('Component can be used as generic parameter for StoryObj', () => {
     expectTypeOf<StoryObj<typeof Button>>().toEqualTypeOf<
-      StoryAnnotations<VueFramework, ButtonProps>
+      StoryAnnotations<VueRenderer, ButtonProps>
     >();
   });
 });
@@ -145,7 +141,7 @@ describe('Story args can be inferred', () => {
 
     const Basic: StoryObj<typeof meta> = { args: { theme: 'light', label: 'good' } };
 
-    type Expected = StoryAnnotations<VueFramework, Props, SetOptional<Props, 'disabled'>>;
+    type Expected = StoryAnnotations<VueRenderer, Props, SetOptional<Props, 'disabled'>>;
     expectTypeOf(Basic).toEqualTypeOf<Expected>();
   });
 
@@ -165,7 +161,7 @@ describe('Story args can be inferred', () => {
 
     const Basic: StoryObj<typeof meta> = { args: { decoratorArg: 'title', label: 'good' } };
 
-    type Expected = StoryAnnotations<VueFramework, Props, SetOptional<Props, 'disabled'>>;
+    type Expected = StoryAnnotations<VueRenderer, Props, SetOptional<Props, 'disabled'>>;
     expectTypeOf(Basic).toEqualTypeOf<Expected>();
   });
 
@@ -187,7 +183,7 @@ describe('Story args can be inferred', () => {
       args: { decoratorArg: '', decoratorArg2: '', label: 'good' },
     };
 
-    type Expected = StoryAnnotations<VueFramework, Props, SetOptional<Props, 'disabled'>>;
+    type Expected = StoryAnnotations<VueRenderer, Props, SetOptional<Props, 'disabled'>>;
     expectTypeOf(Basic).toEqualTypeOf<Expected>();
   });
 });
diff --git a/code/renderers/vue3/src/public-types.ts b/code/renderers/vue3/src/public-types.ts
index 7a37ec29e1fe..cd39d70f79cf 100644
--- a/code/renderers/vue3/src/public-types.ts
+++ b/code/renderers/vue3/src/public-types.ts
@@ -10,7 +10,7 @@ import type {
 
 import type { SetOptional, Simplify } from 'type-fest';
 import type { ComponentOptions, ConcreteComponent, FunctionalComponent } from 'vue';
-import type { VueFramework } from './types';
+import type { VueRenderer } from './types';
 
 /**
  * Metadata to configure the stories for a component.
@@ -18,7 +18,7 @@ import type { VueFramework } from './types';
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
 export type Meta<TCmpOrArgs = Args> = ComponentAnnotations<
-  VueFramework,
+  VueRenderer,
   ComponentPropsOrProps<TCmpOrArgs>
 >;
 
@@ -28,7 +28,7 @@ export type Meta<TCmpOrArgs = Args> = ComponentAnnotations<
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
 export type StoryFn<TCmpOrArgs = Args> = AnnotatedStoryFn<
-  VueFramework,
+  VueRenderer,
   ComponentPropsOrProps<TCmpOrArgs>
 >;
 
@@ -38,20 +38,20 @@ export type StoryFn<TCmpOrArgs = Args> = AnnotatedStoryFn<
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
 export type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
-  render?: ArgsStoryFn<VueFramework, any>;
+  render?: ArgsStoryFn<VueRenderer, any>;
   component?: infer Component;
   args?: infer DefaultArgs;
 }
   ? Simplify<
-      ComponentProps<Component> & ArgsFromMeta<VueFramework, TMetaOrCmpOrArgs>
+      ComponentProps<Component> & ArgsFromMeta<VueRenderer, TMetaOrCmpOrArgs>
     > extends infer TArgs
     ? StoryAnnotations<
-        VueFramework,
+        VueRenderer,
         TArgs,
         SetOptional<TArgs, Extract<keyof TArgs, keyof DefaultArgs>>
       >
     : never
-  : StoryAnnotations<VueFramework, ComponentPropsOrProps<TMetaOrCmpOrArgs>>;
+  : StoryAnnotations<VueRenderer, ComponentPropsOrProps<TMetaOrCmpOrArgs>>;
 
 type ComponentProps<C> = C extends ComponentOptions<infer P>
   ? P
@@ -76,4 +76,4 @@ type ComponentPropsOrProps<TCmpOrArgs> = TCmpOrArgs extends ConcreteComponent<an
  */
 export type Story<TArgs = Args> = StoryFn<TArgs>;
 
-export type DecoratorFn<TArgs = Args> = DecoratorFunction<VueFramework, TArgs>;
+export type DecoratorFn<TArgs = Args> = DecoratorFunction<VueRenderer, TArgs>;
diff --git a/code/renderers/vue3/src/render.ts b/code/renderers/vue3/src/render.ts
index 7fb96f596a3c..520f31bddce2 100644
--- a/code/renderers/vue3/src/render.ts
+++ b/code/renderers/vue3/src/render.ts
@@ -2,9 +2,9 @@ import { dedent } from 'ts-dedent';
 import { createApp, h } from 'vue';
 import type { Store_RenderContext, ArgsStoryFn } from '@storybook/types';
 
-import type { StoryFnVueReturnType, VueFramework } from './types';
+import type { StoryFnVueReturnType, VueRenderer } from './types';
 
-export const render: ArgsStoryFn<VueFramework> = (props, context) => {
+export const render: ArgsStoryFn<VueRenderer> = (props, context) => {
   const { id, component: Component } = context;
   if (!Component) {
     throw new Error(
@@ -20,11 +20,11 @@ export const setup = (fn: (app: any) => void) => {
   setupFunction = fn;
 };
 
-const map = new Map<VueFramework['canvasElement'], ReturnType<typeof createApp>>();
+const map = new Map<VueRenderer['canvasElement'], ReturnType<typeof createApp>>();
 
 export function renderToCanvas(
-  { title, name, storyFn, showMain, showError, showException }: Store_RenderContext<VueFramework>,
-  canvasElement: VueFramework['canvasElement']
+  { title, name, storyFn, showMain, showError, showException }: Store_RenderContext<VueRenderer>,
+  canvasElement: VueRenderer['canvasElement']
 ) {
   // TODO: explain cyclical nature of these app => story => mount
   let element: StoryFnVueReturnType;
diff --git a/code/renderers/vue3/src/types.ts b/code/renderers/vue3/src/types.ts
index dec8e6585eff..15809f9094e2 100644
--- a/code/renderers/vue3/src/types.ts
+++ b/code/renderers/vue3/src/types.ts
@@ -1,4 +1,4 @@
-import type { StoryContext as StoryContextBase, WebFramework } from '@storybook/types';
+import type { StoryContext as StoryContextBase, WebRenderer } from '@storybook/types';
 import type { ConcreteComponent } from 'vue';
 
 export type { RenderContext } from '@storybook/types';
@@ -10,9 +10,13 @@ export interface ShowErrorArgs {
 
 export type StoryFnVueReturnType = ConcreteComponent<any>;
 
-export type StoryContext = StoryContextBase<VueFramework>;
+export type StoryContext = StoryContextBase<VueRenderer>;
 
-export interface VueFramework extends WebFramework {
+/**
+ * @deprecated Use `VueRenderer` instead.
+ */
+export type VueFramework = VueRenderer;
+export interface VueRenderer extends WebRenderer {
   // We are omitting props, as we don't use it internally, and more importantly, it completely changes the assignability of meta.component.
   // Try not omitting, and check the type errros in the test file, if you want to learn more.
   component: Omit<ConcreteComponent<this['T']>, 'props'>;
diff --git a/code/renderers/web-components/src/docs/sourceDecorator.ts b/code/renderers/web-components/src/docs/sourceDecorator.ts
index 8436dab16fcc..bef93cade876 100644
--- a/code/renderers/web-components/src/docs/sourceDecorator.ts
+++ b/code/renderers/web-components/src/docs/sourceDecorator.ts
@@ -5,12 +5,12 @@ import type { ArgsStoryFn, PartialStoryFn, StoryContext } from '@storybook/types
 import { addons, useEffect } from '@storybook/addons';
 import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
 
-import type { WebComponentsFramework } from '../types';
+import type { WebComponentsRenderer } from '../types';
 
 // Taken from https://github.com/lit/lit/blob/main/packages/lit-html/src/test/test-utils/strip-markers.ts
 const LIT_EXPRESSION_COMMENTS = /<!--\?lit\$[0-9]+\$-->|<!--\??-->/g;
 
-function skipSourceRender(context: StoryContext<WebComponentsFramework>) {
+function skipSourceRender(context: StoryContext<WebComponentsRenderer>) {
   const sourceParams = context?.parameters.docs?.source;
   const isArgsStory = context?.parameters.__isArgsStory;
 
@@ -26,7 +26,7 @@ function skipSourceRender(context: StoryContext<WebComponentsFramework>) {
 
 function applyTransformSource(
   source: string,
-  context: StoryContext<WebComponentsFramework>
+  context: StoryContext<WebComponentsRenderer>
 ): string {
   const { transformSource } = context.parameters.docs ?? {};
   if (typeof transformSource !== 'function') return source;
@@ -34,11 +34,11 @@ function applyTransformSource(
 }
 
 export function sourceDecorator(
-  storyFn: PartialStoryFn<WebComponentsFramework>,
-  context: StoryContext<WebComponentsFramework>
-): WebComponentsFramework['storyResult'] {
+  storyFn: PartialStoryFn<WebComponentsRenderer>,
+  context: StoryContext<WebComponentsRenderer>
+): WebComponentsRenderer['storyResult'] {
   const story = context?.parameters.docs?.source?.excludeDecorators
-    ? (context.originalStoryFn as ArgsStoryFn<WebComponentsFramework>)(context.args, context)
+    ? (context.originalStoryFn as ArgsStoryFn<WebComponentsRenderer>)(context.args, context)
     : storyFn();
 
   let source: string;
diff --git a/code/renderers/web-components/src/public-api.ts b/code/renderers/web-components/src/public-api.ts
index c49454afdfab..b88e56223dcd 100644
--- a/code/renderers/web-components/src/public-api.ts
+++ b/code/renderers/web-components/src/public-api.ts
@@ -3,11 +3,11 @@ import type { Addon_ClientStoryApi, Addon_Loadable } from '@storybook/types';
 import { start } from '@storybook/core-client';
 
 import { renderToCanvas } from './render';
-import type { WebComponentsFramework } from './types';
+import type { WebComponentsRenderer } from './types';
 
 const FRAMEWORK = 'web-components';
 
-interface ClientApi extends Addon_ClientStoryApi<WebComponentsFramework['storyResult']> {
+interface ClientApi extends Addon_ClientStoryApi<WebComponentsRenderer['storyResult']> {
   configure(loader: Addon_Loadable, module: NodeModule): void;
   forceReRender(): void;
   raw: () => any; // todo add type
diff --git a/code/renderers/web-components/src/public-types.ts b/code/renderers/web-components/src/public-types.ts
index d23ac54b6106..eec13e38365c 100644
--- a/code/renderers/web-components/src/public-types.ts
+++ b/code/renderers/web-components/src/public-types.ts
@@ -4,28 +4,28 @@ import type {
   ComponentAnnotations,
   StoryAnnotations,
 } from '@storybook/types';
-import type { WebComponentsFramework } from './types';
+import type { WebComponentsRenderer } from './types';
 
 /**
  * Metadata to configure the stories for a component.
  *
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
-export type Meta<TArgs = Args> = ComponentAnnotations<WebComponentsFramework, TArgs>;
+export type Meta<TArgs = Args> = ComponentAnnotations<WebComponentsRenderer, TArgs>;
 
 /**
  * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryFn<TArgs = Args> = AnnotatedStoryFn<WebComponentsFramework, TArgs>;
+export type StoryFn<TArgs = Args> = AnnotatedStoryFn<WebComponentsRenderer, TArgs>;
 
 /**
  * Story function that represents a CSFv3 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryObj<TArgs = Args> = StoryAnnotations<WebComponentsFramework, TArgs>;
+export type StoryObj<TArgs = Args> = StoryAnnotations<WebComponentsRenderer, TArgs>;
 
 /**
  * @deprecated Use `StoryFn` instead.
diff --git a/code/renderers/web-components/src/render.ts b/code/renderers/web-components/src/render.ts
index 075215cd452f..d95129b98c33 100644
--- a/code/renderers/web-components/src/render.ts
+++ b/code/renderers/web-components/src/render.ts
@@ -10,11 +10,11 @@ import { render as litRender } from 'lit-html';
 import { isTemplateResult } from 'lit-html/directive-helpers.js';
 import { simulatePageLoad, simulateDOMContentLoaded } from '@storybook/preview-web';
 import type { Store_RenderContext, ArgsStoryFn } from '@storybook/types';
-import type { WebComponentsFramework } from './types';
+import type { WebComponentsRenderer } from './types';
 
 const { Node } = global;
 
-export const render: ArgsStoryFn<WebComponentsFramework> = (args, context) => {
+export const render: ArgsStoryFn<WebComponentsRenderer> = (args, context) => {
   const { id, component } = context;
   if (!component) {
     throw new Error(
@@ -38,8 +38,8 @@ export function renderToCanvas(
     showMain,
     showError,
     forceRemount,
-  }: Store_RenderContext<WebComponentsFramework>,
-  canvasElement: WebComponentsFramework['canvasElement']
+  }: Store_RenderContext<WebComponentsRenderer>,
+  canvasElement: WebComponentsRenderer['canvasElement']
 ) {
   const element = storyFn();
 
diff --git a/code/renderers/web-components/src/types.ts b/code/renderers/web-components/src/types.ts
index e938d2017713..d6f397db0aca 100644
--- a/code/renderers/web-components/src/types.ts
+++ b/code/renderers/web-components/src/types.ts
@@ -1,11 +1,15 @@
-import type { StoryContext as StoryContextBase, WebFramework } from '@storybook/types';
+import type { StoryContext as StoryContextBase, WebRenderer } from '@storybook/types';
 import type { TemplateResult, SVGTemplateResult } from 'lit-html';
 
 export type StoryFnHtmlReturnType = string | Node | TemplateResult | SVGTemplateResult;
 
-export type StoryContext = StoryContextBase<WebComponentsFramework>;
+export type StoryContext = StoryContextBase<WebComponentsRenderer>;
 
-export interface WebComponentsFramework extends WebFramework {
+/**
+ * @deprecated Use `WebComponentsRenderer` instead.
+ */
+export type WebComponentsFramework = WebComponentsRenderer;
+export interface WebComponentsRenderer extends WebRenderer {
   component: string;
   storyResult: StoryFnHtmlReturnType;
 }
diff --git a/code/ui/.storybook/preview.tsx b/code/ui/.storybook/preview.tsx
index 4c97aff00fd1..3cd958bd6d12 100644
--- a/code/ui/.storybook/preview.tsx
+++ b/code/ui/.storybook/preview.tsx
@@ -14,7 +14,7 @@ import { useArgs } from '@storybook/addons';
 import { Symbols } from '@storybook/components';
 import type { PreviewWeb } from '@storybook/preview-web';
 import { DocsContext } from '@storybook/preview-web';
-import type { ReactFramework } from '@storybook/react';
+import type { ReactRenderer } from '@storybook/react';
 import type { Channel } from '@storybook/channels';
 
 import { DocsContainer } from '../blocks/src/blocks/DocsContainer';
@@ -94,7 +94,7 @@ const ThemedSetRoot = () => {
 };
 
 // eslint-disable-next-line no-underscore-dangle
-const preview = (window as any).__STORYBOOK_PREVIEW__ as PreviewWeb<ReactFramework>;
+const preview = (window as any).__STORYBOOK_PREVIEW__ as PreviewWeb<ReactRenderer>;
 const channel = (window as any).__STORYBOOK_ADDONS_CHANNEL__ as Channel;
 export const loaders = [
   async () => ({ globalValue: 1 }),
diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json
index c54c19b6caed..4612b09b4578 100644
--- a/code/ui/blocks/package.json
+++ b/code/ui/blocks/package.json
@@ -47,7 +47,7 @@
     "@storybook/client-logger": "7.0.0-alpha.49",
     "@storybook/components": "7.0.0-alpha.49",
     "@storybook/core-events": "7.0.0-alpha.49",
-    "@storybook/csf": "next",
+    "@storybook/csf": "0.0.2-next.5",
     "@storybook/docs-tools": "7.0.0-alpha.49",
     "@storybook/preview-web": "7.0.0-alpha.49",
     "@storybook/store": "7.0.0-alpha.49",
diff --git a/code/ui/blocks/src/blocks/Canvas.tsx b/code/ui/blocks/src/blocks/Canvas.tsx
index 239bca9c8a79..8336993ac089 100644
--- a/code/ui/blocks/src/blocks/Canvas.tsx
+++ b/code/ui/blocks/src/blocks/Canvas.tsx
@@ -1,6 +1,6 @@
 import type { FC, ReactElement, ReactNode, ReactNodeArray } from 'react';
 import React, { useContext } from 'react';
-import type { Framework } from '@storybook/types';
+import type { Renderer } from '@storybook/types';
 import type { PreviewProps as PurePreviewProps } from '../components';
 import { Preview as PurePreview, PreviewSkeleton } from '../components';
 import type { DocsContextProps } from './DocsContext';
@@ -19,7 +19,7 @@ type CanvasProps = PurePreviewProps & {
 
 const getPreviewProps = (
   { withSource, mdxSource, children, ...props }: CanvasProps & { children?: ReactNode },
-  docsContext: DocsContextProps<Framework>,
+  docsContext: DocsContextProps<Renderer>,
   sourceContext: SourceContextProps
 ) => {
   let sourceState = withSource;
diff --git a/code/ui/blocks/src/blocks/Docs.tsx b/code/ui/blocks/src/blocks/Docs.tsx
index 41c0ccb84426..d5525176e3d9 100644
--- a/code/ui/blocks/src/blocks/Docs.tsx
+++ b/code/ui/blocks/src/blocks/Docs.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import type { FunctionComponent, ComponentType } from 'react';
-import type { Framework, Parameters } from '@storybook/types';
+import type { Renderer, Parameters } from '@storybook/types';
 import type { Theme } from '@storybook/theming';
 
 import type { DocsContextProps } from './DocsContext';
 import { DocsContainer } from './DocsContainer';
 import { DocsPage } from './DocsPage';
 
-export type DocsProps<TFramework extends Framework = Framework> = {
+export type DocsProps<TFramework extends Renderer = Renderer> = {
   docsParameter: Parameters;
   context: DocsContextProps<TFramework>;
 };
diff --git a/code/ui/blocks/src/blocks/DocsContainer.tsx b/code/ui/blocks/src/blocks/DocsContainer.tsx
index 0ae07863fbd8..f80dc3e42dd4 100644
--- a/code/ui/blocks/src/blocks/DocsContainer.tsx
+++ b/code/ui/blocks/src/blocks/DocsContainer.tsx
@@ -3,7 +3,7 @@ import React, { useEffect } from 'react';
 import global from 'global';
 import type { ThemeVars } from '@storybook/theming';
 import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
-import type { Framework } from '@storybook/types';
+import type { Renderer } from '@storybook/types';
 import { DocsWrapper, DocsContent } from '../components';
 import type { DocsContextProps } from './DocsContext';
 import { DocsContext } from './DocsContext';
@@ -12,7 +12,7 @@ import { scrollToElement } from './utils';
 
 const { document, window: globalWindow } = global;
 
-export interface DocsContainerProps<TFramework extends Framework = Framework> {
+export interface DocsContainerProps<TFramework extends Renderer = Renderer> {
   context: DocsContextProps<TFramework>;
   theme?: ThemeVars;
   children?: ReactNode;
diff --git a/code/ui/blocks/src/blocks/DocsContext.ts b/code/ui/blocks/src/blocks/DocsContext.ts
index 958a57172050..0c3e301a5a70 100644
--- a/code/ui/blocks/src/blocks/DocsContext.ts
+++ b/code/ui/blocks/src/blocks/DocsContext.ts
@@ -4,7 +4,7 @@ import { createContext } from 'react';
 import { window as globalWindow } from 'global';
 
 import type { DocsContextProps } from '@storybook/preview-web';
-import type { Framework } from '@storybook/types';
+import type { Renderer } from '@storybook/types';
 
 export type { DocsContextProps };
 
@@ -18,6 +18,6 @@ if (globalWindow && globalWindow.__DOCS_CONTEXT__ === undefined) {
   globalWindow.__DOCS_CONTEXT__.displayName = 'DocsContext';
 }
 
-export const DocsContext: Context<DocsContextProps<Framework>> = globalWindow
+export const DocsContext: Context<DocsContextProps<Renderer>> = globalWindow
   ? globalWindow.__DOCS_CONTEXT__
   : createContext(null);
diff --git a/code/ui/blocks/src/blocks/Story.tsx b/code/ui/blocks/src/blocks/Story.tsx
index be42c12850d5..daca709e6b20 100644
--- a/code/ui/blocks/src/blocks/Story.tsx
+++ b/code/ui/blocks/src/blocks/Story.tsx
@@ -1,7 +1,7 @@
 import type { FC, ReactNode, ElementType, ComponentProps } from 'react';
 import React, { useContext, useRef, useEffect, useState } from 'react';
 import type {
-  Framework,
+  Renderer,
   Store_ModuleExport,
   Store_ModuleExports,
   Store_Story as StoryType,
@@ -53,7 +53,7 @@ export const getStoryId = (props: StoryProps, context: DocsContextProps): StoryI
   return inputId || context.storyIdByName(name);
 };
 
-export const getStoryProps = <TFramework extends Framework>(
+export const getStoryProps = <TFramework extends Renderer>(
   { height, inline }: StoryProps,
   story: StoryType<TFramework>
 ): PureStoryProps => {
diff --git a/code/ui/blocks/src/blocks/external/ExternalDocs.tsx b/code/ui/blocks/src/blocks/external/ExternalDocs.tsx
index d7488015851d..9329473a7595 100644
--- a/code/ui/blocks/src/blocks/external/ExternalDocs.tsx
+++ b/code/ui/blocks/src/blocks/external/ExternalDocs.tsx
@@ -1,16 +1,16 @@
 import type { FunctionComponent } from 'react';
 import React, { useRef } from 'react';
-import type { Framework, ProjectAnnotations } from '@storybook/types';
+import type { Renderer, ProjectAnnotations } from '@storybook/types';
 import { composeConfigs } from '@storybook/store';
 
 import { Docs } from '../Docs';
 import { ExternalPreview } from './ExternalPreview';
 
-export type ExternalDocsProps<TFramework extends Framework = Framework> = {
+export type ExternalDocsProps<TFramework extends Renderer = Renderer> = {
   projectAnnotationsList: ProjectAnnotations<TFramework>[];
 };
 
-function usePreview<TFramework extends Framework = Framework>(
+function usePreview<TFramework extends Renderer = Renderer>(
   projectAnnotations: ProjectAnnotations<TFramework>
 ) {
   const previewRef = useRef<ExternalPreview>();
diff --git a/code/ui/blocks/src/blocks/external/ExternalDocsContainer.tsx b/code/ui/blocks/src/blocks/external/ExternalDocsContainer.tsx
index 697fc55b1d6a..1de088a2439e 100644
--- a/code/ui/blocks/src/blocks/external/ExternalDocsContainer.tsx
+++ b/code/ui/blocks/src/blocks/external/ExternalDocsContainer.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 
 import { ThemeProvider, themes, ensure } from '@storybook/theming';
-import type { Framework } from '@storybook/types';
+import type { Renderer } from '@storybook/types';
 
 import { DocsContext } from '../DocsContext';
 import { ExternalPreview } from './ExternalPreview';
 
-let preview: ExternalPreview<Framework>;
+let preview: ExternalPreview<Renderer>;
 
 export const ExternalDocsContainer: React.FC<{ projectAnnotations: any }> = ({
   projectAnnotations,
diff --git a/code/ui/blocks/src/blocks/external/ExternalDocsContext.ts b/code/ui/blocks/src/blocks/external/ExternalDocsContext.ts
index e347812b6b6c..64bb3e609ccc 100644
--- a/code/ui/blocks/src/blocks/external/ExternalDocsContext.ts
+++ b/code/ui/blocks/src/blocks/external/ExternalDocsContext.ts
@@ -1,5 +1,5 @@
 import type {
-  Framework,
+  Renderer,
   Store_CSFFile,
   Store_ModuleExport,
   Store_ModuleExports,
@@ -9,12 +9,12 @@ import type { StoryStore } from '@storybook/store';
 import type { DocsContextProps } from '@storybook/preview-web';
 import type { Channel } from '@storybook/channels';
 
-export class ExternalDocsContext<TFramework extends Framework> extends DocsContext<TFramework> {
+export class ExternalDocsContext<TRenderer extends Renderer> extends DocsContext<TRenderer> {
   constructor(
     public channel: Channel,
-    protected store: StoryStore<TFramework>,
+    protected store: StoryStore<TRenderer>,
     public renderStoryToElement: DocsContextProps['renderStoryToElement'],
-    private processMetaExports: (metaExports: Store_ModuleExports) => Store_CSFFile<TFramework>
+    private processMetaExports: (metaExports: Store_ModuleExports) => Store_CSFFile<TRenderer>
   ) {
     super(channel, store, renderStoryToElement, [], true);
   }
diff --git a/code/ui/blocks/src/blocks/external/ExternalPreview.ts b/code/ui/blocks/src/blocks/external/ExternalPreview.ts
index 2c9955af00d4..b7d09d7a69a3 100644
--- a/code/ui/blocks/src/blocks/external/ExternalPreview.ts
+++ b/code/ui/blocks/src/blocks/external/ExternalPreview.ts
@@ -1,6 +1,6 @@
 import { Preview } from '@storybook/preview-web';
 import type {
-  Framework,
+  Renderer,
   ComponentTitle,
   Path,
   ProjectAnnotations,
@@ -27,7 +27,7 @@ class ConstantMap<TKey, TValue extends string> {
   }
 }
 
-export class ExternalPreview<TFramework extends Framework = Framework> extends Preview<TFramework> {
+export class ExternalPreview<TRenderer extends Renderer = Renderer> extends Preview<TRenderer> {
   private importPaths = new ConstantMap<MetaExports, Path>('./importPath/');
 
   private titles = new ConstantMap<MetaExports, ComponentTitle>('title-');
@@ -36,7 +36,7 @@ export class ExternalPreview<TFramework extends Framework = Framework> extends P
 
   private moduleExportsByImportPath: Record<Path, Store_ModuleExports> = {};
 
-  constructor(public projectAnnotations: ProjectAnnotations<TFramework>) {
+  constructor(public projectAnnotations: ProjectAnnotations<TRenderer>) {
     super(new Channel());
 
     this.initialize({
@@ -58,7 +58,7 @@ export class ExternalPreview<TFramework extends Framework = Framework> extends P
 
     const title = metaExports.default.title || this.titles.get(metaExports);
 
-    const csfFile = this.storyStore.processCSFFileWithCache<TFramework>(
+    const csfFile = this.storyStore.processCSFFileWithCache<TRenderer>(
       metaExports,
       importPath,
       title
diff --git a/code/ui/blocks/src/blocks/useStory.ts b/code/ui/blocks/src/blocks/useStory.ts
index 6904c196aab7..c97e91716439 100644
--- a/code/ui/blocks/src/blocks/useStory.ts
+++ b/code/ui/blocks/src/blocks/useStory.ts
@@ -1,23 +1,23 @@
 import { useState, useEffect } from 'react';
-import type { StoryId, Framework, Store_Story } from '@storybook/types';
+import type { StoryId, Renderer, Store_Story } from '@storybook/types';
 
 import type { DocsContextProps } from './DocsContext';
 
-export function useStory<TFramework extends Framework = Framework>(
+export function useStory<TRenderer extends Renderer = Renderer>(
   storyId: StoryId,
-  context: DocsContextProps<TFramework>
-): Store_Story<TFramework> | void {
+  context: DocsContextProps<TRenderer>
+): Store_Story<TRenderer> | void {
   const stories = useStories([storyId], context);
   return stories && stories[0];
 }
 
-export function useStories<TFramework extends Framework = Framework>(
+export function useStories<TRenderer extends Renderer = Renderer>(
   storyIds: StoryId[],
-  context: DocsContextProps<TFramework>
-): (Store_Story<TFramework> | void)[] {
+  context: DocsContextProps<TRenderer>
+): (Store_Story<TRenderer> | void)[] {
   // Legacy docs pages can reference any story by id. Those stories will need to be
   // asyncronously loaded; we use the state for this
-  const [storiesById, setStories] = useState<Record<StoryId, Store_Story<TFramework>>>({});
+  const [storiesById, setStories] = useState<Record<StoryId, Store_Story<TRenderer>>>({});
 
   useEffect(() => {
     // deepscan-disable-next-line NO_EFFECT_CALL
diff --git a/code/ui/components/package.json b/code/ui/components/package.json
index a04b12c9269e..9a77b2bb4354 100644
--- a/code/ui/components/package.json
+++ b/code/ui/components/package.json
@@ -52,7 +52,7 @@
   },
   "dependencies": {
     "@storybook/client-logger": "7.0.0-alpha.49",
-    "@storybook/csf": "next",
+    "@storybook/csf": "0.0.2-next.5",
     "@storybook/theming": "7.0.0-alpha.49",
     "@storybook/types": "7.0.0-alpha.49",
     "memoizerific": "^1.11.3",
diff --git a/code/yarn.lock b/code/yarn.lock
index 8362af560b43..9a3b8e20e9e0 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -5190,6 +5190,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@pkgr/utils@npm:^2.3.1":
+  version: 2.3.1
+  resolution: "@pkgr/utils@npm:2.3.1"
+  dependencies:
+    cross-spawn: ^7.0.3
+    is-glob: ^4.0.3
+    open: ^8.4.0
+    picocolors: ^1.0.0
+    tiny-glob: ^0.2.9
+    tslib: ^2.4.0
+  checksum: 50c2480c3580c0f75b9325271deeb4f4cb24f6a29f1ebc5a7de0c6991380e23625fd554ecdbc7d7e93ad6dab92532a254f7490433cf2b8f1b18d75c9e01636ea
+  languageName: node
+  linkType: hard
+
 "@playwright/test@npm:1.27.0":
   version: 1.27.0
   resolution: "@playwright/test@npm:1.27.0"
@@ -5632,7 +5646,7 @@ __metadata:
     "@storybook/addons": 7.0.0-alpha.49
     "@storybook/client-logger": 7.0.0-alpha.49
     "@storybook/core-events": 7.0.0-alpha.49
-    "@storybook/csf": next
+    "@storybook/csf": 0.0.2-next.5
     "@storybook/router": 7.0.0-alpha.49
     "@storybook/types": 7.0.0-alpha.49
     global: ^4.4.0
@@ -5702,7 +5716,7 @@ __metadata:
   resolution: "@storybook/addon-storyshots-puppeteer@workspace:addons/storyshots/storyshots-puppeteer"
   dependencies:
     "@axe-core/puppeteer": ^4.2.0
-    "@storybook/csf": next
+    "@storybook/csf": 0.0.2-next.5
     "@storybook/node-logger": 7.0.0-alpha.49
     "@storybook/types": 7.0.0-alpha.49
     "@types/jest-image-snapshot": ^4.1.3
@@ -6027,7 +6041,7 @@ __metadata:
     "@storybook/client-logger": 7.0.0-alpha.49
     "@storybook/core-common": 7.0.0-alpha.49
     "@storybook/core-events": 7.0.0-alpha.49
-    "@storybook/csf": next
+    "@storybook/csf": 0.0.2-next.5
     "@storybook/router": 7.0.0-alpha.49
     "@storybook/theming": 7.0.0-alpha.49
     "@storybook/types": 7.0.0-alpha.49
@@ -6097,7 +6111,7 @@ __metadata:
     "@storybook/client-logger": 7.0.0-alpha.49
     "@storybook/components": 7.0.0-alpha.49
     "@storybook/core-events": 7.0.0-alpha.49
-    "@storybook/csf": next
+    "@storybook/csf": 0.0.2-next.5
     "@storybook/docs-tools": 7.0.0-alpha.49
     "@storybook/preview-web": 7.0.0-alpha.49
     "@storybook/store": 7.0.0-alpha.49
@@ -6334,7 +6348,7 @@ __metadata:
     "@storybook/addons": 7.0.0-alpha.49
     "@storybook/client-logger": 7.0.0-alpha.49
     "@storybook/core-common": 7.0.0-alpha.49
-    "@storybook/csf": next
+    "@storybook/csf": 0.0.2-next.5
     "@storybook/store": 7.0.0-alpha.49
     "@storybook/types": 7.0.0-alpha.49
     "@types/qs": ^6.9.5
@@ -6375,7 +6389,7 @@ __metadata:
   resolution: "@storybook/codemod@workspace:lib/codemod"
   dependencies:
     "@babel/types": ^7.12.11
-    "@storybook/csf": next
+    "@storybook/csf": 0.0.2-next.5
     "@storybook/csf-tools": 7.0.0-alpha.49
     "@storybook/node-logger": 7.0.0-alpha.49
     "@storybook/types": 7.0.0-alpha.49
@@ -6398,7 +6412,7 @@ __metadata:
   dependencies:
     "@popperjs/core": ^2.6.0
     "@storybook/client-logger": 7.0.0-alpha.49
-    "@storybook/csf": next
+    "@storybook/csf": 0.0.2-next.5
     "@storybook/theming": 7.0.0-alpha.49
     "@storybook/types": 7.0.0-alpha.49
     "@types/overlayscrollbars": ^1.12.0
@@ -6433,7 +6447,7 @@ __metadata:
     "@storybook/client-api": 7.0.0-alpha.49
     "@storybook/client-logger": 7.0.0-alpha.49
     "@storybook/core-events": 7.0.0-alpha.49
-    "@storybook/csf": next
+    "@storybook/csf": 0.0.2-next.5
     "@storybook/preview-web": 7.0.0-alpha.49
     "@storybook/store": 7.0.0-alpha.49
     "@storybook/types": 7.0.0-alpha.49
@@ -6517,7 +6531,7 @@ __metadata:
     "@storybook/core-client": 7.0.0-alpha.49
     "@storybook/core-common": 7.0.0-alpha.49
     "@storybook/core-events": 7.0.0-alpha.49
-    "@storybook/csf": next
+    "@storybook/csf": 0.0.2-next.5
     "@storybook/csf-tools": 7.0.0-alpha.49
     "@storybook/docs-mdx": 0.0.1-canary.12433cf.0
     "@storybook/node-logger": 7.0.0-alpha.49
@@ -6605,7 +6619,7 @@ __metadata:
     "@babel/parser": ^7.12.11
     "@babel/traverse": ^7.12.11
     "@babel/types": ^7.12.11
-    "@storybook/csf": next
+    "@storybook/csf": 0.0.2-next.5
     "@storybook/types": 7.0.0-alpha.49
     "@types/fs-extra": ^9.0.6
     fs-extra: ^9.0.1
@@ -6624,14 +6638,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/csf@npm:0.0.2--canary.53.4879818.0":
-  version: 0.0.2--canary.53.4879818.0
-  resolution: "@storybook/csf@npm:0.0.2--canary.53.4879818.0"
+"@storybook/csf@npm:0.0.2-next.5":
+  version: 0.0.2-next.5
+  resolution: "@storybook/csf@npm:0.0.2-next.5"
   dependencies:
     expect-type: ^0.14.2
     lodash: ^4.17.15
     type-fest: ^2.19.0
-  checksum: 23f5e01d4d090d6454df0b06831a238a2d30f725c145ef5e9f2a4c9ae5d260e7ed85d288cc6750e0efc78650cac24b1104bdc12fafc09a8469a70b1f8f6c123d
+  checksum: 5be51f30cf91895085ff2a2ab45af086f3a46233c2899b251c0ec04a14636dd58428af0f1ab9fb7a8995011e7fb2498ed6590e57b403d9f0cfefb2685403ca85
   languageName: node
   linkType: hard
 
@@ -6644,17 +6658,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/csf@npm:next":
-  version: 0.0.2-next.2
-  resolution: "@storybook/csf@npm:0.0.2-next.2"
-  dependencies:
-    expect-type: ^0.14.2
-    lodash: ^4.17.15
-    type-fest: ^2.19.0
-  checksum: 744e701c826826af065faf3ea3d932a761396fc5e348d097dbe66528e8184b2f5ae67dec8432262e0341dba87997c1d77020697803884e2766f29a4d2fc9f90d
-  languageName: node
-  linkType: hard
-
 "@storybook/docs-mdx@npm:0.0.1-canary.12433cf.0":
   version: 0.0.1-canary.12433cf.0
   resolution: "@storybook/docs-mdx@npm:0.0.1-canary.12433cf.0"
@@ -7398,7 +7401,7 @@ __metadata:
     "@storybook/core-events": "workspace:*"
     "@storybook/core-server": "workspace:*"
     "@storybook/core-webpack": "workspace:*"
-    "@storybook/csf": next
+    "@storybook/csf": 0.0.2-next.5
     "@storybook/csf-plugin": "workspace:*"
     "@storybook/csf-tools": "workspace:*"
     "@storybook/docs-tools": "workspace:*"
@@ -7495,6 +7498,7 @@ __metadata:
     esbuild-loader: ^2.19.0
     esbuild-plugin-alias: ^0.2.1
     eslint: ^8.26.0
+    eslint-import-resolver-typescript: ^3.5.2
     eslint-plugin-import: ^2.26.0
     eslint-plugin-react: ^7.31.10
     eslint-plugin-storybook: ^0.6.6
@@ -7680,7 +7684,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/source-loader@workspace:lib/source-loader"
   dependencies:
-    "@storybook/csf": next
+    "@storybook/csf": 0.0.2-next.5
     "@storybook/types": 7.0.0-alpha.49
     estraverse: ^5.2.0
     jest-specific-snapshot: ^4.0.0
@@ -7700,7 +7704,7 @@ __metadata:
     "@storybook/addons": 7.0.0-alpha.49
     "@storybook/client-logger": 7.0.0-alpha.49
     "@storybook/core-events": 7.0.0-alpha.49
-    "@storybook/csf": next
+    "@storybook/csf": 0.0.2-next.5
     "@storybook/types": 7.0.0-alpha.49
     dequal: ^2.0.2
     global: ^4.4.0
@@ -7865,7 +7869,7 @@ __metadata:
   resolution: "@storybook/types@workspace:lib/types"
   dependencies:
     "@babel/core": ^7.12.10
-    "@storybook/csf": 0.0.2--canary.53.4879818.0
+    "@storybook/csf": 0.0.2-next.5
     "@types/babel__core": ^7.0.0
     "@types/express": ^4.7.0
     "@types/node": ^16.0.0
@@ -16357,6 +16361,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"eslint-import-resolver-typescript@npm:^3.5.2":
+  version: 3.5.2
+  resolution: "eslint-import-resolver-typescript@npm:3.5.2"
+  dependencies:
+    debug: ^4.3.4
+    enhanced-resolve: ^5.10.0
+    get-tsconfig: ^4.2.0
+    globby: ^13.1.2
+    is-core-module: ^2.10.0
+    is-glob: ^4.0.3
+    synckit: ^0.8.4
+  peerDependencies:
+    eslint: "*"
+    eslint-plugin-import: "*"
+  checksum: 7947cccc80d439132cb75ec7a74bf710fef72b3b0d6d804246265836f143e86520608a5a3c3313aec0e21a8b0ca0eb99101236895ea89b71559d0cf9c9ac377a
+  languageName: node
+  linkType: hard
+
 "eslint-module-utils@npm:^2.7.3":
   version: 2.7.4
   resolution: "eslint-module-utils@npm:2.7.4"
@@ -18451,6 +18473,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-tsconfig@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "get-tsconfig@npm:4.2.0"
+  checksum: a60b2665d57894f844116cd0947722d107f2f639ef62d01a488da70f3d91707eeb3843a5c2eb49e21b6a46a68853d42450a63c251cb1659576454febb03bd307
+  languageName: node
+  linkType: hard
+
 "get-value@npm:^2.0.3, get-value@npm:^2.0.6":
   version: 2.0.6
   resolution: "get-value@npm:2.0.6"
@@ -18767,6 +18796,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globalyzer@npm:0.1.0":
+  version: 0.1.0
+  resolution: "globalyzer@npm:0.1.0"
+  checksum: e16e47a5835cbe8a021423d4c7fcd9f5f85815b4190a7f50c1fdb95fc559d72e4fb30be96f106c66a99413f36d72da0f8323d19d27f60a8feec9d936139ec5a8
+  languageName: node
+  linkType: hard
+
 "globby@npm:10.0.0":
   version: 10.0.0
   resolution: "globby@npm:10.0.0"
@@ -18854,6 +18890,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globrex@npm:^0.1.2":
+  version: 0.1.2
+  resolution: "globrex@npm:0.1.2"
+  checksum: a54c029520cf58bda1d8884f72bd49b4cd74e977883268d931fd83bcbd1a9eb96d57c7dbd4ad80148fb9247467ebfb9b215630b2ed7563b2a8de02e1ff7f89d1
+  languageName: node
+  linkType: hard
+
 "glur@npm:^1.1.2":
   version: 1.1.2
   resolution: "glur@npm:1.1.2"
@@ -20373,7 +20416,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-core-module@npm:^2.5.0, is-core-module@npm:^2.8.1, is-core-module@npm:^2.9.0":
+"is-core-module@npm:^2.10.0, is-core-module@npm:^2.5.0, is-core-module@npm:^2.8.1, is-core-module@npm:^2.9.0":
   version: 2.11.0
   resolution: "is-core-module@npm:2.11.0"
   dependencies:
@@ -33278,6 +33321,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"synckit@npm:^0.8.4":
+  version: 0.8.4
+  resolution: "synckit@npm:0.8.4"
+  dependencies:
+    "@pkgr/utils": ^2.3.1
+    tslib: ^2.4.0
+  checksum: cd2444b7879b010b220721874527dbf3231a05cd42a47b24260db9c9427e9c3d3e481bd41175112434267dec3402166cfde417c4ae254937b5cc3b0cd994b992
+  languageName: node
+  linkType: hard
+
 "syntax-error@npm:^1.1.6":
   version: 1.4.0
   resolution: "syntax-error@npm:1.4.0"
@@ -33600,6 +33653,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tiny-glob@npm:^0.2.9":
+  version: 0.2.9
+  resolution: "tiny-glob@npm:0.2.9"
+  dependencies:
+    globalyzer: 0.1.0
+    globrex: ^0.1.2
+  checksum: cbe072f0d213a1395d30aa94845a051d4af18fe8ffb79c8e99ac1787cd25df69083f17791a53997cb65f469f48950cb61426ccc0683cc9df170ac2430e883702
+  languageName: node
+  linkType: hard
+
 "tiny-inflate@npm:^1.0.0, tiny-inflate@npm:^1.0.2":
   version: 1.0.3
   resolution: "tiny-inflate@npm:1.0.3"