404lab 2.0.4 → 2.0.6

package/cli/utils/fs.js

@@ -51,7 +51,7 @@ export async function safeWrite(filePath, content, options = {}) {
     }
 
     log.warn(`File exists: ${relPath}`);
-    const shouldOverwrite = await confirm("Overwrite?", true);
+    const shouldOverwrite = await confirm("Overwrite?", false);
 
     if (!shouldOverwrite) {
       log.info(`Skipped: ${relPath}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "404lab",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "A CLI tool for generating beautiful custom 404 pages in Next.js projects",
   "type": "module",
   "preferGlobal": true,

package/templates/AmongUs.tsx

@@ -4,7 +4,6 @@ import { useEffect, useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { VT323 } from "next/font/google";
-import { cn } from "@/components/ui/cn";
 
 const vt323 = VT323({
   weight: "400",
@@ -37,11 +36,7 @@ const AmongUs = ({ className }: { className?: string }) => {
   return (
     <div
       ref={containerRef}
-      className={cn(
-        "relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden bg-[#000000] text-white",
-        vt323.className,
-        className
-      )}
+      className={`relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden bg-[#000000] text-white ${vt323.className} ${className || ""}`}
     >
       <style jsx global>{`
 

package/templates/BlueGlitch.tsx

@@ -2,8 +2,6 @@
 
 import { useEffect, useState } from "react";
 import Link from "next/link";
-import { cn } from "@/components/ui/cn";
-
 const BlueGlitch = ({
   fullScreen = true,
   className,
@@ -22,11 +20,7 @@ const BlueGlitch = ({
 
   return (
     <main
-      className={cn(
-        "relative flex items-center justify-center bg-[#000084] overflow-hidden select-none font-mono",
-        fullScreen ? "min-h-screen" : "h-full",
-        className
-      )}
+      className={`relative flex items-center justify-center bg-[#000084] overflow-hidden select-none font-mono ${fullScreen ? "min-h-screen" : "h-full"} ${className || ""}`}
     >
       <style jsx global>{`
         @font-face {

package/templates/BugGame.tsx

@@ -2,7 +2,6 @@
 
 import { useEffect, useRef, useState, useCallback } from 'react';
 import Link from 'next/link';
-import { cn } from '@/components/ui/cn';
 
 export default function BugGame404() {
   const canvasRef = useRef<HTMLCanvasElement>(null);

package/templates/GeeksforGeeks.tsx

@@ -3,15 +3,11 @@
 import Image from "next/image";
 import Link from "next/link";
 import { Search, GraduationCap, Code2, Terminal, BookOpen } from "lucide-react";
-import { cn } from "@/components/ui/cn";
 
 const GeeksforGeeks = ({ className }: { className?: string }) => {
   return (
     <div
-      className={cn(
-        "min-h-screen flex flex-col items-center justify-center bg-[#f8f9fa] relative overflow-hidden px-4 py-12",
-        className
-      )}
+      className={`min-h-screen flex flex-col items-center justify-center bg-[#f8f9fa] relative overflow-hidden px-4 py-12 ${className || ""}`}
     >
       <style jsx global>{`
         @keyframes fadeIn {
@@ -118,11 +114,9 @@ const GeeksforGeeks = ({ className }: { className?: string }) => {
 const Card = ({ title, icon, color, description }: { title: string; icon: React.ReactNode; color: string; description: string }) => {
   return (
     <div
-      className={cn(
-        "p-6 rounded-2xl border bg-white flex flex-col items-center text-center shadow-sm hover:shadow-xl transition-all duration-300 cursor-pointer group hover:-translate-y-2 hover:scale-[1.02]"
-      )}
+      className="p-6 rounded-2xl border bg-white flex flex-col items-center text-center shadow-sm hover:shadow-xl transition-all duration-300 cursor-pointer group hover:-translate-y-2 hover:scale-[1.02]"
     >
-      <div className={cn("p-4 rounded-xl mb-4 transition-colors group-hover:scale-110", color)}>
+      <div className={`p-4 rounded-xl mb-4 transition-colors group-hover:scale-110 ${color}`}>
         {icon}
       </div>
       <h3 className="font-bold text-gray-900 mb-1">{title}</h3>

package/templates/Google.tsx

@@ -1,17 +1,11 @@
 "use client";
 
 import Link from "next/link";
-import { cn } from "@/components/ui/cn";
 import Image from "next/image";
-
-
 const Google = ({ className }: { className?: string }) => {
   return (
     <div
-      className={cn(
-        "min-h-screen bg-white flex flex-col items-center justify-center font-sans relative overflow-hidden",
-        className
-      )}
+      className={`min-h-screen bg-white flex flex-col items-center justify-center font-sans relative overflow-hidden ${className || ""}`}
     >
       <div className="absolute top-6 sm:top-10 left-6 sm:left-10 md:left-20">
         <Image

package/templates/MacOs.tsx

@@ -2,13 +2,11 @@
 
 import { useEffect, useRef, useState, KeyboardEvent } from "react";
 import { useRouter } from "next/navigation";
-import { cn } from "@/components/ui/cn";
 
 type OutputLine = {
   type: "command" | "output" | "error" | "system" | "warning";
   text: string;
 };
-
 const MacOs = ({ className }: { className?: string }) => {
   const router = useRouter();
   const inputRef = useRef<HTMLInputElement>(null);
@@ -68,7 +66,7 @@ const MacOs = ({ className }: { className?: string }) => {
   };
 
   return (
-    <main className={cn("min-h-screen flex items-center justify-center bg-[#0d1117] relative overflow-hidden font-mono", className)}>
+    <main className={`min-h-screen flex items-center justify-center bg-[#0d1117] relative overflow-hidden font-mono ${className || ""}`}>
       <div className="absolute inset-0 z-0">
         <div className="absolute top-[-10%] right-[-10%] w-[500px] h-[500px] bg-purple-600/10 rounded-full blur-[120px]" />
         <div className="absolute bottom-[-10%] left-[-10%] w-[500px] h-[500px] bg-blue-600/10 rounded-full blur-[120px]" />

package/templates/ModernPage.tsx

@@ -2,15 +2,11 @@
 
 
 import Link from "next/link";
-import { cn } from "@/components/ui/cn";
 
 const ModernPage = ({ className }: { className?: string }) => {
   return (
     <div
-      className={cn(
-        "min-h-screen bg-[#050505] flex items-center justify-center p-6 overflow-hidden relative font-sans",
-        className
-      )}
+      className={`min-h-screen bg-[#050505] flex items-center justify-center p-6 overflow-hidden relative font-sans ${className || ""}`}
     >
       {/* Mesh Gradient Background */}
       <div className="absolute inset-0 overflow-hidden pointer-events-none">

package/templates/Particles.tsx

@@ -4,7 +4,6 @@ import { useEffect, useState } from "react";
 import Particles, { initParticlesEngine } from "@tsparticles/react";
 import { loadSlim } from "@tsparticles/slim";
 import { type Container, type ISourceOptions } from "@tsparticles/engine";
-import { cn } from "@/components/ui/cn";
 import Link from "next/link";
 
 const Custom404Clean = ({
@@ -132,11 +131,7 @@ const Custom404Clean = ({
 
   return (
     <div
-      className={cn(
-        "relative flex items-center justify-center bg-black text-white overflow-hidden select-none",
-        fullScreen ? "h-screen w-full" : "h-full w-full",
-        className
-      )}
+      className={`relative flex items-center justify-center bg-black text-white overflow-hidden select-none ${fullScreen ? "h-screen w-full" : "h-full w-full"} ${className || ""}`}
     >
       {init && (
         <Particles

package/templates/Poet.tsx

@@ -2,17 +2,13 @@
 
 
 import Link from "next/link";
-import { cn } from "@/components/ui/cn";
 
 const Poet = ({ className }: { className?: string }) => {
 
 
   return (
     <div
-      className={cn(
-        "min-h-screen bg-[#1a1a1a] flex items-center justify-center p-6 relative overflow-hidden font-serif",
-        className
-      )}
+      className={`min-h-screen bg-[#1a1a1a] flex items-center justify-center p-6 relative overflow-hidden font-serif ${className || ""}`}
     >
       <style jsx global>{`
         @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&display=swap');

package/templates/RetroTv.tsx

@@ -3,8 +3,6 @@
 import { useEffect, useRef, useState } from "react";
 import Link from "next/link";
 
-import { cn } from "@/components/ui/cn";
-
 const RetroTv = ({ className }: { className?: string }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [isOn, setIsOn] = useState(false);
@@ -60,10 +58,7 @@ const RetroTv = ({ className }: { className?: string }) => {
 
   return (
     <div
-      className={cn(
-        "min-h-screen bg-[#1a1a1a] flex items-center justify-center p-4 sm:p-8 font-mono overflow-hidden select-none",
-        className
-      )}
+      className={`min-h-screen bg-[#1a1a1a] flex items-center justify-center p-4 sm:p-8 font-mono overflow-hidden select-none ${className || ""}`}
     >
       <style jsx global>{`
         .crt-curve {
@@ -189,10 +184,7 @@ const RetroTv = ({ className }: { className?: string }) => {
 
             <button 
               onClick={() => setIsOn(!isOn)}
-              className={cn(
-                "px-4 py-2 text-xs rounded-md transition-all border-b-2 border-black font-bold",
-                isOn ? "bg-red-900 text-red-100" : "bg-green-900 text-green-100"
-              )}
+              className={`px-4 py-2 text-xs rounded-md transition-all border-b-2 border-black font-bold ${isOn ? "bg-red-900 text-red-100" : "bg-green-900 text-green-100"}`}
             >
               {isOn ? "POWER OFF" : "POWER ON"}
             </button>

package/templates/SimplePage.tsx

@@ -2,15 +2,11 @@
 
 
 import Link from "next/link";
-import { cn } from "@/components/ui/cn";
 
 const SimplePage = ({ className }: { className?: string }) => {
   return (
     <div
-      className={cn(
-        "min-h-screen bg-white dark:bg-[#050505] flex items-center justify-center p-6 font-sans relative",
-        className
-      )}
+      className={`min-h-screen bg-white dark:bg-[#050505] flex items-center justify-center p-6 font-sans relative ${className || ""}`}
     >
       <style jsx global>{`
         @keyframes fadeInUp {

package/templates/Snow.tsx

@@ -3,8 +3,6 @@
 import { useEffect, useRef, useState } from "react";
 import Link from "next/link";
 
-import { cn } from "@/components/ui/cn";
-
 const Snow = ({ className }: { className?: string }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [isHovered, setIsHovered] = useState(false);
@@ -80,10 +78,7 @@ const Snow = ({ className }: { className?: string }) => {
 
   return (
     <div
-      className={cn(
-        "min-h-screen w-full flex flex-col items-center justify-center overflow-hidden bg-gradient-to-b from-[#b7d1e5] via-[#e8f2f6] to-white relative",
-        className
-      )}
+      className={`min-h-screen w-full flex flex-col items-center justify-center overflow-hidden bg-gradient-to-b from-[#b7d1e5] via-[#e8f2f6] to-white relative ${className || ""}`}
     >
       <canvas ref={canvasRef} className="absolute inset-0 z-10 pointer-events-none opacity-60" />
 

package/templates/StoneAge.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react";
 import Link from "next/link";
 import { Arvo } from "next/font/google";
-import { cn } from "@/components/ui/cn";
+
 
 const arvo = Arvo({
   weight: ["400", "700"],
@@ -22,11 +22,7 @@ const StoneAge = ({ className }: { className?: string }) => {
 
   return (
     <div
-      className={cn(
-        "min-h-screen w-full bg-[#fcf8f0] flex flex-col items-center justify-center p-8 overflow-hidden relative",
-        arvo.className,
-        className
-      )}
+      className={`min-h-screen w-full bg-[#fcf8f0] flex flex-col items-center justify-center p-8 overflow-hidden relative ${arvo.className} ${className || ""}`}
     >
       <style jsx global>{`
         .paper-texture {

package/templates/StrangerThings.tsx

@@ -1,16 +1,11 @@
 "use client";
 
-import { cn } from "@/components/ui/cn";
-
 import Link from "next/link";
 
 const StrangerThings = ({ className }: { className?: string }) => {
   return (
     <div
-      className={cn(
-        "min-h-[500px] flex flex-col items-center justify-center p-6 overflow-hidden transition-colors duration-500 bg-background",
-        className
-      )}
+      className={`min-h-[500px] flex flex-col items-center justify-center p-6 overflow-hidden transition-colors duration-500 bg-background ${className || ""}`}
       style={{ perspective: "1200px" }}
     >
       <style jsx>{`

package/templates/Terminal.tsx

@@ -3,8 +3,6 @@
 import { useEffect, useRef, useState } from "react";
 import Link from "next/link";
 
-import { cn } from "@/components/ui/cn";
-
 const Terminal = ({ className }: { className?: string }) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [displayText, setDisplayText] = useState("");
@@ -83,10 +81,7 @@ const Terminal = ({ className }: { className?: string }) => {
 
   return (
     <div
-      className={cn(
-        "min-h-screen bg-black flex flex-col items-center justify-center p-8 overflow-hidden font-mono relative",
-        className
-      )}
+      className={`min-h-screen bg-black flex flex-col items-center justify-center p-8 overflow-hidden font-mono relative ${className || ""}`}
     >
       <style jsx global>{`
         @keyframes fadeInScale {

package/templates/Vercel.tsx

@@ -2,7 +2,6 @@
 
 
 import Link from "next/link";
-import { cn } from "@/components/ui/cn";
 import { useEffect, useState } from "react";
 
 const allLogs = [
@@ -38,10 +37,7 @@ const Vercel = ({ className }: { className?: string }) => {
 
   return (
     <div
-      className={cn(
-        "min-h-screen w-full bg-black text-white flex flex-col items-center justify-center p-8 overflow-hidden font-sans relative",
-        className
-      )}
+      className={`min-h-screen w-full bg-black text-white flex flex-col items-center justify-center p-8 overflow-hidden font-sans relative ${className || ""}`}
     >
       <style jsx global>{`
         @keyframes fadeIn {
@@ -130,10 +126,7 @@ const Vercel = ({ className }: { className?: string }) => {
             {logs.map((log, i) => (
               <div 
                 key={i}
-                className={cn(
-                  "flex gap-4 animate-fade-in-right",
-                  log.text.includes("Error") || log.text.includes("failed") ? "text-red-400" : "text-gray-400"
-                )}
+                className={`flex gap-4 animate-fade-in-right ${log.text.includes("Error") || log.text.includes("failed") ? "text-red-400" : "text-gray-400"}`}
               >
                 <span className="text-gray-600">[{log.time}]</span>
                 <span>{log.text}</span>

package/templates/Void.tsx

@@ -2,7 +2,6 @@
 
 import { useEffect, useRef, useState } from "react";
 import Link from "next/link";
-import { cn } from "@/components/ui/cn";
 
 export default function Void({ className }: { className?: string }) {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
@@ -211,7 +210,7 @@ export default function Void({ className }: { className?: string }) {
   }, []);
 
   return (
-    <div className={cn("relative min-h-screen flex flex-col items-center justify-center bg-[#05050a] text-[#f0f0f3] overflow-hidden font-sans", className)}>
+    <div className={`relative min-h-screen flex flex-col items-center justify-center bg-[#05050a] text-[#f0f0f3] overflow-hidden font-sans ${className || ""}`}>
       <style jsx global>{`
         @keyframes fadeIn {
           from { opacity: 0; transform: translateY(10px); }
@@ -257,7 +256,7 @@ export default function Void({ className }: { className?: string }) {
             ))}
           </div>
 
-          <div className={cn("transition-all duration-500 transform", isChanging ? "opacity-0 translate-y-2" : "opacity-100 translate-y-0")}>
+          <div className={`transition-all duration-500 transform ${isChanging ? "opacity-0 translate-y-2" : "opacity-100 translate-y-0"}`}>
             <h1 className="text-2xl md:text-5xl font-bold tracking-tight mb-4 flex flex-col items-center">
               <span className="text-white/80">{messages[titleIdx].title[0]}</span>
               <span className="text-[#00e5c7] drop-shadow-[0_0_15px_rgba(0,229,199,0.3)]">