create-rakta-app 0.1.9 → 0.2.0

package/dist/index.js

@@ -1686,7 +1686,7 @@ var STARTER_AUDIO_CODE = `let audioContext: AudioContext | null = null;
 function getAudioContext(): AudioContext | null {
   if (typeof window === "undefined") return null;
 
-  const AudioContextCtor = window.AudioContext ?? window.webkitAudioContext;
+  const AudioContextCtor = window.AudioContext;
   if (!AudioContextCtor) return null;
 
   audioContext ??= new AudioContextCtor();
@@ -1882,9 +1882,10 @@ export default function CoralObstacle({
 }
 `;
 var STARTER_PAGE_CODE = `import { useCallback, useEffect, useRef, useState } from "react";
+import type { IconType } from "react-icons";
 import {
   LuActivity,
-  LuCode2,
+  LuCode,
   LuCpu,
   LuGauge,
   LuRocket,
@@ -1898,6 +1899,8 @@ import { playJumpSound, playScoreSound } from "./utils/audio";
 
 type GameStatus = "IDLE" | "SWIMMING" | "JUMPING" | "DEAD";
 type SimSpeed = "NORMAL" | "FAST" | "TURBO";
+type StatusCard = { title: string; text: string; Icon: IconType };
+type FeatureCard = { number: string; title: string; text: string; Icon: IconType };
 
 const GAME_WIDTH = 720;
 const GAME_HEIGHT = 280;
@@ -1912,6 +1915,18 @@ function getSpeedValue(speed: SimSpeed): number {
   return 5.2;
 }
 
+const statusCards: StatusCard[] = [
+  { title: "Routing", text: "File-based routes with fast client navigation", Icon: LuZap },
+  { title: "Metadata", text: "Default title, favicon, and SEO shell included", Icon: LuShieldCheck },
+  { title: "Runtime", text: "Bun-powered dev server on localhost:3000", Icon: LuCpu },
+];
+
+const featureCards: FeatureCard[] = [
+  { number: "01", title: "HOT RELOAD", text: "Pages, components, styles, layouts, stores, and route updates refresh immediately.", Icon: LuActivity },
+  { number: "02", title: "REACT ICONS", text: "Starter icons use react-icons/lu only. No lucide-react dependency ships.", Icon: LuCode },
+  { number: "03", title: "LOCAL FIRST", text: "The CLI prints and serves localhost:3000 for the frontend starter.", Icon: LuGauge },
+];
+
 export default function WelcomePage() {
   const [status, setStatus] = useState<GameStatus>("IDLE");
   const [score, setScore] = useState(0);
@@ -2070,10 +2085,10 @@ export default function WelcomePage() {
   const obstaclePos = "BOTTOM" as const;
 
   return (
-    <div className="min-h-screen bg-[#050505] text-white">
+    <div className="rakta-welcome 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">
+      <main className="rakta-shell mx-auto flex w-full max-w-7xl flex-col gap-10 px-6 py-8 md:px-10">
+        <nav className="rakta-nav 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
@@ -2087,7 +2102,7 @@ export default function WelcomePage() {
           </div>
         </nav>
 
-        <section className="grid min-h-[540px] items-center gap-10 border-b border-surface-stroke py-12 md:grid-cols-[1.08fr_0.92fr]">
+        <section className="rakta-hero grid min-h-[540px] items-center gap-10 border-b border-surface-stroke py-12 md:grid-cols-[1.08fr_0.92fr]">
           <div>
             <p className="mb-5 font-mono text-[11px] font-bold uppercase tracking-[0.32em] text-brand-pink">
               THE RED ROUTER FRAMEWORK
@@ -2099,7 +2114,7 @@ export default function WelcomePage() {
               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">
+            <div className="rakta-actions 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"
@@ -2111,19 +2126,15 @@ export default function WelcomePage() {
                 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" />
+                <LuCode className="h-4 w-4" />
                 Start Building
               </a>
             </div>
           </div>
 
-          <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">
+          <div className="rakta-status-grid grid gap-3 border border-surface-stroke bg-surface-card p-5">
+            {statusCards.map(({ title, text, Icon }) => (
+              <div key={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>
@@ -2134,13 +2145,9 @@ export default function WelcomePage() {
           </div>
         </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">
+        <section id="features" className="rakta-feature-grid grid grid-cols-1 gap-0 border border-surface-stroke md:grid-cols-3">
+          {featureCards.map(({ number, title, text, Icon }) => (
+            <div key={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>
@@ -2149,7 +2156,7 @@ export default function WelcomePage() {
           ))}
         </section>
 
-        <section id="shrimprun" className="grid gap-5">
+        <section id="shrimprun" className="rakta-game-section grid gap-5">
           <div>
             <p className="font-mono text-[10px] font-bold uppercase tracking-[0.28em] text-brand-pink">
               SHRIMPRUN SIMULATION
@@ -2162,7 +2169,7 @@ export default function WelcomePage() {
           <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"
+            className="rakta-game-field 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" />
@@ -2210,7 +2217,7 @@ export default function WelcomePage() {
             )}
           </button>
 
-          <div className="flex flex-col justify-between gap-4 font-mono text-[10px] text-zinc-500 md:flex-row md:items-center">
+          <div className="rakta-game-controls 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>
@@ -2269,7 +2276,7 @@ export default function WelcomePage() {
           )}
         </section>
 
-        <section id="start" className="border-t border-surface-stroke py-10">
+        <section id="start" className="rakta-start 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>
@@ -2449,7 +2456,7 @@ function getFrontendOnlyFiles(projectConfig) {
           ...useTypeScript ? { typecheck: "tsc --noEmit" } : {}
         },
         dependencies: {
-          raktajs: "^0.1.9",
+          raktajs: "^0.2.0",
           react: "^19.2.7",
           "react-dom": "^19.2.7",
           "react-icons": "^5.7.0",
@@ -2577,7 +2584,7 @@ function getFullstackFrontendFiles(projectConfig) {
           typecheck: "tsc --noEmit"
         },
         dependencies: {
-          raktajs: "^0.1.9",
+          raktajs: "^0.2.0",
           react: "^19.2.7",
           "react-dom": "^19.2.7",
           ...getCssDependencies(cssFramework)
@@ -2894,13 +2901,13 @@ export type UserSchema = typeof userSchema;
   ];
 }
 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 =");
+  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(/\)\s*:\s*[^({=>]+(?=\s*\{)/g, ")").replace(/\}\s*:\s*[A-Za-z_$][\w$]*(?=\s*\))/g, "}").replace(/(const|let)\s+([A-Za-z_$][\w$]*)\s*:\s*[^=;]+=/g, "$1 $2 =");
 }
 function processFilesForLanguage(files, useTypeScript) {
   if (useTypeScript) {
     return files;
   }
-  return files.filter((file) => !file.path.endsWith(".d.ts")).map((file) => {
+  return files.filter((file) => !file.path.endsWith(".d.ts") && !file.path.endsWith("types.ts") && !file.path.endsWith("types.js")).map((file) => {
     if (typeof file.content !== "string") {
       return file;
     }
@@ -3379,6 +3386,146 @@ button, a { font: inherit; }
 a { color: inherit; text-decoration: none; }
 #rakta-root { min-height: 100vh; }
 
+.rakta-welcome {
+  min-height: 100vh;
+  background: #050505;
+  color: #fafafa;
+}
+.rakta-shell {
+  width: min(100% - 32px, 1280px);
+  margin: 0 auto;
+  padding: 32px 0;
+}
+.rakta-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #1f1f1f;
+  padding-bottom: 20px;
+}
+.rakta-hero {
+  display: grid;
+  min-height: 540px;
+  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
+  align-items: center;
+  gap: 40px;
+  border-bottom: 1px solid #1f1f1f;
+  padding: 48px 0;
+}
+.rakta-hero h1 {
+  max-width: 900px;
+  margin: 0;
+  color: #fff;
+  font-size: clamp(3.5rem, 8vw, 6rem);
+  font-weight: 900;
+  line-height: 0.88;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+.rakta-hero p,
+.rakta-start p {
+  color: #b5b5b5;
+}
+.rakta-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 32px;
+}
+.rakta-actions a {
+  display: inline-flex;
+  height: 44px;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid #e11d48;
+  padding: 0 20px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
+}
+.rakta-actions a:first-child {
+  background: #e11d48;
+  color: #fff;
+}
+.rakta-status-grid,
+.rakta-feature-grid {
+  display: grid;
+  gap: 12px;
+  border: 1px solid #1f1f1f;
+  background: #0d0d0d;
+  padding: 20px;
+}
+.rakta-status-grid > div,
+.rakta-feature-grid > div {
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: #000;
+  padding: 16px;
+}
+.rakta-feature-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0;
+  padding: 0;
+}
+.rakta-feature-grid > div {
+  min-height: 220px;
+  border-color: #1f1f1f;
+  padding: 28px;
+}
+.rakta-game-section {
+  display: grid;
+  gap: 20px;
+}
+.rakta-game-section h2,
+.rakta-start h2 {
+  margin: 12px 0 0;
+  font-size: clamp(2.25rem, 6vw, 4rem);
+  font-weight: 900;
+  line-height: 0.95;
+  text-transform: uppercase;
+}
+.rakta-game-field {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 280px;
+  overflow: hidden;
+  border: 2px solid #1f1f1f;
+  background: #000;
+  color: inherit;
+  cursor: pointer;
+}
+.rakta-game-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: #71717a;
+}
+.rakta-game-controls button {
+  border: 1px solid #1f1f1f;
+  padding: 4px 8px;
+  color: #a1a1aa;
+  cursor: pointer;
+}
+.rakta-start {
+  border-top: 1px solid #1f1f1f;
+  padding: 40px 0;
+}
+
+@media (max-width: 768px) {
+  .rakta-hero,
+  .rakta-feature-grid {
+    grid-template-columns: 1fr;
+  }
+  .rakta-nav > div:last-child {
+    display: none;
+  }
+}
+
 ::-webkit-scrollbar { width: 6px; height: 6px; }
 ::-webkit-scrollbar-track { background: #000000; }
 ::-webkit-scrollbar-thumb { background: #e11d48; border-radius: 0; }
@@ -4168,4 +4315,4 @@ Error: ${errorMessage}
   process.exit(1);
 });
 
-//# debugId=AC42DEC47A292C4F64756E2164756E21
+//# debugId=F17FA4C670BBE80264756E2164756E21