flashts 1.0.0 → 1.0.2

package/client/src/components/FileTabs.tsx

@@ -1,195 +0,0 @@
-import { Plus, X, FileCode, FileJson, PlusCircle } from "lucide-react";
-import { useState, useRef, useEffect } from "react";
-import { createPortal } from "react-dom";
-import clsx from "clsx";
-
-export interface ProjectFile {
-    id: string;
-    name: string;
-    content: string;
-}
-
-interface FileTabsProps {
-    files: ProjectFile[];
-    activeFileId: string;
-    onSelect: (id: string) => void;
-    onAdd: (name: string) => void;
-    onClose: (id: string) => void;
-    onRename: (id: string, newName: string) => void;
-}
-
-export function FileTabs({ files, activeFileId, onSelect, onAdd, onClose, onRename }: FileTabsProps) {
-    const [editingId, setEditingId] = useState<string | null>(null);
-    const [editValue, setEditValue] = useState("");
-    const [isAdding, setIsAdding] = useState(false);
-    const [newName, setNewName] = useState("");
-    
-    const inputRef = useRef<HTMLInputElement>(null);
-    const addInputRef = useRef<HTMLInputElement>(null);
-    const containerRef = useRef<HTMLDivElement>(null);
-
-    const activeFile = files.find(f => f.id === activeFileId);
-    const activeLanguage = activeFile?.name.endsWith('.ts') || activeFile?.name.endsWith('.tsx') ? 'TypeScript' : 'JavaScript';
-
-    const handleStartRename = (e: React.MouseEvent, file: ProjectFile) => {
-        e.stopPropagation();
-        setEditingId(file.id);
-        setEditValue(file.name);
-    };
-
-    const handleConfirmRename = () => {
-        if (editingId && editValue.trim()) {
-            let validatedName = editValue.trim();
-            if (!validatedName.includes('.')) validatedName += '.ts';
-            onRename(editingId, validatedName);
-        }
-        setEditingId(null);
-    };
-
-    const handleConfirmAdd = () => {
-        if (newName.trim()) {
-            let validatedName = newName.trim();
-            if (!validatedName.includes('.')) validatedName += '.ts';
-            onAdd(validatedName);
-        }
-        setIsAdding(false);
-        setNewName("");
-    };
-
-    const handleKeyDown = (e: React.KeyboardEvent, type: 'rename' | 'add') => {
-        if (e.key === 'Enter') type === 'rename' ? handleConfirmRename() : handleConfirmAdd();
-        if (e.key === 'Escape') type === 'rename' ? setEditingId(null) : setIsAdding(false);
-    };
-
-    useEffect(() => {
-        if (editingId && inputRef.current) {
-            inputRef.current.focus();
-            inputRef.current.select();
-        }
-    }, [editingId]);
-
-    useEffect(() => {
-        if (isAdding && addInputRef.current) {
-            addInputRef.current.focus();
-        }
-    }, [isAdding]);
-
-    return (
-        <div className="flex items-center bg-bg-secondary w-full border-b border-border-color h-11 group/tabs overflow-hidden">
-            <div 
-                ref={containerRef}
-                className="flex items-center overflow-x-auto no-scrollbar flex-1 h-full scroll-smooth select-none px-2 gap-1"
-            >
-                {files.map((file) => (
-                    <div
-                        key={file.id}
-                        data-id={file.id}
-                        onClick={() => onSelect(file.id)}
-                        onDoubleClick={(e) => handleStartRename(e, file)}
-                        className={clsx(
-                            "flex items-center gap-2 px-3 h-8 rounded-t-lg cursor-pointer transition-[background-color,color] relative group flex-shrink-0 mt-2 outline-none select-none",
-                            file.id === activeFileId 
-                                ? "bg-bg-primary text-accent-primary border-x border-t border-border-color" 
-                                : "text-text-secondary hover:bg-white/5 hover:text-text-primary border-x border-t border-transparent"
-                        )}
-                    >
-                        {file.name.endsWith('.json') ? <FileJson size={14} className="opacity-70" /> : <FileCode size={14} className="opacity-70" />}
-                        
-                        {editingId === file.id ? (
-                            <input
-                                ref={inputRef}
-                                value={editValue}
-                                onChange={(e) => setEditValue(e.target.value)}
-                                onBlur={handleConfirmRename}
-                                onKeyDown={(e) => handleKeyDown(e, 'rename')}
-                                className="bg-bg-tertiary text-white text-xs px-1 rounded outline-none w-24 border border-accent-primary/50"
-                                onClick={e => e.stopPropagation()}
-                            />
-                        ) : (
-                            <span className="text-xs font-medium truncate max-w-[120px]">
-                                {file.name}
-                            </span>
-                        )}
-
-                        {files.length > 1 && (
-                            <button
-                                onClick={(e) => {
-                                    e.stopPropagation();
-                                    onClose(file.id);
-                                }}
-                                className={clsx(
-                                    "p-0.5 hover:bg-red-500/20 rounded text-text-secondary hover:text-red-400 transition-opacity",
-                                    file.id === activeFileId ? "opacity-100" : "opacity-0 group-hover:opacity-100"
-                                )}
-                                title="Close file"
-                            >
-                                <X size={12} />
-                            </button>
-                        )}
-                    </div>
-                ))}
-
-                <button 
-                    onClick={() => setIsAdding(true)}
-                    className="p-1.5 ml-1 rounded-lg text-text-secondary hover:text-accent-primary hover:bg-white/5 transition-colors mt-2"
-                    title="New File"
-                >
-                    <Plus size={16} />
-                </button>
-            </div>
-
-            {/* Language Label */}
-            <div className="px-4 h-full flex items-center border-l border-border-color bg-bg-secondary hidden md:flex">
-                <span className="text-[10px] font-bold uppercase tracking-widest text-text-secondary opacity-50">
-                    {activeLanguage}
-                </span>
-            </div>
-
-            {/* New File Modal */}
-            {isAdding && createPortal(
-                <div className="fixed inset-0 z-[10000] flex items-center justify-center bg-black/60 backdrop-blur-sm" onClick={() => setIsAdding(false)}>
-                    <div 
-                        className="w-full max-w-sm bg-bg-secondary border border-border-color rounded-xl shadow-2xl p-6 overflow-hidden"
-                        onClick={e => e.stopPropagation()}
-                    >
-                        <div className="flex items-center gap-3 mb-4">
-                            <div className="p-2 rounded-lg bg-accent-primary/10 text-accent-primary">
-                                <PlusCircle size={24} />
-                            </div>
-                            <div>
-                                <h3 className="text-lg font-bold text-white">Create New File</h3>
-                                <p className="text-xs text-text-secondary">Enter a name ending in .ts or .js</p>
-                            </div>
-                        </div>
-
-                        <input 
-                            ref={addInputRef}
-                            type="text"
-                            placeholder="e.g. utils.ts"
-                            className="w-full bg-bg-primary border border-border-color rounded-lg px-4 py-3 text-white outline-none focus:border-accent-primary transition-colors mb-6"
-                            value={newName}
-                            onChange={e => setNewName(e.target.value)}
-                            onKeyDown={(e) => handleKeyDown(e, 'add')}
-                        />
-
-                        <div className="flex gap-3">
-                            <button 
-                                onClick={() => setIsAdding(false)}
-                                className="flex-1 px-4 py-2 rounded-lg bg-white/5 hover:bg-white/10 text-white font-medium transition-colors"
-                            >
-                                Cancel
-                            </button>
-                            <button 
-                                onClick={handleConfirmAdd}
-                                className="flex-1 btn-primary justify-center"
-                            >
-                                Create
-                            </button>
-                        </div>
-                    </div>
-                </div>,
-                document.body
-            )}
-        </div>
-    );
-}

package/client/src/components/LightningLogo.tsx

@@ -1,33 +0,0 @@
-export const LightningLogo = ({ size = 24, className = "" }: { size?: number, className?: string }) => (
-  <svg
-    width={size}
-    height={size}
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <path
-      d="M13 3L4 14H11L9 21L18 10H11L13 3Z"
-      stroke="url(#paint0_linear)"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      fill="url(#paint0_linear)"
-      fillOpacity="0.2"
-    />
-    <defs>
-      <linearGradient
-        id="paint0_linear"
-        x1="4"
-        y1="3"
-        x2="18"
-        y2="21"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="#facc15" /> {/* Yellow 400 */}
-        <stop offset="1" stopColor="#fb923c" /> {/* Orange 400 */}
-      </linearGradient>
-    </defs>
-  </svg>
-);

package/client/src/components/PackageInstaller.tsx

@@ -1,300 +0,0 @@
-
-import { useState, useEffect, useRef } from "react";
-import { createPortal } from "react-dom";
-import { Package, Search, Download, X, Loader2, Trash2, Check, Shield } from "lucide-react";
-import clsx from "clsx";
-
-interface NpmPackage {
-    package: {
-        name: string;
-        version: string;
-        description: string;
-    }
-}
-
-interface PackageInstallerProps {
-    dependencies: Record<string, string>;
-    onRefresh: () => void;
-}
-const BASE_DEPS = ["hono", "react", "@types/react"];
-
-export function PackageInstaller({ dependencies, onRefresh }: PackageInstallerProps) {
-    const [isOpen, setIsOpen] = useState(false);
-    const [query, setQuery] = useState("");
-    const [results, setResults] = useState<NpmPackage[]>([]);
-    const [isSearching, setIsSearching] = useState(false);
-    const [installing, setInstalling] = useState<string | null>(null);
-    const [uninstalling, setUninstalling] = useState<string | null>(null);
-    const [selectedIndex, setSelectedIndex] = useState(0);
-    const inputRef = useRef<HTMLInputElement>(null);
-    const listRef = useRef<HTMLDivElement>(null);
-
-    // Focus input when opened
-    useEffect(() => {
-        if (isOpen) {
-            setTimeout(() => inputRef.current?.focus(), 50);
-            onRefresh();
-        } else {
-            setQuery("");
-            setResults([]);
-        }
-    }, [isOpen]);
-
-    // Debounced search
-    useEffect(() => {
-        if (!query) {
-            setResults([]);
-            return;
-        }
-
-        const timer = setTimeout(async () => {
-            setIsSearching(true);
-            try {
-                const res = await fetch(`/search?q=${encodeURIComponent(query)}`);
-                const data = await res.json();
-                setResults(data.objects || []);
-                setSelectedIndex(0);
-            } catch (e) {
-                console.error(e);
-            } finally {
-                setIsSearching(false);
-            }
-        }, 300);
-
-        return () => clearTimeout(timer);
-    }, [query]);
-
-    // Global Hotkey for Package Manager (Ctrl + Shift + L)
-    useEffect(() => {
-        const handleGlobalKeyDown = (e: KeyboardEvent) => {
-            if ((e.ctrlKey || e.metaKey) && e.shiftKey && (e.key === 'l' || e.key === 'L')) {
-                e.preventDefault();
-                setIsOpen(prev => !prev);
-            }
-        };
-        window.addEventListener("keydown", handleGlobalKeyDown);
-        return () => window.removeEventListener("keydown", handleGlobalKeyDown);
-    }, []);
-
-    // Keyboard navigation (when open)
-    useEffect(() => {
-        if (!isOpen) return;
-
-        const handleKeyDown = (e: KeyboardEvent) => {
-            if (e.key === "ArrowDown") {
-                setSelectedIndex(i => Math.min(i + 1, results.length - 1));
-                e.preventDefault();
-            } else if (e.key === "ArrowUp") {
-                setSelectedIndex(i => Math.max(i - 1, 0));
-                e.preventDefault();
-            } else if (e.key === "Enter") {
-                if (results[selectedIndex]) {
-                    installPackage(results[selectedIndex].package.name);
-                }
-            } else if (e.key === "Escape") {
-                setIsOpen(false);
-            }
-        };
-
-        window.addEventListener("keydown", handleKeyDown);
-        return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [isOpen, results, selectedIndex]);
-
-    const installPackage = async (name: string) => {
-        if (installing) return;
-        setInstalling(name);
-        try {
-            const res = await fetch("/install", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ package: name })
-            });
-            const data = await res.json();
-            if (data.success) {
-                await onRefresh();
-                setIsOpen(false);
-            } else {
-                alert(`Failed to install ${name}: ${data.output}`);
-            }
-        } catch (e) {
-            alert("Installation request failed");
-        } finally {
-            setInstalling(null);
-        }
-    };
-
-    const uninstallPackage = async (name: string) => {
-        if (uninstalling) return;
-        setUninstalling(name);
-        try {
-            const res = await fetch("/uninstall", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ package: name })
-            });
-            const data = await res.json();
-            if (data.success) {
-                await onRefresh();
-            } else {
-                alert(`Failed to uninstall ${name}: ${data.output}`);
-            }
-        } catch (e) {
-            alert("Uninstallation request failed");
-        } finally {
-            setUninstalling(null);
-        }
-    };
-
-    return (
-        <>
-            <button 
-                onClick={() => setIsOpen(true)}
-                className="flex items-center gap-2 px-3 py-1.5 hover:bg-white/10 rounded-lg text-text-secondary hover:text-accent-primary transition-all active:scale-95 outline-none"
-                title="Install NPM Package (Ctrl + Shift + L)"
-            >
-                <Package size={18} />
-                <span className="text-[10px] font-bold uppercase tracking-wider">NPM Packages</span>
-            </button>
-
-            {isOpen && createPortal(
-                <div className="fixed inset-0 z-[9999] flex items-start justify-center pt-24 bg-black/50 backdrop-blur-sm" onClick={() => setIsOpen(false)}>
-                    <div 
-                        className="w-[600px] bg-[#1e1e20] border border-border-color rounded-xl shadow-2xl overflow-hidden flex flex-col max-h-[500px]"
-                        onClick={e => e.stopPropagation()}
-                    >
-                        {/* Search Header */}
-                        <div className="p-4 border-b border-white/5 flex items-center gap-3">
-                            <Search className="text-text-secondary" size={20} />
-                            <input 
-                                ref={inputRef}
-                                type="text"
-                                className="bg-transparent border-none outline-none text-white flex-1 text-lg placeholder:text-white/20"
-                                placeholder="Search NPM packages..."
-                                value={query}
-                                onChange={e => setQuery(e.target.value)}
-                            />
-                            {isSearching && <Loader2 className="animate-spin text-accent-primary" size={20} />}
-                            <button onClick={() => setIsOpen(false)} className="text-text-secondary hover:text-white">
-                                <X size={20} />
-                            </button>
-                        </div>
-
-                        {/* Results List */}
-                        <div className="flex-1 overflow-y-auto p-2" ref={listRef}>
-                            {/* Search Results */}
-                            {query && (
-                                <>
-                                    <div className="px-3 py-2 text-xs font-bold text-text-secondary uppercase tracking-wider">Search Results</div>
-                                    {results.length === 0 && !isSearching && (
-                                        <div className="text-center py-4 text-text-secondary">No packages found</div>
-                                    )}
-                                    {results.map((pkg, idx) => (
-                                        <div 
-                                            key={pkg.package.name}
-                                            className={clsx(
-                                                "p-3 rounded-lg flex items-center justify-between cursor-pointer group transition-all",
-                                                idx === selectedIndex ? "bg-accent-primary text-white" : "hover:bg-white/5 text-text-primary"
-                                            )}
-                                            onMouseEnter={() => setSelectedIndex(idx)}
-                                            onClick={() => !dependencies[pkg.package.name] && installPackage(pkg.package.name)}
-                                        >
-                                            <div className="flex-1 min-w-0 mr-4">
-                                                <div className="flex items-center gap-2 font-medium">
-                                                    <span>{pkg.package.name}</span>
-                                                    <span className={clsx("text-xs px-1.5 py-0.5 rounded bg-black/20", idx === selectedIndex ? "text-white/80" : "text-text-secondary")}>v{pkg.package.version}</span>
-                                                </div>
-                                                <p className={clsx("text-sm truncate", idx === selectedIndex ? "text-white/80" : "text-text-secondary")}>
-                                                    {pkg.package.description}
-                                                </p>
-                                            </div>
-                                            
-                                            {installing === pkg.package.name ? (
-                                                <div className={clsx(
-                                                    "p-2 rounded-md",
-                                                    idx === selectedIndex ? "bg-white/20" : "bg-white/10"
-                                                )}>
-                                                    <Loader2 className="animate-spin" size={18} />
-                                                </div>
-                                            ) : dependencies[pkg.package.name] ? (
-                                                <div className="flex items-center gap-2">
-                                                    <Check size={16} className={clsx(idx === selectedIndex ? "text-white" : "text-green-500")} />
-                                                    <span className={clsx(
-                                                        "text-[10px] font-bold uppercase tracking-wider px-2 py-1 rounded",
-                                                        idx === selectedIndex ? "bg-white/20 text-white" : "bg-white/5 text-text-secondary"
-                                                    )}>
-                                                        Installed
-                                                    </span>
-                                                </div>
-                                            ) : (
-                                                <button 
-                                                    onClick={(e) => { e.stopPropagation(); installPackage(pkg.package.name); }}
-                                                    className={clsx(
-                                                        "p-2 rounded-md transition-colors",
-                                                        "opacity-0 group-hover:opacity-100",
-                                                        idx === selectedIndex ? "bg-white/20 hover:bg-white/30" : "bg-white/10 hover:bg-white/20"
-                                                    )}
-                                                >
-                                                    <Download size={18} />
-                                                </button>
-                                            )}
-                                        </div>
-                                    ))}
-                                    <div className="h-px bg-white/5 my-2" />
-                                </>
-                            )}
-
-                            {/* Installed Dependencies */}
-                            <div className="px-3 py-2 text-xs font-bold text-text-secondary uppercase tracking-wider">Installed Packages</div>
-                            {Object.keys(dependencies).length === 0 ? (
-                                <div className="text-center py-4 text-xs text-text-secondary">No packages installed</div>
-                            ) : (
-                                Object.entries(dependencies).map(([name, version]) => (
-                                    <div 
-                                        key={name}
-                                        className="p-3 rounded-lg flex items-center justify-between hover:bg-white/5 text-text-primary group transition-all"
-                                    >
-                                        <div className="flex-1 min-w-0 mr-4">
-                                            <div className="flex items-center gap-2 font-medium">
-                                                <span>{name}</span>
-                                                <span className="text-xs px-1.5 py-0.5 rounded bg-black/20 text-text-secondary">{typeof version === 'string' ? version : 'latest'}</span>
-                                            </div>
-                                        </div>
-                                        
-                                        {!BASE_DEPS.includes(name) ? (
-                                            <button 
-                                                onClick={() => uninstallPackage(name)}
-                                                disabled={!!uninstalling}
-                                                className="p-2 rounded-md bg-red-500/10 hover:bg-red-500/20 text-red-500 opacity-0 group-hover:opacity-100 transition-all disabled:opacity-50"
-                                                title="Uninstall"
-                                            >
-                                                {uninstalling === name ? (
-                                                    <Loader2 className="animate-spin" size={18} />
-                                                ) : (
-                                                    <Trash2 size={18} />
-                                                )}
-                                            </button>
-                                        ) : (
-                                            <div className="flex items-center gap-2 px-2 py-1 rounded bg-white/5">
-                                                <Shield size={12} className="text-accent-primary/60" />
-                                                <span className="text-[10px] font-bold uppercase tracking-tight text-text-secondary opacity-60">
-                                                    Core
-                                                </span>
-                                            </div>
-                                        )}
-                                    </div>
-                                ))
-                            )}
-                        </div>
-                        
-                        {/* Footer */}
-                        <div className="p-2 border-t border-white/5 bg-black/20 flex justify-between px-4 text-xs text-text-secondary">
-                           <span><span className="font-bold">Enter</span> to install</span>
-                           <span><span className="font-bold">↑↓</span> to navigate</span>
-                        </div>
-                    </div>
-                </div>,
-                document.body
-            )}
-        </>
-    );
-}