From a91b0ba3a6c2f885d8f965e23cbd8c7bfdb42f11 Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Tue, 1 Oct 2024 11:47:43 +0200
Subject: [PATCH 01/11] feat: add code snippet panel to single story view mode

---
 code/addons/docs/package.json                 | 13 ++++++-
 code/addons/docs/src/manager.tsx              | 38 +++++++++++++++++++
 code/addons/essentials/package.json           |  5 +++
 code/addons/essentials/src/docs/manager.ts    |  2 +
 code/addons/essentials/src/index.ts           |  2 +-
 .../vue3/src/docs/sourceDecorator.ts          |  6 +--
 6 files changed, 58 insertions(+), 8 deletions(-)
 create mode 100644 code/addons/docs/src/manager.tsx
 create mode 100644 code/addons/essentials/src/docs/manager.ts

diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
index f5834a822026..fbfa158c43d1 100644
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@@ -71,7 +71,12 @@
     "./angular": "./angular/index.js",
     "./angular/index.js": "./angular/index.js",
     "./web-components/index.js": "./web-components/index.js",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./manager": {
+      "types": "./dist/manager.d.ts",
+      "import": "./dist/manager.mjs",
+      "require": "./dist/manager.js"
+    }
   },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -129,7 +134,11 @@
       "./src/preview.ts",
       "./src/blocks.ts",
       "./src/shims/mdx-react-shim.ts",
-      "./src/mdx-loader.ts"
+      "./src/mdx-loader.ts",
+      "./src/manager.tsx"
+    ],
+    "managerEntries": [
+      "./src/manager.tsx"
     ]
   },
   "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
diff --git a/code/addons/docs/src/manager.tsx b/code/addons/docs/src/manager.tsx
new file mode 100644
index 000000000000..9b8cdafb7799
--- /dev/null
+++ b/code/addons/docs/src/manager.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { AddonPanel, type SyntaxHighlighterFormatTypes } from 'storybook/internal/components';
+import { ADDON_ID, PANEL_ID, PARAM_KEY, SNIPPET_RENDERED } from 'storybook/internal/docs-tools';
+import { addons, types, useAddonState, useChannel } from 'storybook/internal/manager-api';
+
+import { Source } from '@storybook/blocks';
+
+addons.register(ADDON_ID, (api) => {
+  addons.add(PANEL_ID, {
+    title: 'Code',
+    type: types.PANEL,
+    paramKey: PARAM_KEY,
+    match: ({ viewMode }) => viewMode === 'story',
+    render: ({ active }) => {
+      const [codeSnippet, setSourceCode] = useAddonState<{
+        source: string;
+        format: SyntaxHighlighterFormatTypes;
+      }>(ADDON_ID, {
+        source: '',
+        format: 'html',
+      });
+
+      useChannel({
+        [SNIPPET_RENDERED]: ({ source, format }) => {
+          setSourceCode({ source, format: format ?? 'html' });
+          console.log('SOURCE CODE CHANGED', codeSnippet.source);
+        },
+      });
+
+      return (
+        <AddonPanel active={!!active}>
+          <Source code={codeSnippet.source} format={codeSnippet.format} />
+        </AddonPanel>
+      );
+    },
+  });
+});
diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json
index 4f7ad700ec0d..73e1cbcb6f9f 100644
--- a/code/addons/essentials/package.json
+++ b/code/addons/essentials/package.json
@@ -40,6 +40,7 @@
     },
     "./backgrounds/manager": "./dist/backgrounds/manager.js",
     "./controls/manager": "./dist/controls/manager.js",
+    "./docs/manager": "./dist/docs/manager.js",
     "./docs/preview": {
       "types": "./dist/docs/preview.d.ts",
       "import": "./dist/docs/preview.mjs",
@@ -114,10 +115,14 @@
       "./src/docs/preset.ts",
       "./src/docs/mdx-react-shim.ts"
     ],
+    "entries": [
+      "./src/docs/manager.ts"
+    ],
     "managerEntries": [
       "./src/actions/manager.ts",
       "./src/backgrounds/manager.ts",
       "./src/controls/manager.ts",
+      "./src/docs/manager.ts",
       "./src/measure/manager.ts",
       "./src/outline/manager.ts",
       "./src/toolbars/manager.ts",
diff --git a/code/addons/essentials/src/docs/manager.ts b/code/addons/essentials/src/docs/manager.ts
new file mode 100644
index 000000000000..6101f7d79261
--- /dev/null
+++ b/code/addons/essentials/src/docs/manager.ts
@@ -0,0 +1,2 @@
+// @ts-expect-error (no types needed for this)
+export * from '@storybook/addon-docs/manager';
diff --git a/code/addons/essentials/src/index.ts b/code/addons/essentials/src/index.ts
index 5809420bc1b8..a72554227ba2 100644
--- a/code/addons/essentials/src/index.ts
+++ b/code/addons/essentials/src/index.ts
@@ -88,9 +88,9 @@ export function addons(options: PresetOptions) {
 
   // NOTE: The order of these addons is important.
   return [
-    'docs',
     'controls',
     'actions',
+    'docs',
     'backgrounds',
     'viewport',
     'toolbars',
diff --git a/code/renderers/vue3/src/docs/sourceDecorator.ts b/code/renderers/vue3/src/docs/sourceDecorator.ts
index 7eb8734305af..cc2f922f63f1 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.ts
@@ -107,7 +107,6 @@ ${template}`;
  * Checks if the source code generation should be skipped for the given Story context. Will be true
  * if one of the following is true:
  *
- * - View mode is not "docs"
  * - Story is no arg story
  * - Story has set custom source code via parameters.docs.source.code
  * - Story has set source type to "code" via parameters.docs.source.type
@@ -120,13 +119,10 @@ export const shouldSkipSourceCodeGeneration = (context: StoryContext): boolean =
   }
 
   const isArgsStory = context?.parameters.__isArgsStory;
-  const isDocsViewMode = context?.viewMode === 'docs';
 
   // never render if the user is forcing the block to render code, or
   // if the user provides code, or if it's not an args story.
-  return (
-    !isDocsViewMode || !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE
-  );
+  return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
 };
 
 /**

From 107c40bf71a437b72f7c1d1755e10da0b7926a04 Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Tue, 1 Oct 2024 12:03:33 +0200
Subject: [PATCH 02/11] remove console log

---
 code/addons/docs/src/manager.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/code/addons/docs/src/manager.tsx b/code/addons/docs/src/manager.tsx
index 9b8cdafb7799..ed3823ed4492 100644
--- a/code/addons/docs/src/manager.tsx
+++ b/code/addons/docs/src/manager.tsx
@@ -24,7 +24,6 @@ addons.register(ADDON_ID, (api) => {
       useChannel({
         [SNIPPET_RENDERED]: ({ source, format }) => {
           setSourceCode({ source, format: format ?? 'html' });
-          console.log('SOURCE CODE CHANGED', codeSnippet.source);
         },
       });
 

From a283cea33680e379625bbc57dbd8b52c46c9ddcf Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Mon, 25 Nov 2024 10:04:25 +0100
Subject: [PATCH 03/11] use dark theme

---
 code/addons/docs/src/manager.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/addons/docs/src/manager.tsx b/code/addons/docs/src/manager.tsx
index ed3823ed4492..212956b99ebb 100644
--- a/code/addons/docs/src/manager.tsx
+++ b/code/addons/docs/src/manager.tsx
@@ -29,7 +29,7 @@ addons.register(ADDON_ID, (api) => {
 
       return (
         <AddonPanel active={!!active}>
-          <Source code={codeSnippet.source} format={codeSnippet.format} />
+          <Source code={codeSnippet.source} format={codeSnippet.format} dark />
         </AddonPanel>
       );
     },

From 1fa0e7da9125544912704155fcea4d8e1b115b0f Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Mon, 25 Nov 2024 11:15:44 +0100
Subject: [PATCH 04/11] feat: support `docs.source.addonPanel` parameter

---
 code/addons/docs/src/manager.tsx    | 37 ++++++++++++++++++++++++++++-
 code/addons/essentials/src/index.ts |  2 +-
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/code/addons/docs/src/manager.tsx b/code/addons/docs/src/manager.tsx
index 212956b99ebb..09c371be238b 100644
--- a/code/addons/docs/src/manager.tsx
+++ b/code/addons/docs/src/manager.tsx
@@ -1,12 +1,27 @@
 import React from 'react';
 
 import { AddonPanel, type SyntaxHighlighterFormatTypes } from 'storybook/internal/components';
+import { FORCE_RE_RENDER, PRELOAD_ENTRIES } from 'storybook/internal/core-events';
 import { ADDON_ID, PANEL_ID, PARAM_KEY, SNIPPET_RENDERED } from 'storybook/internal/docs-tools';
 import { addons, types, useAddonState, useChannel } from 'storybook/internal/manager-api';
 
 import { Source } from '@storybook/blocks';
 
-addons.register(ADDON_ID, (api) => {
+addons.register(ADDON_ID, async (api) => {
+  // at this point, the parameters are not yet defined so we can not check whether the addon panel should
+  // be added or not. The "PRELOAD_ENTRIES" event seems to be the earliest point in time where the parameters
+  // are available
+  const isDisabled = await new Promise<boolean>((resolve) => {
+    api.once(PRELOAD_ENTRIES, () => {
+      const parameter = api.getCurrentParameter(PARAM_KEY);
+      resolve(shouldDisableAddonPanel(parameter));
+    });
+  });
+
+  if (isDisabled) {
+    return;
+  }
+
   addons.add(PANEL_ID, {
     title: 'Code',
     type: types.PANEL,
@@ -34,4 +49,24 @@ addons.register(ADDON_ID, (api) => {
       );
     },
   });
+
+  api.emit(FORCE_RE_RENDER);
 });
+
+const isObject = (value: unknown): value is object => {
+  return value != null && typeof value === 'object';
+};
+
+/**
+ * Checks whether the addon panel should be disabled by checking the parameter.source.addonPanel
+ * property.
+ */
+const shouldDisableAddonPanel = (parameter: unknown) => {
+  return (
+    isObject(parameter) &&
+    'source' in parameter &&
+    isObject(parameter.source) &&
+    'addonPanel' in parameter.source &&
+    parameter.source.addonPanel === false
+  );
+};
diff --git a/code/addons/essentials/src/index.ts b/code/addons/essentials/src/index.ts
index a72554227ba2..5809420bc1b8 100644
--- a/code/addons/essentials/src/index.ts
+++ b/code/addons/essentials/src/index.ts
@@ -88,9 +88,9 @@ export function addons(options: PresetOptions) {
 
   // NOTE: The order of these addons is important.
   return [
+    'docs',
     'controls',
     'actions',
-    'docs',
     'backgrounds',
     'viewport',
     'toolbars',

From 01e11e5bb9f0e8fa8626d1c8a98230210af93670 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Tue, 3 Dec 2024 22:25:15 +0800
Subject: [PATCH 05/11] Addon-docs: Fix and document source panel disabling

---
 MIGRATION.md                                  | 20 ++++++++-
 code/addons/docs/src/manager.tsx              | 42 ++-----------------
 .../stories/sourcePanel/index.stories.tsx     | 15 +++++++
 3 files changed, 38 insertions(+), 39 deletions(-)
 create mode 100644 code/addons/docs/template/stories/sourcePanel/index.stories.tsx

diff --git a/MIGRATION.md b/MIGRATION.md
index 2e2e735fb21f..07aecbbe3973 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1,5 +1,7 @@
 <h1>Migration</h1>
 
+- [From version 8.4.x to 8.5.x](#from-version-84x-to-85x)
+  - [Added source code pnael to docs](#added-source-code-pnael-to-docs)
 - [From version 8.2.x to 8.3.x](#from-version-82x-to-83x)
   - [Removed `experimental_SIDEBAR_BOTTOM` and deprecated `experimental_SIDEBAR_TOP` addon types](#removed-experimental_sidebar_bottom-and-deprecated-experimental_sidebar_top-addon-types)
   - [New parameters format for addon backgrounds](#new-parameters-format-for-addon-backgrounds)
@@ -167,7 +169,7 @@
     - [Angular: Drop support for calling Storybook directly](#angular-drop-support-for-calling-storybook-directly)
     - [Angular: Application providers and ModuleWithProviders](#angular-application-providers-and-modulewithproviders)
     - [Angular: Removed legacy renderer](#angular-removed-legacy-renderer)
-    - [Angular: initializer functions](#angular-initializer-functions)
+    - [Angular: Initializer functions](#angular-initializer-functions)
     - [Next.js: use the `@storybook/nextjs` framework](#nextjs-use-the-storybooknextjs-framework)
     - [SvelteKit: needs the `@storybook/sveltekit` framework](#sveltekit-needs-the-storybooksveltekit-framework)
     - [Vue3: replaced app export with setup](#vue3-replaced-app-export-with-setup)
@@ -419,6 +421,22 @@
   - [Packages renaming](#packages-renaming)
   - [Deprecated embedded addons](#deprecated-embedded-addons)
 
+## From version 8.4.x to 8.5.x
+
+### Added source code pnael to docs
+
+Starting in 8.5, Storybook Docs (`@storybook/addon-docs`) automatically adds a new addon panel to stories that displays a source snippet beneath each story. This works similarly to the existing [source snippet doc block](https://storybook.js.org/docs/writing-docs/doc-blocks#source), but in the story view. It is intended to replace the [Storysource addon](https://storybook.js.org/addons/@storybook/addon-storysource).
+
+If you wish to disable this panel globally, add the following line to your `.storybook/preview.js` project configuration. You can also selectively disable/enable at the story level.
+
+```js
+export default {
+  parameters: {
+    docsSourcePanel: { disable: true },
+  },
+};
+```
+
 ## From version 8.2.x to 8.3.x
 
 ### Removed `experimental_SIDEBAR_BOTTOM` and deprecated `experimental_SIDEBAR_TOP` addon types
diff --git a/code/addons/docs/src/manager.tsx b/code/addons/docs/src/manager.tsx
index 09c371be238b..fdbe0375d369 100644
--- a/code/addons/docs/src/manager.tsx
+++ b/code/addons/docs/src/manager.tsx
@@ -1,31 +1,17 @@
 import React from 'react';
 
 import { AddonPanel, type SyntaxHighlighterFormatTypes } from 'storybook/internal/components';
-import { FORCE_RE_RENDER, PRELOAD_ENTRIES } from 'storybook/internal/core-events';
-import { ADDON_ID, PANEL_ID, PARAM_KEY, SNIPPET_RENDERED } from 'storybook/internal/docs-tools';
+import { ADDON_ID, PANEL_ID, SNIPPET_RENDERED } from 'storybook/internal/docs-tools';
 import { addons, types, useAddonState, useChannel } from 'storybook/internal/manager-api';
 
 import { Source } from '@storybook/blocks';
 
-addons.register(ADDON_ID, async (api) => {
-  // at this point, the parameters are not yet defined so we can not check whether the addon panel should
-  // be added or not. The "PRELOAD_ENTRIES" event seems to be the earliest point in time where the parameters
-  // are available
-  const isDisabled = await new Promise<boolean>((resolve) => {
-    api.once(PRELOAD_ENTRIES, () => {
-      const parameter = api.getCurrentParameter(PARAM_KEY);
-      resolve(shouldDisableAddonPanel(parameter));
-    });
-  });
-
-  if (isDisabled) {
-    return;
-  }
-
+addons.register(ADDON_ID, (api) => {
   addons.add(PANEL_ID, {
     title: 'Code',
     type: types.PANEL,
-    paramKey: PARAM_KEY,
+    // disable this with `docsSourcePanel: { disable: true }`
+    paramKey: 'docsSourcePanel',
     match: ({ viewMode }) => viewMode === 'story',
     render: ({ active }) => {
       const [codeSnippet, setSourceCode] = useAddonState<{
@@ -49,24 +35,4 @@ addons.register(ADDON_ID, async (api) => {
       );
     },
   });
-
-  api.emit(FORCE_RE_RENDER);
 });
-
-const isObject = (value: unknown): value is object => {
-  return value != null && typeof value === 'object';
-};
-
-/**
- * Checks whether the addon panel should be disabled by checking the parameter.source.addonPanel
- * property.
- */
-const shouldDisableAddonPanel = (parameter: unknown) => {
-  return (
-    isObject(parameter) &&
-    'source' in parameter &&
-    isObject(parameter.source) &&
-    'addonPanel' in parameter.source &&
-    parameter.source.addonPanel === false
-  );
-};
diff --git a/code/addons/docs/template/stories/sourcePanel/index.stories.tsx b/code/addons/docs/template/stories/sourcePanel/index.stories.tsx
new file mode 100644
index 000000000000..dd4d2208fe6e
--- /dev/null
+++ b/code/addons/docs/template/stories/sourcePanel/index.stories.tsx
@@ -0,0 +1,15 @@
+export default {
+  component: globalThis.Components.Button,
+  tags: ['autodocs'],
+  parameters: {
+    chromatic: { disable: true },
+    docsSourcePanel: { disable: true },
+  },
+};
+
+export const One = { args: { label: 'One' } };
+export const Two = { args: { label: 'Two' } };
+export const WithSource = {
+  args: { label: 'Three' },
+  parameters: { docsSourcePanel: { disable: false } },
+};

From 2be176923b7a2e00216d26b61142704851e82a92 Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Wed, 4 Dec 2024 08:10:31 +0100
Subject: [PATCH 06/11] fix typos

---
 MIGRATION.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 07aecbbe3973..db4d3b2d15c2 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1,7 +1,7 @@
 <h1>Migration</h1>
 
 - [From version 8.4.x to 8.5.x](#from-version-84x-to-85x)
-  - [Added source code pnael to docs](#added-source-code-pnael-to-docs)
+  - [Added source code panel to docs](#added-source-code-panel-to-docs)
 - [From version 8.2.x to 8.3.x](#from-version-82x-to-83x)
   - [Removed `experimental_SIDEBAR_BOTTOM` and deprecated `experimental_SIDEBAR_TOP` addon types](#removed-experimental_sidebar_bottom-and-deprecated-experimental_sidebar_top-addon-types)
   - [New parameters format for addon backgrounds](#new-parameters-format-for-addon-backgrounds)
@@ -423,7 +423,7 @@
 
 ## From version 8.4.x to 8.5.x
 
-### Added source code pnael to docs
+### Added source code panel to docs
 
 Starting in 8.5, Storybook Docs (`@storybook/addon-docs`) automatically adds a new addon panel to stories that displays a source snippet beneath each story. This works similarly to the existing [source snippet doc block](https://storybook.js.org/docs/writing-docs/doc-blocks#source), but in the story view. It is intended to replace the [Storysource addon](https://storybook.js.org/addons/@storybook/addon-storysource).
 

From 33ce8f93c8e9039c4566cc3e2ce484579282040d Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Wed, 4 Dec 2024 10:18:25 +0100
Subject: [PATCH 07/11] move docs source panel order

---
 code/addons/essentials/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/addons/essentials/src/index.ts b/code/addons/essentials/src/index.ts
index 5809420bc1b8..a72554227ba2 100644
--- a/code/addons/essentials/src/index.ts
+++ b/code/addons/essentials/src/index.ts
@@ -88,9 +88,9 @@ export function addons(options: PresetOptions) {
 
   // NOTE: The order of these addons is important.
   return [
-    'docs',
     'controls',
     'actions',
+    'docs',
     'backgrounds',
     'viewport',
     'toolbars',

From db146c34dcc878e321b167bdd743e1ec6d396ce9 Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Wed, 4 Dec 2024 10:54:04 +0100
Subject: [PATCH 08/11] fix react code snippet format

---
 code/addons/docs/src/manager.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/addons/docs/src/manager.tsx b/code/addons/docs/src/manager.tsx
index fdbe0375d369..a02fe22f0764 100644
--- a/code/addons/docs/src/manager.tsx
+++ b/code/addons/docs/src/manager.tsx
@@ -24,7 +24,7 @@ addons.register(ADDON_ID, (api) => {
 
       useChannel({
         [SNIPPET_RENDERED]: ({ source, format }) => {
-          setSourceCode({ source, format: format ?? 'html' });
+          setSourceCode({ source, format });
         },
       });
 

From 75f235a4bd67d2db69d98324236b9082992cbe50 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Mon, 9 Dec 2024 17:13:12 +0800
Subject: [PATCH 09/11] Fix merge conflict remnants

---
 MIGRATION.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index 2b5ff2bcb9c6..7e46fa5bb1a2 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1,10 +1,8 @@
 <h1>Migration</h1>
 
 - [From version 8.4.x to 8.5.x](#from-version-84x-to-85x)
-  <<<<<<< HEAD
-  - # [Added source code panel to docs](#added-source-code-panel-to-docs)
+  - [Added source code panel to docs](#added-source-code-panel-to-docs)
   - [Indexing behavior of @storybook/experimental-addon-test is changed](#indexing-behavior-of-storybookexperimental-addon-test-is-changed)
-    > > > > > > > next
 - [From version 8.2.x to 8.3.x](#from-version-82x-to-83x)
   - [Removed `experimental_SIDEBAR_BOTTOM` and deprecated `experimental_SIDEBAR_TOP` addon types](#removed-experimental_sidebar_bottom-and-deprecated-experimental_sidebar_top-addon-types)
   - [New parameters format for addon backgrounds](#new-parameters-format-for-addon-backgrounds)

From d749986384f29891b24d45d76a86bcb27001b4ba Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Thu, 12 Dec 2024 10:15:45 +0100
Subject: [PATCH 10/11] refactor: update parameter to disable code panel

---
 MIGRATION.md                                  |  4 ++-
 code/addons/docs/src/manager.tsx              | 25 ++++++++++++++++---
 .../stories/sourcePanel/index.stories.tsx     | 12 +++++++--
 code/core/src/manager/container/Panel.tsx     |  6 +++++
 code/core/src/types/modules/addons.ts         |  4 +--
 5 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/MIGRATION.md b/MIGRATION.md
index f3fa585591e4..6e3f43cc5a48 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -435,7 +435,9 @@ If you wish to disable this panel globally, add the following line to your `.sto
 ```js
 export default {
   parameters: {
-    docsSourcePanel: { disable: true },
+    docs: {
+      codePanel: false,
+    },
   },
 };
 ```
diff --git a/code/addons/docs/src/manager.tsx b/code/addons/docs/src/manager.tsx
index a02fe22f0764..0b84cd6e36f8 100644
--- a/code/addons/docs/src/manager.tsx
+++ b/code/addons/docs/src/manager.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { AddonPanel, type SyntaxHighlighterFormatTypes } from 'storybook/internal/components';
-import { ADDON_ID, PANEL_ID, SNIPPET_RENDERED } from 'storybook/internal/docs-tools';
+import { ADDON_ID, PANEL_ID, PARAM_KEY, SNIPPET_RENDERED } from 'storybook/internal/docs-tools';
 import { addons, types, useAddonState, useChannel } from 'storybook/internal/manager-api';
 
 import { Source } from '@storybook/blocks';
@@ -10,8 +10,27 @@ addons.register(ADDON_ID, (api) => {
   addons.add(PANEL_ID, {
     title: 'Code',
     type: types.PANEL,
-    // disable this with `docsSourcePanel: { disable: true }`
-    paramKey: 'docsSourcePanel',
+    paramKey: PARAM_KEY,
+    /**
+     * This code panel can be disabled by the user by adding this parameter:
+     *
+     * @example
+     *
+     * ```ts
+     *  parameters: {
+     *    docs: {
+     *      codePanel: false,
+     *    },
+     *  },
+     * ```
+     */
+    disabled: (parameters) => {
+      return (
+        !!parameters &&
+        typeof parameters[PARAM_KEY] === 'object' &&
+        parameters[PARAM_KEY].codePanel === false
+      );
+    },
     match: ({ viewMode }) => viewMode === 'story',
     render: ({ active }) => {
       const [codeSnippet, setSourceCode] = useAddonState<{
diff --git a/code/addons/docs/template/stories/sourcePanel/index.stories.tsx b/code/addons/docs/template/stories/sourcePanel/index.stories.tsx
index dd4d2208fe6e..9958096cb815 100644
--- a/code/addons/docs/template/stories/sourcePanel/index.stories.tsx
+++ b/code/addons/docs/template/stories/sourcePanel/index.stories.tsx
@@ -3,13 +3,21 @@ export default {
   tags: ['autodocs'],
   parameters: {
     chromatic: { disable: true },
-    docsSourcePanel: { disable: true },
+    docs: {
+      codePanel: false,
+    },
   },
 };
 
 export const One = { args: { label: 'One' } };
+
 export const Two = { args: { label: 'Two' } };
+
 export const WithSource = {
   args: { label: 'Three' },
-  parameters: { docsSourcePanel: { disable: false } },
+  parameters: {
+    docs: {
+      codePanel: true,
+    },
+  },
 };
diff --git a/code/core/src/manager/container/Panel.tsx b/code/core/src/manager/container/Panel.tsx
index c81e489d8f68..f8cc2877cef0 100644
--- a/code/core/src/manager/container/Panel.tsx
+++ b/code/core/src/manager/container/Panel.tsx
@@ -32,6 +32,12 @@ const getPanels = (api: API) => {
     if (paramKey && parameters && parameters[paramKey] && parameters[paramKey].disable) {
       return;
     }
+    if (
+      panel.disabled === true ||
+      (typeof panel.disabled === 'function' && panel.disabled(parameters))
+    ) {
+      return;
+    }
     filteredPanels[id] = panel;
   });
 
diff --git a/code/core/src/types/modules/addons.ts b/code/core/src/types/modules/addons.ts
index 47f5aec6412b..b2c7b4ac2f3c 100644
--- a/code/core/src/types/modules/addons.ts
+++ b/code/core/src/types/modules/addons.ts
@@ -5,7 +5,7 @@ import type { TestProviderConfig, TestingModuleProgressReportProgress } from '..
 import type { RenderData as RouterData } from '../../router/types';
 import type { ThemeVars } from '../../theming/types';
 import type { API_SidebarOptions } from './api';
-import type { API_HashEntry, API_StatusState, API_StatusUpdate } from './api-stories';
+import type { API_HashEntry, API_StoryEntry } from './api-stories';
 import type {
   Args,
   ArgsStoryFn as ArgsStoryFnForFramework,
@@ -392,7 +392,7 @@ export interface Addon_BaseType {
   /** @unstable */
   paramKey?: string;
   /** @unstable */
-  disabled?: boolean;
+  disabled?: boolean | ((parameters: API_StoryEntry['parameters']) => boolean);
   /** @unstable */
   hidden?: boolean;
 }

From f2a8af81c1ab5b8b665a6ccc167eb1fb8df9b784 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Fri, 13 Dec 2024 20:37:40 +0800
Subject: [PATCH 11/11] Fix typechecks

---
 code/core/src/manager/components/preview/Toolbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/core/src/manager/components/preview/Toolbar.tsx b/code/core/src/manager/components/preview/Toolbar.tsx
index 5dd460e80e69..05385487a804 100644
--- a/code/core/src/manager/components/preview/Toolbar.tsx
+++ b/code/core/src/manager/components/preview/Toolbar.tsx
@@ -92,7 +92,7 @@ export const createTabsTool = (tabs: Addon_BaseType[]): Addon_BaseType => ({
                 const isActive = rp.path.includes(`tab=${tab.id}`);
                 return (
                   <TabButton
-                    disabled={tab.disabled}
+                    disabled={!!tab.disabled}
                     active={isActive}
                     onClick={() => {
                       rp.applyQueryParams({ tab: tabIdToApply });
@@ -146,7 +146,7 @@ export const ToolbarComp = React.memo<ToolData>(function ToolbarComp({
                 {tabs.map((tab, index) => {
                   return (
                     <TabButton
-                      disabled={tab.disabled}
+                      disabled={!!tab.disabled}
                       active={tab.id === tabId || (tab.id === 'canvas' && !tabId)}
                       onClick={() => {
                         api.applyQueryParams({ tab: tab.id === 'canvas' ? undefined : tab.id });