create-rakta-app 0.1.5 → 0.1.7

package/dist/index.js

@@ -886,16 +886,34 @@ var T$1 = class T extends V {
     }
   }
 };
+
+class r extends V {
+  get cursor() {
+    return this.value ? 0 : 1;
+  }
+  get _value() {
+    return this.cursor === 0;
+  }
+  constructor(t2) {
+    super(t2, false), this.value = !!t2.initialValue, this.on("userInput", () => {
+      this.value = this._value;
+    }), this.on("confirm", (i) => {
+      this.output.write(import_sisteransi.cursor.move(0, -1)), this.value = i, this.state = "submit", this.close();
+    }), this.on("cursor", () => {
+      this.value = !this.value;
+    });
+  }
+}
 var _ = {
   Y: { type: "year", len: 4 },
   M: { type: "month", len: 2 },
   D: { type: "day", len: 2 }
 };
-function M(r) {
-  return [...r].map((t2) => _[t2]);
+function M(r2) {
+  return [...r2].map((t2) => _[t2]);
 }
-function P(r) {
-  const i = new Intl.DateTimeFormat(r, {
+function P(r2) {
+  const i = new Intl.DateTimeFormat(r2, {
     year: "numeric",
     month: "2-digit",
     day: "2-digit"
@@ -905,32 +923,32 @@ function P(r) {
     e.type === "literal" ? n = e.value.trim() || e.value : (e.type === "year" || e.type === "month" || e.type === "day") && s.push({ type: e.type, len: e.type === "year" ? 4 : 2 });
   return { segments: s, separator: n };
 }
-function p(r) {
-  return Number.parseInt((r || "0").replace(/_/g, "0"), 10) || 0;
+function p(r2) {
+  return Number.parseInt((r2 || "0").replace(/_/g, "0"), 10) || 0;
 }
-function f(r) {
+function f(r2) {
   return {
-    year: p(r.year),
-    month: p(r.month),
-    day: p(r.day)
+    year: p(r2.year),
+    month: p(r2.month),
+    day: p(r2.day)
   };
 }
-function c(r, t2) {
-  return new Date(r || 2001, t2 || 1, 0).getDate();
+function c(r2, t2) {
+  return new Date(r2 || 2001, t2 || 1, 0).getDate();
 }
-function b(r) {
-  const { year: t2, month: i, day: s } = f(r);
+function b(r2) {
+  const { year: t2, month: i, day: s } = f(r2);
   if (!t2 || t2 < 0 || t2 > 9999 || !i || i < 1 || i > 12 || !s || s < 1)
     return;
   const n = new Date(Date.UTC(t2, i - 1, s));
   if (!(n.getUTCFullYear() !== t2 || n.getUTCMonth() !== i - 1 || n.getUTCDate() !== s))
     return { year: t2, month: i, day: s };
 }
-function C(r) {
-  const t2 = b(r);
+function C(r2) {
+  const t2 = b(r2);
   return t2 ? new Date(Date.UTC(t2.year, t2.month - 1, t2.day)) : undefined;
 }
-function T2(r, t2, i, s) {
+function T2(r2, t2, i, s) {
   const n = i ? {
     year: i.getUTCFullYear(),
     month: i.getUTCMonth() + 1,
@@ -940,7 +958,7 @@ function T2(r, t2, i, s) {
     month: s.getUTCMonth() + 1,
     day: s.getUTCDate()
   } : null;
-  return r === "year" ? { min: n?.year ?? 1, max: e?.year ?? 9999 } : r === "month" ? {
+  return r2 === "year" ? { min: n?.year ?? 1, max: e?.year ?? 9999 } : r2 === "month" ? {
     min: n && t2.year === n.year ? n.month : 1,
     max: e && t2.year === e.year ? e.month : 12
   } : {
@@ -1113,26 +1131,26 @@ var u$1 = class u extends V {
   cursor = 0;
   #t;
   getGroupItems(t2) {
-    return this.options.filter((r) => r.group === t2);
+    return this.options.filter((r2) => r2.group === t2);
   }
   isGroupSelected(t2) {
-    const r = this.getGroupItems(t2), e = this.value;
-    return e === undefined ? false : r.every((s) => e.includes(s.value));
+    const r2 = this.getGroupItems(t2), e = this.value;
+    return e === undefined ? false : r2.every((s) => e.includes(s.value));
   }
   toggleValue() {
     const t2 = this.options[this.cursor];
     if (this.value === undefined && (this.value = []), t2.group === true) {
-      const r = t2.value, e = this.getGroupItems(r);
-      this.isGroupSelected(r) ? this.value = this.value.filter((s) => e.findIndex((i) => i.value === s) === -1) : this.value = [...this.value, ...e.map((s) => s.value)], this.value = Array.from(new Set(this.value));
+      const r2 = t2.value, e = this.getGroupItems(r2);
+      this.isGroupSelected(r2) ? this.value = this.value.filter((s) => e.findIndex((i) => i.value === s) === -1) : this.value = [...this.value, ...e.map((s) => s.value)], this.value = Array.from(new Set(this.value));
     } else {
-      const r = this.value.includes(t2.value);
-      this.value = r ? this.value.filter((e) => e !== t2.value) : [...this.value, t2.value];
+      const r2 = this.value.includes(t2.value);
+      this.value = r2 ? this.value.filter((e) => e !== t2.value) : [...this.value, t2.value];
     }
   }
   constructor(t2) {
     super(t2, false);
-    const { options: r } = t2;
-    this.#t = t2.selectableGroups !== false, this.options = Object.entries(r).flatMap(([e, s]) => [
+    const { options: r2 } = t2;
+    this.#t = t2.selectableGroups !== false, this.options = Object.entries(r2).flatMap(([e, s]) => [
       { value: e, group: true, label: e },
       ...s.map((i) => ({ ...i, group: e }))
     ]), this.value = [...t2.initialValues ?? []], this.cursor = Math.max(this.options.findIndex(({ value: e }) => e === t2.cursorAt), this.#t ? 0 : 1), this.on("cursor", (e) => {
@@ -1170,10 +1188,10 @@ class h extends V {
     const t2 = this.userInput;
     if (this.cursor >= t2.length)
       return `${t2}\u2588`;
-    const s = t2.slice(0, this.cursor), r = t2[this.cursor], i = t2.slice(this.cursor + 1);
-    return r === `
+    const s = t2.slice(0, this.cursor), r2 = t2[this.cursor], i = t2.slice(this.cursor + 1);
+    return r2 === `
 ` ? `${s}\u2588
-${i}` : `${s}${styleText("inverse", r)}${i}`;
+${i}` : `${s}${styleText("inverse", r2)}${i}`;
   }
   get cursor() {
     return this._cursor;
@@ -1206,8 +1224,8 @@ ${i}` : `${s}${styleText("inverse", r)}${i}`;
     if (this.#s)
       return this.focused === "submit" ? true : (this.#r(`
 `), this._cursor++, false);
-    const r = this.#t;
-    return this.#t = true, r && this.cursor === this.userInput.length ? (this.userInput[this.cursor - 1] === `
+    const r2 = this.#t;
+    return this.#t = true, r2 && this.cursor === this.userInput.length ? (this.userInput[this.cursor - 1] === `
 ` && (this._setUserInput(this.userInput.slice(0, this.cursor - 1) + this.userInput.slice(this.cursor)), this._cursor--), true) : (this.#r(`
 `), this._cursor++, false);
   }
@@ -1216,12 +1234,12 @@ ${i}` : `${s}${styleText("inverse", r)}${i}`;
     super({
       ...t2,
       initialUserInput: s
-    }, false), s !== undefined && (this._cursor = s.length), this.#s = t2.showSubmit ?? false, this.on("key", (r, i) => {
+    }, false), s !== undefined && (this._cursor = s.length), this.#s = t2.showSubmit ?? false, this.on("key", (r2, i) => {
       if (i?.name && o$1.has(i.name)) {
         this.#t = false, this.#i(i.name);
         return;
       }
-      if (r === "\t" && this.#s) {
+      if (r2 === "\t" && this.#s) {
         this.focused = this.focused === "editor" ? "submit" : "editor";
         return;
       }
@@ -1234,10 +1252,10 @@ ${i}` : `${s}${styleText("inverse", r)}${i}`;
           this._setUserInput(this.userInput.slice(0, this.cursor) + this.userInput.slice(this.cursor + 1));
           return;
         }
-        r && (this.#s && this.focused === "submit" && (this.focused = "editor"), this.#r(r ?? ""), this._cursor++);
+        r2 && (this.#s && this.focused === "submit" && (this.focused = "editor"), this.#r(r2 ?? ""), this._cursor++);
       }
-    }), this.on("userInput", (r) => {
-      this._setValue(r);
+    }), this.on("userInput", (r2) => {
+      this._setValue(r2);
     }), this.on("finalize", () => {
       this.value || (this.value = t2.defaultValue), this.value === undefined && (this.value = "");
     });
@@ -1277,8 +1295,8 @@ class n extends V {
     const t2 = this.userInput;
     if (this.cursor >= t2.length)
       return `${this.userInput}\u2588`;
-    const e = t2.slice(0, this.cursor), [s, ...r] = t2.slice(this.cursor);
-    return `${e}${styleText("inverse", s)}${r.join("")}`;
+    const e = t2.slice(0, this.cursor), [s, ...r2] = t2.slice(this.cursor);
+    return `${e}${styleText("inverse", s)}${r2.join("")}`;
   }
   get cursor() {
     return this._cursor;
@@ -1412,6 +1430,41 @@ var limitOptions = ({
       b2.push(n2);
   return u3 && b2.push(C2), b2;
 };
+var confirm = (i) => {
+  const a2 = i.active ?? "Yes", s = i.inactive ?? "No";
+  return new r({
+    active: a2,
+    inactive: s,
+    signal: i.signal,
+    input: i.input,
+    output: i.output,
+    initialValue: i.initialValue ?? true,
+    render() {
+      const e = i.withGuide ?? settings.withGuide, u3 = `${symbol(this.state)}  `, l2 = e ? `${styleText2("gray", S_BAR)}  ` : "", f2 = wrapTextWithPrefix(i.output, i.message, l2, u3), o2 = `${e ? `${styleText2("gray", S_BAR)}
+` : ""}${f2}
+`, c2 = this.value ? a2 : s;
+      switch (this.state) {
+        case "submit": {
+          const r2 = e ? `${styleText2("gray", S_BAR)}  ` : "";
+          return `${o2}${r2}${styleText2("dim", c2)}`;
+        }
+        case "cancel": {
+          const r2 = e ? `${styleText2("gray", S_BAR)}  ` : "";
+          return `${o2}${r2}${styleText2(["strikethrough", "dim"], c2)}${e ? `
+${styleText2("gray", S_BAR)}` : ""}`;
+        }
+        default: {
+          const r2 = e ? `${styleText2("cyan", S_BAR)}  ` : "", g2 = e ? styleText2("cyan", S_BAR_END) : "";
+          return `${o2}${r2}${this.value ? `${styleText2("green", S_RADIO_ACTIVE)} ${a2}` : `${styleText2("dim", S_RADIO_INACTIVE)} ${styleText2("dim", a2)}`}${i.vertical ? e ? `
+${styleText2("cyan", S_BAR)}  ` : `
+` : ` ${styleText2("dim", "/")} `}${this.value ? `${styleText2("dim", S_RADIO_INACTIVE)} ${styleText2("dim", s)}` : `${styleText2("green", S_RADIO_ACTIVE)} ${s}`}
+${g2}
+`;
+        }
+      }
+    }
+  }).prompt();
+};
 var MULTISELECT_INSTRUCTIONS = [
   `${styleText2("dim", "\u2191/\u2193")} to navigate`,
   `${styleText2("dim", "Space:")} select`,
@@ -1704,6 +1757,598 @@ var PROJECT_MODE_DISPLAY = {
   "frontend-only": "Frontend only (no backend, no database)"
 };
 
+// src/welcomeComponents.ts
+var COMPONENTS_MODAL_CODE = `import type React from 'react';
+import { useState } from 'react';
+import { LuX as X, LuCopy as Copy, LuCheck as Check, LuCode as Code, LuCpu as Cpu } from 'react-icons/lu';
+import { motion } from 'motion/react';
+// import { playJumpSound, playScoreSound } from '../utils/audio'; // Removed to prevent error if not exists
+
+interface ComponentsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+type ComponentState = Record<string, string | number | boolean | undefined>;
+type SetComponentState = (state: ComponentState) => void;
+
+interface ComponentItem {
+  id: string;
+  name: string;
+  description: string;
+  preview: (state: ComponentState, setState: SetComponentState) => React.ReactNode;
+  code: string;
+}
+
+const BRUTALIST_COMPONENTS: ComponentItem[] = [
+  {
+    id: 'button',
+    name: 'Brutalist Button',
+    description: 'A solid, high-contrast action trigger with raw borders and active scaling.',
+    code: \`<button class="bg-rose-600 hover:bg-white text-white hover:text-black px-6 py-3 font-mono text-xs font-bold uppercase transition-all duration-150 border border-transparent hover:border-black active:scale-95 shadow-[4px_4px_0px_0px_rgba(255,255,255,0.25)]">
+  TRIGGER PIPELINE
+</button>\`,
+    preview: (state, setState) => (
+      <button 
+        type="button"
+        onClick={() => {
+          const clickCount = typeof state.clickCount === 'number' ? state.clickCount : 0;
+          setState({ ...state, clickCount: clickCount + 1 });
+        }}
+        className="bg-brand-pink hover:bg-white text-white hover:text-black px-6 py-3 font-mono text-xs font-bold uppercase transition-all duration-150 border border-transparent hover:border-black active:scale-95 shadow-[4px_4px_0px_0px_rgba(255,255,255,0.25)] cursor-pointer"
+      >
+        TRIGGER PIPELINE ({typeof state.clickCount === 'number' ? state.clickCount : 0})
+      </button>
+    )
+  },
+  {
+    id: 'badge',
+    name: 'Performance Badge',
+    description: 'A high-visibility mono badge with a pulsing live status indicator.',
+    code: \`<div class="flex items-center gap-2 border border-emerald-500/30 bg-emerald-950/20 px-3 py-1 font-mono text-xs text-emerald-400">
+  <span class="w-1.5 h-1.5 bg-emerald-500 rounded-full animate-ping"></span>
+  OPERATIONAL :: 100%
+</div>\`,
+    preview: (_state, _setState) => (
+      <div className="flex items-center gap-2 border border-emerald-500/30 bg-emerald-950/20 px-3 py-1.5 font-mono text-xs text-emerald-400">
+        <span className="relative flex h-2 w-2">
+          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+          <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
+        </span>
+        OPERATIONAL :: 100%
+      </div>
+    )
+  },
+  {
+    id: 'switch',
+    name: 'Monochrome Toggle',
+    description: 'A structural, rectangular switch that flips states with tactile audio feedback.',
+    code: \`<button class="flex items-center border border-white p-1 w-16 h-8 bg-zinc-900">
+  <div class="w-6 h-6 bg-white transition-all transform translate-x-8"></div>
+</button>\`,
+    preview: (state, setState) => {
+      const isChecked = state.isChecked ?? false;
+      const handleToggle = () => {
+        setState({ ...state, isChecked: !isChecked });
+      };
+      return (
+        <div className="flex items-center gap-4">
+          <button 
+            type="button"
+            onClick={handleToggle}
+            className={\`flex items-center border-2 border-white p-0.5 w-16 h-8 transition-colors cursor-pointer \${isChecked ? 'bg-brand-pink' : 'bg-zinc-900'}\`}
+          >
+            <div className={\`w-6 h-6 bg-white transition-transform \${isChecked ? 'translate-x-8' : 'translate-x-0'}\`}></div>
+          </button>
+          <span className="font-mono text-xs uppercase text-gray-400">
+            STATE: <span className="text-white font-bold">{isChecked ? 'ENABLED' : 'DISABLED'}</span>
+          </span>
+        </div>
+      );
+    }
+  },
+  {
+    id: 'slider',
+    name: 'Frequency Slider',
+    description: 'A pixelated level adjuster with raw visual increments.',
+    code: \`<div class="w-full max-w-xs font-mono">
+  <input type="range" class="accent-rose-600 bg-zinc-800 h-2 w-full border border-zinc-700 appearance-none cursor-pointer" />
+</div>\`,
+    preview: (state, setState) => {
+      const value = typeof state.sliderVal === 'number' ? state.sliderVal : 60;
+      return (
+        <div className="w-full max-w-sm font-mono text-xs">
+          <div className="flex justify-between mb-2">
+            <span className="text-gray-400 uppercase">SYS_SPEED</span>
+            <span className="text-brand-green font-bold">{value} MHz</span>
+          </div>
+          <input 
+            type="range" 
+            min="10"
+            max="200"
+            value={value}
+            onChange={(e) => setState({ ...state, sliderVal: parseInt(e.target.value, 10) })}
+            className="accent-brand-pink bg-zinc-900 h-2 w-full border border-zinc-700 appearance-none cursor-pointer" 
+          />
+          <div className="flex justify-between mt-1 text-[9px] text-gray-600">
+            <span>MIN</span>
+            <span>MID_GRID</span>
+            <span>MAX</span>
+          </div>
+        </div>
+      );
+    }
+  },
+  {
+    id: 'input',
+    name: 'Brutalist Input',
+    description: 'Minimal text box with bright validation focus indicators.',
+    code: \`<div class="relative font-mono">
+  <input type="text" placeholder="ENTER NODE NAME..." class="bg-black border border-zinc-700 focus:border-rose-600 text-white px-4 py-2 w-full outline-none" />
+</div>\`,
+    preview: (state, setState) => {
+      const text = typeof state.inputValue === 'string' ? state.inputValue : '';
+      return (
+        <div className="w-full max-w-xs font-mono text-xs">
+          <label className="block text-gray-500 uppercase mb-1.5">
+            Node Configuration
+            <input 
+              type="text" 
+              placeholder="ENTER NODE NAME..."
+              value={text}
+              onChange={(e) => setState({ ...state, inputValue: e.target.value })}
+              className="mt-1.5 bg-black border border-zinc-700 focus:border-brand-pink text-white px-4 py-2 w-full outline-none" 
+            />
+          </label>
+          {text && (
+            <p className="text-[10px] text-brand-green mt-1">\u2713 Validating: {text.toUpperCase()}.local</p>
+          )}
+        </div>
+      );
+    }
+  }
+];
+
+export default function ComponentsModal({ isOpen, onClose }: ComponentsModalProps) {
+  const [activeCompId, setActiveCompId] = useState('button');
+  const [componentStates, setComponentStates] = useState<Record<string, ComponentState>>({});
+  const [copiedId, setCopiedId] = useState<string | null>(null);
+
+  if (!isOpen) return null;
+
+  const fallbackComponent = BRUTALIST_COMPONENTS[0];
+  if (!fallbackComponent) return null;
+
+  const activeComp = BRUTALIST_COMPONENTS.find(c => c.id === activeCompId) ?? fallbackComponent;
+  const activeState = componentStates[activeCompId] || {};
+
+  const handleSetState = (newState: ComponentState) => {
+    setComponentStates({
+      ...componentStates,
+      [activeCompId]: newState
+    });
+  };
+
+  const handleCopyCode = (code: string) => {
+    navigator.clipboard.writeText(code);
+    setCopiedId(activeCompId);
+    setTimeout(() => setCopiedId(null), 2000);
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/85 backdrop-blur-sm" id="components-modal-container">
+      <motion.div 
+        initial={{ opacity: 0, scale: 0.95, y: 15 }}
+        animate={{ opacity: 1, scale: 1, y: 0 }}
+        exit={{ opacity: 0, scale: 0.95, y: 15 }}
+        transition={{ duration: 0.2 }}
+        className="w-full max-w-4xl h-[75vh] bg-black border-2 border-white flex flex-col relative"
+      >
+        <div className="flex items-center justify-between border-b border-white p-5">
+          <div className="flex items-center gap-3">
+            <Cpu className="w-5 h-5 text-rose-500" />
+            <h2 className="text-xl font-bold font-mono tracking-tight uppercase">
+              Rakta <span className="text-rose-500">Component Library</span>
+            </h2>
+          </div>
+          <button 
+            type="button"
+            onClick={onClose}
+            className="p-2 border border-white hover:bg-rose-500 hover:text-white transition-colors cursor-pointer"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <div className="flex-1 flex flex-col md:flex-row overflow-hidden">
+          <div className="w-full md:w-56 border-r border-white overflow-y-auto bg-[#080808] divide-y divide-white/20">
+            {BRUTALIST_COMPONENTS.map((comp) => {
+              const isSelected = comp.id === activeCompId;
+              return (
+                <button
+                  type="button"
+                  key={comp.id}
+                  onClick={() => setActiveCompId(comp.id)}
+                  className={\`w-full text-left p-4 transition-colors font-mono text-xs uppercase cursor-pointer \${
+                    isSelected 
+                      ? 'bg-rose-500 text-white font-bold' 
+                      : 'text-gray-400 hover:bg-white/5 hover:text-white'
+                  }\`}
+                >
+                  {comp.name}
+                </button>
+              );
+            })}
+          </div>
+
+          <div className="flex-1 flex flex-col overflow-y-auto bg-black p-6 md:p-8">
+            <div className="mb-6">
+              <h3 className="text-xl font-bold text-white uppercase font-mono tracking-tight">{activeComp.name}</h3>
+              <p className="text-sm text-gray-400 mt-1">{activeComp.description}</p>
+            </div>
+
+            <div className="border border-white/30 bg-[#050505] p-12 flex items-center justify-center min-h-[160px] relative">
+              <span className="absolute top-2 left-2 text-[8px] font-mono text-gray-600 uppercase tracking-widest">LIVE PLAYGROUND</span>
+              {activeComp.preview(activeState, handleSetState)}
+            </div>
+
+            <div className="mt-8 flex-1 flex flex-col min-h-[150px]">
+              <div className="flex items-center justify-between bg-zinc-900 border-t border-x border-white/20 px-4 py-2">
+                <span className="text-[10px] font-mono text-gray-500 uppercase tracking-widest flex items-center gap-1.5">
+                  <Code className="w-3.5 h-3.5" /> HTML/Tailwind Markup
+                </span>
+                <button
+                  type="button"
+                  onClick={() => handleCopyCode(activeComp.code)}
+                  className="flex items-center gap-1.5 text-[10px] font-mono text-rose-500 hover:text-white transition-colors cursor-pointer"
+                >
+                  {copiedId === activeComp.id ? (
+                    <>
+                      <Check className="w-3.5 h-3.5 text-green-500" /> COPIED!
+                    </>
+                  ) : (
+                    <>
+                      <Copy className="w-3.5 h-3.5" /> COPY TO CLIPBOARD
+                    </>
+                  )}
+                </button>
+              </div>
+              <pre className="flex-1 bg-zinc-950 border border-white/20 p-4 font-mono text-xs text-green-400 overflow-x-auto whitespace-pre leading-5 select-all">
+                <code>{activeComp.code}</code>
+              </pre>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+    </div>
+  );
+}
+`;
+var CORAL_OBSTACLE_CODE = `interface CoralObstacleProps {
+  position: 'TOP' | 'BOTTOM';
+  height: number;
+  width?: number;
+  paletteIndex?: number;
+  variant?: number;
+  scaleX?: number;
+}
+
+export default function CoralObstacle({ 
+  position, 
+  height, 
+  width = 64,
+  paletteIndex = 0, 
+  variant = 0, 
+  scaleX = 1 
+}: CoralObstacleProps) {
+  const defaultPalette = { primary: '#f43f5e', secondary: '#fda4af', shadow: '#9f1239', polyps: '#ffe4e6', name: 'rose' };
+  const palettes = [
+    defaultPalette,
+    { primary: '#06b6d4', secondary: '#67e8f9', shadow: '#155e75', polyps: '#ecfeff', name: 'cyan' },
+    { primary: '#a855f7', secondary: '#d8b4fe', shadow: '#581c87', polyps: '#faf5ff', name: 'amethyst' },
+    { primary: '#f59e0b', secondary: '#fde047', shadow: '#78350f', polyps: '#fefce8', name: 'amber' },
+    { primary: '#10b981', secondary: '#6ee7b7', shadow: '#065f46', polyps: '#e6fffa', name: 'emerald' },
+  ];
+  const palette = palettes[paletteIndex % palettes.length] ?? defaultPalette;
+  const coralId = \`coralGrad-\${palette.name}-\${variant}\`;
+
+  return (
+    <div 
+      className="absolute flex items-center justify-center pointer-events-none"
+      style={{ height: \`\${height}px\`, width: \`\${width}px\`, transform: \`scaleX(\${scaleX})\` }}
+    >
+      <svg 
+        aria-hidden="true"
+        focusable="false"
+        viewBox="0 0 80 120" 
+        className="w-full h-full drop-shadow-[0_6px_14px_rgba(0,0,0,0.7)]"
+        preserveAspectRatio="none"
+      >
+        <defs>
+          <linearGradient id={coralId} x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stopColor={palette.secondary} />
+            <stop offset="50%" stopColor={palette.primary} />
+            <stop offset="100%" stopColor={palette.shadow} />
+          </linearGradient>
+        </defs>
+
+        <g transform={position === 'TOP' ? 'scale(1, -1) translate(0, -120)' : undefined}>
+          <path d="M 40 120 C 35 90, 20 80, 24 55 C 28 30, 15 20, 22 10 C 29 0, 37 15, 35 30 C 33 45, 42 55, 40 75 C 38 95, 42 110, 40 120 Z" fill={\`url(#\${coralId})\`} />
+          <path d="M 40 120 C 45 95, 55 85, 52 65 C 49 45, 62 35, 58 20 C 54 5, 46 12, 48 25 C 50 38, 42 50, 44 70 C 46 90, 42 105, 40 120 Z" fill={\`url(#\${coralId})\`} />
+        </g>
+      </svg>
+    </div>
+  );
+}
+`;
+var DEPLOY_MODAL_CODE = `import { useState, useEffect, useRef } from 'react';
+import { LuX as X, LuPlay as Play, LuRotateCcw as RotateCcw, LuCloud as Cloud } from 'react-icons/lu';
+import { motion } from 'motion/react';
+
+interface DeployModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const DEPLOY_LOGS = [
+  { text: ':: RAKTA CORE PIPELINE INITIALIZED ::', type: 'system' },
+  { text: '[SYS] Resolving package.json manifest dependencies...', type: 'info' },
+  { text: '[VITE] Starting asset compilation & typescript check...', type: 'info' },
+  { text: '[VITE] \u2713 Production dist/ folder generated successfully [384ms]', type: 'success' },
+  { text: '[ESBUILD] Compiling full-stack backend entrypoint: server.ts', type: 'info' },
+  { text: '[ESBUILD] \u2713 Bundled server.ts into dist/server.cjs [120ms]', type: 'success' },
+  { text: '[CLOUD RUN] Pushing build payload to regional edge registry...', type: 'info' },
+  { text: '[CLOUD RUN] Ingress configured: routing all traffic exclusively to Port 3000', type: 'info' },
+  { text: ':: SYSTEM DEPLOYMENT COMPLETED ON EDGE NODES ::', type: 'success' },
+];
+
+export default function DeployModal({ isOpen, onClose }: DeployModalProps) {
+  const [status, setStatus] = useState<'idle' | 'building' | 'success' | 'error'>('idle');
+  const [logs, setLogs] = useState<Array<{ text: string; type: string }>>([]);
+  const [progress, setProgress] = useState(0);
+  const terminalEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (terminalEndRef.current) {
+      terminalEndRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  });
+
+  if (!isOpen) return null;
+
+  const startDeployment = () => {
+    setStatus('building');
+    setLogs([]);
+    setProgress(0);
+
+    let currentLogIndex = 0;
+    
+    const runStep = () => {
+      if (currentLogIndex < DEPLOY_LOGS.length) {
+        const nextLog = DEPLOY_LOGS[currentLogIndex];
+        if (nextLog) {
+          setLogs(prev => [...prev, nextLog]);
+        }
+        setProgress(Math.round(((currentLogIndex + 1) / DEPLOY_LOGS.length) * 100));
+        currentLogIndex++;
+        setTimeout(runStep, Math.random() * 250 + 150);
+      } else {
+        setStatus('success');
+      }
+    };
+    setTimeout(runStep, 400);
+  };
+
+  const resetDeploy = () => {
+    setStatus('idle');
+    setLogs([]);
+    setProgress(0);
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/85 backdrop-blur-sm" id="deploy-modal-container">
+      <motion.div 
+        initial={{ opacity: 0, scale: 0.95, y: 15 }}
+        animate={{ opacity: 1, scale: 1, y: 0 }}
+        exit={{ opacity: 0, scale: 0.95, y: 15 }}
+        transition={{ duration: 0.2 }}
+        className="w-full max-w-3xl h-[70vh] bg-black border-2 border-white flex flex-col relative"
+      >
+        <div className="flex items-center justify-between border-b border-white/30 p-5">
+          <div className="flex items-center gap-3">
+            <Cloud className="w-5 h-5 text-rose-500" />
+            <h2 className="text-xl font-bold font-mono tracking-tight uppercase">
+              Rakta <span className="text-rose-500">Edge Deployment</span>
+            </h2>
+          </div>
+          <button 
+            type="button"
+            onClick={onClose}
+            className="p-2 border border-white/30 hover:bg-rose-500 hover:text-white transition-colors cursor-pointer"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <div className="bg-zinc-900 p-6 border-b border-white/20 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+          <div>
+            <span className="text-[10px] font-mono text-gray-500 uppercase tracking-widest block">PIPELINE STATUS</span>
+            <div className="flex items-center gap-2 mt-1">
+              {status === 'idle' && <span className="font-mono text-sm text-yellow-500 font-bold uppercase">IDLE - READY TO LAUNCH</span>}
+              {status === 'building' && <span className="font-mono text-sm text-rose-500 font-bold uppercase">COMPILES IN PROGRESS ({progress}%)</span>}
+              {status === 'success' && <span className="font-mono text-sm text-green-500 font-bold uppercase">LIVE - PRODUCTION DEPLOYED</span>}
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            {status === 'idle' && (
+              <button type="button" onClick={startDeployment} className="bg-rose-500 hover:bg-white text-white hover:text-black px-6 py-2.5 font-mono text-xs font-bold uppercase transition-all duration-150 border border-transparent active:scale-95 flex items-center gap-2 cursor-pointer">
+                <Play className="w-4 h-4 fill-current" /> INITIATE LAUNCH
+              </button>
+            )}
+            {status === 'success' && (
+              <button type="button" onClick={resetDeploy} className="border border-white hover:bg-white hover:text-black px-4 py-2.5 font-mono text-xs uppercase transition-all duration-150 flex items-center gap-1.5 cursor-pointer">
+                <RotateCcw className="w-3.5 h-3.5" /> RE-BUILD PIPELINE
+              </button>
+            )}
+          </div>
+        </div>
+
+        <div className="flex-1 bg-black p-5 font-mono text-xs overflow-y-auto flex flex-col gap-2 select-text selection:bg-rose-500/30">
+          {logs.map((log) => {
+            let textColor = 'text-gray-400';
+            if (log.type === 'system') textColor = 'text-rose-500 font-bold border-b border-rose-500/20 pb-1 mb-2';
+            if (log.type === 'success') textColor = 'text-green-500 font-bold';
+            if (log.type === 'info') textColor = 'text-gray-300';
+            return <div key={\`\${log.type}-\${log.text}\`} className={\`leading-relaxed whitespace-pre-wrap \${textColor}\`}>{log.text}</div>;
+          })}
+          {status === 'idle' && <div className="text-gray-600 italic mt-4 text-center">Click 'INITIATE LAUNCH' to begin.</div>}
+          <div ref={terminalEndRef} />
+        </div>
+      </motion.div>
+    </div>
+  );
+}
+`;
+var DOCS_MODAL_CODE = `import { LuX as X, LuBook as Book } from 'react-icons/lu';
+import { motion } from 'motion/react';
+
+interface DocsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export default function DocsModal({ isOpen, onClose }: DocsModalProps) {
+  if (!isOpen) return null;
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm">
+      <motion.div initial={{ opacity: 0, y: 15 }} animate={{ opacity: 1, y: 0 }} className="w-full max-w-5xl h-[80vh] bg-black border-2 border-white flex flex-col relative">
+        <div className="flex items-center justify-between border-b border-white/30 p-5">
+          <div className="flex items-center gap-3">
+            <Book className="w-5 h-5 text-rose-500" />
+            <h2 className="text-xl font-bold font-mono tracking-tight uppercase">Rakta.js <span className="text-rose-500">System Manual</span></h2>
+          </div>
+          <button type="button" onClick={onClose} className="p-2 border border-white/30 hover:bg-rose-500 hover:text-white transition-colors cursor-pointer"><X className="w-5 h-5" /></button>
+        </div>
+        <div className="p-10 text-white font-mono text-sm leading-relaxed max-w-3xl">
+          <h3 className="text-3xl font-extrabold text-rose-500 mb-6">Welcome to Rakta.js</h3>
+          <p className="mb-4">You have successfully generated your project.</p>
+          <p className="mb-4">Use the CLI generator to expand your codebase, or start editing files in the app/ directory.</p>
+          <ul className="list-disc pl-5 mt-4 space-y-2 text-gray-400">
+            <li>Instant Engine Boot: Sub-1ms load time.</li>
+            <li>Brutalist Aesthetics natively supported.</li>
+            <li>Hot Reload available globally via WebSockets.</li>
+          </ul>
+        </div>
+      </motion.div>
+    </div>
+  );
+}
+`;
+var SHRIMP_CHARACTER_CODE = `interface ShrimpCharacterProps {
+  status: 'IDLE' | 'SWIMMING' | 'JUMPING' | 'DEAD';
+  playerY: number;
+  rotation?: number;
+}
+
+export default function ShrimpCharacter({ status, playerY, rotation }: ShrimpCharacterProps) {
+  let bodyClass = '';
+  const isDead = status === 'DEAD';
+
+  if (isDead) bodyClass = 'animate-bounce';
+  else if (status === 'SWIMMING') bodyClass = 'animate-pulse';
+  else bodyClass = '';
+
+  const finalRotation = rotation !== undefined ? rotation : (isDead ? 180 : 0);
+  const shrimpColor = isDead ? 'fill-orange-400' : 'fill-rose-500';
+
+  return (
+    <div 
+      className="relative w-16 h-16 flex items-center justify-center select-none pointer-events-none transition-transform duration-75"
+      style={{ transform: \`translateY(\${-playerY}px) rotate(\${finalRotation}deg)\` }}
+    >
+      <svg aria-hidden="true" focusable="false" viewBox="0 0 100 100" className={\`w-full h-full drop-shadow-[0_4px_12px_rgba(244,63,94,0.3)] \${bodyClass}\`}>
+        <path d="M 30 46 C 25 32, 45 22, 58 28 C 65 31, 62 48, 55 54 C 44 58, 35 55, 30 46 Z" className={shrimpColor} />
+        <path d="M 55 30 C 65 24, 76 34, 74 46 C 72 54, 62 55, 55 48 Z" className={shrimpColor} />
+        <circle cx="66" cy="38" r="4.5" fill={isDead ? '#18181b' : '#000'} />
+      </svg>
+      <style>{\`
+        @keyframes bubble-up {
+          0% { transform: translateY(0) scale(1); opacity: 0.8; }
+          100% { transform: translateY(-20px) scale(1.5); opacity: 0; }
+        }
+      \`}</style>
+    </div>
+  );
+}
+`;
+var WELCOME_PAGE_CODE = `import { useState } from "react";
+import { LuBook as Book, LuCloud as Cloud, LuCpu as Cpu } from "react-icons/lu";
+import ComponentsModal from "./components/ComponentsModal";
+import DeployModal from "./components/DeployModal";
+import DocsModal from "./components/DocsModal";
+import ShrimpCharacter from "./components/ShrimpCharacter";
+
+export default function WelcomePage() {
+  const [modalOpen, setModalOpen] = useState<'components' | 'deploy' | 'docs' | null>(null);
+
+  return (
+    <main className="min-h-screen bg-[#050505] flex flex-col items-center justify-center text-white font-mono p-4">
+      <div className="absolute top-10 pointer-events-none opacity-20">
+        <ShrimpCharacter status="IDLE" playerY={0} />
+      </div>
+
+      <div className="text-center z-10 max-w-2xl">
+        <h1 className="text-5xl md:text-7xl font-extrabold uppercase tracking-tighter mb-4">
+          Welcome to <span className="text-rose-500">Rakta.js</span>
+        </h1>
+        <p className="text-gray-400 text-sm md:text-base mb-10 leading-relaxed">
+          Small in size. Fierce in speed. Alive in every route.
+          <br/>
+          Your neo-brutalist web application is ready for action.
+        </p>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <button 
+            type="button"
+            onClick={() => setModalOpen('components')}
+            className="flex flex-col items-center justify-center gap-3 p-6 border-2 border-zinc-800 bg-zinc-900/50 hover:border-rose-500 hover:bg-rose-500/10 transition-colors cursor-pointer group"
+          >
+            <Cpu className="w-8 h-8 text-gray-400 group-hover:text-rose-500" />
+            <span className="font-bold text-sm uppercase">Components</span>
+          </button>
+          
+          <button 
+            type="button"
+            onClick={() => setModalOpen('docs')}
+            className="flex flex-col items-center justify-center gap-3 p-6 border-2 border-zinc-800 bg-zinc-900/50 hover:border-blue-500 hover:bg-blue-500/10 transition-colors cursor-pointer group"
+          >
+            <Book className="w-8 h-8 text-gray-400 group-hover:text-blue-500" />
+            <span className="font-bold text-sm uppercase">Documentation</span>
+          </button>
+
+          <button 
+            type="button"
+            onClick={() => setModalOpen('deploy')}
+            className="flex flex-col items-center justify-center gap-3 p-6 border-2 border-zinc-800 bg-zinc-900/50 hover:border-green-500 hover:bg-green-500/10 transition-colors cursor-pointer group"
+          >
+            <Cloud className="w-8 h-8 text-gray-400 group-hover:text-green-500" />
+            <span className="font-bold text-sm uppercase">Deployment</span>
+          </button>
+        </div>
+      </div>
+
+      <div className="absolute bottom-6 text-[10px] text-gray-600 uppercase tracking-widest text-center">
+        Running on http://localhost:3000 \u2022 Hot Reload Active
+      </div>
+
+      {modalOpen === 'components' && <ComponentsModal isOpen={true} onClose={() => setModalOpen(null)} />}
+      {modalOpen === 'deploy' && <DeployModal isOpen={true} onClose={() => setModalOpen(null)} />}
+      {modalOpen === 'docs' && <DocsModal isOpen={true} onClose={() => setModalOpen(null)} />}
+    </main>
+  );
+}
+`;
+
 // src/generator.ts
 var DEFAULT_METADATA_TITLE = "Rakta.js | Small in size. Fierce in speed. Alive in every route";
 var FAVICON_BYTES = readFileSync(new URL("../assets/favicon.ico", import.meta.url));
@@ -1803,7 +2448,7 @@ dist/
 function getFrontendOnlyFiles(projectConfig) {
   const { projectName, cssFramework } = projectConfig;
   const styleFileName = cssFramework === "sass" ? "globals.scss" : "globals.css";
-  return [
+  const files = [
     {
       path: "package.json",
       content: JSON.stringify({
@@ -1819,9 +2464,11 @@ function getFrontendOnlyFiles(projectConfig) {
           typecheck: "tsc --noEmit"
         },
         dependencies: {
-          raktajs: "^0.1.5",
+          raktajs: "^0.1.7",
           react: "^19.2.7",
           "react-dom": "^19.2.7",
+          "react-icons": "^5.2.1",
+          motion: "^12.0.0",
           ...getCssDependencies(cssFramework)
         },
         devDependencies: {
@@ -1893,12 +2540,24 @@ export default defineRaktaConfig({
       content: generateFrontendOnlyNotFound()
     },
     {
-      path: "app/components/raktaShrimpMascot.tsx",
-      content: generateShrimpMascotComponent()
+      path: "app/components/ComponentsModal.tsx",
+      content: COMPONENTS_MODAL_CODE
+    },
+    {
+      path: "app/components/CoralObstacle.tsx",
+      content: CORAL_OBSTACLE_CODE
+    },
+    {
+      path: "app/components/DeployModal.tsx",
+      content: DEPLOY_MODAL_CODE
+    },
+    {
+      path: "app/components/DocsModal.tsx",
+      content: DOCS_MODAL_CODE
     },
     {
-      path: "app/components/shrimpRunGame.tsx",
-      content: generateShrimpRunGameComponent()
+      path: "app/components/ShrimpCharacter.tsx",
+      content: SHRIMP_CHARACTER_CODE
     },
     {
       path: `styles/${styleFileName}`,
@@ -1913,11 +2572,12 @@ export default defineRaktaConfig({
       content: FAVICON_BYTES
     }
   ];
+  return processFilesForLanguage(files, projectConfig.useTypeScript);
 }
 function getFullstackFrontendFiles(projectConfig) {
   const { projectName, cssFramework } = projectConfig;
   const styleFileName = cssFramework === "sass" ? "globals.scss" : "globals.css";
-  return [
+  const files = [
     {
       path: "frontend/package.json",
       content: JSON.stringify({
@@ -1934,9 +2594,11 @@ function getFullstackFrontendFiles(projectConfig) {
           typecheck: "tsc --noEmit"
         },
         dependencies: {
-          raktajs: "^0.1.5",
+          raktajs: "^0.1.7",
           react: "^19.2.7",
           "react-dom": "^19.2.7",
+          "react-icons": "^5.2.1",
+          motion: "^12.0.0",
           ...getCssDependencies(cssFramework)
         },
         devDependencies: {
@@ -2241,14 +2903,47 @@ export type UserSchema = typeof userSchema;
       content: FAVICON_BYTES
     },
     {
-      path: "frontend/components/ui/.gitkeep",
-      content: ""
+      path: "frontend/components/ComponentsModal.tsx",
+      content: COMPONENTS_MODAL_CODE
     },
     {
-      path: "frontend/components/layout/.gitkeep",
-      content: ""
+      path: "frontend/components/CoralObstacle.tsx",
+      content: CORAL_OBSTACLE_CODE
+    },
+    {
+      path: "frontend/components/DeployModal.tsx",
+      content: DEPLOY_MODAL_CODE
+    },
+    {
+      path: "frontend/components/DocsModal.tsx",
+      content: DOCS_MODAL_CODE
+    },
+    {
+      path: "frontend/components/ShrimpCharacter.tsx",
+      content: SHRIMP_CHARACTER_CODE
     }
   ];
+  return processFilesForLanguage(files, projectConfig.useTypeScript);
+}
+function processFilesForLanguage(files, useTypeScript) {
+  if (useTypeScript)
+    return files;
+  return files.map((file) => {
+    if (typeof file.content === "string") {
+      let path = file.path;
+      if (path.endsWith(".tsx"))
+        path = path.replace(".tsx", ".jsx");
+      else if (path.endsWith(".ts"))
+        path = path.replace(".ts", ".js");
+      let code = file.content;
+      code = code.replace(/^interface\s+\w+\s*\{[\s\S]*?\n\}\n/gm, "");
+      code = code.replace(/^type\s+\w+\s*=[\s\S]*?;\n/gm, "");
+      code = code.replace(/:\s*[A-Z]\w*(Props|State)\b/g, "");
+      code = code.replace(/:\s*(Request|Response|Promise<[^>]+>|string|number|boolean|any|unknown)/g, "");
+      return { ...file, path, content: code };
+    }
+    return file;
+  });
 }
 function getBackendFiles(projectConfig) {
   return [
@@ -3121,8 +3816,11 @@ declare global {
   const useRef: typeof import("react").useRef;
   const useState: typeof import("react").useState;
 
-  const ShrimpRunGame: typeof import("./app/components/shrimpRunGame").default;
-  const RaktaShrimpMascot: typeof import("./app/components/raktaShrimpMascot").default;
+  const ComponentsModal: typeof import("./app/components/ComponentsModal").default;
+  const CoralObstacle: typeof import("./app/components/CoralObstacle").default;
+  const DeployModal: typeof import("./app/components/DeployModal").default;
+  const DocsModal: typeof import("./app/components/DocsModal").default;
+  const ShrimpCharacter: typeof import("./app/components/ShrimpCharacter").default;
 }
 
 declare module "react/jsx-runtime" {
@@ -3165,54 +3863,8 @@ export default function RootLayout({ children }: RootLayoutProps) {
 }
 `;
 }
-function generateFrontendOnlyPage(projectName) {
-  return `import ShrimpRunGame from "./components/shrimpRunGame";
-
-export default function HomePage() {
-  return (
-    <main className="mx-auto flex min-h-screen w-full max-w-4xl flex-col gap-6 px-4 py-16 sm:px-6 lg:px-8">
-      <section className="rounded-3xl border border-white/10 bg-[#0e111a] p-8 shadow-2xl shadow-red-950/20">
-        <p className="mb-2 text-xs font-bold uppercase tracking-[0.3em] text-red-600">
-          THE RED ROUTER FRAMEWORK
-        </p>
-        <h1 className="mb-3 text-4xl font-extrabold leading-tight text-white md:text-6xl">
-          Welcome to ${projectName}
-        </h1>
-        <p className="max-w-2xl text-base leading-7 text-slate-400">
-          Built with Rakta.js \u2014 Small in size. Fierce in speed. Alive in every route.
-        </p>
-
-        <div className="mt-6 flex flex-wrap gap-3">
-          <click
-            to="/offline"
-            className="rounded-xl border border-red-500/40 px-4 py-2 text-sm font-semibold text-red-400 transition hover:border-red-400 hover:text-red-300"
-          >
-            Open offline page
-          </click>
-          <click
-            to="/dashboard"
-            className="rounded-xl bg-red-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-red-700"
-          >
-            View dashboard
-          </click>
-        </div>
-      </section>
-
-      <section className="rounded-3xl border border-white/10 bg-[#0e111a] p-8 shadow-2xl shadow-red-950/20">
-        <p className="mb-2 text-xs font-bold uppercase tracking-[0.3em] text-red-600">
-          SHRIMPRUN
-        </p>
-        <h2 className="mb-1 text-2xl font-bold text-white">Play ShrimpRun</h2>
-        <p className="mb-6 text-sm leading-6 text-slate-400">
-          Press Space or click the game area to jump. Avoid the red obstacles!
-        </p>
-
-        <ShrimpRunGame />
-      </section>
-    </main>
-  );
-}
-`;
+function generateFrontendOnlyPage(_projectName) {
+  return WELCOME_PAGE_CODE;
 }
 function generateFrontendOnlyLoading() {
   return `export default function Loading() {
@@ -3282,585 +3934,8 @@ function generateFrontendOnlyNotFound() {
 }
 `;
 }
-function generateShrimpMascotComponent() {
-  return `interface RaktaShrimpMascotProps {
-  readonly isJumping: boolean;
-  readonly isDead: boolean;
-  readonly style?: import("react").CSSProperties;
-}
-
-/**
- * RaktaShrimpMascot \u2014 The animated shrimp hero of ShrimpRun.
- * Drawn entirely with inline SVG. No external assets required.
- */
-export default function RaktaShrimpMascot({
-  isJumping,
-  isDead,
-  style,
-}: RaktaShrimpMascotProps) {
-  const bodyColor = isDead ? "#6b7280" : "#dc2626";
-  const eyeColor = isDead ? "#374151" : "#fff";
-  const legAnimation =
-    isJumping || isDead ? "none" : "shrimpLegs 0.3s steps(2) infinite";
-
-  return (
-    <svg
-      viewBox="0 0 48 48"
-      width="48"
-      height="48"
-      style={{ display: "block", ...style }}
-      aria-label={
-        isDead ? "dead shrimp" : isJumping ? "shrimp jumping" : "running shrimp"
-      }
-      role="img"
-    >
-      <style>{\`
-        @keyframes shrimpLegs {
-          0%  { transform: translateY(0); }
-          50% { transform: translateY(2px); }
-        }
-      \`}</style>
-
-      {/* Body */}
-      <path
-        d="M8 30 Q10 14 24 12 Q38 10 40 22 Q42 32 32 36 Q20 40 8 30Z"
-        fill={bodyColor}
-      />
-
-      {/* Shell segments */}
-      <path
-        d="M12 28 Q16 20 24 18 Q30 17 34 22"
-        stroke="#b91c1c"
-        strokeWidth="1.5"
-        fill="none"
-        opacity={isDead ? 0.3 : 0.6}
-      />
-      <path
-        d="M14 32 Q19 24 28 22 Q33 21 36 26"
-        stroke="#b91c1c"
-        strokeWidth="1.5"
-        fill="none"
-        opacity={isDead ? 0.3 : 0.6}
-      />
-
-      {/* Eye */}
-      <circle cx="34" cy="18" r="4" fill="#1e293b" />
-      <circle cx="35" cy="17" r="2" fill={eyeColor} />
-
-      {isDead && (
-        <>
-          <line
-            x1="32"
-            y1="16"
-            x2="36"
-            y2="20"
-            stroke="#374151"
-            strokeWidth="1.5"
-          />
-          <line
-            x1="36"
-            y1="16"
-            x2="32"
-            y2="20"
-            stroke="#374151"
-            strokeWidth="1.5"
-          />
-        </>
-      )}
-
-      {/* Antennae */}
-      <line
-        x1="34"
-        y1="14"
-        x2="40"
-        y2="6"
-        stroke={bodyColor}
-        strokeWidth="1.5"
-        strokeLinecap="round"
-      />
-      <line
-        x1="32"
-        y1="13"
-        x2="36"
-        y2="4"
-        stroke={bodyColor}
-        strokeWidth="1.5"
-        strokeLinecap="round"
-      />
-
-      {/* Tail */}
-      <path
-        d="M10 30 Q4 26 6 20"
-        stroke={bodyColor}
-        strokeWidth="2"
-        fill="none"
-        strokeLinecap="round"
-      />
-      <path
-        d="M10 30 Q2 30 4 36"
-        stroke={bodyColor}
-        strokeWidth="2"
-        fill="none"
-        strokeLinecap="round"
-      />
-      <path
-        d="M10 30 Q6 34 8 40"
-        stroke={bodyColor}
-        strokeWidth="2"
-        fill="none"
-        strokeLinecap="round"
-      />
-
-      {/* Legs */}
-      <g
-        style={{
-          animation: legAnimation,
-          transformOrigin: "24px 36px",
-        }}
-      >
-        <line
-          x1="18"
-          y1="36"
-          x2="14"
-          y2="44"
-          stroke={bodyColor}
-          strokeWidth="1.5"
-          strokeLinecap="round"
-        />
-        <line
-          x1="22"
-          y1="38"
-          x2="18"
-          y2="46"
-          stroke={bodyColor}
-          strokeWidth="1.5"
-          strokeLinecap="round"
-        />
-        <line
-          x1="26"
-          y1="38"
-          x2="24"
-          y2="46"
-          stroke={bodyColor}
-          strokeWidth="1.5"
-          strokeLinecap="round"
-        />
-        <line
-          x1="30"
-          y1="37"
-          x2="28"
-          y2="45"
-          stroke={bodyColor}
-          strokeWidth="1.5"
-          strokeLinecap="round"
-        />
-      </g>
-    </svg>
-  );
-}
-`;
-}
-function generateShrimpRunGameComponent() {
-  return `import { useCallback, useEffect, useRef, useState } from "react";
-import RaktaShrimpMascot from "./raktaShrimpMascot";
-// \u2500\u2500\u2500 Types \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-
-type GameStatus = "idle" | "running" | "dead";
-
-interface ObstacleState {
-  readonly id: number;
-  readonly xPosition: number;
-  readonly width: number;
-  readonly height: number;
-}
-
-interface ShrimpState {
-  readonly yPosition: number;
-  readonly velocityY: number;
-  readonly isJumping: boolean;
-}
-
-// \u2500\u2500\u2500 Constants \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-
-const CANVAS_WIDTH = 640;
-const CANVAS_HEIGHT = 160;
-const GROUND_STRIP_HEIGHT = 4;
-const SHRIMP_START_X = 60;
-const SHRIMP_WIDTH = 48;
-const SHRIMP_HEIGHT = 48;
-const GRAVITY = 1.4;
-const JUMP_VELOCITY = -18;
-const INITIAL_OBSTACLE_SPEED = 5;
-const SPEED_INCREMENT_PER_SCORE = 0.003;
-const OBSTACLE_SPAWN_INTERVAL_MS = 1600;
-const SCORE_TICK_MS = 80;
-const COLLISION_MARGIN = 8;
-const MAX_CONCURRENT_OBSTACLES = 3;
-const FRAME_SKIP_THRESHOLD_MS = 100;
-
-// \u2500\u2500\u2500 Physics helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-
-function getObstacleSpeed(currentScore: number): number {
-  return INITIAL_OBSTACLE_SPEED + currentScore * SPEED_INCREMENT_PER_SCORE;
-}
-
-function checkCollision(
-  shrimpYPosition: number,
-  obstacle: ObstacleState,
-): boolean {
-  const shrimpLeft = SHRIMP_START_X + COLLISION_MARGIN;
-  const shrimpRight = SHRIMP_START_X + SHRIMP_WIDTH - COLLISION_MARGIN;
-  const shrimpTop =
-    CANVAS_HEIGHT -
-    GROUND_STRIP_HEIGHT -
-    shrimpYPosition -
-    SHRIMP_HEIGHT +
-    COLLISION_MARGIN;
-  const shrimpBottom = CANVAS_HEIGHT - GROUND_STRIP_HEIGHT - shrimpYPosition;
-
-  const obstacleLeft = obstacle.xPosition + COLLISION_MARGIN;
-  const obstacleRight = obstacle.xPosition + obstacle.width - COLLISION_MARGIN;
-  const obstacleTop = CANVAS_HEIGHT - GROUND_STRIP_HEIGHT - obstacle.height;
-  const obstacleBottom = CANVAS_HEIGHT - GROUND_STRIP_HEIGHT;
-
-  return (
-    shrimpLeft < obstacleRight &&
-    shrimpRight > obstacleLeft &&
-    shrimpTop < obstacleBottom &&
-    shrimpBottom > obstacleTop
-  );
-}
-
-// \u2500\u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-
-/**
- * ShrimpRun \u2014 Default Rakta.js interactive starter game.
- *
- * Like the Chrome offline Dino game, but the dinosaur is an animated shrimp.
- * Press Space or click the game canvas to jump. Avoid the red obstacles!
- *
- * Features:
- * - React state only \u2014 no external game library
- * - requestAnimationFrame game loop
- * - Physics: gravity + jump velocity
- * - Score that increases over time
- * - Speed ramps up as score grows
- * - Collision detection with margin
- * - High score tracked in component state
- * - Keyboard (Space) and click/tap support
- * - Accessible button game canvas
- * - SVG shrimp mascot \u2014 no external assets
- */
-export default function ShrimpRunGame() {
-  const [gameStatus, setGameStatus] = useState<GameStatus>("idle");
-  const [score, setScore] = useState(0);
-  const [highScore, setHighScore] = useState(0);
-  const [obstacles, setObstacles] = useState<ObstacleState[]>([]);
-  const [shrimp, setShrimp] = useState<ShrimpState>({
-    yPosition: 0,
-    velocityY: 0,
-    isJumping: false,
-  });
-
-  const gameStatusRef = useRef<GameStatus>("idle");
-  const scoreRef = useRef(0);
-  const shrimpRef = useRef<ShrimpState>({
-    yPosition: 0,
-    velocityY: 0,
-    isJumping: false,
-  });
-  const obstaclesRef = useRef<ObstacleState[]>([]);
-  const obstacleIdRef = useRef(0);
-  const animationFrameRef = useRef<number>(0);
-  const lastObstacleTimeRef = useRef(0);
-  const lastScoreTickRef = useRef(0);
-
-  const jump = useCallback((): void => {
-    if (gameStatusRef.current === "dead") {
-      return;
-    }
-
-    if (gameStatusRef.current === "idle") {
-      gameStatusRef.current = "running";
-      setGameStatus("running");
-    }
-
-    if (!shrimpRef.current.isJumping) {
-      const nextShrimp: ShrimpState = {
-        ...shrimpRef.current,
-        velocityY: JUMP_VELOCITY,
-        isJumping: true,
-      };
-
-      shrimpRef.current = nextShrimp;
-      setShrimp(nextShrimp);
-    }
-  }, []);
-
-  const resetGame = useCallback((): void => {
-    const freshShrimp: ShrimpState = {
-      yPosition: 0,
-      velocityY: 0,
-      isJumping: false,
-    };
-
-    shrimpRef.current = freshShrimp;
-    obstaclesRef.current = [];
-    obstacleIdRef.current = 0;
-    scoreRef.current = 0;
-    gameStatusRef.current = "idle";
-    lastObstacleTimeRef.current = 0;
-    lastScoreTickRef.current = 0;
-
-    setShrimp(freshShrimp);
-    setObstacles([]);
-    setScore(0);
-    setGameStatus("idle");
-  }, []);
-
-  useEffect(() => {
-    let previousTimestamp = 0;
-
-    function gameTick(timestamp: number): void {
-      if (gameStatusRef.current !== "running") {
-        animationFrameRef.current = requestAnimationFrame(gameTick);
-        return;
-      }
-
-      const deltaTime = timestamp - previousTimestamp;
-      previousTimestamp = timestamp;
-
-      if (deltaTime > FRAME_SKIP_THRESHOLD_MS) {
-        animationFrameRef.current = requestAnimationFrame(gameTick);
-        return;
-      }
-
-      const currentShrimp = shrimpRef.current;
-      let nextVelocityY = currentShrimp.velocityY + GRAVITY;
-      let nextYPosition = currentShrimp.yPosition - nextVelocityY;
-
-      if (nextYPosition <= 0) {
-        nextYPosition = 0;
-        nextVelocityY = 0;
-      }
-
-      const nextShrimp: ShrimpState = {
-        yPosition: nextYPosition,
-        velocityY: nextVelocityY,
-        isJumping: nextYPosition > 0,
-      };
-
-      shrimpRef.current = nextShrimp;
-      setShrimp(nextShrimp);
-
-      const obstacleSpeed = getObstacleSpeed(scoreRef.current);
-
-      const movedObstacles = obstaclesRef.current
-        .map(
-          (obstacle): ObstacleState => ({
-            ...obstacle,
-            xPosition: obstacle.xPosition - obstacleSpeed,
-          }),
-        )
-        .filter((obstacle) => obstacle.xPosition + obstacle.width > -10);
-
-      if (
-        timestamp - lastObstacleTimeRef.current > OBSTACLE_SPAWN_INTERVAL_MS &&
-        movedObstacles.length < MAX_CONCURRENT_OBSTACLES
-      ) {
-        const obstacleHeight = 30 + Math.floor(Math.random() * 30);
-        const obstacleWidth = 20 + Math.floor(Math.random() * 20);
-
-        movedObstacles.push({
-          id: obstacleIdRef.current,
-          xPosition: CANVAS_WIDTH + 20,
-          width: obstacleWidth,
-          height: obstacleHeight,
-        });
-
-        obstacleIdRef.current += 1;
-        lastObstacleTimeRef.current = timestamp;
-      }
-
-      obstaclesRef.current = movedObstacles;
-      setObstacles([...movedObstacles]);
-
-      for (const obstacle of movedObstacles) {
-        if (checkCollision(nextShrimp.yPosition, obstacle)) {
-          gameStatusRef.current = "dead";
-          setGameStatus("dead");
-          setHighScore((previousHighScore: number) =>
-            Math.max(previousHighScore, scoreRef.current),
-          );
-          animationFrameRef.current = requestAnimationFrame(gameTick);
-          return;
-        }
-      }
-
-      if (timestamp - lastScoreTickRef.current > SCORE_TICK_MS) {
-        scoreRef.current += 1;
-        setScore(scoreRef.current);
-        lastScoreTickRef.current = timestamp;
-      }
-
-      animationFrameRef.current = requestAnimationFrame(gameTick);
-    }
-
-    animationFrameRef.current = requestAnimationFrame(gameTick);
-
-    return () => {
-      cancelAnimationFrame(animationFrameRef.current);
-    };
-  }, []);
-
-  useEffect(() => {
-    function handleKeyDown(keyboardEvent: KeyboardEvent): void {
-      if (keyboardEvent.code === "Space") {
-        keyboardEvent.preventDefault();
-        jump();
-      }
-    }
-
-    window.addEventListener("keydown", handleKeyDown);
-
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [jump]);
-
-  const shrimpBottomOffset = GROUND_STRIP_HEIGHT + shrimp.yPosition;
-  const isDead = gameStatus === "dead";
-  const isIdle = gameStatus === "idle";
-  const isRunning = gameStatus === "running";
-
-  return (
-    <div className="flex flex-col items-start gap-4 py-4">
-      <div className="flex flex-wrap items-center gap-8">
-        <span className="font-mono text-xl font-bold tabular-nums text-red-600">
-          Score: {score}
-        </span>
-        {highScore > 0 && (
-          <span className="text-sm text-slate-400">Best: {highScore}</span>
-        )}
-      </div>
-
-      <button
-        type="button"
-        className="relative block max-w-full cursor-pointer select-none overflow-hidden rounded-2xl border-2 border-red-600/30 bg-[#0e111a] p-0 text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500"
-        aria-label="ShrimpRun game area. Click or press Space to jump."
-        onClick={jump}
-        onKeyDown={(keyboardEvent: import("react").KeyboardEvent) => {
-          if (keyboardEvent.code === "Space") {
-            keyboardEvent.preventDefault();
-            jump();
-          }
-        }}
-        style={{
-          width: CANVAS_WIDTH,
-          height: CANVAS_HEIGHT,
-        }}
-      >
-        <span
-          className="absolute bottom-0 left-0 w-full rounded-sm bg-red-600"
-          style={{
-            height: GROUND_STRIP_HEIGHT,
-          }}
-        />
-
-        <span
-          className="absolute shrimp-sprite"
-          style={{
-            left: SHRIMP_START_X,
-            bottom: shrimpBottomOffset,
-            width: SHRIMP_WIDTH,
-            height: SHRIMP_HEIGHT,
-            transform: isDead
-              ? "rotate(18deg) translateY(8px)"
-              : shrimp.isJumping
-                ? "rotate(-8deg) translateY(-4px)"
-                : "rotate(0deg)",
-            transition: "transform 120ms ease",
-          }}
-        >
-          <RaktaShrimpMascot isJumping={shrimp.isJumping} isDead={isDead} />
-        </span>
-
-        {obstacles.map((obstacle) => (
-          <span
-            key={obstacle.id}
-            className="absolute shrimp-run-obstacle"
-            style={{
-              left: obstacle.xPosition,
-              bottom: GROUND_STRIP_HEIGHT,
-              width: obstacle.width,
-              height: obstacle.height,
-            }}
-          />
-        ))}
-
-        {isIdle && (
-          <span className="pointer-events-none absolute inset-0 flex items-center justify-center text-sm text-slate-400">
-            Press Space or click to start
-          </span>
-        )}
-
-        {isDead && (
-          <span className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-black/75">
-            <span className="text-lg font-bold tracking-widest text-red-600">
-              GAME OVER
-            </span>
-            <span className="text-sm text-slate-400">Score: {score}</span>
-          </span>
-        )}
-
-        {isRunning && score > 0 && score % 50 === 0 && (
-          <span className="absolute right-3 top-2 text-xs font-bold tracking-widest text-red-600 opacity-80">
-            {score}!
-          </span>
-        )}
-      </button>
-
-      <p className="min-h-5 text-sm text-slate-400">
-        {isIdle && "\uD83E\uDD90 Click or press Space to make the shrimp jump!"}
-        {isRunning && "\uD83E\uDD90 Don't hit the obstacles!"}
-        {isDead && "The shrimp got cooked. Try again!"}
-      </p>
-
-      {isDead && (
-        <button
-          type="button"
-          className="w-fit rounded-lg bg-red-600 px-6 py-2 font-semibold text-white transition hover:bg-red-700 active:bg-red-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500"
-          onClick={resetGame}
-        >
-          Restart
-        </button>
-      )}
-    </div>
-  );
-}
-`;
-}
-function generateFullstackHomePage(projectName) {
-  return `import React from "react";
-
-export default function HomePage() {
-  return (
-    <main className="page-shell">
-      <section className="hero-card">
-        <p className="eyebrow">THE RED ROUTER FRAMEWORK</p>
-        <h1>Welcome to ${projectName}</h1>
-        <p>
-          Built with Rakta.js \u2014 Small in size. Fierce in speed. Alive in every route.
-        </p>
-        <div className="button-row">
-          <a href="/about">About</a>
-          <a href="/blog">Blog</a>
-        </div>
-      </section>
-    </main>
-  );
-}
-`;
+function generateFullstackHomePage(_projectName) {
+  return WELCOME_PAGE_CODE;
 }
 function getDatabaseDependencies(selectedDatabase) {
   switch (selectedDatabase) {
@@ -4174,6 +4249,13 @@ async function promptProjectMode() {
   });
   return getPromptValue(promptResult);
 }
+async function promptTypeScript() {
+  const promptResult = await confirm({
+    message: "Would you like to use TypeScript? (recommended)",
+    initialValue: true
+  });
+  return getPromptValue(promptResult);
+}
 async function promptCssFramework() {
   const promptResult = await select({
     message: "Choose a CSS framework:",
@@ -4312,12 +4394,14 @@ async function promptDatabase() {
 }
 async function runPrompts(projectName) {
   const projectMode = await promptProjectMode();
+  const useTypeScript = await promptTypeScript();
   const cssFramework = await promptCssFramework();
   const renderMode = await promptRenderMode();
   if (projectMode === "frontend-only") {
     return {
       projectName,
       projectMode,
+      useTypeScript,
       cssFramework,
       renderMode,
       backendFramework: "gaman",
@@ -4329,6 +4413,7 @@ async function runPrompts(projectName) {
   return {
     projectName,
     projectMode,
+    useTypeScript,
     cssFramework,
     renderMode,
     backendFramework,
@@ -4346,21 +4431,21 @@ function getProjectNameFromArgs(cliArgs) {
 }
 function formatFullstackCommands() {
   return [
-    `${import_picocolors.default.dim("# Terminal 1")}`,
-    "cd frontend",
-    "bun install",
-    "bun run dev",
+    import_picocolors.default.dim("# Terminal 1"),
+    import_picocolors.default.cyan("cd frontend"),
+    import_picocolors.default.cyan("bun install"),
+    import_picocolors.default.cyan("bun run dev"),
     "",
-    `${import_picocolors.default.dim("# Terminal 2")}`,
-    "cd backend",
-    "bun install",
-    "bun run dev"
-  ].join(`
-  `);
+    import_picocolors.default.dim("# Terminal 2"),
+    import_picocolors.default.cyan("cd backend"),
+    import_picocolors.default.cyan("bun install"),
+    import_picocolors.default.cyan("bun run dev")
+  ].map((line) => line.length === 0 ? "" : `        ${line}`).join(`
+`);
 }
 function formatFrontendOnlyCommands(projectName) {
-  return [`cd ${projectName}`, "bun install", "bun run dev"].join(`
-  `);
+  return [`cd ${projectName}`, "bun install", "bun run dev"].map((command) => `        ${import_picocolors.default.cyan(command)}`).join(`
+`);
 }
 function printSuccessMessage(projectConfig) {
   const modeLabel = PROJECT_MODE_DISPLAY[projectConfig.projectMode];
@@ -4381,7 +4466,7 @@ function printSuccessMessage(projectConfig) {
 
       ${import_picocolors.default.bold("Next steps:")}
 
-        ${nextSteps}
+${nextSteps}
 
       ${import_picocolors.default.bold("Frontend:")} ${import_picocolors.default.cyan("http://localhost:3000")}
       ${isFullstack ? `${import_picocolors.default.bold("Backend:")}  ${import_picocolors.default.cyan("http://localhost:4000")}` : ""}
@@ -4421,4 +4506,4 @@ Error: ${errorMessage}
   process.exit(1);
 });
 
-//# debugId=7E0E06BF6F6CB6FA64756E2164756E21
+//# debugId=2E17890E5DBF1B0764756E2164756E21