lovable-stack 1.0.3 → 1.1.0

package/README.md

@@ -0,0 +1,113 @@
+
+Lovable-Stack
+Build Lovable AI projects locally without configuration stress.
+Lovable-Stack is a Bun powered project generator that recreates the working stack behind projects generated by Lovable AI, so you can run, edit, and fully own your code locally.
+It does the heavy setup for you.
+You focus on building.
+
+Why Lovable-Stack?
+AI builders are amazing for speed.
+You can:
+•	Generate a full demo site in minutes
+•	Connect GitHub
+•	Ship ideas fast
+But when you clone that project locally, you may face:
+•	Dependency issues
+•	Runtime conflicts
+•	TypeScript strict errors
+•	Missing configuration alignment
+•	Bun lock visible packages
+Lovable-Stack fixes that.
+It scaffolds a clean, aligned local environment so your project runs properly on your machine.
+
+What You Get
+Lovable-Stack creates a fully configured project using:
+•	Bun
+•	React-Vite
+•	TypeScript
+•	Tailwind CSS
+•	shadcn/ui
+•	Radix UI
+Everything is preconfigured and version-aligned.
+No manual wiring.
+No rebuilding the stack from scratch.
+
+Requirements
+Before using Lovable-Stack, install:
+•	Bun (latest version)
+•	Basic knowledge of React & TypeScript
+Install Bun MacOS/Linux
+curl -fsSL https://bun.sh/install | bash
+
+Install Bun Windows
+powershell -c "irm bun.sh/install.ps1|iex"
+
+
+YOU CAN AS WELL VISIT BUN WEBSITE:
+
+https://bun.com/docs/installation
+
+Quick Start
+1. Create a new project
+bunx lovable-stack my-app
+2. Enter the project folder
+cd my-app
+3. Install dependencies
+bun install
+4. Start development server
+bun run dev
+Your app is now running locally.
+
+How To Use With Lovable AI
+1.	Generate your project using Lovable AI.
+2.	Copy your generated components (e.g. header.tsx, hero.tsx).
+3.	Paste them into /src/components inside your LovableStack project.
+4.	Continue building locally.
+Now you own your code and environment.
+
+Project Structure
+my-app/
+ ├── src/
+ │   ├── components/
+ │   ├── pages/
+ │   └── main.tsx
+ ├── public/
+ ├── tsconfig.json
+ ├── vite.config.ts
+ └── bun.lock
+Everything is already wired together.
+Common Errors & Fixes
+TypeScript “must be imported as type” error
+If you see an error about importing types incorrectly, use:
+import { NavLink as RouterNavLink } from "react-router-dom";
+import type { NavLinkProps } from "react-router-dom";
+Instead of:
+import { NavLinkProps } from "react-router-dom"";
+This project uses strict TypeScript settings.
+
+Reporting Issues
+If you encounter an error not listed here:
+1.	Open a GitHub Issue
+2.	Include:
+o	Your OS
+o	Bun version
+o	Full error message
+o	Screenshot (if possible)
+This helps improve Lovable-Stack for everyone.
+
+Philosophy
+AI helps you move fast.
+Lovable-Stack helps you move correctly.
+It’s built for developers who want:
+•	Speed without losing control
+•	AI assistance without dependency confusion
+•	A stable local development environment
+This project is designed to work alongside Lovable AI projects.
+It is not affiliated with or endorsed by Lovable.
+
+Contributing
+Contributions are welcome.
+1.	Fork the repository
+2.	Create a new branch
+3.	Submit a pull request
+If you’ve solved an issue or improved the developer experience, feel free to contribute.

package/bin/index.js

@@ -1,13 +1,90 @@
 #!/usr/bin/env node
-const fs = require("fs-extra");
-const path = require("path");
 
-const args = process.argv.slice(2);
-const projectName = args[0] || "my-new-project";
+import fs from "fs-extra";
+import path from "path";
+import inquirer from "inquirer";
+import chalk from "chalk";
+import ora from "ora";
+import { fileURLToPath } from "url";
 
-const templatePath = path.join(__dirname, "../template");
-const targetPath = path.join(process.cwd(), projectName);
+/**
+ * Recreate __dirname in ESM (cross-platform safe)
+ */
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 
-fs.copySync(templatePath, targetPath);
+async function run() {
+  const args = process.argv.slice(2);
+  let projectName = args[0];
 
-console.log(`✅ Project "${projectName}" created from lovable-stack template.`);
+  // 1️⃣ Ask for project name if missing
+  if (!projectName) {
+    const answers = await inquirer.prompt([
+      {
+        type: "input",
+        name: "projectName",
+        message: "What is your project name?",
+        default: "my-new-project",
+      },
+    ]);
+
+    projectName = answers.projectName.trim();
+  }
+
+  if (!projectName) {
+    console.log(chalk.red("Project name cannot be empty."));
+    process.exit(1);
+  }
+
+  const templatePath = path.resolve(__dirname, "../template");
+  const targetPath = path.resolve(process.cwd(), projectName);
+
+  // Safety check: template must exist
+  if (!fs.existsSync(templatePath)) {
+    console.log(chalk.red("Template folder not found."));
+    process.exit(1);
+  }
+
+  // 2️⃣ Check if folder exists
+  if (fs.existsSync(targetPath)) {
+    const { overwrite } = await inquirer.prompt([
+      {
+        type: "confirm",
+        name: "overwrite",
+        message: `Folder "${projectName}" already exists. Overwrite?`,
+        default: false,
+      },
+    ]);
+
+    if (!overwrite) {
+      console.log(chalk.yellow("Operation cancelled."));
+      process.exit(0);
+    }
+
+    await fs.remove(targetPath);
+  }
+
+  // 3️⃣ Spinner while copying
+  const spinner = ora("Creating project...").start();
+
+  try {
+    await fs.copy(templatePath, targetPath);
+    spinner.succeed("Project created successfully!");
+  } catch (err) {
+    spinner.fail("Failed to create project.");
+    console.error(err);
+    process.exit(1);
+  }
+
+  // 4️⃣ Final message
+  console.log(`
+${chalk.green("Success!")} Your project is ready.
+
+Next steps:
+  cd ${projectName}
+  bun install
+  bun run dev
+`);
+}
+
+run();

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "lovable-stack",
-  "version": "1.0.3",
+  "version": "1.1.0",
+  "type": "module",
   "bin": {
-    "lovable-stack": "bin/index.js"
+    "lovable-stack": "bin/index.mjs"
   },
   "files": [
     "bin/",
@@ -10,6 +11,9 @@
     "README.md"
   ],
   "dependencies": {
-    "fs-extra": "^11.1.1"
+    "chalk": "^5.6.2",
+    "fs-extra": "^11.3.3",
+    "inquirer": "^13.3.0",
+    "ora": "6"
   }
-}
+}

package/template/bun.lock

@@ -3,7 +3,7 @@
   "configVersion": 1,
   "workspaces": {
     "": {
-      "name": "my-app",
+      "name": "lovable-stack",
       "dependencies": {
         "@hookform/resolvers": "^5.2.2",
         "@radix-ui/react-accordion": "^1.2.12",

package/template/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

package/template/src/App.tsx

@@ -3,14 +3,25 @@ import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-
+import Index from "./pages/Index";
+import NotFound from "./pages/NotFound";
 
 const queryClient = new QueryClient();
 
 const App = () => (
- <>
-  hello
- </>
+  <QueryClientProvider client={queryClient}>
+    <TooltipProvider>
+      <Toaster />
+      <Sonner />
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<Index />} />
+          {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+      </BrowserRouter>
+    </TooltipProvider>
+  </QueryClientProvider>
 );
 
 export default App;

package/template/src/components/NavLink.tsx

@@ -0,0 +1,29 @@
+import { NavLink as RouterNavLink } from "react-router-dom";
+import type { NavLinkProps } from "react-router-dom";
+import { forwardRef } from "react";
+import { cn } from "@/lib/utils";
+
+interface NavLinkCompatProps extends Omit<NavLinkProps, "className"> {
+  className?: string;
+  activeClassName?: string;
+  pendingClassName?: string;
+}
+
+const NavLink = forwardRef<HTMLAnchorElement, NavLinkCompatProps>(
+  ({ className, activeClassName, pendingClassName, to, ...props }, ref) => {
+    return (
+      <RouterNavLink
+        ref={ref}
+        to={to}
+        className={({ isActive, isPending }) =>
+          cn(className, isActive && activeClassName, isPending && pendingClassName)
+        }
+        {...props}
+      />
+    );
+  },
+);
+
+NavLink.displayName = "NavLink";
+
+export { NavLink };

package/template/src/index.css

@@ -1,43 +1,139 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-/* Minimal resets only - no custom themes per requirements */
+
+@layer base {
+  :root {
+    --background: 240 20% 97%;
+    --foreground: 230 25% 18%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 230 25% 18%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 230 25% 18%;
+
+    --primary: 340 65% 60%;
+    --primary-foreground: 0 0% 100%;
+
+    --secondary: 240 15% 93%;
+    --secondary-foreground: 230 25% 18%;
+
+    --muted: 240 12% 92%;
+    --muted-foreground: 230 10% 46%;
+
+    --accent: 260 30% 94%;
+    --accent-foreground: 230 25% 18%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 240 12% 90%;
+    --input: 240 12% 90%;
+    --ring: 340 65% 60%;
+
+    --radius: 0.75rem;
+
+    --gradient-hero: linear-gradient(135deg, hsl(240 20% 97%) 0%, hsl(330 30% 95%) 50%, hsl(260 25% 95%) 100%);
+    --shadow-soft: 0 4px 24px -4px hsl(230 25% 18% / 0.06);
+    --shadow-card: 0 1px 12px -2px hsl(230 25% 18% / 0.05);
+
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  .dark {
+    --background: 230 20% 8%;
+    --foreground: 220 20% 92%;
+    --card: 230 18% 12%;
+    --card-foreground: 220 20% 92%;
+    --popover: 230 18% 12%;
+    --popover-foreground: 220 20% 92%;
+    --primary: 340 65% 60%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 230 15% 16%;
+    --secondary-foreground: 220 20% 92%;
+    --muted: 230 12% 18%;
+    --muted-foreground: 220 10% 55%;
+    --accent: 260 20% 18%;
+    --accent-foreground: 220 20% 92%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 230 12% 20%;
+    --input: 230 12% 20%;
+    --ring: 340 65% 60%;
+    --gradient-hero: linear-gradient(135deg, hsl(230 20% 8%) 0%, hsl(330 15% 12%) 50%, hsl(260 15% 12%) 100%);
+    --shadow-soft: 0 4px 24px -4px hsl(0 0% 0% / 0.3);
+    --shadow-card: 0 1px 12px -2px hsl(0 0% 0% / 0.2);
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+
 @layer base {
   * {
-    scroll-behavior: smooth;
+    @apply border-border;
   }
-  
   body {
-    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+    @apply bg-background text-foreground;
+    font-family: 'Inter', system-ui, sans-serif;
   }
 }
 
-@layer utilities {
-  .animate-fade-in {
-    animation: fadeIn 0.5s ease-out forwards;
+@keyframes glow-pulse {
+  0%, 100% {
+    filter: drop-shadow(0 0 8px hsl(340 65% 60% / 0.6)) drop-shadow(0 0 20px hsl(340 65% 60% / 0.3));
+    transform: scale(1);
   }
-  
-  .animate-slide-up {
-    animation: slideUp 0.6s ease-out forwards;
-  }
-  
-  .animate-pulse-soft {
-    animation: pulseSoft 2s ease-in-out infinite;
+  50% {
+    filter: drop-shadow(0 0 16px hsl(340 65% 60% / 0.8)) drop-shadow(0 0 40px hsl(340 65% 60% / 0.5));
+    transform: scale(1.1);
   }
 }
 
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+.glow-heart {
+  display: inline-block;
+  animation: glow-pulse 2s ease-in-out infinite;
+}
+
+@keyframes typing {
+  from { width: 0; }
+  to { width: 100%; }
+}
+
+@keyframes blink-caret {
+  from, to { border-color: transparent; }
+  50% { border-color: hsl(var(--primary)); }
 }
 
-@keyframes slideUp {
-  from { opacity: 0; transform: translateY(20px); }
-  to { opacity: 1; transform: translateY(0); }
+.typing-text {
+  display: inline-block;
+  overflow: hidden;
+  white-space: nowrap;
+  border-right: 2px solid hsl(var(--primary));
+  width: 0;
+  animation:
+    typing-loop 7s steps(26, end) infinite,
+    blink-caret 0.75s step-end infinite;
 }
 
-@keyframes pulseSoft {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.7; }
+@keyframes typing-loop {
+  0% { width: 0; }
+  28% { width: 100%; }    /* typed by ~2s */
+  86% { width: 100%; }    /* hold until ~6s */
+  100% { width: 0; }      /* reset */
 }

package/template/src/pages/Index.tsx

@@ -0,0 +1,97 @@
+const steps = [
+  { num: "1️⃣", text: "Go to Lovable AI" },
+  { num: "2️⃣", text: "Generate your UI" },
+  { num: "3️⃣", text: "Copy the generated source files" },
+  { num: "4️⃣", text: "Replace the matching files in your local project" },
+  { num: "5️⃣", text: "Run the project again" },
+];
+
+const editableFiles = [
+  "src/components/*",
+  "src/pages/*",
+  "src/App.tsx",
+  "src/App.css",
+  "src/index.css",
+  "index.html",
+  "tailwind.config.ts",
+  "package.json (name only)",
+];
+
+const Index = () => {
+  return (
+    <div className="min-h-screen" style={{ background: "var(--gradient-hero)" }}>
+      <div className="mx-auto max-w-3xl px-6 py-20 space-y-16">
+
+        {/* Hero */}
+        <section className="text-center space-y-5 pt-12 pb-4">
+          <div className="text-4xl sm:text-5xl font-bold tracking-tight text-foreground">
+            <span className="glow-heart text-5xl sm:text-6xl">💖</span>
+            <h1 className="typing-text text-4xl sm:text-5xl font-bold tracking-tight text-foreground mx-auto mt-3" style={{ maxWidth: 'max-content' }}>
+              Welcome to Lovable Stack
+            </h1>
+          </div>
+          <p className="text-lg text-muted-foreground font-medium">
+            AI-assisted building, fully editable by you.
+          </p>
+          <p className="text-sm text-muted-foreground leading-relaxed max-w-md mx-auto">
+            Lovable AI generated your initial layout.
+            <br />
+            Now it's yours to shape.
+          </p>
+        </section>
+
+        {/* How It Works */}
+        <section className="rounded-2xl bg-card p-8 sm:p-10 space-y-6" style={{ boxShadow: "var(--shadow-soft)" }}>
+          <h2 className="text-2xl font-semibold text-foreground">
+            💖 How Lovable AI Works With Your Project
+          </h2>
+          <p className="text-sm text-muted-foreground">
+            Lovable Stack ships with a starter demo template. When you generate a project using Lovable AI:
+          </p>
+          <ol className="space-y-3">
+            {steps.map((s) => (
+              <li key={s.num} className="flex items-start gap-3 text-sm text-foreground">
+                <span className="shrink-0 text-base">{s.num}</span>
+                <span>{s.text}</span>
+              </li>
+            ))}
+          </ol>
+          <p className="text-sm font-medium text-primary">Done.</p>
+        </section>
+
+        {/* Editable Files */}
+        <section className="rounded-2xl bg-card p-8 sm:p-10 space-y-6" style={{ boxShadow: "var(--shadow-soft)" }}>
+          <h2 className="text-2xl font-semibold text-foreground">
+            🧩 Editable Files
+          </h2>
+          <p className="text-sm text-muted-foreground">
+            Only these files should be replaced when updating from Lovable AI:
+          </p>
+          <ul className="grid gap-2">
+            {editableFiles.map((f) => (
+              <li key={f} className="rounded-lg bg-secondary px-4 py-2.5 text-sm font-mono text-secondary-foreground">
+                {f}
+              </li>
+            ))}
+          </ul>
+          <div className="rounded-xl bg-muted p-5 space-y-2 mt-4">
+            <p className="text-sm text-foreground font-medium">Architecture note</p>
+            <p className="text-sm text-muted-foreground leading-relaxed">
+              The base template handles tooling, configuration, and environment setup.
+              Lovable AI only replaces UI and layout logic.
+              This separation keeps your project stable.
+            </p>
+          </div>
+        </section>
+
+        <footer className="text-center pb-8">
+          <p className="text-xs text-muted-foreground">
+            Built with Lovable Stack
+          </p>
+        </footer>
+      </div>
+    </div>
+  );
+};
+
+export default Index;

package/template/src/pages/NotFound.tsx

@@ -0,0 +1,24 @@
+import { useLocation } from "react-router-dom";
+import { useEffect } from "react";
+
+const NotFound = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    console.error("404 Error: User attempted to access non-existent route:", location.pathname);
+  }, [location.pathname]);
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-muted">
+      <div className="text-center">
+        <h1 className="mb-4 text-4xl font-bold">404</h1>
+        <p className="mb-4 text-xl text-muted-foreground">Oops! Page not found</p>
+        <a href="/" className="text-primary underline hover:text-primary/90">
+          Return to Home
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default NotFound;

package/template/tailwind.config.ts

@@ -0,0 +1,91 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  darkMode: ["class"],
+  content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+          ring: "hsl(var(--sidebar-ring))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: {
+            height: "0",
+          },
+          to: {
+            height: "var(--radix-accordion-content-height)",
+          },
+        },
+        "accordion-up": {
+          from: {
+            height: "var(--radix-accordion-content-height)",
+          },
+          to: {
+            height: "0",
+          },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+} satisfies Config;