Initial commit

components/IOPanel.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+interface IOPanelProps {
+  inputs: boolean[];
+  outputs: boolean[];
+  inputNames: string[];
+  outputNames: string[];
+  onToggleInput: (index: number) => void;
+  onToggleOutput: (index: number) => void;
+}
+
+export const IOPanel: React.FC<IOPanelProps> = ({ 
+  inputs, 
+  outputs, 
+  inputNames, 
+  outputNames,
+  onToggleInput,
+  onToggleOutput
+}) => {
+  const renderBits = (
+    bits: boolean[], 
+    names: string[], 
+    colorClass: string, 
+    label: string, 
+    onToggle: (i: number) => void
+  ) => (
+    <div className="mb-6">
+      <h3 className="text-xs font-bold text-gray-400 mb-2 uppercase tracking-wider">{label}</h3>
+      <div className="grid grid-cols-4 gap-2">
+        {bits.map((isActive, i) => (
+          <div key={i} className="flex flex-col items-center group relative">
+            <button 
+              onClick={() => onToggle(i)}
+              title={`${label} ${i}: ${names[i] || 'Unnamed'}`}
+              className={`w-7 h-7 rounded-md border border-gray-700 flex items-center justify-center text-[10px] font-mono transition-all duration-150 active:scale-90 ${
+                isActive 
+                  ? `${colorClass} shadow-[0_0_10px_rgba(255,255,255,0.3)] border-transparent text-black font-bold` 
+                  : 'bg-gray-850 text-gray-500 hover:bg-gray-700'
+              }`}
+            >
+              {i}
+            </button>
+            {/* Tooltip on hover */}
+            <div className="absolute bottom-full mb-1 hidden group-hover:block z-50 bg-black text-white text-[9px] px-2 py-1 rounded border border-gray-700 whitespace-nowrap pointer-events-none">
+              {names[i] || `Port ${i}`}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="w-48 bg-gray-900 border-r border-gray-800 flex flex-col h-full p-4 z-10 shadow-xl select-none custom-scrollbar overflow-y-auto">
+      <h2 className="text-sm font-bold text-white mb-4 border-b border-gray-800 pb-2 flex items-center gap-2">
+        <div className="w-2 h-2 rounded-full bg-blue-500 animate-pulse" />
+        I/O Monitor
+      </h2>
+      
+      {renderBits(inputs, inputNames, 'bg-green-500', 'Inputs', onToggleInput)}
+      <hr className="border-gray-800 my-4" />
+      {renderBits(outputs, outputNames, 'bg-red-500', 'Outputs', onToggleOutput)}
+
+      <div className="mt-auto pt-4 text-[9px] text-gray-600 border-t border-gray-800">
+        <p className="font-bold mb-1">Interactive Panel</p>
+        <p>• Click bits to toggle state</p>
+        <p>• Hover to see port names</p>
+      </div>
+    </div>
+  );
+};

components/LadderEditor.tsx

@@ -0,0 +1,138 @@
+
+import React from 'react';
+import { Trash2, PlusCircle, Power } from 'lucide-react';
+import { IOLogicRule, LogicCondition, LogicAction } from '../types';
+
+interface LadderEditorProps {
+  logicRules: IOLogicRule[];
+  inputNames: string[];
+  outputNames: string[];
+  currentInputs: boolean[];
+  currentOutputs: boolean[];
+  onAddRule: (rule: IOLogicRule) => void;
+  onDeleteRule: (id: string) => void;
+  onUpdateRule: (id: string, updates: Partial<IOLogicRule>) => void;
+}
+
+export const LadderEditor: React.FC<LadderEditorProps> = ({
+  logicRules,
+  inputNames,
+  outputNames,
+  currentInputs,
+  currentOutputs,
+  onAddRule,
+  onDeleteRule,
+  onUpdateRule
+}) => {
+  return (
+    <div className="flex-1 bg-gray-950 flex flex-col relative overflow-hidden">
+      {/* Background Grid Pattern */}
+      <div className="absolute inset-0 opacity-[0.03] pointer-events-none" 
+        style={{ backgroundImage: 'radial-gradient(#fff 1px, transparent 1px)', backgroundSize: '24px 24px' }} />
+
+      {/* Toolbar */}
+      <div className="h-12 border-b border-gray-800 flex items-center px-6 justify-between shrink-0 bg-gray-900/50 backdrop-blur-md">
+        <h3 className="text-xs font-black uppercase tracking-widest text-gray-400">Main Controller (Ladder Logic)</h3>
+        <button 
+          onClick={() => onAddRule({
+            id: crypto.randomUUID(),
+            inputPort: 0,
+            condition: LogicCondition.IS_ON,
+            outputPort: 0,
+            action: LogicAction.SET_ON,
+            enabled: true
+          })}
+          className="flex items-center gap-2 bg-blue-600 hover:bg-blue-500 text-white px-4 py-1.5 rounded-full text-xs font-bold transition-all transform active:scale-95"
+        >
+          <PlusCircle size={14}/> Add New Rung
+        </button>
+      </div>
+
+      {/* Programming Workspace */}
+      <div className="flex-1 overflow-y-auto p-12 custom-scrollbar relative flex flex-col items-center">
+        {/* Left Bus Bar (Hot) */}
+        <div className="absolute left-10 top-0 bottom-0 w-1 bg-gradient-to-b from-red-600 via-red-500 to-red-600 shadow-[0_0_10px_rgba(239,68,68,0.5)] z-10" />
+        {/* Right Bus Bar (Neutral) */}
+        <div className="absolute right-10 top-0 bottom-0 w-1 bg-gradient-to-b from-blue-600 via-blue-500 to-blue-600 shadow-[0_0_10px_rgba(59,130,246,0.5)] z-10" />
+
+        <div className="w-full max-w-4xl space-y-12">
+          {logicRules.map((rule, index) => {
+            const inputActive = currentInputs[rule.inputPort];
+            const outputActive = currentOutputs[rule.outputPort];
+            
+            return (
+              <div key={rule.id} className="relative flex items-center group">
+                {/* Rung Number */}
+                <div className="absolute -left-12 text-[10px] font-mono text-gray-700">{(index + 1).toString().padStart(3, '0')}</div>
+                
+                {/* Delete Button */}
+                <button 
+                  onClick={() => onDeleteRule(rule.id)}
+                  className="absolute -right-16 p-2 text-gray-700 hover:text-red-500 transition-colors opacity-0 group-hover:opacity-100"
+                >
+                  <Trash2 size={16}/>
+                </button>
+
+                {/* The Rung Wire */}
+                <div className="flex-1 flex items-center h-[2px] bg-gray-800 relative">
+                  {/* Energized segments */}
+                  {inputActive && <div className="absolute left-0 w-1/2 h-full bg-green-500 shadow-[0_0_8px_#22c55e]" />}
+                  {outputActive && <div className="absolute left-1/2 right-0 h-full bg-green-500 shadow-[0_0_8px_#22c55e]" />}
+
+                  {/* Contact (Input) */}
+                  <div className="absolute left-[20%] -translate-x-1/2 flex flex-col items-center">
+                    <div className="mb-2 text-[10px] font-mono text-gray-500 text-center w-24">
+                      {inputNames[rule.inputPort] || `Input ${rule.inputPort}`}
+                    </div>
+                    <div className="relative h-12 w-12 flex items-center justify-center">
+                       {/* Terminal Brackets */}
+                       <div className="absolute left-0 w-2 h-8 border-l-4 border-gray-600 rounded-sm" />
+                       <div className="absolute right-0 w-2 h-8 border-r-4 border-gray-600 rounded-sm" />
+                       
+                       {/* Selector Area */}
+                       <select 
+                        className={`bg-gray-900 text-[10px] font-bold border-2 rounded px-1 appearance-none text-center h-6 w-8 z-10 cursor-pointer ${inputActive ? 'border-green-500 text-green-500' : 'border-gray-700 text-gray-400'}`}
+                        value={rule.inputPort}
+                        onChange={(e) => onUpdateRule(rule.id, { inputPort: parseInt(e.target.value) })}
+                       >
+                         {Array.from({length: 16}).map((_, i) => <option key={i} value={i}>{i}</option>)}
+                       </select>
+                    </div>
+                  </div>
+
+                  {/* Coil (Output) */}
+                  <div className="absolute right-[20%] translate-x-1/2 flex flex-col items-center">
+                    <div className="mb-2 text-[10px] font-mono text-gray-500 text-center w-24">
+                      {outputNames[rule.outputPort] || `Output ${rule.outputPort}`}
+                    </div>
+                    <div className="relative h-12 w-12 flex items-center justify-center">
+                       {/* Coil Brackets (Parens style) */}
+                       <div className="absolute inset-0 flex items-center justify-center">
+                          <div className={`w-8 h-8 rounded-full border-4 ${outputActive ? 'border-green-500 shadow-[0_0_15px_#22c55e]' : 'border-gray-700'}`} />
+                       </div>
+                       
+                       <select 
+                        className={`bg-gray-900 text-[10px] font-bold border-2 rounded px-1 appearance-none text-center h-6 w-8 z-10 cursor-pointer ${outputActive ? 'border-green-500 text-green-500' : 'border-gray-700 text-gray-400'}`}
+                        value={rule.outputPort}
+                        onChange={(e) => onUpdateRule(rule.id, { outputPort: parseInt(e.target.value) })}
+                       >
+                         {Array.from({length: 16}).map((_, i) => <option key={i} value={i}>{i}</option>)}
+                       </select>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+
+          {/* End of Program */}
+          <div className="flex items-center justify-center py-10 opacity-20 select-none">
+            <div className="h-[2px] w-20 bg-gray-600" />
+            <span className="mx-4 text-xs font-black tracking-widest uppercase">End of Program</span>
+            <div className="h-[2px] w-20 bg-gray-600" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

components/SceneObjects.tsx

@@ -0,0 +1,258 @@
+
+import React, { useRef } from 'react';
+import { TransformControls, Text } from '@react-three/drei';
+import * as THREE from 'three';
+import { 
+  SimObject, 
+  ObjectType, 
+  AxisObject, 
+  CylinderObject, 
+  LedObject, 
+  SwitchObject 
+} from '../types';
+
+interface ObjectProps {
+  data: SimObject;
+  isSelected: boolean;
+  isPlaying?: boolean;
+  onSelect: (id: string) => void;
+  onUpdate: (id: string, updates: Partial<SimObject>) => void;
+  onInteract?: (id: string) => void;
+}
+
+// -- Helper Material --
+const selectedMaterial = new THREE.MeshBasicMaterial({ color: '#4ade80', wireframe: true, transparent: true, opacity: 0.5 });
+
+// -- Linear Axis Component --
+export const LinearAxis: React.FC<ObjectProps> = ({ data, isSelected, isPlaying, onSelect }) => {
+  const axis = data as AxisObject;
+  const railLength = 5;
+  const normalizedPos = ((axis.currentValue - axis.min) / (axis.max - axis.min)) * railLength;
+  const safePos = isNaN(normalizedPos) ? 0 : Math.max(0, Math.min(railLength, normalizedPos));
+
+  return (
+    <group 
+      position={[axis.position.x, axis.position.y, axis.position.z]} 
+      rotation={[axis.rotation.x, axis.rotation.y, axis.rotation.z]}
+      onClick={(e) => { e.stopPropagation(); if (!isPlaying) onSelect(axis.id); }}
+    >
+      <Text position={[railLength / 2, 0.8, 0]} fontSize={0.3} color="white" anchorX="center" anchorY="bottom">
+        {axis.name} ({axis.currentValue.toFixed(1)})
+      </Text>
+
+      <mesh position={[railLength / 2, 0, 0]}>
+        <boxGeometry args={[railLength + 0.5, 0.2, 0.5]} />
+        <meshStandardMaterial color="#475569" />
+      </mesh>
+      
+      <mesh position={[safePos, 0.25, 0]}>
+        <boxGeometry args={[0.8, 0.3, 0.6]} />
+        <meshStandardMaterial color={(isSelected && !isPlaying) ? '#facc15' : '#3b82f6'} />
+      </mesh>
+
+      {isSelected && !isPlaying && (
+        <mesh position={[railLength / 2, 0, 0]}>
+          <boxGeometry args={[railLength + 0.6, 0.3, 0.6]} />
+          <primitive object={selectedMaterial} attach="material" />
+        </mesh>
+      )}
+    </group>
+  );
+};
+
+// -- Rotary Axis Component --
+export const RotaryAxis: React.FC<ObjectProps> = ({ data, isSelected, isPlaying, onSelect }) => {
+  const axis = data as AxisObject;
+  const rotationAngle = (axis.currentValue % 360) * (Math.PI / 180);
+
+  return (
+    <group 
+      position={[axis.position.x, axis.position.y, axis.position.z]} 
+      rotation={[axis.rotation.x, axis.rotation.y, axis.rotation.z]}
+      onClick={(e) => { e.stopPropagation(); if (!isPlaying) onSelect(axis.id); }}
+    >
+       <Text position={[0, 1.5, 0]} fontSize={0.3} color="white" anchorX="center" anchorY="bottom">
+        {axis.name} ({axis.currentValue.toFixed(0)}°)
+      </Text>
+
+      <mesh position={[0, 0.25, 0]}>
+        <cylinderGeometry args={[0.8, 0.8, 0.5, 32]} />
+        <meshStandardMaterial color="#475569" />
+      </mesh>
+
+      <group rotation={[0, -rotationAngle, 0]} position={[0, 0.6, 0]}>
+        <mesh>
+          <cylinderGeometry args={[0.7, 0.7, 0.2, 32]} />
+          <meshStandardMaterial color={(isSelected && !isPlaying) ? '#facc15' : '#3b82f6'} />
+        </mesh>
+        <mesh position={[0.5, 0.15, 0]}>
+          <boxGeometry args={[0.3, 0.1, 0.1]} />
+          <meshStandardMaterial color="white" />
+        </mesh>
+      </group>
+
+       {isSelected && !isPlaying && (
+        <mesh position={[0, 0.4, 0]}>
+          <cylinderGeometry args={[0.9, 0.9, 1, 16]} />
+           <primitive object={selectedMaterial} attach="material" />
+        </mesh>
+      )}
+    </group>
+  );
+};
+
+// -- Cylinder Component --
+export const Cylinder: React.FC<ObjectProps> = ({ data, isSelected, isPlaying, onSelect }) => {
+  const cyl = data as CylinderObject;
+  const housingLen = 2;
+  const extension = Math.min(cyl.stroke, Math.max(0, cyl.currentPosition));
+
+  return (
+    <group 
+      position={[cyl.position.x, cyl.position.y, cyl.position.z]} 
+      rotation={[cyl.rotation.x, cyl.rotation.y, cyl.rotation.z]}
+      onClick={(e) => { e.stopPropagation(); if (!isPlaying) onSelect(cyl.id); }}
+    >
+      <Text position={[housingLen/2, 0.6, 0]} fontSize={0.3} color="white" anchorX="center" anchorY="bottom">
+        {cyl.name}
+      </Text>
+
+      <mesh rotation={[0, 0, -Math.PI/2]} position={[housingLen/2, 0, 0]}>
+        <cylinderGeometry args={[0.3, 0.3, housingLen, 16]} />
+        <meshStandardMaterial color="#64748b" opacity={0.8} transparent />
+      </mesh>
+
+      <mesh 
+        rotation={[0, 0, -Math.PI/2]} 
+        position={[housingLen + (extension/2), 0, 0]}
+      >
+        <cylinderGeometry args={[0.15, 0.15, extension + 0.2, 16]} />
+        <meshStandardMaterial color="#cbd5e1" metalness={0.8} roughness={0.2} />
+      </mesh>
+       <mesh position={[housingLen + extension, 0, 0]}>
+         <boxGeometry args={[0.2, 0.4, 0.4]} />
+         <meshStandardMaterial color="#475569" />
+       </mesh>
+
+      {isSelected && !isPlaying && (
+         <mesh position={[housingLen/2 + extension/2, 0, 0]}>
+          <boxGeometry args={[housingLen + extension + 0.5, 0.7, 0.7]} />
+          <primitive object={selectedMaterial} attach="material" />
+        </mesh>
+      )}
+    </group>
+  );
+};
+
+// -- Switch Component --
+export const Switch: React.FC<ObjectProps> = ({ data, isSelected, isPlaying, onSelect, onInteract }) => {
+  const sw = data as SwitchObject;
+  
+  return (
+    <group 
+      position={[sw.position.x, sw.position.y, sw.position.z]} 
+      rotation={[sw.rotation.x, sw.rotation.y, sw.rotation.z]}
+      onClick={(e) => { 
+        e.stopPropagation(); 
+        if (!isPlaying) onSelect(sw.id); 
+        if(onInteract) onInteract(sw.id);
+      }}
+    >
+      <Text position={[0, 0.6, 0]} fontSize={0.25} color="white" anchorX="center" anchorY="bottom">
+        {sw.name}
+      </Text>
+      
+      <mesh position={[0, 0.1, 0]}>
+        <boxGeometry args={[0.6, 0.2, 0.6]} />
+        <meshStandardMaterial color="#334155" />
+      </mesh>
+
+      <mesh position={[0, 0.2 + (sw.isOn ? -0.05 : 0), 0]}>
+        <cylinderGeometry args={[0.2, 0.2, 0.2, 16]} />
+        <meshStandardMaterial color={sw.isOn ? '#ef4444' : '#94a3b8'} />
+      </mesh>
+
+      {isSelected && !isPlaying && (
+        <mesh position={[0, 0.15, 0]}>
+          <boxGeometry args={[0.7, 0.5, 0.7]} />
+          <primitive object={selectedMaterial} attach="material" />
+        </mesh>
+      )}
+    </group>
+  );
+};
+
+// -- LED Component --
+export const Led: React.FC<ObjectProps> = ({ data, isSelected, isPlaying, onSelect }) => {
+  const led = data as LedObject;
+  
+  return (
+    <group 
+      position={[led.position.x, led.position.y, led.position.z]} 
+      rotation={[led.rotation.x, led.rotation.y, led.rotation.z]}
+      onClick={(e) => { e.stopPropagation(); if (!isPlaying) onSelect(led.id); }}
+    >
+      <Text position={[0, 0.6, 0]} fontSize={0.25} color="white" anchorX="center" anchorY="bottom">
+        {led.name}
+      </Text>
+      
+      <mesh position={[0, 0.1, 0]}>
+        <cylinderGeometry args={[0.2, 0.25, 0.2, 16]} />
+        <meshStandardMaterial color="#334155" />
+      </mesh>
+
+      <mesh position={[0, 0.3, 0]}>
+        <sphereGeometry args={[0.2, 16, 16]} />
+        <meshStandardMaterial 
+          color={led.isOn ? led.color : '#334155'} 
+          emissive={led.isOn ? led.color : '#000000'}
+          emissiveIntensity={led.isOn ? 2 : 0}
+        />
+      </mesh>
+
+       {isSelected && !isPlaying && (
+        <mesh position={[0, 0.2, 0]}>
+          <boxGeometry args={[0.6, 0.6, 0.6]} />
+          <primitive object={selectedMaterial} attach="material" />
+        </mesh>
+      )}
+    </group>
+  );
+};
+
+export const EditableObject: React.FC<ObjectProps & { enableTransform: boolean }> = (props) => {
+  const { data, enableTransform, isPlaying, onUpdate } = props;
+
+  const handleTransformChange = (e: any) => {
+    if (e.target.object) {
+        const o = e.target.object;
+        onUpdate(data.id, {
+            position: { x: o.position.x, y: o.position.y, z: o.position.z },
+            rotation: { x: o.rotation.x, y: o.rotation.y, z: o.rotation.z }
+        });
+    }
+  };
+
+  const Component = 
+    data.type === ObjectType.AXIS_LINEAR ? LinearAxis :
+    data.type === ObjectType.AXIS_ROTARY ? RotaryAxis :
+    data.type === ObjectType.CYLINDER ? Cylinder :
+    data.type === ObjectType.SWITCH ? Switch :
+    Led;
+
+  return (
+    <>
+      <Component {...props} />
+      {props.isSelected && enableTransform && !isPlaying && (
+        <TransformControls 
+            object={undefined} 
+            position={[data.position.x, data.position.y, data.position.z]}
+            rotation={[data.rotation.x, data.rotation.y, data.rotation.z]}
+            onMouseUp={handleTransformChange}
+            size={0.6}
+            mode="translate"
+        />
+      )}
+    </>
+  );
+};

components/Sidebar.tsx

@@ -0,0 +1,235 @@
+
+import React, { useState } from 'react';
+import { 
+  Trash2, 
+  Settings, Link as LinkIcon, Move, RotateCw, Power, 
+  Download, Upload, Box
+} from 'lucide-react';
+import { 
+  SimObject, ObjectType, AxisObject, 
+  CylinderObject, LedObject, SwitchObject
+} from '../types';
+
+interface SidebarProps {
+  objects: SimObject[];
+  selectedId: string | null;
+  isPlaying: boolean;
+  inputNames: string[];
+  outputNames: string[];
+  onAddObject: (type: ObjectType) => void;
+  onDeleteObject: (id: string) => void;
+  onUpdateObject: (id: string, updates: Partial<SimObject>) => void;
+  onSelect: (id: string | null) => void;
+  onUpdatePortName: (type: 'input' | 'output', index: number, name: string) => void;
+  onExport: () => void;
+  onImport: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const Sidebar: React.FC<SidebarProps> = ({
+  objects,
+  selectedId,
+  isPlaying,
+  inputNames,
+  outputNames,
+  onAddObject,
+  onDeleteObject,
+  onUpdateObject,
+  onUpdatePortName,
+  onExport,
+  onImport
+}) => {
+  const [activeTab, setActiveTab] = useState<'properties' | 'system'>('properties');
+  const selectedObject = objects.find(o => o.id === selectedId);
+
+  const renderInput = (label: string, value: any, onChange: (val: any) => void, type = "text", step?: number) => (
+    <div className="mb-3">
+      <label className="block text-[10px] text-gray-500 mb-1 font-bold uppercase tracking-wider">{label}</label>
+      <input
+        type={type}
+        step={step}
+        className="w-full bg-gray-950 border border-gray-800 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:border-blue-500 transition-colors"
+        value={value}
+        onChange={(e) => {
+             const val = type === 'number' ? parseFloat(e.target.value) : e.target.value;
+             onChange(val);
+        }}
+      />
+    </div>
+  );
+
+  return (
+    <div className="w-80 bg-gray-900 border-l border-gray-800 flex flex-col h-full overflow-hidden select-none shadow-xl shrink-0">
+      
+      {/* Sub-navigation */}
+      <div className="p-4 border-b border-gray-800 bg-gray-950/50 flex items-center justify-between">
+        <h2 className="text-xs font-black uppercase tracking-widest text-gray-400">Layout Config</h2>
+        <div className="flex bg-gray-800 p-1 rounded-lg">
+          <button 
+            onClick={() => setActiveTab('properties')}
+            className={`px-3 py-1 rounded text-[10px] font-black uppercase ${activeTab === 'properties' ? 'bg-gray-600 text-white shadow' : 'text-gray-400 hover:text-gray-300'}`}
+          >
+            Props
+          </button>
+          <button 
+            onClick={() => setActiveTab('system')}
+            className={`px-3 py-1 rounded text-[10px] font-black uppercase ${activeTab === 'system' ? 'bg-gray-600 text-white shadow' : 'text-gray-400 hover:text-gray-300'}`}
+          >
+            System
+          </button>
+        </div>
+      </div>
+
+      {activeTab === 'properties' && (
+        <>
+          {/* Tool Box */}
+          <div className="p-4 grid grid-cols-3 gap-2 border-b border-gray-800 bg-gray-950/20">
+            <ToolBtn icon={<Move size={16}/>} label="Lin Axis" onClick={() => onAddObject(ObjectType.AXIS_LINEAR)} />
+            <ToolBtn icon={<RotateCw size={16}/>} label="Rot Axis" onClick={() => onAddObject(ObjectType.AXIS_ROTARY)} />
+            <ToolBtn icon={<LinkIcon size={16}/>} label="Cylinder" onClick={() => onAddObject(ObjectType.CYLINDER)} />
+            <ToolBtn icon={<Power size={16}/>} label="Switch" onClick={() => onAddObject(ObjectType.SWITCH)} />
+            <ToolBtn icon={<div className="w-3 h-3 rounded-full bg-green-500 shadow-[0_0_8px_#22c55e]"/>} label="LED" onClick={() => onAddObject(ObjectType.LED)} />
+          </div>
+
+          {/* Properties Form */}
+          <div className="flex-1 overflow-y-auto p-4 custom-scrollbar">
+            {!selectedObject ? (
+              <div className="flex flex-col items-center justify-center h-64 text-gray-600 opacity-50 space-y-3">
+                <Box size={32} />
+                <p className="text-[10px] font-black uppercase tracking-widest text-center">Select an object<br/>to edit properties</p>
+              </div>
+            ) : (
+              <div className="space-y-6">
+                <div className="flex justify-between items-center">
+                  <h3 className="text-xs font-black text-blue-500 uppercase tracking-[2px]">Component Detail</h3>
+                  <button onClick={() => onDeleteObject(selectedObject.id)} className="p-1.5 text-red-500 hover:bg-red-500/10 rounded transition-colors">
+                    <Trash2 size={16} />
+                  </button>
+                </div>
+
+                <div className="bg-gray-950/50 p-4 rounded-xl border border-gray-800/50 space-y-4">
+                  {renderInput("Object Name", selectedObject.name, (val) => onUpdateObject(selectedObject.id, { name: val }))}
+                  
+                  {selectedObject.type === ObjectType.SWITCH && (
+                    <>
+                      <div>
+                        <label className="block text-[10px] text-gray-500 mb-1 font-bold uppercase tracking-wider">Assigned Input Port</label>
+                        <select 
+                          className="w-full bg-gray-950 border border-gray-800 rounded px-2 py-1.5 text-sm text-white outline-none focus:border-blue-500"
+                          value={(selectedObject as SwitchObject).inputPort}
+                          onChange={(e) => onUpdateObject(selectedObject.id, { inputPort: parseInt(e.target.value) })}
+                        >
+                          {inputNames.map((name, i) => (
+                            <option key={i} value={i}>X{i}: {name || '---'}</option>
+                          ))}
+                        </select>
+                      </div>
+                      <div className="flex items-center gap-2 pt-2">
+                        <input type="checkbox" className="w-4 h-4 rounded bg-gray-900 border-gray-700" checked={(selectedObject as SwitchObject).isMomentary} onChange={(e) => onUpdateObject(selectedObject.id, { isMomentary: e.target.checked })} />
+                        <span className="text-xs text-gray-300">Momentary Contact</span>
+                      </div>
+                    </>
+                  )}
+
+                  {selectedObject.type === ObjectType.LED && (
+                    <>
+                      <div>
+                        <label className="block text-[10px] text-gray-500 mb-1 font-bold uppercase tracking-wider">Drive Output Port</label>
+                        <select 
+                          className="w-full bg-gray-950 border border-gray-800 rounded px-2 py-1.5 text-sm text-white outline-none focus:border-blue-500"
+                          value={(selectedObject as LedObject).outputPort}
+                          onChange={(e) => onUpdateObject(selectedObject.id, { outputPort: parseInt(e.target.value) })}
+                        >
+                          {outputNames.map((name, i) => (
+                            <option key={i} value={i}>Y{i}: {name || '---'}</option>
+                          ))}
+                        </select>
+                      </div>
+                      {renderInput("Light Color", (selectedObject as LedObject).color, (v) => onUpdateObject(selectedObject.id, { color: v }), "color")}
+                    </>
+                  )}
+
+                  {(selectedObject.type === ObjectType.AXIS_LINEAR || selectedObject.type === ObjectType.AXIS_ROTARY) && (
+                     <div>
+                        <label className="block text-[10px] text-gray-500 mb-2 font-bold uppercase tracking-wider">Manual Position ({(selectedObject as AxisObject).currentValue.toFixed(1)})</label>
+                        <input type="range" min={(selectedObject as AxisObject).min} max={(selectedObject as AxisObject).max} value={(selectedObject as AxisObject).currentValue} step={0.1}
+                          onChange={(e) => onUpdateObject(selectedObject.id, { currentValue: parseFloat(e.target.value), targetValue: parseFloat(e.target.value) })} 
+                          className="w-full h-1.5 bg-gray-800 rounded-lg appearance-none cursor-pointer accent-blue-500" />
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        </>
+      )}
+
+      {activeTab === 'system' && (
+        <div className="flex-1 overflow-y-auto p-4 custom-scrollbar flex flex-col gap-6">
+          <div className="grid grid-cols-2 gap-2">
+             <button onClick={onExport} className="bg-blue-600 hover:bg-blue-500 py-2.5 rounded-lg text-xs font-bold flex items-center justify-center gap-2 transition-all shadow-lg shadow-blue-900/20">
+               <Download size={14}/> EXPORT
+             </button>
+             <label className="bg-purple-600 hover:bg-purple-500 py-2.5 rounded-lg text-xs font-bold flex items-center justify-center gap-2 cursor-pointer transition-all shadow-lg shadow-purple-900/20">
+               <Upload size={14}/> IMPORT
+               <input type="file" className="hidden" accept=".json" onChange={onImport} />
+             </label>
+          </div>
+
+          <div className="space-y-4">
+            <h3 className="text-[10px] font-black text-gray-500 uppercase tracking-widest border-b border-gray-800 pb-2">Hardware Mapping</h3>
+            
+            <div className="space-y-6">
+              <div>
+                <h4 className="text-[10px] font-bold text-green-500 mb-3 uppercase flex items-center gap-2">
+                  <div className="w-1.5 h-1.5 rounded-full bg-green-500"/> Inputs (X0 - X15)
+                </h4>
+                <div className="grid gap-1">
+                  {inputNames.map((name, i) => (
+                    <div key={i} className="flex items-center gap-2 group">
+                      <span className="w-6 text-[9px] text-gray-600 font-mono">X{i.toString().padStart(2, '0')}</span>
+                      <input 
+                        className="flex-1 bg-gray-950 border border-gray-800 rounded px-2 py-1 text-[11px] focus:border-green-500 outline-none transition-colors"
+                        placeholder="Tag name..."
+                        value={name}
+                        onChange={(e) => onUpdatePortName('input', i, e.target.value)}
+                      />
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div>
+                <h4 className="text-[10px] font-bold text-red-500 mb-3 uppercase flex items-center gap-2">
+                   <div className="w-1.5 h-1.5 rounded-full bg-red-500"/> Outputs (Y0 - Y15)
+                </h4>
+                <div className="grid gap-1">
+                  {outputNames.map((name, i) => (
+                    <div key={i} className="flex items-center gap-2 group">
+                      <span className="w-6 text-[9px] text-gray-600 font-mono">Y{i.toString().padStart(2, '0')}</span>
+                      <input 
+                        className="flex-1 bg-gray-950 border border-gray-800 rounded px-2 py-1 text-[11px] focus:border-red-500 outline-none transition-colors"
+                        placeholder="Tag name..."
+                        value={name}
+                        onChange={(e) => onUpdatePortName('output', i, e.target.value)}
+                      />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const ToolBtn: React.FC<{ icon: React.ReactNode, label: string, onClick: () => void }> = ({ icon, label, onClick }) => (
+  <button 
+    onClick={onClick}
+    className="flex flex-col items-center justify-center p-3 bg-gray-950 border border-gray-800 rounded-xl hover:bg-gray-800 hover:border-blue-500 hover:scale-[1.05] transition-all group"
+  >
+    <div className="mb-2 text-gray-400 group-hover:text-blue-400 transition-colors">{icon}</div>
+    <span className="text-[9px] text-gray-500 font-black uppercase tracking-tight">{label}</span>
+  </button>
+);