Repository: storybook
Issue: [Bug]: Error when using `+page.svelte` files as `component` in stories
Labels: bug,svelte,sveltekit,docgen

### Describe the bug

When using Svelte 5 and SvelteKit, there's an error thrown for any story that uses a `+page.svelte` route as the meta `component`:

```
ReferenceError: Page is not defined
    at http://localhost:6007/src/routes/+page.svelte:33:27
```

This happens because the Svelte Docgen plugin calculates the component name wrong, based on Svelte 4's component name algorithm, which has changed slightly in Svelte 5, especially for filenames with special characters like `+`.

If we add the Vite Inspect plugin to the reproduction, we'll see that the `.__docgen` property is added to the wrong function name:

![Image](https://github.com/user-attachments/assets/08188086-732f-460c-a51d-eb112083ed56)


The current (broken) algorithm for calculating the component name is here:
https://github.com/storybookjs/storybook/blob/7e43ecd708d5d76f7473df35b89cf5728b2c5a7d/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts#L41-L71

But what Svelte 5 does is slightly different:

1. `get_component_name`
https://github.com/sveltejs/svelte/blob/396ea2ef370e7ea5b5d4571c4e5e14384bac3ca6/packages/svelte/src/compiler/phases/2-analyze/index.js#L208-L217

2. Which is passed through `module.scope.generate`:
https://github.com/sveltejs/svelte/blob/main/packages/svelte/src/compiler/phases/2-analyze/index.js#L399

3. And that `generate` does:
https://github.com/sveltejs/svelte/blob/396ea2ef370e7ea5b5d4571c4e5e14384bac3ca6/packages/svelte/src/compiler/phases/scope.js#L129-L150

If you combine that whole flow into a single function it would naively be something like this:

```js
function get_component_name(filename) {
	const parts = filename.split(/[/\\]/);
	const basename = /** @type {string} */ (parts.pop());
	const last_dir = /** @type {string} */ (parts.at(-1));
	let name = basename.replace('.svelte', '');
	if (name === 'index' && last_dir && last_dir !== 'src') {
		name = last_dir;
	}
	name = name[0].toUpperCase() + name.slice(1);
  
  // 👇 this is from generate()
   return name.replace(/[^a-zA-Z0-9_$]/g, '_').replace(/^[0-9]/, '_');
}
```

That last line (from `generate`) replaces special characters like `+` with `_`. So it turns `src/routes/+page.svelte` into `_page`, while we turn it into `Page`.

### Reproduction link

https://github.com/simonhackler/Storybook-reproduction

### Reproduction steps

1. Install dependencies and start Storybook
2. Open the Page story and see the error

### System

```bash
Storybook Environment Info:

  System:
    OS: macOS 13.1
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.20.2 - ~/Library/Caches/fnm_multishells/92912_1731183850302/bin/node
    Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/92912_1731183850302/bin/yarn
    npm: 10.8.3 - ~/Library/Caches/fnm_multishells/92912_1731183850302/bin/npm <----- active
    pnpm: 9.12.0 - ~/Library/Caches/fnm_multishells/92912_1731183850302/bin/pnpm
  Browsers:
    Chrome: 130.0.6723.119
    Edge: 131.0.2903.51
    Safari: 16.2
  npmPackages:
    @storybook/addon-essentials: ^8.4.4 => 8.4.4
    @storybook/addon-interactions: ^8.4.4 => 8.4.4
    @storybook/addon-svelte-csf: ^5.0.0-next.11 => 5.0.0-next.11
    @storybook/blocks: ^8.4.4 => 8.4.4
    @storybook/svelte: ^8.4.4 => 8.4.4
    @storybook/sveltekit: ^8.4.4 => 8.4.4
    @storybook/test: ^8.4.4 => 8.4.4
    storybook: ^8.4.4 => 8.4.4
```

### Additional context

Originally reported here: https://github.com/storybookjs/addon-svelte-csf/discussions/231#discussioncomment-11282610

We probably want a condition on the Svelte version, that uses the new algorithm when Svelte 5 is detected. In the perfect world we'd not try to generate the component name, but instead find it from the default export, either via a smart regex or AST parsing.