create-rakta-app 0.1.7 → 0.1.8

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`,
@@ -1757,598 +1704,6 @@ 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));
@@ -2448,7 +1803,7 @@ dist/
 function getFrontendOnlyFiles(projectConfig) {
   const { projectName, cssFramework } = projectConfig;
   const styleFileName = cssFramework === "sass" ? "globals.scss" : "globals.css";
-  const files = [
+  return [
     {
       path: "package.json",
       content: JSON.stringify({
@@ -2464,11 +1819,9 @@ function getFrontendOnlyFiles(projectConfig) {
           typecheck: "tsc --noEmit"
         },
         dependencies: {
-          raktajs: "^0.1.7",
+          raktajs: "^0.1.8",
           react: "^19.2.7",
           "react-dom": "^19.2.7",
-          "react-icons": "^5.2.1",
-          motion: "^12.0.0",
           ...getCssDependencies(cssFramework)
         },
         devDependencies: {
@@ -2540,24 +1893,12 @@ export default defineRaktaConfig({
       content: generateFrontendOnlyNotFound()
     },
     {
-      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/raktaShrimpMascot.tsx",
+      content: generateShrimpMascotComponent()
     },
     {
-      path: "app/components/ShrimpCharacter.tsx",
-      content: SHRIMP_CHARACTER_CODE
+      path: "app/components/shrimpRunGame.tsx",
+      content: generateShrimpRunGameComponent()
     },
     {
       path: `styles/${styleFileName}`,
@@ -2572,12 +1913,11 @@ 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";
-  const files = [
+  return [
     {
       path: "frontend/package.json",
       content: JSON.stringify({
@@ -2594,11 +1934,9 @@ function getFullstackFrontendFiles(projectConfig) {
           typecheck: "tsc --noEmit"
         },
         dependencies: {
-          raktajs: "^0.1.7",
+          raktajs: "^0.1.8",
           react: "^19.2.7",
           "react-dom": "^19.2.7",
-          "react-icons": "^5.2.1",
-          motion: "^12.0.0",
           ...getCssDependencies(cssFramework)
         },
         devDependencies: {
@@ -2903,47 +2241,14 @@ 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 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 [
@@ -3816,11 +3121,8 @@ declare global {
   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;
+  const ShrimpRunGame: typeof import("./app/components/shrimpRunGame").default;
+  const RaktaShrimpMascot: typeof import("./app/components/raktaShrimpMascot").default;
 }
 
 declare module "react/jsx-runtime" {
@@ -3863,8 +3165,54 @@ export default function RootLayout({ children }: RootLayoutProps) {
 }
 `;
 }
-function generateFrontendOnlyPage(_projectName) {
-  return WELCOME_PAGE_CODE;
+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 generateFrontendOnlyLoading() {
   return `export default function Loading() {
@@ -3934,8 +3282,585 @@ function generateFrontendOnlyNotFound() {
 }
 `;
 }
-function generateFullstackHomePage(_projectName) {
-  return WELCOME_PAGE_CODE;
+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 getDatabaseDependencies(selectedDatabase) {
   switch (selectedDatabase) {
@@ -4249,13 +4174,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:",
@@ -4394,14 +4312,12 @@ 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",
@@ -4413,7 +4329,6 @@ async function runPrompts(projectName) {
   return {
     projectName,
     projectMode,
-    useTypeScript,
     cssFramework,
     renderMode,
     backendFramework,
@@ -4431,21 +4346,21 @@ function getProjectNameFromArgs(cliArgs) {
 }
 function formatFullstackCommands() {
   return [
-    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 1")}`,
+    "cd frontend",
+    "bun install",
+    "bun run dev",
     "",
-    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(`
-`);
+    `${import_picocolors.default.dim("# Terminal 2")}`,
+    "cd backend",
+    "bun install",
+    "bun run dev"
+  ].join(`
+  `);
 }
 function formatFrontendOnlyCommands(projectName) {
-  return [`cd ${projectName}`, "bun install", "bun run dev"].map((command) => `        ${import_picocolors.default.cyan(command)}`).join(`
-`);
+  return [`cd ${projectName}`, "bun install", "bun run dev"].join(`
+  `);
 }
 function printSuccessMessage(projectConfig) {
   const modeLabel = PROJECT_MODE_DISPLAY[projectConfig.projectMode];
@@ -4466,7 +4381,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")}` : ""}
@@ -4506,4 +4421,4 @@ Error: ${errorMessage}
   process.exit(1);
 });
 
-//# debugId=2E17890E5DBF1B0764756E2164756E21
+//# debugId=5A42EB5C435F19ED64756E2164756E21