create-krispya 0.10.0 → 0.11.0

package/dist/cli.cjs

@@ -9,7 +9,7 @@ const node_module = require('node:module');
 const node_path = require('node:path');
 const node_process = require('node:process');
 const undici = require('undici');
-const workspace = require('./shared/create-krispya.DTHeUlq4.cjs');
+const workspace = require('./shared/create-krispya.8KaGuRpu.cjs');
 const Conf = require('conf');
 const promises = require('fs/promises');
 const fs = require('fs');
@@ -20,15 +20,15 @@ var _documentCurrentScript = typeof document !== 'undefined' ? document.currentS
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
 
 function _interopNamespaceCompat(e) {
-    if (e && typeof e === 'object' && 'default' in e) return e;
-    const n = Object.create(null);
-    if (e) {
-        for (const k in e) {
-            n[k] = e[k];
-        }
+  if (e && typeof e === 'object' && 'default' in e) return e;
+  const n = Object.create(null);
+  if (e) {
+    for (const k in e) {
+      n[k] = e[k];
     }
-    n.default = e;
-    return n;
+  }
+  n.default = e;
+  return n;
 }
 
 const p__namespace = /*#__PURE__*/_interopNamespaceCompat(p);
@@ -90,9 +90,7 @@ function formatConfigSummary(options, inherited) {
   const testing = options.testing ?? (projectType === "library" ? "vitest" : "none");
   lines.push(formatRow("Testing", testing));
   if (!inherited) {
-    lines.push(
-      formatRow("Editor config", options.ide === "none" ? "generic" : "generic + vscode")
-    );
+    lines.push(formatRow("Editor config", options.ide === "none" ? "generic" : "generic + vscode"));
     const configStrategy = options.configStrategy ?? "stealth";
     lines.push(formatRow("Config strategy", configStrategy));
   }
@@ -556,7 +554,7 @@ async function promptForOptions(name, presets) {
   let projectName = name;
   if (!projectName) {
     const nameResult = await p__namespace.text({
-      message: "What is your project named?",
+      message: "Project name:",
       placeholder: workspace.generateRandomName(),
       defaultValue: workspace.generateRandomName(),
       validate: (value) => {
@@ -570,7 +568,7 @@ async function promptForOptions(name, presets) {
     projectName = nameResult;
   }
   const projectType = await p__namespace.select({
-    message: "Project type",
+    message: "Project type:",
     options: [
       { value: "app", label: "Application" },
       { value: "library", label: "Library" },
@@ -599,11 +597,11 @@ function presetsToInheritedSettings(presets) {
 }
 async function promptForPackageOptions(projectName, projectType, inheritedSettings, presets) {
   const templateSelection = await p__namespace.select({
-    message: "Select a template",
+    message: "Select a template:",
     options: [
-      { value: "vanilla", label: "Vanilla" },
-      { value: "react", label: "React", hint: "experimental" },
-      { value: "r3f", label: "React Three Fiber", hint: "experimental" }
+      { value: "vanilla", label: color__default.yellow("Vanilla") },
+      { value: "react", label: color__default.cyan("React"), hint: "experimental" },
+      { value: "r3f", label: color__default.magenta("React Three Fiber"), hint: "experimental" }
     ],
     initialValue: presets?.template ? workspace.getBaseTemplate(presets.template) : "vanilla"
   });
@@ -837,10 +835,7 @@ async function getWorkspacePackages(monorepoRoot) {
     for (const entry of entries) {
       if (!entry.isDirectory()) continue;
       try {
-        const content = await promises$1.readFile(
-          node_path.join(packagesDir, entry.name, "package.json"),
-          "utf-8"
-        );
+        const content = await promises$1.readFile(node_path.join(packagesDir, entry.name, "package.json"), "utf-8");
         const pkg = JSON.parse(content);
         if (pkg.name) names.push(pkg.name);
       } catch {
@@ -1117,9 +1112,7 @@ async function handleFixCommand(options) {
   spinner.start("Fixing workspace...");
   try {
     const files = {};
-    const tsConfigExists = await fileExists$1(
-      node_path.join(monorepoRoot, ".config/typescript/package.json")
-    );
+    const tsConfigExists = await fileExists$1(node_path.join(monorepoRoot, ".config/typescript/package.json"));
     if (!tsConfigExists) {
       workspace.renderTypescriptConfigPackage(files);
     }
@@ -1127,9 +1120,7 @@ async function handleFixCommand(options) {
       const oxlintExists = await fileExists$1(node_path.join(monorepoRoot, ".config/oxlint/package.json"));
       if (!oxlintExists) workspace.renderOxlintConfigPackage(files);
     } else if (linter === "eslint") {
-      const eslintPkgExists = await fileExists$1(
-        node_path.join(monorepoRoot, ".config/eslint/package.json")
-      );
+      const eslintPkgExists = await fileExists$1(node_path.join(monorepoRoot, ".config/eslint/package.json"));
       if (!eslintPkgExists) {
         if (existingConfigs.eslintConfigPath) {
           await migrateEslintConfig(monorepoRoot, files);
@@ -1142,9 +1133,7 @@ async function handleFixCommand(options) {
       const oxfmtExists = await fileExists$1(node_path.join(monorepoRoot, ".config/oxfmt/package.json"));
       if (!oxfmtExists) workspace.renderOxfmtConfigPackage(files);
     } else if (formatter === "prettier") {
-      const prettierPkgExists = await fileExists$1(
-        node_path.join(monorepoRoot, ".config/prettier/package.json")
-      );
+      const prettierPkgExists = await fileExists$1(node_path.join(monorepoRoot, ".config/prettier/package.json"));
       if (!prettierPkgExists) {
         if (existingConfigs.prettierConfigPath) {
           await migratePrettierConfig(monorepoRoot, files);
@@ -1206,9 +1195,7 @@ async function handleFixCommand(options) {
       console.log(color__default.dim(`  Generated ${pkgName}`));
     }
     const vscodeSettingsExists = await fileExists$1(node_path.join(monorepoRoot, ".vscode/settings.json"));
-    const vscodeExtensionsExists = await fileExists$1(
-      node_path.join(monorepoRoot, ".vscode/extensions.json")
-    );
+    const vscodeExtensionsExists = await fileExists$1(node_path.join(monorepoRoot, ".vscode/extensions.json"));
     const vscodeExists = vscodeSettingsExists && vscodeExtensionsExists;
     if (!vscodeExists) {
       let addVscode = false;
@@ -1264,10 +1251,31 @@ async function handleFixCommand(options) {
   }
 }
 
+function detectViteTemplate(pkg) {
+  if (!hasPackage(pkg, "vite")) return void 0;
+  if (hasPackage(pkg, "@react-three/fiber")) return "r3f";
+  if (hasPackage(pkg, "react") || hasPackage(pkg, "@vitejs/plugin-react")) return "react";
+  return "vanilla";
+}
+function renderExpectedViteConfig(template) {
+  const isReact = template === "react" || template === "r3f";
+  const codeSnippets = isReact ? { "vite-config-import": ["import react from '@vitejs/plugin-react';"] } : {};
+  const viteConfig = {
+    base: "./"
+  };
+  if (isReact) {
+    viteConfig.plugins = ["$raw:react()"];
+  }
+  if (template === "r3f") {
+    viteConfig.resolve = { dedupe: ["three"] };
+  }
+  return workspace.renderViteConfig({ viteConfig, codeSnippets });
+}
 async function detectCurrentConfig(root, isMonorepo = true) {
   let name = root.split(/[/\\]/).pop() ?? "workspace";
   let packageManager = "pnpm";
   let hasTypecheck = false;
+  let viteTemplate;
   try {
     const pkgPath = path.join(root, "package.json");
     const content = await promises.readFile(pkgPath, "utf-8");
@@ -1279,6 +1287,7 @@ async function detectCurrentConfig(root, isMonorepo = true) {
       packageManager = pkgJson.packageManager.split("@")[0] ?? packageManager;
     }
     hasTypecheck = pkgJson.scripts?.typecheck != null;
+    viteTemplate = detectViteTemplate(pkgJson);
   } catch {
   }
   const tooling = await workspace.detectTooling(root);
@@ -1290,7 +1299,8 @@ async function detectCurrentConfig(root, isMonorepo = true) {
     packageManager,
     isMonorepo,
     configStrategy,
-    hasTypecheck
+    hasTypecheck,
+    viteTemplate
   };
 }
 async function detectSinglePackageConfigStrategy(root) {
@@ -1354,6 +1364,9 @@ async function planExpectedFiles(config) {
       content: workspace.toPrettierIgnoreContent()
     };
   }
+  if (!isMonorepo && config.viteTemplate != null) {
+    rootConfig["vite.config.ts"] = renderExpectedViteConfig(config.viteTemplate);
+  }
   if (linter === "biome" || formatter === "biome") {
     const biomeVersion = workspace.getResolvedPackageVersion(versions, "@biomejs/biome");
     const biomeConfig = {
@@ -1907,9 +1920,7 @@ async function collectUpdateCategories(projectRoot, config, isMonorepo) {
       category: "package-json",
       label: "package.json",
       changes: packageJsonScriptChanges,
-      hasUserModifications: packageJsonScriptChanges.some(
-        (change) => change.status === "modified"
-      )
+      hasUserModifications: packageJsonScriptChanges.some((change) => change.status === "modified")
     });
   }
   const oxlintConfigChanges = await getOxlintConfigReplacementUpdates(projectRoot, config);
@@ -1928,9 +1939,7 @@ async function collectUpdateCategories(projectRoot, config, isMonorepo) {
         category: "workspace-config",
         label: "Workspace Config",
         changes: workspaceConfigChanges,
-        hasUserModifications: workspaceConfigChanges.some(
-          (change) => change.status === "modified"
-        )
+        hasUserModifications: workspaceConfigChanges.some((change) => change.status === "modified")
       });
     }
   }
@@ -1970,9 +1979,7 @@ async function processUpdateCategory(category, projectRoot, options) {
   if (changesToApply.length > 0) {
     await applyUpdates(changesToApply, projectRoot);
     const addedCount = changesToApply.filter((change) => change.status === "added").length;
-    const updatedFilesCount = changesToApply.filter(
-      (change) => change.status === "modified"
-    ).length;
+    const updatedFilesCount = changesToApply.filter((change) => change.status === "modified").length;
     const parts = [];
     if (addedCount > 0) parts.push(`added ${addedCount}`);
     if (updatedFilesCount > 0) parts.push(`updated ${updatedFilesCount}`);
@@ -2399,10 +2406,7 @@ async function main() {
   ).option(
     "--node-version <version>",
     'set Node.js version for engines.node field (default: "latest")'
-  ).option("--workspace", "Add package to current monorepo workspace (non-interactive)").option("--dir <directory>", "Target directory for --workspace (default: apps/ or packages/)").option("--clear-config", "Clear saved preferences").option("--config-path", "Print the path to the config file").option("--check", "Check if current directory is in a valid monorepo workspace").option("--fix", "Fix monorepo by generating missing .config packages").option("--update", "Update monorepo workspace to latest configuration").option("-y, --yes", "Non-interactive mode - accept all prompts").option(
-    "--path <directory>",
-    "Run in specified directory instead of current working directory"
-  ).action(async (name, options) => {
+  ).option("--workspace", "Add package to current monorepo workspace (non-interactive)").option("--dir <directory>", "Target directory for --workspace (default: apps/ or packages/)").option("--clear-config", "Clear saved preferences").option("--config-path", "Print the path to the config file").option("--check", "Check if current directory is in a valid monorepo workspace").option("--fix", "Fix monorepo by generating missing .config packages").option("--update", "Update monorepo workspace to latest configuration").option("-y, --yes", "Non-interactive mode - accept all prompts").option("--path <directory>", "Run in specified directory instead of current working directory").action(async (name, options) => {
     if (options.path) {
       process.chdir(options.path);
     }
@@ -2464,9 +2468,7 @@ async function main() {
     }
     if (options.dir && !options.workspace) {
       console.error(color__default.red("Error:") + " --dir requires --workspace flag");
-      console.log(
-        color__default.dim("  Example: pnpm create krispya my-lib --workspace --dir examples")
-      );
+      console.log(color__default.dim("  Example: pnpm create krispya my-lib --workspace --dir examples"));
       process.exit(1);
     }
     if (options.workspace) {

package/dist/cli.mjs

@@ -7,7 +7,7 @@ import { createRequire } from 'node:module';
 import { resolve, join as join$1, dirname } from 'node:path';
 import { cwd } from 'node:process';
 import { fetch } from 'undici';
-import { q as getEngineName, a as getBaseTemplate, b as getLanguageFromTemplate, s as getPackageManagerName, g as generateRandomName, A as ALL_AI_PLATFORMS, t as AI_PLATFORM_LABELS, x as AI_PLATFORM_HINTS, d as detectTooling, y as parsePackageManager, z as parseEngine, p as parseWorkspaceYamlContent, B as renderTypescriptConfigPackage, C as renderOxlintConfigPackage, D as renderEslintConfigPackage, E as renderOxfmtConfigPackage, F as renderPrettierConfigPackage, G as resolveMonorepoRootPackageVersions, H as getResolvedPackageVersion, I as renderVscodeFiles, J as renderAiFiles, K as renderVscodeFiles$1, L as renderEditorConfig, M as renderGitignore, N as toPrettierIgnoreContent, O as mergePackageJsonScripts, P as packageJsonScripts, Q as resolveDefaultPackageJsonScripts, R as formatResolvedPackageVersion, S as renderOxlintConfig, k as planProject, r as resolveProjectPlanInput, v as validatePackageName, o as resolveWorkspacePlanInput, l as planWorkspace } from './shared/create-krispya.DKKVmsqH.mjs';
+import { q as getEngineName, a as getBaseTemplate, b as getLanguageFromTemplate, s as getPackageManagerName, g as generateRandomName, A as ALL_AI_PLATFORMS, t as AI_PLATFORM_LABELS, x as AI_PLATFORM_HINTS, d as detectTooling, y as parsePackageManager, z as parseEngine, p as parseWorkspaceYamlContent, B as renderTypescriptConfigPackage, C as renderOxlintConfigPackage, D as renderEslintConfigPackage, E as renderOxfmtConfigPackage, F as renderPrettierConfigPackage, G as resolveMonorepoRootPackageVersions, H as getResolvedPackageVersion, I as renderVscodeFiles, J as renderAiFiles, K as renderVscodeFiles$1, L as renderEditorConfig, M as renderGitignore, N as toPrettierIgnoreContent, O as mergePackageJsonScripts, P as renderViteConfig, Q as packageJsonScripts, R as resolveDefaultPackageJsonScripts, S as formatResolvedPackageVersion, T as renderOxlintConfig, k as planProject, r as resolveProjectPlanInput, v as validatePackageName, o as resolveWorkspacePlanInput, l as planWorkspace } from './shared/create-krispya.DblF9gKc.mjs';
 import Conf from 'conf';
 import { access, constants, readFile as readFile$1, mkdir as mkdir$1, writeFile as writeFile$1 } from 'fs/promises';
 import { constants as constants$2 } from 'fs';
@@ -69,9 +69,7 @@ function formatConfigSummary(options, inherited) {
   const testing = options.testing ?? (projectType === "library" ? "vitest" : "none");
   lines.push(formatRow("Testing", testing));
   if (!inherited) {
-    lines.push(
-      formatRow("Editor config", options.ide === "none" ? "generic" : "generic + vscode")
-    );
+    lines.push(formatRow("Editor config", options.ide === "none" ? "generic" : "generic + vscode"));
     const configStrategy = options.configStrategy ?? "stealth";
     lines.push(formatRow("Config strategy", configStrategy));
   }
@@ -535,7 +533,7 @@ async function promptForOptions(name, presets) {
   let projectName = name;
   if (!projectName) {
     const nameResult = await p.text({
-      message: "What is your project named?",
+      message: "Project name:",
       placeholder: generateRandomName(),
       defaultValue: generateRandomName(),
       validate: (value) => {
@@ -549,7 +547,7 @@ async function promptForOptions(name, presets) {
     projectName = nameResult;
   }
   const projectType = await p.select({
-    message: "Project type",
+    message: "Project type:",
     options: [
       { value: "app", label: "Application" },
       { value: "library", label: "Library" },
@@ -578,11 +576,11 @@ function presetsToInheritedSettings(presets) {
 }
 async function promptForPackageOptions(projectName, projectType, inheritedSettings, presets) {
   const templateSelection = await p.select({
-    message: "Select a template",
+    message: "Select a template:",
     options: [
-      { value: "vanilla", label: "Vanilla" },
-      { value: "react", label: "React", hint: "experimental" },
-      { value: "r3f", label: "React Three Fiber", hint: "experimental" }
+      { value: "vanilla", label: color.yellow("Vanilla") },
+      { value: "react", label: color.cyan("React"), hint: "experimental" },
+      { value: "r3f", label: color.magenta("React Three Fiber"), hint: "experimental" }
     ],
     initialValue: presets?.template ? getBaseTemplate(presets.template) : "vanilla"
   });
@@ -816,10 +814,7 @@ async function getWorkspacePackages(monorepoRoot) {
     for (const entry of entries) {
       if (!entry.isDirectory()) continue;
       try {
-        const content = await readFile(
-          join$1(packagesDir, entry.name, "package.json"),
-          "utf-8"
-        );
+        const content = await readFile(join$1(packagesDir, entry.name, "package.json"), "utf-8");
         const pkg = JSON.parse(content);
         if (pkg.name) names.push(pkg.name);
       } catch {
@@ -1096,9 +1091,7 @@ async function handleFixCommand(options) {
   spinner.start("Fixing workspace...");
   try {
     const files = {};
-    const tsConfigExists = await fileExists$1(
-      join$1(monorepoRoot, ".config/typescript/package.json")
-    );
+    const tsConfigExists = await fileExists$1(join$1(monorepoRoot, ".config/typescript/package.json"));
     if (!tsConfigExists) {
       renderTypescriptConfigPackage(files);
     }
@@ -1106,9 +1099,7 @@ async function handleFixCommand(options) {
       const oxlintExists = await fileExists$1(join$1(monorepoRoot, ".config/oxlint/package.json"));
       if (!oxlintExists) renderOxlintConfigPackage(files);
     } else if (linter === "eslint") {
-      const eslintPkgExists = await fileExists$1(
-        join$1(monorepoRoot, ".config/eslint/package.json")
-      );
+      const eslintPkgExists = await fileExists$1(join$1(monorepoRoot, ".config/eslint/package.json"));
       if (!eslintPkgExists) {
         if (existingConfigs.eslintConfigPath) {
           await migrateEslintConfig(monorepoRoot, files);
@@ -1121,9 +1112,7 @@ async function handleFixCommand(options) {
       const oxfmtExists = await fileExists$1(join$1(monorepoRoot, ".config/oxfmt/package.json"));
       if (!oxfmtExists) renderOxfmtConfigPackage(files);
     } else if (formatter === "prettier") {
-      const prettierPkgExists = await fileExists$1(
-        join$1(monorepoRoot, ".config/prettier/package.json")
-      );
+      const prettierPkgExists = await fileExists$1(join$1(monorepoRoot, ".config/prettier/package.json"));
       if (!prettierPkgExists) {
         if (existingConfigs.prettierConfigPath) {
           await migratePrettierConfig(monorepoRoot, files);
@@ -1185,9 +1174,7 @@ async function handleFixCommand(options) {
       console.log(color.dim(`  Generated ${pkgName}`));
     }
     const vscodeSettingsExists = await fileExists$1(join$1(monorepoRoot, ".vscode/settings.json"));
-    const vscodeExtensionsExists = await fileExists$1(
-      join$1(monorepoRoot, ".vscode/extensions.json")
-    );
+    const vscodeExtensionsExists = await fileExists$1(join$1(monorepoRoot, ".vscode/extensions.json"));
     const vscodeExists = vscodeSettingsExists && vscodeExtensionsExists;
     if (!vscodeExists) {
       let addVscode = false;
@@ -1243,10 +1230,31 @@ async function handleFixCommand(options) {
   }
 }
 
+function detectViteTemplate(pkg) {
+  if (!hasPackage(pkg, "vite")) return void 0;
+  if (hasPackage(pkg, "@react-three/fiber")) return "r3f";
+  if (hasPackage(pkg, "react") || hasPackage(pkg, "@vitejs/plugin-react")) return "react";
+  return "vanilla";
+}
+function renderExpectedViteConfig(template) {
+  const isReact = template === "react" || template === "r3f";
+  const codeSnippets = isReact ? { "vite-config-import": ["import react from '@vitejs/plugin-react';"] } : {};
+  const viteConfig = {
+    base: "./"
+  };
+  if (isReact) {
+    viteConfig.plugins = ["$raw:react()"];
+  }
+  if (template === "r3f") {
+    viteConfig.resolve = { dedupe: ["three"] };
+  }
+  return renderViteConfig({ viteConfig, codeSnippets });
+}
 async function detectCurrentConfig(root, isMonorepo = true) {
   let name = root.split(/[/\\]/).pop() ?? "workspace";
   let packageManager = "pnpm";
   let hasTypecheck = false;
+  let viteTemplate;
   try {
     const pkgPath = join(root, "package.json");
     const content = await readFile$1(pkgPath, "utf-8");
@@ -1258,6 +1266,7 @@ async function detectCurrentConfig(root, isMonorepo = true) {
       packageManager = pkgJson.packageManager.split("@")[0] ?? packageManager;
     }
     hasTypecheck = pkgJson.scripts?.typecheck != null;
+    viteTemplate = detectViteTemplate(pkgJson);
   } catch {
   }
   const tooling = await detectTooling(root);
@@ -1269,7 +1278,8 @@ async function detectCurrentConfig(root, isMonorepo = true) {
     packageManager,
     isMonorepo,
     configStrategy,
-    hasTypecheck
+    hasTypecheck,
+    viteTemplate
   };
 }
 async function detectSinglePackageConfigStrategy(root) {
@@ -1333,6 +1343,9 @@ async function planExpectedFiles(config) {
       content: toPrettierIgnoreContent()
     };
   }
+  if (!isMonorepo && config.viteTemplate != null) {
+    rootConfig["vite.config.ts"] = renderExpectedViteConfig(config.viteTemplate);
+  }
   if (linter === "biome" || formatter === "biome") {
     const biomeVersion = getResolvedPackageVersion(versions, "@biomejs/biome");
     const biomeConfig = {
@@ -1886,9 +1899,7 @@ async function collectUpdateCategories(projectRoot, config, isMonorepo) {
       category: "package-json",
       label: "package.json",
       changes: packageJsonScriptChanges,
-      hasUserModifications: packageJsonScriptChanges.some(
-        (change) => change.status === "modified"
-      )
+      hasUserModifications: packageJsonScriptChanges.some((change) => change.status === "modified")
     });
   }
   const oxlintConfigChanges = await getOxlintConfigReplacementUpdates(projectRoot, config);
@@ -1907,9 +1918,7 @@ async function collectUpdateCategories(projectRoot, config, isMonorepo) {
         category: "workspace-config",
         label: "Workspace Config",
         changes: workspaceConfigChanges,
-        hasUserModifications: workspaceConfigChanges.some(
-          (change) => change.status === "modified"
-        )
+        hasUserModifications: workspaceConfigChanges.some((change) => change.status === "modified")
       });
     }
   }
@@ -1949,9 +1958,7 @@ async function processUpdateCategory(category, projectRoot, options) {
   if (changesToApply.length > 0) {
     await applyUpdates(changesToApply, projectRoot);
     const addedCount = changesToApply.filter((change) => change.status === "added").length;
-    const updatedFilesCount = changesToApply.filter(
-      (change) => change.status === "modified"
-    ).length;
+    const updatedFilesCount = changesToApply.filter((change) => change.status === "modified").length;
     const parts = [];
     if (addedCount > 0) parts.push(`added ${addedCount}`);
     if (updatedFilesCount > 0) parts.push(`updated ${updatedFilesCount}`);
@@ -2378,10 +2385,7 @@ async function main() {
   ).option(
     "--node-version <version>",
     'set Node.js version for engines.node field (default: "latest")'
-  ).option("--workspace", "Add package to current monorepo workspace (non-interactive)").option("--dir <directory>", "Target directory for --workspace (default: apps/ or packages/)").option("--clear-config", "Clear saved preferences").option("--config-path", "Print the path to the config file").option("--check", "Check if current directory is in a valid monorepo workspace").option("--fix", "Fix monorepo by generating missing .config packages").option("--update", "Update monorepo workspace to latest configuration").option("-y, --yes", "Non-interactive mode - accept all prompts").option(
-    "--path <directory>",
-    "Run in specified directory instead of current working directory"
-  ).action(async (name, options) => {
+  ).option("--workspace", "Add package to current monorepo workspace (non-interactive)").option("--dir <directory>", "Target directory for --workspace (default: apps/ or packages/)").option("--clear-config", "Clear saved preferences").option("--config-path", "Print the path to the config file").option("--check", "Check if current directory is in a valid monorepo workspace").option("--fix", "Fix monorepo by generating missing .config packages").option("--update", "Update monorepo workspace to latest configuration").option("-y, --yes", "Non-interactive mode - accept all prompts").option("--path <directory>", "Run in specified directory instead of current working directory").action(async (name, options) => {
     if (options.path) {
       process.chdir(options.path);
     }
@@ -2443,9 +2447,7 @@ async function main() {
     }
     if (options.dir && !options.workspace) {
       console.error(color.red("Error:") + " --dir requires --workspace flag");
-      console.log(
-        color.dim("  Example: pnpm create krispya my-lib --workspace --dir examples")
-      );
+      console.log(color.dim("  Example: pnpm create krispya my-lib --workspace --dir examples"));
       process.exit(1);
     }
     if (options.workspace) {

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const workspace = require('./shared/create-krispya.DTHeUlq4.cjs');
+const workspace = require('./shared/create-krispya.8KaGuRpu.cjs');
 require('fs/promises');
 require('fs');
 require('path');

package/dist/index.mjs

@@ -1,4 +1,4 @@
-export { d as detectTooling, g as generateRandomName, a as getBaseTemplate, b as getLanguageFromTemplate, c as getLatestNodeVersion, e as getLatestNpmCliVersion, f as getLatestNpmMajorVersion, h as getLatestNpmVersion, i as getLatestPnpmVersion, j as getLatestYarnVersion, m as merge, p as parseWorkspaceYamlContent, k as planProject, l as planWorkspace, n as projectPlanInputToOptions, r as resolveProjectPlanInput, o as resolveWorkspacePlanInput, u as unique, v as validatePackageName, w as workspacePlanInputToMonorepoParams } from './shared/create-krispya.DKKVmsqH.mjs';
+export { d as detectTooling, g as generateRandomName, a as getBaseTemplate, b as getLanguageFromTemplate, c as getLatestNodeVersion, e as getLatestNpmCliVersion, f as getLatestNpmMajorVersion, h as getLatestNpmVersion, i as getLatestPnpmVersion, j as getLatestYarnVersion, m as merge, p as parseWorkspaceYamlContent, k as planProject, l as planWorkspace, n as projectPlanInputToOptions, r as resolveProjectPlanInput, o as resolveWorkspacePlanInput, u as unique, v as validatePackageName, w as workspacePlanInputToMonorepoParams } from './shared/create-krispya.DblF9gKc.mjs';
 import 'fs/promises';
 import 'fs';
 import 'path';

package/dist/shared/{create-krispya.DTHeUlq4.cjs → create-krispya.8KaGuRpu.cjs}

@@ -198,9 +198,7 @@ function merge(target, modification) {
   const targetLabel = JSON.stringify(target);
   const modificationLabel = JSON.stringify(modification);
   if (modification == null) {
-    throw new Error(
-      `Cannot merge "${modificationLabel}" modification into target "${targetLabel}"`
-    );
+    throw new Error(`Cannot merge "${modificationLabel}" modification into target "${targetLabel}"`);
   }
   if (target == null) {
     return modification;
@@ -880,10 +878,7 @@ function renderTypescriptConfig(baseTemplateOrParams) {
     const tsConfig = {
       $schema: "https://json.schemastore.org/tsconfig",
       files: [],
-      references: [
-        { path: "./.config/tsconfig.app.json" },
-        { path: "./.config/tsconfig.node.json" }
-      ]
+      references: [{ path: "./.config/tsconfig.app.json" }, { path: "./.config/tsconfig.node.json" }]
     };
     files["tsconfig.json"] = {
       type: "text",
@@ -1147,10 +1142,7 @@ function renderPackageJson(params) {
   const allDevDependencies = { ...devDependencies };
   const engine = getEngineSpec(options.engine);
   if (getEngineName(engine) === "node" && engine.version) {
-    allDevDependencies["@types/node"] ??= formatNodeTypesVersion(
-      options.versions,
-      options.engine
-    );
+    allDevDependencies["@types/node"] ??= formatNodeTypesVersion(options.versions, options.engine);
   }
   packageJson.scripts = resolvedScripts;
   packageJson.dependencies = sortKeys(allDependencies);
@@ -1251,13 +1243,14 @@ function renderReadme(params) {
   } else if (isReact) {
     architectureDesc = [
       `- \`src/app.${jsxExt}\` defines the main application component`,
-      `- \`src/index.${jsxExt}\` renders the React app into the DOM`,
+      `- \`src/main.${jsxExt}\` renders the React app into the DOM`,
       `- \`tests/\` contains your test files`,
       `- Static assets can be placed in the \`public\` folder`
     ];
   } else {
     architectureDesc = [
-      `- \`app.${jsxExt}\` defines the main application component containing your 3D content`,
+      `- \`src/app.${jsxExt}\` defines the main application component containing your 3D content`,
+      `- \`src/main.${jsxExt}\` renders the React app into the DOM`,
       `- Modify the content inside the \`<Canvas>\` component to change what is visible on screen`,
       `- \`tests/\` contains your test files`,
       `- Static assets can be placed in the \`public\` folder`
@@ -1295,9 +1288,9 @@ const htmlContent = `<!DOCTYPE html>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>$title</title>
 </head>
-<body style="margin: 0; overscroll-behavior: none; user-select: none; touch-action: none;">
+<body>
+    <div id="root"></div>
     <script type="module" src="$indexPath"><\/script>
-    <div style="width: 100dvw; height: 100dvh; overflow: hidden;" id="root"></div>
 </body>
 </html>`;
 const viteHtmlContent = `<!DOCTYPE html>
@@ -1314,6 +1307,7 @@ const viteHtmlContent = `<!DOCTYPE html>
 </html>`;
 const indexContent = `import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import './index.css'
 import { App } from './app.js'
 
 createRoot(document.getElementById('root')!).render(
@@ -1321,28 +1315,31 @@ createRoot(document.getElementById('root')!).render(
     <App />
   </StrictMode>,
 )`;
-const viteIndexContent = `import './style.css'
+const viteIndexContent = `import './index.css'
 
 document.querySelector('#app')!.innerHTML = \`
   <h1>Hello Vite!</h1>
   <p>Edit src/main.ts and save to see HMR in action.</p>
 \``;
-const viteStyleContent = `body {
-  font-family: system-ui, -apple-system, sans-serif;
-  margin: 0;
-  padding: 2rem;
-  min-height: 100vh;
-  background: #1a1a1a;
-  color: #fff;
+const viteStyleContent = `:root {
+  font-family:
+    system-ui,
+    -apple-system,
+    sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
 }
 
-h1 {
-  color: #646cff;
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
 }
 
-a {
-  color: #646cff;
+body {
+  margin: 0;
 }`;
+const viteEnvContent = `/// <reference types="vite/client" />`;
 
 function renderSourceFiles(params) {
   const { name, baseTemplate, language, isLibrary, codeSnippets, replacements } = params;
@@ -1352,6 +1349,9 @@ function renderSourceFiles(params) {
   const isVanilla = baseTemplate === "vanilla";
   const isReact = baseTemplate === "react";
   const isR3f = baseTemplate === "r3f";
+  if (!isLibrary && language === "typescript") {
+    files["src/vite-env.d.ts"] = { type: "text", content: viteEnvContent };
+  }
   if (isLibrary) {
     const libExt = isReact || isR3f ? jsxExt : ext;
     let libContent;
@@ -1385,12 +1385,19 @@ function renderSourceFiles(params) {
     files[`src/index.${libExt}`] = { type: "text", content: libContent };
   } else if (isVanilla) {
     files[`src/main.${ext}`] = { type: "text", content: viteIndexContent };
-    files["src/style.css"] = { type: "text", content: viteStyleContent };
+    files["src/index.css"] = { type: "text", content: viteStyleContent };
     const indexHtml = viteHtmlContent.replace("$indexPath", `./src/main.${ext}`).replace("$title", name);
     files["index.html"] = { type: "text", content: indexHtml };
   } else {
-    files[`src/index.tsx`] = { type: "text", content: indexContent };
-    const indexHtml = htmlContent.replace("$indexPath", language === "javascript" ? "./src/index.jsx" : "./src/index.tsx").replace("$title", name);
+    files[`src/main.${jsxExt}`] = {
+      type: "text",
+      content: language === "typescript" ? indexContent : indexContent.replace(
+        "document.getElementById('root')!",
+        "document.getElementById('root')"
+      )
+    };
+    files["src/index.css"] = { type: "text", content: viteStyleContent };
+    const indexHtml = htmlContent.replace("$indexPath", `./src/main.${jsxExt}`).replace("$title", name);
     files["index.html"] = { type: "text", content: indexHtml };
     codeSnippets["dom-end"]?.reverse();
     codeSnippets["global-end"]?.reverse();
@@ -1432,7 +1439,7 @@ function renderSourceFiles(params) {
     for (const { search, replace } of replacements) {
       appCode = appCode.replace(search, replace);
     }
-    files[`src/app.tsx`] = { type: "text", content: appCode };
+    files[`src/app.${jsxExt}`] = { type: "text", content: appCode };
   }
   return files;
 }
@@ -1756,7 +1763,7 @@ function formatValue(value, indent) {
     if (value.startsWith("$raw:")) {
       return value.slice(5);
     }
-    return JSON.stringify(value);
+    return `'${value.replaceAll("\\", "\\\\").replaceAll("'", "\\'")}'`;
   }
   if (typeof value === "number" || typeof value === "boolean") {
     return String(value);
@@ -1764,8 +1771,17 @@ function formatValue(value, indent) {
   if (value === null) {
     return "null";
   }
+  if (value === void 0) {
+    return "undefined";
+  }
+  if (typeof value === "bigint") {
+    return value.toString();
+  }
   if (Array.isArray(value)) {
     if (value.length === 0) return "[]";
+    if (value.every((item) => item == null || typeof item !== "object")) {
+      return `[${value.map((item) => formatValue(item, indent + 1)).join(", ")}]`;
+    }
     const items = value.map((v) => `${innerSpaces}${formatValue(v, indent + 1)}`);
     return `[
 ${items.join(",\n")}
@@ -1775,22 +1791,22 @@ ${spaces}]`;
     const entries = Object.entries(value);
     if (entries.length === 0) return "{}";
     const props = entries.map(
-      ([key, val]) => `${innerSpaces}${key}: ${formatValue(val, indent + 1)}`
+      ([key, val]) => `${innerSpaces}${key}: ${formatValue(val, indent + 1)},`
     );
     return `{
-${props.join(",\n")}
+${props.join("\n")}
 ${spaces}}`;
   }
-  return String(value);
+  throw new TypeError(`Unsupported vite config value type: ${typeof value}`);
 }
 function renderViteConfig(params) {
   const { viteConfig, codeSnippets } = params;
   const configBody = formatValue(viteConfig, 0);
   const viteConfigContent = [
-    `import { defineConfig } from "vite"`,
+    `import { defineConfig } from 'vite';`,
     ...codeSnippets["vite-config-import"] ?? [],
     ``,
-    `export default defineConfig(${configBody})`,
+    `export default defineConfig(${configBody});`,
     ``
   ].join("\n");
   return { type: "text", content: viteConfigContent };
@@ -2999,16 +3015,10 @@ function generateProvidersModule(builder) {
     const resolvedProviders = providers.map((provider) => providerDefs[provider]);
     const providerProps = resolvedProviders.flatMap((provider) => provider.props || []);
     const providerImports = resolvedProviders.flatMap((provider) => provider.import);
-    const wrappedComponents = resolvedProviders.filter(
-      (provider) => provider.type === "wrapped-jsx"
-    );
-    const inlineComponents = resolvedProviders.filter(
-      (provider) => provider.type === "inline-jsx"
-    );
-    const layoutEffects = resolvedProviders.filter(
-      (provider) => provider.type === "layout-effect"
-    );
-    const declaredProps = providerProps.map((prop) => `${prop.declaredPropName} = ${prop.declaredPropDefaultValue}`).join(", ");
+    const wrappedComponents = resolvedProviders.filter((provider) => provider.type === "wrapped-jsx");
+    const inlineComponents = resolvedProviders.filter((provider) => provider.type === "inline-jsx");
+    const layoutEffects = resolvedProviders.filter((provider) => provider.type === "layout-effect");
+    const declaredProps = providerProps.map((prop) => `${prop.declaredPropName} = ${String(prop.declaredPropDefaultValue)}`).join(", ");
     const declaredTypes = providerProps.map((prop) => `${prop.declaredPropName}?: ${prop.declaredPropType}`).join("; ");
     const reactImports = ["type ReactNode"];
     if (layoutEffects.length) {
@@ -3025,11 +3035,11 @@ ${jsdoc.split("\n").map((line) => `       * ${line}`).join("\n")}
         ${layoutEffects.length ? `
           useLayoutEffect(() => {
             ${layoutEffects.map((effect) => effect.code).join("\n")}
-          }, [${layoutEffects.map((effect) => effect.props?.[0]?.propValue)}]);
+          }, [${layoutEffects.map((effect) => effect.props?.[0]?.propValue).join(", ")}]);
         ` : ""}
         return (
           <>
-            ${inlineComponents.map((provider) => provider.code)}
+            ${inlineComponents.map((provider) => provider.code).join("\n")}
             ${wrappedComponents.reduce((acc, provider) => {
         const props = provider.props?.map((prop) => `${prop.propName}={${prop.propValue}}`).join(" ");
         return `<${provider.component} ${props}>${acc}</${provider.component}>`;
@@ -3288,7 +3298,7 @@ function planXr(builder, options) {
   );
   builder.inject("scene-start", "<XR store={store}>");
   builder.inject("scene-end", "</XR>");
-  builder.inject("vite-config-import", "import basicSsl from '@vitejs/plugin-basic-ssl'");
+  builder.inject("vite-config-import", "import basicSsl from '@vitejs/plugin-basic-ssl';");
   builder.configureVite({
     server: {
       host: true
@@ -3604,7 +3614,7 @@ function createProjectPlan(planInput) {
   const vscodeSettings = {};
   const scripts = {};
   if (!isLibrary && (isReact || isR3f)) {
-    codeSnippets["vite-config-import"] = ["import react from '@vitejs/plugin-react'"];
+    codeSnippets["vite-config-import"] = ["import react from '@vitejs/plugin-react';"];
   }
   if (!isLibrary && isR3f) {
     codeSnippets["import"] = [`import { Canvas } from "@react-three/fiber"`];
@@ -3881,6 +3891,7 @@ exports.renderOxlintConfig = renderOxlintConfig;
 exports.renderOxlintConfigPackage = renderOxlintConfigPackage;
 exports.renderPrettierConfigPackage = renderPrettierConfigPackage;
 exports.renderTypescriptConfigPackage = renderTypescriptConfigPackage;
+exports.renderViteConfig = renderViteConfig;
 exports.renderVscodeFiles = renderVscodeFiles;
 exports.renderVscodeFiles$1 = renderVscodeFiles$1;
 exports.resolveDefaultPackageJsonScripts = resolveDefaultPackageJsonScripts;

package/dist/shared/{create-krispya.DKKVmsqH.mjs → create-krispya.DblF9gKc.mjs}

@@ -192,9 +192,7 @@ function merge(target, modification) {
   const targetLabel = JSON.stringify(target);
   const modificationLabel = JSON.stringify(modification);
   if (modification == null) {
-    throw new Error(
-      `Cannot merge "${modificationLabel}" modification into target "${targetLabel}"`
-    );
+    throw new Error(`Cannot merge "${modificationLabel}" modification into target "${targetLabel}"`);
   }
   if (target == null) {
     return modification;
@@ -874,10 +872,7 @@ function renderTypescriptConfig(baseTemplateOrParams) {
     const tsConfig = {
       $schema: "https://json.schemastore.org/tsconfig",
       files: [],
-      references: [
-        { path: "./.config/tsconfig.app.json" },
-        { path: "./.config/tsconfig.node.json" }
-      ]
+      references: [{ path: "./.config/tsconfig.app.json" }, { path: "./.config/tsconfig.node.json" }]
     };
     files["tsconfig.json"] = {
       type: "text",
@@ -1141,10 +1136,7 @@ function renderPackageJson(params) {
   const allDevDependencies = { ...devDependencies };
   const engine = getEngineSpec(options.engine);
   if (getEngineName(engine) === "node" && engine.version) {
-    allDevDependencies["@types/node"] ??= formatNodeTypesVersion(
-      options.versions,
-      options.engine
-    );
+    allDevDependencies["@types/node"] ??= formatNodeTypesVersion(options.versions, options.engine);
   }
   packageJson.scripts = resolvedScripts;
   packageJson.dependencies = sortKeys(allDependencies);
@@ -1245,13 +1237,14 @@ function renderReadme(params) {
   } else if (isReact) {
     architectureDesc = [
       `- \`src/app.${jsxExt}\` defines the main application component`,
-      `- \`src/index.${jsxExt}\` renders the React app into the DOM`,
+      `- \`src/main.${jsxExt}\` renders the React app into the DOM`,
       `- \`tests/\` contains your test files`,
       `- Static assets can be placed in the \`public\` folder`
     ];
   } else {
     architectureDesc = [
-      `- \`app.${jsxExt}\` defines the main application component containing your 3D content`,
+      `- \`src/app.${jsxExt}\` defines the main application component containing your 3D content`,
+      `- \`src/main.${jsxExt}\` renders the React app into the DOM`,
       `- Modify the content inside the \`<Canvas>\` component to change what is visible on screen`,
       `- \`tests/\` contains your test files`,
       `- Static assets can be placed in the \`public\` folder`
@@ -1289,9 +1282,9 @@ const htmlContent = `<!DOCTYPE html>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>$title</title>
 </head>
-<body style="margin: 0; overscroll-behavior: none; user-select: none; touch-action: none;">
+<body>
+    <div id="root"></div>
     <script type="module" src="$indexPath"><\/script>
-    <div style="width: 100dvw; height: 100dvh; overflow: hidden;" id="root"></div>
 </body>
 </html>`;
 const viteHtmlContent = `<!DOCTYPE html>
@@ -1308,6 +1301,7 @@ const viteHtmlContent = `<!DOCTYPE html>
 </html>`;
 const indexContent = `import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import './index.css'
 import { App } from './app.js'
 
 createRoot(document.getElementById('root')!).render(
@@ -1315,28 +1309,31 @@ createRoot(document.getElementById('root')!).render(
     <App />
   </StrictMode>,
 )`;
-const viteIndexContent = `import './style.css'
+const viteIndexContent = `import './index.css'
 
 document.querySelector('#app')!.innerHTML = \`
   <h1>Hello Vite!</h1>
   <p>Edit src/main.ts and save to see HMR in action.</p>
 \``;
-const viteStyleContent = `body {
-  font-family: system-ui, -apple-system, sans-serif;
-  margin: 0;
-  padding: 2rem;
-  min-height: 100vh;
-  background: #1a1a1a;
-  color: #fff;
+const viteStyleContent = `:root {
+  font-family:
+    system-ui,
+    -apple-system,
+    sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
 }
 
-h1 {
-  color: #646cff;
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
 }
 
-a {
-  color: #646cff;
+body {
+  margin: 0;
 }`;
+const viteEnvContent = `/// <reference types="vite/client" />`;
 
 function renderSourceFiles(params) {
   const { name, baseTemplate, language, isLibrary, codeSnippets, replacements } = params;
@@ -1346,6 +1343,9 @@ function renderSourceFiles(params) {
   const isVanilla = baseTemplate === "vanilla";
   const isReact = baseTemplate === "react";
   const isR3f = baseTemplate === "r3f";
+  if (!isLibrary && language === "typescript") {
+    files["src/vite-env.d.ts"] = { type: "text", content: viteEnvContent };
+  }
   if (isLibrary) {
     const libExt = isReact || isR3f ? jsxExt : ext;
     let libContent;
@@ -1379,12 +1379,19 @@ function renderSourceFiles(params) {
     files[`src/index.${libExt}`] = { type: "text", content: libContent };
   } else if (isVanilla) {
     files[`src/main.${ext}`] = { type: "text", content: viteIndexContent };
-    files["src/style.css"] = { type: "text", content: viteStyleContent };
+    files["src/index.css"] = { type: "text", content: viteStyleContent };
     const indexHtml = viteHtmlContent.replace("$indexPath", `./src/main.${ext}`).replace("$title", name);
     files["index.html"] = { type: "text", content: indexHtml };
   } else {
-    files[`src/index.tsx`] = { type: "text", content: indexContent };
-    const indexHtml = htmlContent.replace("$indexPath", language === "javascript" ? "./src/index.jsx" : "./src/index.tsx").replace("$title", name);
+    files[`src/main.${jsxExt}`] = {
+      type: "text",
+      content: language === "typescript" ? indexContent : indexContent.replace(
+        "document.getElementById('root')!",
+        "document.getElementById('root')"
+      )
+    };
+    files["src/index.css"] = { type: "text", content: viteStyleContent };
+    const indexHtml = htmlContent.replace("$indexPath", `./src/main.${jsxExt}`).replace("$title", name);
     files["index.html"] = { type: "text", content: indexHtml };
     codeSnippets["dom-end"]?.reverse();
     codeSnippets["global-end"]?.reverse();
@@ -1426,7 +1433,7 @@ function renderSourceFiles(params) {
     for (const { search, replace } of replacements) {
       appCode = appCode.replace(search, replace);
     }
-    files[`src/app.tsx`] = { type: "text", content: appCode };
+    files[`src/app.${jsxExt}`] = { type: "text", content: appCode };
   }
   return files;
 }
@@ -1750,7 +1757,7 @@ function formatValue(value, indent) {
     if (value.startsWith("$raw:")) {
       return value.slice(5);
     }
-    return JSON.stringify(value);
+    return `'${value.replaceAll("\\", "\\\\").replaceAll("'", "\\'")}'`;
   }
   if (typeof value === "number" || typeof value === "boolean") {
     return String(value);
@@ -1758,8 +1765,17 @@ function formatValue(value, indent) {
   if (value === null) {
     return "null";
   }
+  if (value === void 0) {
+    return "undefined";
+  }
+  if (typeof value === "bigint") {
+    return value.toString();
+  }
   if (Array.isArray(value)) {
     if (value.length === 0) return "[]";
+    if (value.every((item) => item == null || typeof item !== "object")) {
+      return `[${value.map((item) => formatValue(item, indent + 1)).join(", ")}]`;
+    }
     const items = value.map((v) => `${innerSpaces}${formatValue(v, indent + 1)}`);
     return `[
 ${items.join(",\n")}
@@ -1769,22 +1785,22 @@ ${spaces}]`;
     const entries = Object.entries(value);
     if (entries.length === 0) return "{}";
     const props = entries.map(
-      ([key, val]) => `${innerSpaces}${key}: ${formatValue(val, indent + 1)}`
+      ([key, val]) => `${innerSpaces}${key}: ${formatValue(val, indent + 1)},`
     );
     return `{
-${props.join(",\n")}
+${props.join("\n")}
 ${spaces}}`;
   }
-  return String(value);
+  throw new TypeError(`Unsupported vite config value type: ${typeof value}`);
 }
 function renderViteConfig(params) {
   const { viteConfig, codeSnippets } = params;
   const configBody = formatValue(viteConfig, 0);
   const viteConfigContent = [
-    `import { defineConfig } from "vite"`,
+    `import { defineConfig } from 'vite';`,
     ...codeSnippets["vite-config-import"] ?? [],
     ``,
-    `export default defineConfig(${configBody})`,
+    `export default defineConfig(${configBody});`,
     ``
   ].join("\n");
   return { type: "text", content: viteConfigContent };
@@ -2993,16 +3009,10 @@ function generateProvidersModule(builder) {
     const resolvedProviders = providers.map((provider) => providerDefs[provider]);
     const providerProps = resolvedProviders.flatMap((provider) => provider.props || []);
     const providerImports = resolvedProviders.flatMap((provider) => provider.import);
-    const wrappedComponents = resolvedProviders.filter(
-      (provider) => provider.type === "wrapped-jsx"
-    );
-    const inlineComponents = resolvedProviders.filter(
-      (provider) => provider.type === "inline-jsx"
-    );
-    const layoutEffects = resolvedProviders.filter(
-      (provider) => provider.type === "layout-effect"
-    );
-    const declaredProps = providerProps.map((prop) => `${prop.declaredPropName} = ${prop.declaredPropDefaultValue}`).join(", ");
+    const wrappedComponents = resolvedProviders.filter((provider) => provider.type === "wrapped-jsx");
+    const inlineComponents = resolvedProviders.filter((provider) => provider.type === "inline-jsx");
+    const layoutEffects = resolvedProviders.filter((provider) => provider.type === "layout-effect");
+    const declaredProps = providerProps.map((prop) => `${prop.declaredPropName} = ${String(prop.declaredPropDefaultValue)}`).join(", ");
     const declaredTypes = providerProps.map((prop) => `${prop.declaredPropName}?: ${prop.declaredPropType}`).join("; ");
     const reactImports = ["type ReactNode"];
     if (layoutEffects.length) {
@@ -3019,11 +3029,11 @@ ${jsdoc.split("\n").map((line) => `       * ${line}`).join("\n")}
         ${layoutEffects.length ? `
           useLayoutEffect(() => {
             ${layoutEffects.map((effect) => effect.code).join("\n")}
-          }, [${layoutEffects.map((effect) => effect.props?.[0]?.propValue)}]);
+          }, [${layoutEffects.map((effect) => effect.props?.[0]?.propValue).join(", ")}]);
         ` : ""}
         return (
           <>
-            ${inlineComponents.map((provider) => provider.code)}
+            ${inlineComponents.map((provider) => provider.code).join("\n")}
             ${wrappedComponents.reduce((acc, provider) => {
         const props = provider.props?.map((prop) => `${prop.propName}={${prop.propValue}}`).join(" ");
         return `<${provider.component} ${props}>${acc}</${provider.component}>`;
@@ -3282,7 +3292,7 @@ function planXr(builder, options) {
   );
   builder.inject("scene-start", "<XR store={store}>");
   builder.inject("scene-end", "</XR>");
-  builder.inject("vite-config-import", "import basicSsl from '@vitejs/plugin-basic-ssl'");
+  builder.inject("vite-config-import", "import basicSsl from '@vitejs/plugin-basic-ssl';");
   builder.configureVite({
     server: {
       host: true
@@ -3598,7 +3608,7 @@ function createProjectPlan(planInput) {
   const vscodeSettings = {};
   const scripts = {};
   if (!isLibrary && (isReact || isR3f)) {
-    codeSnippets["vite-config-import"] = ["import react from '@vitejs/plugin-react'"];
+    codeSnippets["vite-config-import"] = ["import react from '@vitejs/plugin-react';"];
   }
   if (!isLibrary && isR3f) {
     codeSnippets["import"] = [`import { Canvas } from "@react-three/fiber"`];
@@ -3840,4 +3850,4 @@ async function planWorkspace(input) {
   };
 }
 
-export { ALL_AI_PLATFORMS as A, renderTypescriptConfigPackage as B, renderOxlintConfigPackage as C, renderEslintConfigPackage as D, renderOxfmtConfigPackage as E, renderPrettierConfigPackage as F, resolveMonorepoRootPackageVersions as G, getResolvedPackageVersion as H, renderVscodeFiles as I, renderAiFiles as J, renderVscodeFiles$1 as K, renderEditorConfig as L, renderGitignore as M, toPrettierIgnoreContent as N, mergePackageJsonScripts as O, packageJsonScripts as P, resolveDefaultPackageJsonScripts as Q, formatResolvedPackageVersion as R, renderOxlintConfig as S, getBaseTemplate as a, getLanguageFromTemplate as b, getLatestNodeVersion as c, detectTooling as d, getLatestNpmCliVersion as e, getLatestNpmMajorVersion as f, generateRandomName as g, getLatestNpmVersion as h, getLatestPnpmVersion as i, getLatestYarnVersion as j, planProject as k, planWorkspace as l, merge as m, projectPlanInputToOptions as n, resolveWorkspacePlanInput as o, parseWorkspaceYamlContent as p, getEngineName as q, resolveProjectPlanInput as r, getPackageManagerName as s, AI_PLATFORM_LABELS as t, unique as u, validatePackageName as v, workspacePlanInputToMonorepoParams as w, AI_PLATFORM_HINTS as x, parsePackageManager as y, parseEngine as z };
+export { ALL_AI_PLATFORMS as A, renderTypescriptConfigPackage as B, renderOxlintConfigPackage as C, renderEslintConfigPackage as D, renderOxfmtConfigPackage as E, renderPrettierConfigPackage as F, resolveMonorepoRootPackageVersions as G, getResolvedPackageVersion as H, renderVscodeFiles as I, renderAiFiles as J, renderVscodeFiles$1 as K, renderEditorConfig as L, renderGitignore as M, toPrettierIgnoreContent as N, mergePackageJsonScripts as O, renderViteConfig as P, packageJsonScripts as Q, resolveDefaultPackageJsonScripts as R, formatResolvedPackageVersion as S, renderOxlintConfig as T, getBaseTemplate as a, getLanguageFromTemplate as b, getLatestNodeVersion as c, detectTooling as d, getLatestNpmCliVersion as e, getLatestNpmMajorVersion as f, generateRandomName as g, getLatestNpmVersion as h, getLatestPnpmVersion as i, getLatestYarnVersion as j, planProject as k, planWorkspace as l, merge as m, projectPlanInputToOptions as n, resolveWorkspacePlanInput as o, parseWorkspaceYamlContent as p, getEngineName as q, resolveProjectPlanInput as r, getPackageManagerName as s, AI_PLATFORM_LABELS as t, unique as u, validatePackageName as v, workspacePlanInputToMonorepoParams as w, AI_PLATFORM_HINTS as x, parsePackageManager as y, parseEngine as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-krispya",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "🌹 CLI for creating web projects with (my) sensible defaults",
   "keywords": [
     "cli",