@doppelgangerdev/doppelganger 0.2.2

package/src/components/AuthScreen.tsx

@@ -0,0 +1,95 @@
+import { useState } from 'react';
+
+interface AuthScreenProps {
+    status: 'login' | 'setup';
+    onSubmit: (email: string, pass: string, name?: string, passConfirm?: string) => Promise<void>;
+    error: string;
+}
+
+const AuthScreen: React.FC<AuthScreenProps> = ({ status, onSubmit, error }) => {
+    const [name, setName] = useState('');
+    const [email, setEmail] = useState('');
+    const [pass, setPass] = useState('');
+    const [passConfirm, setPassConfirm] = useState('');
+
+    const handleSubmit = () => {
+        onSubmit(email, pass, name, passConfirm);
+    };
+
+    return (
+        <div className="fixed inset-0 z-[100] bg-[#020202] flex items-center justify-center">
+            <div className="absolute inset-0 opacity-[0.03] pointer-events-none"
+                style={{ backgroundImage: 'radial-gradient(#fff 1px, transparent 1px)', backgroundSize: '40px 40px' }} />
+            <div className="w-[400px] glass-card p-10 rounded-[48px] space-y-8 relative">
+                <div className="text-center space-y-2">
+                    <h1 className="text-2xl font-bold tracking-tighter text-white uppercase">Doppelganger</h1>
+                    <p className="text-[10px] font-bold text-gray-500 uppercase tracking-[0.3em]">
+                        {status === 'setup' ? 'Initializing System' : 'Access Restricted'}
+                    </p>
+                </div>
+
+                <div className="space-y-4">
+                    {status === 'setup' && (
+                        <div className="space-y-2">
+                            <label className="text-[9px] font-bold text-gray-400 uppercase tracking-[0.2em]">Name</label>
+                            <input
+                                type="text"
+                                value={name}
+                                onChange={(e) => setName(e.target.value)}
+                                placeholder="Full Name"
+                                className="w-full bg-white/[0.05] border border-white/10 rounded-2xl px-5 py-4 text-sm focus:outline-none focus:border-white/30 transition-all placeholder:text-gray-600"
+                            />
+                        </div>
+                    )}
+                    <div className="space-y-2">
+                        <label className="text-[9px] font-bold text-gray-400 uppercase tracking-[0.2em]">Email</label>
+                        <input
+                            type="email"
+                            value={email}
+                            onChange={(e) => setEmail(e.target.value)}
+                            placeholder="user@example.com"
+                            className="w-full bg-white/[0.05] border border-white/10 rounded-2xl px-5 py-4 text-sm focus:outline-none focus:border-white/30 transition-all placeholder:text-gray-600"
+                        />
+                    </div>
+                    <div className="space-y-2">
+                        <label className="text-[9px] font-bold text-gray-400 uppercase tracking-[0.2em]">Password</label>
+                        <input
+                            type="password"
+                            value={pass}
+                            onChange={(e) => setPass(e.target.value)}
+                            placeholder="••••••••"
+                            className="w-full bg-white/[0.05] border border-white/10 rounded-2xl px-5 py-4 text-sm focus:outline-none focus:border-white/30 transition-all placeholder:text-gray-600"
+                        />
+                    </div>
+                    {status === 'setup' && (
+                        <div className="space-y-2">
+                            <label className="text-[9px] font-bold text-gray-400 uppercase tracking-[0.2em]">Confirm Password</label>
+                            <input
+                                type="password"
+                                value={passConfirm}
+                                onChange={(e) => setPassConfirm(e.target.value)}
+                                placeholder="••••••••"
+                                className="w-full bg-white/[0.05] border border-white/10 rounded-2xl px-5 py-4 text-sm focus:outline-none focus:border-white/30 transition-all placeholder:text-gray-600"
+                            />
+                        </div>
+                    )}
+                </div>
+
+                <button
+                    onClick={handleSubmit}
+                    className="shine-effect w-full bg-white text-black py-4 rounded-2xl font-bold text-[10px] tracking-[0.3em] uppercase hover:scale-[1.02] active:scale-[0.98] transition-all"
+                >
+                    {status === 'setup' ? 'Create Account' : 'Authenticate'}
+                </button>
+
+                {error && (
+                    <div className="text-[9px] font-bold text-red-500 text-center uppercase tracking-widest">
+                        {error}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default AuthScreen;

package/src/components/CodeEditor.tsx

@@ -0,0 +1,70 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { highlightCode, SyntaxLanguage } from '../utils/syntaxHighlight';
+
+interface CodeEditorProps {
+    value: string;
+    onChange?: (val: string) => void;
+    language: SyntaxLanguage;
+    placeholder?: string;
+    className?: string;
+    readOnly?: boolean;
+    variables?: Record<string, any>;
+}
+
+const CodeEditor: React.FC<CodeEditorProps> = ({ value, onChange, language, placeholder, className, readOnly, variables }) => {
+    const textareaRef = useRef<HTMLTextAreaElement>(null);
+    const preRef = useRef<HTMLPreElement>(null);
+
+    const displayValue = value || placeholder || '';
+    const isPlaceholder = !value && !!placeholder;
+    const highlighted = useMemo(() => highlightCode(displayValue, language, variables), [displayValue, language, variables]);
+
+    useEffect(() => {
+        const textarea = textareaRef.current;
+        const pre = preRef.current;
+        if (!textarea || !pre) return;
+        const syncScroll = () => {
+            pre.scrollTop = textarea.scrollTop;
+            pre.scrollLeft = textarea.scrollLeft;
+        };
+        textarea.addEventListener('scroll', syncScroll);
+        return () => {
+            textarea.removeEventListener('scroll', syncScroll);
+        };
+    }, []);
+
+    return (
+        <div
+            className={`code-editor ${className || ''}`}
+            onWheel={(event) => {
+                const textarea = textareaRef.current;
+                if (!textarea) return;
+                if (textarea.scrollHeight <= textarea.clientHeight) return;
+                textarea.scrollTop += event.deltaY;
+                textarea.scrollLeft += event.deltaX;
+                textarea.focus();
+                event.preventDefault();
+            }}
+        >
+            <pre
+                ref={preRef}
+                className={`code-editor-pre ${isPlaceholder ? 'code-editor-placeholder' : ''}`}
+                aria-hidden
+                dangerouslySetInnerHTML={{ __html: highlighted }}
+            />
+            <textarea
+                ref={textareaRef}
+                value={value}
+                onChange={(e) => onChange?.(e.target.value)}
+                spellCheck={false}
+                wrap="off"
+                readOnly={readOnly}
+                className={`code-editor-textarea ${readOnly ? 'code-editor-textarea-readonly' : ''}`}
+                aria-label="Code editor"
+                tabIndex={readOnly ? -1 : 0}
+            />
+        </div>
+    );
+};
+
+export default CodeEditor;

package/src/components/DashboardScreen.tsx

@@ -0,0 +1,133 @@
+import { X, Globe, Download, Upload } from 'lucide-react';
+import { useRef } from 'react';
+import { Task } from '../types';
+
+interface DashboardScreenProps {
+    tasks: Task[];
+    onNewTask: () => void;
+    onEditTask: (task: Task) => void;
+    onDeleteTask: (id: string) => void;
+    onExportTasks: () => void;
+    onImportTasks: (file: File) => void;
+}
+
+const DashboardScreen: React.FC<DashboardScreenProps> = ({ tasks, onNewTask, onEditTask, onDeleteTask, onExportTasks, onImportTasks }) => {
+    const fileInputRef = useRef<HTMLInputElement | null>(null);
+    const getFavicon = (url: string) => {
+        try {
+            if (!url) return null;
+            const domain = new URL(url).hostname;
+            return `https://www.google.com/s2/favicons?domain=${domain}&sz=64`;
+        } catch (e) {
+            return null;
+        }
+    };
+
+    const handleImportClick = () => {
+        fileInputRef.current?.click();
+    };
+
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const file = event.target.files?.[0];
+        if (file) {
+            onImportTasks(file);
+        }
+        event.target.value = '';
+    };
+
+    return (
+        <div className="flex-1 overflow-hidden animate-in fade-in duration-500">
+            <div className="h-full flex flex-col px-12 py-12 max-w-7xl mx-auto space-y-12 w-full">
+                <div className="flex items-end justify-between">
+                    <div className="space-y-2">
+                        <p className="text-[10px] font-bold text-blue-500 uppercase tracking-[0.4em]">Status</p>
+                        <h2 className="text-4xl font-bold tracking-tighter text-white">Dashboard</h2>
+                    </div>
+                    <div className="flex items-center gap-3">
+                        <button
+                            onClick={onExportTasks}
+                            className="px-4 py-3 rounded-2xl border border-white/10 text-white text-[9px] font-bold uppercase tracking-[0.3em] hover:bg-white/5 transition-all"
+                        >
+                            <Download className="w-4 h-4 inline-block mr-2" />
+                            Export
+                        </button>
+                        <button
+                            onClick={handleImportClick}
+                            className="px-4 py-3 rounded-2xl border border-white/10 text-white text-[9px] font-bold uppercase tracking-[0.3em] hover:bg-white/5 transition-all"
+                        >
+                            <Upload className="w-4 h-4 inline-block mr-2" />
+                            Import
+                        </button>
+                        <button
+                            onClick={onNewTask}
+                            className="shine-effect bg-white text-black px-8 py-3 rounded-2xl font-bold text-[10px] tracking-[0.2em] uppercase transition-all hover:scale-105 active:scale-95"
+                        >
+                            + New Task
+                        </button>
+                        <input
+                            ref={fileInputRef}
+                            type="file"
+                            accept="application/json"
+                            className="hidden"
+                            onChange={handleFileChange}
+                        />
+                    </div>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 overflow-y-auto custom-scrollbar pb-12 pr-4">
+                    {tasks.map(task => {
+                        const favicon = getFavicon(task.url);
+                        return (
+                            <div key={task.id} className="glass-card p-8 rounded-[40px] flex flex-col gap-6 group hover:-translate-y-1">
+                                <div className="flex justify-between items-start">
+                                    <div className="w-12 h-12 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center overflow-hidden">
+                                        {favicon ? (
+                                            <img
+                                                src={favicon}
+                                                alt=""
+                                                className="w-6 h-6 object-contain"
+                                                onError={(e) => {
+                                                    (e.target as HTMLImageElement).style.display = 'none';
+                                                }}
+                                            />
+                                        ) : (
+                                            <Globe className="w-5 h-5 text-gray-500" />
+                                        )}
+                                    </div>
+                                    <div className="px-3 py-1 rounded-full bg-white/5 text-[7px] font-bold uppercase tracking-widest text-gray-500">{task.mode}</div>
+                                </div>
+                                <div>
+                                    <h3 className="text-lg font-bold text-white truncate">{task.name || 'Untitled'}</h3>
+                                    <p className="text-[10px] text-gray-600 font-mono truncate mt-1">{task.url || 'Target undefined'}</p>
+                                </div>
+                                <div className="flex gap-3 pt-4 border-t border-white/5">
+                                    <button
+                                        onClick={() => onEditTask(task)}
+                                        className="flex-1 py-2 rounded-xl bg-white text-black text-[9px] font-bold uppercase tracking-widest hover:scale-105 transition-all"
+                                    >
+                                        Edit Task
+                                    </button>
+                                    <button
+                                        onClick={() => onDeleteTask(task.id!)}
+                                        className="w-10 h-10 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center hover:bg-red-500/10 hover:text-red-500 transition-all"
+                                    >
+                                        <X className="w-4 h-4" />
+                                    </button>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+
+                {tasks.length === 0 && (
+                    <div className="flex-1 flex flex-col items-center justify-center space-y-6 opacity-20">
+                        <div className="w-20 h-20 border-2 border-dashed border-white rounded-[40px] flex items-center justify-center text-3xl">🚀</div>
+                        <p className="text-[10px] font-bold uppercase tracking-[0.3em]">No Tasks Found</p>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default DashboardScreen;