storybook-addon-dependency-previews 0.9.0 → 0.10.0

package/README.md

@@ -4,11 +4,11 @@
 
 ## What is this?
 
-> **This plugin is built for Storybook 10**
+> **This plugin is built for Storybook 10 and 11**
 
 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**, **Svelte**, **Vue 3**, **Solid**, **Angular**, and **Next.js**. The automated `sb-deps setup` wizard handles Vite-based projects (React, Svelte, Vue 3, Solid) end-to-end. Webpack-based projects (Angular, Next.js) need a one-time manual setup — see the [manual-setup-webpack guide](https://github.com/Dan503/storybook-addon-dependency-previews/blob/main/storybook-addon-package/docs/manual-setup-webpack.md) below.
+Currently works with **React**, **Preact**, **Svelte**, **Vue 3**, **Solid**, **Angular**, and **Next.js**. The automated `sb-deps setup` wizard handles Vite-based projects (React, Preact, Svelte, Vue 3, Solid) end-to-end. Webpack-based projects (Angular, Next.js) need a one-time manual setup — see the [manual-setup-webpack guide](https://github.com/Dan503/storybook-addon-dependency-previews/blob/main/storybook-addon-package/docs/manual-setup-webpack.md) below.
 
 This is what you will see in Storybook after Dependency Previews have been installed and configured:
 
@@ -26,6 +26,12 @@ The below image demonstrates what you will see when you open up some of the depe
 - [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)
 
+#### Preact demos
+
+- [Preact Storybook demo site](https://dependency-previews-storybook-preact.netlify.app/?path=/docs/04-templates-home-template--docs)
+- [Preact rendered example website](https://dependency-previews-demo-site-preact.netlify.app/)
+- [Preact demo source code](https://github.com/Dan503/storybook-addon-dependency-previews/tree/main/example-site/preact)
+
 #### Svelte demos
 
 - [Svelte Storybook demo site](https://dependency-previews-storybook-svelte.netlify.app/?path=/docs/04-templates-home-template--docs)
@@ -56,7 +62,7 @@ Vue version built for Vue 3.
 
 ## Installation guide
 
-### Quick start (React, Svelte, Vue 3, and Solid)
+### Quick start (React, Preact, Svelte, Vue 3, and Solid)
 
 After running `npx storybook@latest init` in your project, run the setup wizard:
 
@@ -98,11 +104,44 @@ When it finishes, run `npm run sb` (or your package manager's equivalent) to sta
 
 ### Manual setup
 
-The wizard supports React (`@storybook/react-vite`), Svelte (`@storybook/sveltekit`, `@storybook/svelte-vite`), Vue 3 (`@storybook/vue3-vite`), and Solid (`storybook-solidjs-vite`) — all Vite-based. **Angular (`@storybook/angular`) and Next.js (`@storybook/nextjs`) projects are both webpack-based and require manual setup** — the wizard's preview-patcher relies on Vite's `import.meta.glob`, which webpack doesn't expose. Follow the matching guide below:
+The wizard supports React (`@storybook/react-vite`), Preact (`@storybook/preact-vite`), Svelte (`@storybook/sveltekit`, `@storybook/svelte-vite`), Vue 3 (`@storybook/vue3-vite`), and Solid (`storybook-solidjs-vite`) — all Vite-based. **Angular (`@storybook/angular`) and Next.js (`@storybook/nextjs`) projects are both webpack-based and require manual setup** — the wizard's preview-patcher relies on Vite's `import.meta.glob`, which webpack doesn't expose. Follow the matching guide below:
 
-- [Manual setup — Vite (React, Svelte, Vue 3, Solid)](https://github.com/Dan503/storybook-addon-dependency-previews/blob/main/storybook-addon-package/docs/manual-setup-vite.md)
+- [Manual setup — Vite (React, Preact, Svelte, Vue 3, Solid)](https://github.com/Dan503/storybook-addon-dependency-previews/blob/main/storybook-addon-package/docs/manual-setup-vite.md)
 - [Manual setup — webpack (`@storybook/angular`, `@storybook/nextjs`)](https://github.com/Dan503/storybook-addon-dependency-previews/blob/main/storybook-addon-package/docs/manual-setup-webpack.md)
 
+### Storybook 11 / CSF Next preview configs
+
+From Storybook 11 the default `.storybook/preview.ts` style is CSF Next — a `definePreview({ ... })` call with an `addons` list. Register the addon there by calling the `dependencyPreviews()` function the package exports, alongside `@storybook/addon-docs`:
+
+```ts
+/// <reference types="vite/client" />
+
+import { definePreview } from '@storybook/react-vite'
+import addonDocs from '@storybook/addon-docs'
+import { dependencyPreviews } from 'storybook-addon-dependency-previews'
+
+import dependenciesJson from './dependency-previews.json'
+
+export default definePreview({
+	addons: [addonDocs(), dependencyPreviews()],
+	parameters: {
+		// The same settings block as the hand-spread form — the manual setup
+		// guides explain each value.
+		dependencyPreviews: {
+			dependenciesJson,
+			storyModules: import.meta.glob(
+				'/src/**/*.{story,stories}.{tsx,ts,jsx,js,svelte}',
+				{ eager: false },
+			),
+			sourceRootUrl: 'https://github.com/your-org/your-repo/blob/main',
+			projectRootPath: new URL('..', import.meta.url).pathname,
+		},
+	},
+})
+```
+
+The setup wizard recognises both preview styles: an existing `definePreview({ ... })` file gets `addonDocs()` and `dependencyPreviews()` added to its `addons` list and the settings block added to its `parameters`, and a classic `const preview = { ... }` file gets the hand-spread form (spreading `defaultPreviewParameters` and `dependencyPreviewDecorators`), which remains supported. When there is no preview file yet, the wizard writes the `definePreview` style on Storybook 11 for frameworks whose package exports `definePreview` (React, Vue 3 and Solid), and the hand-spread style everywhere else — it works on both majors. Both manual setup guides show the full CSF Next config for their frameworks.
+
 ## Auto-scaffolding new components and stories
 
 While `sb-deps` is watching (`npm run sb`), creating an **empty** source file fills it in from a template — and creates its matching sibling too. It works from either side:
@@ -110,9 +149,9 @@ While `sb-deps` is watching (`npm run sb`), creating an **empty** source file fi
 - **Create a component file** (`Button.tsx`, `Button.svelte`, `Button.vue`, `Button.component.ts`) → the component body is scaffolded **and** a matching story file is generated next to it.
 - **Create a story file** (`Button.stories.tsx`, or the singular `Button.story.tsx`) → the story is scaffolded into that exact file, and if the sibling component doesn't exist yet it is created and scaffolded too.
 
-Either way you end up with a working component + story pair. Only empty files are touched, so existing files are never overwritten. A `.stories.ts` with no component beside it is resolved to React, Solid, Vue, or Angular from your project's framework (Svelte stories use a `.svelte` file, so `.ts` isn't scaffolded for Svelte).
+Either way you end up with a working component + story pair. Only empty files are touched, so existing files are never overwritten. A `.stories.ts` with no component beside it is resolved to React, Preact, Solid, Vue, or Angular from your project's framework (Svelte stories use a `.svelte` file, so `.ts` isn't scaffolded for Svelte).
 
-React and Solid both author components in `.tsx`, so the extension alone can't tell them apart. `sb-deps` works it out from your project, so a Solid project gets Solid templates (`solid-js`, `storybook-solidjs-vite`) without being told; anything it does not read as Solid gets React ones. Set `tsxFramework: 'solid'` in your `sb-deps` config to say so outright — worth doing where your project's framework isn't obvious from its files.
+React, Preact and Solid all author components in `.tsx`, so the extension alone can't tell them apart. `sb-deps` works it out from your project, so a Solid project gets Solid templates (`solid-js`, `storybook-solidjs-vite`) and a Preact project gets Preact ones (`preact/hooks`, `@storybook/preact-vite`) without being told; anything it reads as neither gets React templates. Set `tsxFramework` in your `sb-deps` config to say so outright — worth doing where your project's framework isn't obvious from its files.
 
 ### What the scaffolded components assume
 
@@ -122,7 +161,7 @@ Each generated component is written the way its framework currently recommends,
 - **Svelte 5** — `$props()`, `$state()` and the `Snippet` type.
 - **Angular 17.1+** — `input()` signals.
 
-React and Solid add no version floor beyond what the addon itself needs. In a **Next.js** project the React component is written with a `'use client'` line at the top, because it holds state and the App Router renders on the server; you will not see that line in any other React project.
+React, Preact and Solid add no version floor beyond what the addon itself needs. In a **Next.js** project the React component is written with a `'use client'` line at the top, because it holds state and the App Router renders on the server; you will not see that line in any other React project.
 
 None of this affects the dependency graph or anything else `sb-deps` does — it only describes the starter code it writes, so on an older version replace the generated body with whatever your project uses. Or replace the template outright via [`scaffold`](#scaffold), which is what that option is for.
 
@@ -250,9 +289,9 @@ export default defineSbDepsConfig({
 
 ### `tsxFramework`
 
-Which flavor to scaffold for `.tsx` component and story files — `'react'` or `'solid'`. React and Solid both author components in `.tsx`, so the extension alone can't tell them apart; set this to `'solid'` in a Solid project and scaffolded `.tsx` files get Solid templates (`solid-js` `createSignal`/`mergeProps`, `storybook-solidjs-vite` story imports) instead of React. The setup wizard sets it for you when it detects a Solid project. Per-template overrides for Solid go under [`scaffold.solid`](#scaffold).
+Which flavor to scaffold for `.tsx` component and story files — `'react'`, `'solid'` or `'preact'`. All three author components in `.tsx`, so the extension alone can't tell them apart; set this to `'solid'` in a Solid project and scaffolded `.tsx` files get Solid templates (`solid-js` `createSignal`/`mergeProps`, `storybook-solidjs-vite` story imports), or to `'preact'` in a Preact project for Preact ones (`preact/hooks` `useState`, `@storybook/preact-vite` story imports), instead of React. The setup wizard sets it for you when it detects a Solid or Preact project. Per-template overrides go under the matching [`scaffold.solid` / `scaffold.preact`](#scaffold) key.
 
-**Default:** `'solid'` when `sb-deps` detects a Solid project, `'react'` otherwise — so a Solid project gets Solid templates without the key being set. Setting the key is worth it where the framework isn't obvious from your project's files.
+**Default:** `'solid'` when `sb-deps` detects a Solid project, `'preact'` when it detects a Preact one, `'react'` otherwise — so either gets its own templates without the key being set. Setting the key is worth it where the framework isn't obvious from your project's files.
 
 ```js
 // sb-deps.config.mjs
@@ -303,7 +342,7 @@ An entry that isn't a non-empty string makes the whole option invalid — the CL
 
 Override the templates used when `sb-deps` auto-scaffolds new component and story files. Each template function receives a context object with relevant variables and must return the full file content as a string.
 
-For `.tsx` files the override key follows [`tsxFramework`](#tsxframework): a React project reads `scaffold.react`, a Solid project reads `scaffold.solid` — overrides placed under the wrong key are silently ignored.
+For `.tsx` files the override key follows [`tsxFramework`](#tsxframework): a React project reads `scaffold.react`, a Solid project reads `scaffold.solid`, a Preact project reads `scaffold.preact` — overrides placed under the wrong key are silently ignored.
 
 ```js
 // sb-deps.config.mjs
@@ -349,6 +388,12 @@ export function ${componentName}({}: ${propsName}) {
 			/** Customize the generated .stories.tsx file */
 			story: ({ componentName, propsName, title, tags, base }) => '...',
 		},
+		preact: {
+			/** Customize the generated .tsx component file */
+			component: ({ componentName, propsName }) => '...',
+			/** Customize the generated .stories.tsx file */
+			story: ({ componentName, propsName, title, tags, base }) => '...',
+		},
 		angular: {
 			/** Customize the generated .component.ts file */
 			component: ({

package/dist/cli/sb-deps.cjs

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
 const require_fileNames = require('./scripts/fileNames.cjs');
+const require_cli_setup_util = require('./setup/util.cjs');
 const require_cli_setup_detect = require('./setup/detect.cjs');
 const require_cli_setup_index = require('./setup/index.cjs');
 let node_fs = require("node:fs");
@@ -100,10 +101,21 @@ async function loadSbDepsConfig() {
 function validateConfigChoice(fieldName, value, allowed, fallback) {
 	if (value === undefined) return fallback;
 	if (allowed.includes(value)) return value;
-	const choices = allowed.map((choice) => `'${choice}'`).join(" or ");
-	error(`${fieldName} "${value}" is invalid — must be ${choices}. Falling back to '${fallback}'.`);
+	error(`${fieldName} "${value}" is invalid — must be ${getChoicesPhrase(allowed)}. Falling back to '${fallback}'.`);
 	return fallback;
 }
+/**
+* The allowed values as they read in a sentence: `'a'`, `'a' or 'b'`, or
+* `'a', 'b' or 'c'`. Joining every pair with "or" reads as a stutter past two
+* values, which `tsxFramework` now has.
+*/
+function getChoicesPhrase(choices) {
+	const quotedChoices = choices.map((choice) => `'${choice}'`);
+	const lastChoice = quotedChoices.at(-1);
+	if (quotedChoices.length < 2 || !lastChoice) return quotedChoices.join("");
+	const earlierChoices = quotedChoices.slice(0, -1).join(", ");
+	return `${earlierChoices} or ${lastChoice}`;
+}
 let ANGULAR_SELECTOR_PREFIX = "app-";
 let SCAFFOLD_CONFIG = {};
 let SRC_DIR = "src";
@@ -117,23 +129,25 @@ function getProjectFramework() {
 }
 const IS_WIN = process.platform === "win32";
 /**
-* Locate the `dependency-cruiser` CLI binary in the user's `node_modules/.bin`.
-* Returns the absolute path with the right extension for the platform (`.cmd`
-* shim on Windows, bare name elsewhere). Falls back to `null` if it can't be
-* found — caller decides what to do.
+* Locate the JavaScript entry file of the `dependency-cruiser` CLI the
+* project installed (its `bin.depcruise`), found by walking `node_modules`
+* upwards from the project root so a hoisted workspace install is covered
+* too. Falls back to `null` if it can't be found — caller decides what to do.
 *
-* Going through the resolved binary lets us call `execFileSync` directly
-* (with `shell: false`) and pass each flag as its own array element — no
-* shell quoting, no `cmd.exe` metacharacter mangling (`^` is a `cmd.exe`
-* escape character, which would silently strip the `^` anchor from our
-* `--include-only` regex if we went through a shell). It also avoids spawning
-* `npx`, which on Windows is a `.cmd` shim that requires `shell: true` to
-* launch — which would reintroduce the very quoting problem we're trying to
-* avoid.
+* Running that file under the current `node` directly, rather than the
+* `node_modules/.bin/depcruise` shim, means the exact installed
+* `dependency-cruiser` runs with each flag as its own array element and no
+* shell on any platform. On Windows the shim is a `.cmd` file that needs
+* `shell: true`, and cmd.exe then mangles arguments (`^` is its escape
+* character, spaces split a path, `%NAME%` is expanded even inside quotes);
+* skipping the shim removes all of that.
 */
-function resolveDepCruiseBin() {
-	const bin = (0, node_path.join)(projectRoot, "node_modules", ".bin", IS_WIN ? "depcruise.cmd" : "depcruise");
-	return (0, node_fs.existsSync)(bin) ? bin : null;
+function resolveDepCruiseEntry() {
+	const found = require_cli_setup_util.findInstalledPackage(projectRoot, "dependency-cruiser");
+	const bin = found?.pkg.bin;
+	const relativeEntry = bin && typeof bin === "object" ? bin.depcruise : undefined;
+	if (!found || typeof relativeEntry !== "string") return null;
+	return (0, node_path.join)(found.dir, relativeEntry);
 }
 function runDepCruiseOnce() {
 	const escapedSrcDir = escapeForFolderRegex(SRC_DIR);
@@ -145,12 +159,12 @@ function runDepCruiseOnce() {
 		args.push("--no-config");
 	}
 	args.push("--include-only", includeOnly, "--output-type", "json");
-	const depcruiseBin = resolveDepCruiseBin();
-	if (!depcruiseBin) {
-		throw new Error("Could not locate `dependency-cruiser` in node_modules/.bin. Run the setup wizard (`sb-deps setup`) or install `dependency-cruiser` as a dev dependency.");
+	const depcruiseEntry = resolveDepCruiseEntry();
+	if (!depcruiseEntry) {
+		throw new Error("Could not locate `dependency-cruiser` in node_modules. Run the setup wizard (`sb-deps setup`) or install `dependency-cruiser` as a dev dependency.");
 	}
 	const start = Date.now();
-	const stdout = (0, node_child_process.execFileSync)(depcruiseBin, IS_WIN ? args.map(escapeForCmdExe) : args, {
+	const stdout = (0, node_child_process.execFileSync)(process.execPath, [depcruiseEntry, ...args], {
 		cwd: projectRoot,
 		stdio: [
 			"ignore",
@@ -158,7 +172,6 @@ function runDepCruiseOnce() {
 			"inherit"
 		],
 		encoding: "utf8",
-		shell: IS_WIN,
 		env: {
 			...process.env,
 			SB_DEPS_SRC_DIR: SRC_DIR
@@ -194,7 +207,7 @@ function postprocessOnce() {
 * exact, so a flag would loosen the half that must not loosen.
 */
 function escapeForFolderRegex(folderName) {
-	return IS_CASE_INSENSITIVE_PATH_FS ? escapeForRegexIgnoringCase(folderName) : escapeForRegex(folderName);
+	return IS_CASE_INSENSITIVE_PATH_FS ? escapeForRegexIgnoringCase(folderName) : require_cli_setup_util.escapeForRegex(folderName);
 }
 /**
 * Like `escapeForRegex`, but every letter becomes a pair matching both of its
@@ -204,24 +217,9 @@ function escapeForFolderRegex(folderName) {
 function escapeForRegexIgnoringCase(text) {
 	return text.split("").map((char) => {
 		const isLetter = /[a-z]/i.test(char);
-		return isLetter ? `[${char.toLowerCase()}${char.toUpperCase()}]` : escapeForRegex(char);
+		return isLetter ? `[${char.toLowerCase()}${char.toUpperCase()}]` : require_cli_setup_util.escapeForRegex(char);
 	}).join("");
 }
-/** Backslash-escape every character that has a special meaning in a regex, so the text only matches itself. */
-function escapeForRegex(text) {
-	return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
-/**
-* Escape an argument so that it survives `cmd.exe` parsing when `execFileSync`
-* is invoked with `shell: true` on Windows. `^` is the cmd.exe escape character,
-* even inside double quotes — doubling it makes cmd.exe pass through a literal
-* `^`. Other shell metacharacters (`&`, `|`, `<`, `>`, `(`, `)`, `%`, `!`) are
-* already wrapped in double quotes by Node's internal arg-quoter when
-* `shell: true`, so we only need to handle `^` ourselves.
-*/
-function escapeForCmdExe(arg) {
-	return arg.replace(/\^/g, "^^");
-}
 function buildOnce() {
 	try {
 		runDepCruiseOnce();
@@ -698,7 +696,7 @@ function makeTitleFromComponent(absCompPath, base) {
 }
 /**
 * The default `.tsx` component template, in the flavor `TSX_FRAMEWORK` selects.
-* React and Solid share the `.tsx` extension but need different code.
+* React, Solid and Preact share the `.tsx` extension but need different code.
 */
 function tsxComponentTemplate(flavor, componentName, propsName) {
 	if (flavor === "solid") {
@@ -730,12 +728,39 @@ export function ${componentName}(props: ${propsName}) {
 }
 `;
 	}
+	if (flavor === "preact") {
+		return reactLikeComponentTemplate({
+			componentName,
+			propsName,
+			imports: `import type { ComponentChildren } from 'preact'\nimport { useState } from 'preact/hooks'\n`,
+			childrenType: "ComponentChildren",
+			classAttribute: "class"
+		});
+	}
 	const clientDirective = getProjectFramework() === "nextjs-webpack" ? "'use client'\n\n" : "";
-	return `${clientDirective}import { useState, type ReactNode } from 'react'
-
+	return reactLikeComponentTemplate({
+		componentName,
+		propsName,
+		imports: `${clientDirective}import { useState, type ReactNode } from 'react'\n`,
+		childrenType: "ReactNode",
+		classAttribute: "className"
+	});
+}
+/**
+* The `.tsx` component template React and Preact both emit. The two frameworks
+* write the same component — destructured props with defaults, a counter, a
+* children slot — and differ only in the pieces named above, so the body is
+* written once here rather than twice.
+*
+* Solid is not written from this. Its component reads its props through
+* `mergeProps` instead of destructuring them, so it shares no body to speak of
+* and keeps its own template.
+*/
+function reactLikeComponentTemplate({ componentName, propsName, imports, childrenType, classAttribute }) {
+	return `${imports}
 export interface ${propsName} {
 	text?: string
-	children?: ReactNode
+	children?: ${childrenType}
 }
 
 export function ${componentName}({
@@ -745,7 +770,7 @@ export function ${componentName}({
 	const [count, setCount] = useState(0)
 
 	return (
-		<div className="${componentName}">
+		<div ${classAttribute}="${componentName}">
 			<p>{text}</p>
 			<button type="button" onClick={() => setCount(count + 1)}>
 				count: {count}
@@ -757,8 +782,8 @@ export function ${componentName}({
 `;
 }
 /**
-* The default `.tsx` story template. React and Solid stories are identical apart
-* from which package the Storybook types come from (see
+* The default `.tsx` story template. React, Solid and Preact stories are
+* identical apart from which package the Storybook types come from (see
 * `getTsxStoryTypesPackage`).
 *
 * The component is imported from `./${base}` (the actual filename), not
@@ -792,13 +817,14 @@ export const Primary: Story = {
 }
 /**
 * The package a scaffolded `.tsx` story imports its Storybook types from. Solid
-* has its own package. React's depends on how the project builds: a Next.js
-* project's Storybook types live in `@storybook/nextjs`, not in the Vite
+* and Preact each have their own. React's depends on how the project builds: a
+* Next.js project's Storybook types live in `@storybook/nextjs`, not in the Vite
 * package, so importing the Vite one there produces a story that doesn't
 * type-check.
 */
 function getTsxStoryTypesPackage(flavor) {
 	if (flavor === "solid") return "storybook-solidjs-vite";
+	if (flavor === "preact") return "@storybook/preact-vite";
 	if (getProjectFramework() === "nextjs-webpack") return "@storybook/nextjs";
 	return "@storybook/react-vite";
 }
@@ -1382,7 +1408,8 @@ function getFrameworkFamily(framework) {
 	switch (framework) {
 		case "react-vite":
 		case "nextjs-webpack":
-		case "solid-vite": return "react";
+		case "solid-vite":
+		case "preact-vite": return "react";
 		case "vue3-vite": return "vue";
 		case "sveltekit":
 		case "svelte-vite": return "svelte";
@@ -1446,9 +1473,10 @@ function ensureStoryFor(framework, absCompPath) {
 }
 /**
 * Work out the component a created story file belongs to, and which framework's
-* scaffolders to use. `.tsx` → React or Solid, `.svelte` → Svelte, `.ts` →
-* React, Solid, Vue, or Angular (disambiguated in `resolveTsStoryComponent`).
-* React and Solid share the `.tsx` route and are told apart by `tsxFramework`.
+* scaffolders to use. `.tsx` → React, Solid or Preact, `.svelte` → Svelte,
+* `.ts` → React, Solid, Preact, Vue, or Angular (disambiguated in
+* `resolveTsStoryComponent`). Every framework that writes `.tsx` shares that
+* route, and they are told apart by `tsxFramework`.
 * Any extension with no entry in `STORY_COMPONENT_RESOLVERS` returns `null` —
 * not something we scaffold.
 */
@@ -1541,11 +1569,11 @@ function getComponentForStoryByExtension(absStoryPath) {
 	return resolveComponent(storyBase, absStoryPath);
 }
 /**
-* A `.stories.ts` story can be React, Solid, Vue, or Angular — all of them use
-* `.ts` story files (the React and Solid scaffolded templates are JSX-free, so
-* they're valid as `.ts` even though both write stories as `.tsx` by
-* convention). Prefer an existing sibling component to decide
-* (`<base>.tsx` → React or Solid, told apart by `tsxFramework`;
+* A `.stories.ts` story can be React, Solid, Preact, Vue, or Angular — all of
+* them use `.ts` story files (the React, Solid and Preact scaffolded templates
+* are JSX-free, so they're valid as `.ts` even though all three write stories as
+* `.tsx` by convention). Prefer an existing sibling component to decide
+* (`<base>.tsx` → React, Solid or Preact, told apart by `tsxFramework`;
 * `<base>.vue` → Vue; `<base>.component.ts` → Angular); with none present,
 * fall back to the project's detected framework. Svelte is intentionally excluded: its story
 * template is `.svelte`-specific, so a `.ts` Svelte story can't be scaffolded
@@ -1920,7 +1948,11 @@ async function startStorybook() {
 		}
 	}
 	STORYBOOK_FILE_EXTENSION = validateConfigChoice("storybookFileExtension", cfg.storybookFileExtension, ["story", "stories"], "stories");
-	TSX_FRAMEWORK = validateConfigChoice("tsxFramework", cfg.tsxFramework, ["react", "solid"], getProjectFramework() === "solid-vite" ? "solid" : "react");
+	TSX_FRAMEWORK = validateConfigChoice("tsxFramework", cfg.tsxFramework, [
+		"react",
+		"solid",
+		"preact"
+	], require_cli_setup_detect.tsxFrameworkFromFramework(getProjectFramework()));
 	const configuredScaffoldIgnore = cfg.scaffoldIgnore;
 	const isScaffoldIgnoreUsable = Array.isArray(configuredScaffoldIgnore) && configuredScaffoldIgnore.every((pattern) => typeof pattern === "string" && pattern.trim() !== "");
 	if (configuredScaffoldIgnore === undefined) {