flashts 1.0.0 → 1.0.2

package/client/src/components/WelcomeScreen.tsx

@@ -1,171 +0,0 @@
-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

@@ -1,142 +0,0 @@
-@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

@@ -1,10 +0,0 @@
-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

@@ -1,32 +0,0 @@
-/** @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

@@ -1,28 +0,0 @@
-{
-  "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

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

package/client/tsconfig.node.json

@@ -1,26 +0,0 @@
-{
-  "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

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

package/tmp/e656e349-2c39-4bc3-b334-6b5eb957e306/main.ts

@@ -1,2 +0,0 @@
-// Welcome to FlashTS!
-console.log("Hello from main.tssa");