storybook-addon-dependency-previews 0.1.2 → 0.2.0

package/README.md

@@ -1,6 +1,6 @@
 # Storybook Add On - Dependency Previews
 
-[![Dependency Previews logo](https://github.com/Dan503/storybook-addon-dependency-previews/raw/main/storybook-addon-package/readme-images/dependency-previews-logo.png)](https://dependency-previews-storybook.netlify.app/?path=/docs/04-templates-home-template--docs)
+[![Dependency Previews logo](https://github.com/Dan503/storybook-addon-dependency-previews/raw/main/storybook-addon-package/readme-images/dependency-previews-logo.png)](https://dependency-previews-storybook-react.netlify.app/?path=/docs/04-templates-home-template--docs)
 
 ## What is this?
 
@@ -8,6 +8,8 @@
 
 A plugin for [Storybook](https://storybook.js.org/) that shows the full dependency tree in both directions (built with and used by) the components in your application.
 
+Currently works with **React** and **Svelte**. Angular support is coming soon.
+
 This is what you will see in Storybook after Dependency Previews have been installed and configured:
 
 ![Dependency Previews - all closed](https://github.com/Dan503/storybook-addon-dependency-previews/raw/main/storybook-addon-package/readme-images/all-closed.png)
@@ -16,11 +18,19 @@ The below image demonstrates what you will see when you open up some of the depe
 
 ![Dependency Previews - all open](https://github.com/Dan503/storybook-addon-dependency-previews/raw/main/storybook-addon-package/readme-images/all-open.png)
 
-See the dependency previews add on in action at the [Storybook addon demo site](https://dependency-previews-storybook.netlify.app/?path=/docs/04-templates-home-template--docs).
+### Demos
+
+#### React demos
 
-You can also [visit the example website](https://dependency-previews-demo-site.netlify.app/) that the Storybook demo is built for.
+- [React Storybook demo site](https://dependency-previews-storybook-react.netlify.app/?path=/docs/04-templates-home-template--docs)
+- [React rendered example website](https://dependency-previews-demo-site-react.netlify.app/)
+- [React demo source code](https://github.com/Dan503/storybook-addon-dependency-previews/tree/main/example-site/react)
 
-Also [visit the npm page](https://www.npmjs.com/package/storybook-addon-dependency-previews) if you are reading this on GitHub
+#### Svelte demos
+
+- [Svelte Storybook demo site](https://dependency-previews-storybook-svelte.netlify.app/)
+- [Svelte rendered example website](https://dependency-previews-demo-site-svelte.netlify.app/)
+- [Svelte demo source code](https://github.com/Dan503/storybook-addon-dependency-previews/tree/main/example-site/svelte)
 
 <!-- TODO: Provide a video/gif of the addon in action -->
 
@@ -28,18 +38,18 @@ Also [visit the npm page](https://www.npmjs.com/package/storybook-addon-dependen
 
 ### Package download
 
-First you will need to install the plugin via npm
+First you will need to install the plugin via npm as well as [dependency-cruiser](https://www.npmjs.com/package/dependency-cruiser)
 
 ```
-npm install storybook-addon-dependency-previews
+npm install -D storybook-addon-dependency-previews dependency-cruiser
 ```
 
 <details>
 	<summary>Other package managers</summary>
-	<p><pre><code>pnpm add storybook-addon-dependency-previews</code></pre></p>
-	<p><pre><code>yarn add storybook-addon-dependency-previews</code></pre></p>
-	<p><pre><code>bun add storybook-addon-dependency-previews</code></pre></p>
-	<p><pre><code>deno add npm:storybook-addon-dependency-previews</code></pre></p>
+	<p><pre><code>pnpm add -D storybook-addon-dependency-previews dependency-cruiser</code></pre></p>
+	<p><pre><code>yarn add -D storybook-addon-dependency-previews dependency-cruiser</code></pre></p>
+	<p><pre><code>bun add -D storybook-addon-dependency-previews dependency-cruiser</code></pre></p>
+	<p><pre><code>deno add --dev npm:storybook-addon-dependency-previews npm:dependency-cruiser</code></pre></p>
 </details>
 
 ### Register the add-on
@@ -48,12 +58,13 @@ From your root folder, open your `.storybook/main.ts` file.
 
 Edit the `main.ts` to contain the following values or copy/paste the below to replace the full contents of the main.ts file.
 
+#### Register with React
+
 ```ts
-import { StorybookConfig } from '@storybook/react-vite'
+import type { StorybookConfig } from '@storybook/react-vite'
 
 const config: StorybookConfig = {
-	// tells storybook what files to look for when it goes searching for story files
-	stories: ['../src/**/*.stories.@(ts|tsx|mdx|svelte|vue)'],
+	stories: ['../src/**/*.stories.@(ts|tsx|mdx)'],
 	addons: [
 		// autodocs is required for this addon to work
 		'@storybook/addon-docs',
@@ -61,8 +72,6 @@ const config: StorybookConfig = {
 		'storybook-addon-dependency-previews/addon',
 	],
 	framework: {
-		// The framework that storybook uses to read story components
-		// Use @storybook/*-vite for your framework of choice
 		name: '@storybook/react-vite',
 		options: {},
 	},
@@ -71,14 +80,37 @@ const config: StorybookConfig = {
 export default config
 ```
 
+#### Register with Svelte
+
+```ts
+import type { StorybookConfig } from '@storybook/sveltekit'
+
+const config: StorybookConfig = {
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts|svelte)'],
+	addons: [
+		// autodocs is required for this addon to work
+		'@storybook/addon-docs',
+		// required for .stories.svelte CSF format
+		'@storybook/addon-svelte-csf',
+		// the storybook dependency previews addon registration
+		'storybook-addon-dependency-previews/addon',
+	],
+	framework: '@storybook/sveltekit',
+}
+
+export default config
+```
+
 ### Bare minimum storybook story example
 
 Get a story ready so you have something to test with.
 
 Below is the bare minimum needed to generate a viable story that is compatible with the add-on.
 
+#### React `.stories.tsx` file example
+
 ```ts
-import type { Meta } from '@storybook/react-vite'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 import { ComponentName } from './ComponentName'
 
 const meta: Meta<typeof ComponentName> = {
@@ -104,6 +136,28 @@ export const Primary: Story = {
 }
 ```
 
+#### Svelte `.stories.svelte` file using [Svelte CSF](https://github.com/storybookjs/addon-svelte-csf)
+
+```svelte
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf'
+	import ComponentName from './ComponentName.svelte'
+
+	const { Story } = defineMeta({
+		title: 'Component Name',
+		component: ComponentName,
+		// autodocs tag is required
+		tags: ['autodocs'],
+		// The `__filePath` property must be applied to every story file
+		parameters: {
+			__filePath: import.meta.url,
+		},
+	})
+</script>
+
+<Story name="Primary" />
+```
+
 ### package.json scripts
 
 You will need the following scripts in your `package.json` file:
@@ -133,18 +187,17 @@ Don't run any of these yet, you are not finished with the installation.
 
 `npm run sb:alt-port` (optional) will run storybook in watch mode and run it using a specific port number.
 
-### Create the preview.tsx file
+### Create the preview file
 
 First run `npm run sb:deps` to generate a fresh `dependency-previews.json` file in the `.storybook` folder.
 
 Make sure that the `"resolveJsonModule"` tsConfig.json setting is set to `true` to import this file.
 
-Now create a `preview.tsx` file in the `.storybook` folder with the following content:
+Now create a `.storybook/preview.ts` file (or `preview.tsx` if your framework requires JSX) with the following content:
 
-```tsx
+```ts
 /// <reference types="vite/client" />
 
-import * as React from 'react'
 import {
 	defaultPreviewParameters,
 	dependencyPreviewDecorators,
@@ -154,7 +207,7 @@ import {
 // Import the generated dependency-previews.json file
 import dependenciesJson from './dependency-previews.json'
 
-// Global styles are imported here
+// Global styles are imported here (optional)
 import '../src/styles.css'
 
 const previewConfig: StorybookPreviewConfig = {
@@ -167,10 +220,10 @@ const previewConfig: StorybookPreviewConfig = {
 				'/src/**/*.stories.@(tsx|ts|jsx|js|svelte)',
 				{ eager: false },
 			),
-			// Replace this with the base url of your git repository
-			// This enables the addon to link to the source code of the component
+			// Replace this with the URL to your src folder in your git repository.
+			// This enables the addon to link to the source code of the component.
 			sourceRootUrl:
-				'https://github.com/Dan503/storybook-addon-dependency-previews/blob/main/example-site',
+				'https://github.com/your-org/your-repo/blob/main/src',
 			// This allows Source File Path to open the
 			// component file directly in VS Code when
 			// running in a local host environment.

package/dist/_virtual/{_rolldown/runtime.cjs → rolldown_runtime.cjs}

@@ -1,4 +1,4 @@
-//#region \0rolldown/runtime.js
+//#region rolldown:runtime
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -6,16 +6,12 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __copyProps = (to, from, except, desc) => {
-	if (from && typeof from === "object" || typeof from === "function") {
-		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
-			key = keys[i];
-			if (!__hasOwnProp.call(to, key) && key !== except) {
-				__defProp(to, key, {
-					get: ((k) => from[k]).bind(null, key),
-					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-				});
-			}
-		}
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
 	}
 	return to;
 };

package/dist/addon/index.cjs

@@ -1,4 +1,3 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const require_addon_vitePlugin = require('./vitePlugin.cjs');
 
 //#region src/addon/index.ts

package/dist/addon/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["sbDepsVitePlugin"],"sources":["../../src/addon/index.ts"],"sourcesContent":["import { sbDepsVitePlugin } from './vitePlugin'\n\nexport async function viteFinal(config: any) {\n\tconfig.plugins = [...(config.plugins ?? []), sbDepsVitePlugin()]\n\treturn config\n}\n"],"mappings":";;;;AAEA,eAAsB,UAAU,QAAa;AAC5C,QAAO,UAAU,CAAC,GAAI,OAAO,WAAW,EAAE,EAAGA,2CAAkB,CAAC;AAChE,QAAO"}
+{"version":3,"file":"index.cjs","names":["sbDepsVitePlugin"],"sources":["../../src/addon/index.ts"],"sourcesContent":["import { sbDepsVitePlugin } from './vitePlugin'\n\nexport async function viteFinal(config: any) {\n\tconfig.plugins = [...(config.plugins ?? []), sbDepsVitePlugin()]\n\treturn config\n}\n"],"mappings":";;;AAEA,eAAsB,UAAU,QAAa;AAC5C,QAAO,UAAU,CAAC,GAAI,OAAO,WAAW,EAAE,EAAGA,2CAAkB,CAAC;AAChE,QAAO"}

package/dist/addon/preset.cjs

@@ -1,4 +1,3 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 //#region src/addon/preset.ts
 const addons = ["@storybook/addon-docs", "@storybook/addon-links"];

package/dist/addon/preset.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"preset.cjs","names":[],"sources":["../../src/addon/preset.ts"],"sourcesContent":["export const addons: Array<string> = [\n\t'@storybook/addon-docs',\n\t'@storybook/addon-links',\n]\n"],"mappings":";;;AAAA,MAAa,SAAwB,CACpC,yBACA,yBACA"}
+{"version":3,"file":"preset.cjs","names":["addons: Array<string>"],"sources":["../../src/addon/preset.ts"],"sourcesContent":["export const addons: Array<string> = [\n\t'@storybook/addon-docs',\n\t'@storybook/addon-links',\n]\n"],"mappings":";;AAAA,MAAaA,SAAwB,CACpC,yBACA,yBACA"}

package/dist/addon/preset.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"preset.mjs","names":[],"sources":["../../src/addon/preset.ts"],"sourcesContent":["export const addons: Array<string> = [\n\t'@storybook/addon-docs',\n\t'@storybook/addon-links',\n]\n"],"mappings":";AAAA,MAAa,SAAwB,CACpC,yBACA,yBACA"}
+{"version":3,"file":"preset.mjs","names":["addons: Array<string>"],"sources":["../../src/addon/preset.ts"],"sourcesContent":["export const addons: Array<string> = [\n\t'@storybook/addon-docs',\n\t'@storybook/addon-links',\n]\n"],"mappings":";AAAA,MAAaA,SAAwB,CACpC,yBACA,yBACA"}

package/dist/addon/vitePlugin.cjs

@@ -1,7 +1,8 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
 let node_fs = require("node:fs");
+node_fs = require_rolldown_runtime.__toESM(node_fs);
 let node_path = require("node:path");
+node_path = require_rolldown_runtime.__toESM(node_path);
 
 //#region src/addon/vitePlugin.ts
 function sbDepsVitePlugin() {

package/dist/addon/vitePlugin.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"vitePlugin.cjs","names":[],"sources":["../../src/addon/vitePlugin.ts"],"sourcesContent":["import { readFileSync, existsSync } from 'node:fs'\nimport { resolve } from 'node:path'\n\nexport function sbDepsVitePlugin() {\n\tconst virtId = 'virtual:dependency-previews-json'\n\tconst resolved = '\\0' + virtId\n\treturn {\n\t\tname: 'sb-deps',\n\t\tresolveId(id: string) {\n\t\t\treturn id === virtId ? resolved : null\n\t\t},\n\t\tload(id: string) {\n\t\t\tif (id !== resolved) return null\n\t\t\tconst jsonPath = resolve(\n\t\t\t\tprocess.cwd(),\n\t\t\t\t'.storybook/dependency-previews.json',\n\t\t\t)\n\t\t\tconst json = existsSync(jsonPath)\n\t\t\t\t? readFileSync(jsonPath, 'utf8')\n\t\t\t\t: '{}'\n\t\t\treturn `export default ${json};`\n\t\t},\n\t}\n}\n"],"mappings":";;;;;;AAGA,SAAgB,mBAAmB;CAClC,MAAM,SAAS;CACf,MAAM,WAAW,OAAO;AACxB,QAAO;EACN,MAAM;EACN,UAAU,IAAY;AACrB,UAAO,OAAO,SAAS,WAAW;;EAEnC,KAAK,IAAY;AAChB,OAAI,OAAO,SAAU,QAAO;GAC5B,MAAM,kCACL,QAAQ,KAAK,EACb,sCACA;GACD,MAAM,+BAAkB,SAAS,6BACjB,UAAU,OAAO,GAC9B;AACH,UAAO,kBAAkB,KAAK;;EAE/B"}
+{"version":3,"file":"vitePlugin.cjs","names":[],"sources":["../../src/addon/vitePlugin.ts"],"sourcesContent":["import { readFileSync, existsSync } from 'node:fs'\nimport { resolve } from 'node:path'\n\nexport function sbDepsVitePlugin() {\n\tconst virtId = 'virtual:dependency-previews-json'\n\tconst resolved = '\\0' + virtId\n\treturn {\n\t\tname: 'sb-deps',\n\t\tresolveId(id: string) {\n\t\t\treturn id === virtId ? resolved : null\n\t\t},\n\t\tload(id: string) {\n\t\t\tif (id !== resolved) return null\n\t\t\tconst jsonPath = resolve(\n\t\t\t\tprocess.cwd(),\n\t\t\t\t'.storybook/dependency-previews.json',\n\t\t\t)\n\t\t\tconst json = existsSync(jsonPath)\n\t\t\t\t? readFileSync(jsonPath, 'utf8')\n\t\t\t\t: '{}'\n\t\t\treturn `export default ${json};`\n\t\t},\n\t}\n}\n"],"mappings":";;;;;;;AAGA,SAAgB,mBAAmB;CAClC,MAAM,SAAS;CACf,MAAM,WAAW,OAAO;AACxB,QAAO;EACN,MAAM;EACN,UAAU,IAAY;AACrB,UAAO,OAAO,SAAS,WAAW;;EAEnC,KAAK,IAAY;AAChB,OAAI,OAAO,SAAU,QAAO;GAC5B,MAAM,kCACL,QAAQ,KAAK,EACb,sCACA;GACD,MAAM,+BAAkB,SAAS,6BACjB,UAAU,OAAO,GAC9B;AACH,UAAO,kBAAkB,KAAK;;EAE/B"}

package/dist/blocks/DependencyPreviews.cjs

@@ -1,4 +1,4 @@
-const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
 const require_PrimaryPreview = require('../components/PrimaryPreview.cjs');
 const require_StoryLink = require('../components/StoryLink.cjs');
 const require_useDependencyGraph = require('../hooks/useDependencyGraph.cjs');
@@ -12,8 +12,9 @@ const require_CubeIcon = require('../components/icons/CubeIcon.cjs');
 const require_PathCopyMolecule = require('../components/PathCopyMolecule.cjs');
 const require_SbHeading = require('../components/SbHeading.cjs');
 let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
 let src_blocks_DependencyPreviews_module_css = require("./DependencyPreviews.module.css");
-src_blocks_DependencyPreviews_module_css = require_runtime.__toESM(src_blocks_DependencyPreviews_module_css);
+src_blocks_DependencyPreviews_module_css = require_rolldown_runtime.__toESM(src_blocks_DependencyPreviews_module_css);
 
 //#region src/blocks/DependencyPreviews.tsx
 function DependencyPreviews() {

package/dist/blocks/DependencyPreviews.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DependencyPreviews.cjs","names":["DependencyGraphProvider","useDependencyGraph","s","SbHeading","filterOutStoryAndNonComponentFiles","Expandable","EyeOpen","PrimaryPreview","ArrowToRectangle","PathCopyMolecule","ComponentSourceLink","StoryLink","BuildIcon","SquaresPlus","CubeIcon"],"sources":["../../src/blocks/DependencyPreviews.tsx"],"sourcesContent":["import { PrimaryPreview } from '../components/PrimaryPreview'\nimport { StoryLink } from '../components/StoryLink'\nimport {\n\tDependencyGraphProvider,\n\tfilterOutStoryAndNonComponentFiles,\n\tuseDependencyGraph,\n} from '../hooks/useDependencyGraph'\nimport type { StoryInfo } from '../types'\n\nimport { ComponentSourceLink } from '../components/ComponentSourceLink'\nimport { Expandable } from '../components/Expandable'\nimport { BuildIcon } from '../components/icons/BuildIcon'\nimport { EyeOpen } from '../components/icons/EyeOpen'\nimport { SquaresPlus } from '../components/icons/SquaresPlus'\n\nimport { ArrowToRectangle } from '../components/icons/ArrowToRectangleIcon'\nimport { CubeIcon } from '../components/icons/CubeIcon'\nimport { PathCopyMolecule } from '../components/PathCopyMolecule'\nimport { SbHeading } from '../components/SbHeading'\nimport s from './DependencyPreviews.module.css'\n\nexport function DependencyPreviews() {\n\treturn (\n\t\t<DependencyGraphProvider>\n\t\t\t<TopLevelDependencyPreviews />\n\t\t</DependencyGraphProvider>\n\t)\n}\n\nfunction TopLevelDependencyPreviews() {\n\tconst { node } = useDependencyGraph()\n\tif (!node) return <div>No dependency previews for this component.</div>\n\n\treturn (\n\t\t<div className={s.topLevelWrapper}>\n\t\t\t<SbHeading>Dependency previews</SbHeading>\n\t\t\t<DepsPreviewContent storyInfo={node} enablePreview={false} />\n\t\t</div>\n\t)\n}\n\ninterface PropsForDepsPreviewContent {\n\tstoryInfo: StoryInfo\n\tenablePreview?: boolean\n}\nfunction DepsPreviewContent({\n\tstoryInfo,\n\tenablePreview = true,\n}: PropsForDepsPreviewContent) {\n\tconst { graph } = useDependencyGraph()\n\tconst { builtWith, usedIn } = graph![storyInfo.componentPath]\n\tconst filteredBuiltWith = filterOutStoryAndNonComponentFiles(builtWith)\n\tconst filteredUsedIn = filterOutStoryAndNonComponentFiles(usedIn)\n\n\treturn (\n\t\t<div>\n\t\t\t{enablePreview && (\n\t\t\t\t<Expandable\n\t\t\t\t\tHeader={`Preview ${storyInfo.storyTitle} component`}\n\t\t\t\t\tIcon={EyeOpen}\n\t\t\t\t>\n\t\t\t\t\t<PrimaryPreview storyInfo={storyInfo} />\n\t\t\t\t</Expandable>\n\t\t\t)}\n\n\t\t\t<Expandable\n\t\t\t\tHeader={`Paths to ${storyInfo.storyTitle} component`}\n\t\t\t\tIcon={ArrowToRectangle}\n\t\t\t>\n\t\t\t\t<div className={s.pathData}>\n\t\t\t\t\t<PathCopyMolecule\n\t\t\t\t\t\tlabel=\"Source File Path\"\n\t\t\t\t\t\tcopyContent={storyInfo.componentPath}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ComponentSourceLink storyInfo={storyInfo} />\n\t\t\t\t\t</PathCopyMolecule>\n\n\t\t\t\t\t<PathCopyMolecule\n\t\t\t\t\t\tlabel=\"Story Title Path\"\n\t\t\t\t\t\tcopyContent={storyInfo.storyTitlePath!}\n\t\t\t\t\t>\n\t\t\t\t\t\t<StoryLink info={storyInfo}>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t\t\t// allow line breaks on slashes\n\t\t\t\t\t\t\t\t\t__html: storyInfo.storyTitlePath!.replaceAll(\n\t\t\t\t\t\t\t\t\t\t'/',\n\t\t\t\t\t\t\t\t\t\t'/<wbr/>',\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</StoryLink>\n\t\t\t\t\t</PathCopyMolecule>\n\n\t\t\t\t\t<PathCopyMolecule\n\t\t\t\t\t\tlabel=\"Story Page ID\"\n\t\t\t\t\t\tcopyContent={storyInfo.storyId!}\n\t\t\t\t\t>\n\t\t\t\t\t\t<StoryLink info={storyInfo}>\n\t\t\t\t\t\t\t{storyInfo.storyId}\n\t\t\t\t\t\t</StoryLink>\n\t\t\t\t\t</PathCopyMolecule>\n\t\t\t\t</div>\n\t\t\t</Expandable>\n\n\t\t\t{filteredBuiltWith.length > 0 && (\n\t\t\t\t<Expandable\n\t\t\t\t\tHeader={`Built with ${\n\t\t\t\t\t\tfilteredBuiltWith.length\n\t\t\t\t\t} component${plural(filteredBuiltWith)}`}\n\t\t\t\t\tIcon={BuildIcon}\n\t\t\t\t>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{filterOutStoryAndNonComponentFiles(builtWith).map(\n\t\t\t\t\t\t\t(info) => (\n\t\t\t\t\t\t\t\t<DepsPreviewItem\n\t\t\t\t\t\t\t\t\tstoryInfo={info}\n\t\t\t\t\t\t\t\t\tkey={info.componentPath}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ul>\n\t\t\t\t</Expandable>\n\t\t\t)}\n\t\t\t{filteredUsedIn.length > 0 && (\n\t\t\t\t<Expandable\n\t\t\t\t\tHeader={`Used in ${filteredUsedIn.length} component${plural(\n\t\t\t\t\t\tfilteredUsedIn,\n\t\t\t\t\t)}`}\n\t\t\t\t\tIcon={SquaresPlus}\n\t\t\t\t>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{filterOutStoryAndNonComponentFiles(usedIn).map(\n\t\t\t\t\t\t\t(info) => (\n\t\t\t\t\t\t\t\t<DepsPreviewItem\n\t\t\t\t\t\t\t\t\tstoryInfo={info}\n\t\t\t\t\t\t\t\t\tkey={info.componentPath}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ul>\n\t\t\t\t</Expandable>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n\ninterface PropsForDepsPreviewItem {\n\tstoryInfo: StoryInfo\n}\n\nfunction DepsPreviewItem({ storyInfo }: PropsForDepsPreviewItem) {\n\treturn (\n\t\t<li key={storyInfo.componentPath}>\n\t\t\t{storyInfo.storyId ? (\n\t\t\t\t<Expandable\n\t\t\t\t\tIcon={CubeIcon}\n\t\t\t\t\tHeader={\n\t\t\t\t\t\t<StoryLink info={storyInfo} tooltipPosition=\"right\" />\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<DepsPreviewContent storyInfo={storyInfo} />\n\t\t\t\t</Expandable>\n\t\t\t) : (\n\t\t\t\t<StoryLink info={storyInfo} />\n\t\t\t)}\n\t\t</li>\n\t)\n}\n\nfunction plural(arr: Array<any>) {\n\treturn arr.length === 1 ? '' : 's'\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqBA,SAAgB,qBAAqB;AACpC,QACC,2CAACA,gEACA,2CAAC,+BAA6B,GACL;;AAI5B,SAAS,6BAA6B;CACrC,MAAM,EAAE,SAASC,+CAAoB;AACrC,KAAI,CAAC,KAAM,QAAO,2CAAC,mBAAI,+CAAgD;AAEvE,QACC,4CAAC;EAAI,WAAWC,iDAAE;aACjB,2CAACC,yCAAU,wBAA+B,EAC1C,2CAAC;GAAmB,WAAW;GAAM,eAAe;IAAS;GACxD;;AAQR,SAAS,mBAAmB,EAC3B,WACA,gBAAgB,QACc;CAC9B,MAAM,EAAE,UAAUF,+CAAoB;CACtC,MAAM,EAAE,WAAW,WAAW,MAAO,UAAU;CAC/C,MAAM,oBAAoBG,8DAAmC,UAAU;CACvE,MAAM,iBAAiBA,8DAAmC,OAAO;AAEjE,QACC,4CAAC;EACC,iBACA,2CAACC;GACA,QAAQ,WAAW,UAAU,WAAW;GACxC,MAAMC;aAEN,2CAACC,yCAA0B,YAAa;IAC5B;EAGd,2CAACF;GACA,QAAQ,YAAY,UAAU,WAAW;GACzC,MAAMG;aAEN,4CAAC;IAAI,WAAWN,iDAAE;;KACjB,2CAACO;MACA,OAAM;MACN,aAAa,UAAU;gBAEvB,2CAACC,mDAA+B,YAAa;OAC3B;KAEnB,2CAACD;MACA,OAAM;MACN,aAAa,UAAU;gBAEvB,2CAACE;OAAU,MAAM;iBAChB,2CAAC,UACA,yBAAyB,EAExB,QAAQ,UAAU,eAAgB,WACjC,KACA,UACA,EACD,GACA;QACS;OACM;KAEnB,2CAACF;MACA,OAAM;MACN,aAAa,UAAU;gBAEvB,2CAACE;OAAU,MAAM;iBACf,UAAU;QACA;OACM;;KACd;IACM;EAEZ,kBAAkB,SAAS,KAC3B,2CAACN;GACA,QAAQ,cACP,kBAAkB,OAClB,YAAY,OAAO,kBAAkB;GACtC,MAAMO;aAEN,2CAAC,kBACCR,8DAAmC,UAAU,CAAC,KAC7C,SACA,2CAAC,mBACA,WAAW,QACN,KAAK,cACT,CAEH,GACG;IACO;EAEb,eAAe,SAAS,KACxB,2CAACC;GACA,QAAQ,WAAW,eAAe,OAAO,YAAY,OACpD,eACA;GACD,MAAMQ;aAEN,2CAAC,kBACCT,8DAAmC,OAAO,CAAC,KAC1C,SACA,2CAAC,mBACA,WAAW,QACN,KAAK,cACT,CAEH,GACG;IACO;KAET;;AAQR,SAAS,gBAAgB,EAAE,aAAsC;AAChE,QACC,2CAAC,kBACC,UAAU,UACV,2CAACC;EACA,MAAMS;EACN,QACC,2CAACH;GAAU,MAAM;GAAW,iBAAgB;IAAU;YAGvD,2CAAC,sBAA8B,YAAa;GAChC,GAEb,2CAACA,+BAAU,MAAM,YAAa,IAXvB,UAAU,cAad;;AAIP,SAAS,OAAO,KAAiB;AAChC,QAAO,IAAI,WAAW,IAAI,KAAK"}
+{"version":3,"file":"DependencyPreviews.cjs","names":["DependencyGraphProvider","useDependencyGraph","s","SbHeading","filterOutStoryAndNonComponentFiles","Expandable","EyeOpen","PrimaryPreview","ArrowToRectangle","PathCopyMolecule","ComponentSourceLink","StoryLink","BuildIcon","SquaresPlus","CubeIcon"],"sources":["../../src/blocks/DependencyPreviews.tsx"],"sourcesContent":["import { PrimaryPreview } from '../components/PrimaryPreview'\nimport { StoryLink } from '../components/StoryLink'\nimport {\n\tDependencyGraphProvider,\n\tfilterOutStoryAndNonComponentFiles,\n\tuseDependencyGraph,\n} from '../hooks/useDependencyGraph'\nimport type { StoryInfo } from '../types'\n\nimport { ComponentSourceLink } from '../components/ComponentSourceLink'\nimport { Expandable } from '../components/Expandable'\nimport { BuildIcon } from '../components/icons/BuildIcon'\nimport { EyeOpen } from '../components/icons/EyeOpen'\nimport { SquaresPlus } from '../components/icons/SquaresPlus'\n\nimport { ArrowToRectangle } from '../components/icons/ArrowToRectangleIcon'\nimport { CubeIcon } from '../components/icons/CubeIcon'\nimport { PathCopyMolecule } from '../components/PathCopyMolecule'\nimport { SbHeading } from '../components/SbHeading'\nimport s from './DependencyPreviews.module.css'\n\nexport function DependencyPreviews() {\n\treturn (\n\t\t<DependencyGraphProvider>\n\t\t\t<TopLevelDependencyPreviews />\n\t\t</DependencyGraphProvider>\n\t)\n}\n\nfunction TopLevelDependencyPreviews() {\n\tconst { node } = useDependencyGraph()\n\tif (!node) return <div>No dependency previews for this component.</div>\n\n\treturn (\n\t\t<div className={s.topLevelWrapper}>\n\t\t\t<SbHeading>Dependency previews</SbHeading>\n\t\t\t<DepsPreviewContent storyInfo={node} enablePreview={false} />\n\t\t</div>\n\t)\n}\n\ninterface PropsForDepsPreviewContent {\n\tstoryInfo: StoryInfo\n\tenablePreview?: boolean\n}\nfunction DepsPreviewContent({\n\tstoryInfo,\n\tenablePreview = true,\n}: PropsForDepsPreviewContent) {\n\tconst { graph } = useDependencyGraph()\n\tconst { builtWith, usedIn } = graph![storyInfo.componentPath]\n\tconst filteredBuiltWith = filterOutStoryAndNonComponentFiles(builtWith)\n\tconst filteredUsedIn = filterOutStoryAndNonComponentFiles(usedIn)\n\n\treturn (\n\t\t<div>\n\t\t\t{enablePreview && (\n\t\t\t\t<Expandable\n\t\t\t\t\tHeader={`Preview ${storyInfo.storyTitle} component`}\n\t\t\t\t\tIcon={EyeOpen}\n\t\t\t\t>\n\t\t\t\t\t<PrimaryPreview storyInfo={storyInfo} />\n\t\t\t\t</Expandable>\n\t\t\t)}\n\n\t\t\t<Expandable\n\t\t\t\tHeader={`Paths to ${storyInfo.storyTitle} component`}\n\t\t\t\tIcon={ArrowToRectangle}\n\t\t\t>\n\t\t\t\t<div className={s.pathData}>\n\t\t\t\t\t<PathCopyMolecule\n\t\t\t\t\t\tlabel=\"Source File Path\"\n\t\t\t\t\t\tcopyContent={storyInfo.componentPath}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ComponentSourceLink storyInfo={storyInfo} />\n\t\t\t\t\t</PathCopyMolecule>\n\n\t\t\t\t\t<PathCopyMolecule\n\t\t\t\t\t\tlabel=\"Story Title Path\"\n\t\t\t\t\t\tcopyContent={storyInfo.storyTitlePath!}\n\t\t\t\t\t>\n\t\t\t\t\t\t<StoryLink info={storyInfo}>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t\t\t// allow line breaks on slashes\n\t\t\t\t\t\t\t\t\t__html: storyInfo.storyTitlePath!.replaceAll(\n\t\t\t\t\t\t\t\t\t\t'/',\n\t\t\t\t\t\t\t\t\t\t'/<wbr/>',\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</StoryLink>\n\t\t\t\t\t</PathCopyMolecule>\n\n\t\t\t\t\t<PathCopyMolecule\n\t\t\t\t\t\tlabel=\"Story Page ID\"\n\t\t\t\t\t\tcopyContent={storyInfo.storyId!}\n\t\t\t\t\t>\n\t\t\t\t\t\t<StoryLink info={storyInfo}>\n\t\t\t\t\t\t\t{storyInfo.storyId}\n\t\t\t\t\t\t</StoryLink>\n\t\t\t\t\t</PathCopyMolecule>\n\t\t\t\t</div>\n\t\t\t</Expandable>\n\n\t\t\t{filteredBuiltWith.length > 0 && (\n\t\t\t\t<Expandable\n\t\t\t\t\tHeader={`Built with ${\n\t\t\t\t\t\tfilteredBuiltWith.length\n\t\t\t\t\t} component${plural(filteredBuiltWith)}`}\n\t\t\t\t\tIcon={BuildIcon}\n\t\t\t\t>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{filterOutStoryAndNonComponentFiles(builtWith).map(\n\t\t\t\t\t\t\t(info) => (\n\t\t\t\t\t\t\t\t<DepsPreviewItem\n\t\t\t\t\t\t\t\t\tstoryInfo={info}\n\t\t\t\t\t\t\t\t\tkey={info.componentPath}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ul>\n\t\t\t\t</Expandable>\n\t\t\t)}\n\t\t\t{filteredUsedIn.length > 0 && (\n\t\t\t\t<Expandable\n\t\t\t\t\tHeader={`Used in ${filteredUsedIn.length} component${plural(\n\t\t\t\t\t\tfilteredUsedIn,\n\t\t\t\t\t)}`}\n\t\t\t\t\tIcon={SquaresPlus}\n\t\t\t\t>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{filterOutStoryAndNonComponentFiles(usedIn).map(\n\t\t\t\t\t\t\t(info) => (\n\t\t\t\t\t\t\t\t<DepsPreviewItem\n\t\t\t\t\t\t\t\t\tstoryInfo={info}\n\t\t\t\t\t\t\t\t\tkey={info.componentPath}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ul>\n\t\t\t\t</Expandable>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n\ninterface PropsForDepsPreviewItem {\n\tstoryInfo: StoryInfo\n}\n\nfunction DepsPreviewItem({ storyInfo }: PropsForDepsPreviewItem) {\n\treturn (\n\t\t<li key={storyInfo.componentPath}>\n\t\t\t{storyInfo.storyId ? (\n\t\t\t\t<Expandable\n\t\t\t\t\tIcon={CubeIcon}\n\t\t\t\t\tHeader={\n\t\t\t\t\t\t<StoryLink info={storyInfo} tooltipPosition=\"right\" />\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<DepsPreviewContent storyInfo={storyInfo} />\n\t\t\t\t</Expandable>\n\t\t\t) : (\n\t\t\t\t<StoryLink info={storyInfo} />\n\t\t\t)}\n\t\t</li>\n\t)\n}\n\nfunction plural(arr: Array<any>) {\n\treturn arr.length === 1 ? '' : 's'\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAqBA,SAAgB,qBAAqB;AACpC,QACC,2CAACA,gEACA,2CAAC,+BAA6B,GACL;;AAI5B,SAAS,6BAA6B;CACrC,MAAM,EAAE,SAASC,+CAAoB;AACrC,KAAI,CAAC,KAAM,QAAO,2CAAC,mBAAI,+CAAgD;AAEvE,QACC,4CAAC;EAAI,WAAWC,iDAAE;aACjB,2CAACC,yCAAU,wBAA+B,EAC1C,2CAAC;GAAmB,WAAW;GAAM,eAAe;IAAS;GACxD;;AAQR,SAAS,mBAAmB,EAC3B,WACA,gBAAgB,QACc;CAC9B,MAAM,EAAE,UAAUF,+CAAoB;CACtC,MAAM,EAAE,WAAW,WAAW,MAAO,UAAU;CAC/C,MAAM,oBAAoBG,8DAAmC,UAAU;CACvE,MAAM,iBAAiBA,8DAAmC,OAAO;AAEjE,QACC,4CAAC;EACC,iBACA,2CAACC;GACA,QAAQ,WAAW,UAAU,WAAW;GACxC,MAAMC;aAEN,2CAACC,yCAA0B,YAAa;IAC5B;EAGd,2CAACF;GACA,QAAQ,YAAY,UAAU,WAAW;GACzC,MAAMG;aAEN,4CAAC;IAAI,WAAWN,iDAAE;;KACjB,2CAACO;MACA,OAAM;MACN,aAAa,UAAU;gBAEvB,2CAACC,mDAA+B,YAAa;OAC3B;KAEnB,2CAACD;MACA,OAAM;MACN,aAAa,UAAU;gBAEvB,2CAACE;OAAU,MAAM;iBAChB,2CAAC,UACA,yBAAyB,EAExB,QAAQ,UAAU,eAAgB,WACjC,KACA,UACA,EACD,GACA;QACS;OACM;KAEnB,2CAACF;MACA,OAAM;MACN,aAAa,UAAU;gBAEvB,2CAACE;OAAU,MAAM;iBACf,UAAU;QACA;OACM;;KACd;IACM;EAEZ,kBAAkB,SAAS,KAC3B,2CAACN;GACA,QAAQ,cACP,kBAAkB,OAClB,YAAY,OAAO,kBAAkB;GACtC,MAAMO;aAEN,2CAAC,kBACCR,8DAAmC,UAAU,CAAC,KAC7C,SACA,2CAAC,mBACA,WAAW,QACN,KAAK,cACT,CAEH,GACG;IACO;EAEb,eAAe,SAAS,KACxB,2CAACC;GACA,QAAQ,WAAW,eAAe,OAAO,YAAY,OACpD,eACA;GACD,MAAMQ;aAEN,2CAAC,kBACCT,8DAAmC,OAAO,CAAC,KAC1C,SACA,2CAAC,mBACA,WAAW,QACN,KAAK,cACT,CAEH,GACG;IACO;KAET;;AAQR,SAAS,gBAAgB,EAAE,aAAsC;AAChE,QACC,2CAAC,kBACC,UAAU,UACV,2CAACC;EACA,MAAMS;EACN,QACC,2CAACH;GAAU,MAAM;GAAW,iBAAgB;IAAU;YAGvD,2CAAC,sBAA8B,YAAa;GAChC,GAEb,2CAACA,+BAAU,MAAM,YAAa,IAXvB,UAAU,cAad;;AAIP,SAAS,OAAO,KAAiB;AAChC,QAAO,IAAI,WAAW,IAAI,KAAK"}

package/dist/blocks/DependencyPreviews.d.cts

@@ -1,7 +1,7 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/blocks/DependencyPreviews.d.ts
-declare function DependencyPreviews(): react_jsx_runtime2.JSX.Element;
+declare function DependencyPreviews(): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { DependencyPreviews };
 //# sourceMappingURL=DependencyPreviews.d.cts.map

package/dist/blocks/DependencyPreviews.d.mts

@@ -1,7 +1,7 @@
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/blocks/DependencyPreviews.d.ts
-declare function DependencyPreviews(): react_jsx_runtime3.JSX.Element;
+declare function DependencyPreviews(): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { DependencyPreviews };
 //# sourceMappingURL=DependencyPreviews.d.mts.map

package/dist/cli/sb-deps.cjs

@@ -1,13 +1,17 @@
 #!/usr/bin/env node
-const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
 let node_fs = require("node:fs");
+node_fs = require_rolldown_runtime.__toESM(node_fs);
 let node_path = require("node:path");
+node_path = require_rolldown_runtime.__toESM(node_path);
 let node_child_process = require("node:child_process");
+node_child_process = require_rolldown_runtime.__toESM(node_child_process);
 let node_url = require("node:url");
-let _parcel_watcher = require("@parcel/watcher");
-_parcel_watcher = require_runtime.__toESM(_parcel_watcher);
+node_url = require_rolldown_runtime.__toESM(node_url);
+let __parcel_watcher = require("@parcel/watcher");
+__parcel_watcher = require_rolldown_runtime.__toESM(__parcel_watcher);
 let micromatch = require("micromatch");
-micromatch = require_runtime.__toESM(micromatch);
+micromatch = require_rolldown_runtime.__toESM(micromatch);
 
 //#region cli/sb-deps.ts
 const argv = process.argv.slice(2);
@@ -87,9 +91,16 @@ function isComponentsTsx(absPath) {
 	const norm = absPath.replace(/\\/g, "/");
 	return /\/src\/components\/.+\.tsx$/i.test(norm) && !/\.stories?\.tsx$/i.test(norm);
 }
+function isComponentsSvelte(absPath) {
+	const norm = absPath.replace(/\\/g, "/");
+	return /\/src\/components\/.+\.svelte$/i.test(norm) && !/\.stories?\.svelte$/i.test(norm);
+}
 function componentBaseFromComponent(absCompPath) {
 	return (0, node_path.basename)(absCompPath, ".tsx");
 }
+function componentBaseFromSvelteComponent(absCompPath) {
+	return (0, node_path.basename)(absCompPath, ".svelte");
+}
 function detectAtomicTag(absPath) {
 	const adaptedPath = absPath.toLowerCase().replace(/\\/g, "/");
 	const tokens = [
@@ -115,6 +126,11 @@ function storyPathForComponent(absCompPath) {
 	const base = componentBaseFromComponent(absCompPath);
 	return (0, node_path.join)(dir, `${base}.stories.tsx`);
 }
+function storyPathForSvelteComponent(absCompPath) {
+	const dir = (0, node_path.dirname)(absCompPath);
+	const base = componentBaseFromSvelteComponent(absCompPath);
+	return (0, node_path.join)(dir, `${base}.stories.svelte`);
+}
 function makeTitleFromComponent(absCompPath) {
 	const srcRoot = (0, node_path.join)(projectRoot, "src") + node_path.sep;
 	const normAbs = absCompPath.replace(/\\/g, "/");
@@ -191,6 +207,85 @@ function ensureStoryForComponent(absCompPath) {
 	if ((0, node_fs.existsSync)(sPath)) return null;
 	return scaffoldStoryForComponent(absCompPath);
 }
+function scaffoldSvelteComponent(absCompPath) {
+	const base = componentBaseFromSvelteComponent(absCompPath);
+	const componentName = toPascalCase(base);
+	const tpl = `<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	export interface PropsFor${componentName} {
+		children?: Snippet;
+	}
+
+	const { children }: PropsFor${componentName} = $props();
+<\/script>
+
+<div class="${componentName}">
+	<p>${componentName}</p>
+	{@render children?.()}
+</div>
+
+<style>
+	.${componentName} {
+		/* styles go here */
+	}
+</style>
+`;
+	(0, node_fs.writeFileSync)(absCompPath, tpl, "utf8");
+	info(`scaffolded svelte component → ${rel(absCompPath)}`);
+}
+function makeTitleFromSvelteComponent(absCompPath) {
+	const srcRoot = (0, node_path.join)(projectRoot, "src") + node_path.sep;
+	const normAbs = absCompPath.replace(/\\/g, "/");
+	const relFromSrc = normAbs.startsWith(srcRoot.replace(/\\/g, "/")) ? normAbs.slice(srcRoot.length) : absCompPath.replace(projectRoot + node_path.sep, "").replace(/\\/g, "/");
+	const dir = node_path.posix.dirname(relFromSrc);
+	let segments = dir.split("/").filter(Boolean);
+	if (segments[0] && /^components?$/i.test(segments[0])) segments = segments.slice(1);
+	const titledFolders = segments.map((s) => toTitleCase(toWords(s)));
+	const compName = componentBaseFromSvelteComponent(absCompPath);
+	const compTitle = toTitleCase(toWords(compName));
+	const fullStoryPath = [...titledFolders, compTitle].filter(Boolean);
+	const dedupedStoryPath = [...new Set(fullStoryPath)];
+	return dedupedStoryPath.join(" / ");
+}
+function scaffoldStoryForSvelteComponent(absCompPath) {
+	const base = componentBaseFromSvelteComponent(absCompPath);
+	const componentName = toPascalCase(base);
+	const title = makeTitleFromSvelteComponent(absCompPath);
+	const atomic = detectAtomicTag(absCompPath);
+	const tags = ["autodocs"];
+	if (atomic) tags.push(atomic);
+	const storyTpl = `<script lang="ts" module>
+	import type { StoryParameters } from 'storybook-addon-dependency-previews'
+	import ${componentName}, { type PropsFor${componentName} } from './${componentName}.svelte'
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+		title: '${title}',
+		component: ${componentName},
+		tags: [${tags.map((t) => `'${t}'`).join(", ")}],
+		parameters: {
+			layout: 'padded',
+			__filePath: import.meta.url,
+		} satisfies StoryParameters,
+	})
+	type Args = Omit<PropsFor${componentName}, 'children'>;
+<\/script>
+
+<Story name="Primary" args={{} satisfies Args}>
+	<p>${title}</p>
+</Story>
+`;
+	const storyPath = storyPathForSvelteComponent(absCompPath);
+	(0, node_fs.writeFileSync)(storyPath, storyTpl, "utf8");
+	info(`scaffolded svelte story → ${rel(storyPath)}`);
+	return storyPath;
+}
+function ensureStoryForSvelteComponent(absCompPath) {
+	const sPath = storyPathForSvelteComponent(absCompPath);
+	if ((0, node_fs.existsSync)(sPath)) return null;
+	return scaffoldStoryForSvelteComponent(absCompPath);
+}
 function startWatcher() {
 	const root = projectRoot;
 	const includeGlobs = [
@@ -221,7 +316,7 @@ function startWatcher() {
 			pending = false;
 		}, 120);
 	}
-	return _parcel_watcher.default.subscribe(root, async (err, events) => {
+	return __parcel_watcher.default.subscribe(root, async (err, events) => {
 		if (err) {
 			error(`watch error ${err?.message || err}`);
 			return;
@@ -240,6 +335,10 @@ function startWatcher() {
 				await handleComponentCreation(abs, relPath);
 				continue;
 			}
+			if (isComponentsSvelte(abs) && ev.type === "create") {
+				await handleSvelteComponentCreation(abs, relPath);
+				continue;
+			}
 			kick(ev.type, abs);
 		}
 	}, { ignore: ignoreGlobs }).then((result) => {
@@ -256,6 +355,16 @@ function startWatcher() {
 			kick("create:story", createdStory);
 		}
 	}
+	async function handleSvelteComponentCreation(abs, relPath) {
+		if (isEmptyOrWhitespace(abs)) {
+			scaffoldSvelteComponent(abs);
+		}
+		console.log("Svelte component creation detected:", relPath);
+		const createdStory = ensureStoryForSvelteComponent(abs);
+		if (createdStory) {
+			kick("create:story", createdStory);
+		}
+	}
 }
 let sbChild = null;
 async function startStorybook() {