diff --git a/docs/_snippets/addon-a11y-parameter-example.md b/docs/_snippets/addon-a11y-parameter-example.md
index 7920d6d22e0a..f2823b4bd258 100644
--- a/docs/_snippets/addon-a11y-parameter-example.md
+++ b/docs/_snippets/addon-a11y-parameter-example.md
@@ -146,7 +146,7 @@ export const NoA11yFail = {
 // Replace your-framework with the framework you are using, e.g. sveltekit or svelte-vite
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
-import { Button } from './Button.svelte';
+import Button from './Button.svelte';
 
 const meta = {
   component: Button,
@@ -205,7 +205,7 @@ export const NoA11yFail: Story = {
 ```
 
 ```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
-import { Button } from './Button.svelte';
+import Button from './Button.svelte';
 
 export default {
   component: Button,
diff --git a/docs/_snippets/addon-a11y-parameter-remove.md b/docs/_snippets/addon-a11y-parameter-remove.md
index 078d2c1ccf8d..8071d7fd2209 100644
--- a/docs/_snippets/addon-a11y-parameter-remove.md
+++ b/docs/_snippets/addon-a11y-parameter-remove.md
@@ -75,7 +75,7 @@ export default meta;
 // Replace your-framework with the framework you are using, e.g. sveltekit or svelte-vite
 import type { Meta } from '@storybook/your-framework';
 
-import { Button } from './Button.svelte';
+import Button from './Button.svelte';
 
 const meta = {
   component: Button,
@@ -104,7 +104,7 @@ export default meta;
 ```
 
 ```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
-import { Button } from './Button.svelte';
+import Button from './Button.svelte';
 
 export default {
   component: Button,
diff --git a/docs/_snippets/addon-a11y-parameter-todo-in-meta.md b/docs/_snippets/addon-a11y-parameter-todo-in-meta.md
index 28e22c80c3c7..e6ca6f88cef7 100644
--- a/docs/_snippets/addon-a11y-parameter-todo-in-meta.md
+++ b/docs/_snippets/addon-a11y-parameter-todo-in-meta.md
@@ -59,14 +59,14 @@ export default {
 };
 ```
 
-```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+```svelte filename="DataTable.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
-  import Button from './Button.svelte';
+  import DataTable from './DataTable.svelte';
 
   const { Story } = defineMeta({
-    component: Button,
+    component: DataTable,
     parameters: {
       // 👇 This component's accessibility tests will not fail
       //    Instead, they display warnings in the Storybook UI
@@ -76,31 +76,31 @@ export default {
 </script>
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
+```ts filename="DataTable.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. sveltekit or svelte-vite
 import type { Meta } from '@storybook/your-framework';
 
-import { Button } from './Button.svelte';
+import DataTable from './DataTable.svelte';
 
 const meta = {
-  component: Button,
+  component: DataTable,
   parameters: {
     // 👇 This component's accessibility tests will not fail
     //    Instead, they display warnings in the Storybook UI
     a11y: { test: 'todo' },
   },
-} satisfies Meta<typeof Button>;
+} satisfies Meta<typeof DataTable>;
 export default meta;
 ```
 
-```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+```svelte filename="DataTable.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
-  import Button from './Button.svelte';
+  import DataTable from './DataTable.svelte';
 
   const { Story } = defineMeta({
-    component: Button,
+    component: DataTable,
     parameters: {
       // 👇 This component's accessibility tests will not fail
       //    Instead, they display warnings in the Storybook UI
@@ -110,11 +110,11 @@ export default meta;
 </script>
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
-import { Button } from './Button.svelte';
+```js filename="DataTable.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
+import DataTable from './DataTable.svelte';
 
 export default {
-  component: Button,
+  component: DataTable,
   parameters: {
     // 👇 This component's accessibility tests will not fail
     //    Instead, they display warnings in the Storybook UI
@@ -193,6 +193,7 @@ const meta = preview.meta({
 
 ```js filename="DataTable.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { DataTable } from './DataTable';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/addon-backgrounds-define-globals.md b/docs/_snippets/addon-backgrounds-define-globals.md
index 431f6c31257d..9435bcba7ab0 100644
--- a/docs/_snippets/addon-backgrounds-define-globals.md
+++ b/docs/_snippets/addon-backgrounds-define-globals.md
@@ -281,6 +281,7 @@ export const OnDark = meta.story({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/addon-backgrounds-disabled.md b/docs/_snippets/addon-backgrounds-disabled.md
index 0e9dc6d74e7c..268bcd0f15fa 100644
--- a/docs/_snippets/addon-backgrounds-disabled.md
+++ b/docs/_snippets/addon-backgrounds-disabled.md
@@ -140,6 +140,7 @@ export const Large = meta.story({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/addon-backgrounds-grid.md b/docs/_snippets/addon-backgrounds-grid.md
index 62cc81532675..8c2d90af17ae 100644
--- a/docs/_snippets/addon-backgrounds-grid.md
+++ b/docs/_snippets/addon-backgrounds-grid.md
@@ -288,6 +288,7 @@ const meta = preview.meta({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/addon-backgrounds-options-in-meta.md b/docs/_snippets/addon-backgrounds-options-in-meta.md
index e4dfa34a7660..266ec8eb12bb 100644
--- a/docs/_snippets/addon-backgrounds-options-in-meta.md
+++ b/docs/_snippets/addon-backgrounds-options-in-meta.md
@@ -344,6 +344,7 @@ const meta = preview.meta({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/addon-viewport-define-globals.md b/docs/_snippets/addon-viewport-define-globals.md
index 8e8846e5c5a4..dd2df1817cf9 100644
--- a/docs/_snippets/addon-viewport-define-globals.md
+++ b/docs/_snippets/addon-viewport-define-globals.md
@@ -112,7 +112,7 @@ export const OnPhone = {
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
-import { Button } from './Button';
+import Button from './Button.svelte';
 
 const meta = {
   component: Button,
@@ -279,6 +279,7 @@ export const OnPhone = meta.story({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/after-each-in-meta.md b/docs/_snippets/after-each-in-meta.md
index 727c37ccf0ce..488d3e24be35 100644
--- a/docs/_snippets/after-each-in-meta.md
+++ b/docs/_snippets/after-each-in-meta.md
@@ -47,7 +47,7 @@ export const Basic = meta.story({
 
   import Page from './Page.svelte';
 
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     component: Page,
     // 👇 Runs after each story in this file
     async afterEach(context) {
@@ -104,7 +104,7 @@ export const Basic = {
 
   import Page from './Page.svelte';
 
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     component: Page,
     // 👇 Runs after each story in this file
     async afterEach(context) {
@@ -264,6 +264,7 @@ export const Basic = meta.story({
 
 ```js filename="Page.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Page } from './Page';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/api-doc-block-argtypes-parameter.md b/docs/_snippets/api-doc-block-argtypes-parameter.md
index 35141c192b23..af8d83e2e958 100644
--- a/docs/_snippets/api-doc-block-argtypes-parameter.md
+++ b/docs/_snippets/api-doc-block-argtypes-parameter.md
@@ -36,7 +36,7 @@ const meta = preview.meta({
 
   import Button from './Button.svelte';
 
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     component: Button,
     parameters: {
       docs: {
@@ -79,7 +79,7 @@ export default {
 
   import Button from './Button.svelte';
 
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     component: Button,
     parameters: {
       docs: {
@@ -197,6 +197,7 @@ const meta = preview.meta({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/api-doc-block-canvas-parameter.md b/docs/_snippets/api-doc-block-canvas-parameter.md
index f885229e60ba..3e590a65ec7e 100644
--- a/docs/_snippets/api-doc-block-canvas-parameter.md
+++ b/docs/_snippets/api-doc-block-canvas-parameter.md
@@ -244,6 +244,7 @@ export const Basic = meta.story({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/api-doc-block-controls-parameter.md b/docs/_snippets/api-doc-block-controls-parameter.md
index f4dd7aa3fee2..9e3a9768ec82 100644
--- a/docs/_snippets/api-doc-block-controls-parameter.md
+++ b/docs/_snippets/api-doc-block-controls-parameter.md
@@ -36,7 +36,7 @@ const meta = preview.meta({
 
   import Button from './Button.svelte';
 
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     component: Button,
     parameters: {
       docs: {
@@ -79,7 +79,7 @@ export default {
 
   import Button from './Button.svelte';
 
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     component: Button,
     parameters: {
       docs: {
@@ -201,6 +201,7 @@ const meta = preview.meta({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/api-doc-block-description-example.md b/docs/_snippets/api-doc-block-description-example.md
index 2db5926f156f..9b03f07c67c7 100644
--- a/docs/_snippets/api-doc-block-description-example.md
+++ b/docs/_snippets/api-doc-block-description-example.md
@@ -81,7 +81,7 @@ export const Primary = meta.story({
    * Button stories
    * These stories showcase the button
    */
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     component: Button,
     parameters: {
       docs: {
@@ -185,7 +185,7 @@ export const Primary = {
    * Button stories
    * These stories showcase the button
    */
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     component: Button,
     parameters: {
       docs: {
@@ -467,6 +467,7 @@ export const Primary = meta.story({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/api-doc-block-source-parameter.md b/docs/_snippets/api-doc-block-source-parameter.md
index cfabd70472bc..3f3c35b6dfb8 100644
--- a/docs/_snippets/api-doc-block-source-parameter.md
+++ b/docs/_snippets/api-doc-block-source-parameter.md
@@ -43,7 +43,7 @@ export const Basic = meta.story({
 
   import Button from './Button.svelte';
 
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     component: Button,
   });
 </script>
@@ -95,7 +95,7 @@ export const Basic = {
 
   import Button from './Button.svelte';
 
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     component: Button,
   });
 </script>
@@ -240,6 +240,7 @@ export const Basic = meta.story({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/api-doc-block-story-parameter.md b/docs/_snippets/api-doc-block-story-parameter.md
index ae256429c282..c1688f92f3fc 100644
--- a/docs/_snippets/api-doc-block-story-parameter.md
+++ b/docs/_snippets/api-doc-block-story-parameter.md
@@ -43,7 +43,7 @@ export const Basic = meta.story({
 
   import Button from './Button.svelte';
 
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     component: Button,
   });
 </script>
@@ -95,7 +95,7 @@ export const Basic = {
 
   import Button from './Button.svelte';
 
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     component: Button,
   });
 </script>
@@ -240,6 +240,7 @@ export const Basic = meta.story({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/arg-types-default-value.md b/docs/_snippets/arg-types-default-value.md
index 5b42e7105dbb..926d7ba7ebf8 100644
--- a/docs/_snippets/arg-types-default-value.md
+++ b/docs/_snippets/arg-types-default-value.md
@@ -262,6 +262,7 @@ const meta = preview.meta({
 
 ```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Example } from './Example';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/arg-types-description.md b/docs/_snippets/arg-types-description.md
index 30d6ac827fb3..d60a86b28844 100644
--- a/docs/_snippets/arg-types-description.md
+++ b/docs/_snippets/arg-types-description.md
@@ -197,6 +197,7 @@ const meta = preview.meta({
 
 ```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Example } from './Example';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/arg-types-if.md b/docs/_snippets/arg-types-if.md
index daf6bb7b10b1..02210d722694 100644
--- a/docs/_snippets/arg-types-if.md
+++ b/docs/_snippets/arg-types-if.md
@@ -483,6 +483,7 @@ const meta = preview.meta({
 
 ```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Example } from './Example';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/arg-types-in-meta.md b/docs/_snippets/arg-types-in-meta.md
index 4bb13a963866..d532b7a09b07 100644
--- a/docs/_snippets/arg-types-in-meta.md
+++ b/docs/_snippets/arg-types-in-meta.md
@@ -223,6 +223,7 @@ const meta = preview.meta({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/arg-types-in-story.md b/docs/_snippets/arg-types-in-story.md
index bb9c7d7b5295..45a0d9bbee15 100644
--- a/docs/_snippets/arg-types-in-story.md
+++ b/docs/_snippets/arg-types-in-story.md
@@ -261,6 +261,7 @@ export const Basic = meta.story({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/arg-types-mapping.md b/docs/_snippets/arg-types-mapping.md
index ca7291582e87..750f3dc91b47 100644
--- a/docs/_snippets/arg-types-mapping.md
+++ b/docs/_snippets/arg-types-mapping.md
@@ -211,6 +211,7 @@ const meta = preview.meta({
 
 ```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Example } from './Example';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/arg-types-name.md b/docs/_snippets/arg-types-name.md
index 9db1f728ff21..4dd2c741349b 100644
--- a/docs/_snippets/arg-types-name.md
+++ b/docs/_snippets/arg-types-name.md
@@ -197,6 +197,7 @@ const meta = preview.meta({
 
 ```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Example } from './Example';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/arg-types-options.md b/docs/_snippets/arg-types-options.md
index 6b6078c7bed2..6c477521d666 100644
--- a/docs/_snippets/arg-types-options.md
+++ b/docs/_snippets/arg-types-options.md
@@ -197,6 +197,7 @@ const meta = preview.meta({
 
 ```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Example } from './Example';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/arg-types-table.md b/docs/_snippets/arg-types-table.md
index 1a15adbf0ba9..a8b6b23318ac 100644
--- a/docs/_snippets/arg-types-table.md
+++ b/docs/_snippets/arg-types-table.md
@@ -112,7 +112,7 @@ export default {
 // Replace your-framework with svelte-vite or sveltekit
 import type { Meta } from '@storybook/your-framework';
 
-import { Example } from './Example';
+import Example from './Example.svelte';
 
 const meta = {
   component: Example,
@@ -236,6 +236,7 @@ const meta = preview.meta({
 
 ```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Example } from './Example';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/arg-types-type.md b/docs/_snippets/arg-types-type.md
index a4fd1823cfd3..28a96463fb15 100644
--- a/docs/_snippets/arg-types-type.md
+++ b/docs/_snippets/arg-types-type.md
@@ -171,6 +171,7 @@ const meta = preview.meta({
 
 ```js filename="Example.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Example } from './Example';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/automocked-modules-in-story.md b/docs/_snippets/automocked-modules-in-story.md
index a8ede4299fe2..b4a0d5088cd1 100644
--- a/docs/_snippets/automocked-modules-in-story.md
+++ b/docs/_snippets/automocked-modules-in-story.md
@@ -130,7 +130,7 @@ export const LogIn = {
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import { expect, mocked } from 'storybook/test';
 
-  import { AuthButton } from './AuthButton.svelte';
+  import AuthButton from './AuthButton.svelte';
 
   import { v4 as uuidv4 } from 'uuid';
   import { getUserFromSession } from '../lib/session';
@@ -163,7 +163,7 @@ export const LogIn = {
 import type { Meta, StoryObj } from '@storybook/your-framework';
 import { expect, mocked } from 'storybook/test';
 
-import { AuthButton } from './AuthButton.svelte';
+import AuthButton from './AuthButton.svelte';
 
 import { v4 as uuidv4 } from 'uuid';
 import { getUserFromSession } from '../lib/session';
@@ -228,7 +228,7 @@ export const LogIn: Story = {
 ```js filename="AuthButton.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import { expect } from 'storybook/test';
 
-import { AuthButton } from './AuthButton.svelte';
+import AuthButton from './AuthButton.svelte';
 
 import { v4 as uuidv4 } from 'uuid';
 import { getUserFromSession } from '../lib/session';
diff --git a/docs/_snippets/before-each-in-meta-mock-date.md b/docs/_snippets/before-each-in-meta-mock-date.md
index 100e8a979435..fa57c8291ad9 100644
--- a/docs/_snippets/before-each-in-meta-mock-date.md
+++ b/docs/_snippets/before-each-in-meta-mock-date.md
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/angular';
 
 import MockDate from 'mockdate';
 
-import { Page } from './Page';
+import { Page } from './Page.component';
 
 const meta: Meta<Page> = {
   component: Page,
@@ -33,7 +33,7 @@ import MockDate from 'mockdate';
 
 import preview from '../.storybook/preview';
 
-import { Page } from './Page';
+import { Page } from './Page.component';
 
 const meta = preview.meta({
   component: Page,
@@ -63,7 +63,7 @@ export const Basic = meta.story({
 
   import Page from './Page.svelte';
 
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     component: Page,
     // 👇 Set the value of Date for every story in the file
     async beforeEach() {
@@ -141,7 +141,7 @@ export const Basic = {
 
   import Page from './Page.svelte';
 
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     component: Page,
     // 👇 Set the value of Date for every story in the file
     async beforeEach() {
diff --git a/docs/_snippets/button-group-story.md b/docs/_snippets/button-group-story.md
index 049d81fb2fc2..d3aef1a7ca93 100644
--- a/docs/_snippets/button-group-story.md
+++ b/docs/_snippets/button-group-story.md
@@ -445,6 +445,7 @@ export const Pair = meta.story({
 
 ```js filename="ButtonGroup.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { ButtonGroup } from '../ButtonGroup';
 
 //👇 Imports the Button stories
diff --git a/docs/_snippets/button-story-argtypes-with-categories.md b/docs/_snippets/button-story-argtypes-with-categories.md
index 6637773506e4..dec9a6aeae8c 100644
--- a/docs/_snippets/button-story-argtypes-with-categories.md
+++ b/docs/_snippets/button-story-argtypes-with-categories.md
@@ -375,6 +375,7 @@ const meta = preview.meta({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/button-story-argtypes-with-subcategories.md b/docs/_snippets/button-story-argtypes-with-subcategories.md
index 10140c72ace3..2ad9013d11d1 100644
--- a/docs/_snippets/button-story-argtypes-with-subcategories.md
+++ b/docs/_snippets/button-story-argtypes-with-subcategories.md
@@ -411,6 +411,7 @@ const meta = preview.meta({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/button-story-component-args-primary.md b/docs/_snippets/button-story-component-args-primary.md
index 9dd8ff2498c7..370259da2a35 100644
--- a/docs/_snippets/button-story-component-args-primary.md
+++ b/docs/_snippets/button-story-component-args-primary.md
@@ -346,6 +346,7 @@ const meta = preview.meta({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/button-story-component-decorator.md b/docs/_snippets/button-story-component-decorator.md
index 7240f4b8df51..210a60b92f02 100644
--- a/docs/_snippets/button-story-component-decorator.md
+++ b/docs/_snippets/button-story-component-decorator.md
@@ -320,6 +320,7 @@ const meta = preview.meta({
 
 ```jsx filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/button-story-decorator.md b/docs/_snippets/button-story-decorator.md
index 5af4660489e8..0a9293745073 100644
--- a/docs/_snippets/button-story-decorator.md
+++ b/docs/_snippets/button-story-decorator.md
@@ -388,6 +388,7 @@ export const Primary = meta.story({
 
 ```jsx filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/button-story-default-export-with-component.md b/docs/_snippets/button-story-default-export-with-component.md
index 2841563f9a0a..713f03647c73 100644
--- a/docs/_snippets/button-story-default-export-with-component.md
+++ b/docs/_snippets/button-story-default-export-with-component.md
@@ -210,6 +210,7 @@ const meta = preview.meta({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/button-story-rename-story.md b/docs/_snippets/button-story-rename-story.md
index fd8fa6ffc1d3..937e3f0b3824 100644
--- a/docs/_snippets/button-story-rename-story.md
+++ b/docs/_snippets/button-story-rename-story.md
@@ -406,6 +406,7 @@ export const Primary = meta.story({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/button-story-using-args.md b/docs/_snippets/button-story-using-args.md
index ec16735ba7b6..a3e2ff6726a2 100644
--- a/docs/_snippets/button-story-using-args.md
+++ b/docs/_snippets/button-story-using-args.md
@@ -795,6 +795,7 @@ export const Tertiary = meta.story({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/button-story-with-args.md b/docs/_snippets/button-story-with-args.md
index 7db3f5e89117..07283ba493db 100644
--- a/docs/_snippets/button-story-with-args.md
+++ b/docs/_snippets/button-story-with-args.md
@@ -479,6 +479,7 @@ export const Primary = meta.story({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/button-story-with-emojis.md b/docs/_snippets/button-story-with-emojis.md
index 8f3731ddc5cf..56ffb7c3ca81 100644
--- a/docs/_snippets/button-story-with-emojis.md
+++ b/docs/_snippets/button-story-with-emojis.md
@@ -660,6 +660,7 @@ export const Tertiary = meta.story({
 
 ```jsx filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/code-panel-in-meta-and-story.md b/docs/_snippets/code-panel-in-meta-and-story.md
index bb0b7c8fef41..9adc9fdfcb33 100644
--- a/docs/_snippets/code-panel-in-meta-and-story.md
+++ b/docs/_snippets/code-panel-in-meta-and-story.md
@@ -622,6 +622,7 @@ export const Secondary = meta.story({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/component-story-custom-args-complex.md b/docs/_snippets/component-story-custom-args-complex.md
index 4d8e7e791fb0..96f181e8a585 100644
--- a/docs/_snippets/component-story-custom-args-complex.md
+++ b/docs/_snippets/component-story-custom-args-complex.md
@@ -248,6 +248,8 @@ export const ExampleStory: Story = {
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
+  import YourComponent from './YourComponent.svelte';
+
   const { Story } = defineMeta({
       component: YourComponent,
       //👇 Creates specific argTypes
@@ -327,6 +329,8 @@ export const ExampleStory = {
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
+  import YourComponent from './YourComponent.svelte';
+
   const { Story } = defineMeta({
       component: YourComponent,
       //👇 Creates specific argTypes
@@ -818,6 +822,7 @@ export const ExampleStory = meta.story({
 
 ```jsx filename="YourComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { YourComponent } from './your-component';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/component-story-figma-integration.md b/docs/_snippets/component-story-figma-integration.md
index fa1ebf3a3de8..44e06d3c9305 100644
--- a/docs/_snippets/component-story-figma-integration.md
+++ b/docs/_snippets/component-story-figma-integration.md
@@ -384,6 +384,7 @@ export const Example = meta.story({
 
 ```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { MyComponent } from './MyComponent';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/component-story-static-asset-cdn.md b/docs/_snippets/component-story-static-asset-cdn.md
index c287b1197268..6b753c1d8b9c 100644
--- a/docs/_snippets/component-story-static-asset-cdn.md
+++ b/docs/_snippets/component-story-static-asset-cdn.md
@@ -350,6 +350,7 @@ export const WithAnImage = meta.story({
 
 ```jsx filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { MyComponent } from './MyComponent';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/component-story-static-asset-with-import.md b/docs/_snippets/component-story-static-asset-with-import.md
index 340bb95105b6..7db4cf01e027 100644
--- a/docs/_snippets/component-story-static-asset-with-import.md
+++ b/docs/_snippets/component-story-static-asset-with-import.md
@@ -459,6 +459,7 @@ export const WithAnImage = meta.story({
 
 ```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { MyComponent } from './MyComponent';
 
 import imageFile from './static/image.png';
diff --git a/docs/_snippets/component-story-static-asset-without-import.md b/docs/_snippets/component-story-static-asset-without-import.md
index eb5cbda6e5b6..ef65f770238d 100644
--- a/docs/_snippets/component-story-static-asset-without-import.md
+++ b/docs/_snippets/component-story-static-asset-without-import.md
@@ -330,6 +330,7 @@ export const WithAnImage = meta.story({
 
 ```jsx filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { MyComponent } from './MyComponent';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/component-story-with-custom-render-function.md b/docs/_snippets/component-story-with-custom-render-function.md
index c5bce4b0fb1c..d3ff3bc5681b 100644
--- a/docs/_snippets/component-story-with-custom-render-function.md
+++ b/docs/_snippets/component-story-with-custom-render-function.md
@@ -492,3 +492,31 @@ export const Example = meta.story({
   {/snippet}
 </Story>
 ```
+
+```svelte filename="MyComponent.stories.svelte" renderer="svelte" language="ts"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Layout from './Layout.svelte';
+  import MyComponent from './MyComponent.svelte';
+
+  const { Story } = defineMeta({
+    component: MyComponent,
+  });
+</script>
+
+<Story
+  name="Example"
+>
+  {#snippet template(args)}
+   <Layout>
+      <header>
+        <h1>Example</h1>
+      </header>
+      <article>
+        <MyComponent />
+      </article>
+    </Layout>
+  {/snippet}
+</Story>
+```
diff --git a/docs/_snippets/foo-bar-baz-story.md b/docs/_snippets/foo-bar-baz-story.md
index 1403194e2c69..b2b1cc5aee6b 100644
--- a/docs/_snippets/foo-bar-baz-story.md
+++ b/docs/_snippets/foo-bar-baz-story.md
@@ -166,6 +166,7 @@ export const Baz = meta.story();
 
 ```js filename="FooBar.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Foo } from './Foo';
 
 const meta = preview.meta({
@@ -201,6 +202,7 @@ export const Baz = meta.story();
 
 ```js filename="FooBar.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import Foo from './Foo.vue';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/highlight-remove.md b/docs/_snippets/highlight-remove.md
index 080e2d73b630..49d4560eba66 100644
--- a/docs/_snippets/highlight-remove.md
+++ b/docs/_snippets/highlight-remove.md
@@ -120,7 +120,6 @@ export const RemoveHighlight: Story = {
   import { useChannel } from 'storybook/preview-api';
   import { HIGHLIGHT, REMOVE_HIGHLIGHT } from 'storybook/highlight';
 
-
   import MyComponent from './MyComponent.svelte';
 
   const { Story } = defineMeta({
@@ -176,7 +175,6 @@ export const RemoveHighlight = {
   import { useChannel } from 'storybook/preview-api';
   import { HIGHLIGHT, REMOVE_HIGHLIGHT } from 'storybook/highlight';
 
-
   import MyComponent from './MyComponent.svelte';
 
   const { Story } = defineMeta({
diff --git a/docs/_snippets/histogram-story.md b/docs/_snippets/histogram-story.md
index 2ff15e04232a..540afca2f097 100644
--- a/docs/_snippets/histogram-story.md
+++ b/docs/_snippets/histogram-story.md
@@ -506,6 +506,7 @@ export const Basic = meta.story({
 
 ```js filename="Histogram.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Histogram } from './Histogram';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/interaction-test-complex.md b/docs/_snippets/interaction-test-complex.md
index 99747aeaa769..1d8756c9aab8 100644
--- a/docs/_snippets/interaction-test-complex.md
+++ b/docs/_snippets/interaction-test-complex.md
@@ -179,7 +179,7 @@ export const Submits = {
   import { fn, expect } from 'storybook/test';
 
   import { users } from '../mocks/users';
-  import { EventForm } from './EventForm.svelte';
+  import EventForm from './EventForm.svelte';
 
   const { Story } = defineMeta({
     component: EventForm,
@@ -224,7 +224,7 @@ import type { Meta, StoryObj } from '@storybook/your-framework';
 import { fn, expect } from 'storybook/test';
 
 import { users } from '../mocks/users';
-import { EventForm } from './EventForm.svelte';
+import EventForm from './EventForm.svelte';
 
 const meta = {
   component: EventForm,
@@ -270,7 +270,7 @@ export const Submits: Story = {
   import { fn, expect } from 'storybook/test';
 
   import { users } from '../mocks/users';
-  import { EventForm } from './EventForm.svelte';
+  import EventForm from './EventForm.svelte';
 
   const { Story } = defineMeta({
     component: EventForm,
@@ -313,7 +313,7 @@ export const Submits: Story = {
 import { fn, expect } from 'storybook/test';
 
 import { users } from '../mocks/users';
-import { EventForm } from './EventForm.svelte';
+import EventForm from './EventForm.svelte';
 
 export default {
   component: EventForm,
diff --git a/docs/_snippets/interaction-test-fn-mock-spy.md b/docs/_snippets/interaction-test-fn-mock-spy.md
index 948fdaf9951d..1d62bf1f0bdf 100644
--- a/docs/_snippets/interaction-test-fn-mock-spy.md
+++ b/docs/_snippets/interaction-test-fn-mock-spy.md
@@ -142,7 +142,7 @@ export const FilledForm = {
 import type { Meta, StoryObj } from '@storybook/your-framework';
 import { fn, expect } from 'storybook/test';
 
-import { LoginForm } from './LoginForm.svelte';
+import LoginForm from './LoginForm.svelte';
 
 const meta = {
   component: LoginForm,
@@ -198,7 +198,7 @@ export const FilledForm: Story = {
 ```js filename="LoginForm.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import { fn, expect } from 'storybook/test';
 
-import { LoginForm } from './LoginForm.svelte';
+import LoginForm from './LoginForm.svelte';
 
 export default {
   component: LoginForm,
diff --git a/docs/_snippets/interaction-test-simple.md b/docs/_snippets/interaction-test-simple.md
index 2da522e555e1..8756cdad4aab 100644
--- a/docs/_snippets/interaction-test-simple.md
+++ b/docs/_snippets/interaction-test-simple.md
@@ -112,7 +112,7 @@ export const Opens = {
 import type { Meta, StoryObj } from '@storybook/your-framework';
 import { expect } from 'storybook/test';
 
-import { Dialog } from './Dialog.svelte';
+import Dialog from './Dialog.svelte';
 
 const meta = {
   component: Dialog,
@@ -156,7 +156,7 @@ export const Opens: Story = {
 ```js filename="Dialog.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import { expect } from 'storybook/test';
 
-import { Dialog } from './Dialog.svelte';
+import Dialog from './Dialog.svelte';
 
 export default {
   component: Dialog,
diff --git a/docs/_snippets/list-story-expanded.md b/docs/_snippets/list-story-expanded.md
index e5dd849f4ccc..367ba32d5b66 100644
--- a/docs/_snippets/list-story-expanded.md
+++ b/docs/_snippets/list-story-expanded.md
@@ -331,7 +331,7 @@ export const ManyItems: Story = {
 };
 ```
 
-```svelte filename="List.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+```svelte filename="List.stories.svelte" renderer="svelte" language="js"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -364,7 +364,7 @@ export const ManyItems: Story = {
 </Story>
 ```
 
-```svelte filename="List.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+```svelte filename="List.stories.svelte" renderer="svelte" language="ts"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -749,6 +749,7 @@ export const ManyItems = meta.story({
 
 ```jsx filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { List } from './List';
 import { ListItem } from './ListItem';
 
diff --git a/docs/_snippets/list-story-starter.md b/docs/_snippets/list-story-starter.md
index 6fdad08e400f..52cc7a852c53 100644
--- a/docs/_snippets/list-story-starter.md
+++ b/docs/_snippets/list-story-starter.md
@@ -358,6 +358,7 @@ export const Empty = meta.story();
 
 ```js filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { List } from './List';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/list-story-template.md b/docs/_snippets/list-story-template.md
index faa702475ea5..503fac6fd92b 100644
--- a/docs/_snippets/list-story-template.md
+++ b/docs/_snippets/list-story-template.md
@@ -695,6 +695,7 @@ export const OneItem = Empty.extend({
 
 ```jsx filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { List } from './List';
 import { ListItem } from './ListItem';
 
diff --git a/docs/_snippets/list-story-with-unchecked-children.md b/docs/_snippets/list-story-with-unchecked-children.md
index c74d64ba40f7..0a7696a8e670 100644
--- a/docs/_snippets/list-story-with-unchecked-children.md
+++ b/docs/_snippets/list-story-with-unchecked-children.md
@@ -100,6 +100,7 @@ export const OneItem = meta.story({
 
 ```jsx filename="List.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { List } from './List';
 
 //👇 Instead of importing ListItem, we import the stories
diff --git a/docs/_snippets/loader-story.md b/docs/_snippets/loader-story.md
index ce393e1a3ca2..a2d39d527365 100644
--- a/docs/_snippets/loader-story.md
+++ b/docs/_snippets/loader-story.md
@@ -3,7 +3,7 @@ import { type Meta, type StoryObj, moduleMetadata } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
-import { TodoItem } from './TodoItem';
+import { TodoItem } from './TodoItem.component';
 
 const meta: Meta<TodoItem> = {
   component: TodoItem,
@@ -45,7 +45,7 @@ import { moduleMetadata } from '@storybook/angular';
 
 import preview from '../.storybook/preview';
 
-import { TodoItem } from './TodoItem';
+import { TodoItem } from './TodoItem.component';
 
 const meta = preview.meta({
   component: TodoItem,
@@ -534,6 +534,7 @@ export const Primary = meta.story({
 
 ```jsx filename="TodoItem.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { TodoItem } from './TodoItem';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/mount-advanced.md b/docs/_snippets/mount-advanced.md
index 15e6ed42629e..d35585e764b4 100644
--- a/docs/_snippets/mount-advanced.md
+++ b/docs/_snippets/mount-advanced.md
@@ -131,7 +131,7 @@ import type { Meta, StoryObj } from '@storybook/your-framework';
 
 // 👇 Automocked module resolves to '../lib/__mocks__/db'
 import db from '../lib/db';
-import { Page } from './Page';
+import Page from './Page.svelte';
 
 const meta = { component: Page } satisfies Meta<typeof Page>;
 export default meta;
@@ -163,7 +163,7 @@ export const Basic: Story = {
 ```js filename="Page.stories.js" renderer="svelte" language="js"
 // 👇 Automocked module resolves to '../lib/__mocks__/db'
 import db from '../lib/db';
-import { Page } from './Page';
+import Page from './Page.svelte';
 
 export default { component: Page };
 
@@ -189,12 +189,12 @@ export const Basic = {
 };
 ```
 
-```ts filename="Page.stories.ts" renderer="vue3" language="ts"
+```ts filename="Page.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
 // 👇 Automocked module resolves to '../lib/__mocks__/db'
 import db from '../lib/db';
-import { Page } from './Page';
+import Page from './Page.vue';
 
 const meta = { component: Page } satisfies Meta<typeof Page>;
 export default meta;
@@ -223,10 +223,10 @@ export const Basic: Story = {
 };
 ```
 
-```js filename="Page.stories.js" renderer="vue3" language="js"
+```js filename="Page.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
 // 👇 Automocked module resolves to '../lib/__mocks__/db'
 import db from '../lib/db';
-import { Page } from './Page';
+import Page from './Page.vue';
 
 export default { component: Page };
 
diff --git a/docs/_snippets/mount-basic.md b/docs/_snippets/mount-basic.md
index 8fbcddec7e15..7fe18ef7b345 100644
--- a/docs/_snippets/mount-basic.md
+++ b/docs/_snippets/mount-basic.md
@@ -49,14 +49,14 @@ export const ChristmasUI = meta.story({
 });
 ```
 
-```svelte filename="LoginForm.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+```svelte filename="Page.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
-  import Calendar from './Calendar.svelte';
+  import Page from './Page.svelte';
 
   const { Story } = defineMeta({
-    component: Calendar,
+    component: Page,
   });
 </script>
 
@@ -71,7 +71,7 @@ export const ChristmasUI = meta.story({
 />
 ```
 
-```ts filename="LoginForm.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
+```ts filename="Page.stories.ts" renderer="svelte" language="ts" tabTitle="CSF 3"
 import MockDate from 'mockdate';
 
 // ...rest of story file
@@ -86,14 +86,14 @@ export const ChristmasUI: Story = {
 };
 ```
 
-```svelte filename="LoginForm.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+```svelte filename="Page.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
-  import Calendar from './Calendar.svelte';
+  import Page from './Page.svelte';
 
   const { Story } = defineMeta({
-    component: Calendar,
+    component: Page,
   });
 </script>
 
@@ -108,7 +108,7 @@ export const ChristmasUI: Story = {
 />
 ```
 
-```js filename="LoginForm.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
+```js filename="Page.stories.js" renderer="svelte" language="js" tabTitle="CSF 3"
 import MockDate from 'mockdate';
 
 // ...rest of story file
diff --git a/docs/_snippets/my-component-story-mandatory-export.md b/docs/_snippets/my-component-story-mandatory-export.md
index 91cf467e9d4d..7f85bea00ddd 100644
--- a/docs/_snippets/my-component-story-mandatory-export.md
+++ b/docs/_snippets/my-component-story-mandatory-export.md
@@ -27,7 +27,7 @@ export default meta;
 
   import MyComponent from './MyComponent.svelte';
 
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     /* 👇 The title prop is optional.
      * See https://storybook.js.org/docs/configure/#configure-story-loading
      * to learn how to generate automatic titles
@@ -45,7 +45,7 @@ export default meta;
 ```
 
 ```js filename="MyComponent.story.js" renderer="svelte" language="js" tabTitle="CSF 3"
-import { MyComponent } from './MyComponent';
+import MyComponent from './MyComponent.svelte';
 
 export default {
   /* 👇 The title prop is optional.
@@ -88,7 +88,7 @@ export default {
 
   import MyComponent from './MyComponent.svelte';
 
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     /* 👇 The title prop is optional.
      * See https://storybook.js.org/docs/configure/#configure-story-loading
      * to learn how to generate automatic titles
diff --git a/docs/_snippets/my-component-story-use-globaltype.md b/docs/_snippets/my-component-story-use-globaltype.md
index a4e3b74bdbdf..caff0c961c77 100644
--- a/docs/_snippets/my-component-story-use-globaltype.md
+++ b/docs/_snippets/my-component-story-use-globaltype.md
@@ -659,6 +659,7 @@ export const StoryWithLocale = meta.story({
 
 ```js filename="MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { MyComponent } from './MyComponent';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/nextjs-app-directory-in-meta.md b/docs/_snippets/nextjs-app-directory-in-meta.md
index 565b999547b5..ce5fe7a95544 100644
--- a/docs/_snippets/nextjs-app-directory-in-meta.md
+++ b/docs/_snippets/nextjs-app-directory-in-meta.md
@@ -47,6 +47,7 @@ const meta = preview.meta({
 
 ```js filename="NavigationBasedComponent.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import NavigationBasedComponent from './NavigationBasedComponent';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/nextjs-navigation-override-in-story.md b/docs/_snippets/nextjs-navigation-override-in-story.md
index 11f142fc99a2..68f85db8051f 100644
--- a/docs/_snippets/nextjs-navigation-override-in-story.md
+++ b/docs/_snippets/nextjs-navigation-override-in-story.md
@@ -91,6 +91,7 @@ export const Example = meta.story({
 
 ```js filename="NavigationBasedComponent.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import NavigationBasedComponent from './NavigationBasedComponent';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/nextjs-navigation-segments-for-use-params-override-in-meta.md b/docs/_snippets/nextjs-navigation-segments-for-use-params-override-in-meta.md
index a2324e16771b..3bb2965c4300 100644
--- a/docs/_snippets/nextjs-navigation-segments-for-use-params-override-in-meta.md
+++ b/docs/_snippets/nextjs-navigation-segments-for-use-params-override-in-meta.md
@@ -65,6 +65,7 @@ const meta = preview.meta({
 
 ```js filename="NavigationBasedComponent.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import NavigationBasedComponent from './NavigationBasedComponent';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/nextjs-navigation-segments-override-in-meta.md b/docs/_snippets/nextjs-navigation-segments-override-in-meta.md
index b44e0602dbe0..60cea70f337e 100644
--- a/docs/_snippets/nextjs-navigation-segments-override-in-meta.md
+++ b/docs/_snippets/nextjs-navigation-segments-override-in-meta.md
@@ -56,6 +56,7 @@ const meta = preview.meta({
 
 ```js filename="NavigationBasedComponent.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import NavigationBasedComponent from './NavigationBasedComponent';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/nextjs-router-override-in-story.md b/docs/_snippets/nextjs-router-override-in-story.md
index 4c452ae68b5e..96bec3c73afd 100644
--- a/docs/_snippets/nextjs-router-override-in-story.md
+++ b/docs/_snippets/nextjs-router-override-in-story.md
@@ -79,6 +79,7 @@ export const Example = meta.story({
 
 ```js filename="RouterBasedComponent.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import RouterBasedComponent from './RouterBasedComponent';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/page-story-slots.md b/docs/_snippets/page-story-slots.md
index cf59752e0957..51a005727866 100644
--- a/docs/_snippets/page-story-slots.md
+++ b/docs/_snippets/page-story-slots.md
@@ -166,7 +166,7 @@ export const CustomFooter = {
 </Story>
 ```
 
-```svelte filename="Page.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+```svelte filename="Page.stories.svelte" renderer="svelte" language="ts"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -427,6 +427,7 @@ export const CustomFooter = meta.story({
 
 ```jsx filename="Page.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Page } from './Page';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/page-story.md b/docs/_snippets/page-story.md
index 7f4e8ce35d83..6885bd1db9b1 100644
--- a/docs/_snippets/page-story.md
+++ b/docs/_snippets/page-story.md
@@ -431,6 +431,7 @@ export const LoggedIn = meta.story({
 
 ```js filename="Page.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Page } from './Page';
 
 //👇 Imports all Header stories
diff --git a/docs/_snippets/render-custom-in-meta.md b/docs/_snippets/render-custom-in-meta.md
index 26e265f8446e..5f95212e39ba 100644
--- a/docs/_snippets/render-custom-in-meta.md
+++ b/docs/_snippets/render-custom-in-meta.md
@@ -406,6 +406,7 @@ export const PrimaryInAlert = meta.story({
 
 ```jsx filename="Button.stories.jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Alert } from './Alert';
 import { Button } from './Button';
 
diff --git a/docs/_snippets/render-custom-in-story.md b/docs/_snippets/render-custom-in-story.md
index 4ab501c34737..d101bf777f54 100644
--- a/docs/_snippets/render-custom-in-story.md
+++ b/docs/_snippets/render-custom-in-story.md
@@ -328,6 +328,7 @@ export const PrimaryInAlert = meta.story({
 
 ```jsx filename="Button.stories.jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Alert } from './Alert';
 import { Button } from './Button';
 
diff --git a/docs/_snippets/rsc-parameter-in-meta.md b/docs/_snippets/rsc-parameter-in-meta.md
index ef080039a129..c32a52632356 100644
--- a/docs/_snippets/rsc-parameter-in-meta.md
+++ b/docs/_snippets/rsc-parameter-in-meta.md
@@ -41,6 +41,7 @@ const meta = preview.meta({
 
 ```js filename="MyServerComponent.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import MyServerComponent from './MyServerComponent';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/storybook-component-layout-param.md b/docs/_snippets/storybook-component-layout-param.md
index de99c792412f..f7eb761e1b3e 100644
--- a/docs/_snippets/storybook-component-layout-param.md
+++ b/docs/_snippets/storybook-component-layout-param.md
@@ -182,6 +182,7 @@ const meta = preview.meta({
 
 ```js filename="Button.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/storybook-csf-3-auto-title-redundant.md b/docs/_snippets/storybook-csf-3-auto-title-redundant.md
index bf7eb2227da9..c148483bc378 100644
--- a/docs/_snippets/storybook-csf-3-auto-title-redundant.md
+++ b/docs/_snippets/storybook-csf-3-auto-title-redundant.md
@@ -239,6 +239,7 @@ export const Basic = meta.story({
 
 ```js filename="components/MyComponent/MyComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { MyComponent } from './MyComponent';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/storybook-preview-auto-docs-custom-docs-container.md b/docs/_snippets/storybook-preview-auto-docs-custom-docs-container.md
index 0d2e850b054c..a6f3b6634196 100644
--- a/docs/_snippets/storybook-preview-auto-docs-custom-docs-container.md
+++ b/docs/_snippets/storybook-preview-auto-docs-custom-docs-container.md
@@ -55,6 +55,7 @@ import * as React from 'react';
 
 // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
 import { definePreview } from '@storybook/your-framework';
+
 import addonDocs from '@storybook/addon-docs';
 import { DocsContainer } from '@storybook/addon-docs/blocks';
 
@@ -85,6 +86,7 @@ import * as React from 'react';
 
 // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
 import { definePreview } from '@storybook/your-framework';
+
 import addonDocs from '@storybook/addon-docs';
 import { DocsContainer } from '@storybook/addon-docs/blocks';
 
diff --git a/docs/_snippets/storybook-test-fn-mock-spy.md b/docs/_snippets/storybook-test-fn-mock-spy.md
index 40639d75bd1d..9bfd85ebcd6a 100644
--- a/docs/_snippets/storybook-test-fn-mock-spy.md
+++ b/docs/_snippets/storybook-test-fn-mock-spy.md
@@ -6,7 +6,7 @@ import { expect } from 'storybook/test';
 import { saveNote } from '../app/actions';
 import { createNotes } from '../app/mocks/notes';
 
-import NoteUI from './note-ui';
+import NoteUI from './note-ui.component';
 
 const meta: Meta<NoteUI> = { component: NoteUI };
 export default meta;
@@ -39,7 +39,7 @@ import preview from '../.storybook/preview';
 import { saveNote } from '../app/actions';
 import { createNotes } from '../app/mocks/notes';
 
-import NoteUI from './note-ui';
+import NoteUI from './note-ui.component';
 
 const meta = preview.meta({ component: NoteUI });
 
@@ -71,7 +71,7 @@ export const SaveFlow = meta.story({
 
   import NoteUI from './note-ui.svelte';
 
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     title: 'Mocked/NoteUI',
     component: NoteUI,
   });
@@ -133,7 +133,7 @@ export const SaveFlow = {
 
   import NoteUI from './note-ui.svelte';
 
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     title: 'Mocked/NoteUI',
     component: NoteUI,
   });
diff --git a/docs/_snippets/storybook-test-mock-return-value.md b/docs/_snippets/storybook-test-mock-return-value.md
index b5518dffcdf8..a342c031d078 100644
--- a/docs/_snippets/storybook-test-mock-return-value.md
+++ b/docs/_snippets/storybook-test-mock-return-value.md
@@ -5,7 +5,7 @@ import { mocked } from 'storybook/test';
 // 👇 Automocked module resolves to '../lib/__mocks__/session'
 import { getUserFromSession } from '../lib/session';
 
-import { Page } from './Page';
+import { Page } from './Page.component';
 
 const meta: Meta<Page> = {
   component: Page,
@@ -30,7 +30,7 @@ import preview from '../.storybook/preview';
 // 👇 Automocked module resolves to '../lib/__mocks__/session'
 import { getUserFromSession } from '../lib/session';
 
-import { Page } from './Page';
+import { Page } from './Page.component';
 
 const meta = preview.meta({
   component: Page,
@@ -53,7 +53,7 @@ export const Basic = meta.story({
 
   import Page from './Page.svelte';
 
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     component: Page,
   });
 </script>
@@ -110,7 +110,7 @@ export const Basic = {
 
   import Page from './Page.svelte';
 
-  const meta = defineMeta({
+  const { Story } = defineMeta({
     component: Page,
   });
 </script>
diff --git a/docs/_snippets/tags-autodocs-in-meta.md b/docs/_snippets/tags-autodocs-in-meta.md
index 139dd092fcaa..03c278302542 100644
--- a/docs/_snippets/tags-autodocs-in-meta.md
+++ b/docs/_snippets/tags-autodocs-in-meta.md
@@ -1,7 +1,7 @@
 ```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
-import { Button } from './Button';
+import { Button } from './Button.component';
 
 const meta: Meta<Button> = {
   component: Button,
@@ -14,7 +14,7 @@ export default meta;
 ```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
-import { Button } from './Button';
+import { Button } from './Button.component';
 
 const meta = preview.meta({
   component: Button,
diff --git a/docs/_snippets/tags-autodocs-remove-component.md b/docs/_snippets/tags-autodocs-remove-component.md
index 1b844b174137..416d29ebf60c 100644
--- a/docs/_snippets/tags-autodocs-remove-component.md
+++ b/docs/_snippets/tags-autodocs-remove-component.md
@@ -1,7 +1,7 @@
 ```ts filename="Page.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta } from '@storybook/angular';
 
-import { Page } from './Page';
+import { Page } from './Page.component';
 
 const meta: Meta<Page> = {
   component: Page,
@@ -14,7 +14,7 @@ export default meta;
 ```ts filename="Page.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
-import { Page } from './Page';
+import { Page } from './Page.component';
 
 const meta = preview.meta({
   component: Page,
diff --git a/docs/_snippets/tags-autodocs-remove-story.md b/docs/_snippets/tags-autodocs-remove-story.md
index 121a70906824..c7c37b5bdf6b 100644
--- a/docs/_snippets/tags-autodocs-remove-story.md
+++ b/docs/_snippets/tags-autodocs-remove-story.md
@@ -1,7 +1,7 @@
 ```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { Button } from './Button';
+import { Button } from './Button.component';
 
 const meta: Meta<Button> = {
   component: Button,
@@ -21,7 +21,7 @@ export const UndocumentedStory: Story = {
 ```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
-import { Button } from './Button';
+import { Button } from './Button.component';
 
 const meta = preview.meta({
   component: Button,
diff --git a/docs/_snippets/tags-combo-example.md b/docs/_snippets/tags-combo-example.md
index 9a01a106fe39..d48d345e3012 100644
--- a/docs/_snippets/tags-combo-example.md
+++ b/docs/_snippets/tags-combo-example.md
@@ -1,7 +1,7 @@
 ```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { Button } from './Button';
+import { Button } from './Button.component';
 
 const meta: Meta<Button> = {
   component: Button,
@@ -39,7 +39,7 @@ export const Combo: Story = {
 ```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
-import { Button } from './Button';
+import { Button } from './Button.component';
 
 const meta = preview.meta({
   component: Button,
@@ -206,10 +206,11 @@ export const Combo: Story = {
 };
 ```
 
-```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { Button } from './Button.svelte';
+
+  import Button from './Button.svelte';
 
   const { Story } = defineMeta({
     component: Button,
@@ -237,10 +238,11 @@ export const Combo: Story = {
 </Story>
 ```
 
-```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
-  import { Button } from './Button.svelte';
+
+  import Button from './Button.svelte';
 
   const { Story } = defineMeta({
     component: Button,
@@ -269,7 +271,7 @@ export const Combo: Story = {
 ```
 
 ```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF 3"
-import { Button } from './Button';
+import Button from './Button.vue';
 
 export default {
   component: Button,
@@ -305,7 +307,7 @@ export const Combo = {
 ```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/vue3-vite';
 
-import { Button } from './Button';
+import Button from './Button.vue';
 
 const meta = {
   component: Button,
@@ -344,7 +346,7 @@ export const Combo: Story = {
 ```ts filename="Button.stories.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
-import { Button } from './Button';
+import Button from './Button.vue';
 
 const meta = preview.meta({
   component: Button,
@@ -382,7 +384,7 @@ export const Combo = meta.story({
 ```js filename="Button.stories.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
-import { Button } from './Button';
+import Button from './Button.vue';
 
 const meta = preview.meta({
   component: Button,
@@ -589,6 +591,7 @@ export const Combo = meta.story({
 
 ```jsx filename="Button.stories.jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { Button } from './Button';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/tags-docs-only-in-meta.md b/docs/_snippets/tags-docs-only-in-meta.md
index bca45684fa6e..6b6eed0812f8 100644
--- a/docs/_snippets/tags-docs-only-in-meta.md
+++ b/docs/_snippets/tags-docs-only-in-meta.md
@@ -1,7 +1,7 @@
 ```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { Button } from './Button';
+import { Button } from './Button.component';
 
 const meta: Meta<Button> = {
   component: Button,
@@ -18,7 +18,7 @@ export default meta;
 ```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
-import { Button } from './Button';
+import { Button } from './Button.component';
 
 const meta = preview.meta({
   component: Button,
diff --git a/docs/_snippets/tags-in-meta-and-story.md b/docs/_snippets/tags-in-meta-and-story.md
index 1578a470cc0b..21a78ef32ba8 100644
--- a/docs/_snippets/tags-in-meta-and-story.md
+++ b/docs/_snippets/tags-in-meta-and-story.md
@@ -1,7 +1,7 @@
 ```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF 3"
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { Button } from './Button';
+import { Button } from './Button.component';
 
 const meta: Meta<Button> = {
   component: Button,
@@ -32,7 +32,7 @@ export const ExperimentalFeatureStory: Story = {
 ```ts filename="Button.stories.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
 
-import { Button } from './Button';
+import { Button } from './Button.component';
 
 const meta = preview.meta({
   component: Button,
diff --git a/docs/_snippets/your-component-with-decorator.md b/docs/_snippets/your-component-with-decorator.md
index 779aeb0c9f5c..26917746ad8f 100644
--- a/docs/_snippets/your-component-with-decorator.md
+++ b/docs/_snippets/your-component-with-decorator.md
@@ -261,6 +261,7 @@ const meta = preview.meta({
 
 ```jsx filename="YourComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { YourComponent } from './YourComponent';
 
 const meta = preview.meta({
diff --git a/docs/_snippets/your-component.md b/docs/_snippets/your-component.md
index 6e304f3cd78e..1ff575f317f9 100644
--- a/docs/_snippets/your-component.md
+++ b/docs/_snippets/your-component.md
@@ -462,6 +462,7 @@ export const Basic = meta.story({
 
 ```js filename="YourComponent.stories.js|jsx" renderer="react" language="js" tabTitle="CSF Next 🧪"
 import preview from '../.storybook/preview';
+
 import { YourComponent } from './YourComponent';
 
 const meta = preview.meta({