sparesdev 0.0.2 → 0.0.3

package/bin/index.js

@@ -3,27 +3,20 @@ import { add } from "../core/add.js";
 import { init } from "../core/init.js";
 import { list } from "../core/list.js";
 import { doctor } from "../core/doctor.js";
-import { frontend } from "../core/frontend.js";
 
 const args = process.argv.slice(2);
 
-// aliases
+// alias support
 const layerMap = {
-  c: "components",
-  l: "layouts",
-  b: "blocks",
-  p: "pages"
+  c: "component",
+  l: "layout"
 };
 
 // ------------------------
-// INIT / DOCTOR / LIST
+// INIT / DOCTOR
 // ------------------------
 if (args[0] === "init") {
-  const mode = args.includes("--full")
-    ? "full"
-    : "minimal";
-
-  await init(mode);
+  await init();
   process.exit();
 }
 
@@ -32,95 +25,65 @@ if (args[0] === "doctor") {
   process.exit();
 }
 
-if (args[0] === "list") {
-  list();
-  process.exit();
-}
-
 // ------------------------
-// SIMPLE ADD
-// sparesdev add button
-// sparesdev add frontend
+// 🔥 GLOBAL LIST (NO LAYER)
+// sparesdev list
 // ------------------------
-if (args[0] === "add") {
-  const item = args[1];
-
-  if (!item) {
-    console.log("❌ Provide a component, block, page, or frontend");
-    process.exit(1);
-  }
-
-  // frontend starter
-  if (item === "frontend") {
-    await frontend();
-    process.exit();
-  }
-
-  add("all", args.slice(1));
+if (args[0] === "list") {
+  list(); // show EVERYTHING
   process.exit();
 }
 
 // ------------------------
-// CATEGORY ADD
-// sparesdev components add button
+// LAYER COMMANDS
 // ------------------------
 let [layer, command, ...rest] = args;
 
 layer = layerMap[layer] || layer;
 
-const validLayers = [
-  "components",
-  "layouts",
-  "blocks",
-  "pages"
-];
-
-if (validLayers.includes(layer)) {
-  switch (command) {
-    case "add":
-      add(layer, rest);
-      break;
+// fallback: sparesdev add button → global
+if (!command) {
+  command = layer;
+  layer = "global";
+  rest = args.slice(1);
+}
 
-    case "list":
-      list(layer);
-      break;
+const validLayers = ["global", "storefront"];
 
-    default:
-      console.log("❌ Invalid command");
-  }
+if (!validLayers.includes(layer)) {
+  console.log(`
+❌ Invalid layer
 
-  process.exit();
+Use:
+  sparesdev global add button
+  sparesdev storefront add product-card
+`);
+  process.exit(1);
 }
 
 // ------------------------
-// HELP
+// ROUTING
 // ------------------------
-console.log(`
+switch (command) {
+  case "add":
+    add(layer, rest);
+    break;
+
+  case "list":
+    list(layer); // 👈 layer-specific
+    break;
+
+  default:
+    console.log(`
 sparesdev CLI
 
 Usage:
-  sparesdev init
-  sparesdev doctor
+  sparesdev global add button
+  sparesdev storefront add product-card
   sparesdev list
 
-  sparesdev add frontend
-  sparesdev add button
-  sparesdev add login-page
-
-Optional category:
-  sparesdev components add button
-  sparesdev layouts add header
-  sparesdev blocks add hero
-  sparesdev pages add login-page
-
-Commands:
-  init       Initialize project
-  doctor     Check setup health
-  list       List all available templates
-
 Aliases:
-  c = components
-  l = layouts
-  b = blocks
-  p = pages
-`);
+  sparesdev g add button
+  sparesdev s add product-card
+`);
+}

package/core/add.js

@@ -6,11 +6,12 @@ import { createRequire } from "module";
 
 const require = createRequire(import.meta.url);
 
+// 🔥 normalize helper (fixes breDCRumb issue)
 function normalize(str) {
   return str.toLowerCase().replace(/[^a-z0-9]/g, "");
 }
 
-export function add(layer, components, options = {}) {
+export function add(layer, components) {
   if (!components.length) {
     console.error("❌ Provide component names");
     process.exit(1);
@@ -18,37 +19,85 @@ export function add(layer, components, options = {}) {
 
   const config = getConfig();
   const lang = "typescript";
-  const packageName = "sparesdev";
+  const packageName = "spares";
+
+  if (!fs.existsSync("src/tokens.css")) {
+    console.log("⚠️ Tailwind v4 tokens missing (src/tokens.css)");
+  }
+
+  checkDeps();
 
   const packageRoot = path.dirname(
     require.resolve(`${packageName}/package.json`)
   );
+
   const projectRoot = process.cwd();
 
-  const installed = [];
+  const utilsPath = path.join(packageRoot, "templates", lang, "utils");
+  const targetUtils = path.join(
+    projectRoot,
+    config.utilsPath || "src/utils"
+  );
+
+  if (!fs.existsSync(targetUtils)) {
+    fs.mkdirSync(targetUtils, { recursive: true });
+    console.log("📁 created utils folder");
+  }
 
-  const searchLayers =
-    layer === "all"
-      ? ["components", "layouts", "blocks", "pages"]
-      : [layer];
+  if (fs.existsSync(utilsPath)) {
+    const cnPath = path.join(targetUtils, "cn.ts");
 
-  const basePaths = searchLayers.map(section => ({
-    type: section,
-    path: path.join(packageRoot, "templates", lang, section),
-    target: path.join(projectRoot, "src", section)
-  }));
+    if (!fs.existsSync(cnPath)) {
+      copyRecursive(utilsPath, targetUtils);
+      console.log("✅ utils (cn) added");
+    } else {
+      console.log("ℹ️ utils already exists, skipping");
+    }
+  }
+
+  const installed = [];
 
   for (const nameInput of components) {
     const name = nameInput;
 
+    let basePaths = [];
+
+    if (layer === "global") {
+      basePaths = [
+        {
+          type: "components",
+          path: path.join(packageRoot, "templates", lang, "global", "components"),
+          target: path.join(projectRoot, "src/global/components")
+        },
+        {
+          type: "layouts",
+          path: path.join(packageRoot, "templates", lang, "global", "layouts"),
+          target: path.join(projectRoot, "src/global/layouts")
+        }
+      ];
+    }
+
+    if (layer === "storefront") {
+      basePaths = [
+        {
+          type: "storefront",
+          path: path.join(packageRoot, "templates", lang, "storefront"),
+          target: path.join(projectRoot, "src/storefront")
+        }
+      ];
+    }
+
     let found = null;
 
     for (const bp of basePaths) {
       if (!fs.existsSync(bp.path)) continue;
+
       const available = fs.readdirSync(bp.path);
+
       const match = available.find(
-        item => normalize(item) === normalize(name)
+        c => normalize(c) === normalize(name)
       );
+
       if (match) {
         found = {
           match,
@@ -60,15 +109,37 @@ export function add(layer, components, options = {}) {
       }
     }
 
+    // ❌ not found → suggest
     if (!found) {
-      console.log(`❌ ${name} not found`);
+      let suggestions = [];
+
+      for (const bp of basePaths) {
+        if (!fs.existsSync(bp.path)) continue;
+
+        const available = fs.readdirSync(bp.path);
+
+        const suggestion = available.find(c =>
+          normalize(c).includes(normalize(name))
+        );
+
+        if (suggestion) suggestions.push(suggestion);
+      }
+
+      if (suggestions.length) {
+        console.log(`❌ ${name} not found. Did you mean: ${suggestions[0]}?`);
+      } else {
+        console.log(`❌ ${name} not found`);
+      }
+
       continue;
     }
 
     fs.mkdirSync(path.dirname(found.dest), { recursive: true });
-    copyRecursive(found.src, found.dest, options);
+
+    copyRecursive(found.src, found.dest);
     installed.push(found.match);
-    console.log(`✅ ${found.match} → src/${found.type}`);
+
+    console.log(`✅ ${found.match} → ${layer}/${found.type}`);
   }
 
   if (installed.length) {
@@ -76,4 +147,26 @@ export function add(layer, components, options = {}) {
   } else {
     console.log("❌ No components installed");
   }
+}
+
+// -------------------------------
+function checkDeps() {
+  try {
+    const pkg = JSON.parse(fs.readFileSync("package.json", "utf-8"));
+    const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+
+    const required = ["clsx", "tailwind-merge"];
+    const missing = required.filter(d => !deps?.[d]);
+
+    if (missing.length) {
+      console.log(`
+⚠️ Missing dependencies: ${missing.join(", ")}
+
+Run:
+npm install ${missing.join(" ")}
+`);
+    }
+  } catch {
+    console.log("⚠️ Could not read package.json");
+  }
 }

package/core/init.js

@@ -1,109 +1,315 @@
-#!/usr/bin/env node
 import fs from "fs";
-import path from "path";
-import { copyRecursive } from "../utils/copy.js";
-import { createRequire } from "module";
+import { execSync } from "child_process";
 
-const require = createRequire(import.meta.url);
+// -----------------------------
+// 📦 Dependencies
+// -----------------------------
+function getMissingDependencies() {
+  const required = [
+    "react",
+    "react-dom",
+    "react-router-dom",
+    "clsx",
+    "tailwind-merge",
+    "class-variance-authority"
+  ];
 
-// -------------------------------
-// ⚡ STEP 3 → CREATE CONFIG
-// -------------------------------
-export function createConfig() {
-  const configPath = path.join(process.cwd(), "sparesdev.config.json");
+  try {
+    const pkg = JSON.parse(fs.readFileSync("package.json", "utf-8"));
+
+    const installed = {
+      ...pkg.dependencies,
+      ...pkg.devDependencies
+    };
+
+    return required.filter(dep => !installed?.[dep]);
+  } catch {
+    return required;
+  }
+}
 
-  if (fs.existsSync(configPath)) {
-    console.log("ℹ️ Config already exists, skipping");
+// -----------------------------
+// ⚙️ Vite Config
+// -----------------------------
+function patchViteConfig() {
+  const viteConfigPath = "vite.config.ts";
+
+  if (!fs.existsSync(viteConfigPath)) {
+    console.log("⚠️ vite.config.ts not found, skipping patch");
     return;
   }
 
-  const config = {
-    language: "typescript",
-    version: "3.0",
-    style: "default",
-    componentsPath: "src/components",
-    utilsPath: "src/utils"
-  };
+  let content = fs.readFileSync(viteConfigPath, "utf-8");
 
-  fs.writeFileSync(configPath, JSON.stringify(config, null, 2));
-  console.log("✅ sparesdev.config.json created");
-}
+  // Tailwind import
+  if (!content.includes("@tailwindcss/vite")) {
+    content = content.replace(
+      /import react from ['"]@vitejs\/plugin-react['"]/,
+      `import react from '@vitejs/plugin-react'\nimport tailwindcss from '@tailwindcss/vite'`
+    );
+  }
 
-// -------------------------------
-// ⚡ INIT FUNCTION
-// -------------------------------
-export async function init(mode = "minimal") {
-  console.log(`\n🎯 Initializing sparesdev (${mode} mode)...\n`);
+  // Path import
+  if (!content.includes('import path from "path"')) {
+    content = `import path from "path"\n` + content;
+  }
 
-  // STEP 1 → create config only
-  createConfig();
+  // Tailwind plugin
+  if (!content.includes("tailwindcss()")) {
+    content = content.replace(
+      /plugins:\s*\[([^\]]*)\]/,
+      "plugins: [$1, tailwindcss()]"
+    );
+  }
 
-  if (mode === "minimal") {
-    console.log("🎉 Minimal setup completed. No dependencies or files modified.\n");
-    return;
+  // Alias
+  if (!content.includes("resolve:")) {
+    content = content.replace(
+      /export default defineConfig\(\{/,
+      `export default defineConfig({
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },`
+    );
   }
 
-  // -------------------------------
-  // Full setup
-  // -------------------------------
-  console.log("🚀 Running full setup...\n");
+  fs.writeFileSync(viteConfigPath, content);
 
-  const projectRoot = process.cwd();
-  const packageName = "sparesdev";
-  const lang = "typescript";
+  console.log("✅ vite.config.ts configured");
+}
 
-  let packageRoot;
-  try {
-    packageRoot = path.dirname(
-      require.resolve(`${packageName}/package.json`)
-    );
-  } catch {
-    console.log("❌ sparesdev package not found. Full setup aborted.");
+// -----------------------------
+// 📁 Project Structure
+// -----------------------------
+function ensureSrcFolder() {
+  if (!fs.existsSync("src")) {
+    fs.mkdirSync("src", { recursive: true });
+    console.log("📁 Created src folder");
+  }
+}
+
+// -----------------------------
+// 🎨 Tokens
+// -----------------------------
+function createTokensCss() {
+  const tokensPath = "src/tokens.css";
+
+  if (fs.existsSync(tokensPath)) {
+    console.log("ℹ️ tokens.css already exists");
     return;
   }
 
-  // -------------------------------
-  // Install utils if missing
-  // -------------------------------
-  const utilsPath = path.join(packageRoot, "templates", lang, "utils");
-  const targetUtils = path.join(projectRoot, "src", "utils");
+  const content = `@theme {
+
+  /* Screens */
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+
+  /* Fonts */
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+
+  /* Text */
+  --text-xs: 10px;
+  --text-sm: 12px;
+  --text-base: 14px;
+  --text-lg: 16px;
+  --text-xl: 17.5px;
+
+  /* Colors */
+  --color-background: 255 255 255;
+  --color-text: 0 0 0;
+
+  /* Radius */
+  --radius-sm: 4px;
+  --radius-base: 8px;
+  --radius-lg: 12px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 3px -1px rgba(0, 0, 0, 0.16);
 
-  if (!fs.existsSync(targetUtils)) fs.mkdirSync(targetUtils, { recursive: true });
+  /* Spacing */
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-4: 16px;
+}
+`;
+
+  fs.writeFileSync(tokensPath, content);
+  console.log("✅ Created src/tokens.css");
+}
+
+// -----------------------------
+// 🎯 Index CSS (overwrite)
+// -----------------------------
+function createIndexCss() {
+  const indexPath = "src/index.css";
+
+  const content = `@import "tailwindcss";
+@import "./tokens.css";
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
+
+body {
+  background: rgb(var(--color-background));
+  color: rgb(var(--color-text));
+  font-feature-settings: "rlig" 1, "calt" 1;
+  font-family: var(--font-sans);
+}
+
+.hide-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+`;
 
-  const cnPath = path.join(targetUtils, "cn.ts");
-  if (!fs.existsSync(cnPath)) {
-    copyRecursive(utilsPath, targetUtils);
-    console.log("✅ utils (cn.ts) added");
-  } else {
-    console.log("ℹ️ utils already exists, skipping");
+  fs.writeFileSync(indexPath, content);
+
+  console.log("✅ src/index.css replaced");
+}
+
+// -----------------------------
+// ⚙️ TS Config (FIXED)
+// -----------------------------
+function patchTsconfigAlias() {
+  const tsconfigPath = "tsconfig.app.json";
+
+  if (!fs.existsSync(tsconfigPath)) {
+    console.log("⚠️ tsconfig.app.json not found, skipping");
+    return;
   }
 
-  // -------------------------------
-  // Install tokens.css if missing
-  // -------------------------------
-  const tokensSrc = path.join(packageRoot, "templates", lang, "tokens.css");
-  const tokensDest = path.join(projectRoot, "src", "tokens.css");
-
-  if (!fs.existsSync(tokensDest) && fs.existsSync(tokensSrc)) {
-    copyRecursive(tokensSrc, tokensDest);
-    console.log("✅ tokens.css added");
-  } else if (fs.existsSync(tokensDest)) {
-    console.log("ℹ️ tokens.css already exists, skipping");
+  let content = fs.readFileSync(tsconfigPath, "utf-8");
+
+  if (content.includes('"@/*"')) {
+    console.log("ℹ️ tsconfig alias already configured");
+    return;
   }
 
-  // -------------------------------
-  // Patch Vite / TS config (if missing)
-  // -------------------------------
-  const viteConfig = path.join(projectRoot, "vite.config.ts");
-  if (fs.existsSync(viteConfig)) {
-    console.log("ℹ️ Vite config exists, skipping patch");
-  } else {
-    const viteTemplate = path.join(packageRoot, "templates", lang, "vite.config.ts");
-    if (fs.existsSync(viteTemplate)) {
-      copyRecursive(viteTemplate, viteConfig);
-      console.log("✅ Vite config added");
+  content = content.replace(
+    /"compilerOptions"\s*:\s*\{/,
+    `"compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },`
+  );
+
+  fs.writeFileSync(tsconfigPath, content);
+
+  console.log("✅ tsconfig alias configured");
+}
+
+// -----------------------------
+// 🔁 ScrollToTop
+// -----------------------------
+function createScrollToTop() {
+  const filePath = "src/ScrollToTop.tsx";
+
+  const content = `import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+}
+
+export default ScrollToTop;
+`;
+
+  fs.writeFileSync(filePath, content);
+
+  console.log("✅ Created ScrollToTop.tsx");
+}
+
+// -----------------------------
+// 🚀 main.tsx
+// -----------------------------
+function createMainTsx() {
+  const filePath = "src/main.tsx";
+
+  const content = `import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+
+import "./index.css";
+import App from "./App.tsx";
+import ScrollToTop from "./ScrollToTop.tsx";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <BrowserRouter>
+      <ScrollToTop />
+      <App />
+    </BrowserRouter>
+  </StrictMode>
+);
+`;
+
+  fs.writeFileSync(filePath, content);
+
+  console.log("✅ Replaced src/main.tsx");
+}
+
+// -----------------------------
+// 🧠 INIT
+// -----------------------------
+export async function init() {
+  const config = {
+    language: "typescript",
+    version: "3.0",
+    style: "default",
+    componentsPath: "src/components",
+    utilsPath: "src/utils"
+  };
+
+  fs.writeFileSync(
+    "sparesdev.config.json",
+    JSON.stringify(config, null, 2)
+  );
+
+  console.log("\n✅ Initialized SparesDev\n");
+
+  const missingDeps = getMissingDependencies();
+
+  try {
+    if (missingDeps.length) {
+      console.log(`📦 Installing: ${missingDeps.join(", ")}\n`);
+      execSync(`npm install ${missingDeps.join(" ")}`, {
+        stdio: "inherit"
+      });
+    } else {
+      console.log("✅ Core dependencies already installed\n");
     }
-  }
 
-  console.log("\n🎉 Full setup completed.\n");
+    console.log("🎨 Installing Tailwind...\n");
+
+    execSync(
+      "npm install -D tailwindcss @tailwindcss/vite",
+      { stdio: "inherit" }
+    );
+
+    ensureSrcFolder();
+    patchViteConfig();
+    patchTsconfigAlias();
+    createTokensCss();
+    createIndexCss();
+    createScrollToTop();
+    createMainTsx();
+
+    console.log("\n🎉 SparesDev setup completed\n");
+  } catch (err) {
+    console.log("\n❌ Setup failed");
+    console.error(err.message);
+  }
 }

package/core/list.js

@@ -1,7 +1,6 @@
 import fs from "fs";
 import path from "path";
 import { createRequire } from "module";
-
 const require = createRequire(import.meta.url);
 
 // -------------------------------
@@ -27,7 +26,7 @@ function printTree(dir, indent = "  ") {
 // -------------------------------
 export function list(layer) {
   const lang = "typescript";
-  const packageName = "sparesdev";
+  const packageName = "spares";
 
   let packageRoot;
 
@@ -41,55 +40,45 @@ export function list(layer) {
   }
 
   // -------------------------------
-  // 📁 Sections
+  // 📁 Paths setup
   // -------------------------------
-  const sections = [
-    {
-      key: "components",
-      label: "Components"
-    },
-    {
-      key: "layouts",
-      label: "Layouts"
-    },
-    {
-      key: "blocks",
-      label: "Blocks"
-    },
-    {
-      key: "pages",
-      label: "Pages"
-    }
-  ];
+  let paths = [];
+
+  if (!layer || layer === "global") {
+    paths.push({
+      label: "Components",
+      dir: path.join(packageRoot, "templates", lang, "global", "components")
+    });
+
+    paths.push({
+      label: "Layouts",
+      dir: path.join(packageRoot, "templates", lang, "global", "layouts")
+    });
+  }
 
-  const selectedSections = layer
-    ? sections.filter(section => section.key === layer)
-    : sections;
+  if (!layer || layer === "storefront") {
+    paths.push({
+      label: "Storefront",
+      dir: path.join(packageRoot, "templates", lang, "storefront")
+    });
+  }
 
   console.log("");
 
   let hasAny = false;
 
-  for (const section of selectedSections) {
-    const dir = path.join(
-      packageRoot,
-      "templates",
-      lang,
-      section.key
-    );
-
-    if (!fs.existsSync(dir)) continue;
-
-    const items = fs.readdirSync(dir);
+  for (const p of paths) {
+    if (!fs.existsSync(p.dir)) continue;
 
+    const items = fs.readdirSync(p.dir);
     if (!items.length) continue;
 
     hasAny = true;
 
-    console.log(`📦 ${section.label}:\n`);
+    console.log(`📦 ${p.label}:\n`);
 
     for (const item of items) {
-      const fullPath = path.join(dir, item);
+      const fullPath = path.join(p.dir, item);
       const isDir = fs.statSync(fullPath).isDirectory();
 
       console.log(` - ${item}${isDir ? "/" : ""}`);
@@ -103,6 +92,6 @@ export function list(layer) {
   }
 
   if (!hasAny) {
-    console.log("❌ No templates found\n");
+    console.log("❌ No components found\n");
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sparesdev",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",
   "bin": {

package/utils/copy.js

@@ -1,42 +1,19 @@
 import fs from "fs";
 import path from "path";
 
-/**
- * copyRecursive(src, dest, options)
- * options:
- *   - force: overwrite existing files
- *   - safe: skip if exists
- */
-export function copyRecursive(src, dest, options = {}) {
-  if (!fs.existsSync(src)) {
-    console.log(`❌ Source not found: ${src}`);
-    return;
-  }
-
+export function copyRecursive(src, dest) {
   fs.mkdirSync(dest, { recursive: true });
 
   for (const item of fs.readdirSync(src)) {
     const srcItem = path.join(src, item);
     const destItem = path.join(dest, item);
 
-    const stats = fs.statSync(srcItem);
-
-    if (stats.isDirectory()) {
-      copyRecursive(srcItem, destItem, options);
+    if (fs.statSync(srcItem).isDirectory()) {
+      copyRecursive(srcItem, destItem);
     } else {
-      if (fs.existsSync(destItem)) {
-        if (options.force) {
-          fs.copyFileSync(srcItem, destItem);
-          console.log(`✅ Overwritten: ${destItem}`);
-        } else if (options.safe) {
-          console.log(`ℹ️ Skipped existing: ${destItem}`);
-        } else {
-          console.log(`⚠️ Exists (use --force to overwrite): ${destItem}`);
-        }
-        continue;
+      if (!fs.existsSync(destItem)) {
+        fs.copyFileSync(srcItem, destItem);
       }
-      fs.copyFileSync(srcItem, destItem);
-      console.log(`✅ Copied: ${destItem}`);
     }
   }
 }

package/utils/getConfig.js

@@ -1,19 +1,10 @@
 import fs from "fs";
 
-const CONFIG_FILE = "sparesdev.config.json";
-
 export function getConfig() {
-  if (!fs.existsSync(CONFIG_FILE)) {
+  if (!fs.existsSync("sparesdev.config.json")) {
     console.error("❌ Run 'sparesdev init' first");
     process.exit(1);
   }
 
-  try {
-    const content = fs.readFileSync(CONFIG_FILE, "utf-8");
-    return JSON.parse(content);
-  } catch {
-    console.error(`❌ Invalid ${CONFIG_FILE}`);
-    console.error("💡 Delete it and run 'sparesdev init' again");
-    process.exit(1);
-  }
+  return JSON.parse(fs.readFileSync("sparesdev.config.json", "utf-8"));
 }

package/core/frontend.js

@@ -1,57 +0,0 @@
-import fs from "fs";
-import path from "path";
-
-function writeFile(filePath, content) {
-  fs.mkdirSync(path.dirname(filePath), {
-    recursive: true
-  });
-
-  fs.writeFileSync(filePath, content);
-}
-
-export async function frontend() {
-  const pages = {
-    "src/pages/LandingPage.tsx": `function LandingPage() {
-  return <div>Landing Page</div>;
-}
-
-export default LandingPage;
-`,
-    "src/pages/PricingPage.tsx": `function PricingPage() {
-  return <div>Pricing Page</div>;
-}
-
-export default PricingPage;
-`,
-    "src/pages/LoginPage.tsx": `function LoginPage() {
-  return <div>Login Page</div>;
-}
-
-export default LoginPage;
-`,
-    "src/pages/DashboardPage.tsx": `function DashboardPage() {
-  return <div>Dashboard Page</div>;
-}
-
-export default DashboardPage;
-`,
-    "src/pages/TermsPage.tsx": `function TermsPage() {
-  return <div>Terms Page</div>;
-}
-
-export default TermsPage;
-`,
-    "src/pages/NotFoundPage.tsx": `function NotFoundPage() {
-  return <div>404 Page</div>;
-}
-
-export default NotFoundPage;
-`
-  };
-
-  for (const [file, content] of Object.entries(pages)) {
-    writeFile(file, content);
-  }
-
-  console.log("✅ Frontend starter created");
-}

package/templates/typescript/frontend/src/components/Avatar/Avatar.tsx

@@ -1,34 +0,0 @@
-import React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { cn } from "@/utils/cn"
-
-const avatarVariants = cva(
-  "relative flex shrink-0 overflow-hidden rounded-full items-center justify-center bg-neutral-000",
-  {
-    variants: {
-      size: {
-        sm: "w-6 h-6 text-xs font-normal",   
-        md: "w-9 h-9 text-sm font-normal",   
-        lg: "w-12 h-12 text-tiny font-normal", 
-      },
-    },
-    defaultVariants: {
-      size: "md",
-    },
-  }
-)
-
-interface AvatarProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof avatarVariants> {}
-
-function Avatar({ className, size, ...props }: AvatarProps) {
-  return (
-    <div
-      className={cn(avatarVariants({ size }), className)}
-      {...props}
-    />
-  )
-}
-
-export default Avatar

package/templates/typescript/frontend/src/components/Avatar/AvatarFallback.tsx

@@ -1,35 +0,0 @@
-import React from "react"
-import { cn } from "@/utils/cn"
-
-interface AvatarFallbackProps
-  extends React.HTMLAttributes<HTMLSpanElement> {
-  initials?: string
-}
-
-function AvatarFallback({
-  initials,
-  className,
-  children,
-  ...props
-}: AvatarFallbackProps) {
-  const fallbackIcon = (
-    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M7 0.5C8.38071 0.5 9.5 1.61929 9.5 3C9.5 4.38071 8.38071 5.5 7 5.5C5.61929 5.5 4.5 4.38071 4.5 3C4.5 1.61929 5.61929 0.5 7 0.5Z" fill="currentColor" stroke="currentColor"/>
-      <path d="M7 7.5C9.48528 7.5 11.5 9.51472 11.5 12V13.5H2.5V12C2.5 9.51472 4.51472 7.5 7 7.5Z" fill="currentColor" stroke="currentColor"/>
-    </svg>
-  )
-
-  return (
-    <span
-      className={cn(
-        "flex h-full w-full items-center justify-center",
-        className
-      )}
-      {...props}
-    >
-      {children ?? initials ?? fallbackIcon}
-    </span>
-  )
-}
-
-export default AvatarFallback

package/templates/typescript/frontend/src/components/Avatar/AvatarImage.tsx

@@ -1,23 +0,0 @@
-import React, { useState } from "react"
-import { cn } from "@/utils/cn"
-
-interface AvatarImageProps
-  extends React.ImgHTMLAttributes<HTMLImageElement> {
-    className?: "string";
-  }
-
-function AvatarImage({ className, ...props }: AvatarImageProps) {
-  const [error, setError] = useState(false)
-
-  if (error) return null
-
-  return (
-    <img
-      className={cn("aspect-square h-full w-full object-cover", className)}
-      onError={() => setError(true)}
-      {...props}
-    />
-  )
-}
-
-export default AvatarImage

package/templates/typescript/frontend/src/components/Avatar/index.ts

@@ -1,3 +0,0 @@
-export { default as Avatar } from './Avatar';
-export { default as AvatarFallback } from './AvatarFallback';
-export { default as AvatarImage } from './AvatarImage';

package/templates/typescript/pages/Hero/Hero.tsx

@@ -1,8 +0,0 @@
-
-function Hero() {
-  return (
-    <div>Hero</div>
-  )
-}
-
-export default Hero

package/templates/typescript/pages/Hero/index.ts

@@ -1 +0,0 @@
-export { default as Hero } from './Hero';