flashts 1.0.0

package/client/src/components/WelcomeScreen.tsx

@@ -0,0 +1,171 @@
+import { X, Zap, Coffee, ExternalLink } from "lucide-react";
+import { createPortal } from "react-dom";
+import clsx from "clsx";
+
+interface WelcomeScreenProps {
+    isOpen: boolean;
+    onClose: () => void;
+    showOnStartup: boolean;
+    onToggleStartup: (value: boolean) => void;
+}
+
+export function WelcomeScreen({ isOpen, onClose, showOnStartup, onToggleStartup }: WelcomeScreenProps) {
+    if (!isOpen) return null;
+
+    return createPortal(
+        <div className="fixed inset-0 z-[20000] flex items-center justify-center p-4 md:p-6 overflow-y-auto">
+            {/* Background Backdrop */}
+            <div 
+                className="fixed inset-0 bg-black/80 backdrop-blur-md transition-opacity" 
+                onClick={onClose} 
+            />
+            
+            {/* Modal Content */}
+            <div className={clsx(
+                "relative w-full max-w-2xl bg-[#09090b] border border-border-color rounded-2xl shadow-2xl overflow-hidden",
+                "animate-modal my-auto flex flex-col max-h-[90vh] md:max-h-none"
+            )}>
+                {/* Header Decor */}
+                <div className="absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-transparent via-accent-primary to-transparent opacity-50" />
+                
+                <div className="p-5 md:p-8 flex flex-col h-full overflow-y-auto no-scrollbar">
+                    {/* Header */}
+                    <div className="flex justify-between items-start mb-6 md:mb-8">
+                        <div className="flex items-center gap-3 md:gap-4">
+                            <div className="h-10 w-10 md:h-14 md:w-14 rounded-xl md:rounded-2xl bg-accent-primary/10 flex-center text-accent-primary shrink-0 transition-transform hover:scale-110">
+                                <Zap size={24} className="md:w-8 md:h-8" />
+                            </div>
+                            <div>
+                                <h2 className="text-xl md:text-3xl font-black tracking-tight text-white leading-tight">
+                                    Welcome to <span className="text-accent-primary">FlashTS</span>
+                                </h2>
+                                <p className="text-text-secondary text-xs md:text-sm">Ultra-fast JavaScript/TypeScript Playground</p>
+                            </div>
+                        </div>
+                        <button 
+                            onClick={onClose}
+                            className="p-2 hover:bg-white/5 rounded-full text-text-secondary hover:text-white transition-colors shrink-0"
+                        >
+                            <X size={20} className="md:w-6 md:h-6" />
+                        </button>
+                    </div>
+
+                    {/* Features Grid */}
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-6 mb-6 md:mb-8">
+                        <FeatureCard 
+                            icon={<Zap size={18} />} 
+                            title="Bun Powered" 
+                            desc="Instant execution with Bun's runtime." 
+                            color="blue"
+                        />
+                        <FeatureCard 
+                            icon={<Coffee size={18} />} 
+                            title="Multi-File" 
+                            desc="Full project with tabbed imports." 
+                            color="orange"
+                        />
+                        <FeatureCard 
+                            icon={<Check size={18} />} 
+                            title="IntelliSense" 
+                            desc="Pro autocomplete for NPM packages." 
+                            color="green"
+                        />
+                        <FeatureCard 
+                            icon={<ExternalLink size={18} />} 
+                            title="Zero Config" 
+                            desc="Auto-setup for maximum speed." 
+                            color="purple"
+                        />
+                    </div>
+
+                    {/* Shortcuts Section - Hidden on very small screens to save space */}
+                    <div className="bg-bg-secondary/50 rounded-xl p-4 border border-border-color mb-6 md:mb-8 hidden xs:block">
+                        <h4 className="text-[10px] md:text-xs font-bold text-text-secondary uppercase tracking-widest mb-3">Key Shortcuts</h4>
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+                            <Shortcut label="Run Project" keys="Ctrl + Shift + F" />
+                            <Shortcut label="NPM Manager" keys="Ctrl + Shift + L" />
+                        </div>
+                    </div>
+
+                    {/* Footer */}
+                    <div className="flex flex-col sm:flex-row items-center justify-between gap-4 mt-auto pt-4 border-t border-white/5">
+                        <div className="flex items-center gap-3 w-full sm:w-auto">
+                            <label className="flex items-center gap-3 cursor-pointer group">
+                                <div 
+                                    onClick={() => onToggleStartup(!showOnStartup)}
+                                    className={clsx(
+                                        "w-10 h-5 md:w-12 md:h-6 rounded-full transition-all relative",
+                                        showOnStartup ? 'bg-accent-primary' : 'bg-bg-tertiary'
+                                    )}
+                                >
+                                    <div className={clsx(
+                                        "absolute top-1 left-1 w-3 h-3 md:w-4 md:h-4 rounded-full bg-white shadow-sm transition-transform",
+                                        showOnStartup ? 'translate-x-5 md:translate-x-6' : 'translate-x-0'
+                                    )} />
+                                </div>
+                                <span className="text-xs text-text-secondary group-hover:text-text-primary transition-colors font-medium select-none">Show on startup</span>
+                            </label>
+                        </div>
+                        
+                        <button 
+                            onClick={onClose}
+                            className="w-full sm:w-32 py-2.5 md:py-3 btn-primary text-sm font-bold shadow-lg shadow-accent-primary/10"
+                        >
+                            Get Started
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>,
+        document.body
+    );
+}
+
+function FeatureCard({ icon, title, desc, color }: { icon: React.ReactNode, title: string, desc: string, color: string }) {
+    const colors: Record<string, string> = {
+        blue: "bg-blue-500/10 text-blue-400",
+        orange: "bg-orange-500/10 text-orange-400",
+        green: "bg-green-500/10 text-green-400",
+        purple: "bg-purple-500/10 text-purple-400"
+    };
+    return (
+        <div className="p-3 md:p-4 rounded-xl bg-white/5 border border-white/5 flex items-start gap-3 hover:bg-white/[0.08] transition-colors group">
+            <div className={clsx("p-2 rounded-lg shrink-0 group-hover:scale-110 transition-transform", colors[color])}>
+                {icon}
+            </div>
+            <div>
+                <h4 className="font-bold text-white text-sm md:text-base mb-0.5">{title}</h4>
+                <p className="text-[10px] md:text-xs text-text-secondary leading-relaxed">{desc}</p>
+            </div>
+        </div>
+    );
+}
+
+function Shortcut({ label, keys }: { label: string, keys: string }) {
+    return (
+        <div className="flex justify-between items-center px-3 py-2 bg-black/20 rounded-lg hover:bg-black/30 transition-colors">
+            <span className="text-[10px] md:text-xs text-text-primary font-medium">{label}</span>
+            <kbd className="text-[9px] md:text-[10px] bg-bg-tertiary px-1.5 py-0.5 rounded border border-white/10 font-mono text-text-secondary shadow-sm lowercase">
+                {keys}
+            </kbd>
+        </div>
+    );
+}
+
+function Check({ size, className }: { size: number, className?: string }) {
+    return (
+        <svg 
+            width={size} 
+            height={size} 
+            viewBox="0 0 24 24" 
+            fill="none" 
+            stroke="currentColor" 
+            strokeWidth="3" 
+            strokeLinecap="round" 
+            strokeLinejoin="round" 
+            className={className}
+        >
+            <polyline points="20 6 9 17 4 12" />
+        </svg>
+    );
+}

package/client/src/index.css

@@ -0,0 +1,142 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --bg-primary: #09090b;
+  --bg-secondary: #18181b;
+  --bg-tertiary: #27272a;
+  --accent-primary: #f59e0b; /* Amber 500 */
+  --accent-glow: rgba(245, 158, 11, 0.5);
+  --text-primary: #f4f4f5;
+  --text-secondary: #a1a1aa;
+  --border-color: #27272a;
+  --font-mono:
+    "JetBrains Mono", "Fira Code", source-code-pro, Menlo, Monaco, Consolas,
+    "Courier New", monospace;
+  --font-sans:
+    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  overflow: hidden; /* App like feel */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: var(--bg-primary);
+}
+::-webkit-scrollbar-thumb {
+  background: var(--bg-tertiary);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #3f3f46;
+}
+
+/* Utility Classes */
+.glass {
+  background: rgba(24, 24, 27, 0.6);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+/* Animations */
+@keyframes glow {
+  0% {
+    box-shadow: 0 0 5px var(--accent-glow);
+  }
+  50% {
+    box-shadow: 0 0 20px var(--accent-glow);
+  }
+  100% {
+    box-shadow: 0 0 5px var(--accent-glow);
+  }
+}
+
+@keyframes modal-entrance {
+  0% {
+    opacity: 0;
+    transform: scale(0.9) translateY(20px);
+    filter: blur(10px);
+  }
+  60% {
+    transform: scale(1.02) translateY(-5px);
+    filter: blur(0);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.animate-modal {
+  animation: modal-entrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #f59e0b, #ea580c);
+  color: white;
+  border: none;
+  padding: 0.5rem 1.5rem;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.btn-primary:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px var(--accent-glow);
+}
+
+.btn-primary:active {
+  transform: translateY(0);
+}
+
+.panel-header {
+  height: 48px;
+  padding: 0 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--border-color);
+  background: var(--bg-secondary);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-secondary);
+  user-select: none;
+}

package/client/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/client/tailwind.config.js

@@ -0,0 +1,32 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        bg: {
+          primary: "var(--bg-primary)",
+          secondary: "var(--bg-secondary)",
+          tertiary: "var(--bg-tertiary)",
+        },
+        accent: {
+          primary: "var(--accent-primary)",
+          glow: "var(--accent-glow)",
+        },
+        text: {
+          primary: "var(--text-primary)",
+          secondary: "var(--text-secondary)",
+        },
+        "border-color": "var(--border-color)",
+      },
+      fontFamily: {
+        mono: "var(--font-mono)",
+        sans: "var(--font-sans)",
+      },
+    },
+  },
+  plugins: [],
+}

package/client/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/client/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/client/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/client/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "flashts",
+  "version": "1.0.0",
+  "description": "High-performance TypeScript/JavaScript Playground powered by Bun",
+  "main": "server/index.ts",
+  "bin": {
+    "flashts": "./bin/cli.ts"
+  },
+  "type": "module",
+  "scripts": {
+    "dev:client": "cd client && vite",
+    "dev:server": "cd server && bun index.ts",
+    "build": "cd client && bun run build",
+    "start": "bun bin/cli.ts"
+  },
+  "dependencies": {
+    "@hono/node-server": "^1.13.8",
+    "@monaco-editor/react": "^4.7.0",
+    "clsx": "^2.1.1",
+    "commander": "^13.1.0",
+    "framer-motion": "^12.29.0",
+    "hono": "^4.11.5",
+    "localtunnel": "^2.0.2",
+    "lucide-react": "^0.562.0",
+    "monaco-editor": "^0.55.1",
+    "open": "^10.1.0",
+    "picocolors": "^1.1.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.0",
+    "react-resizable-panels": "^4.4.1",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/bun": "latest",
+    "@types/localtunnel": "^2.0.4",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "3.4.17",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "npm:rolldown-vite@7.2.5"
+  },
+  "overrides": {
+    "vite": "npm:rolldown-vite@7.2.5"
+  },
+  "keywords": [
+    "typescript",
+    "playground",
+    "bun",
+    "hono",
+    "react",
+    "ide",
+    "cli"
+  ],
+  "author": "FlashTS Team",
+  "license": "MIT"
+}

package/server/README.md

@@ -0,0 +1,15 @@
+# server
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run index.ts
+```
+
+This project was created using `bun init` in bun v1.3.6. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.

package/server/bun.lock

@@ -0,0 +1,42 @@
+{
+  "lockfileVersion": 1,
+  "configVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "server",
+      "dependencies": {
+        "@pulse-js/core": "^0.2.2",
+        "@types/react": "^19.2.9",
+        "hono": "^4.11.5",
+        "react": "^19.2.3",
+      },
+      "devDependencies": {
+        "@types/bun": "latest",
+      },
+      "peerDependencies": {
+        "typescript": "^5",
+      },
+    },
+  },
+  "packages": {
+    "@pulse-js/core": ["@pulse-js/core@0.2.2", "", { "peerDependencies": { "typescript": "^5" } }, "sha512-iUbPPsp6UU+erfmKe7Y1wsMHmJsQImlata2HA2benjWpdHp7sC3YSBRjAyRVty5gVDx5ZewSDuA77epCIHfR8Q=="],
+
+    "@types/bun": ["@types/bun@1.3.6", "", { "dependencies": { "bun-types": "1.3.6" } }, "sha512-uWCv6FO/8LcpREhenN1d1b6fcspAB+cefwD7uti8C8VffIv0Um08TKMn98FynpTiU38+y2dUO55T11NgDt8VAA=="],
+
+    "@types/node": ["@types/node@25.0.10", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-zWW5KPngR/yvakJgGOmZ5vTBemDoSqF3AcV/LrO5u5wTWyEAVVh+IT39G4gtyAkh3CtTZs8aX/yRM82OfzHJRg=="],
+
+    "@types/react": ["@types/react@19.2.9", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-Lpo8kgb/igvMIPeNV2rsYKTgaORYdO1XGVZ4Qz3akwOj0ySGYMPlQWa8BaLn0G63D1aSaAQ5ldR06wCpChQCjA=="],
+
+    "bun-types": ["bun-types@1.3.6", "", { "dependencies": { "@types/node": "*" } }, "sha512-OlFwHcnNV99r//9v5IIOgQ9Uk37gZqrNMCcqEaExdkVq3Avwqok1bJFmvGMCkCE0FqzdY8VMOZpfpR3lwI+CsQ=="],
+
+    "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
+
+    "hono": ["hono@4.11.5", "", {}, "sha512-WemPi9/WfyMwZs+ZUXdiwcCh9Y+m7L+8vki9MzDw3jJ+W9Lc+12HGsd368Qc1vZi1xwW8BWMMsnK5efYKPdt4g=="],
+
+    "react": ["react@19.2.3", "", {}, "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA=="],
+
+    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
+
+    "undici-types": ["undici-types@7.16.0", "", {}, "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="],
+  }
+}