lovable-stack 1.0.3 → 1.1.1

package/README.md

@@ -0,0 +1,173 @@
+# 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.
+
+---
+
+## Quick Start
+
+1. Create a new project:
+
+```bash
+bunx lovable-stack my-app
+
+Enter the project folder:
+
+cd my-app
+
+Install dependencies:
+
+bun install
+
+Start the development server:
+
+bun run dev
+
+Your app is now running locally.
+
+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"
+
+Visit Bun website: https://bun.com/docs/installation
+
+How To Use With Lovable AI
+
+Generate your project using Lovable AI.
+
+Copy your generated components (e.g., header.tsx, hero.tsx).
+
+Paste them into /src/components inside your Lovable Stack project.
+
+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:
+
+Open a GitHub Issue
+
+Include:
+
+Your OS
+
+Bun version
+
+Full error message
+
+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:
+
+Fork the repository
+
+Create a new branch
+
+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.1",
+  "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;