@stencil/cli 5.0.0-alpha.5 → 5.0.0-alpha.7

package/dist/index.mjs

@@ -1,7 +1,16 @@
 import { LOG_LEVELS } from "@stencil/core/compiler";
 import { buildError, catchError, hasError, isFunction, isOutputTargetDocs, isOutputTargetSsr, isOutputTargetWww, isString, normalizePath, readOnlyArrayHasStringMember, result, shouldIgnoreError, toCamelCase, validateComponentTag } from "@stencil/core/compiler/utils";
-import { isAbsolute, join, parse, relative } from "path";
+import { dirname, isAbsolute, join, relative } from "path";
+import * as p from "@clack/prompts";
+import { cancel, isCancel, select } from "@clack/prompts";
 import ts from "typescript";
+import { basename, dirname as dirname$1, join as join$1, parse, relative as relative$1, resolve } from "node:path";
+import { getComponentBoilerplate, getStyleBoilerplate, getTemplatePath, toPascalCase } from "@stencil/templates";
+import { mkdir, readFile, readdir, writeFile } from "node:fs/promises";
+import { pathToFileURL } from "node:url";
+import { existsSync } from "node:fs";
+import { installDependencies } from "nypm";
+import { isCI } from "std-env";
 import { start } from "@stencil/dev-server";
 //#region src/config-flags.ts
 /**
@@ -440,7 +449,7 @@ const findConfig = async (opts) => {
 	else configPath = normalizePath(configPath);
 	else configPath = rootDir;
 	const results = {
-		configPath,
+		configPath: null,
 		rootDir: normalizePath(cwd)
 	};
 	const stat = await sys.stat(configPath);
@@ -455,12 +464,15 @@ const findConfig = async (opts) => {
 	if (stat.isFile) {
 		results.configPath = configPath;
 		results.rootDir = sys.platformPath.dirname(configPath);
-	} else if (stat.isDirectory) for (const configName of ["stencil.config.ts", "stencil.config.js"]) {
-		const testConfigFilePath = sys.platformPath.join(configPath, configName);
-		if ((await sys.stat(testConfigFilePath)).isFile) {
-			results.configPath = testConfigFilePath;
-			results.rootDir = sys.platformPath.dirname(testConfigFilePath);
-			break;
+	} else if (stat.isDirectory) {
+		results.rootDir = configPath;
+		for (const configName of ["stencil.config.ts", "stencil.config.js"]) {
+			const testConfigFilePath = sys.platformPath.join(configPath, configName);
+			if ((await sys.stat(testConfigFilePath)).isFile) {
+				results.configPath = testConfigFilePath;
+				results.rootDir = sys.platformPath.dirname(testConfigFilePath);
+				break;
+			}
 		}
 	}
 	return result.ok(results);
@@ -853,6 +865,104 @@ const encapsulationApiRule = {
 	}
 };
 //#endregion
+//#region src/migrations/rules/external-runtime.ts
+/**
+* Migration rule for `externalRuntime` on `standalone` output targets.
+*
+* In Stencil v5, `externalRuntime` defaults to `false` (was `true` in v4).
+* Explicit `externalRuntime: false` is now redundant and can be removed.
+*/
+const externalRuntimeRule = {
+	id: "external-runtime",
+	name: "externalRuntime Default Change",
+	description: "Remove redundant 'externalRuntime: false' from standalone output targets - false is now the default",
+	fromVersion: "4.x",
+	toVersion: "5.x",
+	detect(sourceFile) {
+		const matches = [];
+		const visit = (node) => {
+			if (ts.isPropertyAssignment(node) && ts.isIdentifier(node.name) && node.name.text === "externalRuntime" && node.initializer.kind === ts.SyntaxKind.FalseKeyword) {
+				const parent = node.parent;
+				if (ts.isObjectLiteralExpression(parent)) {
+					if (parent.properties.some((p) => ts.isPropertyAssignment(p) && ts.isIdentifier(p.name) && p.name.text === "type" && ts.isStringLiteral(p.initializer) && p.initializer.text === "standalone")) {
+						const { line, character } = sourceFile.getLineAndCharacterOfPosition(node.getStart());
+						matches.push({
+							node,
+							message: "'externalRuntime: false' is now the default - this property can be removed",
+							line: line + 1,
+							column: character + 1
+						});
+					}
+				}
+			}
+			ts.forEachChild(node, visit);
+		};
+		visit(sourceFile);
+		return matches;
+	},
+	transform(sourceFile, matches) {
+		if (matches.length === 0) return sourceFile.getFullText();
+		let text = sourceFile.getFullText();
+		for (const match of [...matches].reverse()) {
+			const node = match.node;
+			const start = node.getFullStart();
+			const end = node.getEnd();
+			let removeEnd = end;
+			const trailingComma = text.slice(end).match(/^\s*,/);
+			if (trailingComma) removeEnd = end + trailingComma[0].length;
+			text = text.slice(0, start) + text.slice(removeEnd);
+		}
+		return text;
+	}
+};
+//#endregion
+//#region src/migrations/rules/extras-to-compat.ts
+/**
+* Migration rule: rename the top-level `extras` config key to `compat`.
+*
+* In v5, `extras` is replaced by `compat` (framework/bundler compatibility flags).
+*/
+const extrasToCompatRule = {
+	id: "extras-to-compat",
+	name: "Extras → Compat Rename",
+	description: "Rename top-level 'extras' config key to 'compat'",
+	fromVersion: "4.x",
+	toVersion: "5.x",
+	detect(sourceFile) {
+		const matches = [];
+		const visit = (node) => {
+			if (ts.isPropertyAssignment(node) && ts.isIdentifier(node.name)) {
+				if (node.name.text === "extras") {
+					const { line, character } = sourceFile.getLineAndCharacterOfPosition(node.getStart());
+					matches.push({
+						node,
+						message: "'extras' has been renamed to 'compat'",
+						line: line + 1,
+						column: character + 1
+					});
+				}
+			}
+			ts.forEachChild(node, visit);
+		};
+		visit(sourceFile);
+		return matches;
+	},
+	transform(sourceFile, matches) {
+		if (matches.length === 0) return sourceFile.getFullText();
+		let text = sourceFile.getFullText();
+		const sorted = [...matches].sort((a, b) => b.node.getStart() - a.node.getStart());
+		for (const match of sorted) {
+			const node = match.node;
+			if (node.name.text === "extras") {
+				const keyStart = node.name.getStart();
+				const keyEnd = node.name.getEnd();
+				text = text.slice(0, keyStart) + "compat" + text.slice(keyEnd);
+			}
+		}
+		return text;
+	}
+};
+//#endregion
 //#region src/migrations/rules/form-associated.ts
 /**
 * Migration rule for formAssociated → @AttachInternals.
@@ -1050,7 +1160,7 @@ const globalStyleInjectRule = {
 			}
 		}
 		if (end !== -1) text = text.slice(0, start) + text.slice(end);
-		text = cleanupEmptyExtras(text);
+		text = cleanupEmptyExtras$1(text);
 		return text;
 	}
 };
@@ -1073,7 +1183,7 @@ function findOutputTargetsEnd(sourceFile) {
 * @param text The source text to clean up
 * @returns The cleaned up text with empty extras removed
 */
-function cleanupEmptyExtras(text) {
+function cleanupEmptyExtras$1(text) {
 	return text.replace(/,?\s*extras\s*:\s*\{\s*\},?/g, "");
 }
 /**
@@ -1115,6 +1225,219 @@ function addGlobalStyleOutputTarget(text, sourceFile, injectValue) {
 	return text.slice(0, insertPos) + insertion + text.slice(insertPos);
 }
 //#endregion
+//#region src/migrations/rules/hash-file-names.ts
+/**
+* Migration rule for `hashFileNames` and `hashedFileNameLength` config options.
+*
+* In Stencil v5, these are no longer top-level config options. They belong on
+* the `loader-bundle` and `www` output targets, which are the only outputs that
+* are served directly in the browser and benefit from content-hash caching.
+*
+* This migration:
+* 1. Removes them from the top-level config
+* 2. Injects them into any `loader-bundle` and `www` output targets found in the same file
+*/
+const hashFileNamesRule = {
+	id: "hash-file-names",
+	name: "Hash File Names Config Move",
+	description: "Move hashFileNames and hashedFileNameLength from top-level config to loader-bundle and www output targets",
+	fromVersion: "4.x",
+	toVersion: "5.x",
+	detect(sourceFile) {
+		const matches = [];
+		const visit = (node) => {
+			if (ts.isPropertyAssignment(node) && ts.isIdentifier(node.name) && (node.name.text === "hashFileNames" || node.name.text === "hashedFileNameLength")) {
+				const parent = node.parent;
+				if (ts.isObjectLiteralExpression(parent)) {
+					if (!parent.properties.some((p) => ts.isPropertyAssignment(p) && ts.isIdentifier(p.name) && p.name.text === "type")) {
+						const { line, character } = sourceFile.getLineAndCharacterOfPosition(node.getStart());
+						matches.push({
+							node,
+							message: `'${node.name.text}' is no longer a top-level config option. Move it to your 'loader-bundle' and/or 'www' output targets.`,
+							line: line + 1,
+							column: character + 1
+						});
+					}
+				}
+			}
+			ts.forEachChild(node, visit);
+		};
+		visit(sourceFile);
+		return matches;
+	},
+	transform(sourceFile, matches) {
+		if (matches.length === 0) return sourceFile.getFullText();
+		const fullText = sourceFile.getFullText();
+		const propsToInject = matches.map((m) => {
+			const node = m.node;
+			return {
+				name: node.name.text,
+				value: node.initializer.getText(sourceFile)
+			};
+		});
+		const TARGET_TYPES = new Set(["loader-bundle", "www"]);
+		const insertionsByPos = /* @__PURE__ */ new Map();
+		const visit = (node) => {
+			if (ts.isObjectLiteralExpression(node)) {
+				if (node.properties.find((p) => ts.isPropertyAssignment(p) && ts.isIdentifier(p.name) && p.name.text === "type" && ts.isStringLiteral(p.initializer) && TARGET_TYPES.has(p.initializer.text))) {
+					const existingPropNames = new Set(node.properties.filter((p) => ts.isPropertyAssignment(p) && ts.isIdentifier(p.name)).map((p) => p.name.text));
+					const objStart = node.getStart(sourceFile);
+					const objLineStart = fullText.lastIndexOf("\n", objStart) + 1;
+					const propIndent = (fullText.slice(objLineStart, objStart).match(/^(\s*)/)?.[1] ?? "") + "  ";
+					const closingBracePos = node.getEnd() - 1;
+					const isMultiLine = fullText.slice(objStart, node.getEnd()).includes("\n");
+					let insertPos;
+					if (isMultiLine) insertPos = fullText.lastIndexOf("\n", closingBracePos - 1);
+					else {
+						insertPos = closingBracePos;
+						while (insertPos > 0 && fullText[insertPos - 1] === " ") insertPos--;
+					}
+					const existing = insertionsByPos.get(insertPos) ?? [];
+					for (const prop of propsToInject) if (!existingPropNames.has(prop.name)) existing.push(isMultiLine ? `\n${propIndent}${prop.name}: ${prop.value},` : `, ${prop.name}: ${prop.value}`);
+					if (existing.length > 0) insertionsByPos.set(insertPos, existing);
+				}
+			}
+			ts.forEachChild(node, visit);
+		};
+		visit(sourceFile);
+		const edits = [];
+		for (const match of matches) {
+			const node = match.node;
+			const start = node.getFullStart();
+			const end = node.getEnd();
+			let removeEnd = end;
+			const trailingComma = fullText.slice(end).match(/^\s*,/);
+			if (trailingComma) removeEnd = end + trailingComma[0].length;
+			edits.push({
+				start,
+				end: removeEnd,
+				replacement: ""
+			});
+		}
+		for (const [pos, insertions] of insertionsByPos) edits.push({
+			start: pos,
+			end: pos,
+			replacement: insertions.join("")
+		});
+		edits.sort((a, b) => b.start - a.start);
+		let text = fullText;
+		for (const edit of edits) text = text.slice(0, edit.start) + edit.replacement + text.slice(edit.end);
+		return text;
+	}
+};
+//#endregion
+//#region src/migrations/rules/light-dom-patches.ts
+/**
+* Migration rule for slot-fix extras → `lightDomPatches`.
+*
+* In v5, the individual slot-fix flags and `experimentalSlotFixes` umbrella are replaced
+* by a single `lightDomPatches` option which defaults to `true`.
+*
+* Migration mapping:
+* - `experimentalSlotFixes: true`  → remove (new default is `true`)
+* - `experimentalSlotFixes: false` → `lightDomPatches: false`
+* - Individual flags only          → `lightDomPatches: { <new names> }`
+*
+* Old → new individual key names:
+*   appendChildSlotFix      → domMutations
+*   cloneNodeFix            → cloneNode
+*   scopedSlotTextContentFix → textContent
+*   slotChildNodesFix       → childNodes
+*/
+const lightDomPatchesRule = {
+	id: "light-dom-patches",
+	name: "Light DOM Patches Migration",
+	description: "Migrate experimentalSlotFixes / individual slot-fix flags to lightDomPatches",
+	fromVersion: "4.x",
+	toVersion: "5.x",
+	detect(sourceFile) {
+		const matches = [];
+		const oldKeys = new Set([
+			"experimentalSlotFixes",
+			"appendChildSlotFix",
+			"cloneNodeFix",
+			"scopedSlotTextContentFix",
+			"slotChildNodesFix"
+		]);
+		const visit = (node) => {
+			if (ts.isPropertyAssignment(node) && ts.isIdentifier(node.name) && oldKeys.has(node.name.text)) {
+				const parent = node.parent;
+				if (ts.isObjectLiteralExpression(parent)) {
+					const grandparent = parent.parent;
+					if (ts.isPropertyAssignment(grandparent) && ts.isIdentifier(grandparent.name) && grandparent.name.text === "extras") {
+						const { line, character } = sourceFile.getLineAndCharacterOfPosition(node.getStart());
+						matches.push({
+							node,
+							message: `extras.${node.name.text} is removed. Use 'extras.lightDomPatches' instead.`,
+							line: line + 1,
+							column: character + 1
+						});
+					}
+				}
+			}
+			ts.forEachChild(node, visit);
+		};
+		visit(sourceFile);
+		return matches;
+	},
+	transform(sourceFile, matches) {
+		if (matches.length === 0) return sourceFile.getFullText();
+		const oldKeyMap = {};
+		for (const match of matches) {
+			const node = match.node;
+			const key = node.name.text;
+			const init = node.initializer;
+			oldKeyMap[key] = init.kind === ts.SyntaxKind.TrueKeyword ? true : init.kind === ts.SyntaxKind.FalseKeyword ? false : void 0;
+		}
+		const keyRename = {
+			appendChildSlotFix: "domMutations",
+			cloneNodeFix: "cloneNode",
+			scopedSlotTextContentFix: "textContent",
+			slotChildNodesFix: "childNodes"
+		};
+		const experimentalValue = oldKeyMap["experimentalSlotFixes"];
+		const hasIndividualKeys = matches.some((m) => {
+			return m.node.name.text !== "experimentalSlotFixes";
+		});
+		let replacement = null;
+		if (experimentalValue === true && !hasIndividualKeys) replacement = null;
+		else if (experimentalValue === false && !hasIndividualKeys) replacement = "lightDomPatches: false";
+		else if (experimentalValue === true && hasIndividualKeys) replacement = null;
+		else {
+			const parts = [];
+			for (const [oldKey, newKey] of Object.entries(keyRename)) {
+				const val = oldKeyMap[oldKey];
+				if (val === true) parts.push(`${newKey}: true`);
+				else if (val === false) parts.push(`${newKey}: false`);
+			}
+			if (parts.length > 0) replacement = `lightDomPatches: { ${parts.join(", ")} }`;
+		}
+		const sorted = [...matches].sort((a, b) => b.node.getStart() - a.node.getStart());
+		let text = sourceFile.getFullText();
+		let replacementInserted = false;
+		for (const match of sorted) {
+			const node = match.node;
+			let start = node.getStart();
+			let end = node.getEnd();
+			const trailingComma = text.slice(end).match(/^(\s*,)/);
+			if (trailingComma) end += trailingComma[1].length;
+			else {
+				const leadingComma = text.slice(0, start).match(/,\s*$/);
+				if (leadingComma) start -= leadingComma[0].length;
+			}
+			if (!replacementInserted && replacement !== null) {
+				text = text.slice(0, start) + replacement + text.slice(end);
+				replacementInserted = true;
+			} else text = text.slice(0, start) + text.slice(end);
+		}
+		text = cleanupEmptyExtras(text);
+		return text;
+	}
+};
+function cleanupEmptyExtras(text) {
+	return text.replace(/,?\s*extras\s*:\s*\{\s*\},?/g, "");
+}
+//#endregion
 //#region src/migrations/rules/output-target-renames.ts
 /**
 * Migration rule for output target renames in Stencil v5.
@@ -1123,9 +1446,9 @@ function addGlobalStyleOutputTarget(text, sourceFile, injectValue) {
 * - Renames `dist` → `loader-bundle`
 * - Renames `dist-custom-elements` → `standalone`
 * - Renames `dist-hydrate-script` → `ssr`
-* - Renames `dist-collection` → `stencil-rebundle`
+* - Renames `dist-collection` → `collection`
 * - Renames `dist-types` → `types`
-* - Extracts `collectionDir` from loader-bundle into separate `stencil-rebundle` output
+* - Extracts `collectionDir` from loader-bundle into separate `collection` output
 * - Extracts `typesDir` from loader-bundle into separate `types` output
 * - Renames `esmLoaderPath` → `loaderPath` (applies to all module formats, not just ESM)
 * - Removes `isPrimaryPackageOutputTarget` (no longer needed, package.json validation auto-detects)
@@ -1143,7 +1466,7 @@ const outputTargetRenamesRule = {
 			dist: "loader-bundle",
 			"dist-custom-elements": "standalone",
 			"dist-hydrate-script": "ssr",
-			"dist-collection": "stencil-rebundle",
+			"dist-collection": "collection",
 			"dist-types": "types"
 		};
 		const visit = (node) => {
@@ -1165,7 +1488,7 @@ const outputTargetRenamesRule = {
 					if (parent.properties.some((p) => ts.isPropertyAssignment(p) && ts.isIdentifier(p.name) && p.name.text === "type")) {
 						const { line, character } = sourceFile.getLineAndCharacterOfPosition(node.getStart());
 						const propName = node.name.text;
-						const newType = propName === "collectionDir" ? "stencil-rebundle" : "types";
+						const newType = propName === "collectionDir" ? "collection" : "types";
 						matches.push({
 							node,
 							message: `Property '${propName}' will be extracted to separate '${newType}' output target`,
@@ -1217,7 +1540,7 @@ const outputTargetRenamesRule = {
 			dist: "loader-bundle",
 			"dist-custom-elements": "standalone",
 			"dist-hydrate-script": "ssr",
-			"dist-collection": "stencil-rebundle",
+			"dist-collection": "collection",
 			"dist-types": "types"
 		};
 		const outputTargetsToExtract = [];
@@ -1335,7 +1658,7 @@ function addExtractedOutputTargets(text, sourceFile, toExtract) {
 	if (afterLastElement && afterLastElement[1]) insertPos += afterLastElement[0].length;
 	const newTargets = [];
 	for (const extracted of toExtract) {
-		if (extracted.collectionDir) newTargets.push(`{\n${indent}  type: 'stencil-rebundle',\n${indent}  dir: '${extracted.collectionDir}',\n${indent}}`);
+		if (extracted.collectionDir) newTargets.push(`{\n${indent}  type: 'collection',\n${indent}  dir: '${extracted.collectionDir}',\n${indent}}`);
 		if (extracted.typesDir) newTargets.push(`{\n${indent}  type: 'types',\n${indent}  dir: '${extracted.typesDir}',\n${indent}}`);
 	}
 	if (newTargets.length === 0) return text;
@@ -1344,6 +1667,225 @@ function addExtractedOutputTargets(text, sourceFile, toExtract) {
 	return text;
 }
 //#endregion
+//#region src/migrations/rules/rolldown-config.ts
+/**
+* NodeResolve fields that were valid in @rollup/plugin-node-resolve but don't exist
+* in rolldown's native resolver and should be removed.
+*/
+const REMOVED_NODE_RESOLVE_FIELDS = new Set([
+	"browser",
+	"modulePaths",
+	"dedupe",
+	"jail",
+	"modulesOnly",
+	"preferBuiltins",
+	"resolveOnly",
+	"rootDir",
+	"allowExportsFolderMapping"
+]);
+/** Fields renamed between @rollup/plugin-node-resolve and rolldown's native resolver. */
+const RENAMED_NODE_RESOLVE_FIELDS = {
+	exportConditions: "conditionNames",
+	moduleDirectories: "modules"
+};
+function isInsideNodeResolve(node) {
+	const parent = node.parent;
+	if (!ts.isObjectLiteralExpression(parent)) return false;
+	const grandParent = parent.parent;
+	return ts.isPropertyAssignment(grandParent) && ts.isIdentifier(grandParent.name) && grandParent.name.text === "nodeResolve";
+}
+/**
+* Migration rule for rolldown-related config changes in Stencil v5.
+*
+* Handles:
+* - `rollupConfig` → `rolldownConfig` (key rename + flatten `inputOptions`)
+* - `rolldownConfig: { inputOptions: { ... } }` → `rolldownConfig: { ... }` (flatten)
+* - `rollupPlugins` → `rolldownPlugins`
+* - `nodeResolve.exportConditions` → `nodeResolve.conditionNames`
+* - `nodeResolve.moduleDirectories` → `nodeResolve.modules`
+* - Removes unsupported `nodeResolve` fields (`browser`, `dedupe`, `jail`, etc.)
+*/
+const rolldownConfigRule = {
+	id: "rolldown-config",
+	name: "Rolldown Config Migration",
+	description: "Migrate rollup/rolldown config options to v5 rolldown-native API",
+	fromVersion: "4.x",
+	toVersion: "5.x",
+	detect(sourceFile) {
+		const matches = [];
+		const visit = (node) => {
+			if (ts.isPropertyAssignment(node) && ts.isIdentifier(node.name)) {
+				const name = node.name.text;
+				const { line, character } = sourceFile.getLineAndCharacterOfPosition(node.getStart());
+				if (name === "rollupPlugins") matches.push({
+					node,
+					message: `'rollupPlugins' renamed to 'rolldownPlugins'`,
+					line: line + 1,
+					column: character + 1
+				});
+				else if (name === "rollupConfig" || name === "rolldownConfig") {
+					const value = node.initializer;
+					if (name === "rollupConfig" || ts.isObjectLiteralExpression(value) && value.properties.some((p) => ts.isPropertyAssignment(p) && ts.isIdentifier(p.name) && p.name.text === "inputOptions")) matches.push({
+						node,
+						message: name === "rollupConfig" ? `'rollupConfig' renamed to 'rolldownConfig'; 'inputOptions' wrapper removed` : `'rolldownConfig.inputOptions' wrapper removed - options are now top-level`,
+						line: line + 1,
+						column: character + 1
+					});
+				} else if (name in RENAMED_NODE_RESOLVE_FIELDS && isInsideNodeResolve(node)) matches.push({
+					node,
+					message: `'nodeResolve.${name}' renamed to 'nodeResolve.${RENAMED_NODE_RESOLVE_FIELDS[name]}'`,
+					line: line + 1,
+					column: character + 1
+				});
+				else if (REMOVED_NODE_RESOLVE_FIELDS.has(name) && isInsideNodeResolve(node)) matches.push({
+					node,
+					message: `'nodeResolve.${name}' is not supported by rolldown's native resolver and will be removed`,
+					line: line + 1,
+					column: character + 1
+				});
+			}
+			ts.forEachChild(node, visit);
+		};
+		visit(sourceFile);
+		return matches;
+	},
+	transform(sourceFile, matches) {
+		if (matches.length === 0) return sourceFile.getFullText();
+		const edits = [];
+		const fullText = sourceFile.getFullText();
+		for (const match of matches) {
+			const node = match.node;
+			const name = node.name.text;
+			if (name === "rollupPlugins") {
+				const nameStart = node.name.getStart(sourceFile);
+				const nameEnd = node.name.getEnd();
+				edits.push({
+					start: nameStart,
+					end: nameEnd,
+					replacement: "rolldownPlugins"
+				});
+				continue;
+			}
+			if (name in RENAMED_NODE_RESOLVE_FIELDS && isInsideNodeResolve(node)) {
+				const nameStart = node.name.getStart(sourceFile);
+				const nameEnd = node.name.getEnd();
+				edits.push({
+					start: nameStart,
+					end: nameEnd,
+					replacement: RENAMED_NODE_RESOLVE_FIELDS[name]
+				});
+				continue;
+			}
+			if (REMOVED_NODE_RESOLVE_FIELDS.has(name) && isInsideNodeResolve(node)) {
+				const start = node.getFullStart();
+				const end = node.getEnd();
+				const trailingComma = fullText.slice(end).match(/^\s*,/);
+				edits.push({
+					start,
+					end: trailingComma ? end + trailingComma[0].length : end,
+					replacement: ""
+				});
+				continue;
+			}
+			if (name === "rollupConfig" || name === "rolldownConfig") {
+				const value = node.initializer;
+				if (!ts.isObjectLiteralExpression(value)) {
+					if (name === "rollupConfig") {
+						const nameStart = node.name.getStart(sourceFile);
+						edits.push({
+							start: nameStart,
+							end: node.name.getEnd(),
+							replacement: "rolldownConfig"
+						});
+					}
+					continue;
+				}
+				const inputOptionsProp = value.properties.find((p) => ts.isPropertyAssignment(p) && ts.isIdentifier(p.name) && p.name.text === "inputOptions");
+				if (!inputOptionsProp) {
+					if (name === "rollupConfig") {
+						const nameStart = node.name.getStart(sourceFile);
+						edits.push({
+							start: nameStart,
+							end: node.name.getEnd(),
+							replacement: "rolldownConfig"
+						});
+					}
+					continue;
+				}
+				const newValueText = inputOptionsProp.initializer.getText(sourceFile);
+				const keyStart = node.name.getStart(sourceFile);
+				edits.push({
+					start: keyStart,
+					end: node.getEnd(),
+					replacement: `rolldownConfig: ${newValueText}`
+				});
+			}
+		}
+		edits.sort((a, b) => b.start - a.start);
+		let text = fullText;
+		for (const edit of edits) text = text.slice(0, edit.start) + edit.replacement + text.slice(edit.end);
+		return text;
+	}
+};
+//#endregion
+//#region src/migrations/rules/service-worker-default.ts
+/**
+* Migration rule for `serviceWorker: null` / `serviceWorker: false` on `www` output targets.
+*
+* In Stencil v5, `serviceWorker` defaults to `null` (disabled). Explicit `null` or `false`
+* values on `www` output targets are now redundant and can be removed.
+*/
+const serviceWorkerDefaultRule = {
+	id: "service-worker-default",
+	name: "Service Worker Default Cleanup",
+	description: "Remove redundant 'serviceWorker: null' / 'serviceWorker: false' from www output targets - null is now the default",
+	fromVersion: "4.x",
+	toVersion: "5.x",
+	detect(sourceFile) {
+		const matches = [];
+		const visit = (node) => {
+			if (ts.isPropertyAssignment(node) && ts.isIdentifier(node.name) && node.name.text === "serviceWorker") {
+				const init = node.initializer;
+				if (init.kind === ts.SyntaxKind.NullKeyword || init.kind === ts.SyntaxKind.FalseKeyword) {
+					const parent = node.parent;
+					if (ts.isObjectLiteralExpression(parent)) {
+						if (parent.properties.some((p) => ts.isPropertyAssignment(p) && ts.isIdentifier(p.name) && p.name.text === "type" && ts.isStringLiteral(p.initializer) && p.initializer.text === "www")) {
+							const { line, character } = sourceFile.getLineAndCharacterOfPosition(node.getStart());
+							matches.push({
+								node,
+								message: `'serviceWorker: ${init.kind === ts.SyntaxKind.NullKeyword ? "null" : "false"}' is now the default on www output targets and can be removed`,
+								line: line + 1,
+								column: character + 1
+							});
+						}
+					}
+				}
+			}
+			ts.forEachChild(node, visit);
+		};
+		visit(sourceFile);
+		return matches;
+	},
+	transform(sourceFile, matches) {
+		if (matches.length === 0) return sourceFile.getFullText();
+		let text = sourceFile.getFullText();
+		for (const match of [...matches].reverse()) {
+			const node = match.node;
+			let start = node.getFullStart();
+			const end = node.getEnd();
+			let removeEnd = end;
+			const trailingComma = text.slice(end).match(/^\s*,/);
+			if (trailingComma) removeEnd = end + trailingComma[0].length;
+			else {
+				const leadingComma = text.slice(0, start).match(/,\s*$/);
+				if (leadingComma) start -= leadingComma[0].length;
+			}
+			text = text.slice(0, start) + text.slice(removeEnd);
+		}
+		return text;
+	}
+};
+//#endregion
 //#region src/migrations/index.ts
 /**
 * Build a map of local import names to their original names from @stencil/core.
@@ -1387,7 +1929,13 @@ const migrationRules = [
 	buildDistDocsRule,
 	outputTargetRenamesRule,
 	devModeRule,
-	globalStyleInjectRule
+	globalStyleInjectRule,
+	lightDomPatchesRule,
+	extrasToCompatRule,
+	externalRuntimeRule,
+	hashFileNamesRule,
+	rolldownConfigRule,
+	serviceWorkerDefaultRule
 ];
 /**
 * Get all migration rules for a specific version upgrade.
@@ -1576,6 +2124,23 @@ async function getTypeScriptFiles(config, sys, logger) {
 	const configFile = config.configPath;
 	if (configFile && (configFile.endsWith(".ts") || configFile.endsWith(".mts"))) {
 		if (!files.includes(configFile)) files.push(configFile);
+		const configContent = await sys.readFile(configFile);
+		if (configContent) {
+			const configSourceFile = ts.createSourceFile(configFile, configContent, ts.ScriptTarget.Latest, true);
+			const configDir = dirname(configFile);
+			for (const statement of configSourceFile.statements) if (ts.isImportDeclaration(statement) && ts.isStringLiteral(statement.moduleSpecifier)) {
+				const specifier = statement.moduleSpecifier.text;
+				if (!specifier.startsWith("./") && !specifier.startsWith("../")) continue;
+				const basePath = join(configDir, specifier);
+				const candidates = basePath.endsWith(".ts") || basePath.endsWith(".tsx") ? [basePath] : [`${basePath}.ts`, `${basePath}.tsx`];
+				for (const candidate of candidates) if (!candidate.endsWith(".d.ts") && !files.includes(candidate) && candidate.startsWith(config.rootDir)) {
+					if (await sys.readFile(candidate)) {
+						files.push(candidate);
+						break;
+					}
+				}
+			}
+		}
 	}
 	return files;
 }
@@ -1680,7 +2245,7 @@ function uuidv4() {
 * @param path the path on the file system to read and parse
 * @returns the parsed JSON
 */
-async function readJson(sys, path) {
+async function readJson$1(sys, path) {
 	const file = await sys.readFile(path);
 	return file ? JSON.parse(file) : null;
 }
@@ -1702,8 +2267,8 @@ function hasVerbose(flags) {
 }
 //#endregion
 //#region src/ionic-config.ts
-const isTest$1 = () => process.env.JEST_WORKER_ID !== void 0;
-const defaultConfig = (sys) => sys.resolvePath(`${sys.homeDir()}/.ionic/${isTest$1() ? "tmp-config.json" : "config.json"}`);
+const isTest = () => process.env.JEST_WORKER_ID !== void 0;
+const defaultConfig = (sys) => sys.resolvePath(`${sys.homeDir()}/.ionic/${isTest() ? "tmp-config.json" : "config.json"}`);
 const defaultConfigDirectory = (sys) => sys.resolvePath(`${sys.homeDir()}/.ionic`);
 /**
 * Reads an Ionic configuration file from disk, parses it, and performs any necessary corrections to it if certain
@@ -1712,7 +2277,7 @@ const defaultConfigDirectory = (sys) => sys.resolvePath(`${sys.homeDir()}/.ionic
 * @returns the config read from disk that has been potentially been updated
 */
 async function readConfig(sys) {
-	let config = await readJson(sys, defaultConfig(sys));
+	let config = await readJson$1(sys, defaultConfig(sys));
 	if (!config) {
 		config = {
 			"tokens.telemetry": uuidv4(),
@@ -1950,7 +2515,7 @@ async function getInstalledPackages(sys, flags) {
 	const yarn = isUsingYarn(sys);
 	try {
 		const appRootDir = sys.getCurrentDirectory();
-		const packageJson = await tryFn(readJson, sys, sys.resolvePath(appRootDir + "/package.json"));
+		const packageJson = await tryFn(readJson$1, sys, sys.resolvePath(appRootDir + "/package.json"));
 		if (!packageJson) return {
 			packages,
 			packagesNoVersions
@@ -1985,7 +2550,7 @@ async function getInstalledPackages(sys, flags) {
 */
 async function npmPackages(sys, ionicPackages) {
 	const appRootDir = sys.getCurrentDirectory();
-	const packageLockJson = await tryFn(readJson, sys, sys.resolvePath(appRootDir + "/package-lock.json"));
+	const packageLockJson = await tryFn(readJson$1, sys, sys.resolvePath(appRootDir + "/package-lock.json"));
 	return ionicPackages.map(([k, v]) => {
 		let version = packageLockJson?.dependencies[k]?.version ?? packageLockJson?.devDependencies[k]?.version ?? v;
 		version = version.includes("file:") ? sanitizeDeclaredVersion(v) : version;
@@ -2207,31 +2772,28 @@ async function promptForMigration(config, migrationResult, context) {
 	logger.info("");
 	if (context === "pre-build") logger.info("Your config contains deprecated options that must be migrated before building.");
 	else logger.info("These migrations may help resolve the build errors above.");
-	const prompt = (await import("prompts")).default;
-	const response = await prompt({
-		name: "action",
-		type: "select",
+	const action = await select({
 		message: "What would you like to do?",
-		choices: [
+		options: [
 			{
-				title: "Run migration",
 				value: "run",
-				description: "Apply migrations and re-run build"
+				label: "Run migration",
+				hint: "Apply migrations and re-run build"
 			},
 			{
-				title: "Dry run",
 				value: "dry-run",
-				description: "Preview changes without modifying files"
+				label: "Dry run",
+				hint: "Preview changes without modifying files"
 			},
 			{
-				title: "Exit",
 				value: "exit",
-				description: "Exit without making changes"
+				label: "Exit",
+				hint: "Exit without making changes"
 			}
 		]
 	});
-	if (response.action === void 0) return "exit";
-	return response.action;
+	if (isCancel(action)) return "exit";
+	return action;
 }
 //#endregion
 //#region src/task-docs.ts
@@ -2245,277 +2807,197 @@ const taskDocs = async (coreCompiler, config) => {
 	await compiler.destroy();
 };
 //#endregion
-//#region src/task-generate.ts
+//#region src/wizard/clack.ts
 /**
-* Task to generate component boilerplate and write it to disk. This task can
-* cause the program to exit with an error under various circumstances, such as
-* being called in an inappropriate place, being asked to overwrite files that
-* already exist, etc.
+* Exits cleanly if the user cancelled a prompt (Ctrl+C).
+* Narrows the type from `T | symbol` to `T` for callers.
 *
-* @param config the user-supplied config, which we need here to access `.sys`.
-* @param flags the CLI flags (owned by CLI, not part of core config)
-* @returns a void promise
+* @param value - Return value from a `@clack/prompts` prompt call.
 */
+function cancelIfAborted(value) {
+	if (isCancel(value)) {
+		cancel("Cancelled.");
+		process.exit(0);
+	}
+}
+//#endregion
+//#region src/wizard/discover.ts
+function toStringRecord(val) {
+	return val !== null && typeof val === "object" ? val : {};
+}
+async function readJson(filePath) {
+	try {
+		return JSON.parse(await readFile(filePath, "utf8"));
+	} catch {
+		return null;
+	}
+}
+async function loadOne(rootDir, packageName, loader) {
+	const wizardEntry = ((await readJson(join$1(rootDir, "node_modules", packageName, "package.json")))?.stencil)?.wizard;
+	if (!wizardEntry) return null;
+	const wizardPath = join$1(rootDir, "node_modules", packageName, wizardEntry);
+	let mod;
+	try {
+		mod = await loader(pathToFileURL(wizardPath).href);
+	} catch {
+		console.warn(`[stencil] ${packageName} declares stencil.wizard but the module failed to load: ${wizardPath}`);
+		return null;
+	}
+	const plugin = mod.wizard;
+	if (!plugin || typeof plugin !== "object") {
+		console.warn(`[stencil] ${packageName} declares stencil.wizard but does not export a 'wizard' object`);
+		return null;
+	}
+	return {
+		packageName,
+		plugin
+	};
+}
+/**
+* Scans the project's declared dependencies for packages that expose a
+* `stencil.wizard` entry in their `package.json` and dynamically imports
+* each matching module.
+*
+* @param rootDir - Absolute path to the project root (where `package.json` lives).
+* @param loader  - Module loader; injectable for testing. Defaults to `import()`.
+* @returns Array of successfully loaded plugins, in dependency declaration order.
+*/
+async function discoverPlugins(rootDir, loader = (url) => import(url)) {
+	const pkg = await readJson(join$1(rootDir, "package.json"));
+	if (!pkg) return [];
+	const depNames = [...new Set([...Object.keys(toStringRecord(pkg.dependencies)), ...Object.keys(toStringRecord(pkg.devDependencies))])];
+	const plugins = (await Promise.allSettled(depNames.map((name) => loadOne(rootDir, name, loader)))).filter((r) => r.status === "fulfilled" && r.value !== null).map((r) => r.value);
+	const devPath = process.env.STENCIL_WIZARD_DEV;
+	if (devPath) {
+		const devPlugin = await loadDevPlugin(resolve(rootDir, devPath), loader);
+		if (devPlugin) plugins.unshift(devPlugin);
+	}
+	return plugins;
+}
+async function findDevPackageName(wizardPath) {
+	const dir = dirname$1(wizardPath);
+	for (const candidate of [dir, resolve(dir, "..")]) {
+		const pkg = await readJson(join$1(candidate, "package.json"));
+		if (typeof pkg?.name === "string") return pkg.name;
+	}
+	return basename(dir);
+}
+async function loadDevPlugin(wizardPath, loader) {
+	const packageName = await findDevPackageName(wizardPath);
+	let mod;
+	try {
+		mod = await loader(pathToFileURL(wizardPath).href);
+	} catch {
+		console.warn(`[stencil] STENCIL_WIZARD_DEV: failed to load ${wizardPath}`);
+		return null;
+	}
+	const plugin = mod.wizard;
+	if (!plugin || typeof plugin !== "object") {
+		console.warn(`[stencil] STENCIL_WIZARD_DEV: ${wizardPath} does not export a 'wizard' object`);
+		return null;
+	}
+	return {
+		packageName,
+		plugin
+	};
+}
+//#endregion
+//#region src/task-generate.ts
 const taskGenerate = async (config, flags) => {
 	if (!config.configPath) {
 		config.logger.error("Please run this command in your root directory (i. e. the one containing stencil.config.ts).");
 		return config.sys.exit(1);
 	}
-	const absoluteSrcDir = config.srcDir;
-	if (!absoluteSrcDir) {
+	const srcDir = config.srcDir;
+	if (!srcDir) {
 		config.logger.error(`Stencil's srcDir was not specified.`);
 		return config.sys.exit(1);
 	}
-	const { prompt } = await import("prompts");
-	const input = flags.unknownArgs.find((arg) => !arg.startsWith("-")) || (await prompt({
-		name: "tagName",
-		type: "text",
-		message: "Component tag name (dash-case):"
-	})).tagName;
-	if (void 0 === input) return;
+	const generateContribs = (await discoverPlugins(config.rootDir)).flatMap((d) => d.plugin.generate ? [d.plugin.generate] : []);
+	p.intro("stencil generate");
+	const rawInput = flags.unknownArgs.find((arg) => !arg.startsWith("-"));
+	let input;
+	if (rawInput) input = rawInput;
+	else {
+		const tagName = await p.text({
+			message: "Component tag name (dash-case):",
+			validate: (value) => validateComponentTag(value ?? "")
+		});
+		cancelIfAborted(tagName);
+		input = tagName;
+	}
 	const { dir, base: componentName } = parse(input);
 	const tagError = validateComponentTag(componentName);
 	if (tagError) {
 		config.logger.error(tagError);
 		return config.sys.exit(1);
 	}
-	let cssExtension = "css";
-	if (config.plugins?.find((plugin) => plugin.name === "sass")) cssExtension = await chooseSassExtension();
-	else if (config.plugins?.find((plugin) => plugin.name === "less")) cssExtension = "less";
-	const filesToGenerateExt = await chooseFilesToGenerate(cssExtension);
-	if (!filesToGenerateExt) return;
-	const extensionsToGenerate = ["tsx", ...filesToGenerateExt];
-	const testFolder = extensionsToGenerate.some(isTest) ? "test" : "";
-	const outDir = join(absoluteSrcDir, "components", dir, componentName);
-	await config.sys.createDir(normalizePath(join(outDir, testFolder)), { recursive: true });
-	const filesToGenerate = extensionsToGenerate.map((extension) => ({
-		extension,
-		path: getFilepathForFile(outDir, componentName, extension)
-	}));
-	await checkForOverwrite(filesToGenerate, config);
-	const writtenFiles = await Promise.all(filesToGenerate.map((file) => getBoilerplateAndWriteFile(config, componentName, extensionsToGenerate.includes("css") || extensionsToGenerate.includes("sass") || extensionsToGenerate.includes("scss") || extensionsToGenerate.includes("less"), file, cssExtension))).catch((error) => config.logger.error(error));
-	if (!writtenFiles) return config.sys.exit(1);
-	console.log();
-	console.log(`${config.logger.gray("$")} stencil generate ${input}`);
-	console.log();
-	console.log(config.logger.bold("The following files have been generated:"));
-	const absoluteRootDir = config.rootDir;
-	writtenFiles.map((file) => console.log(`  - ${relative(absoluteRootDir, file)}`));
-};
-/**
-* Show a checkbox prompt to select the files to be generated.
-*
-* @param cssExtension the extension of the CSS file to be generated
-* @returns a read-only array of `GeneratableExtension`, the extensions that the user has decided
-* to generate
-*/
-const chooseFilesToGenerate = async (cssExtension) => {
-	const { prompt } = await import("prompts");
-	return (await prompt({
-		name: "filesToGenerate",
-		type: "multiselect",
-		message: "Which additional files do you want to generate?",
-		choices: [
-			{
-				value: cssExtension,
-				title: `Stylesheet (.${cssExtension})`,
-				selected: true
-			},
-			{
-				value: "spec.tsx",
-				title: "Spec Test  (.spec.tsx)",
-				selected: true
-			},
-			{
-				value: "e2e.ts",
-				title: "E2E Test (.e2e.ts)",
-				selected: true
-			}
-		]
-	})).filesToGenerate;
-};
-const chooseSassExtension = async () => {
-	const { prompt } = await import("prompts");
-	return (await prompt({
-		name: "sassFormat",
-		type: "select",
-		message: "Which Sass format would you like to use? (More info: https://sass-lang.com/documentation/syntax/#the-indented-syntax)",
-		choices: [{
-			value: "sass",
-			title: `*.sass Format`,
-			selected: true
-		}, {
-			value: "scss",
-			title: "*.scss Format"
-		}]
-	})).sassFormat;
-};
-/**
-* Get a filepath for a file we want to generate!
-*
-* The filepath for a given file depends on the path, the user-supplied
-* component name, the extension, and whether we're inside of a test directory.
-*
-* @param filePath      path to where we're going to generate the component
-* @param componentName the user-supplied name for the generated component
-* @param extension     the file extension
-* @returns the full filepath to the component (with a possible `test` directory
-* added)
-*/
-const getFilepathForFile = (filePath, componentName, extension) => isTest(extension) ? normalizePath(join(filePath, "test", `${componentName}.${extension}`)) : normalizePath(join(filePath, `${componentName}.${extension}`));
-/**
-* Get the boilerplate for a file and write it to disk
-*
-* @param config        the current config, needed for file operations
-* @param componentName the component name (user-supplied)
-* @param withCss       are we generating CSS?
-* @param file          the file we want to write
-* @param styleExtension extension used for styles
-* @returns a `Promise<string>` which holds the full filepath we've written to,
-* used to print out a little summary of our activity to the user.
-*/
-const getBoilerplateAndWriteFile = async (config, componentName, withCss, file, styleExtension) => {
-	const boilerplate = getBoilerplateByExtension(componentName, file.extension, withCss, styleExtension);
-	await config.sys.writeFile(normalizePath(file.path), boilerplate);
-	return file.path;
-};
-/**
-* Check to see if any of the files we plan to write already exist and would
-* therefore be overwritten if we proceed, because we'd like to not overwrite
-* people's code!
-*
-* This function will check all the filepaths and if it finds any files log an
-* error and exit with an error code. If it doesn't find anything it will just
-* peacefully return `Promise<void>`.
-*
-* @param files  the files we want to check
-* @param config the Config object, used here to get access to `sys.readFile`
-*/
-const checkForOverwrite = async (files, config) => {
-	const alreadyPresent = [];
-	await Promise.all(files.map(async ({ path }) => {
-		if (await config.sys.readFile(path) !== void 0) alreadyPresent.push(path);
-	}));
-	if (alreadyPresent.length > 0) {
-		config.logger.error("Generating code would overwrite the following files:", ...alreadyPresent.map((path) => "	" + normalizePath(path)));
-		await config.sys.exit(1);
+	const styleOptions = [
+		{
+			value: "css",
+			label: "CSS (.css)"
+		},
+		...[...new Set(generateContribs.flatMap((c) => c.styleExtensions ?? []))].map((ext) => ({
+			value: ext,
+			label: `${ext.toUpperCase()} (.${ext})`
+		})),
+		{
+			value: "",
+			label: "None"
+		}
+	];
+	const stylePick = await p.select({
+		message: "Stylesheet format:",
+		options: styleOptions
+	});
+	cancelIfAborted(stylePick);
+	const styleExtension = stylePick || void 0;
+	const allFileTemplates = generateContribs.flatMap((c) => c.fileTemplates ?? []);
+	let pickedExtensions = [];
+	if (allFileTemplates.length > 0) {
+		const filePick = await p.multiselect({
+			message: "Additional files:",
+			options: allFileTemplates.map((ft) => ({
+				value: ft.extension,
+				label: ft.label
+			})),
+			initialValues: allFileTemplates.filter((ft) => ft.selectedByDefault !== false).map((ft) => ft.extension),
+			required: false
+		});
+		cancelIfAborted(filePick);
+		pickedExtensions = filePick;
 	}
-};
-/**
-* Check if an extension is for a test
-*
-* @param extension the extension we want to check
-* @returns a boolean indicating whether or not its a test
-*/
-const isTest = (extension) => {
-	return extension === "e2e.ts" || extension === "spec.tsx";
-};
-/**
-* Get the boilerplate for a file by its extension.
-*
-* @param tagName the name of the component we're generating
-* @param extension the file extension we want boilerplate for (.css, tsx, etc)
-* @param withCss a boolean indicating whether we're generating a CSS file
-* @param styleExtension extension used for styles
-* @returns a string container the file boilerplate for the supplied extension
-*/
-const getBoilerplateByExtension = (tagName, extension, withCss, styleExtension) => {
-	switch (extension) {
-		case "tsx": return getComponentBoilerplate(tagName, withCss, styleExtension);
-		case "css":
-		case "less":
-		case "sass":
-		case "scss": return getStyleUrlBoilerplate(styleExtension);
-		case "spec.tsx": return getSpecTestBoilerplate(tagName);
-		case "e2e.ts": return getE2eTestBoilerplate(tagName);
-		default: throw new Error(`Unkown extension "${extension}".`);
+	const outDir = join$1(srcDir, "components", dir, componentName);
+	const className = toPascalCase(componentName);
+	const filesToWrite = [];
+	filesToWrite.push({
+		absPath: normalizePath(join$1(outDir, `${componentName}.tsx`)),
+		content: getComponentBoilerplate(componentName, styleExtension)
+	});
+	if (styleExtension) filesToWrite.push({
+		absPath: normalizePath(join$1(outDir, `${componentName}.${styleExtension}`)),
+		content: getStyleBoilerplate(styleExtension)
+	});
+	for (const ext of pickedExtensions) {
+		const tmpl = allFileTemplates.find((ft) => ft.extension === ext);
+		const absPath = normalizePath(join$1(outDir, tmpl.subdirectory ?? "", `${componentName}.${ext}`));
+		filesToWrite.push({
+			absPath,
+			content: tmpl.template(componentName, className)
+		});
 	}
+	const wouldOverwrite = (await Promise.all(filesToWrite.map(async ({ absPath }) => await config.sys.readFile(absPath) !== void 0 ? absPath : null))).filter((f) => f !== null);
+	if (wouldOverwrite.length > 0) {
+		config.logger.error("Generating code would overwrite the following files:", ...wouldOverwrite.map((path) => "	" + normalizePath(path)));
+		await config.sys.exit(1);
+		return;
+	}
+	const dirs = [...new Set(filesToWrite.map(({ absPath }) => normalizePath(join$1(absPath, ".."))))];
+	await Promise.all(dirs.map((d) => config.sys.createDir(d, { recursive: true })));
+	await Promise.all(filesToWrite.map(({ absPath, content }) => config.sys.writeFile(absPath, content)));
+	p.note(filesToWrite.map(({ absPath }) => relative$1(config.rootDir, absPath)).join("\n"), "Generated");
+	p.outro(`stencil generate ${input}`);
 };
-/**
-* Get the boilerplate for a file containing the definition of a component
-* @param tagName the name of the tag to give the component
-* @param hasStyle designates if the component has an external stylesheet or not
-* @param styleExtension extension used for styles
-* @returns the contents of a file that defines a component
-*/
-const getComponentBoilerplate = (tagName, hasStyle, styleExtension) => {
-	const decorator = [`{`];
-	decorator.push(`  tag: '${tagName}',`);
-	if (hasStyle) decorator.push(`  styleUrl: '${tagName}.${styleExtension}',`);
-	decorator.push(`  shadow: true,`);
-	decorator.push(`}`);
-	return `import { Component, Host, h } from '@stencil/core';
-
-@Component(${decorator.join("\n")})
-export class ${toPascalCase(tagName)} {
-  render() {
-    return (
-      <Host>
-        <slot></slot>
-      </Host>
-    );
-  }
-}
-`;
-};
-/**
-* Get the boilerplate for style for a generated component
-* @param ext extension used for styles
-* @returns a boilerplate CSS block
-*/
-const getStyleUrlBoilerplate = (ext) => ext === "sass" ? `:host
-  display: block
-` : `:host {
-  display: block;
-}
-`;
-/**
-* Get the boilerplate for a file containing a spec (unit) test for a component
-* @param tagName the name of the tag associated with the component under test
-* @returns the contents of a file that unit tests a component
-*/
-const getSpecTestBoilerplate = (tagName) => `import { newSpecPage } from '@stencil/core/testing';
-import { ${toPascalCase(tagName)} } from '../${tagName}';
-
-describe('${tagName}', () => {
-  it('renders', async () => {
-    const page = await newSpecPage({
-      components: [${toPascalCase(tagName)}],
-      html: \`<${tagName}></${tagName}>\`,
-    });
-    expect(page.root).toEqualHtml(\`
-      <${tagName}>
-        <mock:shadow-root>
-          <slot></slot>
-        </mock:shadow-root>
-      </${tagName}>
-    \`);
-  });
-});
-`;
-/**
-* Get the boilerplate for a file containing an end-to-end (E2E) test for a component
-* @param tagName the name of the tag associated with the component under test
-* @returns the contents of a file that E2E tests a component
-*/
-const getE2eTestBoilerplate = (tagName) => `import { newE2EPage } from '@stencil/core/testing';
-
-describe('${tagName}', () => {
-  it('renders', async () => {
-    const page = await newE2EPage();
-    await page.setContent('<${tagName}></${tagName}>');
-
-    const element = await page.find('${tagName}');
-    expect(element).toHaveClass('hydrated');
-  });
-});
-`;
-/**
-* Convert a dash case string to pascal case.
-* @param str the string to convert
-* @returns the converted input as pascal case
-*/
-const toPascalCase = (str) => str.split("-").reduce((res, part) => res + part[0].toUpperCase() + part.slice(1), "");
 //#endregion
 //#region src/task-telemetry.ts
 /**
@@ -2629,6 +3111,317 @@ const taskInfo = (coreCompiler, sys, logger) => {
 	console.log(``);
 };
 //#endregion
+//#region src/wizard/init/apply.ts
+/**
+* Copy component-starter template into rootDir, interpolating project name and namespace.
+*
+* @param rootDir - Destination directory (typically `process.cwd()`).
+* @param projectName - Value to substitute for `{{PROJECT_NAME}}` placeholders.
+* @param namespace - Value to substitute for `{{NAMESPACE}}` placeholders.
+*/
+async function copyTemplate(rootDir, projectName, namespace) {
+	const templateDir = getTemplatePath("component-starter");
+	const entries = await readdir(templateDir, {
+		recursive: true,
+		withFileTypes: true
+	});
+	for (const entry of entries) {
+		if (!entry.isFile()) continue;
+		const srcPath = join$1(entry.parentPath, entry.name);
+		const destPath = join$1(rootDir, relative$1(templateDir, srcPath));
+		await mkdir(dirname$1(destPath), { recursive: true });
+		await writeFile(destPath, (await readFile(srcPath, "utf8")).replace(/\{\{PROJECT_NAME\}\}/g, projectName).replace(/\{\{NAMESPACE\}\}/g, namespace), "utf8");
+	}
+}
+/**
+* Inject integration package names into the project's package.json devDependencies.
+* Versions are set to 'latest' so the subsequent install resolves them from the registry.
+*
+* @param rootDir - Absolute path to the project root.
+* @param integrations - npm package names to add as devDependencies.
+*/
+async function patchPackageJson(rootDir, integrations) {
+	if (integrations.length === 0) return;
+	const pkgPath = join$1(rootDir, "package.json");
+	const pkg = JSON.parse(await readFile(pkgPath, "utf8"));
+	const devDeps = pkg.devDependencies ?? {};
+	for (const name of integrations) devDeps[name] = "latest";
+	pkg.devDependencies = devDeps;
+	await writeFile(pkgPath, JSON.stringify(pkg, null, 2) + "\n", "utf8");
+}
+//#endregion
+//#region src/wizard/init/steps.ts
+/** Well-known integrations the CLI can offer before any packages are installed. */
+const KNOWN_INTEGRATIONS = [
+	{
+		package: "@stencil/vitest",
+		displayName: "Vitest",
+		description: "Unit / Spec / Integration / Browser testing",
+		group: "Testing"
+	},
+	{
+		package: "@stencil/playwright",
+		displayName: "Playwright",
+		description: "E2E testing",
+		group: "Testing"
+	},
+	{
+		package: "@stencil/sass",
+		displayName: "Sass",
+		description: "Sass/SCSS styles",
+		group: "Styling"
+	},
+	{
+		package: "@stencil/eslint-plugin",
+		displayName: "ESLint Plugin",
+		description: "Stencil-aware lint rules (ESLint, oxlint, Biome)",
+		group: "Linting"
+	},
+	{
+		package: "@stencil/storybook-plugin",
+		displayName: "Storybook",
+		description: "Component development & documentation",
+		group: "Tooling"
+	},
+	{
+		package: "@stencil/types-output-target",
+		displayName: "Types",
+		description: "TypeScript types for React, Vue, Solid, Svelte, Preact",
+		group: "Framework integrations"
+	},
+	{
+		package: "@stencil/react-output-target",
+		displayName: "React",
+		description: "React component wrappers",
+		group: "Framework integrations"
+	},
+	{
+		package: "@stencil/angular-output-target",
+		displayName: "Angular",
+		description: "Angular component wrappers",
+		group: "Framework integrations"
+	},
+	{
+		package: "@stencil/vue-output-target",
+		displayName: "Vue",
+		description: "Vue component wrappers",
+		group: "Framework integrations"
+	}
+];
+async function promptProjectName() {
+	const name = await p.text({
+		message: "Project name:",
+		defaultValue: "my-stencil-library",
+		validate: (v) => {
+			if (!v?.trim()) return "Project name is required";
+		}
+	});
+	cancelIfAborted(name);
+	return name;
+}
+function buildGroupedOptions(integrations) {
+	const groups = {};
+	for (const i of integrations) (groups[i.group] ??= []).push({
+		value: i.package,
+		label: i.displayName,
+		hint: i.description
+	});
+	return groups;
+}
+async function promptIntegrations() {
+	const picks = await p.groupMultiselect({
+		message: "Add integrations (optional):",
+		options: buildGroupedOptions(KNOWN_INTEGRATIONS),
+		required: false
+	});
+	cancelIfAborted(picks);
+	return KNOWN_INTEGRATIONS.filter((i) => picks.includes(i.package));
+}
+/**
+* Prompt for actions on an existing project: install new integrations and/or
+* run init wizards for already-installed packages with wizard contributions.
+*
+* @param installable - KNOWN_INTEGRATIONS not yet present in the project.
+* @param configurable - Already-installed plugins that declare an `init` contribution.
+* @returns Selected integrations to install and plugins to configure.
+*/
+async function promptAddCapabilities(installable, configurable) {
+	const options = {};
+	if (installable.length > 0) options["Install new integrations"] = installable.map((i) => ({
+		value: `install:${i.package}`,
+		label: i.displayName,
+		hint: i.description
+	}));
+	if (configurable.length > 0) options["Configure existing integrations"] = configurable.map((d) => ({
+		value: `configure:${d.packageName}`,
+		label: d.plugin.init.displayName,
+		hint: d.plugin.init.description
+	}));
+	const picks = await p.groupMultiselect({
+		message: "What would you like to do?",
+		options,
+		required: false
+	});
+	cancelIfAborted(picks);
+	const pickedSet = new Set(picks);
+	return {
+		toInstall: installable.filter((i) => pickedSet.has(`install:${i.package}`)),
+		toConfigure: configurable.filter((d) => pickedSet.has(`configure:${d.packageName}`))
+	};
+}
+//#endregion
+//#region src/wizard/splash.ts
+const noColor = !process.stdout.isTTY || "NO_COLOR" in process.env;
+const RESET = noColor ? "" : "\x1B[0m";
+const BG = noColor ? "" : "\x1B[38;2;60;44;255m";
+const RAW = `\
+              .............              
+           ...................          
+        .........................        
+     ..............................     
+    .................................    
+   ..............████████████.........   
+  .............████████████............  
+ ............████████████............... 
+...........***************...............
+.........████████████████████████████....
+.......████████████████████████████......
+.....████████████████████████████........
+...████████████████████████████..........
+...............**************............
+ ..............████████████.............
+ ............████████████.............. 
+  .........████████████...............  
+    .................................   
+     ..............................     
+       ..........................       
+         ......................         
+            ................`;
+function colorize(raw) {
+	if (noColor) return raw;
+	let out = "";
+	let style = "";
+	for (const ch of raw) {
+		const next = ".*".includes(ch) ? BG : "";
+		if (next !== style) {
+			if (style) out += RESET;
+			if (next) out += next;
+			style = next;
+		}
+		out += ch;
+	}
+	return style ? out + RESET : out;
+}
+const SPLASH = colorize(RAW);
+function printSplash() {
+	if (!process.stdout.isTTY) return;
+	process.stdout.write("\n" + SPLASH + "\n\n");
+}
+//#endregion
+//#region src/task-init.ts
+async function taskInit() {
+	const cwd = process.cwd();
+	const isExistingProject = existsSync(join$1(cwd, "stencil.config.ts"));
+	printSplash();
+	p.intro("stencil init");
+	if (process.env.STENCIL_WIZARD_DEV) p.log.warn(`Dev mode: loading wizard from ${process.env.STENCIL_WIZARD_DEV}`);
+	if (isCI) {
+		p.log.warn("Running in CI - non-interactive mode is not yet supported for `stencil init`.");
+		process.exit(1);
+	}
+	if (isExistingProject) {
+		await addCapabilities(cwd);
+		return;
+	}
+	const projectName = await promptProjectName();
+	const namespace = toNamespace(projectName);
+	const selectedIntegrations = await promptIntegrations();
+	const summaryLines = [
+		`Template:  component-starter`,
+		`Name:      ${projectName}`,
+		`Namespace: ${namespace}`
+	];
+	if (selectedIntegrations.length > 0) summaryLines.push(`Add:       ${selectedIntegrations.map((i) => i.displayName).join(", ")}`);
+	p.note(summaryLines.join("\n"), "Summary");
+	const confirmed = await p.confirm({ message: "Scaffold project in current directory?" });
+	cancelIfAborted(confirmed);
+	if (!confirmed) {
+		p.cancel("Cancelled.");
+		process.exit(0);
+	}
+	const s1 = p.spinner();
+	s1.start("Scaffolding project files");
+	await copyTemplate(cwd, projectName, namespace);
+	s1.stop("Project files created");
+	if (selectedIntegrations.length > 0) await patchPackageJson(cwd, selectedIntegrations.map((i) => i.package));
+	const s2 = p.spinner();
+	s2.start("Installing dependencies");
+	await installDependencies({
+		cwd,
+		silent: true
+	});
+	s2.stop("Dependencies installed");
+	if (selectedIntegrations.length > 0) {
+		const discovered = await discoverPlugins(cwd);
+		const selectedPkgs = new Set(selectedIntegrations.map((i) => i.package));
+		const context = {
+			rootDir: cwd,
+			isNewProject: true
+		};
+		for (const d of discovered) if (selectedPkgs.has(d.packageName) && d.plugin.init?.run) await d.plugin.init.run(context);
+	}
+	p.outro("Your project is ready! Run: pnpm run dev");
+}
+async function addCapabilities(cwd) {
+	const raw = JSON.parse(await readFile(join$1(cwd, "package.json"), "utf8"));
+	const installed = new Set([...Object.keys(raw.dependencies ?? {}), ...Object.keys(raw.devDependencies ?? {})]);
+	const discovered = await discoverPlugins(cwd);
+	const configurable = discovered.filter((d) => d.plugin.init);
+	const installable = KNOWN_INTEGRATIONS.filter((i) => !installed.has(i.package));
+	if (installable.length === 0 && configurable.length === 0) {
+		p.log.info("All known integrations are already installed and configured.");
+		p.outro("Nothing to do.");
+		return;
+	}
+	const { toInstall, toConfigure } = await promptAddCapabilities(installable, configurable);
+	if (toInstall.length === 0 && toConfigure.length === 0) {
+		p.outro("No changes made.");
+		return;
+	}
+	const summaryLines = [];
+	for (const i of toInstall) summaryLines.push(`Install:   ${i.displayName}`);
+	for (const d of toConfigure) summaryLines.push(`Configure: ${d.plugin.init.displayName}`);
+	p.note(summaryLines.join("\n"), "Summary");
+	const confirmed = await p.confirm({ message: "Apply changes?" });
+	cancelIfAborted(confirmed);
+	if (!confirmed) {
+		p.cancel("Cancelled.");
+		process.exit(0);
+	}
+	if (toInstall.length > 0) {
+		await patchPackageJson(cwd, toInstall.map((i) => i.package));
+		const s = p.spinner();
+		s.start("Installing dependencies");
+		await installDependencies({
+			cwd,
+			silent: true
+		});
+		s.stop("Dependencies installed");
+	}
+	const allDiscovered = toInstall.length > 0 ? await discoverPlugins(cwd) : discovered;
+	const newlyInstalledPkgs = new Set(toInstall.map((i) => i.package));
+	const toRun = [...allDiscovered.filter((d) => newlyInstalledPkgs.has(d.packageName)), ...toConfigure].filter((d) => d.plugin.init?.run);
+	const context = {
+		rootDir: cwd,
+		isNewProject: false
+	};
+	for (const d of toRun) await d.plugin.init.run(context);
+	p.outro("Done! Run pnpm run dev to continue.");
+}
+function toNamespace(name) {
+	return toPascalCase(name.replace(/^@[^/]+\//, "").replace(/[/_]/g, "-"));
+}
+//#endregion
 //#region src/task-serve.ts
 const taskServe = async (config, flags) => {
 	config.suppressLogs = true;
@@ -2684,6 +3477,10 @@ const run = async (init) => {
 			}), logger, sys);
 			return;
 		}
+		if (task === "init") {
+			await taskInit();
+			return;
+		}
 		startupLog(logger, task);
 		const findConfigResults = await findConfig({
 			sys,
@@ -2704,7 +3501,7 @@ const run = async (init) => {
 		const configWithFlags = mergeFlags({}, flags);
 		const validated = await coreCompiler.loadConfig({
 			config: configWithFlags,
-			configPath: foundConfig.configPath,
+			configPath: foundConfig.configPath ?? void 0,
 			logger,
 			sys
 		});
@@ -2754,6 +3551,9 @@ const runTask = async (coreCompiler, config, task, sys, flags) => {
 		case "help":
 			await taskHelp(resolvedFlags, strictConfig.logger, sys);
 			break;
+		case "init":
+			await taskInit();
+			break;
 		case "migrate":
 			await taskMigrate(coreCompiler, strictConfig, resolvedFlags);
 			break;