create-rakta-app 0.1.7 → 0.1.9

package/dist/index.js

@@ -886,34 +886,16 @@ 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(r2) {
-  return [...r2].map((t2) => _[t2]);
+function M(r) {
+  return [...r].map((t2) => _[t2]);
 }
-function P(r2) {
-  const i = new Intl.DateTimeFormat(r2, {
+function P(r) {
+  const i = new Intl.DateTimeFormat(r, {
     year: "numeric",
     month: "2-digit",
     day: "2-digit"
@@ -923,32 +905,32 @@ function P(r2) {
     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(r2) {
-  return Number.parseInt((r2 || "0").replace(/_/g, "0"), 10) || 0;
+function p(r) {
+  return Number.parseInt((r || "0").replace(/_/g, "0"), 10) || 0;
 }
-function f(r2) {
+function f(r) {
   return {
-    year: p(r2.year),
-    month: p(r2.month),
-    day: p(r2.day)
+    year: p(r.year),
+    month: p(r.month),
+    day: p(r.day)
   };
 }
-function c(r2, t2) {
-  return new Date(r2 || 2001, t2 || 1, 0).getDate();
+function c(r, t2) {
+  return new Date(r || 2001, t2 || 1, 0).getDate();
 }
-function b(r2) {
-  const { year: t2, month: i, day: s } = f(r2);
+function b(r) {
+  const { year: t2, month: i, day: s } = f(r);
   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(r2) {
-  const t2 = b(r2);
+function C(r) {
+  const t2 = b(r);
   return t2 ? new Date(Date.UTC(t2.year, t2.month - 1, t2.day)) : undefined;
 }
-function T2(r2, t2, i, s) {
+function T2(r, t2, i, s) {
   const n = i ? {
     year: i.getUTCFullYear(),
     month: i.getUTCMonth() + 1,
@@ -958,7 +940,7 @@ function T2(r2, t2, i, s) {
     month: s.getUTCMonth() + 1,
     day: s.getUTCDate()
   } : null;
-  return r2 === "year" ? { min: n?.year ?? 1, max: e?.year ?? 9999 } : r2 === "month" ? {
+  return r === "year" ? { min: n?.year ?? 1, max: e?.year ?? 9999 } : r === "month" ? {
     min: n && t2.year === n.year ? n.month : 1,
     max: e && t2.year === e.year ? e.month : 12
   } : {
@@ -1131,26 +1113,26 @@ var u$1 = class u extends V {
   cursor = 0;
   #t;
   getGroupItems(t2) {
-    return this.options.filter((r2) => r2.group === t2);
+    return this.options.filter((r) => r.group === t2);
   }
   isGroupSelected(t2) {
-    const r2 = this.getGroupItems(t2), e = this.value;
-    return e === undefined ? false : r2.every((s) => e.includes(s.value));
+    const r = this.getGroupItems(t2), e = this.value;
+    return e === undefined ? false : r.every((s) => e.includes(s.value));
   }
   toggleValue() {
     const t2 = this.options[this.cursor];
     if (this.value === undefined && (this.value = []), t2.group === true) {
-      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));
+      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));
     } else {
-      const r2 = this.value.includes(t2.value);
-      this.value = r2 ? this.value.filter((e) => e !== t2.value) : [...this.value, t2.value];
+      const r = this.value.includes(t2.value);
+      this.value = r ? this.value.filter((e) => e !== t2.value) : [...this.value, t2.value];
     }
   }
   constructor(t2) {
     super(t2, false);
-    const { options: r2 } = t2;
-    this.#t = t2.selectableGroups !== false, this.options = Object.entries(r2).flatMap(([e, s]) => [
+    const { options: r } = t2;
+    this.#t = t2.selectableGroups !== false, this.options = Object.entries(r).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) => {
@@ -1188,10 +1170,10 @@ class h extends V {
     const t2 = this.userInput;
     if (this.cursor >= t2.length)
       return `${t2}\u2588`;
-    const s = t2.slice(0, this.cursor), r2 = t2[this.cursor], i = t2.slice(this.cursor + 1);
-    return r2 === `
+    const s = t2.slice(0, this.cursor), r = t2[this.cursor], i = t2.slice(this.cursor + 1);
+    return r === `
 ` ? `${s}\u2588
-${i}` : `${s}${styleText("inverse", r2)}${i}`;
+${i}` : `${s}${styleText("inverse", r)}${i}`;
   }
   get cursor() {
     return this._cursor;
@@ -1224,8 +1206,8 @@ ${i}` : `${s}${styleText("inverse", r2)}${i}`;
     if (this.#s)
       return this.focused === "submit" ? true : (this.#r(`
 `), this._cursor++, false);
-    const r2 = this.#t;
-    return this.#t = true, r2 && this.cursor === this.userInput.length ? (this.userInput[this.cursor - 1] === `
+    const r = this.#t;
+    return this.#t = true, r && 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);
   }
@@ -1234,12 +1216,12 @@ ${i}` : `${s}${styleText("inverse", r2)}${i}`;
     super({
       ...t2,
       initialUserInput: s
-    }, false), s !== undefined && (this._cursor = s.length), this.#s = t2.showSubmit ?? false, this.on("key", (r2, i) => {
+    }, false), s !== undefined && (this._cursor = s.length), this.#s = t2.showSubmit ?? false, this.on("key", (r, i) => {
       if (i?.name && o$1.has(i.name)) {
         this.#t = false, this.#i(i.name);
         return;
       }
-      if (r2 === "\t" && this.#s) {
+      if (r === "\t" && this.#s) {
         this.focused = this.focused === "editor" ? "submit" : "editor";
         return;
       }
@@ -1252,10 +1234,10 @@ ${i}` : `${s}${styleText("inverse", r2)}${i}`;
           this._setUserInput(this.userInput.slice(0, this.cursor) + this.userInput.slice(this.cursor + 1));
           return;
         }
-        r2 && (this.#s && this.focused === "submit" && (this.focused = "editor"), this.#r(r2 ?? ""), this._cursor++);
+        r && (this.#s && this.focused === "submit" && (this.focused = "editor"), this.#r(r ?? ""), this._cursor++);
       }
-    }), this.on("userInput", (r2) => {
-      this._setValue(r2);
+    }), this.on("userInput", (r) => {
+      this._setValue(r);
     }), this.on("finalize", () => {
       this.value || (this.value = t2.defaultValue), this.value === undefined && (this.value = "");
     });
@@ -1295,8 +1277,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, ...r2] = t2.slice(this.cursor);
-    return `${e}${styleText("inverse", s)}${r2.join("")}`;
+    const e = t2.slice(0, this.cursor), [s, ...r] = t2.slice(this.cursor);
+    return `${e}${styleText("inverse", s)}${r.join("")}`;
   }
   get cursor() {
     return this._cursor;
@@ -1430,41 +1412,6 @@ 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`,
@@ -1719,313 +1666,131 @@ function writeProjectFiles(projectRoot, generatedFiles) {
 // src/generator.ts
 import { readFileSync } from "fs";
 
-// src/types.ts
-var CSS_DISPLAY = {
-  tailwind: "Tailwind CSS",
-  bootstrap: "Bootstrap",
-  sass: "SASS",
-  none: "None"
-};
-var BACKEND_DISPLAY = {
-  gaman: "Gaman.js",
-  express: "Express.js",
-  nest: "Nest.js",
-  adonis: "Adonis.js"
-};
-var DATABASE_DISPLAY = {
-  postgresql: "PostgreSQL",
-  mysql: "MySQL",
-  mongodb: "MongoDB",
-  firebase: "Firebase",
-  sqlite: "SQLite",
-  mariadb: "MariaDB",
-  redis: "Redis",
-  planetscale: "PlanetScale",
-  neon: "Neon",
-  turso: "Turso"
-};
-var RENDER_MODE_DISPLAY = {
-  csr: "CSR \u2014 Client-Side Rendering",
-  ssr: "SSR \u2014 Server-Side Rendering",
-  ssg: "SSG \u2014 Static Site Generation",
-  csg: "CSG \u2014 Configurable Static Generation",
-  spa: "SPA \u2014 Single Page Application",
-  hybrid: "Hybrid \u2014 Mixed per-route"
-};
-var PROJECT_MODE_DISPLAY = {
-  fullstack: "Fullstack app (frontend + backend + database)",
-  "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;
+// src/starter.ts
+var STARTER_TYPES_CODE = `export interface SystemMetric {
+  name: string;
+  value: string | number;
+  status: "nominal" | "warning" | "critical";
 }
 
-type ComponentState = Record<string, string | number | boolean | undefined>;
-type SetComponentState = (state: ComponentState) => void;
-
-interface ComponentItem {
-  id: string;
+export interface GameHighScore {
   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>
-      );
-    }
-  }
-];
+  score: number;
+  date: string;
+}
 
-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);
+export type AestheticUnit = "LENIS-MODERN" | "RETRO-CYBER" | "NEO-BRUTALIST";
+`;
+var STARTER_AUDIO_CODE = `let audioContext: AudioContext | null = null;
 
-  if (!isOpen) return null;
+function getAudioContext(): AudioContext | null {
+  if (typeof window === "undefined") return null;
 
-  const fallbackComponent = BRUTALIST_COMPONENTS[0];
-  if (!fallbackComponent) return null;
+  const AudioContextCtor = window.AudioContext ?? window.webkitAudioContext;
+  if (!AudioContextCtor) return null;
 
-  const activeComp = BRUTALIST_COMPONENTS.find(c => c.id === activeCompId) ?? fallbackComponent;
-  const activeState = componentStates[activeCompId] || {};
+  audioContext ??= new AudioContextCtor();
+  return audioContext;
+}
 
-  const handleSetState = (newState: ComponentState) => {
-    setComponentStates({
-      ...componentStates,
-      [activeCompId]: newState
-    });
-  };
+function playTone(frequency: number, durationMs: number, type: OscillatorType): void {
+  const context = getAudioContext();
+  if (!context) return;
 
-  const handleCopyCode = (code: string) => {
-    navigator.clipboard.writeText(code);
-    setCopiedId(activeCompId);
-    setTimeout(() => setCopiedId(null), 2000);
-  };
+  const oscillator = context.createOscillator();
+  const gain = context.createGain();
 
-  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>
+  oscillator.type = type;
+  oscillator.frequency.setValueAtTime(frequency, context.currentTime);
+  gain.gain.setValueAtTime(0.045, context.currentTime);
+  gain.gain.exponentialRampToValueAtTime(0.001, context.currentTime + durationMs / 1000);
 
-        <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>
+  oscillator.connect(gain);
+  gain.connect(context.destination);
+  oscillator.start();
+  oscillator.stop(context.currentTime + durationMs / 1000);
+}
 
-          <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>
+export function playJumpSound(): void {
+  playTone(560, 90, "triangle");
+}
 
-            <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>
+export function playScoreSound(): void {
+  playTone(880, 120, "square");
+}
+`;
+var STARTER_SHRIMP_CHARACTER_CODE = `interface ShrimpCharacterProps {
+  status: "IDLE" | "SWIMMING" | "JUMPING" | "DEAD";
+  playerY: number;
+  rotation?: number;
+}
 
-            <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>
+export default function ShrimpCharacter({
+  status,
+  playerY,
+  rotation,
+}: ShrimpCharacterProps) {
+  const isDead = status === "DEAD";
+  const isSwimming = status === "SWIMMING";
+  const finalRotation = rotation ?? (isDead ? 180 : status === "JUMPING" ? -10 : 0);
+  const shrimpColor = isDead ? "fill-orange-400" : "fill-rose-500";
+
+  return (
+    <div
+      className="relative flex h-16 w-16 select-none items-center justify-center transition-transform duration-75"
+      style={{ transform: \`translateY(\${-playerY}px) rotate(\${finalRotation}deg)\` }}
+    >
+      <svg
+        aria-label={isDead ? "Shrimp failed the run" : "Rakta shrimp runner"}
+        role="img"
+        viewBox="0 0 100 100"
+        className={\`h-full w-full drop-shadow-[0_4px_12px_rgba(244,63,94,0.32)] \${isSwimming ? "animate-pulse" : ""}\`}
+      >
+        <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}
+        />
+        <path
+          d="M 29 51 C 21 57, 16 61, 10 62"
+          stroke={isDead ? "#fb923c" : "#f43f5e"}
+          strokeWidth="4"
+          strokeLinecap="round"
+          fill="none"
+        />
+        <path
+          d="M 31 55 C 25 64, 22 70, 17 76"
+          stroke={isDead ? "#fb923c" : "#f43f5e"}
+          strokeWidth="3"
+          strokeLinecap="round"
+          fill="none"
+        />
+        <circle cx="66" cy="38" r="4.5" fill={isDead ? "#18181b" : "#000"} />
+        {!isDead && <circle cx="67.5" cy="36.5" r="1.2" fill="#fff" />}
+        <path
+          d="M 62 30 C 70 21, 82 19, 90 24"
+          stroke="#fb7185"
+          strokeWidth="2"
+          strokeLinecap="round"
+          fill="none"
+        />
+        <path
+          d="M 63 33 C 73 29, 84 31, 91 39"
+          stroke="#fb7185"
+          strokeWidth="2"
+          strokeLinecap="round"
+          fill="none"
+        />
+      </svg>
     </div>
   );
 }
 `;
-var CORAL_OBSTACLE_CODE = `interface CoralObstacleProps {
-  position: 'TOP' | 'BOTTOM';
+var STARTER_CORAL_OBSTACLE_CODE = `interface CoralObstacleProps {
+  position: "TOP" | "BOTTOM";
   height: number;
   width?: number;
   paletteIndex?: number;
@@ -2033,329 +1798,542 @@ var CORAL_OBSTACLE_CODE = `interface CoralObstacleProps {
   scaleX?: number;
 }
 
-export default function CoralObstacle({ 
-  position, 
-  height, 
+export default function CoralObstacle({
+  position,
+  height,
   width = 64,
-  paletteIndex = 0, 
-  variant = 0, 
-  scaleX = 1 
+  paletteIndex = 0,
+  variant = 0,
+  scaleX = 1,
 }: CoralObstacleProps) {
-  const defaultPalette = { primary: '#f43f5e', secondary: '#fda4af', shadow: '#9f1239', polyps: '#ffe4e6', name: 'rose' };
+  const fallbackPalette = {
+    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' },
+    fallbackPalette,
+    { 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 palette = palettes[paletteIndex % palettes.length] ?? fallbackPalette;
   const coralId = \`coralGrad-\${palette.name}-\${variant}\`;
+  const flipped = position === "TOP" ? "scale(1, -1) translate(0, -120)" : undefined;
 
   return (
-    <div 
+    <div
       className="absolute flex items-center justify-center pointer-events-none"
       style={{ height: \`\${height}px\`, width: \`\${width}px\`, transform: \`scaleX(\${scaleX})\` }}
     >
-      <svg 
+      <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)]"
+        viewBox="0 0 80 120"
+        className="h-full w-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="52%" stopColor={palette.primary} />
             <stop offset="100%" stopColor={palette.shadow} />
           </linearGradient>
+          <filter id={\`coralGlow-\${variant}\`}>
+            <feGaussianBlur stdDeviation="1.8" result="coloredBlur" />
+            <feMerge>
+              <feMergeNode in="coloredBlur" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
         </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 transform={flipped} filter={\`url(#coralGlow-\${variant})\`}>
+          <path
+            d="M 35 120 C 30 100, 15 90, 10 70 C 5 50, 20 40, 15 25 C 10 10, 25 5, 30 15 C 35 30, 28 45, 38 65 Q 42 90, 40 120"
+            fill={palette.shadow}
+            opacity="0.85"
+          />
+          <path
+            d="M 45 120 C 50 105, 65 95, 70 75 C 75 55, 60 45, 65 30 C 70 15, 55 10, 50 20 C 45 35, 52 45, 42 65 Q 40 90, 45 120"
+            fill={palette.shadow}
+            opacity="0.85"
+          />
+          <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})\`}
+          />
+          <circle cx="22" cy="11" r="3.5" fill={palette.polyps} />
+          <circle cx="58" cy="21" r="3.5" fill={palette.polyps} />
+          <circle cx="30" cy="15" r="2.5" fill={palette.secondary} />
+          <circle cx="50" cy="20" r="2.5" fill={palette.secondary} />
         </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' },
-];
+var STARTER_PAGE_CODE = `import { useCallback, useEffect, useRef, useState } from "react";
+import {
+  LuActivity,
+  LuCode2,
+  LuCpu,
+  LuGauge,
+  LuRocket,
+  LuShieldCheck,
+  LuZap,
+} from "react-icons/lu";
+import CoralObstacle from "./components/CoralObstacle";
+import ShrimpCharacter from "./components/ShrimpCharacter";
+import type { AestheticUnit } from "./types";
+import { playJumpSound, playScoreSound } from "./utils/audio";
+
+type GameStatus = "IDLE" | "SWIMMING" | "JUMPING" | "DEAD";
+type SimSpeed = "NORMAL" | "FAST" | "TURBO";
+
+const GAME_WIDTH = 720;
+const GAME_HEIGHT = 280;
+const SHRIMP_X = 82;
+const SHRIMP_SIZE = 58;
+const GRAVITY = 0.82;
+const JUMP_FORCE = 15;
+
+function getSpeedValue(speed: SimSpeed): number {
+  if (speed === "TURBO") return 8.2;
+  if (speed === "FAST") return 6.4;
+  return 5.2;
+}
 
-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);
+export default function WelcomePage() {
+  const [status, setStatus] = useState<GameStatus>("IDLE");
+  const [score, setScore] = useState(0);
+  const [bestScore, setBestScore] = useState(() => {
+    if (typeof localStorage === "undefined") return 0;
+    return parseInt(localStorage.getItem("rakta_shrimprun_highscore") || "0", 10);
+  });
+  const [playerY, setPlayerY] = useState(0);
+  const [rotation, setRotation] = useState(0);
+  const [obstacleX, setObstacleX] = useState(GAME_WIDTH + 120);
+  const [obstacleHeight, setObstacleHeight] = useState(84);
+  const [obstacleWidth, setObstacleWidth] = useState(58);
+  const [obstaclePalette, setObstaclePalette] = useState(0);
+  const [obstacleVariant, setObstacleVariant] = useState(0);
+  const [obstacleScaleX, setObstacleScaleX] = useState(1);
+  const [aestheticUnit, setAestheticUnit] = useState<AestheticUnit>("LENIS-MODERN");
+  const [simSpeed, setSimSpeed] = useState<SimSpeed>("NORMAL");
+  const [lowLatencyMode, setLowLatencyMode] = useState(true);
+  const [configToast, setConfigToast] = useState<string | null>(null);
+
+  const statusRef = useRef(status);
+  const velocityRef = useRef(0);
+  const playerYRef = useRef(0);
+  const obstacleXRef = useRef(GAME_WIDTH + 120);
+  const scoreRef = useRef(0);
+  const lastTimeRef = useRef(0);
+  const animationRef = useRef<number | null>(null);
+  const toastTimerRef = useRef<number | null>(null);
 
   useEffect(() => {
-    if (terminalEndRef.current) {
-      terminalEndRef.current.scrollIntoView({ behavior: 'smooth' });
+    statusRef.current = status;
+  }, [status]);
+
+  const showConfigToast = useCallback((message: string) => {
+    setConfigToast(message);
+    if (toastTimerRef.current !== null) {
+      window.clearTimeout(toastTimerRef.current);
+    }
+    toastTimerRef.current = window.setTimeout(() => setConfigToast(null), 1400);
+  }, []);
+
+  const resetObstacle = useCallback(() => {
+    obstacleXRef.current = GAME_WIDTH + 80 + Math.random() * 220;
+    setObstacleX(obstacleXRef.current);
+    setObstacleHeight(58 + Math.floor(Math.random() * 82));
+    setObstacleWidth(42 + Math.floor(Math.random() * 32));
+    setObstaclePalette((value) => (value + 1) % 5);
+    setObstacleVariant((value) => (value + 1) % 3);
+    setObstacleScaleX(Math.random() > 0.5 ? 1 : -1);
+  }, []);
+
+  const startRun = useCallback(() => {
+    if (statusRef.current === "DEAD") {
+      scoreRef.current = 0;
+      setScore(0);
+      playerYRef.current = 0;
+      velocityRef.current = 0;
+      setPlayerY(0);
+      resetObstacle();
     }
-  });
 
-  if (!isOpen) return null;
+    statusRef.current = "SWIMMING";
+    setStatus("SWIMMING");
+  }, [resetObstacle]);
 
-  const startDeployment = () => {
-    setStatus('building');
-    setLogs([]);
-    setProgress(0);
+  const jump = useCallback(() => {
+    if (statusRef.current === "IDLE" || statusRef.current === "DEAD") {
+      startRun();
+    }
+
+    if (playerYRef.current <= 4) {
+      velocityRef.current = JUMP_FORCE;
+      setStatus("JUMPING");
+      playJumpSound();
+    }
+  }, [startRun]);
+
+  useEffect(() => {
+    function onKeyDown(event: KeyboardEvent): void {
+      if (event.code === "Space") {
+        event.preventDefault();
+        jump();
+      }
+    }
+
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [jump]);
+
+  useEffect(() => {
+    function frame(timestamp: number): void {
+      const delta = Math.min(timestamp - lastTimeRef.current, 32) / 16.67;
+      lastTimeRef.current = timestamp;
 
-    let currentLogIndex = 0;
-    
-    const runStep = () => {
-      if (currentLogIndex < DEPLOY_LOGS.length) {
-        const nextLog = DEPLOY_LOGS[currentLogIndex];
-        if (nextLog) {
-          setLogs(prev => [...prev, nextLog]);
+      if (statusRef.current === "SWIMMING" || statusRef.current === "JUMPING") {
+        velocityRef.current -= GRAVITY * delta;
+        playerYRef.current = Math.max(0, playerYRef.current + velocityRef.current * delta);
+
+        if (playerYRef.current === 0 && velocityRef.current < 0) {
+          velocityRef.current = 0;
+          setStatus("SWIMMING");
+        }
+
+        obstacleXRef.current -= getSpeedValue(simSpeed) * (lowLatencyMode ? 1.08 : 0.92) * delta;
+
+        if (obstacleXRef.current < -90) {
+          resetObstacle();
+          scoreRef.current += 7;
+          setScore(scoreRef.current);
+          playScoreSound();
+        }
+
+        scoreRef.current += 1;
+        setScore(scoreRef.current);
+
+        const shrimpLeft = SHRIMP_X + 8;
+        const shrimpRight = SHRIMP_X + SHRIMP_SIZE - 8;
+        const shrimpBottom = GAME_HEIGHT - 54 - playerYRef.current;
+        const shrimpTop = shrimpBottom - SHRIMP_SIZE + 12;
+        const obstacleLeft = obstacleXRef.current + 8;
+        const obstacleRight = obstacleXRef.current + obstacleWidth - 8;
+        const obstacleTop = GAME_HEIGHT - 48 - obstacleHeight;
+        const obstacleBottom = GAME_HEIGHT - 48;
+        const didCollide =
+          shrimpLeft < obstacleRight &&
+          shrimpRight > obstacleLeft &&
+          shrimpTop < obstacleBottom &&
+          shrimpBottom > obstacleTop;
+
+        if (didCollide) {
+          statusRef.current = "DEAD";
+          setStatus("DEAD");
+          setRotation(180);
+          const nextBest = Math.max(bestScore, scoreRef.current);
+          setBestScore(nextBest);
+          localStorage.setItem("rakta_shrimprun_highscore", String(nextBest));
+        } else {
+          setRotation(playerYRef.current > 0 ? -8 : 0);
         }
-        setProgress(Math.round(((currentLogIndex + 1) / DEPLOY_LOGS.length) * 100));
-        currentLogIndex++;
-        setTimeout(runStep, Math.random() * 250 + 150);
-      } else {
-        setStatus('success');
+
+        setPlayerY(playerYRef.current);
+        setObstacleX(obstacleXRef.current);
       }
+
+      animationRef.current = requestAnimationFrame(frame);
+    }
+
+    animationRef.current = requestAnimationFrame(frame);
+    return () => {
+      if (animationRef.current !== null) cancelAnimationFrame(animationRef.current);
     };
-    setTimeout(runStep, 400);
-  };
+  }, [bestScore, lowLatencyMode, obstacleHeight, obstacleWidth, resetObstacle, simSpeed]);
 
-  const resetDeploy = () => {
-    setStatus('idle');
-    setLogs([]);
-    setProgress(0);
-  };
+  const obstacleSizeClass =
+    obstacleHeight < 82 ? "KECIL" : obstacleHeight < 120 ? "SEDANG" : "BESAR";
+  const obstaclePos = "BOTTOM" as const;
 
   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 className="min-h-screen bg-[#050505] text-white">
+      <div className="scanline" />
+      <main className="mx-auto flex w-full max-w-7xl flex-col gap-10 px-6 py-8 md:px-10">
+        <nav className="flex items-center justify-between border-b border-surface-stroke pb-5">
+          <div className="flex items-center gap-3 font-mono text-sm font-extrabold tracking-tight">
+            <span className="grid h-8 w-8 place-items-center border border-brand-pink bg-brand-pink text-black">
+              R
+            </span>
+            Rakta.js
           </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="hidden items-center gap-6 font-mono text-[11px] font-bold uppercase tracking-wider text-[#b5b5b5] md:flex">
+            <a href="#features" className="transition hover:text-white">Features</a>
+            <a href="#shrimprun" className="transition hover:text-white">ShrimpRun</a>
+            <a href="#start" className="transition hover:text-white">Start</a>
+          </div>
+        </nav>
 
-        <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">
+        <section className="grid min-h-[540px] items-center gap-10 border-b border-surface-stroke py-12 md:grid-cols-[1.08fr_0.92fr]">
           <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>}
+            <p className="mb-5 font-mono text-[11px] font-bold uppercase tracking-[0.32em] text-brand-pink">
+              THE RED ROUTER FRAMEWORK
+            </p>
+            <h1 className="max-w-4xl text-6xl font-black uppercase leading-[0.88] tracking-normal text-white md:text-8xl">
+              Small in size. Fierce in speed.
+            </h1>
+            <p className="mt-7 max-w-2xl text-sm leading-7 text-[#b5b5b5] md:text-base">
+              Rakta.js is ready. React, Bun, file routes, hot reload, metadata, favicon,
+              and the ShrimpRun starter are already wired for your first route.
+            </p>
+            <div className="mt-8 flex flex-wrap gap-3">
+              <a
+                href="#shrimprun"
+                className="inline-flex h-11 items-center gap-2 border border-brand-pink bg-brand-pink px-5 font-mono text-xs font-extrabold uppercase text-white transition hover:bg-white hover:text-black"
+              >
+                <LuRocket className="h-4 w-4" />
+                Play ShrimpRun
+              </a>
+              <a
+                href="#start"
+                className="inline-flex h-11 items-center gap-2 border border-surface-stroke px-5 font-mono text-xs font-extrabold uppercase text-white transition hover:border-white"
+              >
+                <LuCode2 className="h-4 w-4" />
+                Start Building
+              </a>
             </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 className="grid gap-3 border border-surface-stroke bg-surface-card p-5">
+            {[
+              ["Routing", "File-based routes with fast client navigation", LuZap],
+              ["Metadata", "Default title, favicon, and SEO shell included", LuShieldCheck],
+              ["Runtime", "Bun-powered dev server on localhost:3000", LuCpu],
+            ].map(([title, text, Icon]) => (
+              <div key={String(title)} className="flex gap-4 border border-white/5 bg-black p-4">
+                <Icon className="mt-1 h-5 w-5 text-brand-pink" />
+                <div>
+                  <h2 className="font-mono text-xs font-extrabold uppercase">{title}</h2>
+                  <p className="mt-1 text-xs leading-5 text-[#b5b5b5]">{text}</p>
+                </div>
+              </div>
+            ))}
           </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 = '';
+        </section>
+
+        <section id="features" className="grid grid-cols-1 gap-0 border border-surface-stroke md:grid-cols-3">
+          {[
+            ["01", "HOT RELOAD", "Pages, components, styles, layouts, stores, and route updates refresh immediately.", LuActivity],
+            ["02", "REACT ICONS", "Starter icons use react-icons/lu only. No lucide-react dependency ships.", LuCode2],
+            ["03", "LOCAL FIRST", "The CLI prints and serves localhost:3000 for the frontend starter.", LuGauge],
+          ].map(([number, title, text, Icon]) => (
+            <div key={String(title)} className="border-b border-surface-stroke p-7 md:border-b-0 md:border-r last:md:border-r-0">
+              <span className="font-mono text-[10px] font-bold text-brand-pink">{number}</span>
+              <Icon className="my-8 h-6 w-6 text-white" />
+              <h2 className="font-mono text-xl font-extrabold uppercase">{title}</h2>
+              <p className="mt-3 text-xs leading-6 text-[#b5b5b5]">{text}</p>
+            </div>
+          ))}
+        </section>
 
-  const finalRotation = rotation !== undefined ? rotation : (isDead ? 180 : 0);
-  const shrimpColor = isDead ? 'fill-orange-400' : 'fill-rose-500';
+        <section id="shrimprun" className="grid gap-5">
+          <div>
+            <p className="font-mono text-[10px] font-bold uppercase tracking-[0.28em] text-brand-pink">
+              SHRIMPRUN SIMULATION
+            </p>
+            <h2 className="mt-3 text-4xl font-black uppercase md:text-6xl">
+              Avoid the coral.
+            </h2>
+          </div>
 
-  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";
+          <button
+            type="button"
+            onClick={jump}
+            className="relative h-[280px] overflow-hidden border-2 border-surface-stroke bg-black text-left outline-none transition focus-visible:border-brand-pink"
+            aria-label="ShrimpRun game area. Press Space or click to jump."
+          >
+            <div className="bg-grid-glow absolute inset-0 opacity-80" />
+            <div className="absolute inset-x-0 bottom-0 h-12 border-t border-cyan-400/20 bg-cyan-400/5" />
+            <div className="seaweed-waving-left-1 absolute bottom-8 left-9 h-16 w-3 bg-emerald-500/70" />
+            <div className="seaweed-waving-left-2 absolute bottom-8 left-16 h-24 w-3 bg-cyan-500/60" />
+            <div className="seaweed-waving-right-1 absolute bottom-8 right-20 h-20 w-3 bg-emerald-500/70" />
+
+            <div className="absolute left-6 top-5 z-20 flex gap-4 font-mono text-[11px] font-bold uppercase">
+              <span>Score: {score}</span>
+              <span className="text-brand-pink">Best: {bestScore}</span>
+              <span>{status}</span>
+            </div>
 
-export default function WelcomePage() {
-  const [modalOpen, setModalOpen] = useState<'components' | 'deploy' | 'docs' | null>(null);
+            <div
+              className="absolute z-20"
+              style={{ left: SHRIMP_X, bottom: 48 + playerY }}
+            >
+              <ShrimpCharacter status={status} playerY={0} rotation={rotation} />
+            </div>
 
-  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="absolute z-10" style={{ left: obstacleX, bottom: 48 }}>
+              <CoralObstacle
+                position={obstaclePos}
+                height={obstacleHeight}
+                width={obstacleWidth}
+                paletteIndex={obstaclePalette}
+                variant={obstacleVariant}
+                scaleX={obstacleScaleX}
+              />
+            </div>
 
-        <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>
+            {status === "IDLE" && (
+              <div className="absolute inset-0 z-30 grid place-items-center bg-black/55 font-mono text-xs font-bold uppercase tracking-[0.2em] text-white">
+                Press Space or click to start
+              </div>
+            )}
+            {status === "DEAD" && (
+              <div className="absolute inset-0 z-30 grid place-items-center bg-black/75 text-center font-mono">
+                <div>
+                  <p className="text-3xl font-black text-brand-pink">SYSTEM IMPACT</p>
+                  <p className="mt-2 text-xs uppercase text-[#b5b5b5]">Click to reboot the run</p>
+                </div>
+              </div>
+            )}
           </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="flex flex-col justify-between gap-4 font-mono text-[10px] text-zinc-500 md:flex-row md:items-center">
+            <div className="flex flex-wrap items-center gap-3">
+              <span className="font-extrabold text-white">SHRIMPRUN {aestheticUnit.replace("-", " ")}</span>
+              <span>CORAL:</span>
+              <span className="border border-brand-pink/30 bg-brand-pink/5 px-2 py-0.5 font-bold text-brand-pink">
+                {obstacleSizeClass}
+              </span>
+            </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>
+            <div className="flex flex-wrap items-center gap-3">
+              {(["LENIS-MODERN", "RETRO-CYBER", "NEO-BRUTALIST"] as AestheticUnit[]).map((unit) => (
+                <button
+                  type="button"
+                  key={unit}
+                  onClick={() => {
+                    setAestheticUnit(unit);
+                    showConfigToast(\`STYLE SET: \${unit}\`);
+                    playScoreSound();
+                  }}
+                  className={\`px-2 py-1 font-bold transition \${aestheticUnit === unit ? "bg-white text-black" : "border border-surface-stroke text-zinc-500 hover:text-white"}\`}
+                >
+                  {unit}
+                </button>
+              ))}
+              {(["NORMAL", "FAST", "TURBO"] as const).map((speed) => (
+                <button
+                  type="button"
+                  key={speed}
+                  onClick={() => {
+                    setSimSpeed(speed);
+                    showConfigToast(\`SPEED SET: \${speed}\`);
+                    playScoreSound();
+                  }}
+                  className={\`px-2 py-1 font-bold transition \${simSpeed === speed ? "bg-brand-pink text-white" : "border border-surface-stroke text-zinc-500 hover:text-white"}\`}
+                >
+                  {speed}
+                </button>
+              ))}
+              <button
+                type="button"
+                onClick={() => {
+                  setLowLatencyMode((value) => !value);
+                  showConfigToast(\`LATENCY MODE: \${!lowLatencyMode ? "LOW" : "STANDARD"}\`);
+                  playJumpSound();
+                }}
+                className={\`px-2 py-1 font-bold transition \${lowLatencyMode ? "bg-cyan-400 text-black" : "border border-surface-stroke text-zinc-500"}\`}
+              >
+                LOW LATENCY {lowLatencyMode ? "ON" : "OFF"}
+              </button>
+            </div>
+          </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>
+          {configToast && (
+            <div className="fixed bottom-8 left-1/2 z-50 -translate-x-1/2 border border-brand-pink bg-black px-4 py-2 font-mono text-[10px] font-bold uppercase tracking-widest text-brand-pink">
+              {configToast}
+            </div>
+          )}
+        </section>
+
+        <section id="start" className="border-t border-surface-stroke py-10">
+          <p className="font-mono text-[10px] font-bold uppercase tracking-[0.28em] text-brand-pink">
+            NEXT MOVE
+          </p>
+          <h2 className="mt-3 text-3xl font-black uppercase md:text-5xl">Edit app/page and ship.</h2>
+          <p className="mt-4 max-w-2xl text-sm leading-7 text-[#b5b5b5]">
+            This starter is intentionally immediate: no popups, no placeholder flow,
+            and no hidden modal dependencies. Your first route is already alive.
+          </p>
+        </section>
+      </main>
+    </div>
   );
 }
 `;
 
+// src/types.ts
+var CSS_DISPLAY = {
+  tailwind: "Tailwind CSS",
+  bootstrap: "Bootstrap",
+  sass: "SASS",
+  none: "None"
+};
+var BACKEND_DISPLAY = {
+  gaman: "Gaman.js",
+  express: "Express.js",
+  nest: "Nest.js",
+  adonis: "Adonis.js"
+};
+var DATABASE_DISPLAY = {
+  postgresql: "PostgreSQL",
+  mysql: "MySQL",
+  mongodb: "MongoDB",
+  firebase: "Firebase",
+  sqlite: "SQLite",
+  mariadb: "MariaDB",
+  redis: "Redis",
+  planetscale: "PlanetScale",
+  neon: "Neon",
+  turso: "Turso"
+};
+var RENDER_MODE_DISPLAY = {
+  csr: "CSR \u2014 Client-Side Rendering",
+  ssr: "SSR \u2014 Server-Side Rendering",
+  ssg: "SSG \u2014 Static Site Generation",
+  csg: "CSG \u2014 Configurable Static Generation",
+  spa: "SPA \u2014 Single Page Application",
+  hybrid: "Hybrid \u2014 Mixed per-route"
+};
+var PROJECT_MODE_DISPLAY = {
+  fullstack: "Fullstack app (frontend + backend + database)",
+  "frontend-only": "Frontend only (no backend, no database)"
+};
+var PROJECT_LANGUAGE_DISPLAY = {
+  typescript: "TypeScript / TSX",
+  javascript: "JavaScript / JSX"
+};
+
 // 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));
 function getRootFiles(projectConfig) {
-  const { projectName, projectMode } = projectConfig;
+  const { projectName, projectMode, useTypeScript } = projectConfig;
   const workspaces = projectMode === "fullstack" ? ["frontend", "backend", "shared"] : [];
-  return [
+  const files = [
     {
       path: "package.json",
       content: JSON.stringify({
@@ -2370,36 +2348,16 @@ function getRootFiles(projectConfig) {
           "build:backend": "cd backend && bun run build",
           build: "bun run build:frontend && bun run build:backend",
           start: "cd backend && bun run start",
-          typecheck: "cd frontend && bun run typecheck && cd ../backend && bun run typecheck"
+          ...useTypeScript ? {
+            typecheck: "cd frontend && bun run typecheck && cd ../backend && bun run typecheck"
+          } : {}
         } : {
           dev: "rakta dev",
           build: "rakta build",
           start: "rakta start",
-          typecheck: "tsc --noEmit"
-        },
-        description: `${projectName} \u2014 built with Rakta.js`
-      }, null, 2)
-    },
-    {
-      path: "tsconfig.base.json",
-      content: JSON.stringify({
-        compilerOptions: {
-          target: "ESNext",
-          module: "ESNext",
-          moduleResolution: "Bundler",
-          jsx: "react-jsx",
-          lib: ["ESNext", "DOM", "DOM.Iterable"],
-          strict: true,
-          noUncheckedIndexedAccess: true,
-          exactOptionalPropertyTypes: true,
-          skipLibCheck: true,
-          esModuleInterop: true,
-          allowSyntheticDefaultImports: true,
-          resolveJsonModule: true,
-          verbatimModuleSyntax: true,
-          isolatedModules: true
+          ...useTypeScript ? { typecheck: "tsc --noEmit" } : {}
         },
-        exclude: ["node_modules", "dist", "**/dist/**"]
+        description: `${projectName} \xE2\u20AC\u201D built with Rakta.js`
       }, null, 2)
     },
     {
@@ -2444,10 +2402,37 @@ dist/
       content: generateProjectReadme(projectConfig)
     }
   ];
+  if (useTypeScript) {
+    files.splice(1, 0, {
+      path: "tsconfig.base.json",
+      content: JSON.stringify({
+        compilerOptions: {
+          target: "ESNext",
+          module: "ESNext",
+          moduleResolution: "Bundler",
+          jsx: "react-jsx",
+          lib: ["ESNext", "DOM", "DOM.Iterable"],
+          strict: true,
+          noUncheckedIndexedAccess: true,
+          exactOptionalPropertyTypes: true,
+          skipLibCheck: true,
+          esModuleInterop: true,
+          allowSyntheticDefaultImports: true,
+          resolveJsonModule: true,
+          verbatimModuleSyntax: true,
+          isolatedModules: true
+        },
+        exclude: ["node_modules", "dist", "**/dist/**"]
+      }, null, 2)
+    });
+  }
+  return files;
 }
 function getFrontendOnlyFiles(projectConfig) {
-  const { projectName, cssFramework } = projectConfig;
+  const { projectName, cssFramework, useTypeScript } = projectConfig;
   const styleFileName = cssFramework === "sass" ? "globals.scss" : "globals.css";
+  const pageExtension = useTypeScript ? "tsx" : "jsx";
+  const scriptExtension = useTypeScript ? "ts" : "js";
   const files = [
     {
       path: "package.json",
@@ -2461,49 +2446,27 @@ function getFrontendOnlyFiles(projectConfig) {
           build: "rakta build",
           start: "rakta start",
           routes: "rakta routes",
-          typecheck: "tsc --noEmit"
+          ...useTypeScript ? { typecheck: "tsc --noEmit" } : {}
         },
         dependencies: {
-          raktajs: "^0.1.7",
+          raktajs: "^0.1.9",
           react: "^19.2.7",
           "react-dom": "^19.2.7",
-          "react-icons": "^5.2.1",
-          motion: "^12.0.0",
+          "react-icons": "^5.7.0",
           ...getCssDependencies(cssFramework)
         },
-        devDependencies: {
+        devDependencies: useTypeScript ? {
           "@types/react": "^19.2.17",
           "@types/react-dom": "^19.2.3",
           typescript: "^6.0.3",
           ...getCssDevDependencies(cssFramework)
+        } : {
+          ...getCssDevDependencies(cssFramework)
         }
       }, null, 2)
     },
     {
-      path: "tsconfig.json",
-      content: JSON.stringify({
-        extends: "./tsconfig.base.json",
-        compilerOptions: {
-          outDir: "./dist",
-          rootDir: "./",
-          types: ["react", "react-dom"]
-        },
-        include: [
-          "rakta-env.d.ts",
-          "app/**/*",
-          "components/**/*",
-          "styles/**/*",
-          "rakta.config.ts"
-        ],
-        exclude: ["node_modules", "dist"]
-      }, null, 2)
-    },
-    {
-      path: "rakta-env.d.ts",
-      content: generateFrontendOnlyRaktaEnv()
-    },
-    {
-      path: "rakta.config.ts",
+      path: `rakta.config.${scriptExtension}`,
       content: `import { defineRaktaConfig } from "raktajs";
 
 export default defineRaktaConfig({
@@ -2520,44 +2483,40 @@ export default defineRaktaConfig({
 `
     },
     {
-      path: "app/layout.tsx",
+      path: `app/layout.${pageExtension}`,
       content: generateFrontendOnlyLayout()
     },
     {
-      path: "app/page.tsx",
+      path: `app/page.${pageExtension}`,
       content: generateFrontendOnlyPage(projectName)
     },
     {
-      path: "app/loading.tsx",
+      path: `app/loading.${pageExtension}`,
       content: generateFrontendOnlyLoading()
     },
     {
-      path: "app/error.tsx",
+      path: `app/error.${pageExtension}`,
       content: generateFrontendOnlyError()
     },
     {
-      path: "app/notFound.tsx",
+      path: `app/notFound.${pageExtension}`,
       content: generateFrontendOnlyNotFound()
     },
     {
-      path: "app/components/ComponentsModal.tsx",
-      content: COMPONENTS_MODAL_CODE
-    },
-    {
-      path: "app/components/CoralObstacle.tsx",
-      content: CORAL_OBSTACLE_CODE
+      path: `app/components/CoralObstacle.${pageExtension}`,
+      content: STARTER_CORAL_OBSTACLE_CODE
     },
     {
-      path: "app/components/DeployModal.tsx",
-      content: DEPLOY_MODAL_CODE
+      path: `app/components/ShrimpCharacter.${pageExtension}`,
+      content: STARTER_SHRIMP_CHARACTER_CODE
     },
     {
-      path: "app/components/DocsModal.tsx",
-      content: DOCS_MODAL_CODE
+      path: `app/utils/audio.${scriptExtension}`,
+      content: STARTER_AUDIO_CODE
     },
     {
-      path: "app/components/ShrimpCharacter.tsx",
-      content: SHRIMP_CHARACTER_CODE
+      path: `app/types.${scriptExtension}`,
+      content: STARTER_TYPES_CODE
     },
     {
       path: `styles/${styleFileName}`,
@@ -2572,12 +2531,36 @@ export default defineRaktaConfig({
       content: FAVICON_BYTES
     }
   ];
-  return processFilesForLanguage(files, projectConfig.useTypeScript);
+  if (useTypeScript) {
+    files.splice(1, 0, {
+      path: "tsconfig.json",
+      content: JSON.stringify({
+        extends: "./tsconfig.base.json",
+        compilerOptions: {
+          outDir: "./dist",
+          rootDir: "./",
+          types: ["react", "react-dom"]
+        },
+        include: [
+          "rakta-env.d.ts",
+          "app/**/*",
+          "components/**/*",
+          "styles/**/*",
+          "rakta.config.ts"
+        ],
+        exclude: ["node_modules", "dist"]
+      }, null, 2)
+    }, {
+      path: "rakta-env.d.ts",
+      content: generateFrontendOnlyRaktaEnv()
+    });
+  }
+  return processFilesForLanguage(files, useTypeScript);
 }
 function getFullstackFrontendFiles(projectConfig) {
   const { projectName, cssFramework } = projectConfig;
   const styleFileName = cssFramework === "sass" ? "globals.scss" : "globals.css";
-  const files = [
+  return [
     {
       path: "frontend/package.json",
       content: JSON.stringify({
@@ -2594,11 +2577,9 @@ function getFullstackFrontendFiles(projectConfig) {
           typecheck: "tsc --noEmit"
         },
         dependencies: {
-          raktajs: "^0.1.7",
+          raktajs: "^0.1.9",
           react: "^19.2.7",
           "react-dom": "^19.2.7",
-          "react-icons": "^5.2.1",
-          motion: "^12.0.0",
           ...getCssDependencies(cssFramework)
         },
         devDependencies: {
@@ -2636,7 +2617,7 @@ export default defineRaktaConfig({
   appName: "${projectName}",
   seo: {
     defaultTitle: "${DEFAULT_METADATA_TITLE}",
-    defaultDescription: "Built with Rakta.js \u2014 Small in size. Fierce in speed. Alive in every route.",
+    defaultDescription: "Built with Rakta.js \xE2\u20AC\u201D Small in size. Fierce in speed. Alive in every route.",
   },
   render: {
     defaultMode: "csr",
@@ -2892,7 +2873,7 @@ export type UserSchema = typeof userSchema;
     },
     {
       path: `frontend/styles/${styleFileName}`,
-      content: getCssGlobals(cssFramework)
+      content: getFrontendOnlyCssGlobals(cssFramework)
     },
     {
       path: "frontend/public/.gitkeep",
@@ -2903,46 +2884,35 @@ export type UserSchema = typeof userSchema;
       content: FAVICON_BYTES
     },
     {
-      path: "frontend/components/ComponentsModal.tsx",
-      content: COMPONENTS_MODAL_CODE
-    },
-    {
-      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/ui/.gitkeep",
+      content: ""
     },
     {
-      path: "frontend/components/ShrimpCharacter.tsx",
-      content: SHRIMP_CHARACTER_CODE
+      path: "frontend/components/layout/.gitkeep",
+      content: ""
     }
   ];
-  return processFilesForLanguage(files, projectConfig.useTypeScript);
+}
+function stripTypeScriptSyntax(code) {
+  return code.replace(/^import\s+type\s+.+;\r?\n/gm, "").replace(/^export\s+interface\s+\w+\s*\{[\s\S]*?\r?\n\}\r?\n/gm, "").replace(/^interface\s+\w+\s*\{[\s\S]*?\r?\n\}\r?\n/gm, "").replace(/^export\s+type\s+\w+\s*=[\s\S]*?;\r?\n/gm, "").replace(/^type\s+\w+\s*=[\s\S]*?;\r?\n/gm, "").replace(/<("[^"]+"|'[^']+'|\w+)(\s*\|\s*("[^"]+"|'[^']+'|\w+))*\s*>/g, "").replace(/\s+as\s+const/g, "").replace(/\s+as\s+[A-Za-z0-9_<>,[\]\s|&".']+/g, "").replace(/\breadonly\s+/g, "").replace(/(\(|,|\{)\s*([A-Za-z_$][\w$]*)\s*:\s*[A-Za-z_$][\w$]*(?:\[\])?(?:\s*\|\s*[A-Za-z_$][\w$]*(?:\[\])?)*/g, "$1 $2").replace(/\)\s*:\s*(?:void|string|number|boolean|Promise<[^>]+>|[A-Za-z_$][\w$]*(?:\[\])?)/g, ")").replace(/(const|let)\s+([A-Za-z_$][\w$]*)\s*:\s*[^=;]+=/g, "$1 $2 =");
 }
 function processFilesForLanguage(files, useTypeScript) {
-  if (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 files.filter((file) => !file.path.endsWith(".d.ts")).map((file) => {
+    if (typeof file.content !== "string") {
+      return file;
     }
-    return file;
+    let path = file.path;
+    if (path.endsWith(".tsx"))
+      path = path.replace(/\.tsx$/, ".jsx");
+    else if (path.endsWith(".ts"))
+      path = path.replace(/\.ts$/, ".js");
+    return {
+      path,
+      content: stripTypeScriptSyntax(file.content)
+    };
   });
 }
 function getBackendFiles(projectConfig) {
@@ -3367,430 +3337,98 @@ function getCssDevDependencies(cssFramework) {
   }
 }
 function getFrontendOnlyCssGlobals(cssFramework) {
-  const cssImport = cssFramework === "tailwind" ? `@import "tailwindcss";
+  const cssImport = cssFramework === "tailwind" ? `@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700;800&display=swap");
+@import "tailwindcss";
 
 ` : cssFramework === "bootstrap" ? `@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css");
 
-` : cssFramework === "sass" ? `$color-primary: #dc2626;
+` : cssFramework === "sass" ? `$color-primary: #e11d48;
 $color-background: #050505;
-$color-foreground: #f8fafc;
+$color-foreground: #fafafa;
 
 ` : "";
-  return `${cssImport}:root {
-  --color-primary: #dc2626;
-  --color-background: #050505;
-  --color-foreground: #f8fafc;
-  --color-surface: #0e111a;
-  --color-border: rgba(255, 255, 255, 0.1);
-  --color-muted: #94a3b8;
-  color-scheme: dark;
+  return `${cssImport}@theme {
+  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
+  --color-brand-pink: #e11d48;
+  --color-brand-green: #00ff00;
+  --color-surface-bg: #000000;
+  --color-surface-card: #0d0d0d;
+  --color-surface-stroke: #1f1f1f;
 }
 
-html {
-  scroll-behavior: smooth;
+:root {
+  color-scheme: dark;
+  background: #050505;
+  color: #fafafa;
+  font-family: var(--font-sans);
 }
 
+* { box-sizing: border-box; }
+html { scroll-behavior: smooth; }
 body {
   margin: 0;
   min-width: 320px;
   min-height: 100vh;
-  color: var(--color-foreground);
-  background: var(--color-background);
-  font-family:
-    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, sans-serif;
+  background: #050505;
+  color: #fafafa;
+  overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
 }
+button, a { font: inherit; }
+a { color: inherit; text-decoration: none; }
+#rakta-root { min-height: 100vh; }
 
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-@keyframes shrimpLegs {
-  0% {
-    transform: translateY(0);
-  }
-
-  50% {
-    transform: translateY(2px);
-  }
-}
-
-#rakta-root {
-  min-height: 100vh;
-}
-
-main {
-  width: min(1120px, calc(100% - 32px));
-  min-height: 100vh;
-  margin: 0 auto;
-  padding: 56px 0;
-}
-
-section {
-  margin: 0 0 24px;
-  border: 1px solid rgba(248, 113, 113, 0.18);
-  border-radius: 18px;
-  background:
-    linear-gradient(135deg, rgba(220, 38, 38, 0.16), transparent 34%),
-    #0e111a;
-  box-shadow: 0 24px 80px rgba(127, 29, 29, 0.2);
-  padding: clamp(24px, 4vw, 44px);
-}
-
-p {
-  margin: 0 0 12px;
-  color: #cbd5e1;
-  line-height: 1.7;
-}
-
-h1,
-h2 {
-  margin: 0 0 12px;
-  color: #ffffff;
-  line-height: 1;
-}
-
-h1 {
-  max-width: 760px;
-  font-size: clamp(42px, 8vw, 84px);
-  letter-spacing: 0;
-}
-
-h2 {
-  font-size: clamp(28px, 4vw, 44px);
-}
-
-click {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 42px;
-  margin: 16px 12px 0 0;
-  border: 1px solid rgba(248, 113, 113, 0.42);
-  border-radius: 12px;
-  padding: 0 16px;
-  color: #fecaca;
-  font-weight: 700;
-  text-decoration: none;
-  cursor: pointer;
-  transition:
-    transform 160ms ease,
-    border-color 160ms ease,
-    background 160ms ease;
-}
-
-click:hover {
-  border-color: #f87171;
-  background: rgba(220, 38, 38, 0.12);
-  transform: translateY(-1px);
-}
-
-button {
-  font: inherit;
-}
-
-.relative {
-  position: relative;
-}
-
-.absolute {
-  position: absolute;
-}
-
-.inset-0 {
-  inset: 0;
-}
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: #000000; }
+::-webkit-scrollbar-thumb { background: #e11d48; border-radius: 0; }
+::-webkit-scrollbar-thumb:hover { background: #be123c; }
 
-.bottom-0 {
-  bottom: 0;
+@keyframes scanline {
+  0% { transform: translateY(-100%); }
+  100% { transform: translateY(100vh); }
 }
-
-.left-0 {
+.scanline {
+  position: fixed;
+  top: 0;
   left: 0;
-}
-
-.top-2 {
-  top: 8px;
-}
-
-.right-3 {
-  right: 12px;
-}
-
-.block {
-  display: block;
-}
-
-.flex {
-  display: flex;
-}
-
-.flex-col {
-  flex-direction: column;
-}
-
-.flex-wrap {
-  flex-wrap: wrap;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.items-start {
-  align-items: flex-start;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.gap-2 {
-  gap: 8px;
-}
-
-.gap-4 {
-  gap: 16px;
-}
-
-.gap-8 {
-  gap: 32px;
-}
-
-.w-full {
+  z-index: 999;
   width: 100%;
-}
-
-.max-w-full {
-  max-width: 100%;
-}
-
-.overflow-hidden {
-  overflow: hidden;
-}
-
-.select-none {
-  user-select: none;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.text-left {
-  text-align: left;
-}
-
-.text-sm {
-  font-size: 14px;
-}
-
-.text-lg {
-  font-size: 18px;
-}
-
-.text-xl {
-  font-size: 20px;
-}
-
-.font-bold {
-  font-weight: 800;
-}
-
-.font-semibold {
-  font-weight: 700;
-}
-
-.font-mono {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-}
-
-.text-white {
-  color: #fff;
-}
-
-.text-slate-400 {
-  color: #94a3b8;
-}
-
-.text-red-600 {
-  color: #dc2626;
-}
-
-.bg-red-600 {
-  background: #dc2626;
-}
-
-.bg-black\\/75 {
-  background: rgba(0, 0, 0, 0.75);
-}
-
-.pointer-events-none {
+  height: 120px;
   pointer-events: none;
+  background: linear-gradient(0deg, rgba(225, 29, 72, 0.08) 0%, rgba(225, 29, 72, 0) 100%);
+  opacity: 0.8;
+  animation: scanline 8s linear infinite;
 }
 
-.rounded-sm {
-  border-radius: 2px;
-}
-
-.rounded-lg {
-  border-radius: 8px;
-}
-
-.min-h-5 {
-  min-height: 20px;
-}
-
-.tabular-nums {
-  font-variant-numeric: tabular-nums;
-}
-
-button[aria-label^="ShrimpRun"] {
-  border: 2px solid rgba(248, 113, 113, 0.28);
-  border-radius: 16px;
-  background:
-    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(7, 10, 18, 0.98)),
-    radial-gradient(circle at 18% 22%, rgba(248, 113, 113, 0.16), transparent 30%);
-  box-shadow:
-    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
-    0 20px 60px rgba(0, 0, 0, 0.28);
-}
-
-button[aria-label^="ShrimpRun"] > .bottom-0.left-0 {
-  background: linear-gradient(90deg, #7f1d1d, #dc2626, #fecaca);
-}
-
-button:not([aria-label]) {
-  border: 0;
-  border-radius: 10px;
-  background: #dc2626;
-  color: #fff;
-  cursor: pointer;
-  font-weight: 800;
-}
-
-.shrimp-sprite {
-  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.32));
+.bg-grid-glow {
+  background-size: 40px 40px;
+  background-image:
+    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
 }
 
-.shrimp-run-obstacle {
-  border-radius: 8px 8px 2px 2px;
-  background:
-    radial-gradient(circle at 50% 8px, #fecaca 0 4px, transparent 5px),
-    linear-gradient(135deg, #fb7185 0%, #dc2626 46%, #7f1d1d 100%);
-  box-shadow:
-    inset -6px -8px 0 rgba(69, 10, 10, 0.32),
-    0 0 0 2px rgba(254, 202, 202, 0.18);
+@keyframes seaweed-wave-1 {
+  0% { transform: skewX(-14deg) rotate(-8deg) scaleY(0.96); }
+  50% { transform: skewX(0deg) rotate(0deg) scaleY(1.04); }
+  100% { transform: skewX(14deg) rotate(8deg) scaleY(0.96); }
 }
-
-.shrimp-run-obstacle::before,
-.shrimp-run-obstacle::after {
-  position: absolute;
-  bottom: 8px;
-  width: 10px;
-  height: 22px;
-  border-radius: 999px 999px 4px 4px;
-  background: #ef4444;
-  content: "";
-}
-
-.shrimp-run-obstacle::before {
-  left: -7px;
-  transform: rotate(-18deg);
-}
-
-.shrimp-run-obstacle::after {
-  right: -7px;
-  transform: rotate(18deg);
-}
-
-@media (max-width: 720px) {
-  main {
-    width: min(100% - 20px, 1120px);
-    padding: 24px 0;
-  }
-
-  section {
-    padding: 20px;
-  }
-}
-`;
-}
-function getCssGlobals(cssFramework) {
-  const sharedBase = `
-:root {
-  --color-primary: #dc2626;
-  --color-background: #050505;
-  --color-foreground: #f8fafc;
-}
-
-* {
-  box-sizing: border-box;
+@keyframes seaweed-wave-2 {
+  0% { transform: skewX(10deg) rotate(6deg) scaleY(1.04); }
+  50% { transform: skewX(-2deg) rotate(-2deg) scaleY(0.96); }
+  100% { transform: skewX(-10deg) rotate(-6deg) scaleY(1.04); }
 }
-
-body {
-  margin: 0;
-  color: var(--color-foreground);
-  background: var(--color-background);
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-}
-
-.page-shell {
-  width: min(100% - 2rem, 960px);
-  margin: 0 auto;
-  padding: 4rem 0;
-}
-
-.hero-card,
-.feature-card {
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  background: #0e111a;
-  border-radius: 24px;
-  padding: 2rem;
-  margin-bottom: 1.5rem;
-}
-
-.eyebrow {
-  color: #dc2626;
-  font-weight: 700;
-  letter-spacing: 0.12em;
-  font-size: 0.75rem;
-  text-transform: uppercase;
-}
-
-.button-row {
-  display: flex;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-  margin-top: 1rem;
-}
-
-a {
-  color: #dc2626;
+.seaweed-waving-left-1,
+.seaweed-waving-right-1 {
+  transform-origin: bottom center !important;
+  animation: seaweed-wave-1 3.2s infinite ease-in-out alternate !important;
 }
-
-button {
-  cursor: pointer;
+.seaweed-waving-left-2,
+.seaweed-waving-right-2 {
+  transform-origin: bottom center !important;
+  animation: seaweed-wave-2 3.8s infinite ease-in-out alternate !important;
 }
 `;
-  switch (cssFramework) {
-    case "tailwind":
-      return `@import "tailwindcss";
-${sharedBase}`;
-    case "bootstrap":
-      return `@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css");
-${sharedBase}`;
-    case "sass":
-      return `$color-primary: #dc2626;
-$color-background: #050505;
-$color-foreground: #f8fafc;
-${sharedBase}`;
-    case "none":
-      return sharedBase;
-  }
 }
 function generateFrontendOnlyRaktaEnv() {
   return `declare module "*.css";
@@ -3810,17 +3448,6 @@ declare global {
       click: RaktaClickAttributes;
     }
   }
-
-  const useCallback: typeof import("react").useCallback;
-  const useEffect: typeof import("react").useEffect;
-  const useRef: typeof import("react").useRef;
-  const useState: typeof import("react").useState;
-
-  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" {
@@ -3864,7 +3491,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
 `;
 }
 function generateFrontendOnlyPage(_projectName) {
-  return WELCOME_PAGE_CODE;
+  return STARTER_PAGE_CODE;
 }
 function generateFrontendOnlyLoading() {
   return `export default function Loading() {
@@ -3934,8 +3561,27 @@ function generateFrontendOnlyNotFound() {
 }
 `;
 }
-function generateFullstackHomePage(_projectName) {
-  return WELCOME_PAGE_CODE;
+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 \xE2\u20AC\u201D 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 getDatabaseDependencies(selectedDatabase) {
   switch (selectedDatabase) {
@@ -4136,7 +3782,7 @@ function generateProjectReadme(projectConfig) {
   if (projectMode === "frontend-only") {
     return `# ${projectName}
 
-Built with Rakta.js \u2014 Small in size. Fierce in speed. Alive in every route.
+Built with Rakta.js \xE2\u20AC\u201D Small in size. Fierce in speed. Alive in every route.
 
 ## Stack
 
@@ -4155,12 +3801,12 @@ bun run dev
 
 ## ShrimpRun
 
-Your starter includes ShrimpRun \u2014 an interactive game where a shrimp dodges obstacles. Press Space or click to jump!
+Your starter includes ShrimpRun \xE2\u20AC\u201D an interactive game where a shrimp dodges obstacles. Press Space or click to jump!
 `;
   }
   return `# ${projectName}
 
-Built with Rakta.js \u2014 Small in size. Fierce in speed. Alive in every route.
+Built with Rakta.js \xE2\u20AC\u201D Small in size. Fierce in speed. Alive in every route.
 
 ## Stack
 
@@ -4249,13 +3895,6 @@ 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:",
@@ -4282,6 +3921,24 @@ async function promptCssFramework() {
   });
   return getPromptValue(promptResult);
 }
+async function promptProjectLanguage() {
+  const promptResult = await select({
+    message: "Choose a language:",
+    options: [
+      {
+        value: "typescript",
+        label: PROJECT_LANGUAGE_DISPLAY.typescript,
+        hint: "recommended"
+      },
+      {
+        value: "javascript",
+        label: PROJECT_LANGUAGE_DISPLAY.javascript
+      }
+    ],
+    initialValue: "typescript"
+  });
+  return getPromptValue(promptResult);
+}
 async function promptRenderMode() {
   const promptResult = await select({
     message: "Choose a render mode:",
@@ -4394,13 +4051,15 @@ async function promptDatabase() {
 }
 async function runPrompts(projectName) {
   const projectMode = await promptProjectMode();
-  const useTypeScript = await promptTypeScript();
+  const language = await promptProjectLanguage();
   const cssFramework = await promptCssFramework();
   const renderMode = await promptRenderMode();
+  const useTypeScript = language === "typescript";
   if (projectMode === "frontend-only") {
     return {
       projectName,
       projectMode,
+      language,
       useTypeScript,
       cssFramework,
       renderMode,
@@ -4413,6 +4072,7 @@ async function runPrompts(projectName) {
   return {
     projectName,
     projectMode,
+    language,
     useTypeScript,
     cssFramework,
     renderMode,
@@ -4449,6 +4109,7 @@ function formatFrontendOnlyCommands(projectName) {
 }
 function printSuccessMessage(projectConfig) {
   const modeLabel = PROJECT_MODE_DISPLAY[projectConfig.projectMode];
+  const languageLabel = PROJECT_LANGUAGE_DISPLAY[projectConfig.language];
   const cssLabel = CSS_DISPLAY[projectConfig.cssFramework];
   const renderLabel = RENDER_MODE_DISPLAY[projectConfig.renderMode];
   const isFullstack = projectConfig.projectMode === "fullstack";
@@ -4459,6 +4120,7 @@ function printSuccessMessage(projectConfig) {
       ${import_picocolors.default.bold(import_picocolors.default.green("Project created!"))}
 
       ${import_picocolors.default.dim("Mode:")}    ${modeLabel}
+      ${import_picocolors.default.dim("Lang:")}    ${languageLabel}
       ${import_picocolors.default.dim("CSS:")}     ${cssLabel}
       ${import_picocolors.default.dim("Render:")}  ${renderLabel}
       ${backendLine}
@@ -4506,4 +4168,4 @@ Error: ${errorMessage}
   process.exit(1);
 });
 
-//# debugId=2E17890E5DBF1B0764756E2164756E21
+//# debugId=AC42DEC47A292C4F64756E2164756E21