vaderjs-native 1.0.13 → 1.0.15

package/cli.ts

@@ -5,162 +5,446 @@ import fsSync from "fs";
 import path from "path";
 import readline from "readline";
 
-function ask(question) {
-    const rl = readline.createInterface({
-        input: process.stdin,
-        output: process.stdout,
-    });
-    return new Promise((resolve) =>
-        rl.question(question + " ", (answer) => {
-            rl.close();
-            resolve(answer.trim());
-        })
-    );
+const cwd = process.cwd();
+
+/* ---------------------------------- utils --------------------------------- */
+
+function ask(question: string): Promise<string> {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+  return new Promise((resolve) =>
+    rl.question(question + " ", (answer) => {
+      rl.close();
+      resolve(answer.trim());
+    })
+  );
 }
 
-async function run(cmd: string, args: string[] = []) {
-    try {
-        const proc = Bun.spawn([cmd, ...args], {
-            stdout: "inherit",
-            stderr: "inherit",
-        });
-
-        const status = await proc.exited;
-        if (status !== 0) {
-            console.error(`Command failed: ${cmd} ${args.join(" ")}`);
-            process.exit(1);
-        }
-    } catch (error) {
-        console.error(`Error executing command: ${error}`);
-        process.exit(1);
+async function run(cmd: string, args: string[] = []): Promise<void> {
+  try {
+    const proc = Bun.spawn([cmd, ...args], {
+      stdout: "inherit",
+      stderr: "inherit",
+    });
+
+    const status = await proc.exited;
+    if (status !== 0) {
+      console.error(`Command failed: ${cmd} ${args.join(" ")}`);
+      process.exit(1);
     }
+  } catch (error) {
+    console.error(`Error executing command: ${error}`);
+    process.exit(1);
+  }
 }
 
-export async function init() {
-    console.log("🚀 Welcome to Vader.js project initializer!");
+function logSection(title: string) {
+  console.log(`\n${title}`);
+  console.log("─".repeat(title.length));
+}
 
-    const cwd = process.cwd();
-    let projectDir = await ask(
-        `Enter the directory to initialize the project (default: current dir):`
-    );
-    if (!projectDir) projectDir = ".";
+function getFlags() {
+  return new Set(process.argv.slice(2));
+}
 
-    projectDir = path.resolve(cwd, projectDir);
-    if (!fsSync.existsSync(projectDir)) {
-        await fs.mkdir(projectDir, { recursive: true });
-        console.log(`Created directory: ${projectDir}`);
-    }
+/* -------------------------- Vite-like Template --------------------------- */
 
-    // Confirm Tailwind usage
-    let useTailwind = await ask("Include TailwindCSS v4 support? (y/n):");
-    while (!["y", "n", "yes", "no"].includes(useTailwind)) {
-        useTailwind = await ask("Please answer 'y' or 'n':");
-    }
-    const wantsTailwind = useTailwind === "y" || useTailwind === "yes";
+const UI_FRAMEWORKS = {
+  none: { 
+    name: "None (Basic)", 
+    deps: [], 
+    description: "Basic setup without UI framework" 
+  },
+  daisyui: { 
+    name: "VaderUI (DaisyUI)", 
+    deps: ["vaderjs-daisyui", "daisyui", "@tailwindcss/postcss", "autoprefixer", "postcss"],
+    configNeeded: true,
+    cssFile: `@import "tailwindcss";
+@plugin "daisyui";`,
+    description: "A comprehensive DaisyUI component library for Vader.js"
+  },
+  bootstrap: { 
+    name: "Bootstrap 5", 
+    deps: ["vaderjs-bootstrap", "bootstrap"],
+    configNeeded: false,
+    cssFile: `/* Import Bootstrap CSS in your HTML */
+/* Or use CDN: <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> */`,
+    description: "Bootstrap 5 components rebuilt for Vader.js"
+  }
+};
 
-    // Create folders: app, src, public
-    const appDir = path.join(projectDir, "app");
-    const srcDir = path.join(projectDir, "src");
-    const publicDir = path.join(projectDir, "public");
+/* ---------------------------------- init ---------------------------------- */
 
-    for (const dir of [appDir, srcDir, publicDir]) {
-        if (!fsSync.existsSync(dir)) {
-            await fs.mkdir(dir, { recursive: true });
-            console.log(`Created folder: ${dir}`);
-        }
+ /* ---------------------------------- init ---------------------------------- */
+
+export async function initProject(dir?: string) {
+  const flags = getFlags();
+  const autoYes = flags.has("--yes");
+
+  console.log("🚀 Initializing Vader.js project");
+
+  const projectDir = path.resolve(cwd, dir || ".");
+  if (!fsSync.existsSync(projectDir)) {
+    await fs.mkdir(projectDir, { recursive: true });
+  }
+
+  const files = fsSync.readdirSync(projectDir);
+  if (files.length && !autoYes) {
+    const confirm = await ask("Directory is not empty. Continue? (y/n):");
+    if (confirm !== "y") process.exit(0);
+  }
+
+  // Ask for TypeScript or JavaScript
+  console.log("\nSelect language:");
+  console.log("  1. JavaScript (recommended for beginners)");
+  console.log("  2. TypeScript (recommended for production)");
+  
+  let langChoice = await ask("Choose (1-2):");
+  const useTypeScript = langChoice === "2";
+  const fileExt = useTypeScript ? "tsx" : "jsx";
+  const configExt = useTypeScript ? "ts" : "js";
+
+  // Ask for UI framework
+  console.log("\nSelect a UI framework:");
+  Object.entries(UI_FRAMEWORKS).forEach(([key, value], index) => {
+    console.log(`  ${index + 1}. ${value.name}`);
+    console.log(`     ${value.description}`);
+  });
+
+  let frameworkChoice = await ask(`Choose (1-${Object.keys(UI_FRAMEWORKS).length}):`);
+  let selectedFramework = Object.keys(UI_FRAMEWORKS)[parseInt(frameworkChoice) - 1];
+
+  while (!selectedFramework || !UI_FRAMEWORKS[selectedFramework]) {
+    console.log(`Invalid choice. Please select 1-${Object.keys(UI_FRAMEWORKS).length}`);
+    frameworkChoice = await ask(`Choose (1-${Object.keys(UI_FRAMEWORKS).length}):`);
+    selectedFramework = Object.keys(UI_FRAMEWORKS)[parseInt(frameworkChoice) - 1];
+  }
+
+  const framework = UI_FRAMEWORKS[selectedFramework];
+
+  // Ask for platform support
+  console.log("\nSelect platforms to support:");
+  const androidResponse = await ask("  Include Android support? (y/n):");
+  const windowsResponse = await ask("  Include Windows support? (y/n):");
+  
+  const platforms = {
+    android: androidResponse.toLowerCase() === 'y',
+    windows: windowsResponse.toLowerCase() === 'y',
+  };
+
+  logSection("📁 Creating folders");
+
+  for (const d of ["app", "public", "src"]) {
+    const p = path.join(projectDir, d);
+    if (!fsSync.existsSync(p)) {
+      await fs.mkdir(p, { recursive: true });
+      console.log(`created ${d}/`);
     }
+  }
+
+  // Create platform-specific asset directories
+  if (platforms.android) {
+    await fs.mkdir(path.join(projectDir, "assets/android"), { recursive: true });
+  }
+  if (platforms.windows) {
+    await fs.mkdir(path.join(projectDir, "assets/windows"), { recursive: true });
+  }
+
+  logSection("🧱 Writing files");
 
-    // Create example app/index.jsx with counter
-    const counterCode = wantsTailwind
-        ? `import * as Vader from "vaderjs-native";
+  // Create main app component based on framework and language
+  let appCode = "";
+  if (selectedFramework === "daisyui") {
+    appCode = `import * as Vader from "vaderjs-native"\nimport { useState } from "vaderjs-native";
+import Button from "vaderjs-daisyui/Components/Actions/Button";
+import { Card } from "vaderjs-daisyui/Components/Data/Display/Card";
+import { Badge } from "vaderjs-daisyui/Components/Data/Display/Badge";
 
-function Counter() {
- let [count, setCount] = Vader.useState(0);
+function Main() {
+  const [count, setCount] = useState(0);
+  
   return (
-    <div class="max-w-md mx-auto p-6 bg-gray-100 rounded shadow text-center">
-      <h1 class="text-2xl font-bold mb-4">Counter Example</h1>
-      <p class="text-xl mb-4">Count: {count}</p>
-      <button
-        class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
-        onClick={() => setCount(count + 1)}
-      >
-        Increment
-      </button>
+    <div className="min-h-screen bg-base-200 p-8">
+      <div className="max-w-4xl mx-auto">
+        <div className="text-center mb-8">
+          <h1 className="text-4xl font-bold text-primary mb-4">
+            🎉 Welcome to Vader.js!
+          </h1>
+          <p className="text-lg text-base-content">
+            With ${framework.name} components
+          </p>
+          <Badge color="primary" className="mt-2">
+            v1.0.0
+          </Badge>
+        </div>
+        
+        <Card className="mb-6" title="Interactive Demo">
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-xl font-semibold">Counter: {count}</p>
+                <p className="text-sm text-base-content/70">
+                  Click the button to increment
+                </p>
+              </div>
+              <Badge color={count > 5 ? "success" : "warning"}>
+                {count > 5 ? "Pro User" : "Getting Started"}
+              </Badge>
+            </div>
+            <div className="flex gap-3">
+              <Button color="primary" onClick={() => setCount(count + 1)}>
+                Increment
+              </Button>
+              <Button color="secondary" onClick={() => setCount(0)}>
+                Reset
+              </Button>
+              <Button color="accent" onClick={() => alert(\`Count is: \${count}\`)}>
+                Show Alert
+              </Button>
+            </div>
+          </div>
+          <div slot="actions" className="text-sm text-base-content/60">
+            Try editing app/index.${fileExt}
+          </div>
+        </Card>
+        
+        <div className="grid md:grid-cols-2 gap-6">
+          <Card title="Quick Start">
+            <ul className="space-y-2">
+              <li>1. Edit <code>app/index.${fileExt}</code></li>
+              <li>2. Run <code>bun run dev</code></li>
+              <li>3. Open browser to localhost:3000</li>
+            </ul>
+          </Card>
+          
+          <Card title="Features">
+            <ul className="space-y-2">
+              <li>✅ Vader.js reactive system</li>
+              <li>✅ ${framework.name} components</li>
+              <li>✅ Hot reload development</li>
+              <li>✅ Multi-platform support</li>
+            </ul>
+          </Card>
+        </div>
+        
+        <div className="mt-8 text-center text-sm text-base-content/60">
+          Learn more at https://vaderjs.dev
+        </div>
+      </div>
     </div>
   );
-}
+}\n Vader.render(Vader.createElement(Main), document.getElementById("app"))`;
+  } else if (selectedFramework === "bootstrap") {
+    appCode = `import * as Vader from "vaderjs-native"\nimport { useState } from "vaderjs-native";
+import { Container, Alert, Button, Card, Badge } from "vaderjs-bootstrap";
+
+function Main() {
+  const [count, setCount] = useState(0);
   
-Vader.render(Vader.createElement(Counter, null), document.getElementById("app"));
-`
-        : `import * as Vader from "vaderjs-native";
+  return (
+    <Container className="py-5">
+      <Alert type="info" dismissible className="mb-4">
+        <strong>Welcome to Vader.js!</strong> This is a Bootstrap 5 starter.
+      </Alert>
+      
+      <Card className="mb-4">
+        <Card.Header className="d-flex justify-content-between align-items-center">
+          <h5 className="mb-0">Interactive Demo</h5>
+          <Badge bg={count > 5 ? "success" : "warning"}>
+            {count > 5 ? "Advanced" : "Beginner"}
+          </Badge>
+        </Card.Header>
+        <Card.Body>
+          <p className="lead">Counter: {count}</p>
+          <p className="text-muted mb-3">Click the buttons to interact</p>
+          <div className="d-flex gap-2">
+            <Button variant="primary" onClick={() => setCount(count + 1)}>
+              Increment
+            </Button>
+            <Button variant="secondary" onClick={() => setCount(0)}>
+              Reset
+            </Button>
+            <Button variant="info" onClick={() => alert(\`Count is: \${count}\`)}>
+              Show Alert
+            </Button>
+          </div>
+        </Card.Body>
+        <Card.Footer className="text-muted">
+          Try editing app/index.${fileExt}
+        </Card.Footer>
+      </Card>
+      
+      <div className="row">
+        <div className="col-md-6 mb-3">
+          <Card>
+            <Card.Body>
+              <Card.Title>Quick Start</Card.Title>
+              <ol className="mb-0">
+                <li>Edit <code>app/index.${fileExt}</code></li>
+                <li>Run <code>bun run dev</code></li>
+                <li>Open browser to localhost:3000</li>
+              </ol>
+            </Card.Body>
+          </Card>
+        </div>
+        <div className="col-md-6 mb-3">
+          <Card>
+            <Card.Body>
+              <Card.Title>Features</Card.Title>
+              <ul className="mb-0">
+                <li>✅ Vader.js reactive system</li>
+                <li>✅ Bootstrap 5 components</li>
+                <li>✅ Hot reload development</li>
+                <li>✅ Multi-platform support</li>
+              </ul>
+            </Card.Body>
+          </Card>
+        </div>
+      </div>
+      
+      <footer className="mt-4 text-center text-muted small">
+        Learn more at https://vaderjs.dev
+      </footer>
+    </Container>
+  );
+}\nVader.render(Vader.createElement(Main), document.getElementById("app"))`;
+  } else {
+    appCode = `import * as Vader from "vaderjs-native"\nimport { useState } from "vaderjs-native";
 
-function Counter() {
-  let [count, setCount] = Vader.useState(0);
+function Main() {
+  const [count, setCount] = useState(0);
+  
   return (
-    <div style={{ maxWidth: "300px", margin: "auto", padding: "1rem", background: "#eee", borderRadius: "8px", textAlign: "center" }}>
-      <h1 style={{ fontWeight: "bold", marginBottom: "1rem" }}>Counter Example</h1>
-      <p style={{ fontSize: "1.25rem", marginBottom: "1rem" }}>Count: {count}</p>
-      <button onClick={() => setCount(count + 1)}>Increment</button> 
+    <div style={{
+      maxWidth: "600px",
+      margin: "0 auto",
+      padding: "2rem",
+      fontFamily: "system-ui, sans-serif",
+      lineHeight: 1.5
+    }}>
+      <h1 style={{ textAlign: "center", color: "#333" }}>
+        🚀 Welcome to Vader.js!
+      </h1>
+      
+      <div style={{
+        background: "#f8f9fa",
+        borderRadius: "12px",
+        padding: "2rem",
+        marginTop: "2rem",
+        boxShadow: "0 4px 6px rgba(0,0,0,0.1)"
+      }}>
+        <h2 style={{ marginTop: 0 }}>Interactive Demo</h2>
+        <p style={{ fontSize: "1.5rem", fontWeight: "bold", color: "#007bff" }}>
+          Counter: {count}
+        </p>
+        <p style={{ color: "#666" }}>
+          Click the buttons below to interact with the counter
+        </p>
+        
+        <div style={{ display: "flex", gap: "1rem", marginTop: "1.5rem" }}>
+          <button
+            onClick={() => setCount(count + 1)}
+            style={{
+              padding: "0.75rem 1.5rem",
+              background: "#007bff",
+              color: "white",
+              border: "none",
+              borderRadius: "6px",
+              fontSize: "1rem",
+              cursor: "pointer"
+            }}
+          >
+            Increment
+          </button>
+          
+          <button
+            onClick={() => setCount(0)}
+            style={{
+              padding: "0.75rem 1.5rem",
+              background: "#6c757d",
+              color: "white",
+              border: "none",
+              borderRadius: "6px",
+              fontSize: "1rem",
+              cursor: "pointer"
+            }}
+          >
+            Reset
+          </button>
+          
+          <button
+            onClick={() => alert(\`Current count: \${count}\`)}
+            style={{
+              padding: "0.75rem 1.5rem",
+              background: "#28a745",
+              color: "white",
+              border: "none",
+              borderRadius: "6px",
+              fontSize: "1rem",
+              cursor: "pointer"
+            }}
+          >
+            Show Alert
+          </button>
+        </div>
+      </div>
+      
+      <div style={{ marginTop: "2rem" }}>
+        <h3>Next Steps:</h3>
+        <ul>
+          <li>Edit <code>app/index.${fileExt}</code> to customize this page</li>
+          <li>Run <code>bun run dev</code> to start the development server</li>
+          <li>Visit <code>localhost:3000</code> in your browser</li>
+          <li>Check out <a href="https://vaderjs.dev">vaderjs.dev</a> for documentation</li>
+        </ul>
+      </div>
     </div>
   );
-}
+}\nVader.render(Vader.createElement(Main), document.getElementById("app"))`;
 
-Vader.render(Vader.createElement(Counter, null), document.getElementById("app"));
-`;
+  }
 
-    await fs.writeFile(path.join(appDir, "index.jsx"), counterCode);
-    console.log(`Created example route: ${path.join("app", "index.jsx")}`);
+  await fs.writeFile(
+    path.join(projectDir, `app/index.${fileExt}`),
+    appCode
+  );
+  console.log(`created app/index.${fileExt}`);
 
-    // Create public/styles.css
-    if (wantsTailwind) {
-        await fs.writeFile(path.join(publicDir, "styles.css"), `@import 'tailwindcss';\n`);
-    } else {
-        await fs.writeFile(path.join(publicDir, "styles.css"), `/* Add your styles here */\n`);
-    }
-    console.log(`Created public/styles.css`);
+  await fs.writeFile(
+    path.join(projectDir, "public/styles.css"),
+    framework.cssFile || "/* Add your global styles here */"
+  );
+  console.log(`created public/styles.css`);
 
-    // Create minimal package.json if not exist
+  // Create root.css for Tailwind/DaisyUI if needed
+  if (selectedFramework === "daisyui") {
+    await fs.writeFile(
+      path.join(projectDir, "root.css"),
+      framework.cssFile
+    );
+    console.log(`created root.css (for Tailwind/DaisyUI)`);
+  }
 
+  // Create vaderjs.config.ts
+  let configImport = "";
+  let configPlugins = "[]";
 
-    // Install dependencies: vaderjs + optionally tailwindcss, postcss plugins, autoprefixer
-    console.log("Installing dependencies with Bun...");
-    const deps = ["vaderjs", "autoprefixer"];
-    if (wantsTailwind) {
-        deps.push("tailwindcss@4", "@tailwindcss/postcss", "postcss-cli");
-    }
-    await run("bun", ["install", ...deps]);
-    console.log("✅ Dependencies installed.");
-
-    // If Tailwind requested, create minimal tailwind.config.cjs and postcss.config.cjs
-    if (wantsTailwind) {
-        const tailwindConfig = `module.exports = {
-  content: ["./app/**/*.{js,jsx,ts,tsx}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};`;
-        await fs.writeFile(path.join(projectDir, "tailwind.config.cjs"), tailwindConfig);
-        console.log("Created tailwind.config.cjs");
-
-        const postcssConfig = `export default {
-  plugins: {
-    "@tailwindcss/postcss": {},
-    autoprefixer: {},
+  if (selectedFramework === "daisyui") {
+    configImport = `import daisyui from "vaderjs-daisyui";\n`;
+    configPlugins = "[daisyui]";
+  } else if (selectedFramework === "bootstrap") {
+    configImport = `import bootstrap from "vaderjs-bootstrap";\n`;
+    configPlugins = "[bootstrap]";
   }
-};`;
-        await fs.writeFile(path.join(projectDir, "postcss.config.cjs"), postcssConfig);
-        console.log("Created postcss.config.cjs");
-    }
 
-    // Create vaderjs.config.ts regardless, add Tailwind plugin if needed
-    const vaderConfig = ` 
-import defineConfig from "vaderjs-native/config";
-import tailwind from "vaderjs-native/plugins/tailwind";    
+  const configContent = `${configImport}import defineConfig from "vaderjs-native/config";
+
 export default defineConfig({
   app: {
-    name: "ExampleVaderApp",
-    id: "com.example.vaderapp",
+    name: "${path.basename(projectDir)}",
+    id: "com.example.${path.basename(projectDir).toLowerCase()}",
     version: {
       code: 1,
       name: "1.0.0",
@@ -168,7 +452,7 @@ export default defineConfig({
   },
 
   platforms: {
-    android: {
+    ${platforms.android ? `android: {
       minSdk: 24,
       targetSdk: 34,
       permissions: [
@@ -177,88 +461,194 @@ export default defineConfig({
       ],
       icon: "./assets/android/icon.png",
       splash: "./assets/android/splash.png",
-    },
-
+    },` : ''}
+    
     web: {
-      title:  "VaderJS App",
+      title:  "${path.basename(projectDir)}",
       themeColor: "#111827",
     },
 
-    // future
-    ios: {},
-    windows: {},
+    ${platforms.windows ? `windows: {
+      width: 1200,
+      height: 800,
+      title: "${path.basename(projectDir)}"
+    },` : ''}
   },
 
-  plugins: [tailwind]
+  plugins: ${configPlugins}
 });`;
 
-    await fs.writeFile(path.join(projectDir, "vaderjs.config.ts"), vaderConfig);
-    console.log("Created vaderjs.config.ts");
-
-    // Create jsconfig.json for VSCode/IDE support
-    const jsConfig = {
-        compilerOptions: {
-            jsx: "react",
-            jsxFactory: "Vader.createElement",
-            jsxFragmentFactory: "Fragment",
-        },
+  await fs.writeFile(
+    path.join(projectDir, `vaderjs.config.${configExt}`),
+    configContent
+  );
+  console.log(`created vaderjs.config.${configExt}`);
+
+  // Create package.json if it doesn't exist
+  const pkgPath = path.join(projectDir, "package.json");
+  if (!fsSync.existsSync(pkgPath)) {
+    const packageJson = {
+      name: path.basename(projectDir),
+      version: "1.0.0",
+      type: "module",
+      scripts: {
+        dev: "bun run vaderjs dev",
+        build: "bun run vaderjs build",
+        serve: "bun run vaderjs serve"
+      },
+      dependencies: {
+        "vaderjs-native": "latest"
+      },
+      devDependencies: {}
     };
-    await fs.writeFile(path.join(projectDir, "jsconfig.json"), JSON.stringify(jsConfig, null, 2));
-    console.log("Created jsconfig.json");
-
-    // Final instructions
-    const pkgJsonPath = path.join(projectDir, "package.json");
-
-    if (!fsSync.existsSync(pkgJsonPath)) {
-        // If package.json doesn't exist, create it with basic content
-        const pkg = {
-            name: path.basename(projectDir),
-            version: "1.0.0",
-            scripts: {
-                "android:dev": "bun run vaderjs android:dev",
-                "android:build": "bun run vaderjs android:build",
-                dev: "bun run vaderjs dev",
-                build: "bun run vaderjs build",
-                serve: "bun run vaderjs serve",
-            },
-            dependencies: {
-                vaderjs: "latest",
-            },
-        };
-
-        // If Tailwind is requested, add it to the dependencies
-        if (wantsTailwind) {
-            pkg.dependencies.tailwindcss = "latest";
-            pkg.dependencies["@tailwindcss/postcss"] = "latest";
-            pkg.dependencies.postcss = "latest";
-            pkg.dependencies.autoprefixer = "latest";
-        }
 
-        await fs.writeFile(pkgJsonPath, JSON.stringify(pkg, null, 2));
-        console.log(`Created package.json`);
-    } else {
-        // If package.json exists, update it by adding Tailwind if it's not there
-        const pkgJson = JSON.parse(await fs.readFile(pkgJsonPath, "utf8"));
-
-        // Only update the dependencies and scripts if Tailwind is enabled
-        if (wantsTailwind && !pkgJson.dependencies.tailwindcss) {
-            pkgJson.dependencies.tailwindcss = "latest";
-            pkgJson.dependencies["@tailwindcss/postcss"] = "latest";
-            pkgJson.dependencies.postcss = "latest";
-            pkgJson.dependencies.autoprefixer = "latest";
-        }
+    // Add TypeScript if selected
+    if (useTypeScript) {
+      packageJson.devDependencies = {
+        ...packageJson.devDependencies,
+        "typescript": "^5.0.0",
+        "@types/bun": "latest",
+        "vaderjs-types"
+      };
+    }
 
-        // Ensure the scripts are in place (if they're not there already)
-        if (!pkgJson.scripts) pkgJson.scripts = {};
-        pkgJson.scripts.start = pkgJson.scripts.start || "bun run vaderjs build && bun run vaderjs serve";
-        pkgJson.scripts.build = pkgJson.scripts.build || "bun run vaderjs build";
-        pkgJson.scripts.dev = pkgJson.scripts.dev || "bun run vaderjs dev";
+    // Add UI framework dependencies
+    if (selectedFramework !== "none") {
+      for (const dep of framework.deps) {
+        if (dep.startsWith("vaderjs-")) {
+          packageJson.dependencies[dep] = "latest";
+        } else {
+          packageJson.devDependencies[dep] = "latest";
+        }
+      }
+    }
 
-        await fs.writeFile(pkgJsonPath, JSON.stringify(pkgJson, null, 2));
-        console.log(`Updated package.json`);
+    // Add platform-specific scripts
+    if (platforms.android) {
+      packageJson.scripts["android:dev"] = "bun run vaderjs android:dev";
+      packageJson.scripts["android:build"] = "bun run vaderjs android:build";
+    }
+    if (platforms.windows) {
+      packageJson.scripts["windows:dev"] = "bun run vaderjs windows:dev";
+      packageJson.scripts["windows:build"] = "bun run vaderjs windows:build";
     }
 
-    console.log(`\n🎉 Vader.js project initialized at:\n${projectDir}`);
-    console.log(`Run cd ${projectDir} to navigate into the project folder`);
-    console.log("Run `bun run dev` or your build script to get started.");
+    await fs.writeFile(pkgPath, JSON.stringify(packageJson, null, 2));
+    console.log(`created package.json`);
+  }
+ 
+  logSection("📦 Installing dependencies");
+  await run("bun", ["install", "--force"]);
+
+  console.log("\n✅ Project ready!");
+  console.log(`\nNext steps:`);
+  console.log(`  cd ${path.relative(cwd, projectDir)}`);
+  console.log(`  bun run dev`);
+  console.log(`  Open http://localhost:3000`);
+  
+  if (selectedFramework === "daisyui") {
+    console.log(`\nVaderUI components available:`);
+    console.log(`  import Button from 'vaderjs-daisyui/Components/Actions/Button'`);
+    console.log(`  import { Card } from 'vaderjs-daisyui/Components/Data/Display/Card'`);
+  }
+  
+  if (selectedFramework === "bootstrap") {
+    console.log(`\nBootstrap components available:`);
+    console.log(`  import { Button, Card } from 'vaderjs-bootstrap'`);
+  }
 }
+
+/* ---------------------------------- add ----------------------------------- */
+
+export async function addPlugin(name: string) {
+  if (!name) {
+    console.error("Please specify a plugin to add.");
+    process.exit(1);
+  }
+
+  const flags = getFlags();
+  const force = flags.has("--force");
+
+  const pkgName = name.startsWith("vaderjs-") ? name : `vaderjs-${name}`;
+  const importName = pkgName.replace(/^vaderjs-/, "").replace(/-/g, "_");
+
+  logSection(`➕ Adding plugin: ${pkgName}`);
+
+  const args = ["add", pkgName];
+  if (force) args.push("--force");
+
+  await run("bun", args);
+
+  const configPath = path.join(cwd, "vaderjs.config.ts");
+  if (!fsSync.existsSync(configPath)) {
+    console.warn("⚠️  vaderjs.config.ts not found, skipping registration");
+    return;
+  }
+
+  let config = await fs.readFile(configPath, "utf8");
+
+  if (config.includes(`from "${pkgName}"`)) {
+    console.log("ℹ️  Plugin already registered");
+    return;
+  }
+
+  config =
+    `import ${importName} from "${pkgName}";\n` +
+    config.replace(/plugins:\s*\[/, `plugins: [${importName}, `);
+
+  await fs.writeFile(configPath, config);
+  console.log("✔ Plugin registered");
+}
+
+/* -------------------------------- remove ---------------------------------- */
+
+export async function removePlugin(name: string) {
+  if (!name) {
+    console.error("Please specify a plugin to remove.");
+    process.exit(1);
+  }
+
+  const pkgName = name.startsWith("vaderjs-") ? name : `vaderjs-${name}`;
+  const importName = pkgName.replace(/^vaderjs-/, "").replace(/-/g, "_");
+
+  logSection(`➖ Removing plugin: ${pkgName}`);
+
+  await run("bun", ["remove", pkgName]);
+
+  const configPath = path.join(cwd, "vaderjs.config.ts");
+  if (!fsSync.existsSync(configPath)) return;
+
+  let config = await fs.readFile(configPath, "utf8");
+
+  config = config
+    .replace(new RegExp(`import ${importName} from ".*?";\\n?`, "g"), "")
+    .replace(new RegExp(`\\b${importName},?\\s*`, "g"), "");
+
+  await fs.writeFile(configPath, config);
+  console.log("✔ Plugin removed");
+}
+
+/* ---------------------------------- list ---------------------------------- */
+
+export async function listPlugins() {
+  const pkgPath = path.join(cwd, "package.json");
+  if (!fsSync.existsSync(pkgPath)) {
+    console.log("No package.json found.");
+    return;
+  }
+
+  const pkg = JSON.parse(await fs.readFile(pkgPath, "utf8"));
+  const deps = Object.keys(pkg.dependencies || {}).filter((d) =>
+    d.startsWith("vaderjs-")
+  );
+
+  if (!deps.length) {
+    console.log("No Vader plugins installed.");
+    return;
+  }
+
+  logSection("🔌 Installed Vader plugins");
+  deps.forEach((d) => console.log("•", d));
+}
+
+