Delete src

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,619 +0,0 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react';
-import { 
-  Activity, 
-  Settings, 
-  Play, 
-  Square, 
-  Trash2, 
-  Layers, 
-  Cpu, 
-  Zap, 
-  Plus, 
-  Info,
-  Database,
-  Move,
-  Maximize,
-  Search,
-  ZoomIn,
-  ZoomOut
-} from 'lucide-react';
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
-
-// --- BLOCK DEFINITIONS ---
-const BLOCK_TYPES = {
-  INPUT: { 
-    id: 'INPUT', 
-    label: 'Data In', 
-    category: 'IO', 
-    color: 'bg-emerald-500', 
-    outputs: 1, 
-    inputs: 0,
-    config: { batchSize: 32, seqLen: 128, vocabSize: 5000 }
-  },
-  EMBED: { 
-    id: 'EMBED', 
-    label: 'Embedding', 
-    category: 'Core', 
-    color: 'bg-blue-500', 
-    outputs: 1, 
-    inputs: 1,
-    config: { dim: 512 }
-  },
-  ATTN: { 
-    id: 'ATTN', 
-    label: 'Attention', 
-    category: 'Core', 
-    color: 'bg-indigo-600', 
-    outputs: 1, 
-    inputs: 1,
-    config: { heads: 8, headDim: 64, dropout: 0.1 }
-  },
-  FFN: { 
-    id: 'FFN', 
-    label: 'Feed Forward', 
-    category: 'Core', 
-    color: 'bg-blue-600', 
-    outputs: 1, 
-    inputs: 1,
-    config: { mult: 4, dropout: 0.1 }
-  },
-  NORM: { 
-    id: 'NORM', 
-    label: 'Layer Norm', 
-    category: 'Core', 
-    color: 'bg-slate-500', 
-    outputs: 1, 
-    inputs: 1,
-    config: { eps: 1e-5 }
-  },
-  LSTM: { 
-    id: 'LSTM', 
-    label: 'LSTM', 
-    category: 'RNN', 
-    color: 'bg-amber-500', 
-    outputs: 1, 
-    inputs: 1,
-    config: { hidden: 512, layers: 1 }
-  },
-  MAMBA: { 
-    id: 'MAMBA', 
-    label: 'Mamba (SSM)', 
-    category: 'Modern', 
-    color: 'bg-purple-600', 
-    outputs: 1, 
-    inputs: 1,
-    config: { d_state: 16, d_conv: 4, expand: 2 }
-  },
-  RWKV: { 
-    id: 'RWKV', 
-    label: 'RWKV', 
-    category: 'Modern', 
-    color: 'bg-fuchsia-600', 
-    outputs: 1, 
-    inputs: 1,
-    config: { mode: 'v5', head_size: 64 }
-  },
-  RESIDUAL: { 
-    id: 'RESIDUAL', 
-    label: 'Residual +', 
-    category: 'Utility', 
-    color: 'bg-cyan-500', 
-    outputs: 1, 
-    inputs: 2,
-    config: {}
-  },
-  OUTPUT: { 
-    id: 'OUTPUT', 
-    label: 'Data Out', 
-    category: 'IO', 
-    color: 'bg-red-500', 
-    outputs: 0, 
-    inputs: 1,
-    config: { loss: 'CrossEntropy' }
-  }
-};
-
-const App = () => {
-  // State for Blocks and Connections
-  const [nodes, setNodes] = useState([
-    { id: 'n1', type: 'INPUT', x: 50, y: 150, config: BLOCK_TYPES.INPUT.config },
-    { id: 'n2', type: 'EMBED', x: 250, y: 150, config: BLOCK_TYPES.EMBED.config },
-    { id: 'n3', type: 'OUTPUT', x: 450, y: 150, config: BLOCK_TYPES.OUTPUT.config },
-  ]);
-  const [connections, setConnections] = useState([
-    { id: 'c1', from: 'n1', to: 'n2' },
-    { id: 'c2', from: 'n2', to: 'n3' }
-  ]);
-  
-  // UI & Viewport State
-  const [viewOffset, setViewOffset] = useState({ x: 0, y: 0 });
-  const [zoom, setZoom] = useState(1);
-  const [isPanning, setIsPanning] = useState(false);
-  const [panStart, setPanStart] = useState({ x: 0, y: 0 });
-  
-  const [selectedNodeId, setSelectedNodeId] = useState(null);
-  const [isTraining, setIsTraining] = useState(false);
-  const [trainingData, setTrainingData] = useState([]);
-  const [learningRate, setLearningRate] = useState(0.001);
-  const [isDraggingNode, setIsDraggingNode] = useState(null);
-  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
-  const [connectingFrom, setConnectingFrom] = useState(null);
-  
-  const canvasRef = useRef(null);
-
-  // --- SIMULATION ENGINE ---
-  const runTrainingStep = (epoch) => {
-    const hasInput = nodes.some(n => n.type === 'INPUT');
-    const hasOutput = nodes.some(n => n.type === 'OUTPUT');
-    if (!hasInput || !hasOutput) return null;
-
-    let capacity = 0;
-    let vanishingGradientRisk = 1.0;
-    
-    nodes.forEach(n => {
-      if (n.type === 'EMBED') capacity += (n.config.dim || 512) * 0.1;
-      if (n.type === 'ATTN') capacity += (n.config.heads * n.config.headDim) * 0.5;
-      if (n.type === 'FFN') capacity += (n.config.mult * 512) * 0.3;
-      if (n.type === 'LSTM') {
-        capacity += (n.config.hidden || 512) * 0.4;
-        vanishingGradientRisk *= 0.85;
-      }
-      if (n.type === 'NORM') vanishingGradientRisk = Math.min(1.0, vanishingGradientRisk + 0.2);
-      if (n.type === 'RESIDUAL') vanishingGradientRisk = Math.min(1.0, vanishingGradientRisk + 0.3);
-    });
-
-    const trainability = Math.max(0.1, (capacity / 500) * vanishingGradientRisk);
-    const noise = (Math.random() - 0.5) * 0.05;
-    const lrFactor = learningRate > 0.01 ? (0.5 + Math.random()) : 1.0;
-    
-    const baseLoss = 8.0;
-    const decay = 0.05 * trainability * (1 / lrFactor);
-    const loss = baseLoss * Math.exp(-decay * epoch) + (0.2 / (epoch + 1)) + noise;
-    const acc = Math.min(0.99, 1 - (loss / baseLoss) + (Math.random() * 0.02));
-
-    return {
-      epoch,
-      loss: Math.max(0, loss).toFixed(4),
-      accuracy: Math.max(0, acc).toFixed(4)
-    };
-  };
-
-  useEffect(() => {
-    let interval;
-    if (isTraining) {
-      interval = setInterval(() => {
-        setTrainingData(prev => {
-          const nextEpoch = prev.length;
-          if (nextEpoch > 150) { setIsTraining(false); return prev; }
-          const step = runTrainingStep(nextEpoch);
-          return [...prev, step];
-        });
-      }, 150);
-    }
-    return () => clearInterval(interval);
-  }, [isTraining, nodes, connections, learningRate]);
-
-  // --- INTERACTION HANDLERS ---
-  const handleWheel = (e) => {
-    e.preventDefault();
-    const zoomSpeed = 0.001;
-    const newZoom = Math.min(Math.max(zoom - e.deltaY * zoomSpeed, 0.2), 2);
-    setZoom(newZoom);
-  };
-
-  const addNode = (type) => {
-    const newNode = {
-      id: `n${Date.now()}`,
-      type,
-      // Place node relative to current view center and zoom
-      x: (-viewOffset.x + 100) / zoom,
-      y: (-viewOffset.y + 100) / zoom,
-      config: { ...BLOCK_TYPES[type].config }
-    };
-    setNodes([...nodes, newNode]);
-  };
-
-  const deleteNode = (id) => {
-    setNodes(nodes.filter(n => n.id !== id));
-    setConnections(connections.filter(c => c.from !== id && c.to !== id));
-    if (selectedNodeId === id) setSelectedNodeId(null);
-  };
-
-  const deleteConnection = (id) => {
-    setConnections(connections.filter(c => c.id !== id));
-  };
-
-  const handleCanvasMouseDown = (e) => {
-    if (e.target === canvasRef.current || e.target.tagName === 'svg' || e.target.id === 'grid-background') {
-      setIsPanning(true);
-      setPanStart({ x: e.clientX - viewOffset.x, y: e.clientY - viewOffset.y });
-      setSelectedNodeId(null);
-    }
-  };
-
-  const handleNodeMouseDown = (e, id) => {
-    e.stopPropagation();
-    if (connectingFrom) return;
-    setIsDraggingNode(id);
-    const node = nodes.find(n => n.id === id);
-    // Dragging logic needs to account for zoom
-    setDragOffset({ x: e.clientX / zoom - node.x, y: e.clientY / zoom - node.y });
-    setSelectedNodeId(id);
-  };
-
-  const handleMouseMove = (e) => {
-    if (isDraggingNode) {
-      setNodes(nodes.map(n => n.id === isDraggingNode ? { ...n, x: e.clientX / zoom - dragOffset.x, y: e.clientY / zoom - dragOffset.y } : n));
-    } else if (isPanning) {
-      setViewOffset({
-        x: e.clientX - panStart.x,
-        y: e.clientY - panStart.y
-      });
-    }
-  };
-
-  const handleMouseUp = () => {
-    setIsDraggingNode(null);
-    setIsPanning(false);
-  };
-
-  const startConnection = (e, id) => {
-    e.stopPropagation();
-    setConnectingFrom(id);
-  };
-
-  const endConnection = (e, id) => {
-    e.stopPropagation();
-    if (connectingFrom && connectingFrom !== id) {
-      if (!connections.some(c => c.from === connectingFrom && c.to === id)) {
-        setConnections([...connections, { id: `c${Date.now()}`, from: connectingFrom, to: id }]);
-      }
-    }
-    setConnectingFrom(null);
-  };
-
-  const updateConfig = (key, val) => {
-    setNodes(nodes.map(n => n.id === selectedNodeId ? { ...n, config: { ...n.config, [key]: val } } : n));
-  };
-
-  const resetView = () => {
-    setViewOffset({ x: 0, y: 0 });
-    setZoom(1);
-  };
-
-  const selectedNode = nodes.find(n => n.id === selectedNodeId);
-
-  // Calculated properties for infinite grid
-  const gridSize = 24 * zoom;
-  const gridOffsetX = viewOffset.x % gridSize;
-  const gridOffsetY = viewOffset.y % gridSize;
-
-  return (
-    <div className="flex flex-col h-screen w-screen bg-slate-950 text-slate-100 overflow-hidden font-sans">
-      {/* Header */}
-      <header className="h-16 border-b border-slate-800 flex items-center justify-between px-6 bg-slate-900/50 backdrop-blur-md z-20">
-        <div className="flex items-center gap-3">
-          <div className="p-2 bg-indigo-500 rounded-lg">
-            <Layers size={20} className="text-white" />
-          </div>
-          <h1 className="text-lg font-bold tracking-tight">Arch-Sim <span className="text-slate-500 font-normal">v1.2</span></h1>
-        </div>
-        
-        <div className="flex items-center gap-4">
-          <div className="flex items-center bg-slate-800 rounded-full px-4 py-1.5 gap-3 border border-slate-700">
-            <span className="text-xs text-slate-400 uppercase font-semibold">LR</span>
-            <input 
-              type="range" 
-              min="0.0001" 
-              max="0.05" 
-              step="0.0001" 
-              value={learningRate} 
-              onChange={(e) => setLearningRate(parseFloat(e.target.value))}
-              className="w-24 accent-indigo-500"
-            />
-            <span className="text-xs font-mono w-12">{learningRate}</span>
-          </div>
-          
-          <button 
-            onClick={() => {
-              if (isTraining) setIsTraining(false);
-              else {
-                setTrainingData([]);
-                setIsTraining(true);
-              }
-            }}
-            className={`flex items-center gap-2 px-5 py-2 rounded-lg font-medium transition-all ${
-              isTraining ? 'bg-red-500 hover:bg-red-600' : 'bg-emerald-500 hover:bg-emerald-600'
-            }`}
-          >
-            {isTraining ? <><Square size={16} fill="currentColor" /> Stop</> : <><Play size={16} fill="currentColor" /> Start Training</>}
-          </button>
-        </div>
-      </header>
-
-      <main className="flex-1 flex overflow-hidden">
-        {/* Sidebar: Blocks Palette */}
-        <aside className="w-64 border-r border-slate-800 bg-slate-900/30 p-4 flex flex-col gap-6 overflow-y-auto z-10">
-          <div>
-            <h3 className="text-xs font-bold text-slate-500 uppercase tracking-widest mb-4">Components</h3>
-            <div className="grid grid-cols-1 gap-2">
-              {Object.entries(BLOCK_TYPES).map(([key, type]) => (
-                <button
-                  key={key}
-                  onClick={() => addNode(key)}
-                  className="flex items-center gap-3 p-3 rounded-xl border border-slate-800 bg-slate-900/50 hover:border-indigo-500/50 hover:bg-slate-800/50 transition-all text-left group"
-                >
-                  <div className={`w-8 h-8 rounded-lg ${type.color} flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform`}>
-                    <Cpu size={14} />
-                  </div>
-                  <div>
-                    <div className="text-sm font-semibold">{type.label}</div>
-                    <div className="text-[10px] text-slate-500 uppercase">{type.category}</div>
-                  </div>
-                  <Plus size={14} className="ml-auto text-slate-600 group-hover:text-indigo-400" />
-                </button>
-              ))}
-            </div>
-          </div>
-        </aside>
-
-        {/* Canvas Area */}
-        <div 
-          className="flex-1 relative bg-slate-950 overflow-hidden cursor-grab active:cursor-grabbing outline-none"
-          onMouseDown={handleCanvasMouseDown}
-          onMouseMove={handleMouseMove}
-          onMouseUp={handleMouseUp}
-          onWheel={handleWheel}
-          ref={canvasRef}
-        >
-          {/* Infinite Dot Grid Background */}
-          <div 
-            id="grid-background"
-            className="absolute inset-0 pointer-events-none"
-            style={{ 
-              backgroundImage: `radial-gradient(circle, #1e293b 1px, transparent 1px)`,
-              backgroundSize: `${gridSize}px ${gridSize}px`,
-              backgroundPosition: `${gridOffsetX}px ${gridOffsetY}px`
-            }}
-          />
-
-          {/* Viewport Transform Container */}
-          <div 
-            className="absolute inset-0 pointer-events-none"
-            style={{ 
-              transform: `translate(${viewOffset.x}px, ${viewOffset.y}px) scale(${zoom})`,
-              transformOrigin: '0 0'
-            }}
-          >
-            {/* Connections SVG */}
-            <svg className="absolute inset-0 w-[10000px] h-[10000px] pointer-events-auto overflow-visible">
-              <defs>
-                <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
-                  <path d="M 0 0 L 10 5 L 0 10 z" fill="#6366f1" />
-                </marker>
-              </defs>
-              {connections.map(conn => {
-                const fromNode = nodes.find(n => n.id === conn.from);
-                const toNode = nodes.find(n => n.id === conn.to);
-                if (!fromNode || !toNode) return null;
-                
-                const x1 = fromNode.x + 160;
-                const y1 = fromNode.y + 40;
-                const x2 = toNode.x;
-                const y2 = toNode.y + 40;
-                const dx = (x2 - x1) / 2;
-                
-                return (
-                  <g key={conn.id} className="group cursor-pointer">
-                    <path
-                      d={`M ${x1} ${y1} C ${x1 + dx} ${y1}, ${x2 - dx} ${y2}, ${x2} ${y2}`}
-                      stroke="transparent"
-                      strokeWidth={20 / zoom} // Adjust hit area based on zoom
-                      fill="none"
-                      onClick={(e) => { e.stopPropagation(); deleteConnection(conn.id); }}
-                    />
-                    <path
-                      d={`M ${x1} ${y1} C ${x1 + dx} ${y1}, ${x2 - dx} ${y2}, ${x2} ${y2}`}
-                      stroke="#6366f1"
-                      strokeWidth={3}
-                      strokeDasharray={isTraining ? "8 4" : "0"}
-                      className={`${isTraining ? "animate-[dash_1s_linear_infinite]" : ""} group-hover:stroke-red-500 transition-colors`}
-                      fill="none"
-                      markerEnd="url(#arrow)"
-                      opacity="0.6"
-                    />
-                  </g>
-                );
-              })}
-            </svg>
-
-            {/* Nodes */}
-            {nodes.map(node => {
-              const type = BLOCK_TYPES[node.type];
-              const isSelected = selectedNodeId === node.id;
-              return (
-                <div
-                  key={node.id}
-                  style={{ left: node.x, top: node.y }}
-                  onMouseDown={(e) => handleNodeMouseDown(e, node.id)}
-                  className={`absolute w-40 p-4 rounded-xl border-2 transition-shadow cursor-move select-none pointer-events-auto ${
-                    isSelected ? 'border-indigo-500 bg-slate-800 shadow-[0_0_25px_rgba(99,102,241,0.2)]' : 'border-slate-800 bg-slate-900/90'
-                  }`}
-                >
-                  <div className="flex justify-between items-start mb-2">
-                    <div className={`w-8 h-8 rounded-lg ${type.color} flex items-center justify-center shadow-lg mb-2`}>
-                       <Cpu size={14} />
-                    </div>
-                    {isSelected && (
-                      <button onClick={(e) => { e.stopPropagation(); deleteNode(node.id); }} className="text-slate-500 hover:text-red-400">
-                        <Trash2 size={14} />
-                      </button>
-                    )}
-                  </div>
-                  
-                  <h4 className="text-xs font-bold uppercase tracking-wide truncate">{type.label}</h4>
-                  <div className="text-[10px] text-slate-500 mb-4">{node.id}</div>
-
-                  {/* Input Port */}
-                  {type.inputs > 0 && (
-                    <div 
-                      onMouseUp={(e) => endConnection(e, node.id)}
-                      className={`absolute -left-3 top-1/2 -translate-y-1/2 w-6 h-6 rounded-full bg-slate-800 border-2 ${connectingFrom ? 'border-yellow-400 animate-pulse' : 'border-indigo-500'} flex items-center justify-center hover:bg-indigo-500 cursor-pointer z-30`}
-                    >
-                      <div className="w-1.5 h-1.5 bg-white rounded-full" />
-                    </div>
-                  )}
-                  {/* Output Port */}
-                  {type.outputs > 0 && (
-                    <div 
-                      onMouseDown={(e) => startConnection(e, node.id)}
-                      className="absolute -right-3 top-1/2 -translate-y-1/2 w-6 h-6 rounded-full bg-slate-800 border-2 border-indigo-500 flex items-center justify-center hover:bg-indigo-500 cursor-pointer z-30"
-                    >
-                      <div className="w-1.5 h-1.5 bg-white rounded-full" />
-                    </div>
-                  )}
-                </div>
-              );
-            })}
-          </div>
-
-          {/* Navigation Controls Overlay */}
-          <div className="absolute bottom-6 left-6 flex flex-col gap-2 z-20">
-            <div className="flex gap-2">
-              <button 
-                onClick={resetView}
-                className="p-3 bg-slate-900 border border-slate-700 rounded-lg hover:bg-slate-800 transition-colors shadow-xl text-slate-400 flex items-center gap-2"
-                title="Reset View"
-              >
-                <Maximize size={18} />
-                <span className="text-[10px] font-bold uppercase tracking-widest">{Math.round(zoom * 100)}%</span>
-              </button>
-              <button 
-                onClick={() => setZoom(prev => Math.min(prev + 0.1, 2))}
-                className="p-3 bg-slate-900 border border-slate-700 rounded-lg hover:bg-slate-800 transition-colors shadow-xl text-slate-400"
-              >
-                <ZoomIn size={18} />
-              </button>
-              <button 
-                onClick={() => setZoom(prev => Math.max(prev - 0.1, 0.2))}
-                className="p-3 bg-slate-900 border border-slate-700 rounded-lg hover:bg-slate-800 transition-colors shadow-xl text-slate-400"
-              >
-                <ZoomOut size={18} />
-              </button>
-            </div>
-            <div className="p-3 bg-slate-900/80 border border-slate-700 rounded-lg shadow-xl text-[10px] text-slate-400 flex items-center gap-2">
-              <Search size={14} /> Scroll to zoom, Drag background to pan
-            </div>
-          </div>
-        </div>
-
-        {/* Right Sidebar: Config & Monitoring */}
-        <aside className="w-80 border-l border-slate-800 bg-slate-900/50 flex flex-col z-10">
-          <div className="h-1/2 p-6 flex flex-col border-b border-slate-800">
-            <div className="flex items-center gap-2 mb-4 text-slate-400 uppercase text-xs font-bold tracking-widest">
-              <Activity size={14} /> Training Metrics
-            </div>
-            
-            <div className="flex-1 bg-slate-900 rounded-xl p-2 border border-slate-800 overflow-hidden">
-              {trainingData.length > 0 ? (
-                <ResponsiveContainer width="100%" height="100%">
-                  <LineChart data={trainingData}>
-                    <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" />
-                    <XAxis dataKey="epoch" hide />
-                    <YAxis hide domain={[0, 'auto']} />
-                    <Tooltip 
-                      contentStyle={{ backgroundColor: '#0f172a', border: '1px solid #1e293b', borderRadius: '8px' }}
-                      itemStyle={{ color: '#6366f1' }}
-                    />
-                    <Line type="monotone" dataKey="loss" stroke="#6366f1" strokeWidth={2} dot={false} isAnimationActive={false} />
-                  </LineChart>
-                </ResponsiveContainer>
-              ) : (
-                <div className="h-full flex flex-col items-center justify-center text-slate-600 italic text-sm text-center">
-                  Simulation idle.
-                </div>
-              )}
-            </div>
-
-            <div className="mt-4 grid grid-cols-2 gap-4">
-              <div className="p-3 bg-slate-900/50 rounded-lg border border-slate-800 text-center">
-                <div className="text-[10px] uppercase text-slate-500 font-bold mb-1">Loss</div>
-                <div className="text-lg font-mono text-indigo-400">
-                  {trainingData.length > 0 ? trainingData[trainingData.length-1].loss : '0.0000'}
-                </div>
-              </div>
-              <div className="p-3 bg-slate-900/50 rounded-lg border border-slate-800 text-center">
-                <div className="text-[10px] uppercase text-slate-500 font-bold mb-1">Accuracy</div>
-                <div className="text-lg font-mono text-emerald-400">
-                  {trainingData.length > 0 ? `${(trainingData[trainingData.length-1].accuracy * 100).toFixed(1)}%` : '0.0%'}
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div className="h-1/2 p-6 overflow-y-auto">
-            <div className="flex items-center gap-2 mb-6 text-slate-400 uppercase text-xs font-bold tracking-widest">
-              <Settings size={14} /> {selectedNode ? 'Block Config' : 'Project Info'}
-            </div>
-
-            {selectedNode ? (
-              <div className="space-y-6">
-                <div className="flex items-center gap-3 p-3 bg-indigo-500/10 rounded-xl border border-indigo-500/20">
-                  <div className={`w-8 h-8 rounded-lg ${BLOCK_TYPES[selectedNode.type].color} flex items-center justify-center`}>
-                    <Cpu size={14} />
-                  </div>
-                  <div>
-                    <div className="font-bold text-sm">{BLOCK_TYPES[selectedNode.type].label}</div>
-                    <div className="text-[10px] text-indigo-300 font-mono uppercase">{selectedNode.id}</div>
-                  </div>
-                </div>
-
-                <div className="space-y-4">
-                  {Object.entries(selectedNode.config).map(([key, val]) => (
-                    <div key={key} className="space-y-1.5">
-                      <label className="text-[11px] font-bold text-slate-500 uppercase flex justify-between">
-                        {key} <span>{val}</span>
-                      </label>
-                      <input
-                        type={typeof val === 'number' ? 'range' : 'text'}
-                        min={1}
-                        max={1024}
-                        value={val}
-                        onChange={(e) => updateConfig(key, typeof val === 'number' ? parseInt(e.target.value) : e.target.value)}
-                        className="w-full h-1.5 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-indigo-500"
-                      />
-                    </div>
-                  ))}
-                </div>
-              </div>
-            ) : (
-              <div className="space-y-4">
-                <div className="p-4 bg-slate-800/30 rounded-xl border border-slate-700/50 text-xs text-slate-400 space-y-3">
-                  <p><strong className="text-slate-300">Navigation:</strong> Click and drag the background to pan. <span className="text-indigo-400 font-bold">Use mouse wheel to zoom.</span></p>
-                  <p><strong className="text-slate-300">Infinite Grid:</strong> The canvas background scales and repeats automatically as you navigate.</p>
-                </div>
-              </div>
-            )}
-          </div>
-        </aside>
-      </main>
-
-      <footer className="h-10 border-t border-slate-800 bg-slate-900/80 px-4 flex items-center justify-between text-[10px] text-slate-500 uppercase tracking-widest font-semibold">
-        <div className="flex gap-4">
-          <span>Blocks: {nodes.length}</span>
-          <span>Links: {connections.length}</span>
-          <span>Zoom: {(zoom * 100).toFixed(0)}%</span>
-        </div>
-        <div>Educational Arch-Sim Environment</div>
-      </footer>
-
-      <style>{`
-        @keyframes dash {
-          to { stroke-dashoffset: -12; }
-        }
-      `}</style>
-    </div>
-  );
-};
-
-export default App;

src/App.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

src/index.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/reportWebVitals.js

@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

src/setupTests.js

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';