@screenbook/cli 1.2.0 → 1.4.0

package/dist/index.mjs

@@ -1,8 +1,9 @@
 #!/usr/bin/env node
 import { createRequire } from "node:module";
-import { cli, define } from "gunshi";
 import { copyFileSync, existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
 import { basename, dirname, join, relative, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { cli, define } from "gunshi";
 import { createJiti } from "jiti";
 import { glob } from "tinyglobby";
 import { defineConfig } from "@screenbook/core";
@@ -601,7 +602,7 @@ const devCommand = define({
 		const cwd = process.cwd();
 		logger.info("Starting Screenbook development server...");
 		await buildScreens(config, cwd);
-		const uiPackagePath = resolveUiPackage();
+		const uiPackagePath = resolveUiPackage$1();
 		if (!uiPackagePath) {
 			logger.errorWithHelp({
 				title: "Could not find @screenbook/ui package",
@@ -677,7 +678,7 @@ async function buildScreens(config, cwd) {
 	logger.blank();
 	logger.success(`Generated ${logger.path(outputPath)}`);
 }
-function resolveUiPackage() {
+function resolveUiPackage$1() {
 	try {
 		return dirname(createRequire(import.meta.url).resolve("@screenbook/ui/package.json"));
 	} catch {
@@ -904,8 +905,8 @@ async function checkVersionCompatibility(cwd) {
 			status: "warn",
 			message: "Cannot check - packages not installed"
 		};
-		const extractMajor = (version) => {
-			return version.replace(/^[\^~>=<]+/, "").split(".")[0] ?? "0";
+		const extractMajor = (version$1) => {
+			return version$1.replace(/^[\^~>=<]+/, "").split(".")[0] ?? "0";
 		};
 		if (extractMajor(coreVersion) !== extractMajor(cliVersion)) return {
 			name: "Version compatibility",
@@ -1007,7 +1008,10 @@ function pathToScreenId(path) {
 	if (path === "/" || path === "") return "home";
 	return path.replace(/^\//, "").replace(/\/$/, "").split("/").map((segment) => {
 		if (segment.startsWith(":")) return segment.slice(1);
-		if (segment.startsWith("*")) return segment.slice(1) || "catchall";
+		if (segment.startsWith("*")) {
+			if (segment === "**") return "catchall";
+			return segment.slice(1) || "catchall";
+		}
 		return segment;
 	}).join(".");
 }
@@ -1021,6 +1025,524 @@ function pathToScreenTitle(path) {
 	return (segments[segments.length - 1] || "Home").split(/[-_]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
 }
 
+//#endregion
+//#region src/utils/angularRouterParser.ts
+/**
+* Parse Angular Router configuration file and extract routes.
+* Supports both Standalone (Angular 14+) and NgModule patterns.
+*
+* Supported patterns:
+* - `export const routes: Routes = [...]`
+* - `const routes: Routes = [...]`
+* - `RouterModule.forRoot([...])`
+* - `RouterModule.forChild([...])`
+* - `export default [...]`
+* - `export default [...] satisfies Routes`
+*
+* @param filePath - Path to the router configuration file
+* @param preloadedContent - Optional pre-read file content. When provided, the file is not read from disk,
+*                           enabling testing with virtual content or avoiding duplicate file reads.
+* @returns ParseResult containing extracted routes and any warnings
+* @throws Error if the file cannot be read or contains syntax errors
+*/
+function parseAngularRouterConfig(filePath, preloadedContent) {
+	const absolutePath = resolve(filePath);
+	const routesFileDir = dirname(absolutePath);
+	const warnings = [];
+	let content;
+	if (preloadedContent !== void 0) content = preloadedContent;
+	else try {
+		content = readFileSync(absolutePath, "utf-8");
+	} catch (error) {
+		const message = error instanceof Error ? error.message : String(error);
+		throw new Error(`Failed to read routes file "${absolutePath}": ${message}`);
+	}
+	let ast;
+	try {
+		ast = parse(content, {
+			sourceType: "module",
+			plugins: ["typescript", ["decorators", { decoratorsBeforeExport: true }]]
+		});
+	} catch (error) {
+		if (error instanceof SyntaxError) throw new Error(`Syntax error in routes file "${absolutePath}": ${error.message}`);
+		const message = error instanceof Error ? error.message : String(error);
+		throw new Error(`Failed to parse routes file "${absolutePath}": ${message}`);
+	}
+	const routes = [];
+	for (const node of ast.program.body) {
+		if (node.type === "VariableDeclaration") {
+			for (const decl of node.declarations) if (decl.id.type === "Identifier" && decl.init?.type === "ArrayExpression") {
+				const typeAnnotation = decl.id.typeAnnotation?.typeAnnotation;
+				if (decl.id.name.toLowerCase().includes("route") || typeAnnotation?.type === "TSTypeReference" && typeAnnotation.typeName?.type === "Identifier" && typeAnnotation.typeName.name === "Routes") {
+					const parsed = parseRoutesArray$3(decl.init, routesFileDir, warnings);
+					routes.push(...parsed);
+				}
+			}
+		}
+		if (node.type === "ExportNamedDeclaration" && node.declaration?.type === "VariableDeclaration") {
+			for (const decl of node.declaration.declarations) if (decl.id.type === "Identifier" && decl.init?.type === "ArrayExpression") {
+				const typeAnnotation = decl.id.typeAnnotation?.typeAnnotation;
+				if (decl.id.name.toLowerCase().includes("route") || typeAnnotation?.type === "TSTypeReference" && typeAnnotation.typeName?.type === "Identifier" && typeAnnotation.typeName.name === "Routes") {
+					const parsed = parseRoutesArray$3(decl.init, routesFileDir, warnings);
+					routes.push(...parsed);
+				}
+			}
+		}
+		if (node.type === "ExportDefaultDeclaration" && node.declaration.type === "ArrayExpression") {
+			const parsed = parseRoutesArray$3(node.declaration, routesFileDir, warnings);
+			routes.push(...parsed);
+		}
+		if (node.type === "ExportDefaultDeclaration" && node.declaration.type === "TSSatisfiesExpression" && node.declaration.expression.type === "ArrayExpression") {
+			const parsed = parseRoutesArray$3(node.declaration.expression, routesFileDir, warnings);
+			routes.push(...parsed);
+		}
+		let classNode = null;
+		if (node.type === "ClassDeclaration") classNode = node;
+		else if (node.type === "ExportNamedDeclaration" && node.declaration?.type === "ClassDeclaration") classNode = node.declaration;
+		if (classNode) {
+			const decorators = classNode.decorators || [];
+			for (const decorator of decorators) if (decorator.expression?.type === "CallExpression") {
+				const routesFromDecorator = extractRoutesFromNgModule(decorator.expression, routesFileDir, warnings);
+				routes.push(...routesFromDecorator);
+			}
+		}
+		if (node.type === "ExpressionStatement") {
+			const routesFromExpr = extractRoutesFromExpression(node.expression, routesFileDir, warnings);
+			routes.push(...routesFromExpr);
+		}
+	}
+	if (routes.length === 0) warnings.push("No routes found. Supported patterns: 'export const routes: Routes = [...]', 'RouterModule.forRoot([...])', or 'RouterModule.forChild([...])'");
+	return {
+		routes,
+		warnings
+	};
+}
+/**
+* Extract routes from @NgModule decorator
+*/
+function extractRoutesFromNgModule(callExpr, baseDir, warnings) {
+	const routes = [];
+	if (callExpr.callee?.type === "Identifier" && callExpr.callee.name === "NgModule") {
+		const arg = callExpr.arguments[0];
+		if (arg?.type === "ObjectExpression") {
+			for (const prop of arg.properties) if (prop.type === "ObjectProperty" && prop.key?.type === "Identifier" && prop.key.name === "imports") {
+				if (prop.value?.type === "ArrayExpression") for (const element of prop.value.elements) {
+					if (!element) continue;
+					const extracted = extractRoutesFromExpression(element, baseDir, warnings);
+					routes.push(...extracted);
+				}
+			}
+		}
+	}
+	return routes;
+}
+/**
+* Extract routes from RouterModule.forRoot/forChild call expressions
+*/
+function extractRoutesFromExpression(node, baseDir, warnings) {
+	const routes = [];
+	if (node?.type !== "CallExpression") return routes;
+	const callee = node.callee;
+	if (callee?.type === "MemberExpression" && callee.object?.type === "Identifier" && callee.object.name === "RouterModule" && callee.property?.type === "Identifier" && (callee.property.name === "forRoot" || callee.property.name === "forChild")) {
+		const routesArg = node.arguments[0];
+		if (routesArg?.type === "ArrayExpression") {
+			const parsed = parseRoutesArray$3(routesArg, baseDir, warnings);
+			routes.push(...parsed);
+		}
+	}
+	return routes;
+}
+/**
+* Parse an array expression containing route objects
+*/
+function parseRoutesArray$3(arrayNode, baseDir, warnings) {
+	const routes = [];
+	for (const element of arrayNode.elements) {
+		if (!element) continue;
+		if (element.type === "SpreadElement") {
+			const loc = element.loc ? ` at line ${element.loc.start.line}` : "";
+			warnings.push(`Spread operator detected${loc}. Routes from spread cannot be statically analyzed.`);
+			continue;
+		}
+		if (element.type === "ObjectExpression") {
+			const parsedRoute = parseRouteObject$3(element, baseDir, warnings);
+			if (parsedRoute) routes.push(parsedRoute);
+		} else {
+			const loc = element.loc ? ` at line ${element.loc.start.line}` : "";
+			warnings.push(`Non-object route element (${element.type})${loc}. Only object literals can be statically analyzed.`);
+		}
+	}
+	return routes;
+}
+/**
+* Parse a single route object expression
+*/
+function parseRouteObject$3(objectNode, baseDir, warnings) {
+	let path;
+	let component;
+	let children;
+	let redirectTo;
+	let hasPath = false;
+	for (const prop of objectNode.properties) {
+		if (prop.type !== "ObjectProperty") continue;
+		if (prop.key.type !== "Identifier") continue;
+		switch (prop.key.name) {
+			case "path":
+				if (prop.value.type === "StringLiteral") {
+					path = prop.value.value;
+					hasPath = true;
+				} else {
+					const loc = prop.loc ? ` at line ${prop.loc.start.line}` : "";
+					warnings.push(`Dynamic path value (${prop.value.type})${loc}. Only string literal paths can be statically analyzed.`);
+				}
+				break;
+			case "component":
+				if (prop.value.type === "Identifier") component = prop.value.name;
+				break;
+			case "loadComponent":
+				component = extractLazyComponent(prop.value, baseDir, warnings);
+				break;
+			case "loadChildren": {
+				const lazyPath = extractLazyPath(prop.value, baseDir, warnings);
+				if (lazyPath) component = `[lazy: ${lazyPath}]`;
+				break;
+			}
+			case "children":
+				if (prop.value.type === "ArrayExpression") children = parseRoutesArray$3(prop.value, baseDir, warnings);
+				break;
+			case "redirectTo":
+				if (prop.value.type === "StringLiteral") redirectTo = prop.value.value;
+				break;
+			case "pathMatch":
+			case "canActivate":
+			case "canDeactivate":
+			case "canMatch":
+			case "resolve":
+			case "data":
+			case "title":
+			case "providers":
+			case "runGuardsAndResolvers":
+			case "outlet": break;
+		}
+	}
+	if (redirectTo && !component && !children) return null;
+	if (!hasPath) {
+		if (children && children.length > 0) return {
+			path: "",
+			component,
+			children
+		};
+		return null;
+	}
+	return {
+		path: path || "",
+		component,
+		children
+	};
+}
+/**
+* Extract component from lazy loadComponent pattern
+* loadComponent: () => import('./path').then(m => m.Component)
+*/
+function extractLazyComponent(node, baseDir, warnings) {
+	if (node.type === "ArrowFunctionExpression") {
+		const body = node.body;
+		if (body.type === "CallExpression" && body.callee?.type === "MemberExpression" && body.callee.property?.type === "Identifier" && body.callee.property.name === "then") {
+			const importCall = body.callee.object;
+			const thenArg = body.arguments[0];
+			if (importCall?.type === "CallExpression" && importCall.callee?.type === "Import") {
+				if (importCall.arguments[0]?.type === "StringLiteral") {
+					const importPath = resolveImportPath(importCall.arguments[0].value, baseDir);
+					if (thenArg?.type === "ArrowFunctionExpression" && thenArg.body?.type === "MemberExpression" && thenArg.body.property?.type === "Identifier") return `${importPath}#${thenArg.body.property.name}`;
+					return importPath;
+				}
+				const loc$1 = node.loc ? ` at line ${node.loc.start.line}` : "";
+				warnings.push(`Lazy loadComponent with dynamic path${loc$1}. Only string literal imports can be analyzed.`);
+				return;
+			}
+		}
+		if (body.type === "CallExpression" && body.callee?.type === "Import") {
+			if (body.arguments[0]?.type === "StringLiteral") return resolveImportPath(body.arguments[0].value, baseDir);
+			const loc$1 = node.loc ? ` at line ${node.loc.start.line}` : "";
+			warnings.push(`Lazy loadComponent with dynamic path${loc$1}. Only string literal imports can be analyzed.`);
+			return;
+		}
+	}
+	const loc = node.loc ? ` at line ${node.loc.start.line}` : "";
+	warnings.push(`Unrecognized loadComponent pattern (${node.type})${loc}. Expected arrow function with import().then().`);
+}
+/**
+* Extract path from lazy loadChildren pattern
+* loadChildren: () => import('./path').then(m => m.routes)
+*/
+function extractLazyPath(node, baseDir, warnings) {
+	if (node.type === "ArrowFunctionExpression") {
+		const body = node.body;
+		if (body.type === "CallExpression" && body.callee?.type === "MemberExpression" && body.callee.property?.type === "Identifier" && body.callee.property.name === "then") {
+			const importCall = body.callee.object;
+			if (importCall?.type === "CallExpression" && importCall.callee?.type === "Import" && importCall.arguments[0]?.type === "StringLiteral") return resolveImportPath(importCall.arguments[0].value, baseDir);
+		}
+		if (body.type === "CallExpression" && body.callee?.type === "Import") {
+			if (body.arguments[0]?.type === "StringLiteral") return resolveImportPath(body.arguments[0].value, baseDir);
+		}
+	}
+	const loc = node.loc ? ` at line ${node.loc.start.line}` : "";
+	warnings.push(`Unrecognized loadChildren pattern (${node.type})${loc}. Expected arrow function with import().`);
+}
+/**
+* Detect if content is Angular Router based on patterns.
+* Checks for @angular/router import, RouterModule patterns, or Routes type annotation.
+*/
+function isAngularRouterContent(content) {
+	if (content.includes("@angular/router")) return true;
+	if (content.includes("RouterModule.forRoot") || content.includes("RouterModule.forChild")) return true;
+	if (/:\s*Routes\s*[=[]/.test(content)) return true;
+	return false;
+}
+
+//#endregion
+//#region src/utils/solidRouterParser.ts
+/**
+* Parse Solid Router configuration file and extract routes.
+* Supports various export patterns including `export const routes`, `export default`,
+* and TypeScript's `satisfies` operator.
+*
+* @param filePath - Path to the router configuration file
+* @param preloadedContent - Optional pre-read file content to avoid duplicate file reads
+* @returns ParseResult containing extracted routes and any warnings
+* @throws Error if the file cannot be read or contains syntax errors
+*/
+function parseSolidRouterConfig(filePath, preloadedContent) {
+	const absolutePath = resolve(filePath);
+	const routesFileDir = dirname(absolutePath);
+	const warnings = [];
+	let content;
+	if (preloadedContent !== void 0) content = preloadedContent;
+	else try {
+		content = readFileSync(absolutePath, "utf-8");
+	} catch (error) {
+		const message = error instanceof Error ? error.message : String(error);
+		throw new Error(`Failed to read routes file "${absolutePath}": ${message}`);
+	}
+	let ast;
+	try {
+		ast = parse(content, {
+			sourceType: "module",
+			plugins: ["typescript", "jsx"]
+		});
+	} catch (error) {
+		if (error instanceof SyntaxError) throw new Error(`Syntax error in routes file "${absolutePath}": ${error.message}`);
+		const message = error instanceof Error ? error.message : String(error);
+		throw new Error(`Failed to parse routes file "${absolutePath}": ${message}`);
+	}
+	const routes = [];
+	for (const node of ast.program.body) {
+		if (node.type === "VariableDeclaration") {
+			for (const decl of node.declarations) if (decl.id.type === "Identifier" && decl.id.name === "routes" && decl.init?.type === "ArrayExpression") {
+				const parsed = parseRoutesArray$2(decl.init, routesFileDir, warnings);
+				routes.push(...parsed);
+			}
+		}
+		if (node.type === "ExportNamedDeclaration" && node.declaration?.type === "VariableDeclaration") {
+			for (const decl of node.declaration.declarations) if (decl.id.type === "Identifier" && decl.id.name === "routes" && decl.init?.type === "ArrayExpression") {
+				const parsed = parseRoutesArray$2(decl.init, routesFileDir, warnings);
+				routes.push(...parsed);
+			}
+		}
+		if (node.type === "ExportDefaultDeclaration" && node.declaration.type === "ArrayExpression") {
+			const parsed = parseRoutesArray$2(node.declaration, routesFileDir, warnings);
+			routes.push(...parsed);
+		}
+		if (node.type === "ExportDefaultDeclaration" && node.declaration.type === "TSSatisfiesExpression" && node.declaration.expression.type === "ArrayExpression") {
+			const parsed = parseRoutesArray$2(node.declaration.expression, routesFileDir, warnings);
+			routes.push(...parsed);
+		}
+	}
+	if (routes.length === 0) warnings.push("No routes found. Supported patterns: 'export const routes = [...]' or 'export default [...]'");
+	return {
+		routes,
+		warnings
+	};
+}
+/**
+* Parse an array expression containing route objects
+*/
+function parseRoutesArray$2(arrayNode, baseDir, warnings) {
+	const routes = [];
+	for (const element of arrayNode.elements) {
+		if (!element) continue;
+		if (element.type === "SpreadElement") {
+			const loc = element.loc ? ` at line ${element.loc.start.line}` : "";
+			warnings.push(`Spread operator detected${loc}. Routes from spread cannot be statically analyzed.`);
+			continue;
+		}
+		if (element.type === "ObjectExpression") {
+			const parsedRoutes = parseRouteObject$2(element, baseDir, warnings);
+			routes.push(...parsedRoutes);
+		} else {
+			const loc = element.loc ? ` at line ${element.loc.start.line}` : "";
+			warnings.push(`Non-object route element (${element.type})${loc}. Only object literals can be statically analyzed.`);
+		}
+	}
+	return routes;
+}
+/**
+* Parse a single route object expression
+* Returns array to handle multiple paths case: path: ["/a", "/b"]
+*/
+function parseRouteObject$2(objectNode, baseDir, warnings) {
+	let paths = [];
+	let component;
+	let children;
+	let hasPath = false;
+	for (const prop of objectNode.properties) {
+		if (prop.type !== "ObjectProperty") continue;
+		if (prop.key.type !== "Identifier") continue;
+		switch (prop.key.name) {
+			case "path":
+				if (prop.value.type === "StringLiteral") {
+					paths = [prop.value.value];
+					hasPath = true;
+				} else if (prop.value.type === "ArrayExpression") {
+					const arrayElementCount = prop.value.elements.filter(Boolean).length;
+					paths = extractPathArray(prop.value, warnings);
+					hasPath = paths.length > 0;
+					if (arrayElementCount > 0 && paths.length === 0) {
+						const loc = prop.loc ? ` at line ${prop.loc.start.line}` : "";
+						warnings.push(`Path array contains only dynamic values${loc}. No static paths could be extracted.`);
+					}
+				} else {
+					const loc = prop.loc ? ` at line ${prop.loc.start.line}` : "";
+					warnings.push(`Dynamic path value (${prop.value.type})${loc}. Only string literal paths can be statically analyzed.`);
+				}
+				break;
+			case "component":
+				component = extractComponent(prop.value, baseDir, warnings);
+				break;
+			case "children":
+				if (prop.value.type === "ArrayExpression") children = parseRoutesArray$2(prop.value, baseDir, warnings);
+				break;
+		}
+	}
+	if (!hasPath) {
+		if (children && children.length > 0) return [{
+			path: "",
+			component,
+			children
+		}];
+		return [];
+	}
+	return paths.map((path) => ({
+		path,
+		component,
+		children
+	}));
+}
+/**
+* Extract paths from array expression
+* path: ["/login", "/register"] -> ["/login", "/register"]
+*/
+function extractPathArray(arrayNode, warnings) {
+	const paths = [];
+	for (const element of arrayNode.elements) {
+		if (!element) continue;
+		if (element.type === "StringLiteral") paths.push(element.value);
+		else {
+			const loc = element.loc ? ` at line ${element.loc.start.line}` : "";
+			warnings.push(`Non-string path in array (${element.type})${loc}. Only string literal paths can be analyzed.`);
+		}
+	}
+	return paths;
+}
+/**
+* Extract component from various patterns
+* - Direct identifier: component: Home
+* - Lazy component: component: lazy(() => import("./Home"))
+*/
+function extractComponent(node, baseDir, warnings) {
+	if (node.type === "Identifier") return node.name;
+	if (node.type === "CallExpression") {
+		const callee = node.callee;
+		if (callee.type === "Identifier" && callee.name === "lazy") {
+			const lazyArg = node.arguments[0];
+			if (lazyArg) return extractLazyImportPath$2(lazyArg, baseDir, warnings);
+			const loc$1 = node.loc ? ` at line ${node.loc.start.line}` : "";
+			warnings.push(`lazy() called without arguments${loc$1}. Expected arrow function with import().`);
+			return;
+		}
+		const loc = node.loc ? ` at line ${node.loc.start.line}` : "";
+		const calleeName = callee.type === "Identifier" ? callee.name : "unknown";
+		warnings.push(`Unrecognized component pattern: ${calleeName}(...)${loc}. Only 'lazy(() => import(...))' is supported.`);
+		return;
+	}
+	if (node.type === "ArrowFunctionExpression") {
+		if (node.body.type === "JSXElement") {
+			const openingElement = node.body.openingElement;
+			if (openingElement?.name?.type === "JSXIdentifier") return openingElement.name.name;
+			if (openingElement?.name?.type === "JSXMemberExpression") {
+				const loc = node.loc ? ` at line ${node.loc.start.line}` : "";
+				warnings.push(`Namespaced JSX component (e.g., <UI.Button />)${loc}. Component extraction not supported for member expressions. Consider using a direct component reference or create a wrapper component.`);
+				return;
+			}
+		}
+		if (node.body.type === "BlockStatement") {
+			const loc = node.loc ? ` at line ${node.loc.start.line}` : "";
+			warnings.push(`Arrow function with block body${loc}. Only concise arrow functions returning JSX directly can be analyzed.`);
+			return;
+		}
+		if (node.body.type === "JSXFragment") {
+			const loc = node.loc ? ` at line ${node.loc.start.line}` : "";
+			warnings.push(`JSX Fragment detected${loc}. Cannot extract component name from fragments.`);
+			return;
+		}
+		if (node.body.type === "ConditionalExpression") {
+			const loc = node.loc ? ` at line ${node.loc.start.line}` : "";
+			let componentInfo = "";
+			const consequent = node.body.consequent;
+			const alternate = node.body.alternate;
+			if (consequent?.type === "JSXElement" && alternate?.type === "JSXElement") componentInfo = ` (${consequent.openingElement?.name?.name || "unknown"} or ${alternate.openingElement?.name?.name || "unknown"})`;
+			warnings.push(`Conditional component${componentInfo}${loc}. Only static JSX elements can be analyzed. Consider extracting to a separate component.`);
+			return;
+		}
+		const arrowLoc = node.loc ? ` at line ${node.loc.start.line}` : "";
+		warnings.push(`Unrecognized arrow function body (${node.body.type})${arrowLoc}. Component will not be extracted.`);
+		return;
+	}
+	if (node) {
+		const loc = node.loc ? ` at line ${node.loc.start.line}` : "";
+		warnings.push(`Unrecognized component pattern (${node.type})${loc}. Component will not be extracted.`);
+	}
+}
+/**
+* Extract import path from lazy function argument
+* () => import("./pages/Dashboard") -> resolved path
+*/
+function extractLazyImportPath$2(node, baseDir, warnings) {
+	if (node.type === "ArrowFunctionExpression") {
+		const body = node.body;
+		if (body.type === "CallExpression" && body.callee.type === "Import") {
+			if (body.arguments[0]?.type === "StringLiteral") return resolveImportPath(body.arguments[0].value, baseDir);
+			const loc$1 = node.loc ? ` at line ${node.loc.start.line}` : "";
+			warnings.push(`Lazy import with dynamic path${loc$1}. Only string literal imports can be analyzed.`);
+			return;
+		}
+	}
+	const loc = node.loc ? ` at line ${node.loc.start.line}` : "";
+	warnings.push(`Unrecognized lazy pattern (${node.type})${loc}. Expected arrow function with import().`);
+}
+/**
+* Detect if content is Solid Router based on patterns.
+* Note: Called by detectRouterType() in reactRouterParser.ts before React Router detection
+* because Solid Router and React Router share similar syntax patterns (both use `path` and `component`).
+* The detection order matters: TanStack Router -> Solid Router -> Angular Router -> React Router -> Vue Router.
+*/
+function isSolidRouterContent(content) {
+	if (content.includes("@solidjs/router")) return true;
+	if (content.includes("solid-app-router")) return true;
+	if (content.includes("solid-js") && /\blazy\s*\(/.test(content) && /\bcomponent\s*:/.test(content) && /\bpath\s*:/.test(content)) return true;
+	return false;
+}
+
 //#endregion
 //#region src/utils/tanstackRouterParser.ts
 /**
@@ -1513,7 +2035,15 @@ function extractComponentFromJSX(node, warnings) {
 			}
 		}
 	}
-	if (node.type === "JSXFragment") return;
+	if (node.type === "JSXFragment") {
+		const loc = node.loc ? ` at line ${node.loc.start.line}` : "";
+		warnings.push(`JSX Fragment detected${loc}. Cannot extract component name from fragments. Consider wrapping in a named component.`);
+		return;
+	}
+	if (node) {
+		const loc = node.loc ? ` at line ${node.loc.start.line}` : "";
+		warnings.push(`Unrecognized element pattern (${node.type})${loc}. Component will not be extracted.`);
+	}
 }
 /**
 * Extract import path from lazy function
@@ -1549,10 +2079,14 @@ function isVueRouterContent(content) {
 	return false;
 }
 /**
-* Detect router type from file content
+* Detect router type from file content.
+* Detection order: TanStack Router -> Solid Router -> Angular Router -> React Router -> Vue Router.
+* This order ensures more specific patterns are checked before more generic ones.
 */
 function detectRouterType(content) {
 	if (isTanStackRouterContent(content)) return "tanstack-router";
+	if (isSolidRouterContent(content)) return "solid-router";
+	if (isAngularRouterContent(content)) return "angular-router";
 	if (isReactRouterContent(content)) return "react-router";
 	if (isVueRouterContent(content)) return "vue-router";
 	return "unknown";
@@ -1746,14 +2280,21 @@ async function generateFromRoutesFile(routesFile, cwd, options) {
 		process.exit(1);
 	}
 	const routerType = detectRouterType(readFileSync(absoluteRoutesFile, "utf-8"));
-	const routerTypeDisplay = routerType === "tanstack-router" ? "TanStack Router" : routerType === "react-router" ? "React Router" : routerType === "vue-router" ? "Vue Router" : "unknown";
+	const routerTypeDisplay = routerType === "tanstack-router" ? "TanStack Router" : routerType === "solid-router" ? "Solid Router" : routerType === "angular-router" ? "Angular Router" : routerType === "react-router" ? "React Router" : routerType === "vue-router" ? "Vue Router" : "unknown";
 	logger.info(`Parsing routes from ${logger.path(routesFile)} (${routerTypeDisplay})...`);
 	logger.blank();
 	let parseResult;
 	try {
 		if (routerType === "tanstack-router") parseResult = parseTanStackRouterConfig(absoluteRoutesFile);
+		else if (routerType === "solid-router") parseResult = parseSolidRouterConfig(absoluteRoutesFile);
+		else if (routerType === "angular-router") parseResult = parseAngularRouterConfig(absoluteRoutesFile);
 		else if (routerType === "react-router") parseResult = parseReactRouterConfig(absoluteRoutesFile);
-		else parseResult = parseVueRouterConfig(absoluteRoutesFile);
+		else if (routerType === "vue-router") parseResult = parseVueRouterConfig(absoluteRoutesFile);
+		else {
+			logger.warn(`Could not auto-detect router type for ${logger.path(routesFile)}. Attempting to parse as Vue Router.`);
+			logger.log(`  ${logger.dim("If parsing fails, check that your router imports are explicit.")}`);
+			parseResult = parseVueRouterConfig(absoluteRoutesFile);
+		}
 	} catch (error) {
 		const message = error instanceof Error ? error.message : String(error);
 		logger.errorWithHelp(ERRORS.ROUTES_FILE_PARSE_ERROR(routesFile, message));
@@ -2345,6 +2886,34 @@ const FRAMEWORKS = [
 		routesPattern: "src/pages/**/*.astro",
 		metaPattern: "src/pages/**/screen.meta.ts"
 	},
+	{
+		name: "SolidStart",
+		packages: ["@solidjs/start"],
+		configFiles: ["app.config.ts", "app.config.js"],
+		routesPattern: "src/routes/**/*.tsx",
+		metaPattern: "src/routes/**/screen.meta.ts",
+		check: (cwd) => existsSync(join(cwd, "src/routes"))
+	},
+	{
+		name: "QwikCity",
+		packages: ["@builder.io/qwik-city"],
+		configFiles: [
+			"vite.config.ts",
+			"vite.config.js",
+			"vite.config.mjs"
+		],
+		routesPattern: "src/routes/**/index.tsx",
+		metaPattern: "src/routes/**/screen.meta.ts",
+		check: (cwd) => existsSync(join(cwd, "src/routes"))
+	},
+	{
+		name: "TanStack Start",
+		packages: ["@tanstack/react-start", "@tanstack/start"],
+		configFiles: ["app.config.ts", "app.config.js"],
+		routesPattern: "src/routes/**/*.tsx",
+		metaPattern: "src/routes/**/screen.meta.ts",
+		check: (cwd) => existsSync(join(cwd, "src/routes/__root.tsx"))
+	},
 	{
 		name: "Vite + Vue",
 		packages: ["vite", "vue"],
@@ -2379,7 +2948,8 @@ function readPackageJson(cwd) {
 	try {
 		const content = readFileSync(packageJsonPath, "utf-8");
 		return JSON.parse(content);
-	} catch {
+	} catch (error) {
+		console.warn(`Warning: Failed to parse package.json at ${packageJsonPath}: ${error instanceof Error ? error.message : String(error)}`);
 		return null;
 	}
 }
@@ -2434,6 +3004,18 @@ async function promptFrameworkSelection() {
 	};
 }
 
+//#endregion
+//#region src/utils/isInteractive.ts
+/**
+* Check if the current environment supports interactive prompts.
+* Returns false in CI environments or when stdin is not a TTY.
+*/
+function isInteractive() {
+	if (process.env.CI || process.env.CONTINUOUS_INTEGRATION) return false;
+	if (process.env.GITHUB_ACTIONS || process.env.GITLAB_CI || process.env.JENKINS_URL) return false;
+	return process.stdin.isTTY === true;
+}
+
 //#endregion
 //#region src/commands/init.ts
 function generateConfigTemplate(framework) {
@@ -2490,6 +3072,123 @@ function printNextSteps(hasRoutesPattern) {
 	logger.log(logger.dim("    page.tsx          # Your route file"));
 	logger.log(logger.dim("    screen.meta.ts    # Auto-generated, customize as needed"));
 }
+/**
+* Resolve a boolean option with priority order:
+* 1. Explicit flag (e.g., --generate or --no-generate) takes precedence
+* 2. -y flag enables all optional features
+* 3. Non-interactive environments (CI mode or no TTY) fall back to ciDefault
+* 4. Otherwise, prompt the user interactively
+*/
+async function resolveOption(params) {
+	const { explicitValue, yesAll, ciMode, ciDefault, promptMessage } = params;
+	if (explicitValue !== void 0) return explicitValue;
+	if (yesAll) return true;
+	if (ciMode || !isInteractive()) return ciDefault;
+	const response = await prompts({
+		type: "confirm",
+		name: "value",
+		message: promptMessage,
+		initial: true
+	});
+	if (response.value === void 0) {
+		logger.blank();
+		logger.info("Operation cancelled");
+		process.exit(0);
+	}
+	return response.value;
+}
+async function countRouteFiles(routesPattern, cwd) {
+	return (await glob(routesPattern, { cwd })).length;
+}
+async function runGenerate(routesPattern, cwd) {
+	await generateFromRoutesPattern(routesPattern, cwd, {
+		dryRun: false,
+		force: false,
+		interactive: false,
+		ignore: ["**/node_modules/**"]
+	});
+}
+async function buildScreensForDev(metaPattern, outDir, cwd) {
+	const files = await glob(metaPattern, {
+		cwd,
+		ignore: ["**/node_modules/**"]
+	});
+	if (files.length === 0) {
+		logger.warn(`No screen.meta.ts files found matching: ${metaPattern}`);
+		return;
+	}
+	const jiti = createJiti(cwd);
+	const screens = [];
+	for (const file of files) {
+		const absolutePath = resolve(cwd, file);
+		try {
+			const module = await jiti.import(absolutePath);
+			if (module.screen) screens.push({
+				...module.screen,
+				filePath: absolutePath
+			});
+		} catch (error) {
+			logger.itemWarn(`Failed to load ${file}`);
+			if (error instanceof Error) logger.log(`    ${logger.dim(error.message)}`);
+		}
+	}
+	const outputPath = join(cwd, outDir, "screens.json");
+	const outputDir = dirname(outputPath);
+	if (!existsSync(outputDir)) mkdirSync(outputDir, { recursive: true });
+	writeFileSync(outputPath, JSON.stringify(screens, null, 2));
+}
+function resolveUiPackage() {
+	try {
+		return dirname(createRequire(import.meta.url).resolve("@screenbook/ui/package.json"));
+	} catch {
+		const possiblePaths = [
+			join(process.cwd(), "node_modules", "@screenbook", "ui"),
+			join(process.cwd(), "..", "ui"),
+			join(process.cwd(), "packages", "ui")
+		];
+		for (const p of possiblePaths) if (existsSync(join(p, "package.json"))) return p;
+		return null;
+	}
+}
+async function startDevServer(metaPattern, outDir, cwd, port) {
+	await buildScreensForDev(metaPattern, outDir, cwd);
+	const uiPackagePath = resolveUiPackage();
+	if (!uiPackagePath) {
+		logger.warn("Could not find @screenbook/ui package");
+		logger.log(`  Run ${logger.code("npm install @screenbook/ui")} to install it`);
+		return;
+	}
+	const screensJsonPath = join(cwd, outDir, "screens.json");
+	const uiScreensDir = join(uiPackagePath, ".screenbook");
+	if (!existsSync(uiScreensDir)) mkdirSync(uiScreensDir, { recursive: true });
+	if (existsSync(screensJsonPath)) copyFileSync(screensJsonPath, join(uiScreensDir, "screens.json"));
+	logger.blank();
+	logger.info(`Starting UI server on ${logger.highlight(`http://localhost:${port}`)}`);
+	logger.blank();
+	const astroProcess = spawn("npx", [
+		"astro",
+		"dev",
+		"--port",
+		port
+	], {
+		cwd: uiPackagePath,
+		stdio: "inherit",
+		shell: true
+	});
+	astroProcess.on("error", (error) => {
+		logger.error(`Failed to start server: ${error.message}`);
+		process.exit(1);
+	});
+	astroProcess.on("close", (code) => {
+		process.exit(code ?? 0);
+	});
+	process.on("SIGINT", () => {
+		astroProcess.kill("SIGINT");
+	});
+	process.on("SIGTERM", () => {
+		astroProcess.kill("SIGTERM");
+	});
+}
 const initCommand = define({
 	name: "init",
 	description: "Initialize Screenbook in a project",
@@ -2504,12 +3203,46 @@ const initCommand = define({
 			type: "boolean",
 			description: "Skip framework auto-detection",
 			default: false
+		},
+		generate: {
+			type: "boolean",
+			description: "Auto-generate screen.meta.ts files (--no-generate to skip)",
+			default: void 0,
+			negatable: true
+		},
+		dev: {
+			type: "boolean",
+			description: "Start development server after init (--no-dev to skip)",
+			default: void 0,
+			negatable: true
+		},
+		yes: {
+			type: "boolean",
+			short: "y",
+			description: "Answer yes to all prompts",
+			default: false
+		},
+		ci: {
+			type: "boolean",
+			description: "CI mode (no prompts, generate only)",
+			default: false
+		},
+		port: {
+			type: "string",
+			short: "p",
+			description: "Port for the dev server",
+			default: "4321"
 		}
 	},
 	run: async (ctx) => {
 		const cwd = process.cwd();
 		const force = ctx.values.force ?? false;
 		const skipDetect = ctx.values.skipDetect ?? false;
+		const generateFlag = ctx.values.generate;
+		const devFlag = ctx.values.dev;
+		const yesAll = ctx.values.yes ?? false;
+		const ciMode = ctx.values.ci ?? false;
+		const port = ctx.values.port ?? "4321";
 		logger.info("Initializing Screenbook...");
 		logger.blank();
 		let framework = null;
@@ -2518,11 +3251,13 @@ const initCommand = define({
 			if (framework) logger.itemSuccess(`Detected: ${framework.name}`);
 			else {
 				logger.log("  Could not auto-detect framework");
-				logger.blank();
-				framework = await promptFrameworkSelection();
-				if (framework) {
+				if (!ciMode && isInteractive()) {
 					logger.blank();
-					logger.itemSuccess(`Selected: ${framework.name}`);
+					framework = await promptFrameworkSelection();
+					if (framework) {
+						logger.blank();
+						logger.itemSuccess(`Selected: ${framework.name}`);
+					}
 				}
 			}
 		}
@@ -2546,8 +3281,54 @@ const initCommand = define({
 		}
 		logger.blank();
 		logger.done("Screenbook initialized successfully!");
-		printValueProposition();
-		printNextSteps(framework !== null);
+		if (!framework?.routesPattern) {
+			printValueProposition();
+			printNextSteps(false);
+			return;
+		}
+		const routeFileCount = await countRouteFiles(framework.routesPattern, cwd);
+		if (routeFileCount === 0) {
+			printValueProposition();
+			printNextSteps(true);
+			return;
+		}
+		logger.blank();
+		if (!await resolveOption({
+			explicitValue: generateFlag,
+			yesAll,
+			ciMode,
+			ciDefault: true,
+			promptMessage: `Found ${routeFileCount} route files. Generate screen.meta.ts files?`
+		})) {
+			printValueProposition();
+			printNextSteps(true);
+			return;
+		}
+		logger.blank();
+		logger.info("Generating screen metadata...");
+		logger.blank();
+		await runGenerate(framework.routesPattern, cwd);
+		if (ciMode) {
+			logger.blank();
+			logger.done("Initialization complete!");
+			return;
+		}
+		logger.blank();
+		if (!await resolveOption({
+			explicitValue: devFlag,
+			yesAll,
+			ciMode,
+			ciDefault: false,
+			promptMessage: "Start the development server?"
+		})) {
+			logger.blank();
+			logger.log(logger.bold("Next step:"));
+			logger.log(`  Run ${logger.code("screenbook dev")} to start the UI server`);
+			return;
+		}
+		logger.blank();
+		logger.info("Starting development server...");
+		await startDevServer(framework.metaPattern, ".screenbook", cwd, port);
 	}
 });
 
@@ -2727,8 +3508,16 @@ async function lintRoutesFile(routesFile, cwd, config, adoption, allowCycles, st
 		const routerType = detectRouterType(content);
 		let parseResult;
 		if (routerType === "tanstack-router") parseResult = parseTanStackRouterConfig(absoluteRoutesFile, content);
+		else if (routerType === "solid-router") parseResult = parseSolidRouterConfig(absoluteRoutesFile, content);
+		else if (routerType === "angular-router") parseResult = parseAngularRouterConfig(absoluteRoutesFile, content);
 		else if (routerType === "react-router") parseResult = parseReactRouterConfig(absoluteRoutesFile, content);
-		else parseResult = parseVueRouterConfig(absoluteRoutesFile, content);
+		else if (routerType === "vue-router") parseResult = parseVueRouterConfig(absoluteRoutesFile, content);
+		else {
+			logger.warn(`Could not auto-detect router type for ${logger.path(routesFile)}. Attempting to parse as Vue Router.`);
+			logger.log(`  ${logger.dim("If parsing fails, check that your router imports are explicit.")}`);
+			hasWarnings = true;
+			parseResult = parseVueRouterConfig(absoluteRoutesFile, content);
+		}
 		for (const warning of parseResult.warnings) {
 			logger.warn(warning);
 			hasWarnings = true;
@@ -3131,6 +3920,8 @@ const prImpactCommand = define({
 
 //#endregion
 //#region src/index.ts
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const version = JSON.parse(readFileSync(join(__dirname, "..", "package.json"), "utf-8")).version;
 const mainCommand = define({
 	name: "screenbook",
 	description: "Screen catalog and navigation graph generator",
@@ -3152,7 +3943,7 @@ const mainCommand = define({
 });
 await cli(process.argv.slice(2), mainCommand, {
 	name: "screenbook",
-	version: "0.0.1",
+	version,
 	subCommands: {
 		init: initCommand,
 		generate: generateCommand,